/* Shared garden interface: paper surfaces, ink borders and restrained corners. */
:root{--ui-paper:#f7e9c7;--ui-paper-light:#fff6df;--ui-ink:#334f46;--ui-muted:#776b51;--ui-line:#b8a37a;--ui-accent:#dbba6d;--ui-danger:#985641}
button{border:1px solid var(--ui-ink);border-radius:3px;background:var(--ui-paper-light);color:var(--ui-ink);font-weight:600;box-shadow:0 2px 0 #8b7959;transition:background .12s,transform .12s}
button:active{background:#e9d6a9;transform:translateY(1px);box-shadow:0 1px 0 #8b7959}button:focus{outline:none}button:focus-visible{outline:2px solid var(--ui-ink);outline-offset:3px}button:disabled{opacity:.48;box-shadow:none}
.modal{background:rgba(32,42,32,.42);padding:16px}
.dialog{width:600px;padding:20px 22px;background:var(--ui-paper);color:var(--ui-ink);border:2px solid var(--ui-ink);border-radius:4px;box-shadow:5px 5px 0 rgba(37,47,34,.35);max-height:calc(100% - 8px);scrollbar-color:#9b8b68 var(--ui-paper)}
.dialog h2{margin:0 32px 16px 0;padding:0 0 12px;font-size:21px;font-weight:700;letter-spacing:1px;border-bottom:2px solid var(--ui-ink);color:var(--ui-ink)}
#close{top:9px;right:10px;width:40px;min-height:40px;font-size:25px;color:var(--ui-ink);background:transparent;border:0;border-radius:0;box-shadow:none}#close:active{background:#e6d5af;transform:none}
.dialog p{font-size:14px;color:var(--ui-muted);line-height:1.65}
.item-tag{padding:0;background:transparent;border:0;border-radius:0;color:var(--ui-muted);font-size:12px;letter-spacing:.5px}
.dialog .item-effect{margin:16px 0 20px;font-size:20px;line-height:1.55;font-weight:600;color:var(--ui-ink)}
.item-price{border-top:1px solid var(--ui-line);padding:12px 0 0;font-size:13px;color:var(--ui-muted)}
.item-detail{display:flow-root}.item-detail .wide{float:right;width:auto;min-width:136px;margin-top:18px;padding:8px 18px;font-size:14px;background:var(--ui-paper-light);border:1px solid var(--ui-ink);border-radius:3px;box-shadow:0 2px 0 #8b7959}
.cards{margin:0 -5px}.card{padding:5px}.card-inner{padding:13px;border:1px solid var(--ui-line);border-radius:2px;background:var(--ui-paper-light)}
.card h3{font-size:15px;color:var(--ui-ink);margin:0 0 8px}.card p{font-size:13px;min-height:38px;margin:0 0 12px}.card small{color:var(--ui-muted)}
.card button{border:1px solid var(--ui-ink);border-radius:3px;background:#ead49d;color:var(--ui-ink);min-height:44px;font-size:13px;box-shadow:0 2px 0 #8b7959}
.dialog .wide{font-size:14px;border-radius:3px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dialog .menu-grid .wide{margin:0;min-height:46px;background:var(--ui-paper-light);text-align:left;padding:10px 14px}.menu-grid .wide:first-child{background:#ead49d}.danger,.dialog .danger{color:var(--ui-danger)}
.tool-row{gap:12px;border-bottom:1px solid var(--ui-line);padding:12px 0}.tool-row strong{font-size:15px;color:var(--ui-ink)}.tool-row p{font-size:13px;color:var(--ui-muted);margin:4px 0 0}.tool-row button{font-size:13px;flex-shrink:0}
.help-steps{font-size:14px;line-height:1.65;color:var(--ui-ink)}.help-steps li+li{margin-top:8px}
#menu,#catalog{border:1px solid var(--ui-ink);border-radius:4px;background:rgba(255,246,223,.97);box-shadow:0 2px 0 #8b7959;color:var(--ui-ink)}
#touch-actions button,#touch-actions.bench-context button{background:rgba(255,246,223,.97);border:1px solid var(--ui-ink);border-radius:4px;color:var(--ui-ink);box-shadow:0 3px 0 #8b7959;font-weight:600}
#touch-actions #interact{background:#ead49d}#touch-actions button:active{background:#dcc28a;box-shadow:0 1px 0 #8b7959}
#movement #joystick-base{border:2px solid rgba(56,77,61,.68);background:rgba(229,212,170,.65);box-shadow:inset 0 0 0 16px rgba(83,103,75,.08)}#movement #joystick-knob{background:#f7e9c7;border:2px solid #61725b;box-shadow:0 2px 0 #8b7959}
#target:not(:empty){border-radius:3px;color:var(--ui-ink)}#result.action-notice,#result.egg-notice{border-radius:3px}#day{color:var(--ui-ink)}
@media(max-height:440px){.dialog{padding:16px 18px}.dialog h2{font-size:19px;padding-bottom:10px;margin-bottom:12px}.dialog .item-effect{margin:14px 0 16px;font-size:18px}.menu-grid{gap:8px}.dialog .menu-grid .wide{min-height:44px;padding:8px 12px}}
@media(max-width:520px){.dialog{padding:16px}.card-inner{padding:12px}}
#close:focus-visible{outline:2px solid #776b51;outline-offset:-8px}
.item-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 18px;align-items:center}.dialog:has(.item-detail){width:520px}.item-detail .item-tag{grid-column:1;grid-row:1}.item-detail .item-price{grid-column:2;grid-row:1;border:0;padding:0;font-size:12px;text-align:right;max-width:260px}.dialog .item-detail .item-effect{grid-column:1/-1;grid-row:2;margin:0;padding:12px 0;line-height:1.6;font-size:18px;font-weight:600;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line)}.item-detail .wide{grid-column:2;grid-row:3;float:none;justify-self:end;min-width:104px;margin:0;padding:8px 16px}.item-detail>p:not(.item-effect){grid-column:1/-1;grid-row:3;margin:0;font-size:12px}.item-detail:has(>p:not(.item-effect))>.wide{grid-row:4}@media(max-width:520px){.item-detail{gap:14px 12px}.item-detail .item-price{max-width:170px}}
/* Compact 16:9 item panels; keep actions visible while long effects scroll. */
.dialog:has(.item-detail){width:min(520px,calc((100dvh - 48px) * 16 / 9));aspect-ratio:16/9;display:flex;flex-direction:column;overflow:hidden;padding:18px 20px}
.dialog:has(.item-detail) h2{flex-shrink:0;margin-bottom:12px;padding-bottom:10px}
.dialog:has(.item-detail) #modal-content{flex:1;min-height:0}
.dialog .item-detail{height:100%;grid-template-rows:auto minmax(0,1fr) auto;gap:12px 14px}
.dialog .item-detail .item-effect{align-self:stretch;overflow:auto;min-height:0;padding:10px 0;font-size:17px}
.dialog .item-detail:has(>p:not(.item-effect)){grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px 14px}
@media(max-height:360px){.dialog:has(.item-detail){padding:12px 16px}.dialog:has(.item-detail) h2{font-size:18px;margin-bottom:8px;padding-bottom:8px}.dialog .item-detail{gap:8px 12px}.dialog .item-detail .item-effect{font-size:15px;padding:6px 0}}

/* Gold balance stays above the scene, including short landscape phones. */
#hud #wallet{display:flex;align-items:center;gap:7px;left:calc(16px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));bottom:auto;min-height:40px;max-width:calc(100% - 230px);padding:4px 12px 4px 6px;border:1px solid #b79b61;border-radius:8px;background:rgba(255,246,224,.94);color:#66502b;font-size:19px;font-weight:600;line-height:1;text-shadow:none;white-space:nowrap;pointer-events:none}
#wallet .coin-icon{display:block;width:30px;height:30px;flex:none}
#wallet #gold{overflow:hidden;text-overflow:ellipsis}
@media(max-height:440px){#hud #wallet{top:calc(7px + env(safe-area-inset-top));min-height:36px;font-size:17px}#wallet .coin-icon{width:27px;height:27px}}

/* Two direct-use slots at the growth station. */
#items{display:flex;position:absolute;left:50%;right:auto;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;gap:12px;flex-wrap:nowrap;pointer-events:auto;z-index:2}
#items[hidden]{display:none!important}
#items button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:82px;min-width:82px;height:82px;min-height:0;padding:6px;margin:0;border:1px solid var(--ui-ink);border-radius:6px;background:rgba(255,246,223,.97);color:var(--ui-ink);box-shadow:0 3px 0 #8b7959;font-size:13px;line-height:1.2;white-space:nowrap}
#items .item-icon{font-size:26px;line-height:1;color:#2b8991}
#items .item-count{font-size:12px;color:#746448}#items b{margin:0;color:inherit}
#items button:disabled{opacity:.48;cursor:default}#items button.armed{opacity:.8;border-color:#429477;background:#e1ecd0}#items button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #8b7959}
@media(max-height:440px){#items{bottom:calc(12px + env(safe-area-inset-bottom));gap:10px}#items button{width:68px;min-width:68px;height:64px;font-size:12px}#items .item-icon{font-size:20px}}

/* Generated inventory icons, preserve transparent edges. */
#items button{padding:4px}
#items img.item-icon{display:block;width:36px;height:36px;object-fit:contain;flex-shrink:0}
@media(max-height:440px){#items button{padding:3px;gap:2px}#items img.item-icon{width:24px;height:24px}}

#customer-speech{position:absolute;transform:translate(-50%,-100%);padding:12px 18px;max-width:85vw;white-space:nowrap;background:#fff4d8;border:2px solid #876643;border-radius:12px;color:#593d27;font-size:18px;font-weight:bold;box-shadow:0 3px 0 rgba(89,61,39,.18);pointer-events:none;z-index:4}
#customer-speech[hidden]{display:none}
#customer-speech:after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:#fff4d8;border-right:2px solid #876643;border-bottom:2px solid #876643;transform:translateX(-50%) rotate(45deg)}
@media(max-height:440px){#customer-speech{font-size:15px;padding:9px 13px}}

#vitality-screen{position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 65px 15px rgba(255,203,79,.42);border:3px solid rgba(255,222,135,.6);animation:vitality-breathe 1.2s ease-in-out infinite alternate}
#vitality-label{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:8px 15px;border:1px solid #d6aa50;border-radius:6px;background:rgba(255,244,198,.96);color:#856014;font-size:17px;font-weight:bold;pointer-events:none;white-space:nowrap}
#vitality-screen[hidden],#vitality-label[hidden]{display:none}
@keyframes vitality-breathe{to{box-shadow:inset 0 0 85px 22px rgba(255,203,79,.58)}}
@media(max-height:440px){#vitality-label{top:10px;font-size:14px;padding:6px 12px}}
@media(prefers-reduced-motion:reduce){#vitality-screen{animation:none}}

.catalog-progress{margin:0 0 15px}.catalog-heading{font-size:15px;margin:20px 0 10px;color:var(--ui-ink);border-bottom:1px solid var(--ui-line);padding-bottom:7px}
.frog-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.catalog-entry{padding:8px 5px;text-align:center;border:1px solid var(--ui-line);background:#fff8e7;border-radius:4px}.catalog-entry img,.catalog-unknown{display:block;width:100%;aspect-ratio:1;object-fit:contain}.catalog-entry strong{display:block;font-size:12px;line-height:1.4;margin-top:5px;color:var(--ui-ink)}.catalog-unknown{display:flex;align-items:center;justify-content:center;font-size:54px;color:#b4a584;background:#eee4cc;border-radius:3px}.catalog-entry.locked strong{color:#b4a584}@media(max-width:520px){.frog-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Center the visible question glyph, without full-width character bearings. */
.catalog-unknown{position:relative;display:block;height:0;padding-bottom:100%;aspect-ratio:auto;font-size:54px}
.catalog-unknown span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;font-size:54px;font-weight:400;line-height:1;letter-spacing:0;text-indent:0;margin:0;padding:0}

#nursery-controls{position:absolute;top:calc(68px + env(safe-area-inset-top));left:20px;display:flex;align-items:center;gap:10px;z-index:2;color:#345e53;font-size:13px}#nursery-controls[hidden]{display:none}#nursery-controls button{padding:6px 10px;min-height:44px;background:#fff3d5}#nursery-controls button[hidden]{display:none}.nursery-memory{text-align:center}.nursery-memory img{width:180px;height:180px;object-fit:contain;background:#f1e6c8;border-radius:12px}.nursery-memory .item-effect{font-size:21px}@media(max-height:440px){#nursery-controls{top:58px;gap:6px;max-width:calc(100% - 40px);flex-wrap:wrap}#nursery-controls button{font-size:12px;padding:6px}#nursery-count{max-width:150px}}

html,body,#hud,.dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img,a{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}.rank-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #dbc89b;font-size:14px}.rank-row>b{width:28px}.rank-row>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-row>strong{white-space:nowrap}.dialog{overscroll-behavior:contain}

.dialog .rank-demo{display:inline-block;padding:6px 10px;background:#dce9d1;border:1px solid #859c73;border-radius:6px;color:#365944;font-weight:600}

.rank-row{gap:12px;min-height:86px}.rank-frog{width:64px;height:64px;object-fit:contain;background:#eee5c9;border-radius:8px;flex-shrink:0}.rank-unknown{display:flex;align-items:center;justify-content:center;color:#a59673;font-size:32px}.rank-player{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.rank-player span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-player strong{color:#3b6658;font-size:13px}.rank-row>strong{font-size:13px}@media(max-width:600px){.rank-row{gap:8px}.rank-frog{width:48px;height:48px}.rank-row>strong{font-size:12px}}

.rank-self{position:relative;background:#fff4d5;border:1px solid #bdaa79;border-radius:10px;padding:12px 16px;margin-top:16px;box-shadow:0 -5px 16px #65522c14;z-index:1}.rank-self>strong{font-size:15px;color:#365c52}.rank-self-row{border:0;padding-bottom:0;min-height:72px}.rank-self>p{margin-bottom:0}

/* Leaderboard: only the middle list scrolls; header and own rank stay in layout. */
.dialog.rank-dialog{display:flex;flex-direction:column;height:min(780px,calc(100dvh - 44px));overflow:hidden;min-height:0}
.rank-dialog>h2{flex-shrink:0}
.rank-dialog #modal-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.rank-head{flex-shrink:0}.rank-head>p{margin:8px 0 12px}
.rank-dialog .rank-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}
.rank-dialog .rank-self{flex-shrink:0;width:100%;margin:12px auto 0;box-sizing:border-box;box-shadow:none}
.rank-self>strong{display:block;text-align:center}
@media(max-height:500px){.dialog.rank-dialog{height:calc(100dvh - 44px);padding:10px 16px}.rank-dialog>h2{margin-bottom:4px;padding-bottom:6px}.rank-head>p{font-size:11px;margin:3px 0}.rank-dialog .rank-self{padding:6px 12px;margin-top:6px}.rank-self-row{min-height:48px;padding-top:4px}.rank-self-row .rank-frog{width:40px;height:40px}}

#rank-button{position:absolute;left:calc(16px + env(safe-area-inset-left));top:calc(68px + env(safe-area-inset-top));min-height:44px;z-index:2;border:1px solid var(--ui-ink);border-radius:4px;background:rgba(255,246,223,.97);box-shadow:0 2px 0 #8b7959;color:var(--ui-ink);font-size:14px}#nursery-controls:not([hidden])~#rank-button{top:calc(124px + env(safe-area-inset-top))}.menu-grid.menu-simple{grid-template-columns:1fr}

#touch-actions{transform:scale(1.2);transform-origin:right bottom}

/* Keyboard hints follow the current action and stay hidden on touch devices. */
@media (hover:hover) and (pointer:fine){
 #touch-actions #take,#touch-actions #interact{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:8px;width:108px;min-width:108px;text-align:center;padding:6px 10px}
 #touch-actions #take::before,#touch-actions #interact[data-key-hint="E"]::before{display:block;width:22px;padding:1px 0;border:1px solid currentColor;border-radius:3px;font-size:12px;line-height:1.2;justify-self:center}
 #touch-actions #take::before{content:"Q"}
 #touch-actions #interact[data-key-hint="E"]::before{content:"E"}
}

/* Portrait host containers render the complete game in a virtual landscape viewport. */
#game-viewport{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;overflow:hidden}
#game-viewport .modal{position:absolute}
#hud header{transform:translateY(var(--toy-header-shift,0px))}
#game-viewport.rotated .dialog.rank-dialog{height:calc(var(--game-height) - 36px);padding:10px 16px}
#game-viewport.rotated .rank-dialog>h2{margin-bottom:4px;padding-bottom:6px}
#game-viewport.rotated .rank-dialog .rank-self{padding:6px 12px;margin-top:6px}
#game-viewport.rotated .rank-self-row{min-height:48px;padding-top:4px}
#game-viewport.rotated .rank-self-row .rank-frog{width:40px;height:40px}
#game-viewport.rotated .dialog:has(.item-detail){height:calc(var(--game-height) - 36px)}
#game-viewport.rotated #customer-speech{max-width:85%}
#game-viewport.rotated #target:not(:empty){bottom:75px}

/* Keep WebGL and the rotated HUD in separate, explicitly ordered layers.
   Some Android WebViews composite an accelerated canvas above auto layers. */
#game-viewport{isolation:isolate}
#game-viewport #world{z-index:0}
#game-viewport #world canvas{position:absolute;left:0;top:0;z-index:0}
#game-viewport #vitality-screen{z-index:1;pointer-events:none}
#game-viewport #hud{z-index:2;transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
#game-viewport .modal{z-index:10}

/* Critical controls have usable positions even without CSS env() support. */
:root{--frog-safe-top:var(--safe-area-inset-top,0px);--frog-safe-right:var(--safe-area-inset-right,0px);--frog-safe-bottom:var(--safe-area-inset-bottom,0px);--frog-safe-left:var(--safe-area-inset-left,0px)}
@supports(padding-top:env(safe-area-inset-top)){
 :root{--frog-safe-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--frog-safe-right:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--frog-safe-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--frog-safe-left:var(--safe-area-inset-left,env(safe-area-inset-left,0px))}
}
#hud header{top:14px;top:calc(14px + var(--frog-safe-top));left:15px;left:calc(15px + var(--frog-safe-left));right:15px;right:calc(15px + var(--frog-safe-right))}
#hud #wallet{top:12px;top:calc(12px + var(--frog-safe-top));left:16px;left:calc(16px + var(--frog-safe-left))}
#hud #rank-button{top:68px;top:calc(68px + var(--frog-safe-top));left:16px;left:calc(16px + var(--frog-safe-left))}
#hud #nursery-controls:not([hidden])~#rank-button{top:124px;top:calc(124px + var(--frog-safe-top))}
#hud #touch-actions,#hud #touch-actions.bench-context{right:20px;right:calc(20px + var(--frog-safe-right));bottom:20px;bottom:calc(20px + var(--frog-safe-bottom))}
#hud #movement #joystick-base{left:76px;left:calc(76px + var(--frog-safe-left));bottom:20px;bottom:calc(20px + var(--frog-safe-bottom))}
#hud #movement.pressed #joystick-base{bottom:auto}
#hud #items{bottom:20px;bottom:calc(20px + var(--frog-safe-bottom))}
@media(max-height:440px){#hud header{top:7px;top:calc(7px + var(--frog-safe-top))}#hud #wallet{top:7px;top:calc(7px + var(--frog-safe-top))}}