:root { --ink:#1b1b22; --panel:#14161f; --paper:#f5efd9; --gold:#ffe26b; --red:#c0392b; --blue:#1f5fa8; }
  * { box-sizing: border-box; }
  html, body { margin:0; background:#0b0c12; color:#e8e8e8; font-family: "Courier New", Courier, monospace; }
  button { font-family: inherit; background:#232735; color:#eee; border:1px solid #4a5068; padding:6px 10px; cursor:pointer; border-radius:3px; }
  button:hover { background:#2f3549; }
  button.sel { background:#5a4a12; border-color:var(--gold); color:var(--gold); }
  button:disabled { opacity:.4; cursor:default; }
  #title { max-width:720px; margin:40px auto; padding:24px; background:var(--panel); border:1px solid #333a50; border-radius:6px; }
  #title h1 { font-size:44px; letter-spacing:4px; margin:0 0 4px; color:var(--gold); }
  #title h2 { font-size:14px; font-weight:normal; color:#aab; margin:0 0 18px; }
  #title .opts { display:grid; grid-template-columns: 1fr 1fr; gap:10px 18px; margin:16px 0; }
  #title label { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; }
  #title select, #title input { font-family:inherit; background:#232735; color:#eee; border:1px solid #4a5068; padding:5px; }
  #title .big { font-size:18px; padding:10px 26px; background:#2f6b3a; border-color:#5fb36e; }
  #title .how { font-size:13px; line-height:1.55; color:#cfd2dc; margin-top:16px; border-top:1px solid #333a50; padding-top:12px; }
  #title .how b { color:var(--gold); }
  #shell { display:flex; gap:10px; padding:8px; align-items:flex-start; flex-wrap:wrap; }
  #stage { position:relative; }
  #game { display:block; background:#000; border:2px solid #333a50; image-rendering:auto; }
  #panel { width:300px; background:var(--panel); border:1px solid #333a50; border-radius:4px; padding:10px; font-size:13px; }
  @media (max-width:1040px) { #panel { width:100%; } }
  table.line { border-collapse:collapse; width:100%; font-size:12px; }
  table.line th, table.line td { padding:1px 3px; text-align:center; border-bottom:1px solid #2a2f40; }
  table.line th.cur { color:var(--gold); }
  table.line td.tm { font-weight:bold; text-align:left; }
  table.line td.b { font-weight:bold; color:#fff; }
  #sit { margin:8px 0; font-size:15px; display:flex; justify-content:space-between; align-items:center; }
  .dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#2a2f40; margin:0 1px; vertical-align:middle; }
  .dot.g { background:#6fe36f; } .dot.r { background:#ff6b6b; }
  #diamond { position:relative; width:60px; height:60px; margin:0 auto 6px; }
  .base { position:absolute; width:14px; height:14px; background:#2a2f40; transform:rotate(45deg); border:1px solid #4a5068; }
  .base.on { background:var(--gold); }
  #r1 { right:4px; top:24px; } #r2 { left:23px; top:4px; } #r3 { left:4px; top:24px; }
  .box { background:#0f1118; border:1px solid #2a2f40; border-radius:3px; padding:6px 8px; margin:6px 0; line-height:1.45; }
  .dim { color:#8b93a8; }
  .attr { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
  .ab { display:inline-flex; align-items:center; gap:3px; font-size:10px; color:#aab; }
  .ab em { display:inline-block; width:34px; height:6px; background:#2a2f40; border-radius:2px; overflow:hidden; }
  .ab em i { display:block; height:100%; background:#7fb0ff; }
  .stam { height:7px; background:#2a2f40; border-radius:2px; margin:4px 0 2px; overflow:hidden; }
  .stam div { height:100%; background:#7fd77f; }
  #msg { min-height:36px; color:#fff; font-weight:bold; }
  #log { font-size:11px; color:#9aa3b8; max-height:110px; overflow:hidden; }
  #hint { font-size:12px; color:var(--gold); min-height:34px; }
  .pad { display:none; margin:6px 0; }
  .pad button { padding:8px 10px; margin:2px; font-size:13px; }
  #locPad { display:grid; grid-template-columns: repeat(3, 1fr); gap:3px; width:150px; margin-top:4px; }
  #locPad button { padding:8px 0; }
  .bar { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
  .bar button { font-size:11px; padding:5px 7px; }
  #cardWrap, #mgr { position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; z-index:10; padding:10px; }
  #cardWrap canvas { max-width:100%; max-height:92vh; border:3px solid #6b5f3f; background:#2a2415; }
  #closeCard, #closeMgr { position:absolute; top:14px; right:18px; }
  #mgrBox { width:min(920px, 96vw); max-height:92vh; overflow:auto; background:var(--panel); border:1px solid #333a50; padding:14px; border-radius:5px; }
  .mgrHead { font-size:18px; color:var(--gold); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
  .tabs button { margin-right:4px; }
  table.mgrT { width:100%; border-collapse:collapse; font-size:12px; margin:6px 0; }
  table.mgrT td { padding:4px 6px; border-bottom:1px solid #2a2f40; }
  table.mgrT tr.slot, table.mgrT tr.bench { cursor:pointer; }
  table.mgrT tr.slot:hover, table.mgrT tr.bench:hover { background:#1d2130; }
  table.mgrT tr.sel { background:#3a3112; }
  table.mgrT tr.used { opacity:.4; }
  .defRow { margin:8px 0; } .defRow button { margin-right:4px; }
  .mgrBtns { margin:6px 0; }
  #footer { font-size:11px; color:#666d80; text-align:center; padding:8px; }