/* DinoDecode look: an original prehistoric research preserve. Calm stone work surface framed by foliage.
   (Exact colours/fonts are a first try for Tim to react to.) */
:root {
  --forest: #123524;
  --forest2: #1c4a30;
  --fern: #2f7d3b;
  --moss: #6aa84f;
  --stone: #efe6d2;
  --stone2: #e0d3b2;
  --stone3: #b9a77c;
  --bone: #fbf6e8;
  --amber: #e8a317;
  --amber-dk: #9a6200;
  --ink: #17324d;
  --ink-soft: #4b5f72;
  --good: #1f7a3c;
  --warn: #b86e00;
  --bad: #b3303f;
  --teal: #0e8a8a;
  --zb-home-space: 190px;
  --zb-home-top: 58px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Andika", "Fredoka", "Trebuchet MS", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 8% -10%, #2e6b3a 0, transparent 60%),
    radial-gradient(900px 500px at 105% 8%, #25593a 0, transparent 60%),
    radial-gradient(800px 600px at 50% 120%, #0c2a1b 0, transparent 70%),
    linear-gradient(#143a27, #0f2d20);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px;
}
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------- buttons (all at least 44px tall) ---------- */
.btn {
  min-height: 48px; min-width: 48px; padding: 8px 18px; border-radius: 14px;
  border: 3px solid var(--forest); background: var(--bone); color: var(--forest);
  font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 rgba(0,0,0,.3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.primary { background: var(--amber); border-color: #7a4d00; color: #2b1a00; }
.btn.good { background: #d8f0d8; border-color: var(--good); color: #0f4a22; }
.btn.warn { background: #fff0cf; border-color: var(--warn); color: #6b3d00; }
.btn.bad { background: #fde1e4; border-color: var(--bad); color: #7d1625; }
.btn.ghost { background: transparent; color: var(--bone); border-color: rgba(251,246,232,.55); box-shadow: none; }
.btn.big { min-height: 64px; font-size: 22px; padding: 10px 28px; }
.btn.small { min-height: 44px; font-size: 15px; padding: 4px 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.on { background: var(--forest2); color: var(--bone); border-color: #0a2013; }

/* ---------- cards & pages ---------- */
.page { min-height: 100%; padding: 14px 18px 56px; padding-left: max(18px, var(--zb-home-space)); }
.wrap { max-width: 1040px; margin: 0 auto; }
.card {
  background: var(--stone); border: 3px solid var(--stone3); border-radius: 22px; padding: 18px 20px;
  box-shadow: 0 8px 0 rgba(0,0,0,.22), inset 0 0 0 3px rgba(255,255,255,.35);
}
.card h2, .card h3 { margin: 0 0 8px; }
.muted { color: var(--ink-soft); }
.on-dark { color: var(--bone); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--stone2); border: 2px solid var(--stone3); font-size: 14px; font-weight: 700; }
input[type=text], select {
  min-height: 48px; padding: 6px 12px; font: inherit; font-size: 18px; border-radius: 12px;
  border: 3px solid var(--stone3); background: #fff; color: var(--ink); max-width: 100%;
}
label.field { display: block; font-weight: 700; margin: 10px 0 4px; }

/* ---------- logo ---------- */
.dd-logo { display: flex; align-items: center; gap: 12px; color: var(--bone); }
.dd-logo .mark { width: 54px; height: 54px; flex: none; }
.dd-logo .words { line-height: 1; }
.dd-logo .t1 { font-family: "Fredoka", "Andika", sans-serif; font-weight: 700; font-size: 40px; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.dd-logo .t1 b { color: var(--amber); font-weight: 700; }
.dd-logo .t2 { font-size: 15px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.dd-logo.small .mark { width: 36px; height: 36px; }
.dd-logo.small .t1 { font-size: 26px; }

/* ---------- landing ---------- */
.hero { text-align: center; padding: 28px 0 10px; }
.hero .dd-logo { justify-content: center; }
.hero .dd-logo .t1 { font-size: clamp(44px, 9vw, 76px); }
.hero .dd-logo .mark { width: clamp(64px, 12vw, 104px); height: clamp(64px, 12vw, 104px); }
.hero p { color: var(--bone); font-size: 20px; margin: 14px auto; max-width: 620px; }
.hero .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.codebox { letter-spacing: 8px; text-transform: uppercase; text-align: center; font-size: 34px !important; font-weight: 700; width: 12em; max-width: 100%; }

/* ---------- the board ---------- */
.dd-board { position: relative; width: 100%; height: 100%; min-height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dd-fit { position: relative; flex: none; }
.dd-stage { position: absolute; left: 0; top: 0; width: 1000px; height: 600px; transform-origin: 0 0; border-radius: 26px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #cdbf9a; box-shadow: 0 0 0 6px #5b6b3f, 0 10px 0 6px rgba(0,0,0,.25); }
.dd-paper { position: absolute; inset: 0; background: linear-gradient(#f4ecd6, #ece1c2); }
.dd-dig { position: absolute; left: 20px; top: 160px; right: 20px; height: 420px; border-radius: 20px; background: #fbf7ea; border: 4px dashed #c9b78a; }
.dd-dig-label { position: absolute; left: 16px; bottom: 8px; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: #a8966a; font-weight: 700; }
.dd-tray { position: absolute; left: 20px; right: 20px; top: 16px; height: 128px; border-radius: 20px; background: #d9c9a0; box-shadow: inset 0 6px 14px rgba(0,0,0,.18); }
.dd-guide { position: absolute; inset: 0; pointer-events: none; }
.dd-stage.is-write .dd-dig, .dd-stage.is-write .dd-tray { display: none; }
.dd-stage.is-write .dd-paper { background: #fffdf5; }
.dd-stage.is-write .dd-guide[data-kind="baseline"]::after { content: ""; position: absolute; left: 40px; right: 40px; top: 400px; border-top: 5px solid #4a82c4; }
.dd-stage.is-write .dd-guide[data-kind="primary"]::before { content: ""; position: absolute; left: 40px; right: 40px; top: 230px; height: 170px; border-top: 4px solid #d36b6b; border-bottom: 5px solid #4a82c4; background: linear-gradient(transparent 49%, rgba(74,130,196,.55) 49%, rgba(74,130,196,.55) 51%, transparent 51%); }
.dd-model { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 430px; line-height: 480px; font-weight: 600; color: rgba(40,60,80,.2); pointer-events: none; white-space: nowrap; overflow: hidden; }
.dd-tiles { position: absolute; inset: 0; }
.dd-tile {
  position: absolute; width: var(--tile, 100px); height: var(--tile, 100px); border-radius: calc(var(--tile, 100px) * .22); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#fbf4de, #e7d9b2); border: 4px solid #8a7650; box-shadow: 0 6px 0 #6f5d3a, 0 10px 14px rgba(0,0,0,.25);
  font-weight: 700; color: #1b2b1d; font-size: calc(var(--tile, 100px) * .7); line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
/* Tile colours (Tim, 11 Oct 2026): vowels medium green (the app's moss), sometimes-vowels w/y light green,
   consonants with more than one sound light brown (the app's stone browns). Other consonants stay cream. */
.dd-tile[data-kind="vowel"] { background: linear-gradient(#86bd66, #6aa84f); border-color: #3f7a2c; }
.dd-tile[data-kind="sometimes"] { background: linear-gradient(#e3f1d4, #c3dfa6); border-color: #86a96a; }
.dd-tile[data-kind="multi"] { background: linear-gradient(#dcc59c, #c4a574); border-color: #8a6a3e; }
.dd-tile[data-len="2"] { font-size: calc(var(--tile, 100px) * .58); }
.dd-tile[data-len="3"] { font-size: calc(var(--tile, 100px) * .46); }
.dd-stage[data-mode="touch"] .dd-tile { cursor: pointer; }
.dd-tile.held { cursor: grabbing; box-shadow: 0 12px 0 #6f5d3a, 0 20px 24px rgba(0,0,0,.3); transform: scale(1.04); }
.dd-tile.lit { animation: ddlit .9s ease-out; }
.dd-tile.lit-link { animation: ddlink .9s ease-out; }
.dd-tile.lit-sweep { animation: ddsweep 1.1s ease-out; }
@keyframes ddlit { 0% { box-shadow: 0 0 0 0 rgba(255,200,40,.0); } 15% { transform: scale(1.14); background: #ffe58a; box-shadow: 0 0 0 14px rgba(255,200,40,.55), 0 6px 0 #6f5d3a; } 100% { transform: none; } }
@keyframes ddlink { 0% { } 15% { transform: scale(1.14); background: #aef0e6; box-shadow: 0 0 0 14px rgba(20,170,160,.5), 0 6px 0 #6f5d3a; } 100% { transform: none; } }
@keyframes ddsweep { 0% { } 20% { transform: scale(1.12) translateY(-6px); background: #ffe58a; box-shadow: 0 0 0 16px rgba(255,200,40,.5), 0 6px 0 #6f5d3a; } 100% { transform: none; } }
.dd-ink { position: absolute; inset: 0; width: 1000px; height: 600px; }
.dd-stage[data-mode="draw"] { cursor: crosshair; }
.dd-mini .dd-stage { box-shadow: 0 0 0 8px #5b6b3f; }
.dd-mini .dd-tile { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .dd-tile.lit, .dd-tile.lit-link, .dd-tile.lit-sweep { animation: none; background: #ffe58a; outline: 8px solid rgba(255,200,40,.6); }
  .dd-tile.lit-link { background: #aef0e6; outline-color: rgba(20,170,160,.6); }
}

/* ---------- toolbar (tools) ---------- */
.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
.tools .btn { min-width: 56px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--bone); box-shadow: 0 0 0 2px rgba(0,0,0,.4); padding: 0; }
.swatch.on { box-shadow: 0 0 0 4px var(--amber); }

/* ---------- marks ---------- */
.mark-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mark-row .btn { flex: 1 1 0; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 2px solid; }
.badge.got { background: #d8f0d8; border-color: var(--good); color: #0f4a22; }
.badge.challenging { background: #fff0cf; border-color: var(--warn); color: #6b3d00; }
.badge.notyet { background: #fde1e4; border-color: var(--bad); color: #7d1625; }
.badge.over { background: #e4e0ff; border-color: #4a3fa8; color: #2a2273; }

/* ---------- toasts ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--bone); color: var(--ink); border: 3px solid var(--forest); border-radius: 14px; padding: 10px 18px; font-weight: 700; z-index: 99; box-shadow: 0 6px 0 rgba(0,0,0,.3); max-width: 92vw; }
.toast.err { background: #fde1e4; border-color: var(--bad); }

/* ---------- sound switch (adult, every screen) ---------- */
.sound-sw { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 50; }
.sound-sw .btn { min-height: 44px; padding: 4px 14px; font-size: 15px; }

.lit-big { animation: ddbig 1s ease-out; }
@keyframes ddbig { 0% { } 15% { transform: scale(1.12); filter: drop-shadow(0 0 30px #ffd34d) brightness(1.3); } 100% { transform: none; } }

/* ===================== student look: the dinosaur world ===================== */
body.student {
  background: #0b2417 url("art/scene.svg") center bottom / cover no-repeat fixed;
}
@media (max-width: 700px) { body.student { background-position: 62% bottom; } }
body.student .card {
  background: linear-gradient(#f3ead2, #e3d6b3);
  border: 4px solid #7d6a43;
  box-shadow: 0 8px 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.4), inset 0 -10px 24px rgba(120,95,40,.18);
}
body.student .btn { background: linear-gradient(#f7efd8, #e2d3ac); border: 3px solid #6f5d3a; color: #2a2414; box-shadow: 0 4px 0 #4f4128; }
body.student .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #4f4128; }
body.student .btn.primary { background: linear-gradient(#f6b93b, #e08e0b); border-color: #7a4d00; color: #2b1a00; box-shadow: 0 4px 0 #6a4200; }
body.student .btn.on { background: linear-gradient(#3b7a45, #245c30); color: #fbf6e8; border-color: #12331a; box-shadow: 0 4px 0 #0a2010; }
body.student .btn.seat { justify-content: flex-start; gap: 14px; padding-left: 22px; }
body.student .btn.seat img { opacity: .75; }
body.student .btn[disabled] { filter: grayscale(.4); }
body.student .topbar { text-shadow: 0 2px 0 rgba(0,0,0,.5); }
body.student .topbar .who { background: rgba(10,30,20,.55); border-radius: 999px; padding: 4px 16px; }
body.student .hint { text-shadow: 0 2px 0 rgba(0,0,0,.55); }
body.student .dd-stage { box-shadow: 0 0 0 7px #4d6b34, 0 0 0 11px #2d4a22, 0 14px 0 8px rgba(0,0,0,.3); }
body.student .dd-paper { background: linear-gradient(#f1e7cc, #e6d9b6); }
body.student .dd-dig { background: #f7f0dc; border-color: #b9a77c; }
body.student .dd-tray { background: repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 14px, transparent 14px 30px), #cdb98a; }
body.student .dd-dig-label { color: #9a8452; }
body.student .dd-dig-label::before { content: "🦴 "; }
body.student .bigtarget {
  line-height: 1.3; font-size: clamp(110px, 28vh, 260px); padding-top: .02em;
  display: inline-grid; place-items: center; min-width: 1.3em; padding: 0 .18em; border-radius: 34px;
  background: linear-gradient(#f9f1da, #e2d3ac); border: 8px solid #7d6a43; color: #1b2b1d; text-shadow: none;
  box-shadow: 0 14px 0 #4f4128, 0 24px 34px rgba(0,0,0,.4);
}
body.student .dots i { background: rgba(0,0,0,.3); border-color: #f7efd8; }
body.student .dots i.on { background: var(--amber); }
body.student .bones { background: linear-gradient(#f9f1da, #e2d3ac); border: 4px solid #7d6a43; color: #2a2414; box-shadow: 0 5px 0 #4f4128; }
body.student .bones img { vertical-align: middle; }
body.student .swatch { border-color: #f7efd8; }
.egg { display: block; margin: 0 auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); transform-origin: 50% 95%; animation: eggrock 2.6s ease-in-out infinite; }
.egg.hatched { animation: none; opacity: .95; }
@keyframes eggrock { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-7deg); } 72% { transform: rotate(6deg); } 82% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .egg { animation: none; } }
body.student .dd-logo .t1 { text-shadow: 0 4px 0 rgba(0,0,0,.45); }

/* ---------- the DinoDecoder logo ---------- */
.brand-logo { display: block; margin: 0 auto; width: min(640px, 92vw); height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.brand-logo.small { width: min(400px, 78vw); margin-bottom: 8px; }
.tagline { text-align: center; color: var(--bone); font-size: 17px; letter-spacing: 3px; text-transform: uppercase; opacity: .9; text-shadow: 0 2px 0 rgba(0,0,0,.5); margin-top: 2px; }
.hero .card p { color: var(--ink-soft); font-size: 16px; }
a.btn { text-decoration: none; }

.btn.startover { margin-left: 10px; }
body.student .btn.startover { background: linear-gradient(#ffe2b0, #f1b25b); border-color: #7a4d00; }

/* ---------- word-reading assessment, student view: one clear list, no timer, no marks ---------- */
.assess-words { flex: 1 1 auto; overflow-y: auto; padding: 56px 18px 40px; padding-left: max(18px, var(--zb-home-space)); display: grid; gap: 14px 22px;
  grid-template-columns: 1fr; align-content: start; max-width: 1100px; margin: 0 auto; width: 100%; -webkit-overflow-scrolling: touch; }
@media (min-width: 720px) { .assess-words { grid-template-columns: 1fr 1fr; } }
.assess-words .aw { background: linear-gradient(#f9f1da, #e2d3ac); border: 4px solid #7d6a43; border-radius: 22px; box-shadow: 0 5px 0 #4f4128; font-size: clamp(40px, 7vw, 64px); font-weight: 700; color: #1b2b1d; padding: 10px 24px; display: flex; align-items: center; gap: 18px; min-height: 92px; }
.assess-words .aw .n { font-size: 20px; color: #8a7650; min-width: 1.6em; font-weight: 400; }

/* ===================== phone held sideways (short, wide screens) =====================
   The tools move to a column on the right so the board gets the full height, and the other
   student screens shrink and scroll instead of being cut off. */
@media (max-height: 560px) and (orientation: landscape) {
  body.student .dd-board { min-height: 0; }
  #sBoard.on { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  #sBoard .topbar { grid-column: 1 / -1; min-height: 34px; padding-top: 4px; padding-bottom: 0; }
  #sBoard .topbar .who { font-size: 15px; padding: 2px 12px; }
  #sBoard .boardwrap { grid-column: 1; grid-row: 2; padding: 2px 6px 24px max(6px, env(safe-area-inset-left)); }
  #sBoard .toolbar { grid-column: 2; grid-row: 2; width: 158px; padding: 2px max(8px, env(safe-area-inset-right)) 8px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #sBoard .tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; }
  #sBoard .tools .btn.small { min-height: 44px; font-size: 15px; padding: 4px 8px; width: 100%; }
  #sBoard #penTools { flex-wrap: wrap; justify-content: center; gap: 6px; }
  #sBoard #penTools .btn.small { width: calc(50% - 3px); }
  #sBoard .btn.startover { margin-left: 0; }
  #touchHint { display: none !important; }
  #sJoin, #sSeat, #sWait, #sTeachSound, #sDone, #sEnded { overflow-y: auto; }
  .center { padding: 8px 14px; }
  .brand-logo.small { width: 150px; margin-bottom: 2px; }
  .codebox { font-size: 28px !important; min-height: 44px; }
  #sJoin .card, #sSeat .card, #sEnded .card { padding: 10px 16px; }
  #sJoin .card h2, #sSeat .card h2 { margin: 0 0 4px; font-size: 20px; }
  .seat-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 6px; }
  .seat-list .btn { min-height: 52px; font-size: 22px; }
  .egg { width: 80px; height: auto; }
  .egg.hatched { width: 62px; }
  #waitName { font-size: 28px !important; }
  body.student .bigtarget { font-size: clamp(70px, 38vh, 150px); line-height: 1.2; border-width: 6px; }
  .dots { margin: 6px 0; }
  .assess-words { padding-top: 38px; gap: 8px 14px; }
  .assess-words .aw { min-height: 60px; font-size: 38px; padding: 4px 16px; }
}

/* Live Join: waiting in the lesson from the Join button, no ways out (the teacher ends it). */
html.dd-hold #zbHomeButton{display:none}

/* ---------- Tile looks, extras and dig site textures from the DinoStore (Tim, 11 Oct 2026) ----------
   They show on the student's OWN board only (play/student.js calls board.setLook). The vowel / sometimes /
   multi-sound colours stay readable on every look: they become the tile's rim colour. Letters are always
   lowercase in the same simple font. */
.dd-tile span { text-transform: lowercase; }
.dd-stage[data-look] .dd-tile { background: var(--lk); color: var(--tx, #1b2b1d); border-color: var(--rim, #8a7650); box-shadow: 0 6px 0 var(--lk-shadow, #6f5d3a), 0 10px 14px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35); }
.dd-stage[data-look] .dd-tile[data-kind="vowel"] { --rim: #3f7a2c; }
.dd-stage[data-look] .dd-tile[data-kind="sometimes"] { --rim: #86c05f; }
.dd-stage[data-look] .dd-tile[data-kind="multi"] { --rim: #a8743a; }
.dd-stage[data-look="wood"] .dd-tile { --lk: repeating-linear-gradient(92deg, rgba(90,50,10,.12) 0 6px, transparent 6px 14px), linear-gradient(#e2ae74, #b57a3e); --tx: #2b1a0a; --lk-shadow: #6b4420; }
.dd-stage[data-look="moss"] .dd-tile { --lk: radial-gradient(circle at 20% 25%, rgba(60,110,40,.55) 0 9px, transparent 10px), radial-gradient(circle at 80% 78%, rgba(60,110,40,.5) 0 12px, transparent 13px), linear-gradient(#a9bd98, #738f60); --tx: #15240e; --lk-shadow: #44563a; }
.dd-stage[data-look="amber"] .dd-tile { --lk: radial-gradient(circle at 30% 25%, rgba(255,255,255,.65) 0 10%, transparent 30%), linear-gradient(#ffe8a0, #f0a81c); --tx: #3b2200; --lk-shadow: #a06a00; }
.dd-stage[data-look="lava"] .dd-tile { --lk: radial-gradient(circle at 70% 85%, rgba(255,120,30,.75) 0 14%, transparent 40%), linear-gradient(#4a3631, #1e1412); --tx: #ffe0b0; --lk-shadow: #0d0807; }
.dd-stage[data-look="ice"] .dd-tile { --lk: linear-gradient(135deg, rgba(255,255,255,.85) 0 18%, transparent 40%), linear-gradient(#f2fbff, #b2dff2); --tx: #0f3a55; --lk-shadow: #6fa4bf; }
.dd-stage[data-look="gold"] .dd-tile { --lk: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.55) 45% 55%, transparent 62%), linear-gradient(#fff2a8, #e8b923 55%, #c8901a); --tx: #4a3000; --lk-shadow: #8a5f00; }
/* extras */
.dd-stage[data-chunky] .dd-tile { border-radius: calc(var(--tile, 100px) * .3); border-width: 6px; box-shadow: 0 6px 0 var(--lk-shadow, #6f5d3a), 0 12px 0 rgba(0,0,0,.28), 0 18px 18px rgba(0,0,0,.28), inset 0 5px 0 rgba(255,255,255,.4), inset 0 -6px 0 rgba(0,0,0,.14); }
.dd-stage[data-hover] .dd-tile:not(.held) { translate: 0 -8px; box-shadow: 0 26px 16px -14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35); animation: ddhover 3.2s ease-in-out infinite; }
.dd-stage[data-hover] .dd-tile:nth-child(2n) { animation-delay: -1.1s; }
.dd-stage[data-hover] .dd-tile:nth-child(3n) { animation-delay: -2.1s; }
.dd-stage[data-hover] .dd-tile.lit, .dd-stage[data-hover] .dd-tile.lit-link, .dd-stage[data-hover] .dd-tile.lit-sweep { animation-duration: .9s; animation-iteration-count: 1; }
@keyframes ddhover { 0%, 100% { translate: 0 -8px; } 50% { translate: 0 -15px; } }
@media (prefers-reduced-motion: reduce) { .dd-stage[data-hover] .dd-tile:not(.held) { animation: none; } }
/* dig site textures */
.dd-stage[data-ground="sand"] .dd-dig { background: repeating-radial-gradient(circle at 30% 40%, rgba(150,110,40,.10) 0 3px, transparent 3px 22px), #f0dfae; border-color: #c9a85a; }
.dd-stage[data-ground="mud"] .dd-dig { background: radial-gradient(circle at 20% 70%, rgba(60,35,20,.25) 0 40px, transparent 41px), radial-gradient(circle at 75% 30%, rgba(60,35,20,.22) 0 55px, transparent 56px), #9b7a58; border-color: #5d432c; }
.dd-stage[data-ground="moss"] .dd-dig { background: radial-gradient(circle at 15% 25%, rgba(50,100,40,.3) 0 50px, transparent 51px), radial-gradient(circle at 80% 70%, rgba(50,100,40,.3) 0 70px, transparent 71px), #b7d29a; border-color: #5f8a43; }
.dd-stage[data-ground="night"] .dd-dig { background: radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 60% 45%, #fff 0 2px, transparent 3px), radial-gradient(circle at 85% 18%, #fff 0 3px, transparent 4px), radial-gradient(circle at 40% 80%, #fff 0 2px, transparent 3px), linear-gradient(#27407a, #0f1f45); border-color: #5b7ac4; }
.dd-stage[data-ground="night"] .dd-dig-label, .dd-stage[data-ground="lava"] .dd-dig-label { color: rgba(255,255,255,.55); }
.dd-stage[data-ground="lava"] .dd-dig { background: radial-gradient(circle at 25% 85%, rgba(255,140,40,.55) 0 90px, transparent 91px), radial-gradient(circle at 80% 90%, rgba(255,120,30,.5) 0 110px, transparent 111px), linear-gradient(#5a2a1a, #2a1410); border-color: #c8501c; }