/* Layout: one 16:9 arcade screen centred on a dark field; menus are full-viewport overlays above it. Single dark look on purpose. */
:root{
  --ink:#130f1f; --panel:#1c1630; --panel-2:#241d3d; --line:#3a3060;
  --text:#ece6ff; --muted:#a69ecf; --gold:#ffcc33; --cyan:#7ef0ff; --red:#ff5a6a; --green:#3ad06a;
  --display:'Press Start 2P', ui-monospace, monospace;
  --body:'VT323', ui-monospace, 'Courier New', monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
html{background:var(--ink)}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:21px;line-height:1.25;margin:0;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;overflow-x:hidden}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.frame{position:relative;width:min(100%, calc((100dvh - 24px) * 16 / 9));aspect-ratio:16/9;max-width:100%;
  border:3px solid var(--line);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--panel-2);background:#000}
#cv{width:100%;height:100%;touch-action:none}
.hudbtns{position:absolute;top:calc(100% / 180 * 18);right:6px;display:flex;gap:6px}
.hudbtns button{font-family:var(--display);font-size:8px;padding:5px 6px;background:rgba(19,15,31,.75);color:var(--text);border:2px solid var(--line);cursor:pointer}
button{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* touch pad: overlay in landscape, below the screen in portrait */
.pad{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;width:min(100%, calc((100dvh - 24px) * 16 / 9));pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}
.pad[hidden]{display:none!important}
.cluster{display:flex;gap:8px;pointer-events:auto}
.pad button{width:58px;height:58px;border-radius:50%;border:3px solid var(--line);background:rgba(36,29,61,.72);color:var(--text);font-family:var(--display);font-size:13px;touch-action:none;-webkit-tap-highlight-color:transparent}
.pad button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pad button small{display:block;font-size:6px;margin-top:3px;opacity:.8}
@media (orientation:landscape){ .pad{position:fixed;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(10px + env(safe-area-inset-bottom, 0px));width:auto} }
@media (orientation:portrait){ .pad{margin-top:18px} body{justify-content:flex-start;padding-top:24px} }

/* overlays */
.screen{position:fixed;inset:0;z-index:20;background:rgba(19,15,31,.95);overflow-y:auto;display:flex;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.screen.modal{z-index:30;background:rgba(10,7,18,.86)}
.panel{width:100%;max-width:560px;margin:auto;display:flex;flex-direction:column;gap:18px}
.logo{width:100%;max-width:520px;height:auto;margin:0 auto}
h1,h2{font-family:var(--display);font-weight:400;margin:0;line-height:1.5;text-wrap:balance}
h1{font-size:18px;color:var(--gold)}
h2{font-size:11px;color:var(--gold);letter-spacing:.05em}
p{margin:0}
.muted{color:var(--muted)}
.lead{color:var(--muted);text-align:center;max-width:46ch;margin:0 auto}
.box{background:var(--panel);border:2px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:12px}
label{font-family:var(--display);font-size:9px;color:var(--muted);letter-spacing:.06em}
input,textarea{font-family:var(--body);font-size:22px;background:var(--ink);color:var(--text);border:2px solid var(--line);padding:6px 10px;width:100%;box-sizing:border-box;border-radius:0}
textarea{font-size:19px;resize:none;line-height:1.2}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > input{flex:1 1 180px;width:auto;min-width:0}
.btn{font-family:var(--display);font-size:10px;letter-spacing:.04em;padding:12px 14px;border:3px solid var(--gold);background:var(--gold);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.3}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.tabs{display:flex;gap:6px}
.tabs button{font-family:var(--display);font-size:8px;padding:7px 9px;background:transparent;color:var(--muted);border:2px solid var(--line);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}
ol.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
ol.board li{display:grid;grid-template-columns:2.4em 1fr auto 5.2em;gap:8px;padding:3px 6px;align-items:baseline}
ol.board li:nth-child(odd){background:rgba(255,255,255,.03)}
ol.board li .rk{color:var(--gold)}
ol.board li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
ol.board li .pr{color:var(--cyan)}
ol.board li .sc{text-align:right;color:var(--muted)}
ol.board li.empty{display:block;color:var(--muted)}
.keys{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:19px}
.k{font-family:var(--display);font-size:8px;background:var(--ink);border:2px solid var(--line);padding:2px 5px;color:var(--cyan);margin-right:4px}
.story{min-height:9.5em;white-space:pre-wrap;font-size:23px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat{background:var(--panel);border:2px solid var(--line);padding:10px 4px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-weight:400;font-size:14px;color:var(--gold)}
.stat span{font-family:var(--display);font-size:7px;color:var(--muted);letter-spacing:.06em}
.share-img{width:100%;height:auto;border:2px solid var(--line)}
.msg:empty{display:none}
.msg{min-height:1.2em;color:var(--cyan)}
.msg.err{color:var(--red)}
.note{font-size:17px;color:var(--muted)}
.code{font-family:var(--display);font-size:14px;color:var(--gold);text-align:center;background:var(--ink);border:2px dashed var(--gold);padding:14px;letter-spacing:.08em;user-select:all}
.center{text-align:center}
.toplinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:21px}
.toplinks a{color:var(--cyan);font-weight:700;text-decoration:none;border-bottom:2px solid transparent}
.toplinks a:hover{border-bottom-color:var(--cyan)}
.ctl-h{font-family:var(--display);font-size:9px;color:var(--gold);letter-spacing:.06em;margin:0}
.gfoot{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;border-top:2px solid var(--line);padding-top:16px;color:var(--muted);font-size:18px}
.gfoot a{color:var(--cyan)}
.gfoot .conn span{color:var(--text)}
.foot{font-size:16px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }

/* ---- added for levels ---- */
.lvl{display:flex;flex-direction:column;gap:10px}
.btn.l2{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn.locked{background:transparent;border-color:var(--line);color:var(--muted);cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--cyan);text-decoration:underline;cursor:pointer;font:inherit}
.medal-big{width:132px;height:auto;margin:0 auto}
.outro{color:var(--text);text-align:center;max-width:46ch;margin:0 auto;font-size:22px}
.unlock{font-family:var(--display);font-size:11px;color:var(--cyan);text-align:center;letter-spacing:.05em}
ol.board li .md{margin-left:6px}