:root { color-scheme: dark; --night:#292e3c; --panel:#3b4351; --cream:#fff1dc; --muted:#d8cfbf; --honey:#f0c96f; --amber:#d69542; --deep:#513d2e; --sage:#afc9a4; --line:#747b84; }
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at 80% 0,#574e48 0,var(--night) 42%); color:var(--cream); font-family:ui-rounded,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { min-height:48px; border:0; font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid var(--cream); outline-offset:3px; }
.hub-link{display:inline-flex;min-height:44px;align-items:center;margin-bottom:10px;color:var(--cream);font-size:.82rem;font-weight:850;text-decoration:none}.hub-link:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
button:disabled { cursor:default; }
.app { width:min(100%,560px); margin:auto; padding:calc(18px + env(safe-area-inset-top)) 12px calc(25px + env(safe-area-inset-bottom)); overflow-x:clip; }
header,.intro,.board-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.eyebrow,.kicker { margin:0 0 5px; color:var(--honey); font-size:.69rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(1.85rem,9vw,2.65rem); line-height:1; letter-spacing:-.05em; }
h1 em { display:block; color:var(--honey); font-style:normal; }
.lamp { display:grid; width:52px; height:52px; flex:0 0 auto; place-items:center; border:1px solid #87755c; border-radius:50%; background:#554839; color:#ffe19a; box-shadow:0 0 24px #edbd6066; font-size:1.6rem; }
.intro { align-items:end; margin:24px 4px 12px; }
.intro h2,.board h2,.word-builder h2 { margin:0; font-size:1.22rem; }
.stats { text-align:right; }
.stats strong,.stats span { display:block; }
.stats strong { color:var(--honey); }
.stats span { margin-top:3px; color:var(--muted); font-size:.75rem; }
.board,.word-builder { padding:16px 13px; border:1px solid #686f79; border-radius:22px; background:var(--panel); box-shadow:0 12px 30px #15182444; }
.board-heading>span { font-size:1.8rem; }
.cells { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:15px auto 5px; }
.honey-cell { position:relative; min-width:0; min-height:98px; padding:13px 6px 10px; border:2px solid #9b7a42; clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); background:#5e4c38; color:var(--cream); }
.honey-cell:nth-child(1),.honey-cell:nth-child(4) { grid-column:1 / span 2; }
.honey-cell:nth-child(2),.honey-cell:nth-child(5) { grid-column:3 / span 2; }
.honey-cell:nth-child(3) { grid-column:5 / span 2; }
.honey-cell strong,.honey-cell small,.cell-state { display:block; overflow-wrap:anywhere; }
.honey-cell strong { margin:4px 0; font-size:.76rem; line-height:1.05; }
.honey-cell small { color:#eee0c9; font-size:.6rem; line-height:1.1; }
.cell-state { color:#d9c292; font-size:.56rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.honey-cell.eligible { background:#795925; border-color:#ffe09a; box-shadow:0 0 0 3px #ffe09a55; }
.honey-cell.eligible .cell-state { color:#fff4d6; }
.honey-cell.filled { background:var(--honey); border-color:#fff0bd; color:#3e3226; }
.honey-cell.filled small,.honey-cell.filled .cell-state { color:#624a2c; }
.honey-cell:disabled { opacity:1; }
.placement-prompt,.message { margin:12px 0 8px; padding:10px 11px; border-left:4px solid var(--honey); border-radius:7px 12px 12px 7px; background:#2d333f; color:var(--muted); font-size:.8rem; line-height:1.4; }
.cancel { width:100%; border:1px solid #8b9097; border-radius:12px; background:transparent; color:var(--cream); }
.word-builder { margin-top:12px; }
.instruction { margin:4px 0 0; color:var(--muted); font-size:.8rem; }
.letters { position:relative; width:244px; height:214px; margin:12px auto 5px; }
.letter { position:absolute; display:grid; width:58px; height:58px; place-items:center; border:2px solid #ddb65e; clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); background:#6b573a; color:var(--cream); font-size:1.35rem; font-weight:900; }
.letter:active { transform:scale(.94); }
.letter.top { left:93px; top:0; }.letter.upper-right { left:145px; top:39px; }.letter.lower-right { left:145px; top:110px; }.letter.bottom { left:93px; top:145px; }.letter.lower-left { left:41px; top:110px; }.letter.upper-left { left:41px; top:39px; }
.letter.centre { left:93px; top:74px; width:64px; height:64px; background:var(--honey); color:#392f26; }
.letter.centre small { display:block; margin-top:-11px; font-size:.42rem; line-height:1; text-transform:uppercase; }
.preview { min-height:50px; padding:10px; border:2px solid #947b4f; border-radius:13px; background:#2a303b; color:var(--cream); text-align:center; font-size:1.35rem; font-weight:900; letter-spacing:.13em; overflow-wrap:anywhere; }
.preview.empty { color:#a9a399; font-size:.9rem; line-height:26px; }
.controls { display:grid; grid-template-columns:1.2fr 1fr; gap:8px; margin-top:9px; }
.controls button,.footer-actions button { padding:10px; border-radius:13px; font-weight:850; }
.submit { background:var(--honey); color:#352b22; box-shadow:0 4px 0 #916325; }
.secondary { border:1px solid #8a8f96; background:#59616d; color:var(--cream); }
.controls .clear { grid-column:1 / -1; }
.message.good { border-color:var(--sage); }.message.bad { border-color:#e2a0a0; }
.footer-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.restart { border:1px solid #858c94; background:transparent; color:var(--cream); }.next { background:var(--sage); color:#26352c; }
.experiment-note { margin:14px 5px 0; color:var(--muted); font-size:.7rem; text-align:center; }
[hidden] { display:none!important; }
@media(max-width:350px) { .app{padding-right:9px;padding-left:9px}.honey-cell{min-height:94px;padding-right:3px;padding-left:3px}.honey-cell strong{font-size:.7rem} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }