/* GANG design system: "we're in the 90s now". 90s anime cel look for every page:
   bold black outlines, hard offset shadows, flat bright colours, chunky type.
   Each game keeps its art and one accent colour (--g-accent). Art comes from /lobby/art. */
:root {
  --g-night: #140c2a;
  --g-panel: #1e1440ee;
  --g-ink: #fff8e7;
  --g-muted: #c9bde8;
  --g-line: #000;
  --g-yellow: #ffd21f;
  --g-orange: #ff7a1a;
  --g-pink: #ff3d8b;
  --g-cyan: #19d3ff;
  --g-green: #3ee07f;
  --g-gold: var(--g-yellow);
  --g-gold-2: #ffe98a;
  --g-accent: var(--g-yellow);
  --g-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-bar: 58px;
  --g-out: 3px solid #000;
  --g-hard: 4px 4px 0 #000;
}
body[data-game='poker'] { --g-accent: var(--g-green); }
body[data-game='bound'] { --g-accent: var(--g-orange); }
body[data-game='strike'] { --g-accent: var(--g-cyan); }
body[data-game='party'] { --g-accent: var(--g-pink); }
body[data-game='shop'] { --g-accent: var(--g-yellow); }

/* anime title type: thick outline + hard shadow */
.g-title { font: 900 clamp(28px, 7vw, 46px)/1.05 var(--g-ui); color: var(--g-ink); -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000; letter-spacing: .01em; margin: 0; }

/* ---------- top bar (every page, outside a running game) ---------- */
.gang-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: calc(var(--g-bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; font-family: var(--g-ui);
  background: #140c2af0; border-bottom: var(--g-out); box-shadow: 0 4px 0 var(--g-accent); backdrop-filter: blur(8px); }
.gang-bar a { -webkit-tap-highlight-color: transparent; }
.gang-bar .gb-back, .gang-bar .gb-shop { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 12px; border-radius: 12px; text-decoration: none;
  font: 900 14px var(--g-ui); color: #000; background: var(--g-yellow); border: var(--g-out); box-shadow: 3px 3px 0 #000; transition: transform .08s, box-shadow .08s; }
.gang-bar .gb-back { justify-self: start; }
.gang-bar .gb-shop { background: var(--g-cyan); }
.gang-bar .gb-back:active, .gang-bar .gb-shop:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000; }
.gang-bar .gb-back svg { width: 16px; height: 16px; }
.gang-bar .gb-mid { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.gang-bar .gb-logo { height: 38px; width: auto; filter: drop-shadow(2px 2px 0 #000); transform: rotate(-3deg); }
.gang-bar .gb-title { font: 900 18px var(--g-ui); color: #fff; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 var(--g-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px; }
.gang-bar .gb-end { justify-self: end; display: flex; gap: 6px; }
.gang-bar .gb-shop img { width: 20px; height: 20px; }
@media (max-width: 520px) { .gang-bar .gb-logo { height: 30px; } .gang-bar .gb-title { font-size: 15px; } .gang-bar .gb-back span, .gang-bar .gb-shop span { display: none; } .gang-bar .gb-back, .gang-bar .gb-shop { padding: 7px 9px; } }
/* the bar replaces each game's own small "back" links, and hides while a game runs */
body.has-gang-bar .back-link, body.has-gang-bar .lobby-back, body.embedded .back-link, body.embedded .lobby-back { display: none !important; }
body.in-game .gang-bar, body:has(#table:not(.hidden)) .gang-bar { display: none; }
body.has-gang-bar:not(.in-game) .screen:not(#table):not(#game) { padding-top: calc(var(--g-bar) + env(safe-area-inset-top) + 10px); }

/* ---------- buttons: one primary style everywhere ---------- */
body.gang .btn.gold, body.gang .g-btn {
  position: relative; border: var(--g-out); border-radius: 14px; padding: 12px 28px; font: 900 19px var(--g-ui); color: #000;
  background: linear-gradient(180deg, #fff27a 0 45%, var(--g-yellow) 45% 100%); box-shadow: 5px 5px 0 #000; text-shadow: none;
  transition: transform .08s, box-shadow .08s; }
body.gang .btn.gold:hover, body.gang .g-btn:hover { filter: brightness(1.06); }
body.gang .btn.gold:active, body.gang .g-btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 #000; }
body.gang .btn.gold:disabled { filter: grayscale(.7) brightness(.7); }

/* ---------- shared bits ---------- */
.g-coin { width: 1.2em; height: 1.2em; vertical-align: -.25em; }
.g-panel { background: var(--g-panel); border: var(--g-out); border-radius: 18px; box-shadow: 6px 6px 0 #000; }
/* subtle CRT scanlines over page art */
.g-scan::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0000 0 2px, #0000001f 2px 3px); mix-blend-mode: multiply; }
body[data-game='lobby'] .gang-bar .gb-back { visibility: hidden; }

/* a friend's nudge, on any GANG page */
.gang-nudge { position: fixed; z-index: 9999; left: 50%; top: calc(env(safe-area-inset-top) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 380px); padding: 10px 16px 10px 12px; border-radius: 12px; background: #fffbe6; border: 2px solid #e8a400; box-shadow: 0 10px 28px #0007;
  font: 800 15px var(--g-ui, sans-serif); color: #3a2300; direction: rtl; animation: gang-nudge-in .4s cubic-bezier(.2, 1.6, .4, 1); }
.gang-nudge img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; object-position: top; }
.gang-nudge small { font-weight: 700; color: #6a5a3a; }
@keyframes gang-nudge-in { from { transform: translate(-50%, -30px) scale(.8); opacity: 0; } }
body.gang-shake { animation: gang-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes gang-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 2px); } 40%, 60% { transform: translate(7px, -2px); } }