/* MOCHI FORCE — arcade shell. 16:9, made for a TV/big screen. */
@font-face{font-family:"Luxia";src:url("../fonts/luxia-regular.otf") format("opentype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../fonts/euclid-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../fonts/euclid-semibold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../fonts/euclid-bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --velvet:#470054; --velvet-deep:#1c0022; --pure:#fff; --walnut:#e7d8c3;
  --olive:#c0caa0; --skin:#e7b997; --hillside:#90a572; --oak:#7c3d00;
  --font-head:"Luxia",Palatino,Georgia,serif;
  --font-body:"Euclid Circular A","Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#000}
body{font-family:var(--font-body);color:var(--pure);user-select:none;cursor:default}

/* 16:9 letterboxed stage */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#game{background:var(--velvet-deep);width:100%;height:100%;object-fit:contain}

.ui{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:14px;padding:4vmin;
  background:radial-gradient(120% 100% at 50% 0%, rgba(93,26,107,.97) 0%, rgba(71,0,84,.97) 45%, rgba(28,0,34,.99) 100%)}
.ui.active{display:flex}

/* ---------- title (art-deco frame + gilded type) ---------- */
.ui::before{content:"";position:absolute;inset:2.2vmin;pointer-events:none;
  border:1px solid rgba(231,216,195,.35);border-radius:4px;
  outline:1px solid rgba(231,216,195,.14);outline-offset:5px}
.ui::after{content:"✦";position:absolute;top:1.1vmin;left:50%;transform:translateX(-50%);
  color:rgba(231,216,195,.6);font-size:clamp(.8rem,1.6vw,1.2rem);pointer-events:none}
.t-logo{width:clamp(140px,16vw,240px);filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.t-chip{font-size:clamp(.7rem,1.4vw,1rem);font-weight:600;letter-spacing:.08em;color:var(--walnut);
  border:1px solid rgba(231,216,195,.45);border-radius:999px;padding:.5em 1.4em;
  background:rgba(20,0,26,.3)}
.t-wordmark{width:clamp(320px,44vw,680px);filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))}
.t-subtitle{width:clamp(220px,28vw,430px);filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
.t-story{max-width:56ch;color:var(--walnut);font-size:clamp(.85rem,1.6vw,1.15rem);line-height:1.55}
.t-story strong{color:var(--pure)}
.t-join{display:flex;gap:2vw;margin-top:.6vmin}
.join-slot{display:flex;flex-direction:column;gap:.3em;padding:1.2em 2.2em;min-width:13em;
  transition:all .2s;border:16px solid transparent;
  border-image:url("../assets/ui/ui_card.png") 96 fill / 16px stretch;
  color:#3a2440;filter:saturate(.92)}
.join-slot .js-num{color:#470054}
.join-slot.ready{filter:none;box-shadow:0 0 22px rgba(192,202,160,.35)}
.js-num{font-family:var(--font-head);font-size:clamp(1.2rem,2.6vw,2rem)}
.js-state{font-size:clamp(.75rem,1.4vw,1rem);color:#6d5974}
.join-slot.ready .js-state{color:#5f7a44;font-weight:700}
.t-press{font-size:clamp(.8rem,1.6vw,1.1rem);color:var(--pure);opacity:.9;animation:blink 1.4s step-end infinite}
@keyframes blink{50%{opacity:.35}}
.t-sponsor{font-size:clamp(.6rem,1.1vw,.8rem);color:rgba(255,255,255,.5);max-width:60ch}

/* ---------- win ---------- */
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.w-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.6vmin}
.w-logo{width:clamp(110px,12vw,180px)}
.w-medal{width:clamp(72px,9vw,120px);aspect-ratio:1;
  background-image:url("../assets/ui/ui_medals.png");background-size:300% 100%;
  background-position:0% 0;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.w-tier{font-size:clamp(.8rem,1.6vw,1.1rem);font-weight:600;letter-spacing:.1em;color:var(--walnut);
  border:1px solid rgba(231,216,195,.5);border-radius:999px;padding:.45em 1.6em}
.w-head{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,5vw,3.6rem)}
.w-stats{color:var(--walnut);font-size:clamp(1rem,2.2vw,1.5rem)}
.w-stats span{font-family:var(--font-head);color:var(--pure)}
.w-claimrow{display:flex;gap:2.4vw;align-items:stretch;margin-top:1vmin}
.prize-card{color:#2b0f33;padding:1.6em 2.4em;display:flex;flex-direction:column;justify-content:center;
  border:18px solid transparent;
  border-image:url("../assets/ui/ui_card.png") 96 fill / 18px stretch;
  filter:drop-shadow(0 16px 50px rgba(0,0,0,.45))}
.p-label,.p-codelabel{font-size:.72em;letter-spacing:.09em;text-transform:uppercase;color:#6d5974}
.p-name{font-family:var(--font-head);font-size:clamp(1.2rem,2.6vw,1.9rem);color:var(--velvet);margin:.15em 0 .7em}
.p-code{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;letter-spacing:.14em;color:var(--oak)}
.qr-card{background:rgba(255,255,255,.1);border-radius:18px;padding:1.2em;display:flex;
  flex-direction:column;align-items:center;gap:.7em;font-size:clamp(.75rem,1.5vw,1rem);line-height:1.4}
.qr-card img{width:clamp(110px,14vw,180px);border-radius:10px;background:#fff;padding:.4em}
.w-press{margin-top:1.2vmin;animation:blink 1.4s step-end infinite;font-size:clamp(.85rem,1.7vw,1.15rem)}

/* ---------- announcements ---------- */
#announce{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(0);
  font-family:var(--font-head);font-size:clamp(1.2rem,3.4vw,2.7rem);color:#470054;
  max-width:88vw;padding:.85em 2.6em;
  background:url("../assets/ui/ui_ribbon.png") center / 100% 100% no-repeat;
  text-shadow:none;white-space:nowrap;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45));
  transition:transform .22s cubic-bezier(.2,1.6,.4,1);pointer-events:none;z-index:20}
#announce.show{transform:translate(-50%,-50%) scale(1)}