/* Forest presentation only. Board rules, scores and ranking stay unchanged. */
:root {
  --bark: #91602f;
  --wood-light: #e6b979;
  --wood-dark: #b88043;
  --paper-warm: #fff4d5;
  --forest-ink: #594025;
  --plank: radial-gradient(ellipse at 17% 30%, #f7d89d88 0 7%, transparent 8%),
    repeating-linear-gradient(2deg, transparent 0 19px, #a96d3210 20px 22px, transparent 23px 31px),
    linear-gradient(100deg, #f2d49b, #ffe8b9 48%, #ebc88e);
}
body {
  min-height: 100vh;
  background: #d9edbc;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #d9edbc url('./assets/forest-clearing.webp') center center / cover no-repeat;
}
main { max-width: 1120px; padding: 18px 28px 32px; }
.draft {
  display: table;
  padding: 4px 10px;
  border-radius: 20px;
  background: #fffdf2ed;
  color: #506441;
  margin-bottom: 14px;
}
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline-color: #075fad;
  outline-width: 3px;
  outline-offset: 3px;
}

/* Each label is real text on a flexible wooden panel. */
.wooden-panel {
  border: 3px solid #bb8b4c;
  border-radius: 14px 12px 16px 10px;
  background: var(--plank);
  color: var(--forest-ink);
  box-shadow: inset 0 2px 1px #fff3c9, inset 0 -3px 0 #cc9b5577,
    0 4px 0 #896533, 0 7px 12px #24472215;
}
.forest-sign {
  grid-area: sign;
  position: relative;
  align-self: end;
  width: 94%;
  margin: 0 auto -4px;
  padding: 9px 24px 13px;
  text-align: center;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #fffdf0;
  text-shadow: 0 2px #694523, 2px 0 #694523, -2px 0 #694523, 0 -2px #694523;
  border: 3px solid #9b6935;
  border-radius: 18px 12px 14px 12px;
  background: repeating-linear-gradient(1deg, transparent 0 14px, #7643191a 15px 17px, transparent 18px 29px),
    linear-gradient(100deg, #c69150, #dfb16c 42%, #c38b4b);
  box-shadow: inset 0 3px #efcd90, inset 0 -4px #9d642c55, 0 4px #765127, 0 8px 14px #32552b18;
}
.forest-sign span { color: #ffe57c; font-size: 1.2em; }
.forest-sign::before, .forest-sign::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  top: 45%;
  border-radius: 50%;
  background: #8e5a2d;
  box-shadow: inset 0 2px #714622, 0 2px #f2cc8a;
}
.forest-sign::before { left: 10px; }
.forest-sign::after { right: 10px; }

/* Wide screens: statistics / board / guidance. */
#play {
  max-width: 1020px;
  display: grid;
  grid-template-columns: minmax(160px, 190px) minmax(300px, 470px) minmax(160px, 190px);
  grid-template-areas: "head head head" ". sign ." "hud board notes" "sum board notes" "tools board notes";
  gap: 14px 22px;
  align-items: start;
  justify-content: center;
}
.play-head {
  grid-area: head;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.play-head .small { margin: 0 4px 8px; }
.play-head .small:empty { display: none; }
.play-head h2 { color: #445e36; background: #fffdf0f2; border: 1px solid #a9b780; border-radius: 25px; padding: 8px 15px; }
.play-head button.quiet { min-height: 44px; font-size: .9rem; padding: 10px 12px; background: var(--plank); border: 2px solid #a97a41; color: #543c25; box-shadow: 0 3px #896533; }
.play-head .small:not(:empty) { background: #fffdf0f2; border-radius: 10px; padding: 4px 8px; }
.hud {
  grid-area: hud;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-content: stretch;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  margin: 5px 0 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.hud > div { padding: 13px 10px; text-align: center; }
.hud #clock-box { text-align: center; }
.hud small { font-weight: 800; color: #66472b; }
.hud strong { font-size: 2rem; line-height: 1.4; color: #073e7c; }
.hud #clock-box.urgent { background: #fff0cf; border-color: #a85216; }
.hud #clock-box.urgent strong { color: #9c3c05; }

.board-wrap {
  --frame: 28px;
  --frame-art: 34px;
  --frame-gap: 8px;
  --board-top: calc(var(--frame) + var(--frame-gap));
  /* Include the tiles' 3px drop shadow in the visible bottom clearance. */
  --board-bottom: calc(var(--board-top) + 3px);
  grid-area: board;
  position: relative;
  width: 100%;
  max-width: 470px;
  padding: var(--board-top) var(--frame) var(--board-bottom);
  border: 0;
  border-radius: 22px;
  background: #a4dfed;
  box-shadow: 0 9px 20px #24432125;
}
.board {
  position: relative;
  border-radius: 12px;
  gap: 6px;
  background: #9dd8e9;
  box-shadow: 0 0 0 4px #9dd8e9;
}
/* Nine-slice keeps the supplied rounded corners while the four edges stretch.
   The decorative layer never intercepts selection or keyboard focus. */
.board-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: var(--frame-art) solid transparent;
  border-image: url('./assets/wooden-board-frame.webp') 100 / var(--frame-art) / 0 stretch;
}
.tile {
  border-color: #b3dbe5;
  border-radius: 12px;
  background: linear-gradient(#ffffff, #f7fdff);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #073e7c;
  box-shadow: 0 3px 0 #6eafb8, inset 0 1px 0 #fff;
}
.tile[aria-pressed=true], .tile[aria-pressed=true]:hover:not(:disabled) {
  background: #ffdf74;
  border-color: #0071bc;
  box-shadow: 0 3px #326d7e, inset 0 2px #fff3a9;
}
.tile:disabled { opacity: 1; }
.tile::after { font-weight: 800; left: 4px; top: 2px; }
#route { inset: var(--board-top) var(--frame) var(--board-bottom); width: calc(100% - 2 * var(--frame)); height: calc(100% - var(--board-top) - var(--board-bottom)); }
#route polyline { stroke: #0071bc; opacity: .75; }
#overlay { inset: var(--board-top) var(--frame) var(--board-bottom); border-radius: 12px; background: #fff8dfed; color: #5a442a; }
.sum {
  grid-area: sum;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 14px 10px;
  margin: 0;
  min-width: 0;
}
.sum strong { order: -1; color: #073e7c; font-size: 1.4rem; }
#formula { max-width: 100%; text-align: center; font-size: .9rem; color: #65482b; }
.sum.ready { border-color: #387752; background: #ffeb9f; }
.forest-notes { grid-area: notes; padding: 18px 14px; margin-top: 6px; }
#message { margin: 0; min-height: 3.4em; font-size: 1rem; font-weight: 800; line-height: 1.65; }
#input-guide { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #b1884c77; font-size: .82rem; color: #604829; line-height: 1.8; }
.practice-tools { grid-area: tools; display: grid; grid-template-columns: minmax(0,1fr); justify-content: stretch; gap: 10px; }
.practice-tools:has(#hint[hidden]) { display: none; }
.practice-tools button { padding: 10px 12px; background: #fff8e7; border: 2px solid #b88c50; color: #594328; box-shadow: 0 3px #a67e41; }
.practice-tools button:hover:not(:disabled) { background: #fff0c5; }

/* Keep the entrance, results and ranking part of the same little clearing. */
.hero { max-width: 690px; margin: 0 auto 24px; padding: 20px 24px; background: #fffbeeef; border: 2px solid #cbb886; border-radius: 28px; box-shadow: 0 7px 20px #46632814; }
.hero .eyebrow { color: #4b6739; }
.hero h1 { color: #644327; }
.hero h1 span { color: #0088ed; }
.modes article, .result, .ranking { background: #fffcf1f7; border: 2px solid #c4a36a; box-shadow: 0 5px #a88b4c55, 0 12px 20px #39582312; }
.modes article h2, .result h2, .ranking h2 { color: #5b432c; }
.rules { background: #fffbeeef; border-color: #bdac79; }
#rank-home { display: block; margin: 0 auto; box-shadow: 0 3px #8aa874; }
.rank-period { display: flex; gap: 10px; margin: 16px 0; }
.rank-period button { flex: 1; min-height: 48px; background: #fffaf0; border: 2px solid #b88c50; }
.rank-period button[aria-pressed="true"] { background: #0078d8; color: white; border-color: #005ba8; box-shadow: inset 0 -3px #004b91; }
.rank-period button[aria-busy="true"] { border-style: dashed; }
.rank-description { display: grid; }
.rank-description > span { grid-area: 1 / 1; }
.rank-description-size { visibility: hidden; }
#rank-state { min-block-size: 1.8em; line-height: 1.8; }
@media (max-width: 600px) { #rank-state { min-block-size: 3.6em; } }
#global-note:not(:empty) { padding: 10px 14px; background: #fffbecf2; border-radius: 14px; }
footer { background: #fffcf0ec; border-top: 1px solid #d5dfba; gap: 22px; }

/* Tablets and phones place the score/time above a generously sized board. */
@media (max-width: 899px) {
  main { padding: 12px 20px 28px; }
  #play { max-width: 470px; grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "sign" "hud" "board" "sum" "notes" "tools"; gap: 12px; }
  .forest-sign { width: 96%; margin: 0 auto 1px; padding: 8px 20px 10px; font-size: 2rem; }
  .hud { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 4px; }
  .hud > div { padding: 7px 8px; }
  .hud small { font-size: .76rem; }
  .hud strong { font-size: 1.5rem; }
  .hud span { font-size: .8rem; }
  .sum { flex-direction: row; justify-content: space-between; gap: 10px; padding: 9px 12px; }
  .sum strong { order: 0; font-size: 1.2rem; }
  #formula { max-width: 58%; font-size: .82rem; text-align: left; }
  .forest-notes { margin-top: 0; padding: 12px 14px; }
  #message { min-height: 0; font-size: .92rem; }
  #input-guide { margin-top: 7px; padding-top: 7px; font-size: .82rem; }
  .practice-tools { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .practice-tools button { font-size: .8rem; }
}
@media (max-width: 600px) {
  body::before { background-image: url('./assets/forest-clearing-mobile.webp'); }
  main { padding: 8px 14px 24px; }
  .draft { margin-bottom: 8px; font-size: .68rem; padding: 3px 8px; }
  #play { gap: 9px; }
  .play-head { gap: 0; border-radius: 12px; }
  .play-head h2 { font-size: .85rem; }
  .play-head button.quiet { font-size: .8rem; }
  .play-head .small { font-size: .65rem; margin-bottom: 4px; }
  .forest-sign { font-size: clamp(1.55rem,7vw,2rem); padding: 6px 16px 9px; }
  .hud { gap: 10px; margin-bottom: 3px; }
  .hud > div { border-width: 2px; border-radius: 12px; padding: 5px 6px; }
  .hud strong { font-size: 1.45rem; }
  .board-wrap { --frame: 17px; --frame-art: 21px; --frame-gap: 6px; border-radius: 14px; }
  .board { gap: 5px; border-radius: 9px; }
  .tile { border-radius: 9px; font-size: 1.5rem; }
  .sum { border-width: 2px; padding: 7px 10px; margin-top: 4px; }
  .forest-notes { border-width: 2px; padding: 10px 12px; }
  .hero { padding: 16px 12px; margin-bottom: 15px; border-radius: 22px; }
  .hero h1 { font-size: 2.1rem; }
  .hero p { font-size: .87rem; }
  .hero .eyebrow { font-size: .7rem; }
  .example { margin-top: 16px; }
  .modes article { padding: 18px; }
  .result,.ranking { margin: 8px auto; padding: 22px 15px; }
}
@media (max-width: 359px) {
  main { padding-inline: 10px; }
  .board-wrap { --frame: 15px; --frame-art: 19px; }
  .board { gap: 4px; }
  .tile { font-size: 1.35rem; border-radius: 8px; }
  .practice-tools button { padding: 9px 5px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .forest-sign, .wooden-panel, .board-wrap { animation: none; transition: none; }
}