#game-canvas-wrap {
	position: absolute;
	left: 50%;
	top: 68%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
#game-canvas-wrap canvas{
	opacity:0;
	transition:opacity 1s cubic-bezier(0.4,0,0.2,1);
}
body.mode-game #game-canvas-wrap canvas{
	opacity:1;
	transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s;
}
:root {
--bg:#f5f5f0;
--text:#1a1a2e;
--muted:#8888a0;
--accent:#e94560;
--border:#d8d8d0;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{overscroll-behavior:none;touch-action:pinch-zoom;}
body{
background:var(--bg);
color:var(--text);
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
overflow:hidden;
width:100vw;height:100vh;
height:100dvh;
user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none;
}

/* Cloak everything until the game is ready, to avoid HUD/debug FOUC */
body.loading > *:not(#app-loader){visibility:hidden !important;}
#app-loader{
position:fixed;inset:0;
background:var(--bg);
display:flex;align-items:center;justify-content:center;
z-index:9999;
transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
#app-loader::before{
content:'';
width:28px;height:28px;
border:2px solid var(--border);
border-top-color:var(--text);
border-radius:50%;
animation:app-spin 0.8s linear infinite;
}
@keyframes app-spin{to{transform:rotate(360deg);}}
body:not(.loading) #app-loader{
opacity:0;
pointer-events:none;
}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
#hud{
position:absolute;top:0;left:0;right:0;
display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:flex-start;
padding:1.4rem 2rem;
pointer-events:none;z-index:10;
}
#level-block{display:flex;flex-direction:column;gap:0.2rem;grid-column:2;grid-row:1;justify-self:center;}
#game-timer{
grid-column:2;
grid-row:2;
justify-self:center;
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:0.7rem;
letter-spacing:0.08em;
color:var(--muted);
font-variant-numeric:tabular-nums;
margin-top:0.2rem;
}
#level-tag{font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);}
#goal-wrap{
position:absolute;
z-index:10;
display:flex;flex-direction:column;align-items:center;gap:0.35rem;
pointer-events:none;
touch-action:none;
}
body.mode-game #goal-wrap{
pointer-events:auto;
cursor:grab;
}
body.mode-game #goal-wrap.dragging{
cursor:grabbing;
}
#goal-wrap.snapping{
transition:left 0.38s cubic-bezier(0.34,1.56,0.64,1),
           top  0.38s cubic-bezier(0.34,1.56,0.64,1);
}
#goal-canvas{
width:clamp(120px, 28vw, 180px);
height:clamp(120px, 28vw, 180px);
border:1px solid var(--border);background:#fff;
pointer-events:auto;cursor:zoom-in;
transform-origin:top center;
transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s;
image-rendering:auto;
image-rendering:high-quality;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
#goal-canvas:hover,#goal-canvas.zoomed{
transform:scale(1.6);
box-shadow:0 4px 24px rgba(0,0,0,0.12);
cursor:zoom-out;
}
#almost-hint{
font-family:'JetBrains Mono','Inter',monospace;
font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
color:var(--accent);
opacity:0;
transition:opacity 0.3s;
pointer-events:none;
}
#almost-hint.visible{opacity:1;}
.overlay{
position:absolute;inset:0;
display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1.5rem;
z-index:20;
background:rgba(245,245,240,0.88);
backdrop-filter:blur(5px);
opacity:0;
pointer-events:none;
transition:opacity 0.45s cubic-bezier(0.4,0,0.2,1);
}
.overlay.visible {
opacity:1;
pointer-events:auto;
}
.overlay .btn {
pointer-events:none;
}
.overlay.visible .btn {
pointer-events:auto;
}
.overlay-title{font-size:2.4rem;letter-spacing:-0.02em;font-family:'Nunito','Taipei Sans TC Beta',sans-serif;font-weight:700;}
.btn-bloom{
opacity:0 !important;
transition:opacity 0.35s !important;
pointer-events:none !important;
}
#level-tag,.overlay-sub{font-family:'JetBrains Mono','Inter',monospace;}
#lvl-num,#badge-popup-sub{font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;}
.overlay-sub{font-size:0.82rem;color:var(--muted);letter-spacing:0.1em;}

/* ── Victory: gentle title bloom on clear-overlay reveal ──
   The gold rod pulse already carries sfxVictory; this is the overlay's
   own settle — the title eases in from wide tracking, echoing the
   landing chord coming to rest. */
#clear-overlay.visible .overlay-title{
animation:overlay-title-settle 0.7s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
@keyframes overlay-title-settle{
0%{opacity:0;transform:scale(0.94);letter-spacing:0.22em;}
100%{opacity:1;transform:scale(1);letter-spacing:-0.02em;}
}

/* ── All Clear: two-phase finale, synced to sfxAllClear ──
   The sound is dark-lift (0–0.5s, rising) → homecoming (drop at 0.5s,
   Lydian rain descending, bass arrives home on C). The visuals mirror it:
   PHASE 1 — the title lifts in, diffuse and wide-tracked.
   PHASE 2 — at the 0.5s drop it settles crisp, a warm flash blooms from
             centre (C arrives home), and six light streaks rain down,
             one per descending note (Fs6 D6 B5 G5 E5 C5), staggered 0.07s. */
#allclear-overlay.visible .overlay-title{
animation:allclear-title 1.4s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
@keyframes allclear-title{
0%{opacity:0;transform:translateY(14px);letter-spacing:0.34em;}
36%{opacity:0.55;transform:translateY(4px);letter-spacing:0.18em;}   /* still lifting (phase 1) */
55%{opacity:1;transform:translateY(0);letter-spacing:-0.02em;}        /* homecoming settle (drop) */
100%{opacity:1;transform:translateY(0);letter-spacing:-0.02em;}
}
/* Homecoming flash — soft radial warmth blooming as C arrives (≈0.5s). */
#allclear-overlay.visible::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(circle at center, rgba(233,69,96,0.16) 0%, transparent 55%);
animation:allclear-flash 1.3s ease-out 0.45s backwards;
}
@keyframes allclear-flash{
0%{opacity:0;}
22%{opacity:1;}
100%{opacity:0;}
}
.allclear-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.allclear-rain i{
position:absolute;top:-20%;width:1.5px;height:18%;
background:linear-gradient(to bottom, transparent, rgba(233,69,96,0.85), transparent);
opacity:0;
}
.allclear-rain i:nth-child(1){left:20%;}
.allclear-rain i:nth-child(2){left:34%;}
.allclear-rain i:nth-child(3){left:46%;}
.allclear-rain i:nth-child(4){left:57%;}
.allclear-rain i:nth-child(5){left:68%;}
.allclear-rain i:nth-child(6){left:80%;}
#allclear-overlay.visible .allclear-rain i{
animation:allclear-rain 0.95s cubic-bezier(0.3,0,0.4,1) backwards;
}
#allclear-overlay.visible .allclear-rain i:nth-child(1){animation-delay:0.50s;}
#allclear-overlay.visible .allclear-rain i:nth-child(2){animation-delay:0.57s;}
#allclear-overlay.visible .allclear-rain i:nth-child(3){animation-delay:0.64s;}
#allclear-overlay.visible .allclear-rain i:nth-child(4){animation-delay:0.71s;}
#allclear-overlay.visible .allclear-rain i:nth-child(5){animation-delay:0.78s;}
#allclear-overlay.visible .allclear-rain i:nth-child(6){animation-delay:0.85s;}
@keyframes allclear-rain{
0%{opacity:0;transform:translateY(0);}
16%{opacity:0.8;}
100%{opacity:0;transform:translateY(440%);}
}
/* Keep title/sub/button above the FX layers. */
#allclear-overlay .overlay-title,#allclear-overlay .overlay-sub,#allclear-overlay .btn{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){
#clear-overlay.visible .overlay-title,
#allclear-overlay.visible .overlay-title,
#allclear-overlay.visible::after,
#allclear-overlay.visible .allclear-rain i{animation:none;}
.allclear-rain{display:none;}
}
.btn{
padding:0.55rem 2rem;
border:1.5px solid var(--text);background:transparent;
color:var(--text);
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:0.82rem;letter-spacing:0.12em;cursor:pointer;
transition:background 0.18s,color 0.18s;
pointer-events:all;
}
.btn:hover{background:var(--text);color:var(--bg);}
#start-btn{
border:none;background:transparent;
padding:0;
font-size:2.4rem;line-height:1;letter-spacing:0;
display:inline-flex;align-items:center;justify-content:center;
position:relative;
}
#start-btn::after{
content:'';
position:absolute;inset:0;
pointer-events:none;
}
#start-btn:hover,#start-btn.clicked,#start-btn:active,#start-btn:focus{
background:transparent;color:var(--text);
}
/* Enlarged invisible hit area for triangle buttons (mobile-friendly) */
#start-btn::before,.page-arrow::before{
content:'';
position:absolute;
inset:-16px;
}
#start-btn::before{inset:-22px;}
#start-btn:hover::after{opacity:1;transition:opacity 0.25s;}
#start-btn.clicked::after{opacity:1;transition:opacity 0s;}
#start-btn{transition:opacity 0.5s,transform 0.5s cubic-bezier(0.4,0,0.2,1);}
body:not(.mode-home) #start-btn{opacity:0;transform:scale(1.25);}

/* ===== Screen UI (home / level select) ===== */
#back-game,#back-levels{
position:absolute;
top:1.05rem;left:1.2rem;
z-index:60;
width:2rem;height:2rem;
padding:0;
font-size:1.1rem;
display:flex;
align-items:center;justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
}
#back-game[hidden],#back-levels[hidden]{display:flex;}
body.mode-game #back-game{
opacity:1;pointer-events:auto;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s,background 0.18s,color 0.18s;
}
body.mode-levels #back-levels{
opacity:1;pointer-events:auto;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 3s,background 0.18s,color 0.18s;
}
body.mode-game #hud{padding-left:2rem;}

#screen-home,#screen-levels{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1.1rem;
z-index:50;
background:var(--bg);
opacity:0;
pointer-events:none;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1);
}
#screen-home.visible,#screen-levels.visible{
opacity:1;
pointer-events:auto;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 1.8s;
}
body.mode-game #screen-home,
body.mode-game #screen-levels{
opacity:0 !important;
pointer-events:none !important;
}
body.mode-game #screen-levels{
transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}
body.mode-levels #screen-home{transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s;}
#screen-levels .overlay-title{opacity:0;transition:opacity 1s;}
body.mode-levels #screen-levels .overlay-title{opacity:1;transition:opacity 1s 3s;}
#screen-levels .page-arrow{opacity:0;}
body.mode-levels #screen-levels .page-arrow{opacity:1;transition:opacity 0.25s;}
body.mode-levels #screen-levels .page-arrow:disabled{opacity:0.18;transition:opacity 0.25s;}
body.going-to-game #screen-levels .overlay-title,
body.going-to-game #screen-levels .page-arrow,
body.going-to-game #back-levels,
body.going-to-game #level-grid .level-tile:not(.selected){
opacity:0 !important;
transition:opacity 0.5s !important;
}
body.mode-game #screen-levels .overlay-title,
body.mode-game #screen-levels .page-arrow,
body.mode-game #back-levels,
body.mode-game #level-grid .level-tile:not(.selected){
opacity:0 !important;
transition:none !important;
}
body.going-to-game #level-grid .level-tile.selected{
opacity:0 !important;
transform:scale(1.35) !important;
transition:opacity 0.9s,transform 0.9s cubic-bezier(0.22,0.61,0.36,1) !important;
}
body.mode-game #level-grid .level-tile.selected{
opacity:0 !important;
transform:scale(1.35) !important;
transition:none !important;
}
/* 散波 — radiating square frames born from the selected tile, echoing the
   chord bloom + reverb of sfxEnterGame. Two waves: the bloom (0.18s, aligned to
   the sound's chord attack) and its reverb tail (0.34s, fainter, wider). */
body.going-to-game #level-grid .level-tile.selected::after,
body.going-to-game #level-grid .level-tile.selected::before{
content:'';
position:absolute;
inset:0;
border:2.5px solid var(--text);
box-sizing:border-box;
pointer-events:none;
opacity:0;
z-index:3;
}
body.going-to-game #level-grid .level-tile.selected::after{
animation:tile-bloom 0.95s cubic-bezier(0.22,0.61,0.36,1) 0.18s backwards;
}
body.going-to-game #level-grid .level-tile.selected::before{
animation:tile-bloom-echo 1.05s cubic-bezier(0.22,0.61,0.36,1) 0.34s backwards;
}
@keyframes tile-bloom{
0%{opacity:0;transform:scale(1);}
14%{opacity:0.8;}
100%{opacity:0;transform:scale(2.25);}
}
@keyframes tile-bloom-echo{
0%{opacity:0;transform:scale(1);}
18%{opacity:0.4;}
100%{opacity:0;transform:scale(2.9);}
}
@media (prefers-reduced-motion:reduce){
body.going-to-game #level-grid .level-tile.selected::after,
body.going-to-game #level-grid .level-tile.selected::before{animation:none;}
}
body.mode-game #screen-home *,
body.mode-game #screen-levels *,
body.mode-game #back-levels{
pointer-events:none !important;
}
#hud,#goal-wrap{
opacity:0;
pointer-events:none;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1);
}
body.mode-home #hud,body.mode-levels #hud,
body.mode-home #goal-wrap,body.mode-levels #goal-wrap{
opacity:0;
pointer-events:none;
}
body.mode-game #hud,body.mode-game #goal-wrap{
opacity:1;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s;
}

#screen-home .overlay-sub,#screen-levels .overlay-sub{
text-align:center;
}
#home-progress{
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:0.75rem;
letter-spacing:0.08em;
color:var(--muted);
font-variant-numeric:tabular-nums;
}
#levels-progress{
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:0.72rem;
letter-spacing:0.08em;
color:var(--muted);
font-variant-numeric:tabular-nums;
margin-top:-0.4rem;
opacity:0;
transition:opacity 1s;
pointer-events:none;
}
body.mode-levels #levels-progress{opacity:1;transition:opacity 1s 3s;}
body.going-to-game #levels-progress{opacity:0 !important;transition:opacity 0.5s !important;}
body.mode-game #levels-progress{opacity:0 !important;transition:none !important;}

.levels-row{
display:flex;
align-items:center;
gap:0.7rem;
}
.page-arrow{
border:none;
background:transparent;
color:var(--text);
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:1.8rem;
line-height:1;
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
padding:0;
flex-shrink:0;
position:relative;
transition:opacity 0.25s;
}
.page-arrow::after{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
color:var(--text);
opacity:0;
transition:opacity 0.25s;
pointer-events:none;
}
.page-arrow:hover::after{opacity:1;transition:opacity 0.25s;}
.page-arrow.clicked::after{transition:opacity 1s;}
#prev-page::after{content:'';}
#next-page::after{content:'';}
.page-arrow:disabled{cursor:default;pointer-events:none;opacity:0.18;}
.page-arrow:disabled:hover::after{opacity:0;}
.level-grid-wrap{
width:min(480px, 86vw);
}
#level-grid{
position:relative;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0;
padding:2px;
background:
  radial-gradient(circle at 0 0, var(--text) 1.3px, transparent 1.8px),
  radial-gradient(circle at 100% 0, var(--text) 1.3px, transparent 1.8px),
  radial-gradient(circle at 0 100%, var(--text) 1.3px, transparent 1.8px),
  radial-gradient(circle at 100% 100%, var(--text) 1.3px, transparent 1.8px);
background-size:20% 25%;
background-origin:content-box;
background-clip:border-box;
}
body.mode-game #level-grid {
pointer-events: none !important;
}
#level-grid{touch-action:none;}
.level-tile{
aspect-ratio:1/1;
width:100%;
position:relative;
touch-action:none;
display:flex;
align-items:center;
justify-content:center;
border:none;
background:transparent;
color:var(--text);
cursor:pointer;
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:1rem;
letter-spacing:0.08em;
transition:background 0.18s,color 0.18s,opacity 0.09s,transform 0.275s cubic-bezier(0.4,0,0.2,1);
border-radius:0;
pointer-events:all;
}
.level-tile .tile-num{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:2.6rem;
font-weight:300;
letter-spacing:0;
color:var(--text);
opacity:0.6;
z-index:0;
pointer-events:none;
}
.level-tile .tile-thumb{
position:absolute;
inset:6%;
width:88%;
height:88%;
z-index:1;
pointer-events:none;
display:block;
opacity:0.18;
transition:opacity 0.22s;
}
.level-tile:hover .tile-thumb,
.level-tile.selected .tile-thumb,
.level-tile.completed .tile-thumb{
opacity:1;
}
.level-tile.completed .tile-num{
opacity:0.1;
}
.level-tile.locked{
opacity:0.35;
cursor:not-allowed;
filter:grayscale(1);
}
.level-tile.locked .tile-thumb{opacity:0.4;}
body.page-swapping #level-grid,
body.page-swapping #level-grid .level-tile,
body.page-swapping .page-arrow,
body.page-swap-cooldown #level-grid .level-tile{pointer-events:none !important;}
.level-tile.entering-right,
.level-tile.entering-left{animation:tile-enter-fade 0.175s cubic-bezier(0.4,0,0.2,1) backwards;pointer-events:none;}
.level-tile.leaving-right,
.level-tile.leaving-left{opacity:0;pointer-events:none;}
@keyframes tile-enter-fade{from{opacity:0;}}
.level-tile:hover,
.level-tile.selected{
color:var(--text);
}
#level-hover-rod{
position:absolute;
left:0;top:0;
width:20%;height:25%;
box-sizing:border-box;
border:2.5px solid var(--text);
pointer-events:none;
opacity:0;
transform:translate(0,0);
transition:transform 0.18s cubic-bezier(0.4,0,0.2,1),opacity 0.18s;
z-index:1;
}
#level-hover-rod.visible{opacity:1;}
body.going-to-game #level-hover-rod{
opacity:0 !important;
transform:translate(var(--rod-x,0),var(--rod-y,0)) scale(1.35) !important;
transition:opacity 0.9s,transform 0.9s cubic-bezier(0.22,0.61,0.36,1) !important;
}
/* Enter rod taps — the locked frame snaps 3× on sfxEnterGame's ascending taps
   (Eb4→Ab4→Eb5, at 0/0.08/0.16s), each brighter, just before the 散波 bloom.
   Only border-width + box-shadow animate — transform carries the inline
   position, so we must never touch it here. */
body.going-to-game #level-hover-rod.locked{
  animation:rod-taps 0.34s cubic-bezier(0.4,0,0.2,1) backwards;
}
@keyframes rod-taps{
  0%   {border-width:2.5px; box-shadow:0 0 0 0 rgba(233,69,96,0);}
  5%   {border-width:5px;   box-shadow:0 0 7px 1px rgba(233,69,96,0.42);}
  20%  {border-width:2.5px; box-shadow:0 0 0 0 rgba(233,69,96,0);}
  30%  {border-width:5.5px; box-shadow:0 0 9px 1px rgba(233,69,96,0.54);}
  44%  {border-width:2.5px; box-shadow:0 0 0 0 rgba(233,69,96,0);}
  55%  {border-width:6.5px; box-shadow:0 0 13px 2px rgba(233,69,96,0.7);}
  100% {border-width:2.5px; box-shadow:0 0 0 0 rgba(233,69,96,0);}
}
@media (prefers-reduced-motion:reduce){
  body.going-to-game #level-hover-rod.locked{animation:none;}
}
body.going-to-game #level-grid{
  opacity:0 !important;transition:opacity 0.5s 0.75s !important;
  background-image:none !important;
}
body.mode-game #level-grid{opacity:0 !important;transition:none !important;}
#level-grid{transition:opacity 0.25s;}
body.mode-game #level-hover-rod{opacity:0 !important;transform:translate(var(--rod-x,0),var(--rod-y,0)) scale(1.35) !important;transition:none !important;}
.level-tile{z-index:2;}
#page-indicator{
position:relative;
width:min(480px, 86vw);
height:18px;
margin-top:-0.2rem;
opacity:0;
transition:opacity 1s;
pointer-events:none;
touch-action:none;
}
body.mode-levels #page-indicator{opacity:1;transition:opacity 1s 3s;}
body.mode-levels #page-indicator .page-rod{pointer-events:auto;}
body.going-to-game #page-indicator{opacity:0 !important;transition:opacity 0.5s !important;pointer-events:none !important;}
body.mode-game #page-indicator{opacity:0 !important;transition:none !important;pointer-events:none !important;}
body.page-swapping #page-indicator,
body.page-swap-cooldown #page-indicator{pointer-events:none !important;}
#page-indicator .page-dot{
position:absolute;
top:50%;
width:2.6px;height:2.6px;
background:var(--text);
border-radius:50%;
transform:translate(-50%,-50%);
z-index:2;
pointer-events:none;
}
#page-indicator .page-rod{
position:absolute;
top:50%;
height:2px;
background:var(--text);
transform:translateY(-50%);
border-radius:1px;
z-index:1;
cursor:grab;
transition:left 0.45s cubic-bezier(0.4,0,0.2,1),
           width 0.45s cubic-bezier(0.4,0,0.2,1),
           height 0.18s;
}
#page-indicator .page-rod::before{
content:'';
position:absolute;
inset:-8px 0;
}
#page-indicator .page-rod:hover{height:3px;}
#page-indicator .page-rod.dragging{
cursor:grabbing;
transition:height 0.18s;
height:3px;
}
#page-indicator .rod-joint{
position:absolute;
top:50%;
width:5px;height:5px;
background:var(--text);
border-radius:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
#page-indicator .rod-joint-l{left:0;}
#page-indicator .rod-joint-r{left:100%;}
#page-range{
position:relative;
width:min(480px, 86vw);
height:1.4em;
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:0.72rem;
letter-spacing:0.18em;
color:var(--text);
font-variant-numeric:tabular-nums;
margin-top:-0.05rem;
opacity:0;
transition:opacity 1s;
pointer-events:none;
}
#page-range .page-range-text{
position:absolute;
top:0;
display:block;
text-align:center;
transition:opacity 0.08s;
}
body.mode-levels #page-range{opacity:0.55;transition:opacity 1s 3s;}
body.going-to-game #page-range{opacity:0 !important;transition:opacity 0.5s !important;}
body.mode-game #page-range{opacity:0 !important;transition:none !important;}
/* === Settings Button & Panel === */
#settings-btn{
position:absolute;
bottom:1.4rem;right:1.8rem;
width:2rem;height:2rem;
border:1.5px solid var(--text);
background:transparent;
color:var(--text);
font-size:1.15rem;
cursor:pointer;
display:flex;
align-items:center;justify-content:center;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
padding:0;
opacity:0;
pointer-events:none;
}
body.mode-home #settings-btn{opacity:1;pointer-events:auto;transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s,background 0.18s,color 0.18s;}
#settings-btn:hover{background:var(--text);color:var(--bg);}
#settings-panel{
position:absolute;
bottom:3.8rem;right:1.8rem;
background:rgba(245,245,240,0.96);
border:1px solid var(--border);
backdrop-filter:blur(5px);
padding:0.7rem 0.9rem;
display:flex;
flex-direction:column;
gap:0.5rem;
white-space:nowrap;
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(4px);
transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),
           transform 0.22s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.22s;
}
#settings-panel.visible{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateY(0);
transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),
           transform 0.22s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}

/* === Game-mode left-rail buttons (reset / undo / reset-view) === */
#reset-btn,#undo-btn,#reset-view-btn{
position:absolute;
left:1.2rem;
width:2rem;height:2rem;
border:1.5px solid var(--text);background:transparent;
color:var(--text);
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:1.1rem;letter-spacing:0;cursor:pointer;
display:flex;
align-items:center;justify-content:center;
z-index:30;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
padding:0;
opacity:0;
pointer-events:none;
}
#reset-btn      {top:3.55rem;}
#undo-btn       {top:6.05rem;font-size:1.05rem;}
#reset-view-btn {top:8.55rem;font-size:1rem;}
#reset-btn:hover,#undo-btn:hover,#reset-view-btn:hover{background:var(--text);color:var(--bg);}
body.mode-game #undo-btn:disabled{opacity:0.35;cursor:default;}
body.mode-game #undo-btn:disabled:hover{background:transparent;color:var(--text);}
body.mode-game #reset-btn,
body.mode-game #undo-btn,
body.mode-game #reset-view-btn{opacity:1;pointer-events:auto;transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s,background 0.18s,color 0.18s;}
/* === Help Button & Popup === */
#help-btn{
position:absolute;
top:1.05rem;right:1.8rem;
width:2rem;height:2rem;
border:1.5px solid var(--text);
background:transparent;
color:var(--text);
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;
font-size:1rem;letter-spacing:0;
cursor:pointer;
display:flex;
align-items:center;justify-content:center;
z-index:30;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
padding:0;
opacity:0;
pointer-events:none;
}
#help-btn:hover{background:var(--text);color:var(--bg);}
body.mode-game #help-btn{opacity:1;pointer-events:auto;transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s,background 0.18s,color 0.18s;}
/* === On level clear, hide every boundary button (back / reset / undo / reset-view / help) === */
body.mode-game.cleared #back-game,
body.mode-game.cleared #reset-btn,
body.mode-game.cleared #undo-btn,
body.mode-game.cleared #reset-view-btn,
body.mode-game.cleared #help-btn{
opacity:0;pointer-events:none;
transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
}
#help-popup{
position:absolute;
top:3.4rem;right:1.8rem;
background:rgba(245,245,240,0.96);
border:1px solid var(--border);
backdrop-filter:blur(5px);
padding:0.85rem 1.1rem;
font-size:0.76rem;
line-height:1.85;
color:var(--text);
letter-spacing:0.03em;
z-index:29;
display:block;
white-space:nowrap;
opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-4px);
transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),
           transform 0.22s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.22s;
}
#help-popup.visible{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateY(0);
transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),
           transform 0.22s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}
body:not(.mode-game) #help-popup{
opacity:0 !important;visibility:hidden !important;pointer-events:none !important;
}
/* === Settings panel rows === */
.settings-row{width:100%;text-align:center;padding:0.42rem 0.85rem;font-size:0.78rem;letter-spacing:0.08em;}
.audio-row{display:flex;justify-content:center;gap:1.4rem;padding:0.5rem 0.85rem;}
.lang-opt{opacity:0.38;}
.lang-opt.lang-active{opacity:1;}
.icon-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:0.25rem;display:inline-flex;align-items:center;justify-content:center;opacity:0.78;transition:opacity 0.15s;}
.icon-btn:hover{opacity:1;}
.icon-btn svg{display:block;}
/* === Confirm modal === */
#confirm-modal,#credits-modal{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
z-index:80;
background:rgba(245,245,240,0.80);
backdrop-filter:blur(4px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.3s;
}
#confirm-modal.visible,#credits-modal.visible{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}
#confirm-box,#credits-box{
transform:scale(0.96);
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#confirm-modal.visible #confirm-box,
#credits-modal.visible #credits-box{
transform:scale(1);
}
#confirm-box,#credits-box{
background:var(--bg);
border:1px solid var(--border);
padding:1.7rem 2.2rem;
display:flex;flex-direction:column;
align-items:center;gap:0.9rem;
min-width:260px;
}
#confirm-title,#credits-title{font-size:1.05rem;letter-spacing:0.06em;}
#confirm-body{font-size:0.78rem;color:var(--muted);letter-spacing:0.04em;text-align:center;}
#confirm-actions{display:flex;gap:0.8rem;margin-top:0.2rem;}
.credits-line{font-size:0.82rem;letter-spacing:0.04em;color:var(--text);}
.credits-muted{font-size:0.78rem;color:var(--muted);}
#credits-footer{margin-top:0.4rem;}

/* === Milestone Badge Popup === */
#badge-popup-icon{
width:120px;height:120px;margin-bottom:-0.3rem;
}
#badge-popup-icon svg{width:100%;height:100%;}
#badge-overlay.visible #badge-popup-icon{
animation:badge-icon-enter 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.15s backwards;
}
@keyframes badge-icon-enter{
0%{opacity:0;transform:scale(0.7);}
60%{transform:scale(1.06);}
100%{opacity:1;transform:scale(1);}
}
#badge-overlay.visible .overlay-title{
animation:overlay-title-settle 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.25s backwards;
}

/* === Badge Gallery Modal === */
#badge-gallery-modal{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
z-index:80;
background:rgba(245,245,240,0.80);
backdrop-filter:blur(4px);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.3s;
}
#badge-gallery-modal.visible{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}
#badge-gallery-box{
background:var(--bg);
border:1px solid var(--border);
padding:1.7rem 2.2rem;
display:flex;flex-direction:column;
align-items:center;gap:1.2rem;
min-width:300px;
transform:scale(0.96);
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#badge-gallery-modal.visible #badge-gallery-box{
transform:scale(1);
}
#badge-gallery-title{font-size:1.05rem;letter-spacing:0.06em;}
#badge-gallery-grid{
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:center;
max-width:calc(80px * 3 + 1rem * 2);
}
.badge-slot{
width:80px;
display:flex;flex-direction:column;
align-items:center;gap:0.3rem;
cursor:default;
}
.badge-slot svg{width:64px;height:64px;}
.badge-slot.locked svg{opacity:0.12;filter:grayscale(1);}
.badge-slot-label{
font-size:0.62rem;letter-spacing:0.04em;
color:var(--muted);text-align:center;
font-family:'Inter','Taipei Sans TC Beta',system-ui,sans-serif;font-variant-numeric:tabular-nums;
}
.badge-slot.earned .badge-slot-label{color:var(--text);}
#badge-gallery-footer{margin-top:0.4rem;}
.badge-slot.earned{cursor:pointer;}
.badge-slot.earned:hover svg{transform:scale(1.08);transition:transform 0.18s;}
.badge-hint svg{animation:badge-pulse 2s ease-in-out infinite;}
@keyframes badge-pulse{
0%,100%{transform:scale(1);opacity:1;}
50%{transform:scale(1.06);opacity:0.8;}
}
.badge-gallery-hint{
font-size:0.65rem;color:var(--muted);text-align:center;
margin-top:0.5rem;letter-spacing:0.03em;
font-family:'Inter',sans-serif;
opacity:1;transition:opacity 1.2s ease-out;
}
.badge-gallery-hint.fade-out{opacity:0;pointer-events:none;}

/* === Badges button (home screen, mirrored from settings-btn) === */
#badges-btn{
position:absolute;
bottom:1.4rem;left:1.8rem;
width:2rem;height:2rem;
border:1.5px solid var(--text);
background:transparent;
color:var(--text);
font-size:1.15rem;
cursor:pointer;
display:flex;
align-items:center;justify-content:center;
transition:opacity 1s cubic-bezier(0.4,0,0.2,1),background 0.18s,color 0.18s;
padding:0;
opacity:0;
pointer-events:none;
}
body.mode-home #badges-btn{opacity:1;pointer-events:auto;transition:opacity 1s cubic-bezier(0.4,0,0.2,1) 0.5s,background 0.18s,color 0.18s;}
#badges-btn:hover{background:var(--text);color:var(--bg);}

@media (prefers-reduced-motion:reduce){
#badge-overlay.visible .overlay-title,
#badge-overlay.visible #badge-popup-icon{animation:none;}
}

/* === Mobile / small-screen layout === */
@media (max-width: 600px), (pointer: coarse) {
  #hud{padding:1rem 1rem;}
  .overlay-title{font-size:1.8rem;}
  #back-game,#back-levels{top:0.7rem;left:0.7rem;}
  #help-btn{top:0.7rem;right:0.9rem;}
  #reset-btn      {top:3.6rem;left:0.7rem;}
  #undo-btn       {top:6.5rem;left:0.7rem;}
  #reset-view-btn {top:9.4rem;left:0.7rem;}
  #settings-btn{bottom:1rem;right:0.9rem;}
  #badges-btn{bottom:1rem;left:0.9rem;}
  #settings-panel{bottom:3.2rem;right:0.9rem;}
  #badge-gallery-box{padding:1.2rem 1.4rem;min-width:auto;}
  #badge-gallery-grid{gap:0.6rem;}
  .badge-slot{width:64px;}
  .badge-slot svg{width:52px;height:52px;}
  #help-popup{
    top:3rem;right:0.9rem;
    font-size:0.72rem;line-height:1.7;
    padding:0.7rem 0.9rem;
  }
  #goal-canvas{width:clamp(120px, 30vw, 160px);height:clamp(120px, 30vw, 160px);}

  .level-grid-wrap{width:min(360px, 82vw);}
  #page-indicator{width:min(360px, 82vw);}
  #page-range{width:min(360px, 82vw);}
  .levels-row{gap:0.3rem;}
  .page-arrow{font-size:1.5rem;width:2rem;height:2rem;}
  .level-tile{font-size:0.95rem;}
  #start-btn{font-size:2.8rem;}
  .btn{padding:0.6rem 1.6rem;}
  /* Bigger tap targets for icon buttons */
  #back-game,#back-levels,#reset-btn,#undo-btn,#reset-view-btn,#help-btn,#settings-btn,#badges-btn{
    width:2.75rem;height:2.75rem;font-size:1.1rem;
  }
  #reset-btn      {top:4.0rem !important;}
  #undo-btn       {top:7.2rem !important;}
  #reset-view-btn {top:10.4rem !important;}
}
/* Touch-target accessibility: extend hit area to 48px on touch devices */
@media (pointer: coarse) {
  #back-game::after,#back-levels::after,
  #reset-btn::after,#undo-btn::after,#reset-view-btn::after,
  #help-btn::after,#settings-btn::after,#badges-btn::after{
    content:'';position:absolute;
    top:50%;left:50%;width:48px;height:48px;
    transform:translate(-50%,-50%);
  }
}
/* Block interaction with buttons while interface is animating between modes.
   Onboarding overlays (lang-picker, tutorial) sit above everything and must
   stay interactive even during the initial mode-home transition. */
body.mode-transitioning button,
body.mode-transitioning .level-tile,
body.mode-transitioning .page-arrow,
body.mode-transitioning #goal-canvas,
body.going-to-game button,
body.going-to-game .level-tile,
body.going-to-game .page-arrow{
pointer-events:none !important;
}
#lang-picker.visible button{
pointer-events:auto !important;
}
@media (max-height: 560px) {
  #game-canvas-wrap{top:50%;}
  #goal-canvas{width:108px;height:108px;}
  #back-game,#back-levels,#reset-btn,#undo-btn,#reset-view-btn,#help-btn,#settings-btn,#badges-btn{
    width:2.75rem;height:2.75rem;font-size:1.1rem;
  }
  #reset-btn      {top:4.1rem;}
  #undo-btn       {top:7.15rem;}
  #reset-view-btn {top:10.2rem;}
}

/* === Safe-area insets (notch / punch-hole / gesture bar) === */
@supports (padding: env(safe-area-inset-top)) {
  #hud{padding-top:calc(1.4rem + env(safe-area-inset-top));}
  #back-game,#back-levels{top:calc(1.05rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left));}
  #help-btn{top:calc(1.05rem + env(safe-area-inset-top));right:calc(1.8rem + env(safe-area-inset-right));}
  #reset-btn{top:calc(3.55rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left));}
  #undo-btn{top:calc(6.05rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left));}
  #reset-view-btn{top:calc(8.55rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left));}
  #settings-btn{bottom:calc(1.4rem + env(safe-area-inset-bottom));right:calc(1.8rem + env(safe-area-inset-right));}
  #badges-btn{bottom:calc(1.4rem + env(safe-area-inset-bottom));left:calc(1.8rem + env(safe-area-inset-left));}
  #settings-panel{bottom:calc(3.8rem + env(safe-area-inset-bottom));right:calc(1.8rem + env(safe-area-inset-right));}
  #help-popup{top:calc(3.4rem + env(safe-area-inset-top));right:calc(1.8rem + env(safe-area-inset-right));}

}
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 600px), (pointer: coarse) {
    #back-game,#back-levels{top:calc(0.7rem + env(safe-area-inset-top));left:calc(0.7rem + env(safe-area-inset-left));}
    #help-btn{top:calc(0.7rem + env(safe-area-inset-top));right:calc(0.9rem + env(safe-area-inset-right));}
    #reset-btn{top:calc(4.0rem + env(safe-area-inset-top)) !important;left:calc(0.7rem + env(safe-area-inset-left));}
    #undo-btn{top:calc(7.2rem + env(safe-area-inset-top)) !important;left:calc(0.7rem + env(safe-area-inset-left));}
    #reset-view-btn{top:calc(10.4rem + env(safe-area-inset-top)) !important;left:calc(0.7rem + env(safe-area-inset-left));}
    #settings-btn{bottom:calc(1rem + env(safe-area-inset-bottom));right:calc(0.9rem + env(safe-area-inset-right));}
    #badges-btn{bottom:calc(1rem + env(safe-area-inset-bottom));left:calc(0.9rem + env(safe-area-inset-left));}
    #settings-panel{bottom:calc(3.2rem + env(safe-area-inset-bottom));right:calc(0.9rem + env(safe-area-inset-right));}
    #help-popup{top:calc(3rem + env(safe-area-inset-top));right:calc(0.9rem + env(safe-area-inset-right));}

  }
  @media (max-height: 560px) {
    #reset-btn      {top:calc(4.1rem + env(safe-area-inset-top));}
    #undo-btn       {top:calc(7.15rem + env(safe-area-inset-top));}
    #reset-view-btn {top:calc(10.2rem + env(safe-area-inset-top));}
  }
}

/* === Language Picker (first launch) === */
#lang-picker{
position:fixed;inset:0;
display:flex;align-items:center;justify-content:center;
z-index:200;
background:var(--bg);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.4s;
}
#lang-picker.visible{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}
#lang-picker-box{
display:flex;flex-direction:column;
align-items:center;
}
.lang-picker-title{
margin-bottom:2.4rem;
}
#lang-picker-actions{
display:flex;gap:1.2rem;
}
.lang-choice{
min-width:120px;
padding:0.85rem 1.8rem;
font-size:0.88rem;
letter-spacing:0.1em;
border:1.5px solid var(--text);
background:transparent;
color:var(--text);
cursor:pointer;
transition:background 0.18s,color 0.18s;
}
.lang-choice:hover{background:var(--text);color:var(--bg);}

/* === In-game tutorial hint (first launch) === */
#tut-hint{
position:fixed;
bottom:clamp(1.2rem, 5vh, 2.4rem);
left:50%;transform:translateX(-50%);
padding:0.65rem 1.4rem;
border-radius:2rem;
background:var(--text);
color:var(--bg);
font-size:0.82rem;
letter-spacing:0.06em;
text-align:center;
white-space:nowrap;
z-index:60;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),
           visibility 0s linear 0.4s;
}
#tut-hint.visible{
opacity:1;visibility:visible;
transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),
           visibility 0s;
}
/* Pulse goal preview during tutorial step 2 */
#goal-wrap.tut-pulse #goal-canvas{
animation:tut-goal-pulse 1.6s ease-in-out infinite;
}
@keyframes tut-goal-pulse{
0%,100%{box-shadow:0 0 0 0 var(--text);opacity:0.7;}
50%{box-shadow:0 0 0 6px transparent;opacity:1;}
}
/* Hide non-essential buttons during tutorial for clean UX */
body.tutorial-active #reset-btn,
body.tutorial-active #undo-btn,
body.tutorial-active #reset-view-btn,
body.tutorial-active #help-btn,
body.tutorial-active #back-game{
opacity:0 !important;pointer-events:none !important;
}

/* === Landscape layout (phone held sideways) === */
@media (orientation: landscape) and (max-height: 500px) {
  /* ── Home: compact title ── */
  #screen-home .overlay-title{font-size:1.6rem;}
  #home-progress{font-size:0.68rem;}
  #start-btn{font-size:2rem;}

  /* ── Level select: hide title, compact grid ── */
  #screen-levels .overlay-title{display:none;}
  #screen-levels{gap:0.2rem;justify-content:center;padding:0.3rem 0;}
  #levels-progress{margin-top:0;font-size:0.62rem;}
  .level-grid-wrap{width:min(340px, 62vw);}
  #page-indicator{width:min(340px, 62vw);height:14px;margin-top:0;}
  #page-range{width:min(340px, 62vw);font-size:0.62rem;}
  .level-tile .tile-num{font-size:1.4rem;}
  .page-arrow{font-size:1.3rem;}
  #back-levels{top:calc(0.4rem + env(safe-area-inset-top, 0px));}

  /* ── Game: left-right split ── */
  /* Pin goal-wrap to the same left-column position across ALL modes so
     it never jumps when transitioning between game ↔ levels/home. */
  #goal-wrap{
    left:env(safe-area-inset-left, 0px) !important;
    top:50% !important;
    transform:translateY(-50%);
    margin-left:3.8rem;
  }
  #goal-canvas{width:100px;height:100px;}
  /* 3D canvas → shift right + vertically center */
  #game-canvas-wrap{
    left:58%;
    top:50%;
  }
  /* HUD → center on right half */
  #hud{
    padding:0.6rem 1rem;
  }
  #level-tag{font-size:0.6rem;}
  #game-timer{font-size:0.6rem;}
  /* Left-rail buttons: vertical stack below back button, compressed for short screens */
  #back-game{top:calc(0.5rem + env(safe-area-inset-top, 0px));left:calc(0.7rem + env(safe-area-inset-left, 0px));width:2.2rem;height:2.2rem;font-size:1rem;}
  #reset-btn,#undo-btn,#reset-view-btn{
    width:2.2rem;height:2.2rem;font-size:0.95rem;
    left:calc(0.7rem + env(safe-area-inset-left, 0px));
  }
  #reset-btn      {top:calc(3.1rem + env(safe-area-inset-top, 0px)) !important;}
  #undo-btn       {top:calc(5.7rem + env(safe-area-inset-top, 0px)) !important;}
  #reset-view-btn {top:calc(8.3rem + env(safe-area-inset-top, 0px)) !important;}
  /* Help → smaller gap from top */
  #help-btn{top:calc(0.5rem + env(safe-area-inset-top, 0px));}
  #help-popup{top:calc(2.8rem + env(safe-area-inset-top, 0px));}
  /* Almost hint under goal */
  #almost-hint{font-size:0.6rem;}
}