/* Wooden code board with numbered counters, based on the game's cover. */
body.game-themeable > main { --game-frame-max:760px; }
body.game-themeable > main h1 { text-align:center; }
.hud { gap:8px; }
.hud span { display:inline-flex; align-items:baseline; gap:6px; padding:5px 11px; border-radius:8px; background:#f3e8d6; border:1px solid #decaad; color:#755638; font-size:.85rem; font-weight:700; }
.hud b { color:#51341e; font-variant-numeric:tabular-nums; }
html[data-portal-theme="dark"] .hud span { background:#3c312a; border-color:#66503a; color:#f0d7aa; }
html[data-portal-theme="dark"] .hud b { color:#fff0cd; }
.code-board { width:min(100%,620px); padding:11px; border:7px solid #71421f; border-radius:21px; background:repeating-linear-gradient(98deg,rgba(255,235,185,.045) 0 3px,transparent 3px 19px),linear-gradient(135deg,#a66c3d,#8b512e 60%,#774322); box-shadow:inset 0 0 0 2px #d59b59,inset 0 4px 8px rgba(55,26,10,.3),0 16px 30px rgba(74,43,20,.24); color:#fff2d5; }
.board-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 5px 10px; }
.board-top strong { font:800 .85rem Georgia,serif; letter-spacing:.17em; color:#fff0c5; text-shadow:0 2px 2px #54301a; }
body.game-themeable > main #new { min-height:34px; padding:5px 11px; border:1px solid #e4c892; border-radius:8px; background:linear-gradient(#fff0ce,#e9cf9c); color:#56351c; font-size:.79rem; font-weight:800; box-shadow:0 2px 0 #694426; }
body.game-themeable > main #new::before { content:'↻'; margin-right:6px; font-size:1.08rem; }
.board-history { padding:9px; border:2px solid #a36d3d; border-radius:12px; background:linear-gradient(135deg,#d4a368,#b77e49); box-shadow:inset 0 4px 12px rgba(88,48,21,.34),0 1px 0 #e6b981; }
.history-labels { display:flex; justify-content:space-between; padding:0 8px 7px; color:#654124; font-size:.63rem; font-weight:900; letter-spacing:.12em; }
.log { width:100%; max-height:263px; min-height:202px; display:flex; flex-direction:column; gap:5px; overflow-y:auto; scrollbar-color:#9b6539 #c08a52; }
.log .row,.log .empty-row { display:grid; grid-template-columns:26px minmax(0,1fr) 142px; align-items:center; min-height:44px; gap:8px; padding:3px 8px; border:1px solid #a87849; border-radius:9px; background:linear-gradient(#ead1a8,#dcb783); box-shadow:inset 0 1px 0 #f9e7c6,0 2px 3px rgba(73,42,18,.15); color:#472e19; }
.log .row .n,.log .empty-row .n { color:#805733; font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums; }
.guess-tokens,.empty-slots { display:flex; gap:5px; white-space:nowrap; }
.digit-token,.empty-slots i { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; font:900 1rem/1 system-ui,sans-serif; }
.digit-token { border:2px solid rgba(255,255,255,.42); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.19),0 2px 3px rgba(62,40,18,.32); text-shadow:0 1px 1px rgba(0,0,0,.3); }
.token-0,.digit-preview span:nth-child(1) { background:#c83c35; }
.token-1,.digit-preview span:nth-child(2) { background:#2672bd; }
.token-2,.digit-preview span:nth-child(3) { background:#278a54; }
.token-3,.digit-preview span:nth-child(4) { background:#d39b24; }
.empty-slots i { background:#b58b5e; border:2px solid #a4794d; box-shadow:inset 0 2px 5px rgba(72,43,17,.22); }
.clues { display:flex; justify-content:flex-end; gap:5px; white-space:nowrap; font-size:.7rem; font-weight:800; }
.clues span { padding:4px 5px; border-radius:5px; background:#f8ead0; }
.clues .b { color:#a2312b; }
.clues .c { color:#176a58; }
.empty-pegs { display:flex; justify-content:flex-end; gap:4px; }
.empty-pegs i { width:9px; height:9px; border-radius:50%; background:#a7784b; box-shadow:inset 0 2px 3px rgba(61,30,10,.3); }
.entry-area { padding:13px 5px 2px; }
.entry-area label { display:block; margin-bottom:8px; color:#ffedbd; font-size:.67rem; font-weight:900; letter-spacing:.13em; text-align:center; }
.entry-row { display:flex; justify-content:center; align-items:center; gap:12px; }
.digit-stage { position:relative; width:245px; max-width:100%; padding:5px; border:2px solid #e6b66e; border-radius:12px; background:#6a3b22; box-shadow:inset 0 2px 6px rgba(34,17,7,.4); }
.digit-stage:focus-within { outline:3px solid #ffdc72; outline-offset:2px; }
.digit-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.digit-preview span { display:grid; place-items:center; height:49px; border-radius:50%; border:2px solid rgba(255,255,255,.4); color:#fff8e6; font:900 1.3rem/1 system-ui,sans-serif; box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(0,0,0,.19),0 3px 5px rgba(32,17,8,.35); }
.digit-preview span:not(.filled) { color:rgba(255,255,255,.6); filter:saturate(.55); }
#in { position:absolute; z-index:1; inset:0; width:100%; height:100%; padding:0; border:0; opacity:0; cursor:text; font-size:16px; }
body.game-themeable > main #go { min-height:49px; padding:8px 18px; border:1px solid #f7d486; border-radius:10px; background:linear-gradient(#ffe69f,#efbb55); color:#4a2e18; font-weight:900; box-shadow:inset 0 1px 0 #fff3c9,0 4px 0 #80502a; }
body.game-themeable > main #go::before { content:'✓'; margin-right:7px; }
body.game-themeable > main #hintBtn { display:block; min-height:35px; margin:10px auto 0; padding:4px 12px; border:1px solid rgba(255,232,186,.65); background:rgba(63,32,15,.24); color:#fff0c9; font-size:.8rem; font-weight:700; }
body.game-themeable > main #hintBtn:hover:not(:disabled) { background:rgba(63,32,15,.48); }
body.game-themeable > main #go:hover:not(:disabled),body.game-themeable > main #new:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
body.game-themeable > main .code-board button:disabled { opacity:.55; }
#msg { max-width:620px; }
#stats { font-size:.8rem; }
@media (max-width:560px) {
  .code-board { padding:7px; border-width:5px; border-radius:16px; }
  .board-top { padding-bottom:7px; }
  .board-top strong { font-size:.73rem; }
  .board-history { padding:6px; }
  .log { min-height:186px; max-height:225px; gap:4px; }
  .log .row,.log .empty-row { grid-template-columns:19px minmax(0,1fr) 101px; gap:5px; min-height:42px; padding:3px 5px; }
  .digit-token,.empty-slots i { width:27px; height:27px; font-size:.83rem; }
  .guess-tokens,.empty-slots { gap:3px; }
  .clues { flex-direction:column; gap:1px; align-items:flex-end; font-size:.64rem; }
  .clues span { padding:0 3px; background:transparent; }
  .entry-row { flex-wrap:wrap; gap:10px; }
  .entry-area { padding-top:10px; }
  .digit-stage { width:236px; }
  .digit-preview span { height:47px; }
  body.game-themeable > main #go { width:100%; max-width:236px; min-height:42px; }
  body.game-themeable > main #hintBtn { margin-top:8px; }
  .hud span { font-size:.75rem; padding:4px 7px; }
}
@media (max-width:360px) {
  .log .row,.log .empty-row { grid-template-columns:16px minmax(0,1fr) 82px; gap:3px; }
  .digit-token,.empty-slots i { width:24px; height:24px; }
  .clues { font-size:.56rem; }
}