:root{color-scheme:dark;--ink:#f6ecd9;--muted:#c9bea7;--gold:#efba77;--line:#aa8b594d;--panel:#1b201c;font:15px/1.5 system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:#151917;color:var(--ink)}main{min-height:100svh;display:grid;grid-template-columns:minmax(275px,310px) 1fr;grid-template-rows:auto 1fr auto auto auto;position:relative;overflow:hidden;padding:30px;gap:14px 24px;max-width:1900px;margin:auto}.intro,.card,nav,.toolbar,#hint,footer{z-index:1}.intro{grid-column:1;grid-row:1;pointer-events:none}.brand,.eyebrow,footer,#hint{font-size:.7rem;letter-spacing:.19em;font-weight:650}.brand{display:flex;align-items:center;gap:10px;margin-bottom:42px}.crest{border:1px solid var(--line);color:var(--gold);display:grid;place-items:center;width:31px;height:31px;font-size:17px}.brand b,.eyebrow,.ua{color:var(--gold)}i{display:inline-block;width:12px;border-top:1px solid var(--gold);vertical-align:middle;margin:0 5px}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:.97;margin:.25em 0}h1{font-size:clamp(62px,6.2vw,108px);letter-spacing:-.065em}h1 em{color:var(--gold);font-size:.68em}h2{font-size:30px;line-height:1.06}p{color:var(--muted);margin:.65em 0 1em}.intro p{max-width:250px;text-shadow:0 1px 5px #10130f}.ua{font:italic 18px Georgia,serif;margin-top:15px}.card{grid-column:1;grid-row:2;align-self:end;background:#191d19ee;border:1px solid var(--line);padding:19px;min-height:215px}.actions,.toolbar{display:flex;flex-wrap:wrap;gap:6px}button{font:inherit;color:var(--ink);background:#222821;border:1px solid var(--line);padding:7px 11px;cursor:pointer;touch-action:manipulation}button:hover,button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}.primary{background:var(--gold);color:#21190f;border-color:var(--gold);font-weight:700}.primary:hover{background:#ffe1ac;color:#21190f}.primary span{padding-left:8px}button:disabled{opacity:.55;cursor:wait}nav{grid-column:1 / -1;display:flex;gap:6px;flex-wrap:wrap}nav small{margin-right:8px;color:var(--gold)}.toolbar{grid-column:2;grid-row:2;align-self:end;justify-self:end}#hint{grid-column:2;grid-row:3;align-self:center;justify-self:end;color:var(--muted);pointer-events:none;text-align:right}footer{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;color:var(--muted)}#stage{position:absolute;inset:0 0 55px 235px;overflow:hidden;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}#pins{position:absolute;inset:0;pointer-events:none}.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border-radius:50%;width:34px;height:34px;padding:0;background:#22251cf0;color:var(--gold);border-color:#cc9e62;font-size:11px;box-shadow:0 0 0 4px #171b1755}#status{position:absolute;top:15px;right:15px;font-size:.8rem;background:#181d18d9;padding:5px 10px;pointer-events:none}#status:empty{display:none}dialog{background:var(--panel);border:1px solid var(--line);color:var(--ink);max-width:min(540px,92vw);padding:27px}dialog::backdrop{background:#000b}a{color:var(--gold)}.close{float:right}
@media(min-width:751px){main{min-height:max(715px,100svh)}}
@media(max-width:950px) and (min-width:751px){#hint{grid-row:4}}
@media(max-width:750px){main{display:flex;flex-direction:column;padding:16px;gap:10px}.brand{margin-bottom:17px}h1 br{display:none}h1{font-size:clamp(43px,10vw,75px)}.intro p{max-width:none;margin-bottom:6px}.ua{margin:0}#stage{position:relative;inset:auto;height:clamp(315px,56svh,600px);margin-inline:-16px;order:1}.toolbar{order:2;align-self:start}.card{order:4;width:100%;min-height:0}nav{order:3}#hint{order:2;align-self:start;text-align:left}footer{order:5}.card p{margin-bottom:8px}footer span{margin-left:8px}}