/* Figma 2001:6. World rendering stays live underneath these responsive overlays. */
:root { --wu:min(.052083333vw,.09259259dvh); }
html,body { font-family:var(--ui-font); }
.wall .title { top:8%; left:50%; width:37.4%; transform:translateX(-50%); transition:opacity .3s; }
.title .game-logo { width:100%; }
.wall[data-player-game="true"] .title,.wall[data-mode="lobby"] .title { top:3.4%; left:2%; width:16.3%; transform:none; }
.wall[data-intro="true"] .title { top:8%; left:50%; width:37.4%; transform:translateX(-50%); }
.wall .top-bar { top:4.4%; left:2.6%; }
.qr-card { padding:calc(9 * var(--wu)); border:0; border-radius:calc(20 * var(--wu)); background:white; box-shadow:none; }
.qr-box { width:calc(285 * var(--wu)); height:calc(285 * var(--wu)); border-radius:calc(12 * var(--wu)); background:white; }
.qr-note { font-family:var(--ui-font); font-size:calc(28 * var(--wu)); }
.wall .intro-invite { bottom:7.2%; width:94%; }
.intro-invite p { font:calc(66 * var(--wu))/1.3 var(--ui-font); -webkit-text-stroke:calc(10 * var(--wu)) #0b1f4d; text-shadow:0 calc(6 * var(--wu)) #0b1f4d; paint-order:stroke fill; }
.top-stats,.howto,.tip { display:none!important; }
.wall .bottom { display:flex; left:10.3%; right:10.3%; bottom:2.8%; gap:calc(20 * var(--wu)); }
.progress { padding:0 calc(24 * var(--wu)) 0 0; height:calc(75 * var(--wu)); }
.progress-track { height:calc(47 * var(--wu)); border:calc(6 * var(--wu)) solid #092643; border-radius:99px; background:#406a93; box-shadow:inset 0 calc(5 * var(--wu)) #1c4168; overflow:visible; }
.progress-fill { background:linear-gradient(#7ddfff,#24b8f6); box-shadow:inset 0 calc(5 * var(--wu)) #b8f5ff; }
.progress-track::after { content:''; position:absolute; right:calc(-26 * var(--wu)); bottom:0; width:calc(52 * var(--wu)); height:calc(72 * var(--wu)); background:url('/shared/ui/finish-flag.svg') center/contain no-repeat; }
.progress-track .tick { opacity:.3; z-index:0; }
.progress-pin { z-index:1; width:calc(74 * var(--wu)); height:calc(74 * var(--wu)); margin:0; transform:translate(-50%,-50%); border:calc(4 * var(--wu)) solid #1f5eb9; background:#75d8ff; box-shadow:none; overflow:hidden; }
.runner-portrait { display:block; width:100%; height:100%; }
.runner-portrait-pin { overflow:hidden; isolation:isolate; }
.portrait-sweat { position:absolute; top:32%; left:16%; width:9%; height:14%; border:1px solid #eefcff; border-radius:65% 20% 65% 65%; background:#25bfff; box-shadow:0 1px 2px #157abe66; animation:portrait-sweat .85s linear infinite; animation-delay:calc(var(--drop) * -.21s); --sweat-x:-9px; }
.portrait-sweat:nth-of-type(even) { left:auto; right:16%; --sweat-x:9px; }
@keyframes portrait-sweat { 0% { opacity:0; transform:translate(0,-3px) rotate(-35deg) scale(.65); } 20% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translate(var(--sweat-x),14px) rotate(-35deg) scale(.9); } }
.progress-label { display:none; }
.board { gap:calc(17 * var(--wu)); padding:0; border:0; background:none; box-shadow:none; border-radius:0; }
.board > div { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(12 * var(--wu)); min-height:calc(170 * var(--wu)); border:calc(5 * var(--wu)) solid #092542; border-radius:calc(28 * var(--wu)); background:url('/shared/ui/hud-pattern.svg') center/cover no-repeat,linear-gradient(#275ea3,#173d74); box-shadow:inset 0 calc(5 * var(--wu)) #6fa9ed; }
.board > div + div { border-left:calc(5 * var(--wu)) solid #092542; }
.board .label { font-size:calc(37 * var(--wu)); color:white; display:flex; align-items:center; gap:calc(12 * var(--wu)); letter-spacing:0; }
.board .label img { width:calc(60 * var(--wu)); height:calc(52 * var(--wu)); }
.board b,.board > div:nth-child(2) b { font:calc(69 * var(--wu))/1 var(--ui-font); color:white; -webkit-text-stroke:calc(7 * var(--wu)) #092542; paint-order:stroke fill; text-shadow:0 calc(3 * var(--wu)) #092542; }
.board small { font-family:var(--ui-font); font-size:.47em; }
.board > div:last-child { background:linear-gradient(#ead293,#ffedb5 50%,#dfb567); border-color:#583400; box-shadow:inset 0 calc(5 * var(--wu)) #fff8d9; }
.board .gold { color:#503118!important; }.board b.gold { -webkit-text-stroke-color:#fff2c9; text-shadow:none; }
.countdown,.countdown.go { top:39%; width:60%; height:30%; filter:none; font-family:var(--ui-font); }
.verdict { top:34%; width:51%; height:24%; filter:none; font-family:var(--ui-font); }
.notice { top:18%; max-width:85%; white-space:normal; font-family:var(--ui-font); font-size:clamp(16px,2vw,34px); padding:.5em 1em; }
.finish-overlay { font-family:var(--ui-font); }
.finish-cut { top:30%; left:15%; width:70%; height:24%; background:none; border:0; padding:0; transform:none; box-shadow:none; }
.finish-cut b { position:relative; display:block; width:100%; height:100%; }
.finish-cut span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.finish-viewfinder:after { display:none; }
.finish-report,.wall .result { left:9.1%; right:9.1%; bottom:3.7%; top:auto; width:auto; color:#0b1f4d; transform:none; animation:none; padding:0; background:none; border:0; border-radius:0; box-shadow:none; filter:drop-shadow(0 4px 5px #0003); text-align:left; }
.finish-report header,.result-header { height:calc(107 * var(--wu)); display:flex; align-items:center; gap:calc(30 * var(--wu)); padding:0 calc(40 * var(--wu)); border:0; background:#0c234c; clip-path:polygon(0 0,96% 0,100% 100%,0 100%); color:#c5ee64; }
.finish-report header i { width:calc(58 * var(--wu)); height:calc(54 * var(--wu)); transform:none; background:url('/shared/ui/finish-flag.svg') center/contain no-repeat; }
.finish-outcome,.result-header > span:first-child { font:calc(57 * var(--wu))/1 var(--ui-font); letter-spacing:0; }
.finish-report header small { display:none; }
.finish-records,.wall .result-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(16 * var(--wu)); margin:calc(16 * var(--wu)) 0 0; overflow:hidden; }
.finish-records article,.wall .result-counts article { min-height:calc(210 * var(--wu)); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:calc(25 * var(--wu)) calc(32 * var(--wu)); background:#c7f16c; color:#0b1f4d; border:calc(4 * var(--wu)) solid #182642; border-radius:calc(22 * var(--wu)); }
.finish-records article:first-child { background:#c7f16c; border-color:#182642; }
.finish-records article:last-child,.wall .result-counts article:last-child { background:#dce8f7; }
.finish-records small,.wall .result-counts small { font:calc(33 * var(--wu))/1.2 var(--ui-font); letter-spacing:0; }
.finish-records b,.wall .result-counts b { margin:calc(14 * var(--wu)) 0 0; font:calc(82 * var(--wu))/1 var(--ui-font); letter-spacing:-.025em; white-space:nowrap; }
.finish-records em { display:none; }
.finish-overlay[data-outcome="lose"] .finish-records article:not(:last-child) { background:#dce8f7; }
.finish-overlay[data-outcome="draw"] .finish-records article:not(:last-child) { background:#fff1cc; }
.wall .result[data-outcome="timeout"] .result-header { background:#ff4747; color:#0b1f4d; }
.wall .result[data-outcome="timeout"] article:not(:last-child) { background:#f8d7d7; }
#result-best { font-size:calc(28 * var(--wu)); margin-left:auto; }
.wall .result { align-items:stretch; }
.duel-overlay { --wu:min(.052083333vw,.09259259dvh); }
.duel-player { border-color:#0b1f4d; border-width:calc(8 * var(--wu)); }
.duel-tag { top:3.7%; left:4.2%; padding:.3em .75em; font:calc(45 * var(--wu))/1.1 var(--ui-font); border:calc(4 * var(--wu)) solid #163e6b; border-radius:calc(20 * var(--wu)); color:#163e6b; background:#78c3f7; box-shadow:inset 0 calc(5 * var(--wu)) #d6f1ff,0 calc(5 * var(--wu)) #163e6b; }
.duel-player-2 .duel-tag { background:#ffa33a; border-color:#642901; color:#642901; box-shadow:inset 0 calc(5 * var(--wu)) #ffdf9f,0 calc(5 * var(--wu)) #642901; }
.duel-message { top:29%; left:5%; width:90%; height:22%; padding:0; font:calc(58 * var(--wu))/1.3 var(--ui-font); }
.duel-player progress { appearance:none; bottom:calc(218 * var(--wu)); height:calc(47 * var(--wu)); background:#406a93; border:calc(6 * var(--wu)) solid #092643; border-radius:99px; overflow:hidden; }
.duel-player progress::-webkit-progress-bar { background:#406a93; box-shadow:inset 0 calc(5 * var(--wu)) #1c4168; }
.duel-player progress::-webkit-progress-value { background:linear-gradient(#7ddfff,#24b8f6); border-radius:99px; }
.duel-player progress::-moz-progress-bar { background:#24b8f6; border-radius:99px; }
.duel-progress-pin { position:absolute; bottom:calc(210 * var(--wu)); width:calc(64 * var(--wu)); height:calc(64 * var(--wu)); transform:translateX(-50%); background:#75d8ff; border:calc(4 * var(--wu)) solid #1f5eb9; border-radius:50%; object-fit:contain; }
.duel-stats,.duel-setup { bottom:calc(30 * var(--wu)); left:5%; right:5%; height:calc(168 * var(--wu)); border:calc(5 * var(--wu)) solid #092542; border-radius:calc(24 * var(--wu)); background:linear-gradient(#245a9c,#173d74); box-shadow:inset 0 calc(5 * var(--wu)) #6fa9ed; padding:calc(20 * var(--wu)); }
.duel-stats span,.duel-setup span { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(18 * var(--wu)); }
.duel-stats span+span,.duel-setup span+span { border-left:calc(2 * var(--wu)) solid #79a7d5; }
.duel-setup span { border-right:0; }
.duel-stats small,.duel-setup small { font:calc(26 * var(--wu))/1 var(--ui-font); color:white; white-space:nowrap; }
.duel-stats b,.duel-setup b { font:calc(42 * var(--wu))/1 var(--ui-font); color:white; white-space:nowrap; }
.duel-overlay .duel-player[data-preview="true"] > progress { display:block; }
.duel-player[data-cinematic="true"] > .duel-progress-pin { display:none; }
.duel-player[data-cinematic="true"] > .duel-tag { top:3.7%; left:4.2%; right:auto; font-size:calc(36 * var(--wu)); }
.duel-player .finish-report { left:5%; right:5%; }
.duel-player .finish-report header { height:calc(80 * var(--wu)); padding:calc(12 * var(--wu)); gap:calc(15 * var(--wu)); }
.duel-player .finish-outcome { font-size:calc(40 * var(--wu)); }
.duel-player .finish-records { gap:calc(8 * var(--wu)); margin-top:calc(8 * var(--wu)); }
.duel-player .finish-records article { min-height:calc(164 * var(--wu)); padding:calc(18 * var(--wu)); border-radius:calc(15 * var(--wu)); }
.duel-player .finish-records small { font-size:calc(24 * var(--wu)); }
.duel-player .finish-records b { font-size:calc(50 * var(--wu)); }
.duel-podium h2 { margin-top:6%; font:calc(140 * var(--wu))/1 var(--ui-heading); color:#ffd43b; -webkit-text-stroke:calc(12 * var(--wu)) #0b1f4d; paint-order:stroke fill; text-shadow:0 calc(7 * var(--wu)) #0b1f4d; }
.podium-results { left:15%; right:15%; bottom:7.5%; gap:calc(28 * var(--wu)); }
.podium-results article { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:calc(24 * var(--wu)); width:50%; max-width:none; padding:calc(45 * var(--wu)) calc(25 * var(--wu)); border:calc(8 * var(--wu)) solid #0b1f4d; border-radius:calc(45 * var(--wu)); background:#fff1cc; color:#0b1f4d; }
.podium-results article[data-outcome="win"] { border-color:#0b1f4d; color:#0b1f4d; }
.podium-results b { font:calc(94 * var(--wu))/1 var(--ui-font); }
.podium-results span { font:calc(60 * var(--wu))/1 var(--ui-font); }
.podium-results small { color:white; font-size:calc(30 * var(--wu)); background:#2866c9; border-radius:99px; padding:.3em 1em; order:3; }
.podium-results article:nth-child(2) small { background:#df7722; }
.duel-podium > p { font:calc(27 * var(--wu))/1.2 var(--ui-font); }
@media(orientation:portrait) {
  :root { --wu:.08333333vw; }
  .wall .title,.wall[data-intro="true"] .title { width:76%; top:24%; }
  .wall[data-player-game="true"] .title,.wall[data-mode="lobby"] .title { top:3%; left:3%; width:35%; }
  .wall .top-bar { top:3%; left:5%; }.qr-box { width:24vw; height:24vw; }
  .wall .intro-invite { bottom:12%; }.intro-invite p { font-size:4.4vw; white-space:nowrap; -webkit-text-stroke-width:.75vw; }
  .wall .bottom { left:4%; right:4%; bottom:4%; gap:3vw; }
  .board > div { min-height:21vw; }.board .label { font-size:3.6vw; gap:1vw; }.board .label img { width:5vw; height:5vw; }.board b { font-size:6.5vw; }
  .wall .result,.finish-report { left:4%; right:4%; bottom:5%; }
  .finish-report header,.result-header { height:12vw; }.finish-outcome,.result-header>span:first-child { font-size:5.5vw; }
  .finish-records article,.wall .result-counts article { min-height:25vw; padding:3vw 2vw; }.finish-records small,.wall .result-counts small { font-size:3.4vw; }.finish-records b,.wall .result-counts b { font-size:7vw; }
  .countdown,.countdown.go { width:88%; height:22%; }.verdict { width:85%; height:18%; }
  .duel-overlay { --wu:.08333333vw; }.duel-message { top:25%; height:25%; }
  .duel-player .finish-report header { height:10vw; }.duel-player .finish-outcome { font-size:5vw; }.duel-player .finish-records article { min-height:19vw; }.duel-player .finish-records small { font-size:3vw; }.duel-player .finish-records b { font-size:6vw; }
  .duel-podium h2 { margin-top:10%; font-size:14vw; }.podium-results { left:4%; right:4%; bottom:14%; }.podium-results article { padding:6vw 3vw; }.podium-results b { font-size:11vw; }.podium-results span { font-size:7vw; }.podium-results small { font-size:3.8vw; }.duel-podium>p { bottom:8%; font-size:3.4vw; }
}
/* Gangneung intro: Ctrl+B hides every overlay while the 3D scene keeps running. */
html[data-edition="gangneung"][data-intro-ui-hidden] :is(body > :not(.wall), .wall > :not(#wall-canvas)),
html[data-edition="gangneung"][data-intro-ui-hidden] :is(body > :not(.wall), .wall > :not(#wall-canvas)) * {
  visibility:hidden!important;
  pointer-events:none!important;
}