@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap');

:root { --ink:#f0f2ed; --muted:#929a95; --line:#343a36; --paper:#0b0e0c; --signal:#d8ff56; }
* { box-sizing:border-box; letter-spacing:0; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); font-family:'Manrope',system-ui,sans-serif; }
a { color:inherit; }
button { color:inherit; font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.skip-link { position:fixed; z-index:30; top:10px; left:10px; padding:10px 12px; background:var(--signal); color:#10130f; font:500 10px 'DM Mono',monospace; text-decoration:none; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.round-header { position:fixed; z-index:10; top:0; left:0; right:0; min-height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 22px; border-bottom:1px solid var(--line); background:rgba(11,14,12,.9); backdrop-filter:blur(15px); }
.brand { display:inline-flex; align-items:center; gap:10px; width:max-content; text-decoration:none; }
.brand-symbol { width:34px; height:34px; display:grid; place-items:center; background:var(--signal); color:#10130f; font:600 12px 'DM Mono',monospace; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:11px; }
.brand small { margin-top:2px; color:var(--muted); font:400 7px 'DM Mono',monospace; }
.round-id { text-align:center; }
.round-id span,.round-id strong { display:block; font:500 8px 'DM Mono',monospace; }
.round-id span { color:var(--muted); }
.round-id strong { margin-top:4px; font-size:10px; }
nav { justify-self:end; display:flex; gap:7px; }
nav a,nav button { min-height:34px; padding:0 12px; display:grid; place-items:center; border:1px solid var(--line); background:transparent; color:var(--ink); font:500 9px 'DM Mono',monospace; text-decoration:none; cursor:pointer; }
nav a:hover,nav button:hover { border-color:var(--signal); }
.world-stage { position:fixed; inset:66px 0 0; background:#020403; }
#world-frame { width:100%; height:100%; display:block; border:0; background:#020403; }
.result-label { position:absolute; left:18px; top:18px; z-index:2; min-width:215px; padding:12px 14px; border:1px solid rgba(240,242,237,.18); background:rgba(7,10,8,.82); backdrop-filter:blur(12px); pointer-events:none; }
.result-label span,.result-label small { display:block; color:var(--muted); font:400 8px 'DM Mono',monospace; }
.result-label strong { display:block; margin:7px 0 4px; font-size:13px; }
.stage-actions { position:absolute; z-index:3; right:18px; bottom:78px; display:flex; gap:6px; }
.stage-actions button,.stage-actions a { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(240,242,237,.22); background:rgba(7,10,8,.86); color:var(--ink); font-size:17px; text-decoration:none; cursor:pointer; backdrop-filter:blur(12px); }
.stage-actions button:hover,.stage-actions a:hover { border-color:var(--signal); color:var(--signal); }
dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line); background:#111512; color:var(--ink); }
dialog::backdrop { background:rgba(2,4,3,.78); backdrop-filter:blur(7px); }
.dialog-head { min-height:56px; display:flex; justify-content:space-between; align-items:center; padding:0 18px; border-bottom:1px solid var(--line); color:var(--muted); font:500 9px 'DM Mono',monospace; }
.dialog-head button { width:32px; height:32px; border:1px solid var(--line); background:transparent; font-size:20px; cursor:pointer; }
.dialog-body { padding:38px; overflow:auto; }
.eyebrow { margin:0 0 15px; color:var(--signal); font:500 9px 'DM Mono',monospace; }
h1 { margin:0; font-size:42px; line-height:1; }
.dialog-body > p:not(.eyebrow) { margin:22px 0 0; color:#b5bbb7; font-size:14px; line-height:1.7; }
dl { margin:30px 0 0; border-top:1px solid var(--line); }
dl div { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
dt { color:var(--muted); font:400 9px 'DM Mono',monospace; }
dd { margin:0; font-size:12px; }
.record-note { font-size:11px!important; }
.dialog-links { display:flex; gap:8px; margin-top:28px; }
.dialog-links a { padding:11px 13px; border:1px solid var(--line); font:500 9px 'DM Mono',monospace; text-decoration:none; }
.dialog-links a:first-child { border-color:var(--signal); background:var(--signal); color:#10130f; }

@media(max-width:680px) {
  .round-header { min-height:58px; grid-template-columns:1fr auto; padding:0 12px; }
  .round-id { display:none; }
  .brand small { display:none; }
  nav a,nav button { min-height:32px; padding:0 9px; font-size:8px; }
  .world-stage { inset:58px 0 0; }
  .result-label { left:10px; top:10px; min-width:178px; padding:9px 11px; }
  .result-label span,.result-label small { font-size:7px; }
  .stage-actions { right:10px; bottom:62px; }
  .stage-actions button,.stage-actions a { width:38px; height:38px; }
  .dialog-body { padding:28px 22px; }
  h1 { font-size:34px; }
  dl div { grid-template-columns:112px 1fr; gap:12px; }
}

@media(prefers-reduced-motion:reduce) { .skip-link { transition:none; } }