@font-face{font-family:"Alfa Slab One";src:url(fonts/alfa.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/bc600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/bc700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#EFE6D2; --ink:#1C1A16; --brass:#B8893A; --brass-hi:#E2BE6E; --brass-lo:#7A5A22;
  --chalk:#4C82B5; --cloth:#1E5A3A; --ox:#6B1D24; --hall:#0E0C0A;
  --bg-paper: url(assets/paper.jpg);
  --card-ink:#1C1A16;
}
body.night{ --paper:#24201A; --ink:#EFE6D2; --card-ink:#0b0a08; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--hall);font-family:Barlow,sans-serif;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.slab{font-family:"Alfa Slab One",serif;font-weight:400;letter-spacing:.04em;text-transform:uppercase;margin:0;line-height:1}
.sub{font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.12em;font-size:13px;margin:.35em 0 0}

/* paper surfaces */
.paper{background-color:var(--paper);background-image:var(--bg-paper);background-size:512px}
body.night .paper{background-image:linear-gradient(rgba(20,17,13,.74),rgba(20,17,13,.74)),var(--bg-paper)}
.screen{position:absolute;inset:0;z-index:20;overflow:auto}
.card-paper{background:#EFE6D2 url(assets/paper.jpg);background-size:512px;color:#1C1A16;border:3px solid #1C1A16;border-radius:4px;box-shadow:6px 6px 0 var(--card-ink);position:relative}
body.night .card-paper{background-image:linear-gradient(rgba(20,17,13,.76),rgba(20,17,13,.76)),url(assets/paper.jpg);color:#EFE6D2;border-color:#B8893A;box-shadow:6px 6px 0 #000}

.brass-btn{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:20px;letter-spacing:.1em;padding:.55em 1.6em;color:#1C1A16;border:3px solid #1C1A16;border-radius:4px;
  background:linear-gradient(180deg,#F2D892 0%,#E2BE6E 18%,#B8893A 60%,#7A5A22 100%);box-shadow:3px 3px 0 #1C1A16;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.brass-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1C1A16}
.brass-btn:disabled{filter:grayscale(.8);opacity:.6}
.hbtn{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.08em;font-size:13px;padding:7px 10px;min-height:34px;border-radius:4px;border:2px solid #B8893A;background:rgba(14,12,10,.82);color:#EFE6D2}
.hbtn:active{background:#4C82B5}
.paper-btn{border-color:var(--ink);background:transparent;color:var(--ink)}
:focus-visible{outline:3px solid var(--chalk);outline-offset:2px}

/* ---------- TITLE ---------- */
#scrTitle{display:flex;align-items:center;justify-content:center;padding:18px}
.poster{text-align:center;max-width:760px;width:100%;padding:12px}
.poster h1{font-size:clamp(30px,6.4vw,60px)}
.crowns{display:flex;gap:clamp(12px,3vw,28px);justify-content:center;margin:clamp(14px,3vh,28px) 0}
.crown-card{flex:1;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(10px,2.2vh,22px) 10px 16px;background:transparent;border:3px solid var(--ink);border-radius:4px;position:relative;transition:transform .12s linear}
.crown-card img{width:min(78%,200px);height:clamp(70px,22vh,170px);object-fit:contain}
.crown-card .big{font-size:clamp(30px,6vw,54px)}
.crown-card .cap{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.12em;font-size:14px}
.crown-card::after{content:"";position:absolute;left:14%;right:14%;bottom:-3px;height:5px;background:var(--chalk);transform:scaleX(0);transition:transform .12s linear}
.crown-card:hover,.crown-card.sel{transform:translateY(-4px)}
.crown-card:hover::after,.crown-card.sel::after{transform:scaleX(1)}
.crown-card.sel{border-color:var(--chalk);box-shadow:inset 0 0 0 2px var(--chalk)}
.foot{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.14em;font-size:14px}
#btnNightT{position:absolute;top:12px;right:12px}

/* ---------- MAP ---------- */
#scrMap{display:flex;flex-direction:column;padding:10px clamp(10px,2vw,22px) 10px}
.map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.map-title h1{font-size:clamp(26px,4.4vw,46px)}
.plate{display:flex;align-items:center;gap:10px;background:#0E0C0A;color:#EFE6D2;border:3px solid #B8893A;border-radius:4px;padding:6px 8px 6px 10px;box-shadow:4px 4px 0 #1C1A16;min-width:0}
.plate>img{width:46px;height:40px;object-fit:contain;cursor:pointer}
.pl-mid{min-width:0}
.pl-name{font-family:"Barlow Condensed";font-weight:700;font-size:18px;letter-spacing:.06em;display:flex;align-items:center;gap:6px;white-space:nowrap}
.pl-name>span:first-child{overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.pl-tier{font-family:"Barlow Condensed";font-weight:700;color:#E2BE6E;font-size:13px;letter-spacing:.12em}
.pl-bar{height:4px;background:#3a3328;margin-top:3px;width:120px;max-width:100%}
.pl-bar i{display:block;height:100%;background:#4C82B5;width:0}
.map-body{flex:1;display:flex;gap:14px;min-height:0;align-items:center;justify-content:center;margin-top:6px}
.map-wrap{position:relative;flex:1;max-width:min(100%,calc((100vh - 170px) * 1.442));aspect-ratio:1024/710;border:3px solid var(--ink);border-radius:4px;overflow:hidden;box-shadow:5px 5px 0 var(--ink)}
body.night .map-wrap{box-shadow:5px 5px 0 #000;border-color:#B8893A}
#mapImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.night #mapImg{filter:invert(.9) sepia(.35) hue-rotate(180deg) brightness(.9)}
#route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#markers{position:absolute;inset:0}
.mk{position:absolute;transform:translate(-50%,-50%);width:4.2%;aspect-ratio:1;border-radius:50%;padding:0;border:2.5px solid #1C1A16;
  background:radial-gradient(circle at 35% 30%,#F2D892,#B8893A 55%,#7A5A22);box-shadow:2px 2px 0 #1C1A16;min-width:20px}
.mk::before{content:"";position:absolute;inset:22%;border-radius:50%;background:#1C1A16}
.mk.lock{opacity:.45;filter:grayscale(1)}
.mk.lock::before{background:transparent;border:2px solid #1C1A16}
.mk.cur{box-shadow:0 0 0 3px #EFE6D2,0 0 0 6px #4C82B5}
.mk.cur::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid #4C82B5;animation:pulse 2s linear infinite}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.45);opacity:0}}
.mk.final{width:6.2%;background:radial-gradient(circle at 35% 30%,#a8323c,#6B1D24 60%,#3d0f13)}
.mk.final::before{background:#EFE6D2;inset:26%}
.mk .crown-ic{position:absolute;left:50%;top:-62%;width:110%;transform:translateX(-50%);pointer-events:none}
.mk.sel{outline:3px solid #4C82B5;outline-offset:3px}
.tag{position:absolute;transform:translate(-50%,0);font-family:"Alfa Slab One";font-size:clamp(8px,1.15vw,14px);letter-spacing:.04em;background:#EFE6D2;color:#1C1A16;border:2px solid #1C1A16;border-radius:3px;padding:1px 4px;white-space:nowrap;pointer-events:none}
.tag.lock{opacity:.55}
.stamp{position:absolute;width:7.5%;transform:translate(-10%,-120%) rotate(-8deg);pointer-events:none;mix-blend-mode:multiply}
.stamp.fresh{animation:stampIn .28s steps(4) both}
@keyframes stampIn{0%{transform:translate(-10%,-120%) rotate(-8deg) scale(2.2);opacity:0}100%{transform:translate(-10%,-120%) rotate(-8deg) scale(1);opacity:1}}
.route-line{fill:none;stroke:#1C1A16;stroke-width:.45;stroke-dasharray:1.3 1;vector-effect:non-scaling-stroke}
body.night .route-line{stroke:#E2BE6E}
.tiers{width:170px;flex:none;border:3px solid var(--ink);border-radius:4px;align-self:center;background:rgba(239,230,210,.4)}
body.night .tiers{background:rgba(0,0,0,.3);border-color:#B8893A}
.tiers-h{font-family:"Alfa Slab One";font-size:15px;text-align:center;padding:6px;border-bottom:2px solid var(--ink)}
#tierList{list-style:none;margin:0;padding:0}
#tierList li{display:flex;gap:8px;align-items:center;font-family:"Barlow Condensed";font-weight:700;letter-spacing:.08em;font-size:14px;padding:5px 8px;border-bottom:1px solid rgba(28,26,22,.3)}
#tierList li b{width:18px;text-align:center;font-variant-numeric:tabular-nums}
#tierList li.done{opacity:.6;text-decoration:line-through}
#tierList li.cur{background:#4C82B5;color:#fff}
.map-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.legend{display:flex;gap:10px;font-family:"Barlow Condensed";font-weight:700;letter-spacing:.1em;font-size:13px;border:2px solid var(--ink);border-radius:4px;padding:5px 9px}
.legend span{display:flex;align-items:center;gap:5px}
.lg{width:13px;height:13px;border-radius:50%;border:2px solid #1C1A16;display:inline-block;background:#1C1A16}
.lg.cur{background:#EFE6D2;box-shadow:0 0 0 2px #4C82B5}
.lg.lock{background:#bbb;opacity:.6}
.foot-r{display:flex;gap:8px}
#btnPlay{min-width:200px}

/* portrait / narrow map */
@media (max-aspect-ratio:1/1){
  .map-body{flex-direction:column;align-items:stretch}
  .map-wrap{max-width:100%;width:100%;flex:none}
  .tiers{width:100%;align-self:stretch}
  #tierList{display:grid;grid-template-columns:1fr 1fr}
  .mk{width:5.2%}
  .mk.final{width:7.4%}
  .map-foot{justify-content:center}
  #btnPlay{order:-1;width:100%}
}

/* ---------- VIP badge ---------- */
.vip-badge{position:relative;width:46px;aspect-ratio:400/469;border:0;padding:0;background:transparent;flex:none}
.vip-badge .g,.vip-badge .d,.vip-badge .ghost,.vip-badge .sweep{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vip-badge .ghost{opacity:.28;filter:grayscale(1) contrast(1.4)}
body.night .vip-badge .ghost,.plate .vip-badge .ghost,.strip .vip-badge .ghost{opacity:.35;filter:grayscale(1) brightness(1.3)}
.vip-badge .d{opacity:1}
.vip-badge .sweep{-webkit-mask:url(assets/vip_diamond.webp) center/contain no-repeat;mask:url(assets/vip_diamond.webp) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:150% 0;animation:sweep 4.5s linear infinite;mix-blend-mode:screen}
@keyframes sweep{0%,70%{background-position:150% 0}100%{background-position:-50% 0}}
.vip-badge.big{width:min(30vw,150px)}
.vip-badge.revealing .d{-webkit-mask:conic-gradient(#000 var(--rv,0deg),transparent 0);mask:conic-gradient(#000 var(--rv,0deg),transparent 0)}
.vip-mini{position:relative;flex:none;display:flex;align-items:center}
.vip-mini .vip-badge{width:34px}

/* ---------- champion diamond tag ---------- */
.champ-tag{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100px;height:46px;flex:none}
.champ-tag img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.champ-tag b{position:relative;font-family:"Barlow Condensed";font-weight:700;font-size:12px;letter-spacing:.12em;color:#1C1A16;text-shadow:0 0 3px #fff,0 0 2px #fff}
.champ-tag::after{content:"";position:absolute;inset:0;-webkit-mask:url(assets/champ_diamond.webp) center/100% 100% no-repeat;mask:url(assets/champ_diamond.webp) center/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%) no-repeat;background-size:300% 100%;animation:sweep 4.5s linear infinite;mix-blend-mode:screen;pointer-events:none}
.champ-tag.small{width:74px;height:34px}
.champ-tag.small b{font-size:10px}
.champ-tag.large{width:200px;height:92px}
.champ-tag.large b{font-size:20px}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(14,12,10,.6);padding:14px}
.x{position:absolute;top:6px;right:8px;border:0;background:transparent;font-size:28px;line-height:1;color:inherit}
.ticket{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;padding:22px 22px 18px;text-align:center;color:#1C1A16;
  background:#EFE6D2 url(assets/paper.jpg);background-size:512px;border:3px solid #1C1A16;border-radius:4px;box-shadow:6px 6px 0 #000;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 22px repeat-y,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 22px repeat-y;
  mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 22px repeat-y,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 22px repeat-y}
.ticket h2{font-size:clamp(26px,7vw,36px)}
.vip-compare{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 8px}
.vip-compare>div{display:flex;flex-direction:column;align-items:center;flex:1}
.vip-compare .arrow{flex:none;font-size:26px;font-weight:700}
.vc-l{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.1em;font-size:15px;margin-top:4px}
.vc-s{font-size:12px}
.price{font-family:"Barlow Condensed";font-weight:700;font-size:clamp(22px,6vw,30px);letter-spacing:.06em;font-variant-numeric:tabular-nums;margin:10px 0 12px;border-top:2px dashed #1C1A16;border-bottom:2px dashed #1C1A16;padding:6px 0}
.fine-print{font-size:12px;margin:10px 0 0}
.confirm{margin-top:12px;border:2px solid #1C1A16;border-radius:4px;padding:10px;font-size:14px;background:rgba(255,255,255,.35)}
.confirm .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.confirm .paper-btn{color:#1C1A16;border-color:#1C1A16}
.owned{font-family:"Alfa Slab One";font-size:22px;margin-top:10px;color:#1C1A16}
.help{width:min(520px,100%);padding:20px 22px;max-height:100%;overflow:auto}
.help ul{padding-left:18px;font-size:15px;line-height:1.45}
.help h2{font-size:28px}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;color:#EFE6D2}
#hud button,#meter{pointer-events:auto}
.strip{position:absolute;top:max(8px,env(safe-area-inset-top));display:flex;align-items:stretch;gap:6px;background:linear-gradient(#1a1712,#0E0C0A);border:2px solid #B8893A;border-radius:4px;
  box-shadow:inset 0 0 0 1px #7A5A22,0 0 0 1px #000;padding:4px 6px;max-width:calc(50vw - 14px);min-width:0}
.strip.left{left:8px}
.strip.right{right:8px}
.strip.active{box-shadow:inset 0 0 0 1px #7A5A22,0 0 0 1px #000;border-top:2px solid #B8893A}
.strip::before{content:"";position:absolute;left:-2px;right:-2px;top:-6px;height:4px;background:#4C82B5;transform:scaleX(0);transition:transform .15s linear}
.strip.active::before{transform:scaleX(1)}
.sb-av{width:38px;display:flex;align-items:center;justify-content:center;flex:none}
.sb-av img{width:38px;height:34px;object-fit:contain}
#stripR .sb-av img{background:radial-gradient(circle,#8a7a60,#4a4032);border-radius:3px;border:1px solid #7A5A22}
.sb-mid{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.sb-name{font-family:"Barlow Condensed";font-weight:700;font-size:16px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.sb-name>span:first-child{overflow:hidden;text-overflow:ellipsis}
.sb-balls{display:flex;gap:2px;min-height:16px}
.mb{width:16px;height:16px;border-radius:50%;flex:none;position:relative;font:700 8px/16px "Barlow Condensed";text-align:center;color:#1C1A16;opacity:.28;filter:grayscale(.4)}
.mb::after{content:attr(data-n);position:absolute;inset:4px;border-radius:50%;background:#fff;line-height:8px;font-size:7px}
.mb.st{background-image:linear-gradient(#fff 0 22%,transparent 22% 78%,#fff 78%)!important}
.mb.in{opacity:1;filter:none}
.mb.open{width:auto;opacity:.8;font-size:12px;color:#E2BE6E;filter:none;background:none!important;letter-spacing:.1em;line-height:16px}
.mb.open::after{display:none}
.sb-score{font-family:"Barlow Condensed";font-weight:700;font-size:26px;min-width:30px;display:flex;align-items:center;justify-content:center;border-left:1px solid #7A5A22;padding-left:6px;font-variant-numeric:tabular-nums}
.strip.right .sb-score{border-left:0;border-right:1px solid #7A5A22;padding:0 6px 0 0}
#meter{position:absolute;right:max(10px,env(safe-area-inset-right));top:50%;transform:translateY(-38%);width:56px;height:min(44vh,300px);display:flex;flex-direction:column;align-items:center;touch-action:none}
.m-frame{flex:1;width:26px;border:3px solid #B8893A;border-radius:14px;background:#0E0C0A;box-shadow:inset 0 0 0 2px #7A5A22,0 0 0 2px #000;position:relative;overflow:hidden}
.m-fill{position:absolute;left:3px;right:3px;bottom:3px;height:0;border-radius:9px;background:linear-gradient(#7fb0dd,#4C82B5)}
.m-lab{font-family:"Barlow Condensed";font-weight:700;font-size:12px;letter-spacing:.12em;margin-top:5px;text-shadow:0 1px 2px #000}
.m-hint{position:absolute;top:30%;right:58px;font-family:"Barlow Condensed";font-weight:700;font-size:11px;letter-spacing:.1em;text-align:right;opacity:.7;text-shadow:0 1px 2px #000}
#meter.off{opacity:.35;pointer-events:none}
#topBtns{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px}
#fine{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px}
#fine .hbtn{width:44px;height:40px}
#hint{position:absolute;left:max(10px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));font-size:12px;max-width:34vw;color:#EFE6D2;opacity:.8;text-shadow:0 1px 2px #000}
#btnPlace{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);pointer-events:auto}
#banner{position:absolute;left:0;right:0;top:40%;display:flex;justify-content:center;pointer-events:none;overflow:hidden;height:64px}
#banner span{font-family:"Alfa Slab One";font-size:clamp(20px,4vw,34px);letter-spacing:.06em;background:#EFE6D2;color:#1C1A16;border:3px solid #1C1A16;border-radius:4px;padding:8px 22px;box-shadow:4px 4px 0 #000;transform:translateX(-120vw);white-space:nowrap}
#banner span.foul{background:#6B1D24;color:#EFE6D2;border-color:#B8893A}
#banner span.go{animation:slide 1.7s linear both}
@keyframes slide{0%{transform:translateX(-110vw)}14%{transform:translateX(0)}84%{transform:translateX(0)}100%{transform:translateX(110vw)}}
#turnTag{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 66px);left:50%;transform:translateX(-50%);font-family:"Barlow Condensed";font-weight:700;letter-spacing:.14em;font-size:14px;background:rgba(14,12,10,.75);border:1px solid #7A5A22;padding:3px 10px;border-radius:3px;white-space:nowrap}

@media (max-width:640px){
  .strip{padding:3px 4px;gap:4px}
  .sb-av{width:28px}.sb-av img{width:28px;height:26px}
  .sb-name{font-size:13px}
  .mb{width:12px;height:12px}.mb::after{inset:3px;font-size:0}
  .sb-score{font-size:20px;min-width:22px}
  .vip-mini .vip-badge{width:22px}
  .champ-tag.small{width:54px;height:25px}
  .champ-tag.small b{font-size:8px;letter-spacing:.06em}
  .sb-name>span:first-child{min-width:26px}
  #hint{display:none}
  #fine{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 48px)}
  #turnTag{top:calc(max(8px,env(safe-area-inset-top)) + 70px)}
  #topBtns{flex-direction:column;align-items:flex-start;bottom:max(10px,env(safe-area-inset-bottom))}
  .hbtn{font-size:11px;padding:6px 7px}
}
@media (max-height:420px){
  #meter{height:52vh}
}

/* ---------- cards ---------- */
#scrCard{display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(14,12,10,.55)}
#cardInner{width:min(560px,100%);max-height:100%;overflow:auto;padding:22px;text-align:center}
#cardInner h1{font-size:clamp(30px,8vw,56px)}
#cardInner h2{font-size:clamp(18px,4.5vw,28px);margin-top:6px}
.c-ox{color:#6B1D24}
body.night .c-ox{color:#d9606a}
.c-frame{border:3px solid #6B1D24;outline:2px solid #B8893A;outline-offset:3px;padding:14px;margin:10px 0}
.c-sky{width:100%;max-height:30vh;object-fit:contain;mix-blend-mode:multiply}
body.night .c-sky{mix-blend-mode:normal;filter:invert(.9) sepia(.35) hue-rotate(180deg)}
.c-final{display:inline-block;background:#6B1D24;color:#EFE6D2;border:2px solid #B8893A;padding:10px 16px;font-family:"Barlow Condensed";font-weight:700;letter-spacing:.1em}
.c-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.c-meta{font-family:"Barlow Condensed";font-weight:700;letter-spacing:.12em;font-size:15px;margin-top:8px}
.champ-art{position:relative;width:min(300px,70vw);margin:8px auto;aspect-ratio:1.1}
.champ-art .laurel{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
body.night .champ-art .laurel{mix-blend-mode:normal;filter:invert(.85)}
.champ-art .crown{position:absolute;left:18%;top:14%;width:64%;object-fit:contain}
.champ-art .seal{position:absolute;right:-4%;bottom:-2%;width:44%;transform:rotate(-14deg);animation:sealIn .3s steps(3) .5s both}
@keyframes sealIn{0%{transform:rotate(-14deg) scale(2.4);opacity:0}100%{transform:rotate(-14deg) scale(1);opacity:1}}
.res-stamp{width:min(180px,40vw);transform:rotate(-8deg);margin:8px auto;display:block;animation:sealIn .3s steps(3) .2s both}
body.night .res-stamp{filter:invert(.9)}

#loading{display:flex;align-items:center;justify-content:center;z-index:50;text-align:center}
#loading h1{font-size:40px}

/* short landscape phones: keep the champion name and diamond in view */
@media (max-height:480px){
  #cardInner{padding:12px}
  #cardInner .c-frame{padding:8px;margin:4px 0}
  .champ-art{width:auto;height:30vh;aspect-ratio:1.1;margin:2px auto}
  #cardInner h1{font-size:clamp(22px,6vh,40px)}
  .c-sky{max-height:20vh}
  .c-row{margin-top:8px}
}

/* the hint would run under the button row on narrower screens; ? and the meter label carry it there */
@media (max-width:1180px){#hint{display:none}}