:root{
    --bg:#1c2029;
    --panel:#2b313f;--panel-2:#333a4b;--line:#3a4255;
    --ink:#e7e9ee;--muted:#95a0b3;--accent:#cf7a3f;--bad:#c0564b;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:#141821;color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;
    overflow:hidden;user-select:none;-webkit-user-select:none}
  #wrap{width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:8px;padding:8px}

  #topbar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
  #scoreboard{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
  .pill{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;min-width:0}
  .pill.dead{opacity:.32}
  .chip{width:11px;height:11px;border-radius:3px;flex:none}
  .pill .name{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
  .pill .pct{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600}
  #clock{font-size:22px;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.04em;padding:0 6px;flex:none}
  #clock.warn{color:var(--accent)}

  #stage{position:relative;flex:1;min-height:0;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
  #game{display:block;width:100%;height:100%;touch-action:none;cursor:grab;image-rendering:pixelated}
  #game.grabbing{cursor:grabbing}
  #minimap{position:absolute;right:10px;bottom:10px;width:150px;height:101px;background:rgba(20,24,32,.85);border:1px solid var(--line);border-radius:8px;cursor:pointer;touch-action:none;image-rendering:pixelated}

  #flash{position:absolute;left:50%;top:12px;transform:translateX(-50%) translateY(-6px);background:rgba(20,24,32,.92);border:1px solid var(--line);color:var(--ink);font-size:12px;letter-spacing:.03em;padding:7px 13px;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .18s,transform .18s;white-space:nowrap}
  #flash.show{opacity:1;transform:translateX(-50%) translateY(0)}

  #bottombar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:12px}
  .stat{display:flex;align-items:baseline;gap:6px}
  .stat .k{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.1em}
  .stat .v{font-size:16px;font-variant-numeric:tabular-nums;font-weight:700}
  .commit{display:flex;align-items:center;gap:9px}
  .commit .k{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.1em}
  #pct{width:130px;accent-color:var(--accent);height:22px;cursor:pointer}
  #pctV{font-variant-numeric:tabular-nums;font-weight:700;min-width:38px}
  .commit .ctx{color:var(--muted)}.commit .ctx b{color:var(--ink);font-variant-numeric:tabular-nums}
  #cellInfo{color:var(--muted)}
  #buildbar{display:flex;gap:6px}
  .bbtn{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap}
  .bbtn:hover:not(:disabled){border-color:var(--accent)}
  .bbtn.on{background:var(--accent);color:#141821;border-color:var(--accent);font-weight:700}
  .bbtn:disabled{opacity:.4;cursor:default}
  .bbtn.cooling{opacity:.55;color:var(--muted)}
  #spawnHint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(20,24,32,.92);border:1px solid var(--accent);color:var(--ink);font-size:13px;letter-spacing:.02em;padding:8px 16px;border-radius:10px;pointer-events:none;white-space:nowrap;display:none;z-index:3}
  .spacer{flex:1}
  #hint{color:var(--muted);font-size:11px;text-align:right}

  #overlay{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:rgba(20,24,32,.68);backdrop-filter:blur(2px)}
  #overlay.hidden{display:none}
  #ovbox{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:22px}
  #otitle{font-size:27px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  #osub{color:var(--muted);font-size:12.5px;line-height:1.7;max-width:480px}
  #osub b{color:var(--ink);font-weight:600}
  #osub a.howto{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
  .field{display:flex;flex-direction:column;gap:7px;align-items:center}
  .field label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  #nameIn{font-family:var(--mono);font-size:15px;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 14px;width:220px}
  #nameIn:focus{outline:2px solid var(--accent);outline-offset:1px}
  .namerow{display:flex;gap:8px;align-items:center}
  #tagIn{font-family:var(--mono);font-size:15px;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 6px;width:66px;text-transform:uppercase;letter-spacing:.12em}
  #tagIn:focus{outline:2px solid var(--accent);outline-offset:1px}
  #tagIn::placeholder{color:var(--muted)}
  input[type=color].sw{padding:0;background:none;-webkit-appearance:none;appearance:none}
  input[type=color].sw::-webkit-color-swatch-wrapper{padding:0}
  input[type=color].sw::-webkit-color-swatch{border:none;border-radius:6px}
  input[type=color].sw::-moz-color-swatch{border:none;border-radius:6px}
  .pickhint{font-size:10px;color:var(--muted);margin-top:2px}
  #baseInfo{color:var(--bad);font-weight:600}
  #baseInfo.ok{display:none}
  #swatches{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:340px}
  .sw{width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .08s}
  .sw:hover{transform:scale(1.08)}.sw.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg)}
  .sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .customwrap{position:relative;display:inline-block;line-height:0;border-radius:8px}
  .customwrap>.sw{display:block}
  .customwrap.sel>.sw{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg)}
  .customwrap>.pen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);pointer-events:none}
  .numin{font-family:var(--mono);font-size:15px;text-align:center;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 8px;width:88px}
  .numin:focus{outline:2px solid var(--accent);outline-offset:1px}
  #opps{display:flex;gap:6px}
  .seg{font-family:var(--mono);font-size:13px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer}
  .seg.sel{color:var(--ink);background:var(--panel-2);border-color:var(--accent)}
  .seg:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  #mode{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
  #mpBtns{display:flex;gap:6px;justify-content:center}
  #mpBox{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:8px;width:min(440px,86vw)}
  .mpl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:flex-start}
  .mprow{display:flex;gap:6px;width:100%;align-items:stretch}
  #mpOut,#mpIn{flex:1;height:52px;resize:none;font-family:var(--mono);font-size:10px;color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;word-break:break-all}
  #mpOut:focus,#mpIn:focus{outline:2px solid var(--accent);outline-offset:1px}
  #mpStatus{font-size:11px;color:var(--accent);min-height:15px}
  #mpOut.code6{height:auto;font-size:26px;font-weight:800;letter-spacing:.28em;text-align:center;text-transform:uppercase;padding:12px 6px 12px 12px;color:var(--accent)}
  .sbc{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 11px}
  .sbc .chip{width:11px;height:11px;border-radius:3px;flex:none}
  .sbc .sbk{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.08em}
  .sbc .sbv{font-size:14px;font-variant-numeric:tabular-nums;font-weight:700}
  .sbc .sbsep{color:var(--line)}
  #standings{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:240px}
  #standings .row{display:flex;align-items:center;gap:9px}
  #standings .row .nm{flex:1;text-align:left;text-transform:uppercase;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
  #standings .row .vv{font-variant-numeric:tabular-nums;font-weight:700}
  #obtn{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#141821;background:var(--accent);border:none;border-radius:10px;padding:12px 30px;cursor:pointer;transition:transform .1s,filter .15s}
  #obtn:hover{filter:brightness(1.08)}#obtn:active{transform:scale(.97)}#obtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

  @media (max-width:560px){
    #clock{font-size:18px}.pill .name{display:none}#otitle{font-size:21px}
    #minimap{width:104px;height:70px}#hint{display:none}#pct{width:104px}
    #bottombar{gap:12px;font-size:11px}#cellInfo{display:none}
  }

  /* On the main menu: blur/dim the live demo behind the panel and hide the in-game HUD (the top
     colour percentages + 0:00 timer confused first-time players). */
  body.menu #game{filter:blur(7px) brightness(.5) saturate(.85);transition:filter .2s}
  body.menu #topbar{display:none}
  body.menu #minimap{visibility:hidden}
  body.menu #menuBtn{display:none}

  /* subtle vignette so the board reads with a little depth */
  #vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px rgba(0,0,0,.42)}
  body.menu #vig{display:none}

  /* "More modes" disclosure in the setup screen */
  .moretoggle{opacity:.85}
  .morebox{flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .modedesc{flex-basis:100%;font-size:12px;color:var(--muted);text-align:center;margin-top:8px;min-height:16px}

  /* secondary "Main menu" button on the results screen */
  #menuBtn2{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:9px;padding:9px 20px;margin-top:9px;cursor:pointer}
  #menuBtn2:hover{color:var(--ink);border-color:var(--accent)}