:root { color-scheme:light; --ink:#422c46; --muted:#88738a; --accent:#96648d; --paper:#fffafc; --line:#ecdfeb; font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif; color:var(--ink); background:#eee6ee; }
* { box-sizing:border-box; }
body { margin:0; width:100% !important; height:100dvh !important; overflow:hidden; background:radial-gradient(ellipse at top,#fcf0f1,#e9e1ed); }
button { font:inherit; color:inherit; cursor:pointer; border:0; min-height:44px; padding:10px 14px; border-radius:14px; font-size:12px; font-weight:650; transition:background .15s,transform .15s; }
button:hover { filter:brightness(.97); }
button:active { transform:translateY(1px); }
button:focus-visible,canvas:focus-visible { outline:3px solid #915c89; outline-offset:3px; }
[hidden] { display:none !important; }
#game-shell { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(100%,480px); height:100dvh; margin:auto; background:var(--paper); box-shadow:0 0 80px #725e7020; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.game-header { padding:16px 18px 12px; z-index:2; border-bottom:1px solid var(--line); }
.brand,.hud,.game-footer,.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eyebrow { font-size:9px; font-weight:750; letter-spacing:2px; color:var(--muted); }
h1 { font-size:18px; margin:4px 0 12px; letter-spacing:-.7px; }
.soft-button { background:#f1e7f0; color:#795572; }
.primary-button { background:var(--accent); color:white; font-weight:750; }
.hud { gap:16px; }
.hud>div:not(.tools) { min-width:58px; }
.hud span { display:block; color:var(--muted); font-size:10px; }
.hud strong { font-size:27px; font-weight:750; font-variant-numeric:tabular-nums; }
.tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; max-width:194px; }
.tools button { background:transparent; padding:5px 8px; min-height:44px; font-size:11px; }
#canvasDiv { position:relative; overflow:hidden; min-height:0; justify-self:center; background:#d7becb; touch-action:none; }
#Cocos2dGameContainer { position:absolute; top:0; left:0; }
canvas { display:block; touch-action:none; }
#canvasDiv { align-self:center; }
.game-footer { padding:10px 14px; border-top:1px solid var(--line); gap:8px; }
.next-preview { display:flex; align-items:center; gap:7px; min-width:90px; }
.next-preview img { width:40px; height:44px; object-fit:contain; }
.next-preview small { display:block; color:var(--muted); font-size:9px; }
.next-preview span { font-size:12px; font-weight:700; }
.game-footer p { font-size:10px; color:var(--muted); text-align:center; line-height:1.6; margin:0; }
.game-footer button { font-size:11px; padding:8px 10px; }
#drop-guide { position:absolute; z-index:3; top:18%; bottom:8%; border-left:2px dashed #fff9; pointer-events:none; }
#pause-layer { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; background:#32223e99; color:white; backdrop-filter:blur(5px); }
#pause-layer p { font-size:23px; font-weight:700; }
#achievement-toast { pointer-events:none; position:absolute; z-index:12; bottom:90px; left:12px; right:12px; display:flex; align-items:center; gap:14px; padding:14px; border:1px solid #e6c8de; border-radius:22px; background:#fffafdF5; box-shadow:0 10px 35px #3c18342b; animation:reveal .3s ease-out; }
#achievement-toast img { width:78px; height:88px; object-fit:contain; }
#achievement-toast small { display:block; color:var(--accent); font-size:10px; margin-bottom:7px; }
#achievement-toast strong { display:block; font-size:17px; line-height:1.45; word-break:keep-all; }
dialog { border:1px solid #eeddeb; border-radius:26px; color:var(--ink); background:var(--paper); width:min(92vw,450px); padding:26px; max-height:85dvh; overflow:auto; box-shadow:0 24px 100px #32172e44; }
dialog::backdrop { background:#2d193b80; backdrop-filter:blur(4px); }
dialog h2 { margin:7px 0 15px; font-size:23px; letter-spacing:-.8px; }
dialog p { line-height:1.8; font-size:13px; color:var(--muted); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.dialog-heading h2 { margin-bottom:0; }
.dialog-heading h2 small { font-size:13px; color:var(--accent); }
.dialog-description { margin:16px 0 20px; }
#collection-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.collection-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; border:1px solid var(--line); border-radius:18px; background:white; padding:14px 10px; min-height:195px; gap:7px; }
.collection-card .stage-number { align-self:flex-start; color:var(--muted); font-size:10px; letter-spacing:1px; }
.collection-card img { width:100%; height:94px; object-fit:contain; }
.collection-card strong { font-size:12px; line-height:1.5; word-break:keep-all; }
.collection-card small { color:var(--muted); font-size:9px; line-height:1.5; }
.collection-card.locked img { opacity:.25; filter:grayscale(1); }
#result-dialog { text-align:center; }
#result-score { display:block; font-size:68px; color:var(--accent); margin:14px 0; line-height:1; font-variant-numeric:tabular-nums; }
.result-facts { padding:16px; background:#f4edf3; border-radius:16px; text-align:left; margin:20px 0; }
.result-facts div { display:flex; justify-content:space-between; gap:15px; margin:8px 0; }
.result-facts dt { font-size:11px; color:var(--muted); flex-shrink:0; }
.result-facts dd { font-size:12px; margin:0; font-weight:700; text-align:right; line-height:1.5; }
#result-dialog>button { display:block; width:100%; margin-top:8px; }
#splash { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:#faf7fc url(../assets/images/web/splash-background.png) center/contain no-repeat; }
.loading-card { margin:30vh 20px 0; padding:20px 24px; background:#fffc; backdrop-filter:blur(8px); border:1px solid white; border-radius:22px; text-align:center; width:min(86vw,340px); }
.loading-card h2 { font-size:17px; margin:9px 0 18px; }
.loading-card p { font-size:12px; color:var(--muted); }
progress { width:100%; accent-color:var(--accent); height:8px; }
@keyframes reveal { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }
@media(max-width:370px) { .game-header{padding:12px;} .hud{gap:10px;} .tools{max-width:165px;} .tools button{padding:4px 5px;font-size:10px;} .game-footer p{font-size:9px;} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none !important;transition:none !important;} }
.play-status { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:6px; }
#leaderboard-list { list-style:none; padding:0; margin:14px 0; display:grid; gap:8px; }
.rank-row { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:white; }
.rank-number { flex:0 0 28px; text-align:center; font-weight:750; color:var(--muted); }
.rank-row>div { flex:1; min-width:0; }
.rank-row strong { font-size:13px; overflow-wrap:anywhere; }
.rank-row p { font-size:11px; line-height:1.5; margin:4px 0 0; overflow-wrap:anywhere; }
.rank-row>b { font-size:13px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.podium { border-width:2px; }
.podium-1 { border-color:#d5b45d; background:#fff8df; }
.podium-2 { border-color:#a9b4c5; background:#f2f5fa; }
.podium-3 { border-color:#c99b7c; background:#fcf0e8; }
.podium .rank-number { font-size:24px; }
#leaderboard-title small { font-size:12px; color:var(--accent); }
#score-form { border-top:1px solid var(--line); margin-top:16px; padding-top:4px; }
#score-form input { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13px; padding:10px; margin-top:6px; }
#score-form button { width:100%; }
.ranking-help { font-size:11px; }
.connection-badge { display:inline-block;padding:5px 9px;background:#eee6f1;border-radius:99px;font-size:11px;font-weight:700; }.connection-badge[data-state=fresh]{background:#deeee6;color:#28674e;}.connection-badge[data-state=local],.connection-badge[data-state=stale]{background:#fff1d8;color:#785c29;}#ranking-updated{font-size:10px;color:var(--muted);}
#my-ranking { font-weight:700; color:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
#danger-warning { position:absolute; top:15.5%; left:4px; right:4px; text-align:center; pointer-events:none; z-index:4; font-size:clamp(8px,2.3vw,11px); color:#63415d; background:#fff9; border-radius:5px; padding:3px; }
#danger-warning.urgent { background:#9c2950ed; color:white; font-weight:750; }
#achievement-toast { top:118px; bottom:auto; left:10px; right:10px; gap:9px; padding:8px 12px; border-radius:14px; }
#achievement-toast img { width:40px; height:44px; flex-shrink:0; }
#achievement-toast small { font-size:9px; margin-bottom:2px; }
#achievement-toast strong { font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
#rotate-hint { display:none; pointer-events:none; }
.volume-label { display:flex; justify-content:space-between; font-size:13px; margin-top:16px; }
input[type=range] { width:100%; min-height:44px; accent-color:var(--accent); }
select { width:100%; min-height:44px; font:inherit; font-size:12px; background:white; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:8px; margin-top:8px; }
.settings-actions { display:flex; flex-wrap:wrap; gap:8px; }
.file-button { position:relative; display:inline-flex; align-items:center; font-size:12px; font-weight:650; background:#f1e7f0; color:#795572; min-height:44px; padding:10px 14px; border-radius:14px; cursor:pointer; }
.file-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.file-button:focus-within { outline:3px solid #915c89; }
#settings-status { min-height:24px; overflow-wrap:anywhere; }
@media(orientation:landscape) and (max-height:540px) { #rotate-hint { display:block; position:fixed; bottom:6px; left:8px; max-width:calc((100vw - 480px)/2 - 16px); font-size:11px; color:#63415d; } .game-header{padding:4px 12px;} h1{font-size:15px;margin:2px 0;} .hud strong{font-size:20px;} #achievement-toast{top:84px;} }
@media(max-width:620px) and (orientation:landscape) and (max-height:540px) { #rotate-hint { left:0; right:0; top:0; bottom:auto; max-width:none; background:#fffaf2; text-align:center; font-size:9px; } .game-header{padding-top:14px;} }
/* Responsive play slot: mobile toolbar, desktop sidebar, reserved announcements. */
#game-shell { grid-template-areas:"header" "notices" "play" "footer";grid-template-rows:auto 60px minmax(0,1fr) auto; }
.game-header { grid-area:header;padding:10px 12px 6px; }
.brand { gap:8px; }.brand h1 { font-size:17px;margin:3px 0; }.brand .eyebrow { font-size:8px; }
.hud { display:grid;grid-template-columns:54px 54px minmax(0,1fr);gap:6px; }.hud strong { font-size:24px; }
.tools { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:0; }.tools button{font-size:10px;padding:4px 2px;white-space:nowrap;}
.notification-area { grid-area:notices;position:relative;overflow:hidden;margin:0 10px; }
#danger-warning { position:absolute;top:0;left:0;right:0;padding:2px 4px;font-size:10px;line-height:14px; }
#achievement-toast { top:18px;bottom:auto;left:0;right:0;height:42px;padding:3px 8px;border-radius:10px;box-shadow:none;gap:7px; }
#achievement-toast img { width:32px;height:34px; }#achievement-toast small { font-size:8px;margin:0;line-height:10px; }#achievement-toast strong { font-size:11px;line-height:13px; }
#playfield-slot { grid-area:play;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden; }
#canvasDiv { border-radius:18px;box-shadow:inset 0 0 0 1px #9d7e9b33; }
.game-footer { grid-area:footer;flex-wrap:wrap;padding:8px 12px; }.game-footer>p { flex:1; }
.stage-preview img { border-radius:50%;border:2px solid var(--stage-color,#96648d);background:white; }
#ball-legend { display:none;width:100%;font-size:11px; }#ball-legend summary { cursor:pointer;padding:6px;color:var(--muted); }
.stage-legend { display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:4px 0;gap:6px; }
.stage-chip { display:grid;place-items:center;border:3px solid var(--stage-color);background:white;color:#422c46;border-radius:50%;width:27px;height:27px;font-size:11px;font-weight:750;box-shadow:0 0 0 1px white; }
.desktop-hint { display:none; }#first-play-hint { position:absolute;top:22px;left:8px;right:8px;width:calc(100% - 16px);min-height:32px;font-size:10px; }
dialog { padding:22px; }dialog .dialog-heading { position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0;margin:0 0 12px; }
.settings-section { border-top:1px solid var(--line);padding:12px 0; }.settings-section h3 { font-size:14px;margin:0 0 8px; }.settings-section p { font-size:12px; }
.settings-section>button { margin:4px 4px 0 0; }.volume-label { margin-top:10px; }
@media(min-width:1000px) and (min-height:600px){
 #game-shell { width:min(calc(100% - 32px),1120px);height:calc(100dvh - 32px);margin:16px auto;padding:0;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto 92px minmax(0,1fr);grid-template-areas:"header play" "notices play" "footer play";gap:0 18px;background:transparent;box-shadow:none; }
 .game-header { padding:18px 16px;background:var(--paper);border-radius:20px 20px 0 0; }.brand { flex-wrap:wrap; }.brand>button{width:100%;}.hud{margin-top:12px;grid-template-columns:1fr 1fr;}.tools{grid-column:1/-1;margin-top:8px;}.tools button{font-size:11px;}.play-status{gap:6px;flex-wrap:wrap;}
 .notification-area { margin:0;background:var(--paper);padding:4px 10px; }.notification-area #danger-warning{left:10px;right:10px;top:4px;}.notification-area #achievement-toast{left:8px;right:8px;top:26px;height:58px;}#achievement-toast strong{font-size:12px;line-height:15px;}
 .game-footer { display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:16px;background:var(--paper);border:0;border-radius:0 0 20px 20px;gap:12px;overflow:auto; }.next-preview img{width:60px;height:60px;}.next-preview small{font-size:11px;}.next-preview span{font-size:17px;}.game-footer>p{flex:0;text-align:left;font-size:12px;}.game-footer button{font-size:12px;}.desktop-hint{display:block;line-height:1.7!important;}
 #ball-legend{display:block;}#ball-legend[open] .stage-legend{justify-content:flex-start;}#ball-legend summary{font-size:12px;}#playfield-slot{height:100%;}#canvasDiv{border-radius:24px;box-shadow:0 12px 40px #66456822;}
}
@media(max-height:540px) and (orientation:landscape){.game-header{padding:3px 12px;}.brand h1{font-size:14px;}.brand .soft-button{min-height:32px;}.hud strong{font-size:18px;}.hud .tools button{min-height:32px;}.notification-area{height:44px;}#game-shell{grid-template-rows:auto 44px minmax(0,1fr) auto;}#achievement-toast{height:28px;}#achievement-toast img{width:24px;height:24px;}#achievement-toast small{display:none;}.game-footer{padding:3px 12px;}#ball-legend,#first-play-hint{display:none;}}

/* Viewport-level discovery banner: never clipped by the landscape notice row. */
#achievement-toast {
 position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 16px);bottom:auto;
 left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));height:auto;
 display:flex;align-items:center;gap:16px;padding:18px 20px 22px;overflow:hidden;
 border:2px solid var(--achievement-color,#96648d);border-radius:24px;
 background:radial-gradient(circle at 8% 20%,#ffe4a8 0,transparent 45%),linear-gradient(120deg,#fffef5,#fff4fc);
 box-shadow:0 14px 44px #422c4640,0 0 0 5px #ffffffb3;pointer-events:none;animation:none;
}
#achievement-toast .achievement-portrait { position:relative;flex:0 0 84px;align-self:center; }
#achievement-toast img { display:block;width:84px;height:90px;object-fit:contain;filter:drop-shadow(0 3px 5px #422c4626); }
#achievement-toast .achievement-portrait>span { position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);padding:3px 9px;background:#70415f;color:white;border:2px solid white;border-radius:20px;font-size:10px;font-weight:850;letter-spacing:1px; }
#achievement-toast .achievement-copy { flex:1;min-width:0; }
#achievement-toast small { display:block;margin:0 0 3px;color:#76526c;font-size:11px;font-weight:750;line-height:1.4; }
#achievement-toast .achievement-heading { display:block;color:#7e345e;font-size:18px;line-height:1.35;font-weight:850; }
#achievement-toast strong { margin:6px 0 0;color:#352139;font-size:18px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere; }
#achievement-toast .achievement-note { display:block;margin-top:6px;color:#71576b;font-size:11px;line-height:1.4; }
#achievement-toast .achievement-progress { position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--achievement-color,#96648d);transform-origin:left; }
@media(max-width:360px){#achievement-toast{gap:12px;padding:14px 14px 18px;}#achievement-toast .achievement-portrait{flex-basis:64px;}#achievement-toast img{width:64px;height:76px;}#achievement-toast strong,#achievement-toast .achievement-heading{font-size:16px;}}
@media(orientation:landscape) and (max-height:540px){#achievement-toast{top:calc(env(safe-area-inset-top,0px) + 12px);padding:12px 18px 16px;gap:14px;}#achievement-toast .achievement-portrait{flex-basis:72px;}#achievement-toast img{width:72px;height:78px;}#achievement-toast small{display:block;}#achievement-toast strong{font-size:17px;}#achievement-toast .achievement-note{margin-top:4px;}}