@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* ===== 1st Integrity Arcade — responsive CRT cabinet shell ===== */
/* Retro grid backdrop (shows around the play area; canvas stays crisp on top) */
body{
  background-color:#070708 !important;
  background-image:
    radial-gradient(circle at 50% -8%, rgba(220,38,38,.13), transparent 55%),
    linear-gradient(rgba(220,38,38,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,38,38,.045) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
}
/* Vignette — frames the screen like a tube */
html::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2147482000;
  box-shadow: inset 0 0 170px rgba(0,0,0,.6), inset 0 0 45px rgba(0,0,0,.45);
}
/* Scanlines (+ gentle flicker) */
html::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity:.36; mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:no-preference){
  html::after{ animation: crt-flicker 7s steps(40) infinite; }
  @keyframes crt-flicker{ 0%,96%{opacity:.36} 97%{opacity:.28} 98%{opacity:.42} 100%{opacity:.36} }
}
/* Cabinet bezel around the play area — shadow only, so it never shifts layout */
.wrap{
  border-radius:16px;
  box-shadow:
    0 0 0 2px rgba(220,38,38,.55),
    0 0 0 11px #0c0c0e,
    0 0 0 13px rgba(255,255,255,.05),
    0 22px 60px rgba(0,0,0,.6),
    inset 0 0 70px rgba(0,0,0,.55);
}
@media (orientation:portrait){
  .wrap{ box-shadow:
    0 0 0 2px rgba(220,38,38,.55),
    0 0 0 15px #0c0c0e,
    0 0 0 17px rgba(255,255,255,.05),
    0 22px 60px rgba(0,0,0,.6),
    inset 0 0 70px rgba(0,0,0,.55); }
}
/* Retro title font — lobby marquee word only (short, safe, responsive) */
.marquee h1{
  font-family:'Press Start 2P', ui-monospace, monospace !important;
  font-size:clamp(1.3rem,7vw,2.4rem) !important;
  line-height:1.5 !important; letter-spacing:1px;
  text-shadow:0 0 14px rgba(220,38,38,.6);
}
 
/* ===== FINISH PASS — arcade UI polish ===== */
.btn{background:linear-gradient(180deg,#e7423f,#b91c1c)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 2px 0 #7d1111,0 5px 14px rgba(220,38,38,.32),inset 0 1px 0 rgba(255,255,255,.28)!important;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .08s,filter .15s,box-shadow .15s!important}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px)!important;box-shadow:0 0 0 #7d1111,0 2px 8px rgba(220,38,38,.3),inset 0 1px 0 rgba(255,255,255,.28)!important}
.cab{background:linear-gradient(180deg,#1b1b21,#0e0e12)!important;border:1px solid rgba(220,38,38,.30)!important;box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)!important;transition:transform .14s,box-shadow .2s,border-color .2s!important}
.cab:hover{transform:translateY(-3px)!important;border-color:#DC2626!important;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 22px rgba(220,38,38,.25)!important}
.cab h3{text-shadow:0 0 10px rgba(220,38,38,.30)}
.marquee h1{text-shadow:0 0 18px rgba(220,38,38,.7),0 0 4px rgba(255,130,130,.6)!important}
.ti,#ov h2{text-shadow:0 0 12px rgba(220,38,38,.45)}
@keyframes crt-on{0%{opacity:0;filter:brightness(1.7) blur(1px)}100%{opacity:1;filter:none}}
.wrap{animation:crt-on .5s ease-out 1}

/* ===== REWARDS strip + GOLD mode ===== */
#arc-rewards{max-width:560px;margin:.2rem auto 0;padding:0 12px}
.arcrew{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;background:rgba(18,18,22,.6);border:1px solid rgba(220,38,38,.25);border-radius:10px;padding:.45rem .8rem;font-family:ui-monospace,Menlo,monospace;font-size:.7rem;color:#cdd0d6}
.arclbl{color:#DC2626;font-weight:700;letter-spacing:.12em}
.arcbar{flex:1;min-width:110px;height:8px;background:#0c0c0e;border:1px solid rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.arcbar-i{height:100%;background:linear-gradient(90deg,#DC2626,#ff6a6a);transition:width .45s}
.arcsub{white-space:nowrap}.arcsub b{color:#fff}
.arcgold{background:linear-gradient(180deg,#f4c542,#caa01f);color:#1a1407;border:0;border-radius:99px;font-weight:800;font-family:inherit;font-size:.68rem;padding:.4rem .85rem;cursor:pointer;letter-spacing:.04em}
.arcgold.on{box-shadow:0 0 14px rgba(240,176,32,.6)}
body.gold{background-image:radial-gradient(circle at 50% -8%,rgba(240,176,32,.14),transparent 55%),linear-gradient(rgba(240,176,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(240,176,32,.05) 1px,transparent 1px)!important}
body.gold .wrap{box-shadow:0 0 0 2px rgba(240,176,32,.6),0 0 0 11px #0c0c0e,0 0 0 13px rgba(255,255,255,.06),0 22px 60px rgba(0,0,0,.6),inset 0 0 70px rgba(0,0,0,.55)!important}
body.gold .marquee h1{color:#ffcc33!important;text-shadow:0 0 18px rgba(240,176,32,.85),0 0 4px rgba(255,225,140,.8)!important}
body.gold .cab{border-color:rgba(240,176,32,.32)!important}
body.gold .cab:hover{border-color:#ffcc33!important;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 22px rgba(240,176,32,.3)!important}
body.gold .cab h3{text-shadow:0 0 10px rgba(240,176,32,.35)}
body.gold .btn{background:linear-gradient(180deg,#f4c542,#caa01f)!important;box-shadow:0 2px 0 #8a6a10,0 5px 14px rgba(240,176,32,.32),inset 0 1px 0 rgba(255,255,255,.4)!important;color:#1a1407!important;text-shadow:none!important}
body.gold .ti{color:#ffcc33!important}
body.gold .badge.play{background:#f4c542!important;color:#1a1407!important}
body.gold .arclbl{color:#caa01f!important}
body.gold .arcbar-i{background:linear-gradient(90deg,#caa01f,#ffd76a)!important}
/* ---- skin picker ---- */
.arcskins{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:.45rem auto 0;max-width:560px;padding:0 12px}
.arcth{background:#15151a;color:#cdd0d6;border:1px solid rgba(255,255,255,.16);border-radius:99px;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:.6rem;padding:.32rem .58rem;cursor:pointer;letter-spacing:.04em}
.arcth.on{background:linear-gradient(180deg,#DC2626,#9b1c1c);color:#fff;border-color:transparent}
.arcth.lock{opacity:.42;cursor:not-allowed}
body.gold .arcth.on{background:linear-gradient(180deg,#f4c542,#caa01f);color:#1a1407}
body.gb .arcth.on{background:linear-gradient(180deg,#8bac0f,#306230);color:#0f380f}
body.amber .arcth.on{background:linear-gradient(180deg,#ffb000,#b87800);color:#241500}
/* ---- GAME BOY (DMG) skin ---- */
body.gb{background-image:radial-gradient(circle at 50% -8%,rgba(155,188,15,.14),transparent 55%),linear-gradient(rgba(139,172,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,172,15,.05) 1px,transparent 1px)!important}
body.gb .wrap{box-shadow:0 0 0 2px rgba(139,172,15,.55),0 0 0 11px #0c0c0e,0 0 0 13px rgba(255,255,255,.05),0 22px 60px rgba(0,0,0,.6),inset 0 0 70px rgba(0,0,0,.55)!important}
body.gb .marquee h1{color:#9bbc0f!important;text-shadow:0 0 14px rgba(139,172,15,.8),0 0 3px rgba(155,188,15,.8)!important}
body.gb .cab{border-color:rgba(139,172,15,.34)!important}
body.gb .cab:hover{border-color:#9bbc0f!important;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 22px rgba(139,172,15,.3)!important}
body.gb .cab h3,body.gb .ti{color:#9bbc0f!important}
body.gb .btn{background:linear-gradient(180deg,#8bac0f,#306230)!important;box-shadow:0 2px 0 #143a14,0 5px 14px rgba(139,172,15,.3),inset 0 1px 0 rgba(255,255,255,.25)!important;color:#0f380f!important;text-shadow:none!important}
body.gb .badge.play{background:#8bac0f!important;color:#0f380f!important}
body.gb .arclbl{color:#6e8b0a!important}
body.gb .arcbar-i{background:linear-gradient(90deg,#306230,#9bbc0f)!important}
body.gb .coin{color:#8bac0f!important}
/* ---- AMBER CRT (phosphor) skin ---- */
body.amber{background-image:radial-gradient(circle at 50% -8%,rgba(255,176,0,.13),transparent 55%),repeating-linear-gradient(0deg,rgba(255,176,0,.045) 0 1px,transparent 1px 3px)!important}
body.amber .wrap{box-shadow:0 0 0 2px rgba(255,176,0,.5),0 0 0 11px #0c0c0e,0 0 0 13px rgba(255,255,255,.05),0 22px 60px rgba(0,0,0,.6),inset 0 0 70px rgba(0,0,0,.6)!important}
body.amber .marquee h1{color:#ffb000!important;text-shadow:0 0 16px rgba(255,176,0,.85),0 0 4px rgba(255,200,90,.8)!important}
body.amber .cab{border-color:rgba(255,176,0,.3)!important}
body.amber .cab:hover{border-color:#ffb000!important;box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 22px rgba(255,176,0,.28)!important}
body.amber .cab h3,body.amber .ti{color:#ffb000!important}
body.amber .btn{background:linear-gradient(180deg,#ffb000,#b87800)!important;box-shadow:0 2px 0 #7a5200,0 5px 14px rgba(255,176,0,.3),inset 0 1px 0 rgba(255,255,255,.3)!important;color:#241500!important;text-shadow:none!important}
body.amber .badge.play{background:#ffb000!important;color:#241500!important}
body.amber .arclbl{color:#b87800!important}
body.amber .arcbar-i{background:linear-gradient(90deg,#b87800,#ffd76a)!important}
body.amber .coin{color:#d8920a!important}