/* ==========================================================================
   CODI.GG base.css  (owner: shell)
   --------------------------------------------------------------------------
   SHARED CLASSES FOR SCREEN MODULES
   --------------------------------------------------------------------------
   Layout
     <section class="screen">   main.js creates it and passes it to run(api, el);
                                it is a flex column, padding 10px 12px (+ safe area),
                                and scrolls vertically inside #stage when taller.
     .row / .col / .grow / .center   flex helpers (.center = text-align + align-items centre)
     .gap-s / .gap-m / .gap-l        gap 6 / 10 / 16 px

   Item card (a gambling-style item tile; rarity colour bar at the bottom)
     <div class="item-card r-covert cutout" style="--card-w:110px">
       <div class="ic-art"><img src="assets/prizes/p90-asiimov.png" alt=""></div>
       <div class="ic-name">P90 | Asiimov</div>
       <div class="ic-bar"></div>
     </div>
     - rarity class: r-milspec | r-restricted | r-classified | r-covert | r-gold
       (sets --rc, the rarity colour; use var(--rc) in your own css)
     - add .cutout for transparent PNG items (shown "contain" on a radial rarity glow);
       leave it off for photos (shown "cover", fills the art area)
     - width via --card-w (default 110px); height follows from aspect-ratio
     - add .win for the glowing winner state; optional <div class="ic-sub">sub text</div>
       between .ic-name and .ic-bar for item.sub
   Markup helper idea in your own module:
     const card = (id) => { const it = api.items[id]; ... }  // it.cutout -> 'cutout', 'r-'+it.rarity

   Buttons (min-height 48px, Anton, uppercase)
     .btn  +  .btn-primary (green) | .btn-gold | .btn-danger (red) | .btn-ghost
     .btn-block (full width), .btn-sm (still >= 44px tall)

   Panels
     .panel          navy rounded box;   .panel-title  small Anton heading inside it

   Modal (same markup main.js uses for api.taunt; append to #modal-root)
     <div class="modal-backdrop"><div class="modal" role="dialog" aria-modal="true">
        <img class="modal-img" src="assets/memes/pepe-smug.png" alt="">
        <p class="modal-text">text</p>
        <button class="btn btn-primary">OK</button>
     </div></div>
     (remove the backdrop element yourself when done; z-index 900)

   Text
     .impact   Anton, white, black outline, uppercase (meme caption)
     .comic    Comic Neue Bold (default body font)
     .rainbow  animated rainbow gradient text
     .muted    dim blue-grey text
     .glow     gold glow text-shadow
   Animation helpers: .pop (scale-in), .pulse (soft scale pulse), .hue (hue-rotate loop)

   ROUND 2 ADDITIONS
     Sound (api.sound), all names are files in assets/sounds/*.m4a (17 in total):
       play(name, {volume, loop})   unchanged; returns { stop(fadeSeconds) }
       sting(name, opts)            like play, and ducks the music to 30% for the sound's length, then back in ~0.4 s;
                                    overlapping stings share one duck (never stuck low). Use for key moments.
       mock(opts)                   sting that rotates bruh, nelson-haha, nope, laugh-track, are-you-sure (starts at bruh)
       music.start()                sandstorm-bg looped, 1.5 s equal-power crossfade at the seam, 1.5 s fade-in, level 0.22
                                    before master; a second start() is a no-op. main.js starts it in the unlock tap and
                                    it is never restarted by screens or api.restart(). Follows the mute button.
       music.stop(fadeSeconds)      fade out and stop (screens normally must NOT call this)
     api.realWin(itemId)            adds the item to the always-visible "IRL LOOT" row (#loot, under the header, separate
                                    from the pot chip). Throws unless items.js has real: true. Duplicate ids are ignored.
                                    Row is empty at start, reset by api.restart(), and shows toolbox + mouse on a finished reload.
     Layout: #loot is one 30 px row between #hdr and the ticker (ticker is 30 px), so #stage is ~24 px shorter than before.

   FX layer: #fx (z-index 1000, pointer-events none) is used by api.fx. Never put
   interactive things there.
   ========================================================================== */

@font-face { font-family: 'Anton'; src: url('../assets/fonts/Anton-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comic Neue'; src: url('../assets/fonts/ComicNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comic Neue'; src: url('../assets/fonts/ComicNeue-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #0d0f14;
  --panel: #141a2b;
  --panel-2: #1b2338;
  --line: #26304a;
  --text: #e8ecf6;
  --dim: #8b97b5;
  --green: #3ddc6a;
  --gold: #ffd700;
  --red: #eb4b4b;
  --f-impact: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --f-comic: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--f-comic); font-weight: 700; color: var(--text); font-size: 16px; line-height: 1.25;
  touch-action: manipulation; -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; touch-action: manipulation; }

/* ---------- app frame ---------- */
#app {
  position: fixed; inset: 0; height: 100dvh; width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(136,71,255,.28), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(75,105,255,.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    var(--bg);
  transition: filter .8s ease;
}
#app.locked { filter: grayscale(1) blur(3px); pointer-events: none; }

#hdr {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal));
  background: linear-gradient(#10141f, #0c0f17); border-bottom: 1px solid var(--line);
}
.logo { font-family: var(--f-impact); font-size: 24px; letter-spacing: 1px; line-height: 1; white-space: nowrap; text-shadow: 0 0 12px rgba(255,215,0,.35); }
.logo-a { color: #fff; }
.logo-b { background: linear-gradient(90deg,#ff2d55,#ffd700,#3ddc6a,#2dd4ff,#c026d3,#ff2d55); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-shift 3s linear infinite; }
.pot {
  flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 7px;
  padding: 0 10px 0 5px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--rc, var(--line));
  box-shadow: 0 0 10px -2px var(--rc, transparent);
}
.pot.bump { animation: bump .45s ease-out; }
.pot-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #0b0e16; flex: none; }
.pot-k { font-family: var(--f-impact); font-size: 11px; letter-spacing: 1px; color: var(--dim); flex: none; padding-left: 5px; }
.pot-img + .pot-k { padding-left: 0; }
.pot-v { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #fff; }
.mute {
  flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); font-size: 22px; line-height: 1; padding: 0; cursor: pointer;
}
.mute[aria-pressed="true"] { opacity: .6; }

.loot {
  flex: none; height: 30px; display: flex; align-items: center; gap: 6px; overflow: hidden;
  padding: 0 calc(10px + var(--sar)) 0 calc(10px + var(--sal)); background: #0e1220; border-bottom: 1px solid var(--line);
}
.loot-k { flex: none; font-family: var(--f-impact); letter-spacing: 1px; font-size: 13px; background: linear-gradient(90deg,#ff2d55,#ffd700,#3ddc6a,#2dd4ff,#c026d3,#ff2d55); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none; animation: rainbow-shift 2.5s linear infinite; }
.loot-empty { color: var(--dim); font-size: 12px; border: 1px dashed var(--line); border-radius: 8px; padding: 1px 8px; }
.loot-it { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 5px 0 2px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--rc); box-shadow: 0 0 8px -2px var(--rc); }
.loot-it img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; background: #0b0e16; flex: none; }
.loot-v { flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.loot-real { flex: none; font-family: var(--f-impact); font-weight: 400; font-size: 9px; letter-spacing: .5px; color: #052d12; background: var(--green); border-radius: 4px; padding: 1px 4px; }
.ticker { flex: none; height: 30px; overflow: hidden; background: #0a0c12; border-bottom: 1px solid var(--line); position: relative; }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; animation: ticker 70s linear infinite; will-change: transform; }
.tk { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 13px; white-space: nowrap; color: var(--dim); border-right: 1px solid #1a2133; }
.tk b { color: #fff; }
.tk img { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; background: #0b0e16; border: 1px solid var(--rc); }
.tk .tk-item { color: var(--rc); }

#stage { flex: 1; min-height: 0; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen { min-height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
.screen.enter { animation: scr-in .4s ease-out; }
.screen.leave { position: absolute; inset: 0; pointer-events: none; animation: scr-out .3s ease-in forwards; }

.row { display: flex; flex-direction: row; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; min-height: 0; }
.center { align-items: center; text-align: center; }
.gap-s { gap: 6px; } .gap-m { gap: 10px; } .gap-l { gap: 16px; }

/* ---------- lobby (shown greyed out behind the lock) ---------- */
.lobby { gap: 12px; }
.lobby-hero { position: relative; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, #1d1540, #101a38); overflow: hidden; }
.lobby-hero h2 { margin: 0 0 4px; font-family: var(--f-impact); font-weight: 400; font-size: 30px; letter-spacing: 1px; }
.lobby-hero p { margin: 0; color: var(--dim); }
.lobby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lobby-grid .item-card { --card-w: 100%; }

/* ---------- item card ---------- */
.r-milspec { --rc: #4b69ff; } .r-restricted { --rc: #8847ff; } .r-classified { --rc: #d32ce6; } .r-covert { --rc: #eb4b4b; } .r-gold { --rc: #ffd700; }
.item-card {
  position: relative; width: var(--card-w, 110px); aspect-ratio: 1 / 1.18; flex: none;
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  background: linear-gradient(#1a2033, #121827); border: 1px solid #262e45;
}
.ic-art { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ic-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-card.cutout .ic-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, var(--rc) 0%, transparent 72%); opacity: .55; }
.item-card.cutout .ic-art img { object-fit: contain; padding: 8%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.ic-name { padding: 3px 5px 2px; font-size: 11px; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.ic-sub { padding: 0 5px 2px; font-size: 9px; text-align: center; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-bar { flex: none; height: 5px; background: var(--rc); box-shadow: 0 -2px 8px var(--rc); }
.item-card.win { box-shadow: 0 0 0 2px var(--rc), 0 0 26px 4px var(--rc); border-color: var(--rc); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 11px; cursor: pointer; font-family: var(--f-impact); font-weight: 400; font-size: 20px;
  letter-spacing: 1px; text-transform: uppercase; color: #fff; background: var(--panel-2); box-shadow: 0 3px 0 rgba(0,0,0,.45);
  transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: linear-gradient(#45e874, #1fa84c); color: #052d12; }
.btn-gold { background: linear-gradient(#ffe45c, #e0a800); color: #3a2a00; }
.btn-danger { background: linear-gradient(#ff6a6a, #c62f2f); }
.btn-ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--dim); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; font-size: 16px; padding: 0 14px; }

/* ---------- panels ---------- */
.panel { background: linear-gradient(#171e33, #121829); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.panel-title { font-family: var(--f-impact); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; color: var(--dim); margin: 0 0 8px; }

/* ---------- text ---------- */
.impact { font-family: var(--f-impact); font-weight: 400; text-transform: uppercase; color: #fff; letter-spacing: 1px; -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 3px 0 #000; }
.comic { font-family: var(--f-comic); font-weight: 700; }
.rainbow { background: linear-gradient(90deg,#ff2d55,#ffd700,#3ddc6a,#2dd4ff,#c026d3,#ff2d55); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none; animation: rainbow-shift 2.5s linear infinite; }
.muted { color: var(--dim); }
.glow { text-shadow: 0 0 10px var(--gold), 0 0 24px rgba(255,215,0,.6); }
.pop { animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
.hue { animation: hue 3s linear infinite; }

/* ---------- lock overlay ---------- */
#lock { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.45); transition: opacity .18s ease; }
#lock:empty { display: none; }
#lock.out { opacity: 0; pointer-events: none; }
.lock-panel { width: 100%; max-width: 360px; text-align: center; padding: 16px 16px 18px; border-radius: 16px; background: linear-gradient(#1b2240, #10142a); border: 2px solid var(--gold); box-shadow: 0 0 0 1px #000, 0 0 40px rgba(255,215,0,.35); }
.lock-img { width: 84px; height: auto; margin: -6px auto 2px; display: block; animation: hue 4s linear infinite; }
.lock-title { margin: 0 0 12px; font-size: 27px; line-height: 1.05; }
.lock-panel form { display: flex; flex-direction: column; gap: 10px; }
.lock-panel input {
  width: 100%; height: 50px; border-radius: 11px; border: 2px solid var(--line); background: #080a12; color: #fff;
  font: 700 18px var(--f-comic); text-align: center; padding: 0 12px; outline: none;
}
.lock-panel input:focus { border-color: var(--gold); }
.lock-roast { min-height: 24px; margin: 8px 0 0; color: var(--red); font-size: 19px; font-weight: 700; line-height: 1.2; }
.lock-sub { margin: 0 0 12px; color: var(--dim); font-size: 14px; }

/* ---------- modal ---------- */
#modal-root { position: relative; z-index: 900; }
.modal-backdrop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.72); animation: fade-in .2s ease-out; }
.modal-backdrop.out { opacity: 0; transition: opacity .2s; }
.modal { width: 100%; max-width: 340px; text-align: center; padding: 16px; border-radius: 16px; background: linear-gradient(#1b2240, #10142a); border: 2px solid var(--line); box-shadow: 0 0 40px rgba(0,0,0,.8); display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.modal-img { max-width: 62%; max-height: 28dvh; object-fit: contain; }
.modal-text { margin: 0; font-size: 20px; line-height: 1.2; }
.modal .btn { min-width: 140px; }

/* ---------- fx layer ---------- */
#fx { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.fx-hit { position: absolute; width: 84px; height: 84px; will-change: transform, opacity; }
.fx-glasses { position: absolute; left: 50%; top: 22%; width: min(78vw, 330px); height: auto; will-change: transform; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.fx-fly { position: absolute; left: 0; top: 0; height: auto; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #fff, rgba(255,255,255,0) 70%); }
.fx-text { position: absolute; left: 50%; width: 94vw; text-align: center; font-family: var(--f-impact); text-transform: uppercase; line-height: 1.02; color: #fff; letter-spacing: 1px; -webkit-text-stroke: 1px #000; text-shadow: 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 0 4px 0 #000; will-change: transform, opacity; }

@keyframes rainbow-shift { to { background-position: 300% 0; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes scr-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes scr-out { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes bump { 30% { transform: scale(1.1); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-duration: 35s; }
  .logo-b, .rainbow { animation-duration: 1.5s; }
  .screen.enter { animation-duration: .2s; }
}