.screenpage{--frame:20px;overflow:hidden;height:100dvh}
.stage{height:100dvh;padding:calc(var(--frame) + 8px);display:grid;grid-template-rows:auto 1fr auto;gap:6px}
.shead{display:flex;align-items:center;gap:18px;min-width:0}
.shead .logo{width:clamp(64px,8vh,96px);border-radius:50%}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .title{font-size:clamp(44px,6.4vh,72px)}
.brand .subtitle{font-size:max(28px,2.4vh)}
.banner{flex:1;text-align:center;font-family:var(--ruqaa);color:var(--navy);font-size:max(30px,3.6vh);line-height:1.15;min-width:0}
.banner b{color:var(--c,var(--gold))}
.meta{display:flex;flex-direction:column;align-items:flex-end;font-size:max(28px,2.6vh);font-weight:700;color:var(--navy);white-space:nowrap}
.meta #phase{font-family:var(--ruqaa);color:var(--gold);text-shadow:0 1px 0 #4a3216}
.ctrls{display:flex;flex-direction:column;gap:4px;position:relative;z-index:80}
.ctrls .btn{font-size:28px;padding:4px 10px;min-height:48px}
.ctrls .btn.on{background:var(--navy);color:var(--gold2)}
.cdot{position:absolute;top:-6px;left:-6px;width:12px;height:12px;border-radius:50%;background:var(--green)}
.cdot.off{background:var(--red);animation:pulse 1s infinite}
.mapzone{position:relative;min-height:0}
.map.big{--seal:min(13.2vh,8.6vw);--nm:max(28px,2.7vh)}
.map.big .seal-val{font-size:32px}
.score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:14px;align-items:stretch;min-width:0}
.plq{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;padding:6px 14px;background:rgba(246,234,208,.72);border:2px solid var(--c);outline:1px solid var(--gold);outline-offset:-6px;transition:transform .4s;min-width:0}
.plq.turn{transform:translateY(-6px);box-shadow:0 6px 0 var(--c)}
.plq .sw{width:max(44px,5vh);height:max(44px,5vh)}
.plq .sw svg{width:100%;height:100%}
.plq .nm{font-family:var(--ruqaa);font-size:max(30px,3.4vh);color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plq .st{grid-column:1/-1;display:flex;justify-content:space-between;gap:6px;font-size:max(28px,2.6vh);font-weight:700;white-space:nowrap}
.plq .st small{font-size:max(28px,2vh);font-weight:400;opacity:.8}
.purse-ic{display:inline-block}
.bank{display:flex;align-items:center;gap:8px;padding:4px 16px;background:var(--navy);color:var(--gold2);font-family:var(--ruqaa);font-size:max(28px,2.8vh);box-shadow:inset 0 0 0 2px var(--gold)}
.bank svg{width:max(44px,5vh)}
.coin{position:fixed;z-index:90;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#d9b25c 45%,#8a6318);box-shadow:inset 0 0 0 2px #7a5813;pointer-events:none;transition:transform .9s cubic-bezier(.5,-.3,.6,1),opacity .9s}

/* overlays inside map zone */
.ov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.scrollcard{max-width:88%;padding:3.4vh 4vw;background:linear-gradient(180deg,#f6ead0,#ead6a6);border:3px solid var(--navy);outline:2px solid var(--gold);outline-offset:-10px;box-shadow:0 20px 50px rgba(40,24,4,.45);text-align:center;animation:unfurl .6s cubic-bezier(.2,.9,.3,1.1) both;position:relative}
.scrollcard::before,.scrollcard::after{content:"";position:absolute;left:-14px;right:-14px;height:18px;border-radius:9px;background:linear-gradient(180deg,#c9a463,#7a5520)}
.scrollcard::before{top:-12px}.scrollcard::after{bottom:-12px}
@keyframes unfurl{from{transform:scaleY(.05);opacity:0}}
.qhead{font-family:var(--ruqaa);font-size:max(32px,3.6vh);color:var(--gold);text-shadow:0 1px 0 #4a3216}
.qcat{font-size:max(28px,2.4vh);opacity:.8}
.qbody{font-size:max(48px,5.4vh);font-weight:700;color:var(--navy);line-height:1.5;margin-top:1.5vh}
.qans{margin-top:2vh;padding:1.4vh 2vw;font-size:max(44px,5vh);font-weight:700;color:#fff8e6;animation:stamp .6s both}
.qans.ok{background:var(--green)}.qans.bad{background:var(--red)}
.verdict{margin-top:1.4vh;font-family:var(--ruqaa);font-size:max(44px,5vh)}
.verdict.ok{color:var(--green)}.verdict.bad{color:var(--red)}
.bids{display:flex;gap:3vw;align-items:flex-end;justify-content:center;width:100%}
.bid{width:min(24vw,340px);height:min(42vh,420px);position:relative;perspective:900px}
.bid .roll{position:absolute;inset:0;transform-origin:top;background:linear-gradient(180deg,#f6ead0,#e4cf9f);border:3px solid var(--c);box-shadow:0 14px 30px rgba(40,24,4,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;transition:transform .7s cubic-bezier(.2,.9,.3,1.2),opacity .5s,box-shadow .5s;transform:scaleY(.22) translateY(-30%)}
.bid .roll::before{content:"";position:absolute;top:-14px;left:-10px;right:-10px;height:22px;border-radius:11px;background:linear-gradient(180deg,#c9a463,#7a5520)}
.bid .wax{position:absolute;bottom:-20px;width:70px;height:70px;transition:opacity .3s}
.bid .tn{font-family:var(--ruqaa);font-size:max(34px,3.8vh);color:var(--c)}
.bid .amt{font-size:max(72px,10vh);font-weight:700;color:var(--navy);opacity:0;transition:opacity .4s .3s}
.bid .lbl{font-size:max(28px,2.4vh);opacity:0;transition:opacity .4s .3s}
.bid.open .roll{transform:none}.bid.open .amt,.bid.open .lbl{opacity:1}.bid.open .wax{opacity:0}
.bid.win .roll{box-shadow:0 0 0 6px var(--gold2),0 0 60px 18px rgba(217,178,92,.75);border-color:var(--gold)}
.bid.fade .roll{opacity:.35}
.bid.out .roll{opacity:.3}
.revealtitle{position:absolute;top:1vh;left:0;right:0;text-align:center;font-family:var(--ruqaa);font-size:max(40px,4.6vh);color:var(--navy)}
.swords{position:absolute;width:min(14vh,140px);height:min(14vh,140px);transform:translate(-50%,-50%);pointer-events:none;z-index:5}
.swords svg{width:100%;height:100%;animation:clash .8s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 3px 2px rgba(60,10,10,.4))}
@keyframes clash{from{transform:scale(2.2) rotate(-30deg);opacity:0}}

.intro{position:fixed;inset:var(--frame);z-index:40;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(246,234,208,.97),rgba(228,207,159,.97))}
.intro .logo{width:min(38vh,380px);border-radius:50%;margin:0 auto}
.intro .title{font-size:min(16vh,170px)}
.intro .subtitle{font-size:max(34px,4vh)}
.intro p{font-size:max(30px,3vh)}
.screenpage .ctrls{position:fixed;top:calc(var(--frame) + 12px);left:calc(var(--frame) + 12px)}
.shead{padding-left:220px}
.screenpage .intro{padding:35px}
@media(max-width:1400px){
  .score{gap:8px}
  .plq{padding:7px 10px}
  .plq .st{gap:2px}
  .plq .st>span{display:flex;flex-direction:column;align-items:center;line-height:1.2}
  .bank{flex-direction:column;justify-content:center;padding:8px;font-size:28px}
  .brand .subtitle{font-size:28px;max-width:310px}
  .scrollcard{padding:2vh 3vw}
  .qbody{font-size:48px;line-height:1.35}
}
.intro .tms{display:flex;gap:4vw;justify-content:center;margin-top:3vh}
.intro .tms b{font-family:var(--ruqaa);font-size:max(40px,5vh);color:var(--c)}
.mini{position:fixed;inset:var(--frame);z-index:60;display:grid;place-items:center;transform:translateX(105%);transition:transform .8s cubic-bezier(.7,0,.2,1);
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b8892b' stroke-opacity='.35' stroke-width='1'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3Cpath d='M0 20h6M34 20h6M20 0v6M20 34v6'/%3E%3C/g%3E%3C/svg%3E");}
.mini.show{transform:none}
.mini.small{inset:auto var(--frame) var(--frame) var(--frame);height:auto;padding:2vh}
.mini .mcard{background:linear-gradient(180deg,#f6ead0,#e4cf9f);border:4px double var(--gold);outline:3px solid var(--navy);outline-offset:-14px;padding:5vh 6vw;text-align:center;min-width:60%}
.mini h2{font-family:var(--ruqaa);font-size:min(14vh,150px);margin:0;color:var(--gold);text-shadow:0 2px 0 #4a3216,0 6px 14px rgba(0,0,0,.3)}
.mini p{font-size:max(32px,3.4vh);color:var(--navy)}
.mini .mscore{display:flex;gap:3vw;justify-content:center;margin-top:2vh}
.mini .mscore div{border-top:6px solid var(--c);padding:1vh 1.4vw;font-size:max(28px,2.8vh);font-weight:700}
.mini .mscore b{display:block;font-family:var(--ruqaa);color:var(--c);font-size:max(36px,4vh)}
.mini.small .mcard{padding:1.4vh 3vw}.mini.small h2{font-size:max(44px,5vh)}.mini.small .mscore{display:none}
.ceremony{position:fixed;inset:var(--frame);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(17,29,69,.6),rgba(17,29,69,.88));overflow:hidden}
.ceremony h2{font-family:var(--ruqaa);color:var(--gold2);font-size:max(56px,7vh);margin:0;text-shadow:0 3px 0 #000a}
.podium{display:flex;gap:3vw;align-items:flex-end;margin-top:3vh}
.pl{width:min(26vw,360px);text-align:center;padding:2vh 1vw;background:linear-gradient(180deg,#f6ead0,#e4cf9f);border:3px solid var(--c);opacity:0;transform:translateY(40px) scale(.9);transition:.8s cubic-bezier(.2,1.4,.4,1)}
.pl.in{opacity:1;transform:none}
.pl .rk{font-family:var(--ruqaa);font-size:max(40px,5vh);color:var(--gold)}
.pl .n{font-family:var(--ruqaa);font-size:max(40px,5vh);color:var(--c)}
.pl .p{font-size:max(30px,3.2vh);font-weight:700}
.pl.first{order:2;padding:3vh 1vw}.pl.second{order:1}.pl.third{order:3}
.pl .bigseal{width:min(22vh,220px);margin:0 auto;display:block;animation:stamp 1s both}
.dust{position:absolute;top:-10px;width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 6px #ffe7a0;animation:fall var(--d) linear var(--dl) infinite;opacity:.9}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(360deg)}}