:root{color-scheme:dark;--cream:#f6e5c9;--muted:#c2ad96;--line:#665243;--accent:#edbd73;--brown:#87543a;--hole:#362017}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 15%,#3b2c23,#241b16 66%,#1b1512);color:var(--cream);font-family:system-ui,sans-serif;min-height:100vh}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffdd9b;outline-offset:3px}
.masthead{min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px clamp(12px,5vw,72px);border-bottom:1px solid #ffffff1f;background:#211814}
.masthead nav{display:flex;gap:8px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-size:.68rem;letter-spacing:.13em;font-weight:750;white-space:nowrap}
.brand span{color:var(--cream);font-size:.86rem}.brand i{width:4px;height:4px;background:#de9c64;border-radius:50%}
.utility,.secondary,.primary{padding:.56rem .86rem;border-radius:5px;border:1px solid var(--line);background:#2c211a;font-weight:650;font-size:.85rem;white-space:nowrap}
.utility:hover,.secondary:hover{background:#443126}.primary{background:var(--accent);color:#21150f;border-color:var(--accent)}.primary:hover{background:#ffcf8a}.primary:disabled{background:#4c3a2b;color:#c7b49e;border-color:#725b45}
main{max-width:1060px;margin:auto;padding:0 14px 28px}
.title{text-align:center;margin:20px auto 16px}
.eyebrow{margin:0;color:#e5b078;font-size:.67rem;font-weight:800;letter-spacing:.22em}
h1{font:900 clamp(2.55rem,8vw,4.4rem)/.98 Georgia,serif;letter-spacing:-.055em;margin:.15em 0 .04em;text-shadow:0 3px 0 #0005}
.subtitle{margin:.48rem 0 0;color:var(--muted);font-size:.84rem;letter-spacing:.17em;text-transform:uppercase}
.tabletop{display:grid;grid-template-columns:178px minmax(0,380px) 178px;gap:clamp(14px,3vw,40px);align-items:start;justify-content:center}
.instruments,.instructions{margin-top:40px}.instructions{font-size:.84rem;line-height:1.5;color:var(--muted)}
.instructions h2{margin:.4rem 0;color:var(--cream);font:700 1.35rem Georgia,serif}.instructions ul{list-style:none;padding:0}.instructions li{display:flex;gap:8px;align-items:center;margin:.38rem 0}
.symbol-setting{display:flex;gap:.55rem;align-items:center;color:var(--cream);cursor:pointer}.symbol-setting input{accent-color:#dfab70}
.clock{padding:10px;border:1px solid #ad7551;border-radius:8px;background:linear-gradient(#744830,#533020);box-shadow:inset 0 1px 1px #ffce9b80,0 6px 15px #0006;text-align:center}
.clock span{display:block;font-size:.58rem;letter-spacing:.15em;font-weight:800;color:#f1c596}
.window{margin:6px 0;background:linear-gradient(165deg,#382122,#170e11 60%);box-shadow:inset 0 2px 5px #000;border:1px solid #211211;border-radius:4px;padding:4px 8px}
#clock-face{display:block;width:100%;height:38px}.segment{fill:#50201f}.segment.lit{fill:#ff574c;filter:drop-shadow(0 0 2px #ff382d)}
.round-info{padding:13px 0;display:grid;gap:3px;color:var(--muted);font-size:.76rem}.round-info strong{font-size:.9rem;color:var(--cream)}
.board{position:relative;border-radius:10px;background:linear-gradient(110deg,#895537,#a16746 44%,#805035);box-shadow:inset 0 1px 2px #ffcea68f,inset 0 -3px 2px #331b14b3,0 10px 24px #0008;border:1px solid #5c3826;padding:8px}
.head-tray,.foot-tray{background-color:#683f2e;background-image:repeating-linear-gradient(0deg,transparent 0 7px,#39201877 7px 9px,#b7815755 9px 10px),repeating-linear-gradient(90deg,transparent 0 7px,#39201877 7px 9px,#b7815755 9px 10px);border:2px solid #593421;border-radius:5px;box-shadow:inset 0 3px 6px #0008}
.head-tray{padding:5px 17%;perspective:480px}
.shield-wrap{position:relative;height:36px}.secret,.shield{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:4px}
.secret{gap:9%;background:#45291d;box-shadow:inset 0 2px 4px #0008}
.shield{background:linear-gradient(#855137,#643e2b);border:1px solid #4a2c1e;box-shadow:inset 0 1px #ffdbb36b,0 3px 5px #0009;font:900 .78rem Georgia,serif;letter-spacing:.21em;color:#edba90;text-shadow:0 1px #442818;transform-origin:top center;transition:transform .55s ease}
.shield.open{transform:rotateX(106deg)}
.playfield{margin:5px 5% 6px}.rows{display:flex;flex-direction:column-reverse}
.row{display:grid;grid-template-columns:35px 1fr 32px;gap:5px;align-items:center;min-height:33px;border-bottom:1px solid #5331205c}
.row.active{background:#f9c78920;border-radius:5px}
.clues{display:grid;grid-template-columns:repeat(2,8px);gap:3px;justify-content:center;padding:3px 0;border-right:1px solid #54332580}
.key{width:8px;height:8px;border-radius:50%;background:var(--hole);box-shadow:inset 0 1px 2px #0009,0 1px #e5ad7c75;display:inline-block;flex:none}
.key.black{background:radial-gradient(circle at 33% 25%,#666,#161719 56%,#09090a);box-shadow:0 1px 2px #000a}
.key.white{background:radial-gradient(circle at 35% 25%,#fff,#e9e1ca 65%,#918777);box-shadow:0 1px 2px #000a}
.guess{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;justify-items:center;background:linear-gradient(#5b35214d,#c8905e38);box-shadow:inset 0 1px 2px #4c2a1d,inset 0 -1px #e1a97e90;border-radius:20px;padding:1px 3px}
.socket{display:grid;place-items:center;width:100%;height:30px;border:0;background:transparent;border-radius:20px;position:relative;padding:0}
.socket::before,.score-hole::before{content:"";width:8px;height:8px;border-radius:50%;background:#382119;box-shadow:inset 0 1px 3px #000,0 1px #edb4858f}
.socket:has(.peg)::before{display:none}
.socket.selected{outline:1px dashed #ffe0ad;outline-offset:-1px}
.peg{position:relative;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 32% 23%,var(--shine),var(--pigment) 41%,var(--shade) 83%);border:1px solid #0006;box-shadow:0 2px 3px #29150fb8,inset 0 1px 1px #fff6;color:var(--ink,#fff);font-size:.71rem;font-weight:900}
.peg b{visibility:hidden}body.show-symbols .peg b{visibility:visible}
.red{--shine:#ff9180;--pigment:#dc3c31;--shade:#831a18}.blue{--shine:#7bc8ff;--pigment:#2081d3;--shade:#133b78}.green{--shine:#90e784;--pigment:#2f9d46;--shade:#1d5625}.yellow{--shine:#fff3a1;--pigment:#efd12c;--shade:#9a6b12;--ink:#21160b}.white{--shine:#fff;--pigment:#ede7d7;--shade:#a29984;--ink:#21160b}.black{--shine:#74777b;--pigment:#25282a;--shade:#101010}
.score{display:grid;grid-template-columns:5px 5px 1fr;gap:3px;align-items:center;color:#301a12;font-size:.65rem;font-weight:900}.score-hole{display:flex}.score-hole::before{width:4px;height:4px}.score-hole.marked::before{background:#ffcc73;box-shadow:0 0 2px #4a291c}
.foot-tray{padding:4px 6px}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.palette button{display:grid;justify-items:center;align-content:center;gap:3px;background:#3a2017b8;border:1px solid #e0a27752;border-radius:5px;min-height:49px;padding:2px;color:#fff0d6;font-size:.62rem}.palette button:not(:disabled):hover{background:#e0a27750}.palette .peg{width:24px;height:24px}
.message{font-size:.82rem;margin:10px 0 6px;min-height:1.3rem;color:var(--cream)}
.actions{display:flex;justify-content:space-between;gap:8px;align-items:center}
dialog{width:min(92vw,480px);background:#30221b;color:var(--cream);border:1px solid #9b795b;border-radius:12px;padding:20px;box-shadow:0 16px 60px #0009}
dialog::backdrop{background:#100c0acc}dialog h2{margin:0;font-family:Georgia,serif}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
dialog form label{display:grid;gap:5px;margin:8px 0 12px}dialog input:not([type=checkbox]){background:#1e1512;color:var(--cream);border:1px solid var(--line);border-radius:5px;padding:.6rem;width:100%}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0}.stat-grid div{border:1px solid var(--line);border-radius:5px;padding:7px}.stat-grid strong{display:block;font-size:1.2rem}.stat-grid span,.histogram{color:var(--muted);font-size:.82rem}.histogram{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
@media(max-width:740px){.tabletop{grid-template-columns:minmax(0,380px);gap:10px}.instruments{margin:0;display:flex;align-items:center;gap:14px}.clock{width:113px;padding:5px 6px}.clock span{font-size:.49rem}.window{margin:3px 0;padding:1px 5px}#clock-face{height:26px}.instructions{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line)}}
@media(max-width:360px){.brand{font-size:.56rem;gap:4px}.utility{padding:.48rem .58rem}.palette button{font-size:.57rem}.playfield{margin-inline:1%}}
@media(prefers-reduced-motion:reduce){.shield{transition:none}}

@media (min-width: 1000px) {
  main { max-width: 1360px; }
  .title { margin: 14px auto 12px; }
  h1 { font-size: clamp(3.25rem, 7vh, 4.4rem); }
  .tabletop {
    grid-template-columns: minmax(185px, 230px) minmax(0, clamp(470px, 59vh, 560px)) minmax(185px, 245px);
    gap: clamp(18px, 3vw, 48px);
  }
  .instruments, .instructions { margin-top: 26px; }
  .instructions { font-size: 1rem; color: #d8c3aa; }
  .instructions h2 { font-size: 1.55rem; }
  .instructions .key { width: 13px; height: 13px; }
  .clock span { font-size: .68rem; }
  #clock-face { height: 48px; }
  .round-info { font-size: .92rem; }
  .round-info strong { font-size: 1.1rem; }
  .board { padding: 10px; }
  .shield-wrap { height: 40px; }
  .shield { font-size: .92rem; }
  .row {
    grid-template-columns: 52px 1fr 42px;
    gap: 8px;
    min-height: clamp(38px, 5.1vh, 54px);
  }
  .row.active { background: #f9c78938; box-shadow: inset 0 0 0 1px #ffe0ad8c; }
  .clues { grid-template-columns: repeat(2, 12px); gap: 4px; }
  .clues .key { width: 12px; height: 12px; }
  .clues .key.black { outline: 1px solid #e0b28a80; }
  .socket { height: clamp(35px, calc(5.1vh - 3px), 51px); }
  .socket::before { width: 11px; height: 11px; }
  .peg, .palette .peg { width: 33px; height: 33px; font-size: .9rem; }
  .score { grid-template-columns: 6px 6px 1fr; font-size: .84rem; }
  .score-hole::before { width: 5px; height: 5px; }
  .palette button { min-height: 58px; font-size: .8rem; }
  .message, .utility, .secondary, .primary { font-size: .95rem; }
}

@media (min-width: 1000px) and (max-height: 850px) {
  .masthead { min-height: 50px; }
  .title { margin: 9px auto; }
  h1 { font-size: 3.25rem; }
  .row { min-height: 38px; }
  .socket { height: 35px; }
}

@media (max-width: 430px) {
  .masthead { gap: 6px; padding-inline: 10px; }
  .masthead nav { gap: 4px; }
  .masthead .utility { padding-inline: .5rem; }
  .brand { font-size: .58rem; gap: 4px; }
}