/* Tactile oak and enamelled metal. Visuals only: no board/rule/size changes. */
:root {
  --paper: #eee5d7;
  --ink: #49392c;
  --muted: #756451;
  --wood-texture: url("assets/rimdrop-oak-grain-v2.png");
  --metal-surface: linear-gradient(145deg, #fff8e8 0%, #d7d7cd 23%, #8b9692 46%, #f4f5e9 67%, #a2a79d 100%);
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 20% 0, #fffaf0a6, transparent 70%),
    repeating-linear-gradient(0deg, #8b745805 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #8b745808 0 1px, transparent 1px 4px);
}
.level-line h2, .welcome h1 { color: #453529; }
.instruction { color: #6d5944; }
.brand small, .level-line small, .kicker { color: #3e6658; }

.board-wrap, .tray-card, .rimdrop-hero {
  background-color: #cda36d;
  background-image: linear-gradient(145deg, #fff4cc36, #5c36151c), var(--wood-texture);
  background-size: auto, 460px;
  border: 1px solid #9a713e;
  box-shadow: inset 0 2px 2px #fff0cba6, inset 0 -4px 2px #70472366,
    0 5px 0 #9f764b, 0 8px 3px #5b3c2526, 0 18px 28px #543c292e;
}
.board-wrap { position: relative; border-radius: 21px; padding: 10px; }
.folding-edge {
  position: absolute; z-index: 4; display: grid; pointer-events: none;
  border-radius: 10px; backface-visibility: hidden; will-change: transform, opacity;
  background-color: #cda36d;
  background-image: linear-gradient(145deg, #fff4cc36, #5c36151c), var(--wood-texture);
  background-size: auto, 460px;
  box-shadow: 0 3px 0 #9f764b, 0 8px 12px #543c2933;
}
.folding-edge .cell { width: 100%; height: 100%; aspect-ratio: auto; }
.folding-edge::after { content: ''; position: absolute; background: #b1966c; box-shadow: 0 1px #fff2caaa; }
.fold-top::after { bottom: 0; left: 4px; right: 4px; height: 2px; }
.fold-bottom::after { top: 0; left: 4px; right: 4px; height: 2px; }
.fold-left::after { right: 0; top: 4px; bottom: 4px; width: 2px; }
.fold-right::after { left: 0; top: 4px; bottom: 4px; width: 2px; }
.board-wrap::before, .board-wrap::after {
  content: ""; position: absolute; width: 5px; height: 5px;
  border: 1px solid #655e4e; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, #edddba 42%, #645944 45% 55%, #d3c6a7 58%);
  box-shadow: 0 1px 1px #5438204d;
}
.board-wrap::before { top: 4px; left: 4px; }
.board-wrap::after { bottom: 4px; right: 4px; }
.cell {
  border-radius: 11px; border: 1px solid #80562845;
  background-color: #bc945f;
  background-image: linear-gradient(160deg, #452a1333, #f9e4b50a), var(--wood-texture);
  background-size: auto, 460px;
  box-shadow: inset 1px 2px 5px #57381d45, inset 0 -1px 1px #ffecc4a6;
}
.cell:nth-child(3n+1) { background-position: 0 0, 38px 18px; }
.cell:nth-child(3n+2) { background-position: 0 0, 96px 52px; }

.tile, .tray-token, .flying-token {
  position: relative; isolation: isolate;
  border: 1px solid #757f70; background: var(--metal-surface);
  box-shadow: inset 1px 1px 1px #fff8e8, inset -1px -1px 1px #48534999,
    2px 3px 0 #6f7561, 3px 6px 7px #342a1e4d;
}
.flying-token { position: fixed; }
.tile::before, .tray-token::before, .flying-token::before {
  content: ""; position: absolute; inset: 3px; border-radius: inherit;
  background-color: var(--tile);
  background-image: linear-gradient(145deg, #ffffff66, transparent 42%, #15352d30),
    repeating-linear-gradient(0deg, #ffffff0a 0 1px, #244a3305 1px 2px);
  box-shadow: inset 1px 1px 1px #ffffff80, inset -1px -1px 2px #24423659;
  border: 1px solid #243c3326;
}
.tray-token::before, .flying-token::before { inset: 2px; }
.tile::after {
  position: relative; z-index: 1; border-color: #fff7dc;
  filter: drop-shadow(0 1px 1px #20362d80);
}
.tray-card { border-radius: 19px; }
.tray-head { color: #513b26; letter-spacing: .06em; }
.tray-slot {
  border: 1px solid #83613880; border-radius: 10px;
  background: linear-gradient(150deg, #5740243d, #ffedca12);
  box-shadow: inset 1px 2px 4px #5235165c, 0 1px 0 #fff0d6a6;
}
.tray-slot.overflow { border-color: #a8493d; background: #b8503540; }
.tray-token { box-shadow: inset 1px 1px #fff8e8, 1px 2px 0 #777765, 2px 3px 3px #342a1e59; }
.edge {
  border: 1px solid #a38a65; border-radius: 14px; color: #5c503e;
  background: linear-gradient(150deg, #f8edcf, #ded2b4 50%, #ebdfc3 53%, #ccb995);
  box-shadow: inset 0 1px 1px #fff9e7, inset 0 -2px 1px #a58b6873,
    0 3px 0 #a99170, 0 5px 8px #5d452926;
}
.edge small { color: #5d4b36; }
.edge i b { box-shadow: inset 0 1px #ffffff80, 0 1px 1px #563e2c66; }
.edge.hint, .edge.tutorial-target {
  border-color: var(--teal);
  background: linear-gradient(150deg, #e8edce, #c6d1ac);
  animation: materialHint 1.4s ease-in-out infinite;
}
@keyframes materialHint {
  0%, 100% { box-shadow: inset 0 1px #fff7df, 0 3px 0 #788363, 0 0 0 2px #246b6040; }
  50% { box-shadow: inset 0 1px #fff7df, 0 3px 0 #788363, 0 0 0 5px #246b602b; }
}
.round, nav button, .welcome-levels, .language-picker button, .level-pages button {
  border: 1px solid #c2ae8e;
  background: linear-gradient(150deg, #fff4de, #e8d8bc);
  box-shadow: inset 0 1px 1px #fffaf0, 0 2px 0 #c0a582, 0 4px 8px #65503414;
}
nav button small { color: #75614a; }
nav button.primary, .welcome-play, .wide, .level-tile.current {
  border: 1px solid #385c4b; color: #fff9e8;
  background: linear-gradient(155deg, #4e8670, #2b5a4d 65%, #24493e);
  box-shadow: inset 0 1px #9ab59a80, inset 0 -2px #173e3199,
    0 3px 0 #234337, 0 8px 14px #30453626;
}
nav button.primary small { color: #fff9e8; }
.language-picker button.selected {
  border-color: #3f6b57; background: linear-gradient(150deg, #e1e5c7, #c4d0ad);
  box-shadow: inset 0 1px #fff7df, 0 2px 0 #889675; color: #2f5645;
}
.rimdrop-hero { border-radius: 32px; width: 250px; height: 225px; }
.rimdrop-mark { width: 190px; height: 190px; filter: drop-shadow(1px 4px 2px #603e2638); }
.welcome-features span { border-color: #cfbfa2; background: #fff3dc8c; color: #6e5940; }
.save-note, .language-heading { color: #75634b; }
dialog { border-color: #bba582; background: linear-gradient(145deg, #fff3dc, #e5d5b8); }
.dialog-head { background: linear-gradient(#f8ecd4 78%, transparent); }
.level-tile { border-color: #c8b492; background: linear-gradient(150deg, #fff4de, #e6d4b5); }
.tutorial-card { border-color: #a6b28b; background: #f0eed8; }
.tutorial-card p { color: #637353; }
.toast { background: #3c5349f2; color: #fff7e0; }

@media (max-width:360px) {
  .board-wrap { padding: 7px; }
}
@media (prefers-reduced-motion:reduce) {
  .edge.hint, .edge.tutorial-target { animation: none; }
}