/* =========================================================
   PearlChip — Minecraft theme layer
   Loaded AFTER style.css. Squares off every corner, adds
   block bevels, pixel typography, and block textures.
   ========================================================= */

/* ---------- global: no rounded corners, pixel edges ---------- */
.game-card, .panel, .btn, .balance-pill, .ign-box, .promo, .stat-box,
.hero, .search-box, .tab, .message-bar, .log-row, .modal, .side-item,
.mine-cell, .tower-cell, .sm-cell, .keno-cell, .sn-cell, .cb-case,
.iu-item, .iu-bar, .crash-canvas, .plinko-canvas, .hl-card, .rr-chamber,
.rr-chamber .slot, .rr-gun, .rr-skin, .dice-roll, .limbo-beam,
.game-cover, .cover-img, .wheel, .daily-wheel, input, select, textarea {
  border-radius: 0 !important;
}

/* ---------- block bevel: light top-left, dark bottom-right ---------- */
.panel, .game-card, .promo, .stat-box, .balance-pill, .ign-box,
.message-bar, .search-box, .rr-chamber, .iu-bar {
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.07),
    inset -2px -2px 0 rgba(0,0,0,0.5),
    0 4px 0 rgba(0,0,0,0.4);
  border-width: 2px;
}

/* ---------- buttons: pressable minecraft buttons ---------- */
.btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.5px;
  padding: 12px 14px;
  border-width: 2px;
  border-style: solid;
  background: linear-gradient(180deg, #4a5540, #333c2b);
  border-color: #6b7a5c #1f2619 #1f2619 #6b7a5c;
  color: var(--text);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.12);
  transition: filter .1s, transform .05s;
}
.btn:hover:not(:disabled) { filter: brightness(1.22); }
.btn:active:not(:disabled) {
  transform: translateY(2px);
  border-color: #1f2619 #6b7a5c #6b7a5c #1f2619;
}
.btn:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(180deg, #6fd452, #3f8a2c);
  border-color: #b6ff9a #245c17 #245c17 #b6ff9a;
  color: #08130a;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
.btn-danger {
  background: linear-gradient(180deg, #e05a5a, #8f2b2b);
  border-color: #ff9d9d #5c1717 #5c1717 #ff9d9d;
  color: #fff;
}
.btn-ghost { background: linear-gradient(180deg, #2a3226, #1c2119); }
.btn-sm { font-size: 8px !important; padding: 8px 10px; }
.play-btn { padding: 15px; font-size: 11px !important; }

/* ---------- headings: pixel font ---------- */
.game-title, .section-head h2, .hero-copy h1 {
  font-family: 'Press Start 2P', monospace !important;
  line-height: 1.5;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.65);
}
.hero-copy h1 { font-size: 30px !important; }
.game-title { font-size: 18px !important; }
.section-head h2 { font-size: 17px !important; }
.game-info h3 { font-family: 'Press Start 2P', monospace; font-size: 9.5px; line-height: 1.6; }
.panel h4 { font-family: 'Press Start 2P', monospace; font-size: 8.5px; letter-spacing: 0; }

/* ---------- sidebar: stone panel ---------- */
.sidebar {
  background:
    linear-gradient(180deg, rgba(63,74,56,0.16), rgba(20,26,17,0.16)),
    var(--bg-alt);
  border-right: 3px solid #1a2015;
}
.side-item { border-radius: 0 !important; font-size: 10.5px; }
.side-item.active {
  background: linear-gradient(180deg, #2f6b34, #1d4522);
  border-color: #7dff8a #10300f #10300f #7dff8a;
  border-width: 2px;
}

/* ---------- game grid: hard 4 columns ---------- */
.games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.game-card {
  border-color: #4a5540 #1a2015 #1a2015 #4a5540;
  background: linear-gradient(180deg, #1a2114, #101408);
  transition: transform .12s, filter .12s;
}
.game-card:hover { transform: translateY(-4px); filter: brightness(1.15); }
.game-cover { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.game-cover img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.game-info { padding: 12px; }
.game-desc { font-size: 10.5px; }

/* ---------- game boards: real block cells ---------- */
.mine-cell, .tower-cell, .sm-cell, .sn-cell, .keno-cell {
  border-radius: 0 !important;
  border: 3px solid;
  border-color: #5d6b4d #1b2116 #1b2116 #5d6b4d;
  background: linear-gradient(180deg, #46523a, #2e3726);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.08);
  transition: filter .1s, transform .08s;
}
.mine-cell:hover, .tower-cell:hover, .sm-cell:hover, .sn-cell:hover, .keno-cell:hover {
  filter: brightness(1.3);
  transform: none;
}
/* revealed: emerald block */
.mine-cell.revealed-gem, .tower-cell.revealed-safe, .sm-cell.digged, .sn-cell.crossed {
  background: linear-gradient(180deg, #3fd67a, #1c8c48) !important;
  border-color: #9dffc4 #0d5c2c #0d5c2c #9dffc4 !important;
}
/* bomb: TNT block */
.mine-cell.revealed-bomb, .tower-cell.revealed-bomb, .sm-cell.tnt {
  background: linear-gradient(180deg, #e14b4b, #8c1f1f) !important;
  border-color: #ff9d9d #5c1010 #5c1010 #ff9d9d !important;
}
.sn-cell.snake {
  background: linear-gradient(180deg, #7dff8a, #2f9c3d) !important;
  border-color: #c8ffcf #14561c #14561c #c8ffcf !important;
}
.keno-cell.picked {
  background: linear-gradient(180deg, #6fd452, #3f8a2c) !important;
  border-color: #b6ff9a #245c17 #245c17 #b6ff9a !important;
  color: #08130a !important;
}
.keno-cell.hit {
  background: linear-gradient(180deg, #ffd166, #c08a1d) !important;
  border-color: #ffe9a3 #7a5510 #7a5510 #ffe9a3 !important;
  color: #2a1c00 !important;
}
.keno-cell.missed {
  background: linear-gradient(180deg, #5a3030, #341a1a) !important;
  border-color: #8a4a4a #1f0f0f #1f0f0f #8a4a4a !important;
}
.tower-cell.cash-hint {
  border-color: var(--accent) #245c17 #245c17 var(--accent) !important;
  animation: mcPulse 1.4s ease-in-out infinite;
}
@keyframes mcPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.45)} }

/* ---------- panels / inputs ---------- */
.panel { background: linear-gradient(180deg, #1a2114, #101408); border-color: #4a5540 #1a2015 #1a2015 #4a5540; }
input[type=number], input[type=text] {
  background: #0b0f08 !important;
  border: 2px solid #4a5540 !important;
  color: var(--text) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  padding: 11px 10px !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.6);
}
input[type=range] { accent-color: var(--accent); }

/* ---------- message bar ---------- */
.message-bar {
  font-family: 'Press Start 2P', monospace;
  font-size: 9.5px;
  line-height: 1.9;
  padding: 14px 16px;
  background: #0b0f08;
  border: 2px solid #2f3a26;
}
.msg-win { border-color: var(--accent-dim); color: var(--accent); }
.msg-loss { border-color: var(--red); color: var(--red); }

/* ---------- multiplier / stat readouts ---------- */
.mine-mult, .tower-mult, .sm-depth, .keno-mult, .sn-mult, .iu-chance,
.crash-mult, .limbo-num, .hl-streak, .rr-mult, .dice-payout {
  background: #0b0f08;
  border: 2px solid #2f3a26;
  padding: 12px 18px;
  text-align: center;
}

/* ---------- balance pill / IGN ---------- */
.balance-pill {
  background: linear-gradient(180deg, #1f2a18, #121808);
  border: 2px solid #4a5540;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 10px 14px;
}
.ign-box { background: linear-gradient(180deg, #1f2a18, #121808); border: 2px solid #4a5540; }
.ign-box input { font-family: 'Press Start 2P', monospace !important; font-size: 9px !important; box-shadow: none; border: none !important; background: transparent !important; padding: 0 !important; }

/* ---------- hero: grass/dirt strip ---------- */
.hero {
  border: 3px solid #1a2015;
  padding: 46px 24px 54px !important;   /* room for the grass strip so buttons don't clip */
  background:
    linear-gradient(180deg, rgba(91,156,61,0.10), transparent 40%),
    linear-gradient(180deg, #141a0e, #0b0f08);
  position: relative;
}
.hero-inner { align-items: center !important; }
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: repeating-linear-gradient(90deg, #5b9c3d 0 16px, #4d8834 16px 32px);
  border-top: 3px solid #3a6b26;
}

/* ---------- consistent page gutters so every band lines up ----------
   .main is a flex column, so `margin:0 auto` on a child shrink-wraps it
   instead of spanning. width:100% restores the shared 1120px container. */
.promos, .stats-strip, .section {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.promos { grid-template-columns: 1fr 1fr !important; margin-top: 20px !important; }
.stats-strip { margin-top: 14px !important; }
.section { padding-top: 40px !important; }
/* topbar + footer share the same inner rhythm */
.topbar, footer { padding-left: 28px !important; padding-right: 28px !important; }

/* sidebar column paints full page height (no bare black strip) */
.app { background: linear-gradient(90deg, var(--bg-alt) 0 232px, transparent 232px); }
.sidebar { background: transparent; }
.side-item { justify-content: flex-start; text-align: left; }
.sidebar.collapsed ~ .main { /* keep main flexible when collapsed */ }

/* ---------- game cards: uniform height, no ragged bottoms ---------- */
.game-card { display: flex; flex-direction: column; }
.game-info { display: flex; flex-direction: column; flex: 1; gap: 7px; }
.game-info h3 { min-height: 30px; display: flex; align-items: center; }
.game-desc { min-height: 32px; }
.game-info .play-link, .game-info a:last-child { margin-top: auto; }

/* ---------- stats strip ---------- */
.stat-box { background: linear-gradient(180deg, #1a2114, #101408); border: 2px solid #4a5540; }
.stat-box-val { font-size: 12px; }

/* ---------- round log ---------- */
.log-row { border-bottom: 1px solid #232b1e; font-size: 10.5px; padding: 9px 2px; }

/* ---------- daily spin wheel ---------- */
.wheel { border: 5px solid #4a5540 !important; }
.modal { border: 3px solid #4a5540; background: linear-gradient(180deg, #1a2114, #0b0f08); }

/* ---------- responsive: keep 4 wide as long as possible ---------- */
@media (max-width: 1180px){ .games-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 860px){ .games-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 520px){ .games-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; } }