/* Responsive painted pond; the simulation frame is independent of the viewport. */
body{--shore:#0c2627;--shore-ink:#f2e6cd;--shore-muted:#bac7b7;--shore-gold:#dcb67c;--shore-atmosphere:#36574988;--shore-edge:#142d22;--shore-shade:#071d19b3;--shore-far:#061b1888;background:#0c2627;background-image:radial-gradient(ellipse at 50% 42%,var(--shore-atmosphere),transparent 62%),radial-gradient(ellipse at 0 100%,var(--shore-edge),transparent 60%);color:var(--shore-ink)}
body[data-theme]{background-color:var(--shore);background-image:radial-gradient(ellipse at 50% 42%,var(--shore-atmosphere),transparent 62%),radial-gradient(ellipse at 0 100%,var(--shore-edge),transparent 60%)}
body[data-theme=autumn]{--shore:#172c28;--shore-gold:#e6bd88;--shore-atmosphere:#67543d66;--shore-edge:#253329;--shore-shade:#102521bb;--shore-far:#29302499}
body[data-theme=lotus]{--shore:#172e30;--shore-gold:#e8c5ca;--shore-atmosphere:#586e6a66;--shore-edge:#273b36;--shore-shade:#15282dbb;--shore-far:#25333899}
body[data-theme=moonlit]{--shore:#091f2b;--shore-gold:#c3d9e3;--shore-atmosphere:#21506866;--shore-edge:#102c38;--shore-shade:#061923bb;--shore-far:#0a1b2c99}
body[data-theme=safak]{--shore:#1e303a;--shore-gold:#edc1a4;--shore-atmosphere:#63778266;--shore-edge:#2a3d43;--shore-shade:#162632bb;--shore-far:#34363c99}
/* Responsive stage: desktop/tablet use the whole landscape; camera fitting belongs to app.js. */
body.game-entered{overflow:hidden}
#game-ui{--stage-height:100dvh;--stage-width:min(100vw,1440px);position:relative;isolation:isolate;height:var(--stage-height);min-height:0;overflow:clip}
#game-ui::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--shore-shade),transparent 37%,transparent 63%,var(--shore-far))}
#game-ui>main{position:relative;width:var(--stage-width);height:var(--stage-height);min-height:0;max-width:none;display:block;padding:0;margin:0 auto;isolation:isolate}
#game-ui .game-shell{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:0;background:transparent;border:0;box-shadow:none}
#game-ui #game{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#173e35;box-shadow:none;overflow:hidden}
#game-ui canvas{width:100%;height:100%}
#game-ui .pond-top,#game-ui .pond-bottom,#game-ui>footer{display:none}
#game-ui>header{position:absolute;z-index:9;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:var(--stage-width);height:52px;margin:0;padding:0 15px;border:0;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
#game-ui>header button{pointer-events:auto;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;width:48px;height:48px;padding:12px;border:0;border-radius:0;color:#f7e9c6;background:transparent url('assets/art/control-medallion-v2.webp') center / 100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 3px 5px #00191266);transition:filter .15s}
#game-ui>header button:hover,#game-ui #reset:hover{filter:brightness(1.16)}
#game-ui>header button>span{display:none}
#game-ui>header .sound-trigger[aria-pressed=false]{color:#f7e9c6}
#game-ui .intro{display:block;position:absolute;z-index:8;top:max(14px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100% - 140px));padding:0;text-align:center;pointer-events:none;color:#faefd8;text-shadow:0 2px 5px #061e20}
#game-ui .intro::before{content:'';position:absolute;inset:-20px -14px -26px;z-index:-1;background:linear-gradient(#142e28b3,#142e2840 70%,transparent);pointer-events:none}
#game-ui .level{display:flex;justify-content:center;align-items:baseline;gap:8px;min-height:26px;margin:0}
#game-ui .level>span{font:12px Georgia,serif;letter-spacing:1px;color:#ead0a0;border:0;width:auto;height:auto}
#game-ui .level b{font:clamp(16px,2.3vw,20px)/1.3 Georgia,serif;letter-spacing:.2px;color:#fff2d6;white-space:normal}
#game-ui .intro>small{display:block;font:clamp(10px,1.5vw,12px)/1.45 Georgia,serif;color:#f0e4c9;max-width:260px;margin:3px auto 0}
#game-ui .controls{--dock-gap:10px;position:absolute;z-index:7;left:50%;right:auto;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));width:min(420px,calc(100% - 24px));max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:4px var(--dock-gap);padding:0;align-items:start;color:var(--shore-ink)}
#game-ui .stone-card{width:100%;max-width:none;position:relative;isolation:isolate;grid-column:1;grid-row:1;border:0;padding:0 6px;display:grid;grid-template-columns:35px minmax(0,1fr);grid-template-rows:minmax(66px,auto);gap:0 5px;align-items:center}
#game-ui .stone-card::before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:66px;background:transparent url('assets/art/stone-tray-v2.webp') center / 100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 6px #001d1c44)}
#game-ui #stones{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:3px;margin:0;padding:4px 0;min-height:62px;min-width:0}
#game-ui .stone-kind{position:relative;flex:none;min-height:48px;min-width:44px;padding:4px 2px 2px;display:flex;align-items:center;gap:2px;border:1px solid transparent;border-radius:18px;color:#3b513b;background:transparent;box-shadow:none}
#game-ui .stone-kind:hover,#game-ui .stone-kind[aria-pressed=true]{border-color:transparent;background:transparent;box-shadow:none}
#game-ui .stone-icons{height:24px;gap:7px}
#game-ui .stone-icons i{--stone:#7d816d;--heavy:#435849;width:22px;height:18px;background:transparent url('assets/art/throwing-pebble-v2.webp') center / contain no-repeat;border:0;border-radius:0;box-shadow:none}
#game-ui .stone-icons i:nth-child(even){border-radius:0}
#game-ui [data-kind=heavy] .stone-icons i{width:23px;height:22px;background:transparent url('assets/art/heavy-stone-v2.webp') center / contain no-repeat;border-radius:0;box-shadow:none}
#game-ui .stone-icons i[data-state=selected]{border-radius:50%;outline:2px solid #e9d39b;outline-offset:3px;filter:drop-shadow(0 0 5px #f9d782);translate:0 -1px}
#game-ui .stone-icons i[data-state=reserved]{background:none;border:1.5px dashed var(--stone);box-shadow:none}
#game-ui .stone-icons i[data-state=spent]{opacity:.16}
#game-ui .stone-icons i[data-state=locked]{background:repeating-linear-gradient(45deg,var(--stone) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--stone);opacity:.6}
#game-ui .stone-name{display:none;font:8px/9px Arial,sans-serif;letter-spacing:1px;height:9px;color:#40513a}
#game-ui [aria-pressed=true]>.stone-name{display:block;color:#30452f}
#game-ui .stone-state{display:none}
#game-ui .stone-state:not(:has([data-on])){display:none}
#game-ui .stone-note{position:absolute;bottom:100%;left:0;max-width:260px;padding:8px 10px;background:#ede3ca;color:#304b3d;border-radius:6px;font-size:11px;z-index:5}
#game-ui .count{grid-column:1;grid-row:1;margin:0;float:none;white-space:nowrap;text-align:center;font:12px/1.4 Georgia,serif;color:#3d513a;text-shadow:none}
#game-ui .count>span{font:22px Georgia,serif;min-width:0;color:inherit}
#game-ui .count small{font:12px Georgia,serif;margin-left:1px;color:inherit}
#game-ui .stone-head{display:none}
/* The guest fish's slot (#269): no word, 46 x 56 px (the 360 px dock keeps 44+ px for it beside five stones; #270's third stone size will not share a level with it). aria-disabled while the sim would refuse the call. */
#game-ui .stone-card:has(.guest-slot){grid-template-columns:35px minmax(0,1fr) 46px}
#game-ui .guest-slot{grid-column:3;grid-row:1;justify-self:center;display:flex;align-items:center;justify-content:center;width:46px;height:56px;min-width:44px;min-height:44px;padding:0;border:1.5px solid #8a7747;border-radius:23px;background:transparent;color:#c2562a;box-shadow:none;touch-action:manipulation;cursor:pointer;transition:opacity .2s,background .2s}
#game-ui .guest-slot[data-state=ready]{background:radial-gradient(circle at 50% 40%,#fff4cf,#efd9a1 78%);box-shadow:0 0 0 2px #e9d39b99,0 2px 6px #00191255}
#game-ui .guest-slot[data-state=wait]{color:#3b513b;opacity:.5;border-style:dashed;cursor:default}
#game-ui .guest-slot[data-state=used]{color:#3b513b;opacity:.28;border-style:dashed;cursor:default}
@media(prefers-reduced-motion:reduce){#game-ui .guest-slot{transition:none}}
/* "Geri al" (#260): top left under the pause button, mirroring the hint pill, so no thumb that throws from the dock lands on it (it sat at the dock's right, over the throw area). */
#game-ui .undo-play{position:absolute;z-index:9;left:15px;top:calc(max(16px,env(safe-area-inset-top)) + 58px);display:flex;align-items:center;justify-content:center;gap:6px;min-width:76px;min-height:44px;padding:6px 14px;border:1px solid #e2c98e99;border-radius:22px;background:#13352bcc;color:#f7e9c6;font:14px/1.15 Georgia,serif;letter-spacing:.2px;filter:drop-shadow(0 3px 5px #00191266);transition:background .15s,opacity .15s}
#game-ui .undo-play>span{font-size:inherit}#game-ui .undo-play>span[aria-hidden]{font-size:18px;line-height:1}#game-ui .undo-play:hover{background:#314c37e6}
#game-ui .undo-play[aria-disabled=true]{border-style:dashed}
#game-ui #reset{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;margin-top:8px;padding:0;border:0;border-radius:0;color:#f7e9c6;background:transparent url('assets/art/control-medallion-v2.webp') center / 100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 3px 5px #00191266);font:29px Georgia,serif}
#game-ui #reset>span{display:none}
#game-ui #status,#game-ui .goal-state{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
#game-ui .power{grid-column:1;grid-row:2;width:55%;justify-self:center;order:0;margin:4px 0 0;pointer-events:none}
#game-ui .power>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The track is always 3 px high (the heavy stone's thickness, #260): the plain stone draws 2 of them, so choosing the heavy one never moves the dock. */
#game-ui .track{height:3px;margin:0;background:linear-gradient(#d4c79c2b,#d4c79c2b) 0 0/100% 2px no-repeat}#game-ui #power-fill{height:2px;background:#eed6a0}
#game-ui .power[data-kind=heavy] .track{background-size:100% 3px}#game-ui .power[data-kind=heavy] #power-fill{height:3px}
#game-ui .tip{display:none}
#game-ui .wish{top:auto;bottom:112px;left:50%;right:auto;transform:translateX(-50%);width:min(600px,calc(100% - 48px));padding:12px 18px;border-radius:12px;font:italic clamp(12px,1.4vw,15px)/1.5 Georgia,serif;background:radial-gradient(ellipse,#092922d9 0%,#092922a6 45%,#09292200 75%)}
#game-ui:has(#result:not([hidden])) .controls,#game-ui:has(#result:not([hidden])) .undo-play{visibility:hidden;pointer-events:none}
#game-ui .reward-dialog,#game-ui .story-dialog{--paper:#eae6d9;--ink:#263e36;--muted:#617367;--red:#a36336}
#game-ui button:focus-visible,#game-ui a:focus-visible,#game-ui summary:focus-visible{outline:2px solid #f6dc9a;outline-offset:3px}
#game-ui .stone-kind:focus-visible{outline-color:#5d512e}
.pause-dialog{--paper:#eee3c9;--ink:#294538;--muted:#5b6c58;width:min(340px,90vw);max-height:88dvh;overflow:auto;padding:27px 26px 22px;border:1px solid #d0b57b;border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 25px 70px #00170d80;text-align:center}
.pause-dialog::backdrop{background:#061e23ad;backdrop-filter:blur(5px)}
.pause-kicker{font:9px Arial,sans-serif;letter-spacing:3px;margin:0;color:#61705b}
.pause-dialog h2{font:30px Georgia,serif;letter-spacing:-.5px;margin:12px 0 7px}
.pause-note{font:italic 13px Georgia,serif;color:var(--muted);margin:0 0 23px}
.pause-actions{display:flex;flex-direction:column;gap:9px}
.pause-actions>button{display:flex;align-items:center;justify-content:center;min-height:46px;gap:9px;padding:10px 15px;border:1px solid #6a785844;border-radius:22px;font:14px Georgia,serif;color:var(--ink);background:transparent}
.pause-actions>#resume-play{background:#31533d;color:#fff0cb;border-color:#31533d}
.pause-actions>button[hidden]{display:none}.pause-actions>#haptics b{font:12px Arial,sans-serif;color:var(--muted)}.pause-actions>#haptics[aria-checked=true] b{color:#31533d;font-weight:700}
.pause-actions>button:hover{background:#79835b12}.pause-actions>#resume-play:hover{background:#406349}
#pause-guide{margin-top:18px;border-top:1px solid #6a785833;padding-top:10px;text-align:left}
#pause-guide[hidden]{display:none}
#pause-guide .how{display:block;margin:0;color:var(--ink)}#pause-guide summary{display:none}
#pause-guide ol{list-style:none;padding:0;margin:4px 0}#pause-guide li{gap:9px;margin:0 0 13px}#pause-guide li b{font-size:12px}#pause-guide li p{font:12px/1.5 Arial,sans-serif;margin:5px 0 0;color:var(--muted)}
@media(max-width:600px){
 #game-ui>header{padding-inline:12px}
 #game-ui .intro{width:calc(100% - 132px)}
 #game-ui .level{gap:6px}
 #game-ui .intro>small{max-width:250px}
 #game-ui .controls{width:calc(100% - 20px)}
}
@media(max-width:374px){
 #game-ui>header{padding-inline:10px}
 #game-ui .intro{width:calc(100% - 128px)}
 #game-ui .level{gap:5px}
 #game-ui .level>span{font-size:10px}
 #game-ui .controls{--dock-gap:7px;width:calc(100% - 16px)}
 #game-ui .stone-card{padding-inline:6px}
 #game-ui .stone-icons{gap:7px}
 #game-ui .stone-icons i{width:22px}
}
@media(max-height:550px){
 #game-ui .intro{top:max(8px,env(safe-area-inset-top))}
 #game-ui>header{top:max(8px,env(safe-area-inset-top))}
 #game-ui .controls{bottom:max(8px,env(safe-area-inset-bottom))}
 #game-ui .wish{bottom:100px;padding-block:7px}
 #game-ui:has(#result:not([hidden])) .intro{visibility:hidden}
 #game-ui #result{justify-content:flex-start;padding:16px 18px;overflow-y:auto;overscroll-behavior:contain}
 #game-ui #result .result-body{flex-shrink:0;width:min(100%,640px);margin-inline:auto}
 #game-ui #result h2{font-size:28px;margin:12px 0}
 #game-ui #result p{font-size:13px;line-height:1.6;margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){#game-ui>header button,#game-ui .undo-play{transition:none}}