body:not(.game-entered){overflow:hidden;background:#0d2529}
#game-ui{opacity:0;pointer-events:none;transition:opacity .5s ease}
body.game-entered #game-ui{opacity:1;pointer-events:auto}
.opening-screen{position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:100dvh;color:#f4e8cc;background:radial-gradient(ellipse at 50% 68%,#36554c 0,#12383b 35%,#0c2027 75%);font-family:Arial,Helvetica,sans-serif;opacity:1;transition:opacity .48s ease,visibility .48s}
.opening-screen[hidden]{display:none}
.opening-art{position:absolute;inset:0;z-index:-4;width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;transform:scale(1.015);transition:opacity 1s ease;animation:opening-drift 34s ease-out both}
.has-art .opening-art{opacity:1}
.opening-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,#06161f75 0%,#081b203d 34%,#051b1c08 58%,#06181742 76%,#061a20d9 100%),radial-gradient(ellipse at center,#00101800 25%,#00101855 100%)}
.opening-grain{position:absolute;inset:0;z-index:-2;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.35' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.opening-top,.opening-bottom{position:absolute;left:4.4%;right:4.4%;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:500;letter-spacing:2.3px;color:#e1d9bcaa}
.opening-top{top:max(28px,env(safe-area-inset-top));padding-bottom:16px;border-bottom:1px solid #dfd8ba25}
.opening-chapter{font-size:13px;letter-spacing:5px;color:#e3d4abbd}
.opening-bottom{bottom:max(22px,env(safe-area-inset-bottom));font-size:7px;letter-spacing:1.8px}
.opening-brand{position:absolute;top:12%;width:min(410px,75vw);text-align:center;filter:drop-shadow(0 3px 20px #0215175e)}
.opening-logo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;opacity:0;transition:opacity .7s ease;pointer-events:none}
.has-logo .opening-logo{opacity:1}
.opening-fallback{position:absolute;inset:28% 0 auto;margin:0;font:normal clamp(36px,6vw,66px)/1 Georgia,serif;letter-spacing:3px;color:#f3e7c6}
.opening-fallback span{display:block;letter-spacing:12px;font-size:.48em;margin:16px 0 0 12px}
.has-logo .opening-fallback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.opening-tagline{font:italic 15px/1.6 Georgia,serif;color:#e9dec4e6;letter-spacing:.15px;margin:-7px -20px 0;text-shadow:0 2px 12px #01161b}
.opening-action{position:absolute;bottom:11%;left:50%;transform:translateX(-50%);width:min(360px,82vw);text-align:center}
.opening-status{font:italic 14px/1.6 Georgia,serif;letter-spacing:.15px;color:#f1e2bfeb;margin:0 0 18px;text-shadow:0 2px 12px #06191b}
.opening-progress{height:2px;max-width:210px;margin:28px auto 34px;background:#e4d1a833;overflow:hidden}
.opening-progress>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#eed49a;box-shadow:0 0 12px #edc67488;transition:transform .35s ease}
.enter-game{min-width:232px;min-height:54px;padding:15px 27px;display:inline-flex;align-items:center;justify-content:center;gap:32px;border-radius:2px;border:1px solid #eddbadba;background:linear-gradient(120deg,#eeddb9,#d9bd84);color:#203832;font:15px Georgia,serif;letter-spacing:1.1px;box-shadow:0 7px 28px #031e2755,0 0 30px #e5bc6012;transition:background .2s,box-shadow .2s,transform .2s}
.enter-game:hover{background:#f7e7c6;box-shadow:0 8px 35px #031e2755,0 0 35px #e5bc6038;transform:translateY(-1px)}
.enter-game:active{transform:translateY(0)}
.enter-game:focus-visible,.opening-retry:focus-visible{outline:2px solid #f7e9c7;outline-offset:6px}
.enter-game>span{font-family:Arial,sans-serif;font-size:20px;font-weight:300}
.enter-game[hidden],.opening-progress[hidden],.opening-retry[hidden],.opening-warning[hidden]{display:none}
/* #225: the one line that says what to do is read, not decoration: 14 px, 90% (it was 8-9 px at 65%). */
.opening-instruction{font-size:14px;line-height:1.5;letter-spacing:.5px;color:#e6ece2e6;text-shadow:0 2px 10px #06191b;margin:18px -20px 0}
.opening-warning{font:12px/1.6 Arial,sans-serif;color:#f6d5b2;margin:16px 0 0}
.opening-retry{font:12px Arial,sans-serif;color:#f0dfba;border:none;border-bottom:1px solid #f0dfba66;padding:8px;background:transparent;margin-top:9px}
body.game-entered .opening-screen{opacity:0;visibility:hidden;pointer-events:none}
.brand .brand-symbol{width:36px;height:40px;object-fit:contain}
@keyframes opening-drift{from{transform:scale(1.015)}to{transform:scale(1.055)}}
@media(min-width:1200px){.opening-brand{top:9%;width:min(440px,35vw)}.opening-action{bottom:10%}.opening-tagline{font-size:17px}}
@media(max-width:700px){.opening-art{object-position:62% 50%}.opening-brand{top:14%;width:min(365px,78vw)}.opening-top{font-size:8px;letter-spacing:1.5px}.opening-tagline{font-size:14px}.opening-action{bottom:12%}.opening-bottom>span:last-child{display:none}.opening-bottom{justify-content:center;font-size:7px;letter-spacing:1.2px}}
@media(max-width:420px){.opening-brand{top:17%;width:88vw}.opening-top{left:6%;right:6%;font-size:7px}.opening-chapter{font-size:11px}.opening-tagline{font-size:13px;margin:-2px -8px 0}.opening-action{bottom:12%}.opening-art{object-position:60% 50%}}
@media(max-height:600px) and (min-width:701px){.opening-brand{top:8%;width:270px}.opening-tagline{font-size:12px}.opening-action{bottom:12%}.opening-status{font-size:12px;margin-bottom:10px}.enter-game{min-height:46px;padding:11px 24px}.opening-instruction{margin-top:10px}.opening-top{top:16px}.opening-bottom{bottom:14px}}
@media(prefers-reduced-motion:reduce){.opening-art{animation:none;transform:none}.opening-screen,#game-ui{transition:opacity .08s linear}.opening-logo,.opening-progress>span{transition:none}.enter-game:hover{transform:none}}
/* Quick entry (#148): a player who has already entered this session (index.html sets html.quick before the first
   paint) is not stood in front of the opening. The pond's shell shows at once, still inert until the scene is ready,
   in the page's own paper (the theme's, through --paper) instead of the opening's dark; no fade. boot.js takes the
   class off if the pond cannot open, so the failure message is seen. */
.quick #opening-screen{display:none}
.quick body:not(.game-entered){overflow:auto;background-color:var(--paper)}
.quick #game-ui{opacity:1;transition:none}
/* A player coming back (#263): the level "Devam et" leads to, one quiet line under the button; and the same level on its card, in words (and aria-current), not only a colour. */
.enter-next{margin:12px 0 0;font:italic 14px/1.4 Georgia,serif;color:#f0e4c9;text-shadow:0 2px 10px #06191b}.enter-next[hidden]{display:none}
/* Dönüş işaretleri (#271): for a player coming back, three wordless 48 px buttons under "Devam et": today's lantern (a ring, filled once played), the Su Defteri (eight petals,
   filled as pages open), the far shore (five columns of lights). The state is a filled shape against an outline, never a number or a colour alone. No pulse, no badge:
   they appear with the button (the opening's ready phase) and only fade; reduced motion makes that .08 s. A mark still waiting for its door (daily) is out of sight and out of Tab. */
.return-marks{display:flex;justify-content:center;gap:16px;margin:20px 0 0;visibility:hidden;opacity:0;transition:opacity .45s ease}.return-marks[hidden]{display:none}
.opening-screen[data-phase=ready] .return-marks{visibility:visible;opacity:1}
.return-mark{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0;border-radius:50%;border:1px solid #eddbad55;background:#0b2a2f8c;color:#e9dec4;cursor:pointer;transition:background .2s,border-color .2s}
.return-mark:hover{background:#12383dd9;border-color:#eddbadb0}.return-mark:focus-visible{outline:2px solid #f7e9c7;outline-offset:4px}.return-mark[data-pending]{visibility:hidden}
.return-mark svg{display:block;overflow:visible}.return-mark .ring{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.return-mark .lit{fill:#eed49a;stroke:#eed49a;stroke-width:.8}
.return-mark[data-mark=notebook] .ring{stroke-width:1.2}.return-mark[data-mark=shore] .ring{stroke-width:.8;opacity:.8}
@media(prefers-reduced-motion:reduce){.return-marks{transition:opacity .08s linear}.return-mark{transition:none}}