/* Phone controls share the visible viewport, including browser toolbar changes. */
@media (max-width:1050px), (max-height:700px) {
 html #seed-dock .seed-slot {height:76px;min-height:76px;gap:3px}
 html #seed-dock .seed-name {
  width:100%;max-width:100%;min-height:26px;max-height:26px;
  font-size:10px;line-height:13px;white-space:normal;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 }
 #seed-dock .slot-art {flex-shrink:0}
 .hud-resources .coin-pill {max-width:100%;min-width:0;gap:5px}
 .hud-resources .coin-pill .hud-icon {flex-shrink:0}
 .hud-resources .coin-pill strong {min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal;font-size:16px}
 #garden-record {scrollbar-width:thin;scrollbar-color:#af8b4a transparent;overscroll-behavior:contain}
 #garden-record::-webkit-scrollbar {width:4px}
 #garden-record::-webkit-scrollbar-thumb {background:#af8b4a;border-radius:4px}
 #story-guide[data-catalysis=true] {
  --guide-top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 58px);
  top:var(--guide-top);left:calc(var(--ui-viewport-left) + var(--ui-safe-left) + 8px);
  width:min(350px,var(--catalysis-guide-width,calc(var(--ui-viewport-width) - 16px)));
  max-width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 16px);
  max-height:max(0px,min(190px,calc(var(--catalysis-guide-floor,50dvh) - var(--guide-top))));
  min-height:0;height:auto;translate:none;padding:10px 15px;gap:4px 8px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:30px minmax(0,1fr);
 }
 #story-guide[data-catalysis=true] header {grid-column:1/-1;min-height:30px;height:30px}
 #story-guide[data-catalysis=true] .story-guide-avatar {width:28px;height:30px}
 #story-guide[data-catalysis=true] .story-ahe-mini {width:28px;height:41px}
 #story-guide[data-catalysis=true] .story-guide-kicker {font-size:11px}
 #story-guide[data-catalysis=true] .story-guide-kicker b {display:inline;margin-left:4px}
 #story-guide[data-catalysis=true] .story-guide-copy {grid-column:1;grid-row:2;overflow:auto;touch-action:pan-y;scrollbar-gutter:stable}
 #story-guide[data-catalysis=true] h2 {font-size:13px;margin:1px 0 4px}
 #story-guide[data-catalysis=true] p {font-size:11px;line-height:1.5}
 #story-guide[data-catalysis=true] small {font-size:10px;line-height:1.5;margin-top:4px}
 #story-guide[data-catalysis=true] footer {grid-column:2;grid-row:2;margin:0;align-self:start;flex-direction:column;max-width:82px;gap:4px}
 html #story-guide[data-catalysis=true] .story-skip {max-width:100%;font-size:10px;white-space:normal}
 #story-guide .story-guide-copy {scrollbar-color:#b79752 transparent;overflow-x:hidden}
 #story-guide .story-guide-copy::-webkit-scrollbar {width:4px}
 #story-guide .story-guide-copy::-webkit-scrollbar-track {background:transparent}
 #story-guide .story-guide-copy::-webkit-scrollbar-thumb {background:#b79752;border-radius:4px}
 #catalysis-potions button .rarity-name {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:100%;max-height:22px;overflow:hidden;overflow-wrap:normal;font-size:9px;line-height:11px}
 #story-guide[data-catalysis=true] .story-steps {display:none}
 #story-guide[data-catalysis=true][data-collapsed=true] {grid-template-rows:30px}
 #story-guide[data-catalysis=true][data-collapsed=true] :is(.story-guide-copy,footer) {display:none}
 #story-guide[data-catalysis=true][data-step=claim] {grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 100px}
 #story-guide[data-catalysis=true][data-step=claim] :is(header,.story-skip,.story-guide-copy small) {display:none}
 #story-guide[data-catalysis=true][data-step=claim] .story-guide-copy {grid-row:1}
 #story-guide[data-catalysis=true][data-step=claim] footer {grid-row:1;max-width:100px;align-self:center}
 #story-guide[data-catalysis=true][data-step=claim] #story-guide-primary {min-height:44px;padding:5px 8px;font-size:12px;line-height:1.3;white-space:normal}
 #story-guide[data-shop=true][data-collapsed=false] {grid-template-rows:30px minmax(0,1fr);overflow:hidden}
 #story-guide[data-shop=true] .story-guide-copy {max-height:none;touch-action:pan-y}
 #story-guide[data-shop=true] #story-guide-primary {min-height:44px;max-width:100px;border-radius:12px;overflow:hidden}
 #story-guide[data-shop=true] footer {min-height:0;gap:0}
 #story-guide[data-shop=true] .story-skip {font-size:10px;min-height:20px}
 #story-guide-primary.quest-claim-target {border-radius:12px;overflow:hidden}
 /* Keep the click-blocking regions, but cut a rounded opening around Claim. */
 #quest-claim-spotlight .claim-shade {background:transparent}
 #quest-claim-spotlight .claim-spotlight-ring {border-radius:18px;box-shadow:0 0 0 9999px rgba(8,17,22,.79);animation:none}
 #quest-claim-spotlight .claim-spotlight-ring::after {content:"";position:absolute;inset:-2px;border:2px solid #fff8d8;border-radius:inherit;box-shadow:0 0 28px #ffc84faa;opacity:.65;pointer-events:none;animation:phone-claim-breathe 1.5s ease-in-out infinite}
}
@keyframes phone-claim-breathe {50%{opacity:1}}
body[data-reduced-motion=true] #quest-claim-spotlight .claim-spotlight-ring::after {animation:none}
@media(prefers-reduced-motion:reduce){#quest-claim-spotlight .claim-spotlight-ring::after {animation:none}}
@media (orientation:landscape) and (max-height:700px) {
 #story-guide[data-shop=true] {right:calc(var(--ui-safe-right) + var(--trading-gutter) + 104px);max-width:calc(var(--ui-viewport-width) - var(--ui-safe-left) - var(--ui-safe-right) - 320px)}
 #story-guide[data-shop=true][data-collapsed=false] {right:calc(var(--ui-safe-right) + var(--trading-gutter) + 104px)}
 #story-guide[data-shop=true][data-collapsed=false] {max-height:min(132px,calc(var(--ui-viewport-height)*.4));padding:7px 14px 9px}
 #story-guide[data-shop=true] header {height:26px;min-height:26px}
 #story-guide[data-shop=true] h2 {font-size:12px}
 #story-guide[data-shop=true] p {font-size:11px;line-height:1.4}
 #garden-record {background:#fff8dcdb;border-radius:0 14px 14px 0;overflow-x:hidden}
}
@media (orientation:portrait) and (max-width:700px) {
 #story-guide[data-catalysis=true] {width:var(--catalysis-guide-width,calc(var(--ui-viewport-width) - 16px))}
 #story-guide[data-shop=true][data-collapsed=false] {max-height:170px}
}
@media (orientation:portrait) and (max-height:600px) {
 #story-guide[data-catalysis=true]:not([data-step=claim]) {padding:8px 12px;gap:2px;grid-template-columns:minmax(0,1fr);grid-template-rows:24px minmax(0,1fr)}
 #story-guide[data-catalysis=true]:not([data-step=claim]) header {height:24px;min-height:24px}
 #story-guide[data-catalysis=true]:not([data-step=claim]) .story-guide-avatar {width:24px;height:24px}
 #story-guide[data-catalysis=true]:not([data-step=claim]) footer {display:none}
}

/* Portrait catalysis leaves a deliberate window for the actual plant. */
.catalysis-secondary-stats {display:none}
@media (orientation:portrait) and (max-width:700px) {
 #story-guide[data-shop=true][data-collapsed=true] {top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 64px);left:calc(var(--ui-viewport-left) + var(--ui-viewport-width)*.5);right:auto;translate:-50% 0;min-height:36px;height:36px;padding:3px 8px}
 body.catalysis-mode #catalysis-panel {
  --portrait-panel-height:min(220px,calc(var(--ui-viewport-height)*.28));
  height:var(--portrait-panel-height);top:calc(var(--ui-viewport-top) + var(--ui-viewport-height) - var(--ui-safe-bottom) - 8px - var(--portrait-panel-height));
  padding:7px 9px;gap:3px;border-radius:16px;
 }
 #catalysis-panel header {min-height:28px;gap:4px}
 #catalysis-panel h2 {font-size:15px}
 #catalysis-panel header button {width:30px;height:30px;min-height:30px;min-width:30px}
 #catalysis-panel .catalysis-heading .catalysis-stage {font-size:10px}
 #catalysis-panel .catalysis-content {flex:1;min-height:0;font-size:11px;line-height:1.4}
 #catalysis-panel .catalysis-content>label {display:flex;align-items:center;gap:5px;font-size:10px}
 #catalysis-panel .catalysis-growth {flex:1;min-width:48px;height:7px;margin:3px 0}
 #catalysis-panel .catalysis-natural {margin:4px 0;padding-top:4px;font-size:11px}
 #catalysis-panel .catalysis-natural small {font-size:10px;line-height:1.4}
 #catalysis-panel .catalysis-actions {grid-template-columns:minmax(0,1fr) 76px;gap:3px}
 #catalysis-panel .catalysis-result {min-height:14px;line-height:14px;font-size:11px}
 #catalysis-panel .catalysis-result:empty {display:none}
 #catalysis-panel :is(.catalysis-cast,.catalysis-harvest,.catalysis-exit) {height:44px;min-height:44px;margin:0;padding:4px;font-size:14px}
 #catalysis-panel .catalysis-exit {font-size:11px}
 #catalysis-panel .catalysis-secondary-stats {display:block;margin:5px 0;font-size:10px;color:var(--card-muted)}
 #catalysis-potions {height:48px;gap:5px;padding:2px}
 #catalysis-potions button {width:54px;height:44px;min-width:54px;min-height:44px;gap:0;padding:2px;border-radius:10px}
 #catalysis-potions .potion-slot-art {width:23px;height:23px;min-height:23px}
 #catalysis-potions button .rarity-name {font-size:8px;line-height:8px;max-height:16px}
 #catalysis-scene-cards {gap:4px}
 #catalysis-scene-cards .catalysis-stat-card,
 #catalysis-scene-cards .catalysis-stat-card[data-card=value] {height:48px;min-height:48px;grid-template-rows:20px 18px;padding:3px;gap:0;border-width:1px;border-radius:9px;box-shadow:none}
 #catalysis-scene-cards .stat-heading {font-size:9px;line-height:10px;max-height:20px;overflow:hidden}
 #catalysis-scene-cards .stat-heading .crop-icon {width:12px;height:12px}
 #catalysis-scene-cards strong {font-size:16px;line-height:18px;white-space:nowrap;overflow-wrap:normal}
 #catalysis-scene-cards :is(.yield-range,small) {display:none}
 body.catalysis-mode #story-guide[data-catalysis=true] {--guide-top:calc(var(--ui-viewport-top) + var(--ui-safe-top) + 54px);height:80px;max-height:80px;padding:7px 12px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:24px minmax(0,1fr);gap:2px 6px}
 body.catalysis-mode #story-guide[data-catalysis=true] header {min-height:24px;height:24px}
 body.catalysis-mode #story-guide[data-catalysis=true]::before {border-image:url('../assets/ui/panel.png') 38 fill / 12px stretch}
 body.catalysis-mode #story-guide[data-catalysis=true] .story-guide-avatar {width:24px;height:24px}
 body.catalysis-mode #story-guide[data-catalysis=true] .story-guide-avatar>.story-ahe-mini {width:24px;height:35px}
 body.catalysis-mode #story-guide[data-catalysis=true] h2 {font-size:12px;line-height:1.3;margin:0 0 2px}
 body.catalysis-mode #story-guide[data-catalysis=true] p {font-size:10px;line-height:1.4}
 body.catalysis-mode #story-guide[data-catalysis=true] footer {max-width:76px;max-height:100%;overflow:auto}
 body.catalysis-mode #story-guide[data-catalysis=true][data-collapsed=true] {height:40px;grid-template-rows:24px}
 body.catalysis-mode #story-guide[data-catalysis=true][data-step=claim] {height:72px;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 100px}
 body.catalysis-mode #story-guide[data-catalysis=true][data-step=claim] footer {max-width:100px}
}