:root{color-scheme:dark;--gold:#eacb80;--ink:#061720;--aqua:#57dad6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#174452,#06131c 75%);color:#f8edd1;font-family:system-ui,Segoe UI,sans-serif;height:100dvh;overflow:hidden}button,select,input{font:inherit}button,select{color:#f9edcf;background:linear-gradient(#254b53,#102d38);border:1px solid #a18b56;border-radius:8px;min-height:42px;padding:9px 17px;cursor:pointer}button:hover{background:#316570}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}button:disabled{opacity:.38;cursor:default}.primary{background:linear-gradient(135deg,#e2c276,#b98437);color:#171d20;font-weight:800;border-color:#ffe4a0}.primary:hover{background:#f2d590}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #b498534d;background:#061720b0}.brand{font-family:Georgia,serif;letter-spacing:6px;font-size:28px;text-decoration:none;color:var(--gold)}.brand small{display:block;font:8px system-ui;letter-spacing:2px}header button{padding:6px 12px;min-height:36px}#game{height:calc(100dvh - 64px);display:flex;flex-direction:column;align-items:center;padding:6px 12px 8px;gap:5px}#hud{width:min(100%,1000px);display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;min-height:26px;letter-spacing:1px}#score{color:var(--gold);font-size:22px;font-variant-numeric:tabular-nums}#field{position:relative;min-height:0;flex:1;aspect-ratio:9/7;max-width:100%;border:1px solid #bda367;border-radius:10px;overflow:hidden;box-shadow:0 12px 60px #0008}canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none}#controls{width:min(100%,900px);display:flex;gap:12px;align-items:center;min-height:53px}#controls span{flex:1;color:var(--gold);font-size:12px;letter-spacing:1px}#fire{min-width:130px;background:linear-gradient(#d3af58,#92702e);color:white;font-weight:800}#swap{min-width:100px}#fire,#swap{touch-action:none;user-select:none}#danger{position:absolute;top:8%;left:0;right:0;text-align:center;color:#ffb69d;font-weight:bold;letter-spacing:3px;pointer-events:none}#effects{position:absolute;top:6px;left:12px;right:12px;font-size:12px;color:#83eee3;pointer-events:none}#toast{position:absolute;bottom:12%;left:10%;right:10%;text-align:center;color:#fff4cb;text-shadow:0 2px 5px black;pointer-events:none}dialog{border:1px solid #d0b573;background:radial-gradient(ellipse at top,#19444d,#091f2b 80%);color:#f7ead0;border-radius:18px;max-width:min(900px,94vw);width:820px;max-height:88dvh;padding:30px;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#020d16aa;backdrop-filter:blur(5px)}dialog h1{font:clamp(42px,8vw,76px) Georgia,serif;letter-spacing:10px;text-align:center;margin:8px 0;color:var(--gold)}dialog h2{font:30px Georgia,serif;color:var(--gold);margin-top:8px}dialog p{color:#c1d3d1;line-height:1.6}.kicker{color:var(--aqua);letter-spacing:3px;font-size:11px;text-transform:uppercase}.hero{text-align:center}.hero .seal{font-size:48px;color:var(--gold)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.actions>*{flex:1}.muted{font-size:12px;color:#a2bab9}.map{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.map button{padding:8px 3px;font-size:16px;position:relative}.map small{display:block;font-size:9px;color:#ecd698}.map .complete{border-color:#5fc7b1;background:#205047}fieldset{border:1px solid #507379;border-radius:8px;margin:14px 0}label.setting{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:9px 0}input[type=range]{width:45%;accent-color:var(--gold)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cards div{border:1px solid #446065;padding:14px;border-radius:8px}.divider{height:1px;background:linear-gradient(90deg,transparent,#c2a366,transparent);margin:20px 0}.guide{font-size:14px}.guide li{margin:8px 0;line-height:1.5}@media(max-width:600px){header{height:55px;padding:0 10px}.brand{font-size:22px;letter-spacing:4px}.brand small{font-size:6px}header button{padding:5px 8px;font-size:12px}#game{height:calc(100dvh - 55px);padding:4px;gap:4px}#hud{font-size:10px;letter-spacing:0}#score{font-size:18px}#controls{gap:8px;min-height:68px}#controls span{font-size:10px}#fire{min-width:100px;min-height:58px}#swap{min-width:86px;min-height:58px}dialog{padding:20px}.map{grid-template-columns:repeat(6,1fr);gap:6px}.cards{grid-template-columns:1fr}}@media(max-height:500px){header{height:40px}.brand small{display:none}#game{height:calc(100dvh - 40px);padding:2px 110px}#hud{min-height:20px}#controls{position:absolute;bottom:12px;left:8px;right:8px;width:auto;pointer-events:none}#controls span{display:none}#controls button{pointer-events:auto}#fire{margin-left:auto}#field{width:auto;height:100%;}dialog{max-height:96dvh}header button{min-height:30px;padding:3px 10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Keep canvas coordinates and its displayed aspect ratio identical on every viewport. */
#field{flex:0 0 auto}#game{justify-content:center}#hud,#controls{flex-shrink:0}

/* Games navigation uses normal header/menu flow, never the playfield overlay. */
a.return-games{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;box-sizing:border-box;color:inherit;font:600 13px/1.25 system-ui,sans-serif;letter-spacing:normal;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;border-radius:5px}
a.return-games:hover{background:#ffffff14}a.return-games:focus-visible{outline:2px solid currentColor;outline-offset:2px}