:root{color-scheme:dark;--ink:#eee8dd;--muted:#b4b7ac;--gold:#dfbc7b;--edge:#ffffff1c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#273936 0,transparent 55%),#131919;color:var(--ink);font:16px/1.5 system-ui,sans-serif}main{max-width:1160px;margin:auto;padding:35px 28px}h1,h2,h3,p{margin-top:0}h1{font:clamp(38px,5.5vw,66px)/1.1 Georgia,serif;letter-spacing:-2px;margin:8px 0 12px}h1 em{color:var(--gold);font-weight:normal}h2{font:28px/1.2 Georgia,serif;margin:8px 0 16px}h3{font:22px Georgia,serif}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:var(--gold);margin-bottom:8px}.subtitle,.muted,.micro{color:var(--muted)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:15px}.brand-dots{font:12px system-ui;letter-spacing:5px;color:#79b9a5;margin-left:18px;vertical-align:middle}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-block:1px solid var(--edge);padding:16px 0;margin:20px 0 28px}.toggle{display:flex;align-items:center;gap:8px;font-size:14px;margin-left:auto}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid #ffffff26;background:#ffffff06;color:var(--ink);border-radius:7px;padding:10px 16px}button{cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#ffffff16}button:active{transform:translateY(1px)}button:disabled{opacity:.38;cursor:not-allowed}button.gold{background:linear-gradient(#e7c78a,#ccaa68);color:#262116;font-weight:750;border-color:#e1c28b}button.gold:hover{background:#f0d59f}:focus-visible{outline:3px solid #ffe2a3;outline-offset:4px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}.board{padding:24px;border:1px solid #8b6345;border-radius:18px;background:repeating-linear-gradient(2deg,#ffffff02 0 1px,transparent 1px 5px),linear-gradient(110deg,#442f25,#291f1b 40%,#3d2c23);box-shadow:inset 0 0 0 6px #130e0966,inset 0 0 0 8px #a4774533,0 18px 45px #0006}.board-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.board-top h2{font-size:25px}.badge{font-size:9px;letter-spacing:1.5px;padding:6px 9px;border:1px solid #9e896344;border-radius:3px;color:var(--gold)}.board-rules{font-size:13px;color:#d1c5b6}.secret{background:#110e0b90;border:1px solid #ffffff10;box-shadow:inset 0 4px 10px #0008;border-radius:12px;display:flex;justify-content:center;gap:14px;padding:18px}.sealed{color:#a18c71;font:20px Georgia;border:1px solid #a18c7133;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.micro{font-size:11px;text-align:center;margin:8px 0 26px}.history-heading{display:flex;justify-content:space-between;font-size:9px;color:#ccbaa2;letter-spacing:1px;border-bottom:1px solid #ffffff16;padding-bottom:10px;gap:10px}.history{max-height:390px;overflow-y:auto;overscroll-behavior:contain;min-height:110px}.empty{padding:25px 12px;text-align:center;color:#b7a894;font:italic 18px Georgia}.guess-row{display:grid;grid-template-columns:24px minmax(0,1fr) 125px;align-items:center;gap:10px;border-bottom:1px solid #ffffff0f;padding:12px 0}.row-no{color:#b39b7c;font-size:12px}.row-pegs{display:flex;gap:10px;justify-content:center}.peg{border-radius:50%;display:inline-grid;place-items:center;width:36px;height:36px;flex-shrink:0;background:radial-gradient(circle at 30% 22%,#ffffffc0,transparent 27%),radial-gradient(circle at 43% 36%,var(--c),color-mix(in srgb,var(--c),#000 45%));box-shadow:inset 0 -4px 6px #0006,inset 0 1px 2px #ffffff77,0 3px 4px #000b;border:1px solid #ffffff30;position:relative}.peg .num{font:bold 12px system-ui;color:white;background:#000b;border-radius:50%;width:19px;height:19px;text-align:center;line-height:19px}.no-symbols .peg .num{visibility:hidden}.feedback{font-size:11px;line-height:1.6;color:#e8dac4}.markers{font-size:16px;letter-spacing:2px;color:#f2cf89;min-height:20px}.composer{margin-top:16px;background:#201914e8;border:1px solid #9d75423f;border-radius:12px;padding:16px;box-shadow:0 -5px 15px #0002}.composer-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:8px;color:#d8cab3}.composer-title span{font-size:10px;color:#b9aa95}.sockets{display:flex;justify-content:center;gap:12px;padding:18px 0}.socket{padding:0;width:48px;height:48px;min-height:48px;border-radius:50%;border:1px solid #8f70503f;background:#100d0b;box-shadow:inset 0 3px 8px #000,0 1px 0 #9e7d5444;display:grid;place-items:center;flex-shrink:0}.socket.selected{outline:2px solid var(--gold);outline-offset:3px}.socket .peg{width:38px;height:38px;animation:place .16s ease-out}.palette{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;border-top:1px solid #ffffff10;padding-top:13px}.color-button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px;font-size:9px;min-width:49px;background:transparent;border:0}.color-button .peg{width:31px;height:31px}.actions{display:flex;gap:10px;justify-content:space-between;margin-top:12px}.actions button{flex:1}.message{margin:10px 0 0;min-height:20px;font-size:12px;color:#e0c69b}.card{background:#ffffff03;border:1px solid var(--edge);border-radius:12px;padding:22px;margin-bottom:18px}.card h2{font-size:27px}.card p{font-size:13px}.card p:last-child{margin-bottom:0}.card .exact,.card .color-only{color:var(--gold);font-size:23px;margin-right:7px}.card button{width:100%}.small{padding:16px 20px}.quiet{color:#d4beb1}footer{text-align:center;color:#b5a98f;font-size:11px;letter-spacing:1px;margin:32px 0 8px}footer span{color:#8f9992;letter-spacing:0}.outcome{background:#132b24;border:1px solid #83b39a;border-radius:10px;padding:18px;margin-top:18px;color:#e1f8e9}.outcome.win{animation:glow 1.5s ease-in-out 2}.outcome h3{margin-bottom:8px}.notice{border:1px solid #dfbc7b;padding:12px;font-size:13px}dialog{color:var(--ink);background:#202a28;border:1px solid #ae936c;border-radius:16px;padding:28px;width:min(560px,calc(100% - 24px));max-height:90dvh;box-shadow:0 24px 90px #000b}dialog::backdrop{background:#08100feb;backdrop-filter:blur(7px)}dialog p{font-size:14px}dialog label{display:block;margin:14px 0;font-size:14px}dialog select,dialog input:not([type=checkbox]){width:100%;display:block;margin-top:6px;background:#121b19;border:1px solid #829087;border-radius:6px;padding:12px;color:var(--ink);min-height:46px}input[type=checkbox]{accent-color:var(--gold);width:18px;height:18px;vertical-align:middle}select option{background:#18231f}.custom{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}#setupError,#entryError{color:#ffb9a5}.tutorial{background:#0003;padding:16px;border-radius:10px;margin-bottom:20px}#demoSocket{display:inline-grid;margin-right:10px}.stat-block{border-top:1px solid #ffffff22;margin-top:18px;padding-top:12px}.stat-block h3{font:17px system-ui;color:var(--gold)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:12px}.stat-grid b{display:block;font-size:22px}.stat-grid span{color:var(--muted)}[hidden]{display:none!important}@keyframes place{from{transform:translateY(-7px);opacity:.4}to{transform:translateY(0);opacity:1}}@keyframes glow{50%{box-shadow:0 0 22px #bada9770}}@media(max-width:850px){.layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{margin-bottom:0}.small{grid-column:1/-1}.history{max-height:300px}}@media(max-width:520px){main{padding:20px 10px}.masthead{align-items:flex-start}h1{font-size:38px;letter-spacing:-1px}.brand-dots{display:none}.masthead .gold{padding:8px 10px;font-size:12px;margin-top:19px}.subtitle{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1.8px}.toolbar{gap:6px;margin:14px 0;padding:10px 0}.toolbar button{font-size:12px;padding:8px 10px}.toggle{margin-left:0;font-size:12px}.board{padding:16px 10px;border-radius:12px}.board-top h2{font-size:23px}.badge{font-size:8px;padding:5px}.board-rules{font-size:11px}.secret{gap:10px;padding:14px}.history-heading{font-size:8px;letter-spacing:.3px}.guess-row{grid-template-columns:16px minmax(0,1fr) 99px;gap:5px}.row-pegs{gap:5px}.row-pegs .peg{width:24px;height:24px}.row-pegs .num{font-size:10px;width:16px;height:16px;line-height:16px}.feedback{font-size:10px}.markers{font-size:13px;letter-spacing:1px}.composer{padding:12px 8px;position:sticky;bottom:6px;z-index:2;backdrop-filter:blur(15px)}.sockets{gap:8px}.socket{width:40px;height:44px;min-height:44px}.socket .peg{width:32px;height:32px}.palette{gap:0}.color-button{min-width:12.5%;padding:6px 0;font-size:8px}.color-button .peg{width:28px;height:28px}.composer-title{font-size:11px}.composer-title span{font-size:9px}.card{padding:18px}aside{display:block}.card{margin-bottom:14px}.card h2{font-size:25px}dialog{padding:22px}.secret .peg{width:30px;height:30px}.actions button{font-size:13px;padding:10px}.history{min-height:85px;max-height:250px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:520px){.sockets{gap:6px}.socket{width:44px;flex-shrink:1;min-width:0}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.color-button{min-height:52px;min-width:44px}.color-button .peg{width:28px;height:28px}.composer{bottom:0}.message{font-size:11px}}
/* On narrow screens, put the controls before history: no overlapping sticky layer. */
@media(max-width:520px){.board{display:flex;flex-direction:column}.board-top{order:0}.board-rules{order:1}.secret{order:2}.micro{order:3;margin-bottom:10px}.composer{order:4;position:static;margin:6px 0 20px}.history-heading{order:5}.history{order:6}.outcome{order:7}#nextRound{order:8}.board-top h2{font-size:21px}.masthead h1{font-size:34px}.masthead .gold{white-space:nowrap}.masthead{gap:8px}}