/* A stable viewport with scrolling confined to the map and dialogs. */
html,body{
  width:100%;height:var(--game-viewport-height,100dvh);min-height:0;
  overflow:hidden;overscroll-behavior:none;overflow-anchor:none;
}
body{position:fixed;inset:0;touch-action:manipulation}
#app{
  height:100%;min-height:0;margin:0 auto;overflow:hidden;
}
.map-view{
  height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:none;touch-action:pan-y;scrollbar-width:none;
  padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));
}
.map-view::-webkit-scrollbar{display:none}
.journey-dock{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.modal{
  max-height:calc(var(--game-viewport-height,100dvh) - 32px);
  overscroll-behavior:contain;overflow-anchor:none;
}
.game-view{
  display:flex;flex-direction:column;height:100%;min-height:0;
  padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px))
    max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
}
.game-status{
  flex:0 0 auto;padding:6px 7px 8px;margin-bottom:8px;border-radius:21px;
  border:1px solid #ceb076;background:linear-gradient(145deg,#fff8eace,#eadcbe8c),var(--cw-paper);
  background-size:auto,420px;box-shadow:inset 0 2px 1px #fff8e8,0 4px 0 #7e795a5c;
}
.game-view .topbar{
  min-height:36px;height:36px;margin:0 0 5px;padding:0;gap:5px;
  border:0;background:none;box-shadow:none;border-radius:0;
}
.game-view .nav-circle{
  min-width:40px;min-height:40px;width:40px;height:40px;
}
.game-view .game-title{text-align:left;padding-left:4px}
.game-view .game-title h2{font-size:12px;margin-top:2px}
.game-view .game-title .eyebrow{font-size:7px;letter-spacing:.4px}
.game-view .lives-button{min-height:36px;height:36px;padding:6px;gap:4px;font-size:12px}
.game-view .language-picker{min-height:36px;height:36px;max-width:39px;font-size:9px}
.game-view .hud{
  grid-template-columns:82px minmax(0,1fr) minmax(0,1.2fr);
  height:88px;gap:6px;margin:0;
}
.game-view .hud[data-has-ice=true]{grid-template-columns:76px minmax(0,1fr) 45px minmax(0,1.2fr)}
.game-view .metric{min-height:0;padding:8px 7px;border-radius:15px;overflow:hidden}
.game-view .metric-label{font-size:8px;letter-spacing:.7px}
.game-view .metric-value{font-size:18px;gap:3px;margin-top:5px;line-height:1.1}
.game-view .metric-value small{font-size:8px}
.game-view .metric.collect{padding:5px;text-align:center}
.game-view .metric.collect>.crop{position:static;display:block;margin:0 auto;width:42px;height:43px;filter:none}
.game-view .metric.collect .metric-label{display:none}
.game-view .metric.collect .metric-value{font-size:18px;justify-content:center;margin-top:1px;white-space:nowrap;flex-wrap:nowrap}
.game-view .metric.collect .progress-track{margin:5px 2px 0}
.game-view .progress-track{margin-top:6px}
.game-view .metric.moves{padding:11px 3px;border-radius:50%;border:3px solid #d4b77b;box-shadow:inset 0 2px 1px #c4d7a1,0 3px 0 #655b37}
.game-view .metric.moves .metric-value{font-size:40px;margin-top:5px}
.game-view .metric.score{display:flex;flex-direction:column;justify-content:center}
.game-view .metric.score .metric-value{font-size:20px;flex-wrap:wrap}
.game-view .ice-goal{
  padding:5px 2px;margin:0;min-height:0;display:flex;flex-direction:column;
  justify-content:center;gap:5px;font-size:18px;line-height:1;
}
.game-view .ice-goal .icon{width:30px;height:30px}
.game-view .board-wrap{
  flex:1 1 0;min-height:0;width:100%;max-width:none;margin:0;
  display:grid;place-items:center;contain:layout style;
}
.game-view .board{max-width:100%;max-height:100%;border-width:7px;border-radius:23px}
.game-view .board-aura{inset:15% 8%;filter:none;background:radial-gradient(ellipse,#254a326e,transparent 70%)}
#selection-note{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:min(90%,360px);z-index:15;pointer-events:none;
}
#selection-note .selection-note{margin:0;min-height:0;padding:7px 9px;line-height:1.3}
.game-view .board-caption{display:none}
.game-view .boosters{
  flex:0 0 auto;display:flex;justify-content:center;gap:14px;margin-top:8px;
}
.game-view .booster{
  width:64px;min-width:48px;min-height:52px;height:52px;
  padding:7px;gap:0;border-radius:17px;
}
.game-view .booster>.icon{width:34px;height:34px}
.booster-count{
  position:absolute;right:-3px;top:-4px;min-width:20px;height:20px;
  padding:0 4px;display:grid;place-items:center;border-radius:10px;
  background:#fff3cc;border:1px solid #ceae71;color:#755f34;
  box-shadow:0 2px 0 #93784355;font-size:11px;font-weight:850;line-height:1;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.game-view .game-footer{flex:0 0 auto;margin-top:9px;padding:1px}
.game-view .game-footer .utility{min-height:38px;padding:5px;font-size:9px}
.game-view .game-footer .icon{width:17px;height:17px}
.game-view .game-dock{
  display:flex;align-items:center;justify-content:space-evenly;gap:5px;
  margin-top:9px;padding:6px 5px 8px;border-radius:20px;
}
.game-dock .boosters{display:contents}
.game-dock .booster{width:56px;flex:0 0 56px}
.game-dock .utility{width:40px;height:52px;min-height:48px;padding:0;justify-content:center;flex:0 0 40px}
.game-view .game-dock .utility .icon{width:24px;height:24px}
.game-view .game-dock .booster>.icon{width:36px;height:36px}

/* Raster characters already contain their lighting. Avoid a live blur filter
   on every moving SVG and promote only the fruit that is actually animating. */
.piece{will-change:auto;contain:layout style}
.piece>span,.piece .special-crop{filter:none}
.piece>span:before{
  content:"";position:absolute;left:22%;bottom:5%;width:56%;height:12%;z-index:-1;
  background:radial-gradient(ellipse,#2745313b,transparent 70%);pointer-events:none;
}
.harvest-spark{filter:none}
.harvest-spark:before,.harvest-spark:after{animation:none}
.compact-game .game-view .board-caption{display:none}
.compact-game .game-view .hud{height:80px}
.compact-game .game-view .metric.moves{padding-top:8px}
.compact-game .game-view .metric.moves .metric-value{font-size:35px}
.compact-game .game-view .boosters{margin-top:6px}
.compact-game .game-view .game-footer{margin-top:8px}

@media(max-width:350px){
  .game-view{padding-left:8px;padding-right:8px}
  .game-view .game-title h2{font-size:12px}
  .game-view .game-title .eyebrow{font-size:6px}
  .game-view .hud{grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr)}
  .game-view .hud[data-has-ice=true]{grid-template-columns:65px minmax(0,1fr) 38px minmax(0,1.2fr)}
  .game-view .metric-value,.game-view .metric.collect .metric-value{font-size:16px}
  .game-view .metric.collect>.crop{width:38px}
  .game-view .metric.collect .progress-track{margin:5px 2px 0}
  .game-view .game-dock{gap:4px}
  .game-dock .booster{width:48px;flex-basis:48px}
}
@media(orientation:landscape) and (max-height:540px){
  #app{max-width:960px}
  .game-view{
    display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);
    grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;
  }
  .game-status{grid-column:1;grid-row:1;margin:0}
  .game-view .game-dock{grid-column:1;grid-row:3;margin:0}
  .game-view .game-dock .booster{width:48px;flex-basis:48px}
  .game-view .game-dock{gap:4px}
  .game-view .board-wrap{grid-column:2;grid-row:1/-1;height:100%}
}