/* Soccer Heads — Earn Edition :: PIXEL-ART UI
 * Genuine retro look: pixel fonts (Press Start 2P for Latin labels, Pixelify
 * Sans for body + Cyrillic), hard edges, chunky beveled frames, no gradients.
 * Matches the game's pixel aesthetic. */

#sh-hud, #sh-hud *, .sh-back, .sh-back * { box-sizing: border-box; }
#sh-hud, .sh-back, .sh-toast {
  --navy:#15264e; --navy2:#0c1733; --ink:#070d1c; --steel:#2c4072;
  --sky:#54a8e8; --green:#86d24a; --green-d:#3f8f33; --green-dd:#236018;
  --gold:#ffcc33; --gold-d:#c8881a; --cream:#f4ecd2; --white:#ffffff;
  --red:#e8503a; --red-d:#9e2b1c; --amber:#f7a92b; --purple:#a060e8; --muted:#9fb0d8;
  image-rendering: pixelated;
}
.sh-px { font-family:"Press Start 2P","Pixelify Sans",monospace; }
.sh-body-font { font-family:"Pixelify Sans",monospace; }

#sh-hud {
  position:fixed; inset:0; z-index:1000; pointer-events:none;
  font-family:"Pixelify Sans",monospace; color:var(--white);
  font-weight:600; user-select:none; -webkit-font-smoothing:none;
}
#sh-hud > * { pointer-events:auto; }
body.sh-title #openfl-content { pointer-events:none; opacity:0; position:fixed; z-index:-1; }

/* ════════ TITLE MENU (full-screen hero) v2 ════════ */
@keyframes tmGlow { 0%,100%{box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.2),inset 3px 3px 0 0 rgba(255,255,255,.4),0 0 30px rgba(255,204,51,.35),0 0 60px rgba(255,204,51,.15),5px 5px 0 0 rgba(0,0,0,.5)} 50%{box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.2),inset 3px 3px 0 0 rgba(255,255,255,.4),0 0 50px rgba(255,204,51,.55),0 0 90px rgba(255,204,51,.25),5px 5px 0 0 rgba(0,0,0,.5)} }
@keyframes tmFloat { 0%,100%{transform:var(--rot) var(--sc) translateY(0)} 50%{transform:var(--rot) var(--sc) translateY(-8px)} }
@keyframes tmShine { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes tmRays { 0%{transform:translate(-50%,-40%) rotate(0)} 100%{transform:translate(-50%,-40%) rotate(360deg)} }
@keyframes tmScan { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
@keyframes tmIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }

.sh-tm { position:absolute; inset:0; z-index:1; pointer-events:auto;
  background:#060c1a;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
/* radial light from center */
.sh-tm::before { content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 35%, rgba(20,60,40,.5) 0%, rgba(15,30,60,.6) 30%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255,204,51,.06) 0%, transparent 60%); }
/* scanlines */
.sh-tm::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px);
  animation:tmScan 8s linear infinite; opacity:.5; }
/* stadium light rays */
.sh-tm-rays { position:absolute; top:0; left:50%; width:200%; height:200%; pointer-events:none; z-index:0; opacity:.04;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.6) 3deg, transparent 6deg,
    transparent 30deg, rgba(255,255,255,.4) 33deg, transparent 36deg,
    transparent 60deg, rgba(255,255,255,.5) 63deg, transparent 66deg,
    transparent 90deg, rgba(255,255,255,.4) 93deg, transparent 96deg,
    transparent 120deg, rgba(255,255,255,.6) 123deg, transparent 126deg,
    transparent 150deg, rgba(255,255,255,.3) 153deg, transparent 156deg,
    transparent 180deg, rgba(255,255,255,.5) 183deg, transparent 186deg,
    transparent 210deg, rgba(255,255,255,.4) 213deg, transparent 216deg,
    transparent 240deg, rgba(255,255,255,.6) 243deg, transparent 246deg,
    transparent 270deg, rgba(255,255,255,.3) 273deg, transparent 276deg,
    transparent 300deg, rgba(255,255,255,.5) 303deg, transparent 306deg,
    transparent 330deg, rgba(255,255,255,.4) 333deg, transparent 336deg, transparent 360deg);
  animation:tmRays 120s linear infinite; transform:translate(-50%,-40%); }
/* pitch line */
.sh-tm-field { position:absolute; bottom:0; left:0; right:0; height:30%; pointer-events:none; z-index:0;
  background:linear-gradient(0deg, rgba(30,90,45,.25) 0%, transparent 100%); }
.sh-tm-field::after { content:""; position:absolute; bottom:0; left:50%; width:60%; height:1px;
  background:rgba(255,255,255,.05); transform:translateX(-50%); }

.sh-tm-center { position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center; padding:16px 20px;
  }
.sh-tm--intro { animation:tmIn .3s ease-out; }
.sh-tm--intro .sh-tm-center { animation:tmIn .4s ease-out .1s both; }
.sh-tm-title { font-family:"Press Start 2P",monospace; font-size:clamp(30px,6.5vw,52px);
  line-height:1.1; letter-spacing:3px;
  background:linear-gradient(90deg, #fff 0%, #ffd957 25%, #fff 50%, #ffcc33 75%, #fff 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:tmShine 6s linear infinite;
  filter:drop-shadow(0 0 16px rgba(255,204,51,.35)) drop-shadow(3px 3px 0 rgba(0,0,0,.8));
  text-shadow:none; }
.sh-tm-sub { font-family:"Press Start 2P",monospace; font-size:clamp(10px,2vw,14px);
  color:var(--gold); letter-spacing:6px; margin-top:-2px; position:relative;
  text-shadow:0 0 18px rgba(255,204,51,.5); }
.sh-tm-sub::before, .sh-tm-sub::after { content:""; position:absolute; top:50%; width:clamp(20px,5vw,50px); height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.sh-tm-sub::before { right:calc(100% + 10px); }
.sh-tm-sub::after { left:calc(100% + 10px); }
.sh-tm-ball { font-size:28px; margin:-2px 0 -4px; filter:drop-shadow(0 0 12px rgba(255,204,51,.3));
  animation:tmFloat 3s ease-in-out infinite; --rot:rotate(0); --sc:scale(1); }

.sh-tm-x { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; color:rgba(255,255,255,.35); transition:color .15s; }
.sh-tm-x:hover { color:rgba(255,255,255,.7); }
.sh-tm-x svg { width:18px; height:18px; }
.sh-tm-bal { display:flex; align-items:center; gap:10px; padding:8px 18px;
  background:rgba(255,255,255,.04); border:2px solid rgba(255,204,51,.2);
  border-radius:4px; cursor:pointer; margin-bottom:2px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .15s, border-color .15s; }
.sh-tm-bal:hover { background:rgba(255,255,255,.1); border-color:rgba(255,204,51,.5); }
.sh-tm-coins { font-family:"Press Start 2P",monospace; font-size:13px; color:var(--gold); }
.sh-tm-usd { font-size:13px; color:var(--muted); }
.sh-tm-play { font-family:"Press Start 2P",monospace; font-size:clamp(16px,3vw,24px);
  color:var(--ink); background:linear-gradient(180deg, #ffe066 0%, #ffcc33 40%, #e6b020 100%);
  border:3px solid var(--ink); padding:18px 56px;
  cursor:pointer; letter-spacing:3px; margin-top:6px; position:relative;
  animation:tmGlow 2.5s ease-in-out infinite;
  transition:transform .08s, background .1s; }
.sh-tm-play:hover { background:linear-gradient(180deg, #fff180 0%, #ffd957 40%, #f0c030 100%);
  transform:translateY(-3px); }
.sh-tm-play:active { transform:translate(2px,2px);
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.2), inset 3px 3px 0 0 rgba(255,255,255,.4) !important; }
.sh-tm-row { display:flex; gap:10px; margin-top:6px; }
.sh-tm-btn { font-family:"Press Start 2P",monospace; font-size:10px;
  color:var(--white); background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.12); padding:14px 20px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:all .15s; position:relative; overflow:hidden;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sh-tm-btn::before { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%); pointer-events:none; }
.sh-tm-btn:hover { background:rgba(255,204,51,.1); border-color:var(--gold); color:var(--gold);
  box-shadow:0 0 20px rgba(255,204,51,.15); }
.sh-tm-btn span { font-size:20px; filter:drop-shadow(0 0 4px rgba(255,255,255,.2)); }
.sh-tm-free { font-family:"Press Start 2P",monospace; font-size:12px; color:var(--muted);
  background:rgba(255,255,255,.03); border:2px solid rgba(255,255,255,.1); padding:10px 28px; cursor:pointer;
  letter-spacing:1px; transition:all .15s;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sh-tm-free:hover { color:var(--white); border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); box-shadow:0 0 16px rgba(255,255,255,.08); }
.sh-tm-about { font-family:"Press Start 2P",monospace; font-size:9px; color:rgba(255,255,255,.2);
  background:none; border:none; cursor:pointer; margin-top:6px; letter-spacing:2px;
  transition:color .15s; }
.sh-tm-about:hover { color:rgba(255,255,255,.55); text-shadow:0 0 8px rgba(255,255,255,.15); }

/* decorative player heads — asymmetric floating cloud */
.sh-tm-head { position:absolute; image-rendering:pixelated; z-index:1;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.5));
  animation:tmFloat var(--dur, 4s) ease-in-out var(--del, 0s) infinite; }
.sh-tm-h0  { display:none; }
.sh-tm-h1  { left:2%;  top:36%;     opacity:.14; filter:brightness(.9) drop-shadow(0 0 6px rgba(0,0,0,.4));  --rot:rotate(5deg);   --sc:scale(1.1); --dur:5.3s; --del:0.8s; }
.sh-tm-h2  { left:11%; bottom:18%;  opacity:.22; filter:brightness(1.2) drop-shadow(0 0 8px rgba(0,0,0,.5)); --rot:rotate(-6deg);  --sc:scale(1.4); --dur:4.1s; --del:1.5s; }
.sh-tm-h3  { left:20%; top:58%;     opacity:.09; filter:brightness(.8) drop-shadow(0 0 4px rgba(0,0,0,.3));  --rot:rotate(8deg);   --sc:scale(.9);  --dur:5.8s; --del:2.1s; }
.sh-tm-h4  { right:4%; top:7%;      opacity:.26; filter:brightness(1.4) drop-shadow(0 0 8px rgba(0,0,0,.5)); --rot:rotate(10deg);  --sc:scale(1.5); --dur:4.8s; --del:0.3s; }
.sh-tm-h5  { right:9%; top:44%;     opacity:.17; filter:brightness(1.1) drop-shadow(0 0 6px rgba(0,0,0,.4)); --rot:rotate(-8deg);  --sc:scale(1.2); --dur:4.3s; --del:0.6s; }
.sh-tm-h6  { right:2%; bottom:16%;  opacity:.25; filter:brightness(1.5) drop-shadow(0 0 8px rgba(0,0,0,.5)); --rot:rotate(4deg);   --sc:scale(1.6); --dur:5.1s; --del:1.3s; }
.sh-tm-h7  { right:17%;bottom:32%;  opacity:.10; filter:brightness(.85) drop-shadow(0 0 4px rgba(0,0,0,.3)); --rot:rotate(-11deg); --sc:scale(.85); --dur:5.6s; --del:1.9s; }
.sh-tm-h8  { left:22%; top:16%;     opacity:.13; filter:brightness(.9) drop-shadow(0 0 5px rgba(0,0,0,.3));  --rot:rotate(15deg);  --sc:scale(.95); --dur:4.7s; --del:0.4s; }
.sh-tm-h9  { right:22%;top:20%;     opacity:.15; filter:brightness(1.0) drop-shadow(0 0 6px rgba(0,0,0,.4)); --rot:rotate(-14deg); --sc:scale(1.0); --dur:5.4s; --del:1.7s; }
.sh-tm-h10 { left:4%;  bottom:42%;  opacity:.07; filter:brightness(.75) drop-shadow(0 0 4px rgba(0,0,0,.2)); --rot:rotate(3deg);   --sc:scale(.8);  --dur:6.0s; --del:2.4s; }
.sh-tm-h11 { right:13%;top:68%;     opacity:.12; filter:brightness(.9) drop-shadow(0 0 5px rgba(0,0,0,.3));  --rot:rotate(-7deg);  --sc:scale(1.05);--dur:4.9s; --del:0.9s; }

.sh-mini-connect { position:absolute; top:12px; right:84px; }
/* sound toggle on the start screen / free mode — top-left (no score on the title) */
.sh-sound-corner { position:absolute; top:12px; left:12px; z-index:3; }
/* in-match: EXIT + sound, bottom-left (clear of score top & controls center/right) */
.sh-match-hud { position:absolute; left:14px; bottom:14px; display:flex; gap:10px; align-items:flex-end; }
.sh-float-btns { position:absolute; left:14px; bottom:14px; display:flex; gap:10px; }

/* ════════ HUD (connected) ════════ */
.sh-hud-stack { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sh-frame { background:var(--navy); border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--gold), 4px 4px 0 0 rgba(0,0,0,.45); }
.sh-pill { display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--navy); border:3px solid var(--ink); box-shadow:0 0 0 3px var(--gold),3px 3px 0 0 rgba(0,0,0,.45);
  cursor:pointer; }
.sh-pill .badge { font-family:"Press Start 2P",monospace; background:var(--gold); color:var(--ink);
  font-size:11px; padding:4px 6px; }
.sh-pill .coins { font-family:"Press Start 2P",monospace; font-size:14px; color:var(--gold); }
.sh-pill .usd { font-size:15px; color:var(--muted); font-weight:600; }

.sh-hud-row { display:flex; gap:7px; }
.sh-hbtn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:62px; height:60px; background:var(--navy); border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--steel),3px 3px 0 0 rgba(0,0,0,.4); cursor:pointer; padding:0; }
.sh-hbtn:hover { background:var(--steel); }
.sh-hbtn:active { transform:translate(2px,2px); box-shadow:0 0 0 3px var(--steel); }
.sh-hbtn .ic { font-size:20px; line-height:1; }
.sh-hbtn .tx { font-family:"Press Start 2P",monospace; font-size:8px; color:#fff; }

/* ════════ PANEL ════════ */
.sh-back { position:fixed; inset:0; z-index:1100; background:rgba(6,12,28,.72);
  display:flex; align-items:center; justify-content:center; padding:18px;
  font-family:"Pixelify Sans",monospace; color:var(--white); font-weight:600; }
.sh-panel { width:min(560px,96vw); max-height:90vh; background:var(--navy);
  border:4px solid var(--ink); box-shadow:0 0 0 4px var(--gold), 10px 10px 0 0 rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden; animation:shPop .12s steps(3); }
@keyframes shPop { from{transform:scale(.9)} to{transform:none} }

.sh-head { position:relative; padding:13px 16px; display:flex; align-items:center; gap:10px;
  background:var(--gold); border-bottom:4px solid var(--ink); }
.sh-head h2 { margin:0; font-family:"Press Start 2P",monospace; font-size:15px; color:var(--ink);
  letter-spacing:.5px; text-shadow:2px 2px 0 rgba(255,255,255,.35); }
.sh-head .sub { margin-left:auto; font-family:"Press Start 2P",monospace; font-size:10px; color:var(--navy2); }
.sh-close { position:absolute; right:11px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  border:3px solid var(--ink); background:var(--white); color:var(--ink); font-weight:700; font-size:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:"Press Start 2P",monospace;
  box-shadow:2px 2px 0 0 rgba(0,0,0,.4); }
.sh-close:active { transform:translateY(-50%) translate(2px,2px); box-shadow:none; }
.sh-body { padding:16px; overflow-y:auto; }

/* ════════ BUTTONS ════════ */
.sh-btn { font-family:"Press Start 2P",monospace; font-size:12px; border:3px solid var(--ink);
  padding:12px 16px; cursor:pointer; color:var(--ink); letter-spacing:.5px;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28), inset 3px 3px 0 0 rgba(255,255,255,.4), 4px 4px 0 0 rgba(0,0,0,.4); }
.sh-btn:active { transform:translate(2px,2px); box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28), inset 3px 3px 0 0 rgba(255,255,255,.4); }
.sh-btn.primary { background:var(--gold); } .sh-btn.primary:hover { background:#ffd957; }
.sh-btn.green { background:var(--green); color:var(--ink); } .sh-btn.green:hover { background:#9ae061; }
.sh-btn.blue { background:var(--sky); color:var(--ink); } .sh-btn.blue:hover { background:#6fbcf2; }
.sh-btn.ghost { background:var(--cream); } .sh-btn.ghost:hover { background:#fff6df; }
.sh-btn.sm { font-size:10px; padding:9px 11px; }
.sh-btn.block { width:100%; }
.sh-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28); transform:none; }

/* ════════ MODES ════════ */
.sh-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sh-mode { border:3px solid var(--ink); padding:14px; cursor:pointer; background:var(--navy2);
  box-shadow:inset 2px 2px 0 0 rgba(255,255,255,.06), 3px 3px 0 0 rgba(0,0,0,.4); }
.sh-mode:hover { background:#13224a; }
.sh-mode:active { transform:translate(2px,2px); }
.sh-mode .tag { font-family:"Press Start 2P",monospace; font-size:8px; letter-spacing:.5px; }
.sh-mode.free .tag { color:var(--green); } .sh-mode.ranked .tag { color:var(--gold); }
.sh-mode h3 { margin:8px 0 7px; font-family:"Press Start 2P",monospace; font-size:15px; color:var(--white); }
.sh-mode p { margin:0; font-size:13px; color:var(--muted); line-height:1.4; }

/* ════════ DIFFICULTY ════════ */
.sh-diff { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sh-tier { border:3px solid var(--ink); padding:10px 7px; cursor:pointer; background:var(--navy2); text-align:center;
  box-shadow:3px 3px 0 0 rgba(0,0,0,.35); }
.sh-tier:hover { background:#13224a; }
.sh-tier.sel { box-shadow:0 0 0 3px currentColor, 3px 3px 0 0 rgba(0,0,0,.35); }
.sh-tier .nm { font-family:"Press Start 2P",monospace; font-size:11px; }
.sh-tier .row { display:flex; justify-content:space-between; font-size:12px; margin-top:7px; color:var(--muted); }
.sh-tier .row b { color:var(--white); }
.sh-tier .lives { margin-top:6px; font-size:12px; color:var(--muted); }
.sh-tier .lives b { color:var(--gold); }
.sh-h { font-family:"Press Start 2P",monospace; font-size:10px; color:var(--gold); margin:16px 0 10px; letter-spacing:.5px; }
.sh-launch { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.sh-note { font-size:13px; color:var(--muted); }

/* ════════ SHOP ════════ */
.sh-subnav { display:flex; gap:7px; margin-bottom:14px; }
.sh-subnav button { font-family:"Press Start 2P",monospace; font-size:10px; background:var(--navy2);
  border:3px solid var(--ink); color:var(--muted); padding:8px 12px; cursor:pointer;
  box-shadow:2px 2px 0 0 rgba(0,0,0,.35); }
.sh-subnav button.active { color:var(--ink); background:var(--gold); }
.sh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
.sh-card { border:3px solid var(--ink); background:var(--navy2); padding:11px; display:flex; flex-direction:column;
  gap:7px; position:relative; box-shadow:3px 3px 0 0 rgba(0,0,0,.35); }
.sh-card.owned { box-shadow:0 0 0 2px var(--green-d),3px 3px 0 0 rgba(0,0,0,.35); }
.sh-card.equipped { box-shadow:0 0 0 2px var(--gold),3px 3px 0 0 rgba(0,0,0,.35); }
.sh-card-top { display:flex; align-items:center; gap:8px; }
.sh-card-img { flex:none; background-image:url(../img/testSheet3.png); background-repeat:no-repeat;
  image-rendering:pixelated; border:2px solid var(--ink); background-color:#0c1733; }
.sh-card .nm { font-family:"Press Start 2P",monospace; font-size:10px; color:var(--white); line-height:1.3; }
.sh-card .meta { font-size:12px; color:var(--muted); }
.sh-rating { display:inline-flex; gap:3px; }
.sh-rating i { width:7px; height:7px; background:var(--steel); display:inline-block; }
.sh-rating i.on { background:var(--gold); }
.sh-card .price { font-family:"Press Start 2P",monospace; font-size:11px; color:var(--gold); }
.sh-badge { position:absolute; top:-3px; right:-3px; font-family:"Press Start 2P",monospace; font-size:7px;
  padding:3px 5px; border:2px solid var(--ink); }
.sh-badge.own { background:var(--green); color:var(--ink); }
.sh-badge.eq { background:var(--gold); color:var(--ink); }

/* ════════ TABLE / STATS / HISTORY ════════ */
.sh-table { width:100%; border-collapse:collapse; font-size:14px; }
.sh-table th { text-align:left; font-family:"Press Start 2P",monospace; font-size:8px; color:var(--gold);
  padding:8px; border-bottom:3px solid var(--ink); }
.sh-table td { padding:9px 8px; border-bottom:2px solid var(--steel); }
.sh-table tr.self td { background:rgba(255,204,51,.14); }
.sh-rank { font-family:"Press Start 2P",monospace; font-size:11px; color:var(--gold); }
.sh-tb { font-family:"Press Start 2P",monospace; font-size:7px; padding:3px 5px; border:2px solid var(--ink); }
.sh-tb.LEGENDARY { background:var(--gold); color:var(--ink); }
.sh-tb.ELITE { background:var(--sky); color:var(--ink); }
.sh-tb.RECRUIT { background:var(--steel); color:var(--white); }
.sh-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.sh-stat { border:3px solid var(--ink); padding:10px; background:var(--navy2); box-shadow:2px 2px 0 0 rgba(0,0,0,.35); }
.sh-stat .k { font-family:"Press Start 2P",monospace; font-size:7px; color:var(--muted); }
.sh-stat .v { font-family:"Press Start 2P",monospace; font-size:16px; margin-top:6px; color:var(--white); }
.sh-hist .r { display:flex; justify-content:space-between; padding:8px; border-bottom:2px solid var(--steel); font-size:13px; }
.sh-hist .res.win { color:var(--green); } .sh-hist .res.lose { color:var(--red); } .sh-hist .res.draw { color:var(--muted); }
.sh-hist .rw { color:var(--gold); }

/* ════════ CONNECT / WALLET ════════ */
.sh-provs { display:flex; flex-direction:column; gap:10px; }
.sh-lead { font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 16px; }
.sh-wallet-line { display:flex; align-items:center; justify-content:space-between; background:var(--navy2);
  border:3px solid var(--ink); padding:10px 11px; margin-bottom:14px; }
.sh-wallet-line .addr { font-family:"Press Start 2P",monospace; font-size:10px; color:var(--muted); }

/* ════════ DEPOSIT / LIVES OPTS ════════ */
.sh-opts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.sh-opts.three { grid-template-columns:repeat(3,1fr); }
.sh-opt { border:3px solid var(--ink); padding:11px 6px; text-align:center; cursor:pointer; background:var(--navy2);
  box-shadow:2px 2px 0 0 rgba(0,0,0,.35); }
.sh-opt.sel { box-shadow:0 0 0 3px var(--gold),2px 2px 0 0 rgba(0,0,0,.35); }
.sh-opt .a { font-family:"Press Start 2P",monospace; font-size:13px; color:var(--white); }
.sh-opt .b { font-size:11px; color:var(--muted); margin-top:5px; }
.sh-actions { display:flex; gap:8px; }

/* ════════ TOAST ════════ */
.sh-toast { position:fixed; left:50%; top:18px; transform:translateX(-50%) translateY(-28px); z-index:1200;
  opacity:0; pointer-events:none; transition:transform .14s steps(3),opacity .14s; padding:13px 22px;
  border:4px solid var(--ink); font-family:"Press Start 2P",monospace; font-size:13px; text-align:center;
  background:var(--navy); color:var(--white); box-shadow:0 0 0 4px var(--gold),6px 6px 0 0 rgba(0,0,0,.5); }
.sh-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.sh-toast.win { box-shadow:0 0 0 4px var(--green),6px 6px 0 0 rgba(0,0,0,.5); color:var(--green); }
.sh-toast.lose { box-shadow:0 0 0 4px var(--red),6px 6px 0 0 rgba(0,0,0,.5); color:var(--red); }
.sh-toast .rw { display:block; font-size:10px; color:var(--gold); margin-top:7px; }

.sh-empty { color:var(--muted); font-size:13px; padding:18px; text-align:center; }

/* ════════ title 1P / 2P buttons (overlay the native ones) ════════ */
#sh-menu-btns { position:fixed; inset:0; z-index:900; pointer-events:none; display:none;
  font-family:"Press Start 2P",monospace; }
#sh-menu-btns, #sh-menu-btns * { box-sizing:border-box; }
.sh-mbtn { position:absolute; pointer-events:auto; background:#ffcc33; border:3px solid #070d1c;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28), inset 3px 3px 0 0 rgba(255,255,255,.45), 4px 4px 0 0 rgba(0,0,0,.45);
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:transform .08s; }
.sh-mbtn svg { width:62%; height:62%; display:block; }
.sh-mbtn svg path, .sh-mbtn svg circle { fill:#15264e; }
.sh-mbtn:not(.sh-mbtn-off):hover { transform:translateY(-2px); }
.sh-mbtn:not(.sh-mbtn-off):active { transform:translate(2px,2px); box-shadow:inset -3px -3px 0 0 rgba(20,30,80,.18), inset 3px 3px 0 0 #fff; }
/* disabled 2P — desaturated, locked */
.sh-mbtn-off { cursor:not-allowed; background:#cfd4e0; filter:grayscale(1) brightness(.92); }
.sh-mbtn-off svg { opacity:.55; }
/* tooltip */
.sh-mtip { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#12203f; color:#fff; border:3px solid #070d1c; box-shadow:0 0 0 3px #ffce34,4px 4px 0 0 rgba(0,0,0,.5);
  font-family:"Press Start 2P",monospace; font-size:10px; line-height:1.6; letter-spacing:.5px; text-align:center;
  white-space:nowrap; padding:9px 12px; opacity:0; pointer-events:none; transition:opacity .12s,transform .12s; filter:none; }
.sh-mbtn-off:hover .sh-mtip { opacity:1; transform:translateX(-50%) translateY(0); }

/* ════════ pixel sound button (replaces the native white one) ════════ */
#sh-sound-btn { position:fixed; z-index:1050; box-sizing:border-box; padding:0; background:#ffcc33; border:3px solid #070d1c;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28), inset 3px 3px 0 0 rgba(255,255,255,.45), 4px 4px 0 0 rgba(0,0,0,.45);
  cursor:pointer; display:flex; align-items:center; justify-content:center; image-rendering:pixelated; transition:transform .08s; }
#sh-sound-btn:hover { background:#ffd957; }
#sh-sound-btn:active { transform:translate(2px,2px); box-shadow:inset -3px -3px 0 0 rgba(0,0,0,.28), inset 3px 3px 0 0 rgba(255,255,255,.45); }
#sh-sound-btn svg { width:60%; height:60%; display:block; }

/* ════════ team paywall (over the native PICK A TEAM grid) ════════ */
/* Silhouettes are rendered by the engine (teamBodySheetBlack frames in the
 * atlas). The DOM layer here is just a click-catcher + the price label. */
#sh-locks { font-family:"Press Start 2P",monospace; }
.sh-blk { position:absolute; pointer-events:auto; cursor:pointer; background:transparent; }
.sh-pr { position:absolute; pointer-events:auto; cursor:pointer; transform:translateX(-50%);
  font-family:"Press Start 2P",monospace; font-size:10px; color:#ffce34; text-shadow:1px 1px 0 #000, -1px 1px 0 #000; white-space:nowrap; }

@media (max-width:560px){
  .sh-modes{grid-template-columns:1fr}
  .sh-diff{grid-template-columns:1fr 1fr}
  .sh-stats{grid-template-columns:1fr 1fr}
  .sh-opts{grid-template-columns:1fr 1fr}
  .sh-tm-head{display:none}
  .sh-tm-rays{display:none}
  .sh-tm-play{padding:14px 36px}
  .sh-tm-row{flex-wrap:wrap;justify-content:center}
  .sh-tm-sub::before,.sh-tm-sub::after{display:none}
}