/* ============ base ============ */
:root { --ink: #141414; --red: #e63946; --yellow: #ffd23f; --night: #2b2d6e; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0d0f1a; color: var(--ink);
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
body[data-scene="office"], body[data-scene="epilogue"] { background: #1c1e2e; }
body[data-scene="race"] { background: #4f525d; }
body[data-scene="dinner"] { background: #3b2422; }
body[data-scene="rooftop"] { background: #090d2a; }
button { font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

#stage { position: fixed; left: 50%; top: 50%; width: 820px; height: 400px; transform-origin: center; overflow: hidden; background: #111; }
#scene { position: absolute; inset: 0; }
#scene > div { position: absolute; inset: 0; overflow: hidden; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
#overlay { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#overlay > * { pointer-events: auto; }
.panel-layer { position: absolute; inset: 0; z-index: 65; }

#hud { position: absolute; left: 8px; top: 8px; z-index: 70; display: flex; align-items: center; gap: 6px; }
.hud-btn { width: 32px; height: 32px; border-radius: 10px; border: 2px solid #111; background: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1; box-shadow: 0 2px 0 #111; padding: 0; }
#conn { width: 9px; height: 9px; border-radius: 50%; background: #aaa; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
#conn.ok { background: #2ecc71; }
#conn.bad { background: var(--red); animation: blinkdot 1s infinite; }

/* ============ buttons ============ */
.btn { font-weight: 800; border: 3px solid #111; border-radius: 14px; background: #fff; color: #111; padding: 8px 14px; font-size: 15px; box-shadow: 0 4px 0 #111; transition: translate .08s, box-shadow .08s; white-space: nowrap; }
.btn:active { translate: 0 3px; box-shadow: 0 1px 0 #111; }
.btn-big { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 22px; padding: 9px 26px; border-radius: 18px; letter-spacing: .5px; }
.btn-sm { font-size: 13px; padding: 6px 11px; border-radius: 11px; }
.btn-xs { font-size: 11px; padding: 3px 8px; border-radius: 9px; border-width: 2px; box-shadow: 0 2px 0 #111; }
.btn-red { background: var(--red); color: #fff; }
.btn-yellow { background: var(--yellow); }
.btn-night { background: var(--night); color: #fff; }
.btn-danger { background: #ffe3e3; color: #c1121f; }
.btn.on { background: var(--yellow); }

/* ============ chibi ============ */
.chibi-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chibi-svg[overflow="hidden"] { overflow: hidden; }
.chibi-svg .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.3s infinite; }
[data-who="giap"] .eyes { animation-duration: 3.7s; }
[data-who="akshay"] .eyes { animation-duration: 5.2s; }
.tearflow { animation: tearflow .45s linear infinite; }
.sweat { animation: sweat 1.1s ease-in-out infinite; }
.sparkles { animation: twinkle .8s ease-in-out infinite alternate; }
.pose-type .arm-l { animation: typeL .2s infinite alternate; }
.pose-type .arm-r { animation: typeR .2s .1s infinite alternate; }
.pose-type .head { transform-origin: 60px 92px; animation: nod 1.8s ease-in-out infinite; }
.pose-cheer .arm-l { animation: cheerL .45s infinite alternate; }
.pose-cheer .arm-r { animation: cheerR .45s infinite alternate; }
.pose-wave .arm-r { animation: waveR .4s infinite alternate; }
.pose-run .leg-l { animation: legs .3s infinite alternate; }
.pose-run .leg-r { animation: legs .3s infinite alternate-reverse; }
.pose-run .arm-l { animation: runL .3s infinite alternate; }
.pose-run .arm-r { animation: runR .3s infinite alternate; }
.boing .chibi-svg { animation: boing .5s cubic-bezier(.3, 1.6, .5, 1); }
.bonked .chibi-svg { animation: bonk .5s ease-out; }
.bonk-fx { position: absolute; left: 30%; top: 8%; font-size: 34px; pointer-events: none; z-index: 9; animation: bonkfx .9s forwards; }
.entering [data-who] .chibi-svg { animation: chibiDrop .75s .25s cubic-bezier(.3, 1.35, .5, 1) both; }
.leaving [data-who] .chibi-svg { animation: fall .75s cubic-bezier(.5, -.6, .9, .6) forwards !important; }

@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
@keyframes tearflow { to { stroke-dashoffset: -12; } }
@keyframes sweat { 50% { transform: translateY(3px); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes typeL { from { transform: rotate(-32deg); } to { transform: rotate(-24deg); } }
@keyframes typeR { from { transform: rotate(32deg); } to { transform: rotate(24deg); } }
@keyframes nod { 50% { transform: rotate(2deg) translateY(1px); } }
@keyframes cheerL { from { transform: rotate(120deg); } to { transform: rotate(142deg); } }
@keyframes cheerR { from { transform: rotate(-120deg); } to { transform: rotate(-142deg); } }
@keyframes waveR { from { transform: rotate(-128deg); } to { transform: rotate(-100deg); } }
@keyframes legs { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
@keyframes runL { from { transform: rotate(45deg); } to { transform: rotate(-25deg); } }
@keyframes runR { from { transform: rotate(25deg); } to { transform: rotate(-45deg); } }
@keyframes boing { 40% { transform: translateY(-22px) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes bonk { 20% { transform: rotate(-10deg) scale(.94); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } }
@keyframes bonkfx { from { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.3); opacity: 1; } to { transform: translateY(-30px) scale(1); opacity: 0; } }
@keyframes chibiDrop { from { transform: translateY(-460px); } to { transform: none; } }
@keyframes fall { 30% { transform: translateY(-34px) rotate(-6deg); } 100% { transform: translateY(520px) rotate(28deg); } }

/* ============ shared keyframes ============ */
@keyframes bob { 50% { translate: 0 -4px; } }
@keyframes pulse { 50% { scale: 1.06; } }
@keyframes pop { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); } to { transform: scale(1); opacity: 1; } }
@keyframes dropIn { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes punch { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 25% { translate: -6px 2px; } 50% { translate: 5px -3px; } 75% { translate: -3px 2px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blinkdot { 50% { opacity: .3; } }
@keyframes hide { to { opacity: 0; } }
@keyframes show { to { opacity: 1; } }

/* ============ transitions & title cards ============ */
.wipe { position: absolute; inset: 0; background: repeating-conic-gradient(#11624a 0 25%, #121212 0 50%) 0 0 / 48px 48px; animation: wipeIn .45s cubic-bezier(.7, 0, .3, 1) both; }
.wipe.instant { animation: none; }
.wipe.out, .title-card.out { animation: wipeOut .5s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipeOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.title-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #222, #050505 75%); animation: fadeIn .3s both; }
.tc-slash { position: absolute; left: -10%; right: -10%; top: 44%; height: 84px; background: var(--red); transform: rotate(-5deg); animation: slash .5s .1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes slash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tc-jp { position: absolute; right: 56px; top: 34px; writing-mode: vertical-rl; font-family: "Dela Gothic One", serif; font-size: 34px; color: var(--yellow); animation: fadeUp .5s .35s both; }
.tc-no { position: relative; font-family: "Dela Gothic One", system-ui; font-size: 18px; letter-spacing: 6px; color: var(--yellow); animation: fadeUp .4s .15s both; }
.tc-title { position: relative; font-family: "Dela Gothic One", system-ui; font-size: 80px; line-height: 1.05; -webkit-text-stroke: 2px #111; text-shadow: 5px 5px 0 #111; animation: punch .5s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
.tc-sub { position: relative; margin-top: 10px; font-weight: 800; font-size: 18px; opacity: .92; animation: fadeUp .4s .6s both; }

/* ============ splash ============ */
.splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; background: #0d0f1a; }
.splash-bg { position: absolute; left: -50%; top: -150%; width: 200%; height: 400%; background: repeating-conic-gradient(from 0deg at 50% 50%, #1d2245 0 6deg, #10142b 6deg 12deg); animation: spin 60s linear infinite; }
.splash-faces { position: relative; display: flex; gap: 12px; margin-bottom: 8px; }
.sf { width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 3px solid #111; overflow: hidden; box-shadow: 0 4px 0 #e63946; animation: bob 2.4s ease-in-out infinite; }
.sf-jason { animation-delay: .3s; } .sf-akshay { animation-delay: .6s; }
.sf svg { width: 100%; height: 100%; }
.splash-kicker { position: relative; font-size: 12px; letter-spacing: 3px; opacity: .75; text-transform: uppercase; font-weight: 800; }
.splash h1 { position: relative; margin: 2px 0 0; font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 70px; line-height: .95; text-align: center; text-shadow: 5px 5px 0 var(--red); }
.splash h1 span { display: block; font-size: 24px; color: var(--yellow); letter-spacing: 7px; text-shadow: none; margin-top: 8px; }
#start { position: relative; margin-top: 16px; animation: pulse 1.3s infinite; }
.splash-hint { position: relative; font-size: 11px; opacity: .55; margin-top: 12px; font-weight: 800; }

/* ============ rotate prompt ============ */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #0d0f1a; color: #fff; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 800; }
body.portrait #rotate { display: flex; }
#rotate p { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 24px; margin: 10px 0 4px; }
#rotate small { opacity: .6; }
.rotate-chibi { width: 150px; }
.rotate-phone { font-size: 44px; animation: rot 1.6s ease-in-out infinite; order: 2; margin-top: 8px; }
#rotate p, #rotate small { order: 3; }
@keyframes rot { 40%, 70% { transform: rotate(-90deg); } }

/* ============ toasts & menu ============ */
#toasts { position: absolute; left: 0; right: 0; top: 10px; z-index: 80; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #111; color: #fff; padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; border: 2px solid #fff; animation: dropIn .25s both; transition: opacity .35s, transform .35s; }
.toast.out { opacity: 0; transform: translateY(-8px); }

#menu { position: absolute; inset: 0; z-index: 75; display: none; background: rgba(0, 0, 0, .5); align-items: center; justify-content: center; }
#menu.open { display: flex; }
.menu-card { position: relative; width: 640px; background: #fffdf6; border: 3px solid #111; border-radius: 18px; box-shadow: 0 6px 0 #111; padding: 14px 18px 12px; animation: dropIn .2s both; }
.menu-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.menu-row > b { width: 76px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; background: #ffe9a8; border: 2px solid #111; border-radius: 999px; padding: 2px 12px 2px 3px; }
.chip svg { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.menu-tip { font-size: 11px; opacity: .65; }
.menu-close { position: absolute; right: 10px; top: 10px; }

.who { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
.who-card { background: #fffdf6; border: 3px solid #111; border-radius: 18px; box-shadow: 0 6px 0 #111; padding: 14px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: dropIn .25s both; }
.who-card > b { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 24px; }
.who-card > small { font-weight: 800; opacity: .6; }
.who-row { display: flex; gap: 14px; margin: 10px 0; }
.who-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; font-weight: 800; font-size: 15px; }
.who-btn svg { width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 3px solid #111; box-shadow: 0 4px 0 #111; }

/* ============ EPISODE 1: office ============ */
.office { background: #1c1e2e; }
.opanel { position: absolute; top: 10px; width: 258px; height: 300px; border: 4px solid #111; border-radius: 14px; overflow: hidden; background: #ddd; transition: box-shadow .3s; }
.opanel[data-p="giap"] { left: 12px; }
.opanel[data-p="jason"] { left: 281px; }
.opanel[data-p="akshay"] { left: 550px; }
.obg, .odesk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: filter .6s; }
.opanel:not(.claimed) .obg, .opanel:not(.claimed) .odesk { filter: grayscale(1) brightness(.62); }
.opanel.mine { border-color: #ffd23f; box-shadow: 0 0 0 3px #e63946; }
.ochibi { position: absolute; left: 54px; top: 52px; width: 150px; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); cursor: pointer; }
.opanel.done .ochibi { transform: translateY(-24px); }
.ochibi.spawn { animation: spawn .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes spawn { 0% { transform: translateY(-70px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.oname { position: absolute; top: 8px; left: 0; right: 0; margin: auto; width: max-content; background: #111; color: #fff; font-weight: 800; font-size: 13px; padding: 3px 12px; border-radius: 999px; }
.opanel.mine .oname { background: #e63946; }
.oclaim { position: absolute; inset: 0; border: 0; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.oclaim small { font-weight: 800; font-size: 13px; margin-bottom: 8px; text-shadow: 0 1px 3px #000; }
.oclaim b { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 27px; background: #ffd23f; color: #111; border: 3px solid #111; padding: 8px 16px; border-radius: 14px; box-shadow: 0 4px 0 #111; animation: pulse 1.4s infinite; }
.opanel.claimed .oclaim { display: none; }
.ostamp { position: absolute; right: 14px; top: 226px; z-index: 4; border: 3px solid var(--red); color: var(--red); font-family: "Dela Gothic One", system-ui; font-size: 15px; padding: 4px 8px; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, .85); line-height: 1.1;
  opacity: 0; transform: rotate(12deg) scale(2.2); transition: all .35s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.opanel.done .ostamp { opacity: 1; transform: rotate(12deg) scale(1); }
.obubble { position: absolute; left: 0; right: 0; top: 40px; margin: auto; width: max-content; max-width: 230px; background: #fff; border: 2px solid #111; border-radius: 12px; padding: 3px 10px; font-size: 12px; font-weight: 800; z-index: 3; opacity: 0; pointer-events: none; }
.obubble.show { animation: bubble 2.4s ease both; }
@keyframes bubble { 0% { opacity: 0; transform: scale(.4) translateY(8px); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.obar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 76px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; }
.obar-msg { font-weight: 800; font-size: 17px; }
.obar-msg.small { font-size: 12px; opacity: .7; }
.obar .btn-big { font-size: 24px; }
.lfg { font-size: 32px !important; padding: 4px 46px; animation: pulse .9s infinite; }
.lfg.pressed { animation: none; background: #6c6f7d; }
.lfg-dots { display: flex; gap: 5px; }
.lfg-dots span { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #333; border: 2px solid #555; filter: grayscale(1); opacity: .45; }
.lfg-dots span.on { filter: none; opacity: 1; border-color: var(--yellow); background: #fff; animation: pop .3s both; }
.lfg-dots svg { width: 100%; height: 100%; }
.crane { animation: crane 5s ease-in-out infinite alternate; transform-origin: 200px 146px; }
@keyframes crane { to { transform: rotate(-3deg); } }
.neon { animation: neon 3s infinite; filter: drop-shadow(0 0 6px #b37bff); }
@keyframes neon { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .3; } }
.steam path { animation: steam 2s ease-in-out infinite; }
.steam path + path { animation-delay: .6s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: .8; } 100% { opacity: 0; transform: translateY(-8px); } }
.stack-l { animation: wobble 3s ease-in-out infinite; transform-origin: 43px 204px; }
@keyframes wobble { 50% { transform: translate(14px, 120px) rotate(1.6deg); } 0%, 100% { transform: translate(14px, 120px) rotate(-1.2deg); } }
.mirror { animation: none; }
.office.leaving .opanel { animation: shake .3s 2; }
.is-epilogue .obar { gap: 10px; }
.ep-end { display: flex; flex-direction: column; align-items: center; margin-right: 10px; }
.ep-kicker { font-size: 12px; letter-spacing: 3px; opacity: .7; font-weight: 800; }
.ep-end b { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 22px; color: var(--yellow); }

/* ============ EPISODE 2: race ============ */
.race { --t: 0s; background: #4f525d; }
.race-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kart { position: absolute; left: 10px; width: 120px; height: 100px; }
.lane-1 { top: 93px; } .lane-2 { top: 161px; } .lane-3 { top: 229px; }
.kchibi { position: absolute; left: 24px; top: 0; width: 70px; }
.kart-svg { position: absolute; left: 0; top: 40px; width: 120px; height: 60px; overflow: visible; }
.gc-shock { opacity: 0; }
.place { position: absolute; left: 22px; top: -26px; background: #111; color: #fff; font-family: "Dela Gothic One", system-ui; padding: 2px 10px; border-radius: 8px; font-size: 16px; opacity: 0; white-space: nowrap; }
.place.gold { background: var(--yellow); color: #111; border: 2px solid #111; }
.speed { position: absolute; left: -120px; top: 38px; width: 120px; height: 52px; opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .85) 7px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.cans { position: absolute; left: -86px; top: 56px; width: 86px; height: 40px; }
.cans .sign { position: absolute; left: 0; top: 0; background: #fff; border: 2px solid #111; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; transform: rotate(-6deg); white-space: nowrap; }
.cans i { position: absolute; top: 22px; width: 9px; height: 12px; background: #c9ced6; border: 1.5px solid #555; border-radius: 2px; animation: rattle .18s infinite alternate; }
.cans i:nth-of-type(1) { left: 6px; } .cans i:nth-of-type(2) { left: 26px; animation-delay: .06s; } .cans i:nth-of-type(3) { left: 46px; animation-delay: .12s; }
.cans::after { content: ""; position: absolute; left: 10px; right: 0; top: 24px; border-top: 1.5px solid #333; }
@keyframes rattle { from { transform: rotate(-14deg) translateY(-2px); } to { transform: rotate(12deg) translateY(1px); } }
.lights { position: absolute; left: 0; right: 0; margin: auto; top: 6px; width: max-content; display: flex; gap: 8px; background: #111; padding: 6px 10px; border-radius: 12px; border: 3px solid #444; }
.lights i { width: 22px; height: 22px; border-radius: 50%; background: #400; }
.go-text { position: absolute; left: 0; right: 0; top: 150px; text-align: center; font-family: "Dela Gothic One", system-ui; font-size: 90px; color: #2bff6a; -webkit-text-stroke: 3px #111; text-shadow: 5px 5px 0 #111; opacity: 0; pointer-events: none; }
.banana { position: absolute; left: 372px; top: 288px; font-size: 26px; }
.smoke { position: absolute; left: 388px; top: 232px; font-size: 36px; opacity: 0; pointer-events: none; }
.smoke span { position: absolute; left: 30px; top: -16px; font-size: 22px; animation: spin 1s linear infinite; }
.runner { position: absolute; left: 430px; top: 232px; width: 70px; }
.runner-in { position: relative; opacity: 0; }
.runner-bubble { position: absolute; left: 50px; top: -6px; background: #fff; border: 2px solid #111; border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 800; white-space: nowrap; opacity: 0; }
.runner .place { left: 2px; top: -24px; }
.winner-text { position: absolute; left: 0; right: 0; top: 140px; text-align: center; font-family: "Dela Gothic One", system-ui; font-size: 66px; color: var(--yellow); -webkit-text-stroke: 3px #111; text-shadow: 5px 5px 0 #111; opacity: 0; pointer-events: none; }
.confetti i { position: absolute; top: -24px; width: 8px; height: 14px; background: var(--c); border-radius: 2px; }
.race-ui { position: absolute; left: 0; right: 0; top: 176px; display: flex; justify-content: center; }
.race-ui .btn { animation: pulse 1.2s infinite; }

.race.go .race-ui { display: none; }
.race.go .lights { animation: hide .4s calc(var(--t) + 3s) both; }
.race.go .lights i { animation-duration: 2.2s; animation-delay: var(--t); animation-fill-mode: both; animation-timing-function: step-end; }
.race.go .lights i:nth-child(1) { animation-name: l1; }
.race.go .lights i:nth-child(2) { animation-name: l2; }
.race.go .lights i:nth-child(3) { animation-name: l3; }
@keyframes l1 { 0% { background: #400; } 14% { background: #ff2a2a; box-shadow: 0 0 12px #f33; } 86%, 100% { background: #2bff6a; box-shadow: 0 0 14px #2f6; } }
@keyframes l2 { 0% { background: #400; } 41% { background: #ff2a2a; box-shadow: 0 0 12px #f33; } 86%, 100% { background: #2bff6a; box-shadow: 0 0 14px #2f6; } }
@keyframes l3 { 0% { background: #400; } 68% { background: #ff2a2a; box-shadow: 0 0 12px #f33; } 86%, 100% { background: #2bff6a; box-shadow: 0 0 14px #2f6; } }
.race.go .go-text { animation: goPop .9s calc(var(--t) + 1.9s) both; }
@keyframes goPop { 0% { opacity: 0; transform: scale(3); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
.race.go .k-akshay { animation: drive-a 3.3s cubic-bezier(.6, 0, .25, 1) calc(var(--t) + 1.9s) both; }
.race.go .k-jason { animation: drive-j 4s cubic-bezier(.45, 0, .35, 1) calc(var(--t) + 1.9s) both; }
.race.go .k-giap { animation: drive-g 2.6s linear calc(var(--t) + 1.9s) both; }
@keyframes drive-a { from { transform: translateX(0); } to { transform: translateX(680px); } }
@keyframes drive-j { from { transform: translateX(0); } to { transform: translateX(606px); } }
@keyframes drive-g { 0% { transform: translateX(0) rotate(0); } 55% { transform: translateX(250px) rotate(0); } 100% { transform: translateX(330px) rotate(-1065deg); } }
.race.go .k-akshay .wheel { animation: spin .22s linear calc(var(--t) + 1.9s) 15; }
.race.go .k-jason .wheel { animation: spin .25s linear calc(var(--t) + 1.9s) 16; }
.race.go .k-giap .wheel { animation: spin .3s linear calc(var(--t) + 1.9s) 5; }
.race.go .speed { animation: speedOn 2.9s calc(var(--t) + 2.4s) both; }
@keyframes speedOn { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
.race.go .banana { animation: bananaFly .8s calc(var(--t) + 3.33s) both; }
@keyframes bananaFly { to { transform: translate(60px, -110px) rotate(600deg); opacity: 0; } }
.race.go .smoke { animation: smoke 2.6s calc(var(--t) + 3.5s) both; }
@keyframes smoke { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.2); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.race.go .gc-happy { animation: hide 1ms calc(var(--t) + 3.33s) forwards; }
.race.go .gc-shock { animation: flashShow 1.3s step-end calc(var(--t) + 3.33s) forwards; }
@keyframes flashShow { 0% { opacity: 1; } 100% { opacity: 0; } }
.race.go .runner { animation: runnerGo 4.4s linear calc(var(--t) + 5s) both; }
@keyframes runnerGo { from { transform: translateX(0); } to { transform: translateX(290px); } }
.race.go .runner-in { animation: show 1ms calc(var(--t) + 4.6s) forwards, hop .3s ease-in-out calc(var(--t) + 4.6s) infinite alternate; }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.race.go .runner-bubble { animation: bubble 2.6s calc(var(--t) + 4.8s) both; }
.race.go .k-akshay .place { animation: pop .4s calc(var(--t) + 5.2s) both; }
.race.go .k-jason .place { animation: pop .4s calc(var(--t) + 5.9s) both; }
.race.go .runner .place { animation: pop .4s calc(var(--t) + 9.4s) both; }
.race.go .winner-text { animation: winner 2s calc(var(--t) + 5.2s) both; }
@keyframes winner { 0% { opacity: 0; transform: scale(3) rotate(-4deg); } 14% { opacity: 1; transform: scale(1) rotate(-4deg); } 80% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; transform: translateY(-20px) rotate(-4deg); } }
.race.go .confetti i { animation: confetti 2.6s ease-in calc(var(--t) + 5.2s + var(--d)) both; }
@keyframes confetti { from { transform: translateY(0) rotate(0); } to { transform: translateY(450px) rotate(720deg); } }

.podium { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .6s;
  background: radial-gradient(circle at 50% 70%, #fff3c4, #ffc94a 55%, #fb8500); }
.race.show-podium .podium { opacity: 1; pointer-events: auto; }
.pd-burst { position: absolute; left: -50%; top: -110%; width: 200%; height: 400%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .28) 0 7deg, transparent 7deg 14deg); animation: spin 30s linear infinite; }
.pd-title { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-family: "Dela Gothic One", system-ui; font-size: 34px; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 3px 3px 0 #111; }
.pd-col { position: absolute; bottom: 0; width: 130px; display: flex; flex-direction: column; align-items: center; }
.pd-1 { left: 300px; } .pd-2 { left: 160px; } .pd-3 { left: 440px; }
.pd-chibi { position: relative; width: 112px; margin-bottom: -4px; cursor: pointer; }
.pd-block { width: 130px; border: 3px solid #111; border-bottom: 0; display: flex; justify-content: center; padding-top: 6px; font-family: "Dela Gothic One", system-ui; font-size: 40px; box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .08); }
.pd-1 .pd-block { height: 128px; background: var(--yellow); }
.pd-2 .pd-block { height: 88px; background: #e9ecef; }
.pd-3 .pd-block { height: 56px; background: #e5a46a; }
.pd-tag { position: absolute; top: -14px; background: #111; color: #fff; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pd-stamp { position: absolute; right: 48px; top: 96px; border: 4px solid #c1121f; color: #c1121f; font-family: "Dela Gothic One", system-ui; font-size: 26px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .6); text-align: center; line-height: 1; opacity: 0; transform: rotate(-14deg); }
.pd-stamp small { display: block; font-family: "M PLUS Rounded 1c", system-ui; font-weight: 800; font-size: 11px; margin-top: 4px; }
.race.show-podium .pd-stamp { animation: stamp .35s 1.3s both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(3); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
.race.show-podium .pd-col { animation: rise .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.race.show-podium .pd-2 { animation-delay: .25s; } .race.show-podium .pd-3 { animation-delay: .5s; }
@keyframes rise { from { transform: translateY(260px); } to { transform: none; } }
.pd-dinner { position: absolute; right: 18px; top: 206px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.race.show-dinner .pd-dinner { opacity: 1; pointer-events: auto; animation: pulse 1.2s infinite; }

/* ============ EPISODE 3: dinner ============ */
.dinner { background: #3b2422; }
.dn-bg, .dn-table { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lamp { animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.neon-kanpai { animation: neon 4s infinite; filter: drop-shadow(0 0 6px #ff5c8a); }
.dn-seat { position: absolute; top: 148px; width: 150px; height: 170px; cursor: pointer; }
.dn-chibi { position: absolute; left: 5px; top: 0; width: 140px; }
.dn-chibi .chibi-svg { animation: bob 2.6s ease-in-out infinite; }
.dn-seat[data-who="akshay"] .dn-chibi .chibi-svg { animation-delay: .5s; }
.dn-seat[data-who="jason"] .dn-chibi .chibi-svg { animation-delay: 1s; }
.dn-spot { position: absolute; left: -30px; right: -30px; top: -60px; bottom: -40px; background: radial-gradient(ellipse at 50% 45%, rgba(255, 244, 190, .8), transparent 62%); opacity: 0; transition: opacity .4s .6s; }
.dn-seat.sip .dn-spot { opacity: 1; }
.dn-seat.voted-me .dn-chibi { filter: drop-shadow(0 0 3px #ffd23f) drop-shadow(0 0 10px #ffd23f); }
.dn-seat.voted-me::after { content: "your vote"; position: absolute; left: 0; right: 0; margin: auto; width: max-content; top: 2px; background: var(--yellow); border: 2px solid #111; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 8px; animation: pop .25s both; }
.dn-badge { position: absolute; left: 6px; top: 26px; z-index: 3; }
.dn-badge .pick { display: flex; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; border: 3px solid #111; font-family: "Dela Gothic One", system-ui; font-size: 20px; align-items: center; justify-content: center; animation: pop .25s both; }
.dn-badge .medal { display: block; font-size: 40px; animation: pop .35s .3s both; }
.dn-chips { position: absolute; right: 0; top: 24px; display: flex; flex-direction: column; gap: 3px; z-index: 3; }
.dn-chips span { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #111; overflow: hidden; animation: pop .3s .5s both; }
.dn-chips span:nth-child(2) { animation-delay: .65s; } .dn-chips span:nth-child(3) { animation-delay: .8s; }
.dn-chips svg { width: 100%; height: 100%; }
.dn-stamp { position: absolute; left: 0; right: 0; margin: auto; width: max-content; top: 92px; z-index: 4; background: var(--red); color: #fff; border: 3px solid #111; border-radius: 12px; font-family: "Dela Gothic One", system-ui; font-size: 22px; padding: 2px 12px;
  opacity: 0; transform: rotate(-12deg) scale(2.6); transition: opacity .3s 1.2s, transform .35s cubic-bezier(.2, 1.6, .4, 1) 1.2s; pointer-events: none; }
.dn-seat.sip .dn-stamp { opacity: 1; transform: rotate(-12deg) scale(1); }
.dn-bubble { position: absolute; left: 0; right: 0; top: 8px; margin: auto; width: max-content; background: #fff; border: 2px solid #111; border-radius: 12px; padding: 2px 10px; font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; z-index: 6; }
.dn-bubble.show { animation: bubble 2.4s ease both; }
.dinner.in-game .dn-bubble { display: none; }
.dn-panel { position: absolute; left: 0; right: 0; top: 0; height: 150px; display: flex; justify-content: center; align-items: flex-start; padding-top: 8px; pointer-events: none; z-index: 5; }
.dn-panel > * { pointer-events: auto; }
.menu-board { background: #24302b; border: 6px solid #8b5a2b; border-radius: 10px; padding: 8px 14px 6px; color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); text-align: center; animation: dropIn .35s both; }
.mb-title { font-family: "Dela Gothic One", system-ui; font-size: 15px; letter-spacing: 3px; color: var(--yellow); }
.mb-items { display: flex; gap: 10px; margin-top: 6px; }
.mb-item { background: #fffaf0; color: #111; border: 3px solid #111; border-radius: 12px; padding: 5px 12px 4px; display: flex; flex-direction: column; align-items: center; min-width: 132px; box-shadow: 0 4px 0 #111; }
.mb-item:active { translate: 0 3px; box-shadow: 0 1px 0 #111; }
.mb-ico { font-size: 24px; line-height: 1.1; }
.mb-item b { font-size: 15px; }
.mb-item small { font-size: 11px; opacity: .6; font-weight: 800; }
.mb-item.finished { opacity: .55; }
.mb-foot { font-size: 11px; opacity: .6; margin-top: 5px; font-weight: 800; }
.to-roof { position: absolute; right: 12px; top: 10px; }
.banner { width: 580px; background: #fffdf6; border: 3px solid #111; border-radius: 16px; box-shadow: 0 5px 0 #111; padding: 7px 16px 8px; text-align: center; animation: dropIn .3s both; }
.bn-kicker { font-family: "Dela Gothic One", system-ui; font-size: 13px; color: var(--red); letter-spacing: 2px; display: flex; justify-content: space-between; }
.bn-kicker span { color: #999; letter-spacing: 0; }
.bn-q { font-weight: 800; font-size: 25px; line-height: 1.12; margin: 3px 0 6px; }
.bn-foot { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 800; flex-wrap: wrap; }
.vote-dots { display: inline-flex; gap: 3px; }
.vote-dots span { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px solid #ccc; filter: grayscale(1); opacity: .4; background: #fff; }
.vote-dots span.in { filter: none; opacity: 1; border-color: #2ecc71; animation: pop .25s both; }
.vote-dots svg { width: 100%; height: 100%; }
.sip-rule { background: #ffe3e3; color: #c1121f; border-radius: 6px; padding: 1px 6px; }
.bn-result { font-size: 17px; display: inline-flex; align-items: center; gap: 4px; }
.orders { display: inline-flex; gap: 8px; font-size: 11px; margin-left: 6px; opacity: .8; }
.orders span { display: inline-flex; align-items: center; gap: 2px; }
.orders svg { width: 18px; height: 18px; }
.dn-slam { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 20; overflow: hidden; }
.dn-slam.play { animation: slamWrap 2s both; }
@keyframes slamWrap { 0% { opacity: 0; } 6% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.slam-burst { position: absolute; left: -50%; top: -150%; width: 200%; height: 400%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 210, 63, .92) 0 5deg, rgba(230, 57, 70, .92) 5deg 10deg); animation: spin 8s linear infinite; }
.slam-text { position: relative; font-family: "Dela Gothic One", system-ui; font-size: 82px; line-height: 1; color: #fff; -webkit-text-stroke: 4px #111; text-shadow: 6px 6px 0 #111; text-align: center; padding: 0 20px; }
.dn-slam.play .slam-text { animation: punch .45s cubic-bezier(.2, 1.6, .4, 1) both, shake .25s .45s 2; }
.slam-sub { position: relative; margin-top: 10px; background: #111; color: #fff; font-weight: 800; padding: 4px 16px; border-radius: 999px; font-size: 16px; }
.dn-zoom { position: absolute; inset: 0; background: rgba(20, 10, 8, .92); display: none; z-index: 10; }
.dn-zoom.on { display: block; animation: fadeIn .3s; }
.zm-frame { position: absolute; top: 34px; background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 3px #111, 0 8px 0 3px #111; overflow: hidden; border-radius: 4px; }
.zm-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 2.6s cubic-bezier(.65, 0, .2, 1); }
.zm-frame img.zoomed { transform: scale(6); }
.zm-scan { position: absolute; inset: 10px; border: 2px dashed rgba(255, 255, 255, .75); border-radius: 4px; pointer-events: none; transition: opacity .5s; }
.revealed .zm-scan { opacity: 0; }
.zm-side { position: absolute; right: 22px; top: 44px; width: 250px; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.zm-done { top: 140px; left: 0; right: 0; margin: auto; align-items: center; text-align: center; }
.zm-kicker { font-family: "Dela Gothic One", system-ui; color: var(--yellow); letter-spacing: 2px; font-size: 15px; display: flex; justify-content: space-between; }
.zm-kicker span { color: #aaa; letter-spacing: 0; }
.zm-q { font-weight: 800; font-size: 28px; line-height: 1.1; }
.zm-q small { font-size: 14px; opacity: .7; }
.zm-cap { display: none; font-weight: 800; font-size: 16px; line-height: 1.3; background: #fffdf6; color: #111; border: 3px solid #111; border-radius: 12px; padding: 8px 12px; }
.revealed .zm-cap { display: block; animation: dropIn .4s 2s both; }
.revealed .zm-q { display: none; }
.zm-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zm-next { display: none; }
.revealed .zm-next { display: inline-block; animation: fadeIn .3s 2.2s both; }
.revealed .zm-reveal { display: none; }
.zm-reveal { animation: pulse 1.2s infinite; }

/* ============ FINAL ARC: rooftop ============ */
.rooftop { background: #090d2a; }
.rt-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star { animation: twinkle 2.6s ease-in-out infinite alternate; }
.bulb { animation: bulb 1.8s ease-in-out infinite alternate; }
@keyframes bulb { from { opacity: .55; } to { opacity: 1; } }
.shooting { opacity: 0; animation: shoot 9s 3s infinite; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0); } 2% { opacity: 1; } 7% { opacity: 0; transform: translate(-200px, 46px); } 100% { opacity: 0; transform: translate(-200px, 46px); } }
.rt-tabs { position: absolute; left: 0; right: 0; margin: auto; width: max-content; top: 8px; display: flex; gap: 6px; z-index: 3; }
.rt-tabs button { font-weight: 800; font-size: 12px; background: rgba(255, 255, 255, .1); color: #fff; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 3px 12px; }
.rt-tabs button.on { background: var(--red); border-color: #fff; }
.rt-deck { position: absolute; left: 215px; top: 40px; width: 390px; height: 186px; perspective: 900px; z-index: 2; }
.rt-card, .rt-stack { position: absolute; inset: 0; border-radius: 16px; }
.rt-stack { background: #c81d39; border: 3px solid #111; transform: rotate(3deg) translate(6px, 4px); }
.rt-stack.s2 { transform: rotate(-2.5deg) translate(-5px, 3px); background: #a3172e; }
.rt-card { background: #fff7ee; border: 3px solid #111; box-shadow: 0 6px 0 rgba(0, 0, 0, .5); padding: 10px 16px 8px; display: flex; flex-direction: column; color: #c81d39; }
.rt-card.flip { animation: flip .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes flip { from { transform: rotateY(80deg) scale(.92); opacity: .3; } to { transform: none; opacity: 1; } }
.rc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.rc-for { display: flex; gap: 5px; color: #111; letter-spacing: 0; font-size: 12px; }
.for-p { display: inline-flex; align-items: center; gap: 3px; background: #ffe3e8; border-radius: 999px; padding: 1px 8px 1px 2px; }
.for-p svg { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.for-all { background: #ffe3e8; border-radius: 999px; padding: 2px 10px; }
.rc-q { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Dela Gothic One", system-ui; font-size: 20px; line-height: 1.3; color: #c81d39; padding: 0 4px; }
.rc-q.wild { color: #5a4fcf; }
.rc-q.len-l { font-size: 18px; }
.rc-q.len-xl { font-size: 16px; }
.rc-foot { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; opacity: .5; letter-spacing: 1px; }
.final .rt-card { background: linear-gradient(135deg, #fff7d6, #ffe08a); }
.final .rc-q { color: #7a4300; }
.final .rt-stack { background: #c99a1c; }
.rt-arrow { position: absolute; top: 112px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #111; background: #fff; font-size: 17px; box-shadow: 0 4px 0 #111; padding: 0; z-index: 3; }
.rt-arrow:active { translate: 0 3px; box-shadow: 0 1px 0 #111; }
.rt-arrow.prev { left: 156px; }
.rt-arrow.next { left: 618px; top: 106px; width: 58px; height: 58px; background: var(--yellow); font-size: 22px; }
.final .rt-arrow.next { display: none; }
.rt-end { position: absolute; left: 616px; top: 106px; display: none; z-index: 4; font-size: 18px; padding: 8px 16px; }
.final .rt-end { display: block; animation: pulse 1.4s infinite; }
.rt-level-flash { position: absolute; left: 0; right: 0; top: 112px; text-align: center; font-family: "Dela Gothic One", system-ui; font-size: 46px; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 var(--red); opacity: 0; pointer-events: none; z-index: 6; }
.rt-level-flash.play { animation: winner 1.6s both; }
.rt-seat { position: absolute; top: 214px; width: 150px; height: 190px; cursor: pointer; }
.chair-back, .chair-front { position: absolute; left: 0; top: 82px; width: 150px; height: 120px; overflow: visible; }
.chair-back { top: 64px; }
.rt-chibi { position: absolute; left: 20px; top: 10px; width: 110px; transition: filter .4s; }
.rt-chibi .chibi-svg { animation: bob 3s ease-in-out infinite; }
.rt-seat[data-who="akshay"] .rt-chibi .chibi-svg { animation-delay: .7s; }
.rt-seat[data-who="jason"] .rt-chibi .chibi-svg { animation-delay: 1.4s; }
.rt-seat.target .rt-chibi { filter: drop-shadow(0 0 10px rgba(255, 214, 107, .95)); }
.rt-seat:not(.target) .rt-chibi { filter: brightness(.78); }
.rt-mic { position: absolute; left: 4px; top: 30px; font-size: 24px; opacity: 0; transition: opacity .3s; z-index: 3; }
.rt-seat.target .rt-mic { opacity: 1; animation: bob 1.2s ease-in-out infinite; }

/* ============ pepper court ============ */
.pepper { position: absolute; inset: 0; background: #f3d5a4; overflow: hidden; }
.pp-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-chibi { position: absolute; cursor: pointer; }
.pp-ball { position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 3; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25)); pointer-events: none; }
.pp-count { position: absolute; left: 56px; top: 64px; background: #111; color: #fff; border-radius: 12px; padding: 4px 14px; text-align: center; }
.pp-count small { display: block; font-size: 9px; letter-spacing: 2px; opacity: .7; font-weight: 800; }
.pp-count b { font-family: "Dela Gothic One", system-ui; font-weight: 400; font-size: 26px; }
.pp-combo { position: absolute; left: 0; right: 0; top: 352px; margin: auto; width: max-content; font-weight: 800; color: #111; opacity: 0; display: none; }
.pp-combo.pop { animation: fadeUp .3s both; opacity: 1; }
.pp-pass { position: absolute; left: 0; right: 0; bottom: 14px; margin: auto; width: max-content; font-size: 26px; padding: 9px 44px; }
.pp-photos { position: absolute; right: 62px; top: 12px; }
.pp-close { position: absolute; right: 12px; top: 12px; }
.pepper .pp-combo { display: block; left: 590px; right: auto; top: 76px; }

/* ============ photos ============ */
.photos { position: absolute; inset: 0; background: #2b2118 radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 14px 14px; }
.ph-title { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font-family: "Dela Gothic One", system-ui; color: var(--yellow); font-size: 20px; letter-spacing: 2px; }
.ph-grid { position: absolute; left: 30px; right: 30px; top: 52px; bottom: 16px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; gap: 16px 14px; }
.ph-item { border: 0; background: #fff; padding: 5px 5px 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); transform: rotate(var(--r)); min-height: 0; }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-box { position: absolute; inset: 0; background: rgba(0, 0, 0, .93); display: none; align-items: center; justify-content: center; z-index: 5; }
.ph-box.on { display: flex; }
.ph-box img { max-width: 80%; max-height: 92%; border: 4px solid #fff; }
.ph-prev { position: absolute; left: 14px; top: 176px; }
.ph-next { position: absolute; right: 14px; top: 176px; }
.ph-close { position: absolute; right: 12px; top: 10px; z-index: 6; }