/* Hollow Tide — original warm-dark styles, no frameworks. */
*{box-sizing:border-box}
:root{
  --bg:#0E1014; --panel:#16181F; --panel2:#1B1E27; --line:rgba(255,255,255,.08);
  --ink:#F4F5F7; --mut:#9BA2AF; --dim:#7E8595;
  --accent:#D9A441; --accent2:#4CC9F0;
  --sand:#E8B34B; --sand-hi:#F6D789;
  --good:#7DE3A8; --bad:#FF7A7A; --rock:#3A3F4C;
}
html,body{margin:0;padding:0;background:var(--bg)}
body{-webkit-font-smoothing:antialiased;font-family:'Inter',system-ui,sans-serif;color:var(--ink);font-size:15px;min-height:100vh}
a{color:inherit}
header{max-width:1060px;margin:0 auto;padding:18px 16px 6px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.logo{margin:0;font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em}
.logo-dot{color:var(--accent)}
.tagline{margin:0;color:var(--mut);font-size:13.5px}
.game-container{max-width:1060px;margin:0 auto;padding:10px 16px 40px;display:grid;grid-template-columns:230px minmax(0,1fr) 230px;gap:14px;align-items:start}
.side-panel{display:flex;flex-direction:column;gap:12px}
.panel-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.panel-card h2{margin:0 0 6px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:400}
.stat-value{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:30px;line-height:1}
.stat-sub{font-size:20px;color:var(--mut)}
.stat-gap{margin-top:12px}
.stars-row{color:#FFC24D;font-size:18px;letter-spacing:.1em}
.wind-pill{display:inline-block;margin-top:6px;font-family:'Space Mono',monospace;font-size:12px;color:var(--accent2);border:1px solid rgba(76,201,240,.4);border-radius:999px;padding:3px 10px}
.mode-tabs{display:flex;gap:8px}
.mode-tabs button{flex:1;appearance:none;cursor:pointer;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut);font:inherit;font-weight:600;font-size:13px;padding:9px 4px}
.mode-tabs button.on{background:rgba(217,164,65,.16);border-color:rgba(217,164,65,.55);color:#fff}
.board-wrapper{position:relative;background:linear-gradient(180deg,#15171F,#101218);border:1px solid rgba(217,164,65,.28);border-radius:20px;padding:14px;box-shadow:inset 0 0 90px rgba(217,164,65,.07),0 24px 50px rgba(0,0,0,.45)}
.drop-row{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-bottom:8px}
.drop-row button{appearance:none;cursor:pointer;border-radius:9px;border:1px solid rgba(217,164,65,.4);background:rgba(217,164,65,.1);color:var(--sand-hi);font-size:15px;line-height:1;padding:7px 0;transition:.15s}
.drop-row button:hover:not(:disabled){background:rgba(217,164,65,.28)}
.drop-row button:disabled{opacity:.3;cursor:default}
.grid-board{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;touch-action:manipulation}
.cell{aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#10131A;position:relative;transition:background .12s,border-color .12s}
.cell.target{border:1px dashed rgba(232,179,75,.65);background:rgba(232,179,75,.06)}
.cell.rock{background:linear-gradient(180deg,#434957,#2C303B);border:1px solid rgba(255,255,255,.14)}
.cell.rock::after{content:"";position:absolute;inset:22%;border-radius:4px;background:rgba(255,255,255,.12)}
.cell.sand{background:radial-gradient(circle at 35% 30%,var(--sand-hi),var(--sand) 70%);border:1px solid rgba(0,0,0,.35);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cell.sand.good{outline:2px solid rgba(125,227,168,.55);outline-offset:-2px}
.cell.sand.waste{background:radial-gradient(circle at 35% 30%,#FFB3B3,var(--bad) 70%)}
.cell.land{animation:land .25s ease}
@keyframes land{0%{transform:scale(.4)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn-primary{appearance:none;cursor:pointer;border:none;border-radius:12px;background:linear-gradient(180deg,#E8B34B,#C08F2E);color:#141310;font:inherit;font-weight:700;font-size:15px;padding:12px 22px;box-shadow:0 8px 22px rgba(217,164,65,.35)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{appearance:none;cursor:pointer;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#E7EAEF;font:inherit;font-weight:600;font-size:13px;padding:9px 12px}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-ghost:disabled{opacity:.4;cursor:default}
.overlay-screen{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(10,12,16,.9);backdrop-filter:blur(6px);border-radius:20px;padding:28px}
.overlay-screen.active{display:flex}
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.overlay-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,5vw,46px);letter-spacing:-.02em}
.overlay-copy{margin:0;max-width:420px;color:#C2C7D0;font-size:14.5px;line-height:1.6}
.overlay-copy strong{color:var(--sand-hi)}
.big-stars{font-size:34px;color:#FFC24D;letter-spacing:.15em}
.big-stars .off{color:#3A3F4C}
.settings-wrap{width:min(320px,90%)}
.settings-row{display:flex;align-items:center;justify-content:space-between;color:var(--mut);font-size:14px;padding:8px 2px}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-switch .slider{position:absolute;inset:0;border-radius:999px;background:#2A2E38;transition:.2s;cursor:pointer}
.toggle-switch .slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.toggle-switch input:checked+.slider{background:var(--accent)}
.toggle-switch input:checked+.slider::before{transform:translateX(20px)}
.levels-panel{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;background:rgba(12,14,19,.97);border-radius:20px;padding:20px;overflow:hidden}
.levels-panel.active{display:flex}
.levels-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.levels-head h2{margin:0;font-size:20px}
.levels-grid{overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px}
.world-block h3{margin:6px 0 8px;font-size:14px;color:var(--sand-hi);font-weight:600}
.world-rows{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.lvl{appearance:none;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:#1A1D25;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:9px 2px 6px;display:flex;flex-direction:column;gap:2px;align-items:center}
.lvl small{font-size:10px;color:#FFC24D;letter-spacing:.08em}
.lvl.locked{opacity:.35;cursor:default}
.lvl:not(.locked):hover{border-color:var(--accent)}
.shop-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.skin{cursor:pointer;border-radius:12px;border:2px solid transparent;background:#1A1D25;padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--mut);min-width:96px}
.skin .dot{width:30px;height:30px;border-radius:9px}
.skin.sel{border-color:var(--accent);color:#fff}
.skin.locked{opacity:.5;cursor:default}
.hint-note{min-height:20px;font-size:13px;color:var(--accent2)}
.kbd-help{font-family:'Space Mono',monospace;font-size:11px;color:var(--dim);margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:900px){
  .game-container{grid-template-columns:1fr}
  /* align-items:start matters: without it every card in this row stretches to
     the tallest sibling, which is what turned the Campaign/Daily tabs into
     41x167 vertical strips. */
  .side-panel{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .side-panel .panel-card{flex:1;min-width:140px}
  /* The tabs are not a .panel-card, so give them their own full-width row
     rather than letting them share one with a much taller stats card. */
  .side-panel .mode-tabs{flex:1 0 100%;order:-1}
  /* With the sidebars gone the board would take the full width, and a 9x9
     grid of 1fr cells then grows taller than the screen. Capping it keeps
     tablet cells the same size desktop already uses. */
  .board-wrapper{max-width:560px;margin-left:auto;margin-right:auto}
  #right-panel{display:none}
}

/* Phones: the board is the point, so the panels above it get compact and the
   whole stack is sized to leave the 9x9 grid above the fold. Previously 70% of
   a 390x664 screen was chrome and the board started below the bottom edge. */
@media(max-width:560px){
  /* The masthead was 96px of a 664px screen. Trimming it is what finally
     lifts the 9x9 board fully above the fold. */
  header{padding:8px 10px 2px}
  .logo{font-size:21px}
  .tagline{font-size:11.5px}
  .game-container{padding:8px 10px 28px;gap:8px}
  .side-panel{gap:8px}
  .side-panel .panel-card{padding:8px 10px;min-width:0;border-radius:12px}
  .panel-card h2{font-size:9px;letter-spacing:.14em;margin:0 0 2px}
  .stat-value{font-size:17px;line-height:1.15}
  .stat-value.stat-sub{font-size:12px}
  .stars-row{gap:8px}
  .mode-tabs{gap:6px}
  .mode-tabs button{padding:9px 6px;font-size:12.5px;min-height:40px}
  .board-wrapper{padding:8px;border-radius:14px}
  .grid-board{gap:3px}
  .cell{border-radius:5px}
  .drop-row{gap:3px;margin-bottom:5px}
  /* 40px keeps every drop arrow a real tap target at 9 columns across 390px */
  .drop-row button{padding:0;min-height:40px;font-size:14px;border-radius:7px}
  .btn-row{gap:6px;flex-wrap:wrap}
  .hint-note{font-size:11px}
}