/* Tandje 3D - overlay UI. The 3D canvas fills the window; #stage is a fixed
   design canvas (1920 wide in landscape, 1080 wide in portrait) scaled to fit. */
:root {
  --ink: #2E3A4F;
  --ink2: #5B6678;
  --ivory: #F6F1E7;
  --gold: #A8884A;
  --mint: #4FD1B2;
  --mintDeep: #1E9C7F;
  --coral: #FF8A73;
  --coralDeep: #F06A52;
  --sky: #5DB6EE;
  --skyDeep: #2F86C9;
  --font: "Nunito", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFF6EA; color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 42%, rgba(255,250,240,0) 55%, rgba(150,105,70,.10) 100%); }
#veil { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, #FFFBF4 0%, #FFF1E0 100%); }

#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; }
.screen { position: absolute; inset: 0; display: none; }
.screen.show { display: block; }

/* ---------- start ---------- */
.start-panel { position: absolute; right: 110px; top: 0; bottom: 0; width: 760px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 26px; animation: fadeIn .8s ease both .2s; }
.start-panel .logo { width: 250px; align-self: flex-start; margin-bottom: 6px; }
.start-panel h1 { margin: 0 0 18px; font-size: 104px; line-height: .98; font-weight: 900; letter-spacing: -1px; }
.start-panel h1 span { display: block; font-size: 52px; font-weight: 800; color: var(--mintDeep); margin-top: 14px; letter-spacing: 0; }
.big-btn { display: flex; align-items: center; gap: 26px; padding: 26px 40px 26px 28px; border-radius: 999px; color: #fff; text-align: left; box-shadow: 0 14px 34px rgba(46,58,79,.16), inset 0 -6px 0 rgba(0,0,0,.08); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.big-btn svg { width: 92px; height: 92px; flex: none; }
.big-btn b { display: block; font-size: 52px; font-weight: 900; line-height: 1.05; }
.big-btn small { display: block; font-size: 28px; font-weight: 700; opacity: .92; margin-top: 4px; }
.big-btn.film { background: linear-gradient(180deg, #FF9C87, var(--coralDeep)); }
.big-btn.brush { background: linear-gradient(180deg, #5EDDBF, #20A98A); }
.big-btn.ghost { background: #fff; color: var(--ink); }
.big-btn:hover, .big-btn:focus-visible { transform: translateY(-3px) scale(1.015); outline: none; box-shadow: 0 18px 40px rgba(46,58,79,.2), inset 0 -6px 0 rgba(0,0,0,.08); }
.big-btn:active { transform: scale(.98); }
.big-btn.small { padding: 22px 40px; font-size: 34px; font-weight: 900; justify-content: center; }
.toggles { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.toggle { display: inline-flex; align-items: center; gap: 14px; padding: 14px 24px 14px 16px; background: rgba(255,255,255,.85); border-radius: 999px; font-size: 26px; font-weight: 800; color: var(--ink2); box-shadow: 0 6px 18px rgba(46,58,79,.08); }
.toggle i { width: 56px; height: 32px; border-radius: 99px; background: #D9DEE6; position: relative; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.toggle[aria-pressed="true"] { color: var(--ink); }
.toggle[aria-pressed="true"] i { background: var(--mint); }
.toggle[aria-pressed="true"] i::after { transform: translateX(24px); }

/* ---------- film ---------- */
#film-progress { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: rgba(46,58,79,.06); }
#film-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--sky)); border-radius: 0 4px 4px 0; }
.corner-logo { position: absolute; left: 56px; top: 44px; width: 210px; opacity: 0; transition: opacity .8s; }
#screen-film.with-logo .corner-logo { opacity: 1; }
.cap { position: absolute; left: 80px; right: 80px; bottom: 150px; text-align: center; pointer-events: none; }
.cap h2 { margin: 0; font-size: 82px; line-height: 1.04; font-weight: 900; letter-spacing: -.5px; color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 0 28px rgba(255,248,238,.9); }
.cap p { margin: 16px auto 0; max-width: 1500px; font-size: 36px; line-height: 1.3; font-weight: 700; color: var(--ink2); text-shadow: 0 0 18px rgba(255,248,238,.95), 0 0 6px rgba(255,248,238,.9); }
.cap.anim h2 { animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) both .25s; }
.cap.anim p { animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) both .5s; }
.cap.night h2 { color: #fff; text-shadow: 0 3px 18px rgba(30,30,80,.45); }
.cap.night p { color: #F1EEFF; text-shadow: 0 2px 12px rgba(30,30,80,.5); }

#order-panel { position: absolute; right: 120px; top: 170px; width: 520px; display: none; flex-direction: column; gap: 22px; }
#order-panel.show { display: flex; animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) both; }
#order-panel p { margin: 0; font-size: 36px; font-weight: 800; color: var(--ink2); }
#order-panel .pills { display: flex; gap: 14px; }
#order-panel .pill { padding: 10px 34px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: 34px; font-weight: 900; color: #9AA3B2; transition: all .35s; }
#order-panel .pill.on { background: var(--skyDeep); color: #fff; transform: scale(1.06); }
#order-panel .chip { display: flex; align-items: center; gap: 24px; padding: 16px 36px 16px 18px; border-radius: 99px; background: rgba(255,255,255,.82); font-size: 50px; font-weight: 900; color: #9AA3B2; box-shadow: 0 8px 22px rgba(46,58,79,.08); transition: all .35s cubic-bezier(.34,1.56,.64,1); }
#order-panel .chip i { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #E6EAF0; color: #fff; font-style: normal; font-size: 44px; transition: background .3s; }
#order-panel .chip.on { color: var(--ink); background: #fff; transform: scale(1.06) translateX(-10px); box-shadow: 0 0 0 6px var(--mint), 0 14px 30px rgba(46,58,79,.14); }
#order-panel .chip.on i, #order-panel .chip.done i { background: var(--mint); }
#order-panel .chip.done { color: var(--ink2); }

#summary-badges { position: absolute; left: 0; right: 0; top: 70px; display: none; justify-content: center; gap: 34px; }
#summary-badges.show { display: flex; }
#summary-badges .badge { width: 250px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: popIn .6s cubic-bezier(.34,1.56,.64,1) both; }
#summary-badges .badge:nth-child(2) { animation-delay: .25s; } #summary-badges .badge:nth-child(3) { animation-delay: .5s; }
#summary-badges .badge:nth-child(4) { animation-delay: .75s; } #summary-badges .badge:nth-child(5) { animation-delay: 1s; }
#summary-badges .ic { width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 50px; font-weight: 900; box-shadow: 0 0 0 10px #fff, 0 14px 30px rgba(46,58,79,.14); }
#summary-badges .ic svg { width: 76px; height: 76px; }
#summary-badges .coral { background: #FFE0D8; color: var(--coralDeep); } #summary-badges .mint { background: #D3F6EC; }
#summary-badges .sky { background: #DCEFFC; color: var(--skyDeep); } #summary-badges .sky2 { background: #E6F3FB; } #summary-badges .pink { background: #FFE3E7; }
#summary-badges .badge span { font-size: 27px; font-weight: 800; text-align: center; line-height: 1.15; color: var(--ink); margin-top: 8px; }

.endcard { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 22px; padding: 34px 44px; background: rgba(255,255,255,.92); border-radius: 44px; box-shadow: 0 20px 50px rgba(46,58,79,.18); }
.endcard.show { display: flex; animation: fadeUp .6s both; }
.endcard h3 { margin: 0; font-size: 46px; font-weight: 900; }
.end-btns { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }

/* ---------- labels anchored to 3D ---------- */
#labels { position: absolute; inset: 0; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s; white-space: nowrap; will-change: transform; }
.lbl.on { opacity: 1; }
.lbl > * { display: block; }
.lbl-sky, .lbl-night { text-align: center; transform-origin: 50% 0; }
.lbl-sky b, .lbl-night b { font-size: 50px; font-weight: 900; }
.lbl-sky span, .lbl-night span { font-size: 30px; font-weight: 800; }
.lbl-sky { color: #8A5A10; } .lbl-sky b { color: #C27A12; }
.lbl-night b { color: #4A4BB0; } .lbl-night span { color: #4F4A8C; }
.lbl-card { padding: 22px 34px; background: rgba(255,255,255,.9); border-radius: 34px; box-shadow: 0 12px 30px rgba(46,58,79,.14); }
.lbl-card b { font-size: 50px; font-weight: 900; line-height: 1.05; }
.lbl-card span { font-size: 30px; font-weight: 700; color: var(--ink2); margin: 4px 0 12px; }
.lbl-card em { display: inline-block; font-style: normal; font-size: 32px; font-weight: 900; color: #fff; padding: 8px 22px; border-radius: 99px; }
em.coral { background: var(--coral); } em.sky { background: var(--skyDeep); }
.lbl-chip { padding: 12px 28px; border-radius: 99px; font-size: 36px; font-weight: 900; color: #fff; box-shadow: 0 10px 24px rgba(46,58,79,.16); display: flex; align-items: center; gap: 14px; }
.lbl-chip svg { width: 70px; height: 26px; display: inline-block; }
.lbl-chip.coral { background: var(--coral); } .lbl-chip.sky { background: var(--skyDeep); } .lbl-chip.mint { background: var(--mintDeep); }
.lbl-ptoe span { font-size: 92px; font-weight: 900; color: var(--mintDeep); text-shadow: 0 4px 0 #fff, 0 0 20px #fff; transform-origin: 50% 50%; }
.lbl-ptoe.on span { animation: ptoe .9s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- brush-along ---------- */
.brush-panel { position: absolute; right: 70px; top: 70px; bottom: 150px; width: 640px; display: flex; flex-direction: column; justify-content: space-between; }
.bp-head { background: rgba(255,255,255,.9); border-radius: 40px; padding: 30px 40px 34px; box-shadow: 0 14px 34px rgba(46,58,79,.12); }
.bp-step { font-size: 30px; font-weight: 800; color: var(--ink2); }
.bp-zone { display: flex; align-items: center; gap: 22px; margin-top: 12px; }
.jaw-pill { padding: 8px 26px; border-radius: 99px; background: var(--skyDeep); color: #fff; font-size: 36px; font-weight: 900; }
.jaw-pill.upper { background: #7C6BD6; }
#bp-title { font-size: 72px; font-weight: 900; line-height: 1; }
#bp-title.bump { animation: bump .6s cubic-bezier(.34,1.56,.64,1); }
.bp-hint { margin-top: 16px; font-size: 28px; font-weight: 700; color: var(--ink2); line-height: 1.3; }
.bp-mid { position: relative; height: 420px; }
.bp-ring { position: absolute; left: 0; top: 30px; width: 340px; height: 340px; }
.bp-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 22px rgba(46,58,79,.14)); }
#bp-arc { transition: stroke-dashoffset .25s linear; }
.bp-sec { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bp-sec b { font-size: 132px; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; }
.bp-sec span { font-size: 26px; font-weight: 800; color: var(--ink2); }
.bp-bubble { position: absolute; right: 10px; top: 0; padding: 16px 28px; background: #fff; border-radius: 30px; font-size: 34px; font-weight: 900; color: var(--mintDeep); box-shadow: 0 10px 24px rgba(46,58,79,.12); }
.bp-bubble::after { content: ""; position: absolute; left: 50%; bottom: -16px; border: 10px solid transparent; border-top: 12px solid #fff; transform: translateX(-50%); }
.bp-bubble.bump { animation: bump .6s cubic-bezier(.34,1.56,.64,1); }
.bp-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.88); border-radius: 36px; padding: 22px 32px; box-shadow: 0 14px 34px rgba(46,58,79,.1); }
.bp-dots { display: flex; gap: 26px; }
.bp-dots .grp { display: flex; align-items: center; gap: 10px; }
.bp-dots .grp span { font-size: 24px; font-weight: 800; color: var(--ink2); margin-right: 4px; }
.bp-dots i { width: 34px; height: 34px; border-radius: 50%; background: #E3E8EF; transition: all .35s; }
.bp-dots i.done { background: var(--mint); }
.bp-dots i.on { background: #fff; box-shadow: inset 0 0 0 7px var(--mint); transform: scale(1.2); }
.bp-total { font-size: 28px; font-weight: 800; color: var(--ink2); white-space: nowrap; }
.bp-total b { font-size: 44px; color: var(--ink); font-variant-numeric: tabular-nums; }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.overlay.show { display: flex; }
.overlay .card { background: rgba(255,255,255,.94); border-radius: 50px; padding: 50px 70px; text-align: center; box-shadow: 0 24px 60px rgba(46,58,79,.2); animation: popIn .6s cubic-bezier(.34,1.56,.64,1) both; max-width: 1100px; }
.overlay h3 { margin: 0; font-size: 80px; font-weight: 900; line-height: 1.05; }
.overlay p { margin: 14px 0 0; font-size: 36px; font-weight: 700; color: var(--ink2); }
.overlay p.big { font-size: 56px; font-weight: 900; color: var(--mintDeep); margin-top: 22px; }
.overlay .count { font-size: 200px; font-weight: 900; line-height: 1; color: var(--coral); height: 210px; margin-top: 10px; }
.overlay .count.bump { animation: bump .5s cubic-bezier(.34,1.56,.64,1); }
#brush-intro { right: 760px; align-items: flex-end; padding-bottom: 160px; }
#brush-intro .card { padding: 26px 48px 20px; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 40px; text-align: left; }
#brush-intro h3 { font-size: 56px; }
#brush-intro p { font-size: 30px; margin-top: 6px; }
#brush-intro .count { grid-row: 1 / span 2; grid-column: 2; font-size: 150px; height: 160px; margin: 0; min-width: 100px; text-align: center; }
#stage.portrait #brush-intro { right: 0; bottom: 820px; }
body.mode-done .brush-panel { display: none; }
#brush-done { align-items: center; justify-content: flex-end; padding-right: 110px; }
#stage.portrait #brush-done { align-items: flex-end; justify-content: center; padding: 0 0 150px; }
#brush-done .card { padding: 38px 64px; }
#brush-done .logo { width: 200px; margin-bottom: 12px; }
#brush-done .end-btns { margin-top: 30px; }

/* ---------- pause + controls ---------- */
#paused { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; }
#paused.show { display: flex; }
#paused svg { width: 180px; height: 180px; filter: drop-shadow(0 16px 30px rgba(46,58,79,.25)); }
#paused span { font-size: 40px; font-weight: 900; color: var(--ink); background: rgba(255,255,255,.9); padding: 8px 28px; border-radius: 99px; }

#controls { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: none; gap: 12px; padding: 12px; background: rgba(255,255,255,.92); border-radius: 99px; box-shadow: 0 12px 34px rgba(46,58,79,.16); transition: opacity .5s, transform .5s; }
#controls.show { display: flex; }
#controls button { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .2s, transform .2s; }
#controls button:hover, #controls button:focus-visible { background: #EEF2F6; outline: none; }
#controls button svg { width: 42px; height: 42px; fill: currentColor; }
#controls button.main { background: var(--mint); color: #fff; }
#controls button[aria-pressed="true"] { background: #DDF5EE; color: var(--mintDeep); }
#controls .i-play, #controls .i-off { display: none; }
body.paused #controls .i-play { display: block; } body.paused #controls .i-pause { display: none; }
body:not(.sound) #controls .i-off { display: block; } body:not(.sound) #controls .i-on { display: none; }
body.mode-brush #c-prev, body.mode-brush #c-next, body.mode-brush #c-loop { display: none; }
body.idle, body.idle * { cursor: none !important; }
body.idle #controls { opacity: 0; transform: translateX(-50%) translateY(30px); pointer-events: none; }
body.noui #controls { display: none !important; }

/* ---------- portrait ---------- */
#stage.portrait .start-panel { right: 70px; left: 70px; width: auto; top: auto; bottom: 110px; justify-content: flex-end; gap: 20px; }
#stage.portrait .start-panel .logo { width: 220px; }
#stage.portrait .start-panel h1 { font-size: 92px; }
#stage.portrait .cap { left: 50px; right: 50px; bottom: 150px; }
#stage.portrait .cap h2 { font-size: 70px; }
#stage.portrait .cap p { font-size: 34px; }
#stage.portrait #order-panel { left: 60px; right: 60px; width: auto; top: auto; bottom: 470px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
#stage.portrait #order-panel p { width: 100%; text-align: center; font-size: 32px; }
#stage.portrait #order-panel .pills { width: 100%; justify-content: center; }
#stage.portrait #order-panel .chip { font-size: 34px; padding: 10px 24px 10px 10px; gap: 12px; }
#stage.portrait #order-panel .chip i { width: 56px; height: 56px; font-size: 30px; }
#stage.portrait #order-panel .chip.on { transform: scale(1.05); }
#stage.portrait #summary-badges { flex-wrap: wrap; gap: 20px 26px; padding: 0 40px; top: 60px; }
#stage.portrait #summary-badges .badge { width: 280px; }
#stage.portrait .brush-panel { left: 50px; right: 50px; top: auto; bottom: 140px; width: auto; height: 640px; }
#stage.portrait .bp-mid { height: 300px; }
#stage.portrait .bp-ring { width: 280px; height: 280px; top: 10px; }
#stage.portrait .bp-sec b { font-size: 110px; }
#stage.portrait .bp-bubble { right: 40px; top: 20px; }
#stage.portrait .endcard { width: 90%; }

/* ---------- fallback ---------- */
#fallback { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, #E6F4FB, #FFF6EA); overflow: auto; }
#fallback[hidden] { display: none; }
.fb-card { max-width: 900px; background: #fff; border-radius: 32px; padding: 36px 44px; box-shadow: 0 20px 50px rgba(46,58,79,.14); }
.fb-card .logo { width: 180px; }
.fb-card h1 { font-size: 44px; margin: 14px 0 18px; }
.fb-card ol { margin: 0; padding-left: 1.2em; font-size: 24px; line-height: 1.45; }
.fb-card li { margin-bottom: 10px; } .fb-card li b { display: block; color: var(--mintDeep); }
.fb-note { color: var(--ink2); font-size: 18px; margin-top: 18px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes ptoe { 0% { transform: scale(.3) rotate(-14deg); } 60% { transform: scale(1.12) rotate(-6deg); } 100% { transform: scale(1) rotate(-8deg); } }
.start-panel { transform-origin: 50% 50%; }
html.rm .start-panel, html.rm .cap.anim h2, html.rm .cap.anim p, html.rm .overlay .card, html.rm #summary-badges .badge, html.rm #order-panel.show { animation-duration: .01s; }
html.rm .lbl-ptoe.on span, html.rm #bp-title.bump, html.rm .bp-bubble.bump, html.rm .overlay .count.bump { animation: none; }
@media (prefers-reduced-motion: reduce) { .big-btn, .toggle i::after { transition: none; } }