:root{color-scheme:light;--paper:#eae6d9;--ink:#263a37;--muted:#7b8276;--red:#b25037}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;background-image:radial-gradient(#8a836711 .6px,transparent .6px);background-size:4px 4px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #263a3733;background:transparent;color:var(--ink);border-radius:3px}button:hover{background:#263a3710}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}header{height:94px;margin:0 4.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #263a3724}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;font:600 18px Georgia,serif;letter-spacing:2.1px}.seal{background:var(--red);color:#f4e9d3;font:25px Georgia;padding:7px 9px;transform:rotate(-4deg);border-radius:2px}.edition,.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px}.edition{color:var(--muted);display:flex;gap:15px;align-items:center}.edition i{width:4px;height:4px;background:var(--red);border-radius:50%}header button{padding:11px 15px;font-size:12px;display:flex;gap:10px;align-items:center}header button:first-letter{font-size:20px}main{max-width:1350px;margin:auto;padding:28px 45px;display:grid;grid-template-columns:minmax(210px,1fr) minmax(310px,470px) minmax(215px,1fr);gap:52px;align-items:center;min-height:calc(100vh - 150px)}.intro h1{font:normal clamp(38px,4vw,60px)/1.05 Georgia,serif;letter-spacing:-2px;margin:23px 0}.intro h1 em{font-weight:normal;color:var(--red)}.intro>p{font:16px/1.7 Georgia,serif;color:#64716a}.rule{width:40px;height:1px;background:#859283;margin:32px 0}.level{display:flex;gap:14px;align-items:center}.level>span{border:1px solid #263a3733;border-radius:50%;height:35px;width:35px;display:grid;place-items:center;font:14px Georgia}.level b{font-size:13px;font-weight:500}.level small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.legend{display:grid;gap:12px;margin-top:30px;font-size:10px;color:var(--muted)}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;margin-right:9px}.amber{background:#d7974c}.grey{background:#697e78}.intro .aside{font:italic 13px/1.8 Georgia,serif;color:#919486;margin-top:48px}.game-shell{border:1px solid #536b5e3d;padding:9px;background:#d8dccd;box-shadow:0 14px 35px #293b3814;position:relative}.pond-top,.pond-bottom{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:2px;color:#647367;padding:3px 2px 10px}.pond-bottom{padding:11px 2px 2px}.pond-top>span:first-child{font:12px Georgia;letter-spacing:4px}.pond-bottom>span:last-child{font-size:14px}#game{width:100%;aspect-ratio:8/11;position:relative;background:#163b38;overflow:hidden;border-radius:65px 65px 50px 50px;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}#loading{position:absolute;inset:40% 10% auto;color:#e6dcc0;text-align:center;font:14px Georgia;line-height:1.7;padding:16px;z-index:5}.goal-label{position:absolute;top:4.2%;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:3px;color:#e5d39b;text-align:center;pointer-events:none}.goal-label span{display:block;font-size:17px;line-height:15px}.controls{max-width:245px}.stone-card{border-bottom:1px solid #263a3725;padding-bottom:25px}.stone-card .eyebrow{font-size:9px;color:#69796e}.count{margin-top:14px}.count>span{font:64px/.9 Georgia,serif}.count small{font-size:13px;color:#8d9587;margin-left:7px}#status{font:italic 12px/1.5 Georgia;color:#7e897a;margin:0;min-height:36px}.how{margin-top:29px}.how>.eyebrow{font-size:9px;color:#69796e}ol{padding:0;margin:25px 0;list-style:none}li{display:flex;gap:12px;margin-bottom:20px}li>span{color:#a2a698;font:12px Georgia;padding-top:2px}li b{font-size:12px;font-weight:500}li p{font-size:11px;line-height:1.8;margin:6px 0 0;color:#7b887b}.power>div:first-child{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#6f7d71}.track{height:3px;background:#cdd1c2;margin-top:12px}#power-fill{height:100%;width:0;background:#b25037;transition:width 30ms linear}.tip{display:flex;gap:13px;margin-top:30px;color:#9a714d}.tip>p{font:italic 12px/1.7 Georgia;margin:0}.tip>p::first-letter{font-size:14px}footer{margin:0 4.4%;padding:16px 0;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #263a3724;font-size:8px;letter-spacing:1.5px;color:#8b9385}footer i{padding:0 9px;font-style:normal}#result{position:absolute;inset:0;z-index:6;text-align:center;color:#ede4c9;padding:42% 18px 20px}#result[hidden]{display:none}#result-kicker{font-size:9px;letter-spacing:3px;color:#d5ab6a}#result h2{font:36px Georgia;margin:18px 0}#result p{font:14px/1.8 Georgia;max-width:260px;margin:0 auto 24px}#result button{color:#ede4c9;border-color:#d5ab6a77;font-size:12px;padding:12px 25px;background:#d5ab6a11}@media(min-width:1450px){main{max-width:1440px;grid-template-columns:1fr 500px 1fr;gap:70px}}@media(max-width:1100px){main{gap:25px;padding:24px;grid-template-columns:190px minmax(290px,410px) 190px}.intro h1{font-size:42px}.controls{max-width:210px}}@media(max-width:820px){header{height:70px}.edition{display:none}main{grid-template-columns:minmax(260px,440px) 210px;justify-content:center;gap:25px}.intro{display:none}.game-shell{width:100%}footer{font-size:7px}.brand{font-size:14px}.seal{font-size:20px}}@media(max-width:560px){header{height:64px;margin:0 5%}header button{padding:8px}header button span{display:none}main{display:flex;flex-direction:column;padding:16px 18px;gap:18px;min-height:0}.game-shell{width:min(100%,390px)}.controls{max-width:390px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:15px}.stone-card{padding:0;border:0}.count{margin-top:8px;float:left;margin-right:15px}.count>span{font-size:38px}#status{clear:both;font-size:11px}.how{display:none}.power{grid-column:2;grid-row:1;align-self:center}.tip{grid-column:1/3;margin:0}.tip p{font-size:11px}footer span:first-child{display:none}footer{justify-content:center;padding:12px 0}}

/* Art pass 02: warm paper, deep jade, more legible supporting controls. */
:root{--paper:#ede8db;--ink:#253f36;--muted:#586c5e}
header button{min-height:44px;transition:background .2s,border-color .2s}
.game-shell{padding:10px;background:#d8d9ca;border-color:#52654e66;box-shadow:0 3px 0 #a0aa9355,0 20px 55px #243c3524}
#game{border-radius:55px 55px 45px 45px;box-shadow:inset 0 0 50px #071f1a77}
.controls{max-width:255px}.stone-card{padding-bottom:17px}.how{margin-top:23px}
li{margin-bottom:16px}li p{font-size:12px;line-height:1.65;color:#586d5d}li b{font-size:13px}.how>.eyebrow,.stone-card .eyebrow{color:#52644f}
#status{color:#5a705e;font-size:13px}.tip{margin-top:20px}.tip p{color:#886044}
.ecosystem{margin-top:24px;border-top:1px solid #263a3725;padding-top:19px}
.ecosystem .eyebrow{font-size:9px;color:#52644f}.ecosystem p{font-size:10px;color:#5d705f;letter-spacing:.2px;margin:10px 0 0}.ecosystem p span{padding:0 4px;color:#9a8865}
.fish-swatches{display:flex;gap:12px;margin-top:14px}.fish-swatches i{width:20px;height:9px;border-radius:70% 50% 50% 70%;display:block;position:relative;transform:rotate(-15deg);box-shadow:0 1px 2px #263a3720;background:linear-gradient(110deg,#eae7d6 35%,#ba4931 36% 62%,#eae7d6 63%)}
.fish-swatches i:before{content:'';position:absolute;left:-5px;top:0;border-left:6px solid #d5d3be;border-top:4px solid transparent;border-bottom:4px solid transparent}
.fish-swatches i:nth-child(2){background:linear-gradient(110deg,#283b38 30%,#c26843 31% 48%,#eae7d6 49% 75%,#283b38 76%)}
.fish-swatches i:nth-child(3){background:#c99736}.fish-swatches i:nth-child(4){background:#d1dacf}.fish-swatches i:nth-child(5){background:linear-gradient(#476c80 55%,#b8663d)}.fish-swatches i:nth-child(6){background:linear-gradient(110deg,#eae7d6 40%,#253a34 41% 60%,#eae7d6 61%)}
canvas:focus-visible{outline:2px solid #d6b776;outline-offset:-4px}
@media(max-width:820px) and (min-width:561px){main{grid-template-columns:minmax(260px,440px) 210px;gap:24px;padding:24px}.ecosystem{margin-top:18px;padding-top:15px}.tip{display:none}}
@media(max-width:560px){.controls{max-width:390px}.ecosystem{display:none}.tip{display:flex;margin-top:0}header button{min-width:44px}#game{border-radius:40px 40px 32px 32px}.game-shell{padding:8px}.stone-card{padding-bottom:0}li p{font-size:12px}.brand{font-size:13px;letter-spacing:1.7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:561px){
 .game-shell{width:min(100%,calc((100dvh - 220px)*.72727 + 22px));justify-self:center}
 .stone-card{padding-bottom:10px}.count>span{font-size:50px}.count{margin-top:10px}.how{margin-top:20px}ol{margin:18px 0}li{margin-bottom:13px}.ecosystem{margin-top:18px;padding-top:15px}.tip{margin-top:16px}
}
#power-fill{width:100%;transform:scaleX(0);transform-origin:left;transition:transform 30ms linear}
@media(min-width:821px){header{height:80px}main{padding-top:18px;padding-bottom:18px;min-height:calc(100dvh - 130px)}.tip{display:none}.intro .aside{margin-top:32px}}
@media(max-height:650px) and (min-width:561px){.game-shell{width:300px;max-width:100%}.intro h1{font-size:38px}.intro .aside,.legend,.ecosystem{display:none}}

/* Three atmospheres; the map picker stays available at every viewport width. */
header .map-trigger{display:flex;gap:18px;border-color:#66766044;font:12px Georgia,serif;letter-spacing:.3px;min-height:40px;padding:10px 17px;background:#f5eedb55}
.goal-label{left:75%;top:13%;font-size:8px;letter-spacing:2px;opacity:.8;text-shadow:0 1px 2px #071f1acc}.goal-label span{display:none}.goal-label b{font-weight:inherit}
#map-dialog{width:min(900px,94vw);max-height:90dvh;background:#eae6d9;color:#263e36;border:1px solid #9a9f8655;border-radius:8px;padding:30px;box-shadow:0 25px 90px #0007}
#map-dialog::backdrop{background:#0a171cd6;backdrop-filter:blur(7px)}
/* The dialog's paper is its own: a moonlit pond (03, Ayışığı) hands the page light ink, which made the cards' words faint on it. */
#map-dialog{--paper:#eae6d9;--ink:#263e36;--muted:#617367;--red:#a36336}
.map-dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.map-dialog-head h2{font:38px Georgia;margin:10px 0 0;letter-spacing:-1px}.map-dialog-head>button{width:44px;height:44px;font-size:25px;border-radius:50%}.map-intro{font:14px/1.7 Georgia;color:#617367;margin:16px 0 25px}.map-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.map-card{text-align:left;padding:0 0 14px;border:1px solid #6f7b5c33;border-radius:7px;overflow:hidden;background:#dedfcd;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}.map-card:hover{transform:translateY(-3px);background:#e5e4d4}.map-card[aria-pressed=true]{border-color:#a36336;box-shadow:0 0 0 2px #a3633633}.map-card img{display:block;width:100%;height:auto;aspect-ratio:14/9;object-fit:cover}.map-card strong{font:20px Georgia;display:block;margin:16px 13px 7px}.map-card>span{font:11px/1.6 Arial;display:block;color:#607267;margin:0 13px}.map-note{font:11px/1.6 Arial;color:#6b7667;margin:22px 0 0}
body[data-theme=autumn]{--paper:#ede0ce;--red:#a05631;background-color:var(--paper)}body[data-theme=autumn] .game-shell{background:#d7c8ab;border-color:#92785277}body[data-theme=autumn] .seal{background:#a34f2d}
body[data-theme=lotus]{--paper:#e9e3e6;--red:#934a68;background-color:var(--paper)}body[data-theme=lotus] .game-shell{background:#d3cbd2;border-color:#857a8a77}body[data-theme=lotus] .seal{background:#934a68}
body[data-theme=safak]{--paper:#f1e6dc;--red:#a8442a;background-color:var(--paper)}body[data-theme=safak] .game-shell{background:#dfcfc4;border-color:#9b7f7677}body[data-theme=safak] .seal{background:#a8442a}
body[data-theme=moonlit]{--paper:#171c2c;--ink:#dddcca;--muted:#a2b1ad;--red:#d9ac6b;background-color:var(--paper);background-image:radial-gradient(#b6c8ea09 .7px,transparent .7px)}
body[data-theme=moonlit] header,body[data-theme=moonlit] footer,body[data-theme=moonlit] .stone-card,body[data-theme=moonlit] .ecosystem{border-color:#a7bdd12b}body[data-theme=moonlit] header button{color:#e1dfcc;border-color:#b5c6ca44;background:#adbfe50b}body[data-theme=moonlit] .brand{color:#dedecf}body[data-theme=moonlit] .game-shell{background:#273747;border-color:#70859c66;box-shadow:0 22px 60px #0005}
body[data-theme=moonlit] .pond-top,body[data-theme=moonlit] .pond-bottom,body[data-theme=moonlit] .intro>p,body[data-theme=moonlit] #status,body[data-theme=moonlit] li p,body[data-theme=moonlit] .ecosystem p,body[data-theme=moonlit] .eyebrow,body[data-theme=moonlit] .how>.eyebrow,body[data-theme=moonlit] .stone-card .eyebrow{color:#aabdbd}body[data-theme=moonlit] .stone-icons i{--stone:#a3b0a5;--heavy:#5d6b70}body[data-theme=moonlit] .track{background:#3b4d58}body[data-theme=moonlit] .level>span{border-color:#a9b9bd44}body[data-theme=moonlit] .level small{color:#acb7b3}
@media(max-width:560px){header .map-trigger{gap:8px;padding:8px 10px;font-size:11px;min-height:44px}header .map-trigger span{display:inline}.brand{gap:8px;letter-spacing:1px;font-size:11px}.seal{padding:5px 7px;font-size:19px}#map-dialog{padding:20px}.map-cards{grid-template-columns:1fr}.map-card{display:grid;grid-template-columns:43% 1fr;grid-template-rows:auto auto;padding:0;column-gap:4px}.map-card img{grid-row:1/3;height:100%;min-height:110px}.map-card strong{align-self:end;font-size:19px;margin-bottom:6px}.map-card>span{margin-bottom:14px}.map-dialog-head h2{font-size:32px}}

.map-card em{font:600 10px Arial;letter-spacing:1.5px;color:#a36336;display:block;margin:9px 13px 0;font-style:normal}
#result button+button{margin-left:10px;border-color:#d5ab6a}
/* Result placement (#108, result-layout.js): the text sits against the edge away from the lantern and the
   dim lives on ::before, solid under the text (--dim) and gone by --clear, before the lantern. Same for
   win, loss and sinking. The mask also cuts the blur, so the lantern side stays sharp. */
#result{display:flex;flex-direction:column;justify-content:flex-start;padding:9% 18px}#result[hidden]{display:none}
#result[data-place=bottom]{justify-content:flex-end}
#result::before{content:'';position:absolute;inset:0;z-index:-1;background:#102d2bda;backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(var(--from,to bottom),#000 var(--dim,100%),#0000 var(--clear,100%));mask-image:linear-gradient(var(--from,to bottom),#000 var(--dim,100%),#0000 var(--clear,100%))}
#result[data-place=bottom]::before{--from:to top}
@media(max-width:560px){#result{padding:8% 14px}#result h2{font-size:30px;margin:12px 0}#result p{margin-bottom:16px}}
/* Sunk (#61): the screen is usable at once; its dim comes in over the 1 s sink so the dive stays in view. */
#result[data-status=sunk]::before{animation:sunk-dim 1s ease-in both}@keyframes sunk-dim{from{opacity:0}}
@media(prefers-reduced-motion:reduce){#result[data-status=sunk]::before{animation:none}}
/* The sunk card (#268): "Son atışı geri al" is the one lit button, the restart a quiet line under it; both stack, so a narrow card never wraps them
   unevenly, and both are 44 px or more to press. The light is the lantern's own cream, filled, so it reads in grey too (shape and word, not hue). */
#result[data-status=sunk] button{display:block;margin:0 auto;min-height:44px}#result[data-status=sunk] button[hidden]{display:none}
#result[data-status=sunk] #undo{min-width:230px;min-height:48px;margin-bottom:8px;font-size:14px;font-weight:700;color:#1d2d2a;background:#f3d9a4;border-color:#f3d9a4}
#result[data-status=sunk] #again{border-color:transparent;background:none;color:#cfbf9f;text-decoration:underline;text-underline-offset:3px}
/* "Bir daha dene" (#273): on a two-star win the retry leads, lit like the sunk card's undo (cream fill, bold, taller: shape and weight, not hue alone);
   "Sonraki" stays framed beside it. "Rahat gölet" is the quietest button of the card, in the same row (it wraps under the two on a narrow card, so a short
   landscape card does not grow): no frame, an underline. Every button of the card is 44 px or more to press. */
#result button{min-height:44px}
#result[data-lead=retry] #again{min-width:160px;min-height:48px;font-weight:700;color:#1d2d2a;background:#f3d9a4;border-color:#f3d9a4}
#result[data-lead=retry] #again:hover{background:#f8e5bd}
#result .relax-btn{border-color:transparent;background:none;color:#cfbf9f;text-decoration:underline;text-underline-offset:3px}
#result .relax-btn[hidden]{display:none}
/* A card set at the top (the lantern is in the lower half) starts under the level's name, never over it: its kicker sat on the subtitle at 390 px. */
#result[data-place=top]{padding-top:max(76px,9%)}
/* Save warning: a small paper slip, collapsed (still in the a11y tree) until a save fails. */
.save-warning{position:fixed;left:16px;bottom:16px;z-index:20;display:flex;align-items:center;gap:2px;max-width:calc(100% - 32px);padding:0 0 0 14px;background:var(--paper);color:var(--ink);border:1px solid #263a3733;box-shadow:0 6px 18px #293b3814}.save-warning p{margin:0;font:italic 12px/1.5 Georgia,serif}.save-warning button{min-width:44px;min-height:44px;border:0;font:16px Georgia,serif;color:var(--muted)}.save-warning:not(.open){width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.save-warning:not(.open) button{display:none}
@media(max-width:560px){.save-warning{left:12px;right:12px;bottom:12px;max-width:none;justify-content:space-between}}
/* Shore picker (#46). The icons speak the 3D stones' language (#86), lit from the upper left like
   LIGHT_DIR: Çakıl is a smooth pebble with a soft highlight; Ağır a larger, darker, blunt-cornered block
   whose hard facets meet at its top, and its row says "Ağır". Grey keeps size, outline and facets.
   States read by shape and word, not colour: the next stone wears a ring,
   a stone in the air is a dashed outline, a spent one a faint ghost, a locked one hatched. */
#stones{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px -9px}
.stone-kind{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:44px;min-width:44px;padding:8px 9px 6px;border-color:transparent;border-radius:4px;touch-action:manipulation}
.stone-kind[aria-pressed=true]{border-color:#263a3755;box-shadow:inset 0 -2px 0 var(--red)}.stone-kind[aria-disabled=true]{cursor:default}.stone-kind[aria-disabled=true]:hover{background:transparent}
.stone-icons{display:flex;gap:9px;align-items:center;height:24px}
.stone-icons i{--stone:#50665c;--heavy:#24342f;display:block;width:23px;height:16px;background:var(--stone);background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--stone),#fff 22%),var(--stone) 72%);border-radius:48% 58% 42% 46%;rotate:-13deg;transition:opacity .3s,translate .2s}
.stone-icons i:nth-child(even){rotate:18deg;border-radius:55% 39% 55% 40%}
[data-kind=heavy] .stone-icons i{width:23px;height:21px;rotate:-6deg;border-radius:24% 34% 18% 30%/28% 22% 34% 20%;background:var(--heavy);background:conic-gradient(from -36deg at 46% 40%,color-mix(in srgb,var(--heavy),#fff 16%) 0 72deg,var(--heavy) 0 144deg,color-mix(in srgb,var(--heavy),#000 32%) 0 216deg,color-mix(in srgb,var(--heavy),#000 12%) 0 288deg,color-mix(in srgb,var(--heavy),#fff 30%) 0)}
.stone-icons i[data-state=selected]{translate:0 -2px;outline:1.5px solid var(--red);outline-offset:3px}
.stone-icons i[data-state=reserved]{background:none;box-shadow:none;border:1.5px dashed var(--stone)}
.stone-icons i[data-state=spent]{opacity:.16}
.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}
.stone-name{font-size:9px;line-height:11px;height:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap}[aria-pressed=true]>.stone-name{color:var(--ink)}
/* #85: the state word never moves the page. Its line is always there (empty while the row can be
   picked), every word shares one grid cell so the widest sets the width, and nothing wraps. */
.stone-state{display:grid;height:14px;margin-top:-3px;font:italic 11px/14px Georgia,serif;color:var(--muted);white-space:nowrap}.stone-state>span{grid-area:1/1;visibility:hidden}.stone-state>[data-on]{visibility:visible}
#status{height:3em;min-height:0;overflow:hidden}.count>span{display:inline-block;min-width:.7em;font-variant-numeric:tabular-nums}
.pond-top>span{white-space:nowrap;min-width:0}#phase{overflow:hidden;text-overflow:ellipsis}
.stone-note{font:italic 11px/1.4 Georgia,serif;color:var(--muted);max-width:14em;text-align:left}.stone-note:empty{display:none}
#power-label{white-space:nowrap}.power[data-kind=heavy] .track{height:5px;margin-top:10px}.power[data-kind=heavy] #power-fill{background:#86402b}
/* Level card line (#80): whole parts, a '·' before each one; the one that starts a line hides in the clipped margin. */
.map-card em.map-meta{overflow:hidden}.map-meta>span{display:flex;flex-wrap:wrap;margin-left:-1.6em}.map-meta>span>span{white-space:nowrap}.map-meta>span>span::before{content:'·'/'';display:inline-block;width:1.6em;text-align:center}
/* World lock (#49): a locked card is dimmed, its picture greyed and dashed-edged, and its meta line
   reads "Kilitli · Söğüt'ü bitir" in place of the score, so the state never rests on colour alone. */
.map-card[data-locked]{border-style:dashed;border-color:#6f7b5c66;background:#e2e0d4;cursor:not-allowed}.map-card[data-locked]:hover{transform:none;background:#e2e0d4}.map-card[data-locked] img{filter:grayscale(1) contrast(.8);opacity:.55}.map-card[data-locked] strong,.map-card[data-locked]>span{color:#7a8277}.map-card[data-locked] em.map-meta{color:#5d6a60}
.map-lock-note{font:600 13px/1.6 Arial;color:#7c3f1c;background:#f3e2c9;border-left:3px solid #a36336;padding:9px 13px;margin:-10px 0 20px}
@media(max-width:560px){.map-card{grid-template-rows:auto auto 1fr}.map-card img{grid-row:1/4}.map-card em.map-meta{grid-column:2;margin:2px 13px 14px 13px}.stone-card{grid-column:1/3}.power{grid-column:1/3;grid-row:auto}.stone-icons{gap:7px}#stones{margin:10px 0 6px -9px}}
/* Reward notice (#50): one paper slip over the pond, short and skippable. Each reward is a line of
   text with a small shape for its kind (keepsake card, hat, lantern, cloth, stone, seal), so the kind
   never rests on colour. "Kuşan" carries the one emphasis; focus starts on "Sonra", the safe choice. */
.reward-dialog{width:min(420px,92vw);max-height:90dvh;background:var(--paper);color:var(--ink);border:1px solid #9a9f8655;border-radius:8px;padding:28px 30px 24px;box-shadow:0 25px 90px #0007;text-align:center}
.reward-dialog::backdrop{background:#0a171cb3;backdrop-filter:blur(4px)}
.reward-mark{display:block;margin:0 auto 12px;width:40px;height:40px}
#reward-kicker{color:#a36336;letter-spacing:3px}.reward-dialog h2{font:normal 34px/1.1 Georgia,serif;letter-spacing:-1px;margin:10px 0 6px}
#reward-line{font:italic 14px/1.6 Georgia,serif;color:var(--muted);margin:0 0 18px}
#reward-list{list-style:none;padding:14px 0;margin:0;border-block:1px solid #263a3722;display:grid;gap:10px;text-align:left}
#reward-list li{display:flex;align-items:center;gap:14px;margin:0;font:15px/1.35 Georgia,serif}
#reward-list li>span{color:var(--ink);font:inherit;padding:0}
#reward-list small{display:block;font:600 9px/1.5 Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
#reward-list li::before{content:'';flex:none;box-sizing:border-box;width:18px;height:18px;border:1.5px solid var(--ink)}
#reward-list [data-kind=memento]::before{width:14px;margin:0 2px;border-radius:2px;rotate:-8deg}
#reward-list [data-kind=hatMark]::before{border:0;height:12px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}
#reward-list [data-kind=lantern]::before{width:14px;margin:0 2px;border-radius:5px 5px 4px 4px;border-top-width:4px}
#reward-list [data-kind=coat]::before{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 5px)}
#reward-list [data-kind=heavy]::before{border:0;border-radius:50%;background:#24342f;box-shadow:inset 0 0 0 3px #50665c}
#reward-list [data-kind=campaign]::before{rotate:45deg;scale:.8;background:var(--red);border-color:var(--red)}
/* A keepsake or the badge brings its own small card (#58) in place of the glyph. */
#reward-list li:has(.reward-card)::before{content:none}
#reward-list:has(.reward-card) li{display:grid;grid-template-columns:44px 1fr;column-gap:14px}#reward-list:has(.reward-card) li::before{justify-self:center}
.reward-card{flex:none;width:44px;height:55px}#reward-list [data-kind=campaign] .reward-card{height:51px}
.reward-next{font:13px/1.6 Arial,sans-serif;margin:16px 0 4px}.reward-note{font:italic 12px/1.5 Georgia,serif;color:var(--muted);margin:0}
.reward-note[hidden],#reward-wear[hidden]{display:none}
.reward-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}.reward-actions button{min-width:112px;min-height:44px;padding:10px 22px;font-size:13px;letter-spacing:.4px}
#reward-wear{background:var(--ink);color:var(--paper);border-color:var(--ink)}#reward-wear:hover{background:#1b302a}
body[data-theme=moonlit] .reward-dialog{--paper:#eae6d9;--ink:#263e36;--muted:#617367;--red:#a36336}
/* The celebration is a breath, not a show: the slip rises, the rewards come one by one, the lantern glows once. */
.reward-dialog[open]{animation:reward-in .45s cubic-bezier(.2,.7,.2,1)}
.reward-dialog[open] #reward-list li{animation:reward-in .4s calc(.2s + var(--i,0)*.08s) both}
.reward-dialog[open] .reward-mark{animation:reward-glow 1.6s .3s ease-in-out}
/* The new card arrives grey and takes its colour once its line is in; reduced motion shows it open at once. */
.reward-dialog[open] .reward-card{animation:memento-open .8s calc(.55s + var(--i,0)*.08s) ease-out both}
@keyframes reward-in{from{opacity:0;translate:0 10px}}@keyframes reward-glow{50%{filter:drop-shadow(0 0 9px #e5b765)}}@keyframes reward-fade{from{opacity:0}}@keyframes memento-open{from{filter:grayscale(1);opacity:.5;rotate:-5deg}}
@media(prefers-reduced-motion:reduce){.reward-dialog[open]{animation:reward-fade .1s linear}.reward-dialog[open] #reward-list li,.reward-dialog[open] .reward-mark,.reward-dialog[open] .reward-card{animation:none}}
@media(max-width:560px){.reward-dialog{padding:22px 20px 20px}.reward-dialog h2{font-size:29px}.reward-actions button{flex:1;min-width:0}}
/* Hit warning (#62): the aim's own line, above the point so a finger leaves it in view (below near the top
   edge). Icon and words, dark slip and light ink, so it reads in grey and on any water. Never moves on its own. */
.aim-warning{position:absolute;z-index:4;transform:translate(-50%,calc(-100% - 22px));display:flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;background:#102d2be6;color:#ffd79a;border:1px solid #ffc46e;border-radius:3px;font:600 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.2px;white-space:nowrap;pointer-events:none}
.aim-warning[hidden]{display:none}.burn-note{color:#f3d9a4;border-color:#d5ab6a;font-weight:500}.aim-warning.below{transform:translate(-50%,22px)}.aim-warning svg{flex:none}
/* Wish (#71): the level's one sentence in the pond's top band, ink-dark behind it and gone before the
   lantern. It never takes a press (pointer-events), and stays in the reading tree while faded so the
   status line is heard when it is written. The dock label steps aside while it shows. */
.wish{position:absolute;z-index:3;top:0;left:0;right:0;margin:0;padding:7% 14% 11%;text-align:center;font:italic 15px/1.55 Georgia,serif;color:#f4e6c4;text-shadow:0 1px 3px #071f1a;background:linear-gradient(#0d2826d0 50%,#0d282600);pointer-events:none;opacity:0;transition:opacity .9s}
.wish[data-state=on]{opacity:1}#game .goal-label{transition:opacity .9s}#game[data-wish=on] .goal-label{opacity:0}
#result .result-wish{font:italic 14px/1.6 Georgia,serif;color:#f3d9a4;margin:-6px auto 12px}
@media(max-width:560px){.wish{font-size:14px;padding:8% 11% 12%}#result .result-wish{font-size:13px;margin:-4px auto 10px}}
/* World ending (#71): the reward notice's paper, wider, with the picture under an ink frame and the lines
   below it in one grid cell per part, so nothing moves as they arrive. A press anywhere ends it ("Geç"
   says so); the reward card follows on the same backdrop. */
.story-dialog{width:min(560px,94vw);max-height:94dvh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid #9a9f8655;border-radius:8px;padding:22px 26px 18px;box-shadow:0 25px 90px #0007;text-align:center;cursor:pointer}
.story-dialog::backdrop{background:#0a171cb3;backdrop-filter:blur(4px)}
#story-title{margin:0 0 12px;color:#a36336;letter-spacing:3px;text-transform:uppercase}
.story-art svg{display:block;width:100%;height:auto;border:1px solid var(--ink);border-radius:2px;background:#e4c596}
.story-lines{display:grid;margin:18px 4px 4px}.story-part{grid-area:1/1;visibility:hidden}
.story-dialog[data-part=ending] [data-part=ending],.story-dialog[data-part=finale] [data-part=finale]{visibility:visible}
.story-part p{margin:0 0 8px;font:italic 17px/1.5 Georgia,serif;opacity:0;transition:opacity .9s}.story-part p[data-on]{opacity:1}
.story-log{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-skip{min-width:96px;min-height:44px;padding:10px 22px;font-size:13px;letter-spacing:.4px;margin-top:6px}
body[data-theme=moonlit] .story-dialog{--paper:#eae6d9;--ink:#263e36;--muted:#617367;--red:#a36336}
.story-dialog[open]{animation:reward-in .45s cubic-bezier(.2,.7,.2,1)}
/* The picture's motion: lights come on one by one, lanterns drift to the mouth and shrink, the sky turns. */
.story-lamp{opacity:.12;animation:story-on .8s calc(.4s + var(--i)*.35s) ease-out forwards}
.story-dialog[data-world=safak] .story-lamp{animation-delay:calc(.3s + var(--i)*.08s)}
.story-dialog[data-part=finale] .story-lamp{animation:story-off 2.5s ease-in forwards}
.story-lantern{transform-box:fill-box;transform-origin:50% 50%;animation:story-drift 6.5s calc(1.8s + var(--i)*.5s) ease-in forwards}
.story-last{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.7);opacity:.45}
.story-dusk{opacity:0;animation:story-dusk 8s 1s ease-in-out forwards}.story-sun{animation:story-rise 9s ease-out forwards}
.story-lotus path{transform-box:fill-box;transform-origin:50% 100%;animation:story-close 6s 1s ease-in-out forwards}
.story-mist{animation:story-mist 9s ease-in-out forwards}
.story-ripple{transform-box:fill-box;transform-origin:50% 50%;animation:story-ripple 2.4s 1s ease-out infinite}
@keyframes story-on{to{opacity:1}}@keyframes story-off{from{opacity:1}to{opacity:.15}}@keyframes story-drift{75%{opacity:.85}to{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}}
@keyframes story-dusk{to{opacity:.5}}@keyframes story-rise{from{transform:translateY(18px)}to{transform:translateY(-8px)}}@keyframes story-close{to{transform:scaleY(.45)}}
@keyframes story-mist{to{transform:translateX(24px);opacity:.06}}@keyframes story-ripple{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
/* Reduced motion: one still frame, lights already on (out again for the finale), lanterns where they float. */
@media(prefers-reduced-motion:reduce){.story-dialog[open]{animation:reward-fade .1s linear}.story-svg *{animation:none!important}.story-lamp{opacity:1}.story-dusk{opacity:.3}.story-sun{transform:translateY(-8px)}.story-dialog[data-part=finale] .story-lamp{opacity:.15}}
@media(max-width:560px){.story-dialog{padding:18px 16px 14px}.story-lines{margin-top:14px}.story-part p{font-size:15px;margin-bottom:6px}.story-skip{width:100%}}
/* Read, never seen (#121): the aim warning's live region, the same clip as the closed save warning. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Sound (#32): a toggle in the header, pressed = on. The icon tells the state by shape (waves or a cross),
   not colour; the word hides on narrow screens like the others. Sound is its own preference, apart from motion. */
.sound-trigger{gap:9px;min-width:44px}.sound-trigger .sound-icon{flex:none}.sound-trigger .sound-off{display:none}
.sound-trigger[aria-pressed=false] .sound-wave{display:none}.sound-trigger[aria-pressed=false] .sound-off{display:block}.sound-trigger[aria-pressed=false]{color:var(--muted)}
@media(max-width:560px){header .sound-trigger{padding:8px;justify-content:center}}
/* In-game "Geri al" (#163): on the "KIYIDAKİ TAŞLAR" row, at the right, above the count and the picker where the
   returned stone shows. Words with the arrow, so it is never mistaken for "Yeniden başlat" (↻). The row keeps its
   44 px whether the button is there or not, so nothing below it moves at the first throw. Passive (nothing to undo)
   reads by a dashed edge and a faded word, not by colour alone. */
.stone-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;margin-top:-8px}
.undo-play{display:inline-flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;font-size:12px;letter-spacing:.3px;white-space:nowrap;touch-action:manipulation}
.undo-play[hidden]{display:none}.undo-play>span{font-size:17px;line-height:1}
body[data-theme=moonlit] .undo-play{border-color:#b5c6ca66}
.undo-play[aria-disabled=true]{opacity:.5;border-style:dashed;cursor:default}.undo-play[aria-disabled=true]:hover{background:transparent}
/* Wish ring state (#149): "Hedef: kilitli" / "Hedef: açık" under the status. A small ring beside it, hollow and dashed
   while locked, filled when open, so the state reads by shape as well as by the word. Not a live region. */
.goal-state{display:flex;align-items:center;gap:8px;margin:-6px 0 0;font:italic 12px/1.4 Georgia,serif;color:#5a705e}
.goal-state[hidden]{display:none}.goal-state::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;border:1.5px dashed currentColor}
.goal-state[data-state=open]::before{border-style:solid;background:currentColor}
body[data-theme=moonlit] .goal-state{color:#aabdbd}
/* Cards in worlds (#147). A world's head: name and count on one line, the reward under it, and while the world is locked
   the lock line, once, in the note's amber with a dashed rule (shape and words, not colour alone). The head sticks under
   the dialog's top while its cards scroll past, so on a phone the world is never lost; a card scrolled to is centred. */
#map-grid{display:block}.map-world+.map-world{margin-top:30px}
.map-world-head{position:sticky;top:-20px;z-index:2;background:#eae6d9;margin:0 -2px 12px;padding:12px 2px 9px;border-bottom:1px solid #263e3622}
.map-world-head h3{display:inline;font:600 22px Georgia,serif;letter-spacing:-.3px;margin:0}
.map-world-count{margin-left:12px;font:600 10px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#52644f}
.map-world-reward{margin:5px 0 0;font:italic 12px/1.5 Georgia,serif;color:#617367}
.map-world-lock{margin:7px 0 0;display:inline-block;font:600 12px/1.5 Arial,sans-serif;color:#7c3f1c;border-bottom:1.5px dashed #a36336}
.map-world[data-locked] .map-world-head h3{color:#5d6a60}
.map-card{scroll-margin-block:90px}
@media(max-width:560px){.map-world-head{top:-14px}.map-world-head h3{font-size:20px}.map-world+.map-world{margin-top:24px}}
/* Win screen "En iyi" line (#148): under the win text, small and plain; the win that beats the record wears a small
   diamond before it as well as the words "Yeni en iyi", so it reads in grey too. */
#result .result-best{font:600 12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.6px;color:#d5ab6a;margin:-14px auto 20px}
#result .result-best[hidden]{display:none}#result .result-best[data-kind=new]{color:#f3d9a4}#result .result-best[data-kind=new]::before{content:'◆ ';font-size:9px;vertical-align:1px}
.result-pebbles{font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.4px;color:#bfae92;margin:-14px auto 20px}#result .result-pebbles[hidden]{display:none}
#result .result-pebbles{margin:-14px auto 20px}@media(max-width:560px){#result .result-pebbles{margin:-8px auto 14px}}
/* Su Defteri (#243): one quiet italic line like the pebble line; no icon, no colour change, nothing that moves. */
#result .result-notebook{font:italic 13px/1.5 Georgia,serif;color:#cfbf9f;margin:-14px auto 20px}#result .result-notebook[hidden]{display:none}
@media(max-width:560px){#result .result-notebook{margin:-8px auto 14px}}
/* "Yarın yeni bir gölet gelir." (#271): one quiet line under a won daily, the notebook line's look; static, so reduced motion changes nothing. */
#result .result-tomorrow{font:italic 13px/1.5 Georgia,serif;color:#cfbf9f;margin:-6px auto 18px}#result .result-tomorrow[hidden]{display:none}
.result-best .best-stars{letter-spacing:1px;margin-left:2px}
@media(max-width:560px){#result .result-best{margin:-8px auto 14px}}
/* Level map (#24): the picture's corner holds the level's own map, drawn from its data (level-map.js). The wrapper takes
   the picture's place in the card, the map is a pale paper tab in its bottom-right with its own edge, so it reads on any
   theme picture and in grey. Static: reduced motion has nothing to turn off. */
.map-card>.map-art{position:relative;display:block;margin:0!important}.map-card .map-art img:first-child{display:block;width:100%}
.map-mini{min-height:0!important;grid-row:auto!important;position:absolute;right:7px;bottom:7px;width:auto!important;height:62%!important;object-fit:contain;box-sizing:border-box;padding:4px;background:#f3ecd9e6;border:1px solid #263e3655;border-radius:5px;box-shadow:0 1px 4px #0004}
.map-card[data-locked] .map-mini{opacity:.7}
@media(max-width:560px){.map-art{grid-row:1/4;grid-column:1}.map-card .map-art img:first-child{height:100%;min-height:110px;object-fit:cover}.map-mini{right:4px;bottom:4px;height:58%!important;padding:3px}}
/* Share card (#38): a quiet second row under the win buttons; the focus ring is the global one, nothing animates. */
#result .share-btn{display:block;min-height:44px;margin:12px auto 0;border-color:#d5ab6a77}
#result .share-btn[hidden]{display:none}#result .share-btn[aria-disabled=true]{opacity:.6}
#result .share-note{font:600 12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.4px;color:#d5ab6a;margin:8px auto 0;min-height:18px}
/* Language (#244): for English the page waits, hidden, until i18n-dom.js has put the words in (index.html sets the class); the animation is the fail-safe, so a script that never runs cannot leave a blank page. */
html.i18n-wait body{visibility:hidden;animation:i18n-reveal 0s 2s forwards}
@keyframes i18n-reveal{to{visibility:visible}}

/* "Sıradaki" on the card of the level the bare address leads to (#263): a word in a small outlined tag, beside the title. */
.map-card .map-next{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 7px;border:1px solid #a36336;border-radius:9px;font:600 9px/1.2 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#8a4d28}