/* PANGGUNG UNDIAN V5 — Illustrative Art Direction
   Layout, type, and actual logic remain in the V4 code. These are visual overrides only. */
:root{--ink:#233750;--stroke:#d8d4ca;--shadow:0 12px 24px #20345622}
body{background-color:#edf1ed;background-image:radial-gradient(circle at 8% 1%,#d4e6e5 0,transparent 24%),radial-gradient(circle at 98% 18%,#efe1d0 0,transparent 29%),linear-gradient(180deg,#edf4f2,#f7f3e9 54%,#ebf1ef)}
.side{background:#192c4e;background-image:linear-gradient(165deg,#172b58,#132343 70%,#122b44);border-right:4px solid #293a60}
.side:after{opacity:.15}
.brand-mark{background:#fbca7b url('./assets/ui/star.svg') center/66% no-repeat;color:transparent;border:2px solid #fff5da;transform:rotate(-6deg);box-shadow:0 4px 0 #121d39}
.brand-mark span{visibility:hidden}
.side-label{color:#8cd6e9}
.nav-btn{font-size:13px;color:#d0ddf3;min-height:47px}
.nav-btn.active{background:#e9f6fa;color:#153b63;box-shadow:4px 4px 0 #0a1838;border-left:5px solid #f0bd66}
.side-art{background:#1a3761 url('./assets/scenes/theatre.webp') center bottom / auto 100% no-repeat;border:1px solid #6989b7;min-height:316px;overflow:hidden;padding-bottom:16px}
.side-art-circle{height:168px;width:135px;background:url('./assets/character/mascot-boy.webp') center 31% / 146px auto no-repeat,#a7adea;border:4px solid #fff9e3;box-shadow:0 5px 0 #092142}
.side-art-circle .side-art-face,.side-art-circle>span:first-child{display:none}
.side-art h3{color:#ffe09b;text-shadow:0 2px 5px #0b1840}
.side-art p{color:#eef5ff;text-shadow:0 1px 5px #0b1840}
.top h1{font-size:clamp(25px,2.8vw,36px)}
.intro-hero.illustrated-hero{background:#13345d url('./assets/scenes/theatre.webp') center 55% /cover no-repeat;border:3px solid #e5bc79;box-shadow:0 6px 0 #304c6b;min-height:183px}
.illustrated-hero:before{z-index:0;background:linear-gradient(90deg,#09203df5 0%,#122c51ed 45%,#12375a50 74%,#0a2c5000 100%)}
.illustrated-hero:after{width:7px;background:linear-gradient(180deg,#fbcc71,#e99670)}
.illustrated-hero .hero-copy{position:relative;padding:25px 28px;max-width:620px}
.illustrated-hero .hero-kicker{color:#ffd078}
.illustrated-hero h2{font-size:clamp(25px,3vw,39px);color:#fff9e8;text-shadow:0 3px 0 #092347,0 5px 12px #030a22}
.illustrated-hero h2 em{color:#ffd16f}
.illustrated-hero p{color:#d8e9ff;font-size:13px;max-width:430px}
.illustrated-hero .hero-illustration{background:none;min-height:155px}
.illustrated-hero .hero-arch{background:transparent;border:0;box-shadow:none}
.illustrated-hero .hero-arch:before{display:none}
.illustrated-hero .hero-stand{bottom:25px}
.illustrated-hero .arch-floor{background:#f7b26377}
.mode-grid{gap:12px}
.mode-tile,.mode-tile.active{min-height:0;aspect-ratio:117/132;border:0;border-radius:12px;background-color:transparent!important;background-image:var(--mode-image)!important;background-size:100% 100%!important;background-position:center!important;box-shadow:0 5px 0 #273554,0 9px 16px #1729432e!important;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;padding:0!important;color:transparent!important}
.mode-tile::before,.mode-tile::after{display:none}
.mode-tile.game-wheel{--mode-image:url('./assets/cards/wheel.webp')}
.mode-tile.game-duck{--mode-image:url('./assets/cards/duck.webp')}
.mode-tile.game-rocket{--mode-image:url('./assets/cards/rocket.webp')}
.mode-tile.game-marble{--mode-image:url('./assets/cards/marble.webp')}
.mode-tile.game-cards{--mode-image:url('./assets/cards/cards.webp')}
.mode-tile.game-chest{--mode-image:url('./assets/cards/chest.webp')}
.mode-tile.game-spotlight{--mode-image:url('./assets/cards/spotlight.webp')}
.mode-tile.game-tap{--mode-image:url('./assets/cards/tap.webp')}
.mode-tile .m-icon,.mode-tile .m-name,.mode-tile .mode-number,.mode-tile .mode-chevron{display:none!important}
.mode-tile:hover{transform:translateY(-5px) scale(1.015)!important;filter:saturate(1.08)!important;box-shadow:0 10px 0 #273554,0 15px 26px #17294340!important}
.mode-tile.active{outline:4px solid #ffcd61!important;outline-offset:2px;filter:saturate(1.13)}
.panel{background:#fffefa;border:1px solid #d8d4c8}
.stage{background:linear-gradient(180deg,#1c3465c4,#0d1c43c9),url('./assets/scenes/theatre.webp') center center /cover no-repeat;border:3px solid #c8aa77;box-shadow:0 7px 0 #283e64,0 12px 28px #07183240;border-radius:19px}
.stage:before{background:linear-gradient(180deg,#061b36bd,transparent 49%,#06152b66);opacity:1}
.stage-title h3,.stage-title p{color:#fff8e7;text-shadow:0 2px 4px #101a35}
.stage-kicker{color:#f9d58c!important}
.stage-heading .mini-art{background:#fff6d5cc;border:2px solid #fff2d7;box-shadow:0 3px 0 #18223d}
.wheel-cap{background:#e3b74d}
.race-lane.water{background:repeating-linear-gradient(170deg,#3cacdbbd 0 7px,#1a6baeac 8px 18px)}
.race-lane.sky{background:linear-gradient(180deg,#4567a7,#19316d)}
.list-people{gap:8px}
.person-row{background:linear-gradient(100deg,#f5f3ed,#f7f8fb);border:1px solid #d9dfe4}
.person-row .name{font-weight:800}
/* Detailed customizable avatar drawn from SVG layers instead of CSS ovals. */
.avatar.premium-avatar{display:inline-flex;position:relative;width:54px;height:61px;align-items:center;justify-content:center;filter:drop-shadow(0 3px 2px #151e3540);border:0;background:none!important}
.avatar.premium-avatar::before,.avatar.premium-avatar::after{content:none!important}
.avatar.premium-avatar svg{display:block;width:100%;height:100%;overflow:visible}
.person-row .avatar.premium-avatar{transform:scale(.87);margin:-5px -4px}
.side-art .premium-avatar{display:none}
.hero-stand .premium-avatar{width:59px;height:74px}
.spot-person .premium-avatar{width:62px;height:75px}
.tap-course{height:34px;background:repeating-linear-gradient(0deg,#587cab15 0 5px,#496f9a1d 6px 7px),linear-gradient(90deg,#fbfbfd,#e9effa);border:1px solid #acc1d5}
.tap-course-line{border-top:2px dashed #8fadd6}
.tap-marker{top:-21px;filter:drop-shadow(1px 4px 2px #09213a5c)}
.tap-marker .premium-avatar{transform:scale(.9);transform-origin:top left}
.finish-flag{background:url('./assets/ui/finish-flag.svg') center /100% 100% no-repeat;width:24px;opacity:1}
.tap-lane{min-height:67px}
.tap-lane.is-leading{background:#fff1cd;border:2px solid #e9b35b;box-shadow:inset 0 0 0 2px #fff7df,0 0 0 3px #fff8e3}
.tap-ribbon{background:linear-gradient(90deg,#4aa6db,#a0e2ef);box-shadow:0 0 8px #60b5e783}
.tap-lane:nth-child(3n) .tap-ribbon{background:linear-gradient(90deg,#db70a7,#ffb8d2)}
.tap-lane:nth-child(3n+2) .tap-ribbon{background:linear-gradient(90deg,#ad80e6,#dfc3ff)}
.tap-lane.is-leading .tap-ribbon{background:linear-gradient(90deg,#f2ae4e,#ffe27c);box-shadow:0 0 11px #ffba50ab}
.student-form .avatar-preview{background:radial-gradient(circle at 50% 52%,#fff2db 0,#bedbeb 58%,#6eabd0 100%);border:5px solid #dfbe7f;box-shadow:0 6px 0 #b68752;min-height:186px}
.student-form .avatar-preview .premium-avatar{width:70px;height:92px;transform:scale(1.65)}
.student-tap-multi{background:radial-gradient(circle at 40% 18%,#fff1bc 0,#fbc575 48%,#ea8b59 100%);box-shadow:0 10px 0 #a75c45,0 22px 23px #283b5050,inset 0 4px 0 #fff8dd}
.student-tap-multi:active:not(:disabled){box-shadow:0 3px 0 #a75c45,0 7px 12px #283b504e}
@media(min-width:1280px){.side-art{margin-top:33px}}
@media(max-width:760px){.mode-tile{min-height:0!important;border-radius:8px!important}.mode-grid{gap:7px}.mode-tile.active{outline-width:2px!important}.side{background:#16264b}.illustrated-hero.illustrated-hero{min-height:149px;background-position:55% center}.illustrated-hero .hero-copy{padding:15px 14px 14px 19px}.illustrated-hero h2{font-size:21px}.illustrated-hero p{font-size:10.5px;max-width:280px}.illustrated-hero .hero-illustration{display:none}.tap-lane{min-height:60px}.tap-marker .premium-avatar{transform:scale(.77)}}
@media(max-width:430px){.illustrated-hero h2{font-size:18px}.illustrated-hero p{font-size:10px}.mode-grid{gap:5px}}

/* V5 patch — bigger QR and projector-friendly presentation modes */
.qr-grid{grid-template-columns:minmax(300px,350px) minmax(0,1fr);gap:22px;align-items:center}
.qr-white{width:min(100%,320px);height:min(100%,320px);min-height:320px;padding:14px;border-width:8px;box-shadow:0 10px 24px #2034561f}
.qr-white canvas,.qr-white img{width:100%!important;height:auto!important}
.code-large{font-size:56px;letter-spacing:8px;margin:8px 0 14px}
.presentation-overlay{position:fixed;inset:0;z-index:1200;background:rgba(8,17,31,.76);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.presentation-card{position:relative;width:min(1180px,100%);max-height:100%;overflow:auto;background:#fffdf8;border:4px solid #e1c188;border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.38);padding:24px 26px 28px;color:#2e4456}
.presentation-close{position:absolute;right:16px;top:14px;border:0;border-radius:999px;background:#17355c;color:#fff;padding:10px 16px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 #0d2240}
.presentation-eyebrow{font-size:13px;font-weight:900;letter-spacing:2px;color:#97704a;text-transform:uppercase;margin-bottom:10px}
.qr-presentation-card h2,.tap-presentation-card h2{font-family:Nunito,sans-serif;font-size:clamp(30px,3vw,48px);letter-spacing:-.8px;margin:0 0 16px;color:#29465c}
.qr-presentation-grid{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:28px;align-items:center}
.qr-white-large{width:min(100%,420px);height:min(100%,420px);min-height:420px;padding:18px;border-width:10px;border-radius:20px}
.qr-copy p{font-size:18px;line-height:1.6;color:#557086;margin:10px 0 16px}
.presentation-tip{margin-top:18px;padding:14px 16px;border-radius:16px;background:#eff6fb;color:#486277;font-size:14px;line-height:1.6}
.tap-shortcut-actions{display:flex;gap:10px;flex-wrap:wrap}
.tap-presentation .presentation-card{width:min(1420px,100%);padding:20px 22px 24px;background:linear-gradient(180deg,#fffef8,#f4f7fb)}
.tap-presentation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.tap-presentation-head p{margin:8px 0 0;color:#647a89;font-size:15px}
.tap-race-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;justify-content:flex-end}
.tap-race-pill{display:flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:16px;background:#eef6fb;color:#2f5363;font-weight:800;min-width:130px}
.tap-race-pill.timer{flex-direction:column;min-width:160px;background:#173e58;color:#fffef1}
.tap-race-pill.timer span{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.82}
.tap-race-pill.timer strong{font-size:44px;line-height:1;margin-top:4px}
.projector-console{border-width:8px;box-shadow:0 10px 0 #263846,0 26px 40px #34425133}
.projector-console .race-startline{font-size:19px;padding:16px 20px}
.projector-tracks{max-height:none;min-height:440px;padding:14px 18px 22px;gap:12px}
.projector-tracks .tap-lane{grid-template-columns:290px minmax(260px,1fr) 90px;min-height:88px;padding:10px 16px 10px 12px;border-radius:12px}
.projector-tracks .tap-athlete{gap:10px}
.projector-tracks .tap-athlete>.avatar{display:inline-flex;transform:scale(1.02)}
.projector-tracks .tap-name{font-size:20px;max-width:none}
.projector-tracks .tap-amount b{font-size:24px}
.projector-tracks .tap-amount small{font-size:14px;display:inline}
.projector-tracks .tap-course{height:42px}
.projector-tracks .tap-medal{width:36px;height:36px;font-size:13px}
.projector-tracks .tap-status{font-size:13px;letter-spacing:.7px}
.projector-tracks .tap-marker{top:-22px}
.projector-tracks .tap-marker .premium-avatar{transform:scale(1.08);transform-origin:top left}
.projector-console .race-console-foot{font-size:15px;padding:15px 20px}
.projector-award{margin-top:16px}
body.presentation-mode{overflow:hidden}
@media (max-width:900px){
  .qr-grid,.qr-presentation-grid,.tap-presentation-head{grid-template-columns:1fr;display:grid}
  .qr-grid{justify-items:center}
  .tap-race-meta{justify-content:flex-start}
  .projector-tracks .tap-lane{grid-template-columns:180px minmax(120px,1fr) 60px;min-height:68px;padding:8px}
  .projector-tracks .tap-name{font-size:14px}
  .projector-tracks .tap-amount b{font-size:18px}
  .projector-tracks .tap-amount small{display:none}
  .projector-tracks .tap-medal{width:26px;height:26px;font-size:10px}
  .projector-tracks .tap-course{height:30px}
}

.tap-race-pill.leader{background:#fff1d3;color:#815b29;border:1px solid #e8c98f;max-width:340px;min-width:190px;font-size:13px;line-height:1.35;text-align:center}