/* Gem Dig. One look: an underground mine, dark. Built on app.css (fonts, top bar, menu, dialogs, rules sheet). */
.skin-gems{--bg:#15110e;--fg:#f1e8d6;--mut:#b3a690;--card:#211a14;--line:#4a3e31;--accent:#f0a232;--accent-fg:#1d1208;--cell:#2a2119;--dis-bg:#1b1511;--dis-fg:#7a6c58;--dis-line:#40352a;--dim:rgba(0,0,0,.7);
  --gem:#2fbfa6;--gem-hi:#8de6d4;--gem-lo:#17806e;--rock:#4b4036;--rock-hi:#6a5c4e;--rock-lo:#2c241d;
  color-scheme:dark;background:#15110e}
.gd-app{min-height:100dvh;display:flex;flex-direction:column;background:
  radial-gradient(ellipse 70% 40% at 50% 0,#3a2c1d55,transparent 70%),
  repeating-linear-gradient(100deg,#ffffff05 0 2px,transparent 2px 9px),#15110e}
.gd-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px max(16px,var(--sar)) 16px max(16px,var(--sal))}
.gd-l{font-size:14px;font-weight:600;color:var(--mut)}

/* ladder */
.gd-board{width:min(358px,100%);display:flex;flex-direction:column;gap:10px}
.gd-ladder{display:flex;justify-content:center;gap:4px;height:36px}
.gd-step{flex:1 1 0;max-width:96px;min-width:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#1f1812;border:1.5px solid #4a3e31;color:var(--mut);font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:-.02em;white-space:nowrap}
.gd-step.past{color:#8a7a64;border-color:#3a3026}
.gd-step.now{background:var(--accent);border-color:#ffd48a;color:var(--accent-fg);box-shadow:0 0 14px #f0a23277}

/* board */
.gd-gridwrap{position:relative;padding:8px;border-radius:18px;background:linear-gradient(180deg,#2a2018,#1a1410);border:2px solid #4a3e31;box-shadow:inset 0 6px 16px #000a}
.gd-grid{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px}
.gd-cell{position:relative;display:flex;align-items:center;justify-content:center;padding:0;border-radius:12px;border:2px solid #17120e;
  background:radial-gradient(circle at 28% 22%,var(--rock-hi) 0 12%,transparent 13%),radial-gradient(circle at 76% 78%,var(--rock-lo) 0 14%,transparent 15%),linear-gradient(160deg,#5d5043,#3a3027);
  box-shadow:inset 0 3px 0 #ffffff22,inset 0 -5px 0 #00000055,0 4px 0 #0c0907}
.gd-cell:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 3px 0 #ffffff22,inset 0 -3px 0 #00000055,0 2px 0 #0c0907}
.gd-cell:not(:disabled):hover{filter:brightness(1.12)}
.gd-cell:disabled{cursor:default}
.gd-cell svg{width:58%;height:58%;display:block}
.gd-cell.gem,.gd-cell.mine,.gd-cell.open{background:radial-gradient(circle at 50% 55%,#2a2018,#120d0a);box-shadow:inset 0 4px 10px #000c;border-color:#2c241d}
.gd-cell.gem{background:radial-gradient(circle at 50% 55%,#17493f,#0d211c);border-color:#1f6b5c;box-shadow:inset 0 4px 10px #000a,0 0 12px #2fbfa644}
.gd-cell.open{opacity:.5}
.gd-cell.open svg{width:48%;height:48%}
.gd-cell.mine svg{width:50%;height:50%}
.gd-cell.mine.hit{background:radial-gradient(circle at 50% 55%,#a53a1c,#4a1708);border-color:#ff8a5c;box-shadow:inset 0 4px 10px #0008,0 0 16px #ff5a3888}
.gd-cell.pop svg{animation:gdpop .22s ease-out}
@keyframes gdpop{from{transform:scale(.4)}to{transform:none}}
.gd-cell.picked{border-color:var(--accent);box-shadow:inset 0 3px 0 #ffffff22,inset 0 -5px 0 #00000055,0 0 0 2px var(--accent),0 4px 0 #0c0907}
.gd-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gd-x{padding:6px 22px;border-radius:999px;background:var(--accent);color:var(--accent-fg);border:3px solid #ffd48a;font-family:var(--mono);font-weight:700;font-size:32px;box-shadow:0 6px 24px #000c,0 0 24px #f0a23288}
.gd-status{min-height:48px;display:flex;align-items:center;justify-content:center}
.gd-status .m{display:flex;align-items:center;padding:8px 18px;background:var(--card);border:2px solid #4a3e31;border-radius:999px;font-size:17px;font-weight:700;text-align:center}

/* panel */
.gd-panel{width:min(358px,100%);display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--card);border:2px solid #4a3e31;border-radius:18px}
.gd-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:4px;background:#15110e;border-radius:999px;border:1.5px solid #3a3026}
.gd-tabs.one{grid-template-columns:1fr}
.gd-tabs button{height:44px;border:0;border-radius:999px;background:transparent;color:var(--mut);font-weight:700;font-size:16px}
.gd-tabs button[aria-selected=true]{background:var(--fg);color:#15110e}
.gd-tabs button:disabled{opacity:.6}
.gd-balrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.gd-balance{font-size:13px}
.gd-balance .mono{display:inline;font-size:14px;color:var(--fg)}
.gd-betrow{display:flex;gap:8px}
.gd-in{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:12px;border:2px solid #4a3e31;background:#15110e;color:var(--fg);font-family:var(--mono);font-weight:700;font-size:20px;text-align:left}
.gd-in:disabled{color:var(--mut);border-color:#3a3026}
.gd-in.off{opacity:.45}
.gd-sm{width:52px;height:44px;flex:none;border-radius:12px;border:2px solid #4a3e31;background:#2a2119;color:var(--fg);font-weight:700;font-size:18px;padding:0}
.gd-sm:disabled{color:var(--dis-fg);background:var(--dis-bg);border-color:var(--dis-line)}
.gd-minesrow{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.gd-step-c{display:flex;align-items:center;gap:4px}
.gd-step-c .round{width:44px;height:44px}
.gd-step-c .val{width:48px;text-align:center;font-size:22px;line-height:1}
.gd-picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:-4px}
.gd-picks button{height:44px;padding:0;border-radius:999px;border:2px solid #4a3e31;background:#15110e;color:var(--fg);font-family:var(--mono);font-weight:700;font-size:18px}
.gd-picks button[aria-pressed=true]{background:var(--fg);color:#15110e;border-color:var(--fg)}
.gd-picks button:disabled{color:var(--dis-fg);border-color:var(--dis-line)}
.gd-picks button:disabled[aria-pressed=true]{background:#3a3026;color:var(--mut)}
.gd-sect{display:flex;flex-direction:column;gap:12px}
.gd-ghost{height:44px;border-radius:999px;border:2px solid #4a3e31;background:transparent;color:var(--fg);font-weight:700;font-size:16px}
.gd-ghost:disabled{color:var(--dis-fg);border-color:var(--dis-line)}
.gd-main-btn{width:100%;height:60px;font-size:20px;font-variant-numeric:tabular-nums;background:var(--accent)!important;color:var(--accent-fg)!important;box-shadow:0 4px 0 #8a5510!important}
.gd-main-btn:disabled{background:var(--dis-bg)!important;color:var(--dis-fg)!important;box-shadow:none!important;border:2px solid var(--dis-line)}
.gd-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.gd-field .gd-in{flex:none;width:100%}
.gd-pair{display:flex;gap:8px;align-items:center}
.gd-pair .gd-in{flex:none;width:64px;text-align:center}
.gd-unit{color:var(--mut);font-weight:700}
.gd-seg{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;padding:3px;gap:3px;background:#15110e;border:1.5px solid #3a3026;border-radius:12px}
.gd-seg button{min-height:44px;padding:0 4px;border:0;border-radius:9px;background:transparent;color:var(--mut);font-weight:700;font-size:14px;line-height:1.1}
.gd-seg button[aria-pressed=true]{background:var(--fg);color:#15110e}
.gd-seg button:disabled[aria-pressed=false]{opacity:.7}
.gd-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gd-hint{margin:0;color:var(--mut);font-size:15px;text-align:center}

/* desktop: panel on the left, ladder and board on the right */
@media (min-width:900px){
  .gd-main{flex-direction:row;justify-content:center;align-items:center;gap:72px;padding:24px 48px}
  .gd-panel{order:1;width:360px;flex:none}
  .gd-board{order:2;width:min(600px,calc(100vw - 360px - 72px - 96px),calc(100dvh - 44px - 48px - 36px - 48px - 24px - 40px));gap:14px}
  .gd-ladder{height:44px;gap:6px}.gd-step{font-size:16px;border-radius:10px}
  .gd-gridwrap{padding:12px;border-radius:22px}
  .gd-grid{gap:12px}.gd-cell{border-radius:16px}
  .gd-x{font-size:48px;padding:8px 32px}
}
/* phone: the board shrinks so the panel stays near */
@media (max-width:899px){
  .gd-gridwrap{width:min(100%,max(276px,calc(100dvh - 645px - var(--sat) - var(--sab))));align-self:center}
  .gd-panel{width:min(358px,100%);gap:6px;padding:10px}
  .gd-main{gap:6px;padding-top:8px;padding-bottom:4px}
  .gd-board{gap:6px}.gd-ladder{height:32px}.gd-sect{gap:8px}.gd-main-btn{height:52px}
}

/* Short phone frame (about 600 pt tall): the board shrinks first and the panel packs tighter, so the bottom bar stays in view. */
@media (max-width:899px) and (max-height:760px){
  .gd-app{height:100dvh;overflow:hidden}
  .gd-main{min-height:0;gap:4px;padding-top:4px;padding-bottom:4px}
  .gd-board{gap:4px;flex:1 1 0;min-height:0;container-type:size;justify-content:flex-start}.gd-ladder{height:26px}.gd-step{font-size:11px}
  .gd-gridwrap{padding:6px;width:min(100cqw,calc(100cqh - 54px))}
  .gd-grid{gap:5px}
  .gd-status{min-height:20px}.gd-status .m{padding:1px 12px;font-size:14px}
  .gd-panel{gap:3px;padding:6px 8px}
  .gd-tabs{padding:3px}
  .gd-balrow{margin-bottom:2px}
  .gd-sect{gap:6px}.gd-main-btn{height:48px}
  .gd-picks{margin-top:0}
}