/* ===========================================================================
   PearlChip — Minecraft skin layer
   Real vanilla 1.21.1 textures extracted from client.jar, served from
   assets/tex/. Every interactive tile is a textured BLOCK, not a coloured div.
   Loaded AFTER style.css and mc.css so it wins on specificity.
   =========================================================================== */

:root{
  --tex: url('assets/tex/');
  --mc-shadow-in: inset -4px -4px 0 rgba(0,0,0,.42), inset 4px 4px 0 rgba(255,255,255,.16);
  --mc-shadow-out: inset 4px 4px 0 rgba(0,0,0,.42), inset -4px -4px 0 rgba(255,255,255,.10);
}

/* Every texture must stay crisp pixel art at any size.
   ORDER MATTERS: the LAST valid declaration wins, and Chromium only does true
   nearest-neighbour upscaling for `pixelated` (`crisp-edges` still smoothed the
   background-image, which made vanilla stone.png look blurry). Fallbacks first,
   `pixelated` last. */
.mc-block, .mc-item, .mc-cell, .mc-cell::before, .mc-icon,
.mc-slot img, .game-cover img, img.mc-tex{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------- game board */
/* A board is a stone-brick frame holding textured blocks. */
.mc-board{
  display: grid;
  gap: 4px;
  padding: 8px;
  /* dark frame: a stone-brick frame behind stone cells made the gaps invisible */
  background: #0b0d09;
  border: 4px solid #06070a;
  box-shadow: var(--mc-shadow-out), 0 10px 0 rgba(0,0,0,.35);
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}

/* One cell = one Minecraft block face. Default: unmined stone. */
.mc-cell{
  position: relative;
  /* 64px == the exported texture size, so scaling is 1:1 and pixels stay hard */
  width: 64px;
  height: 64px;
  background-image: url('assets/tex/stone.png');
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  box-shadow: var(--mc-shadow-in);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter .12s, transform .12s;
  padding: 0;
}
.mc-cell:hover{ filter: brightness(1.25); }
.mc-cell:active{ transform: translateY(2px); }

/* block variants */
.mc-cell.b-dirt      { background-image: url('assets/tex/dirt.png'); }
.mc-cell.b-grass     { background-image: url('assets/tex/grass_side.png'); }
.mc-cell.b-stone     { background-image: url('assets/tex/stone.png'); }
.mc-cell.b-cobble    { background-image: url('assets/tex/cobble.png'); }
.mc-cell.b-deepslate { background-image: url('assets/tex/deepslate.png'); }
.mc-cell.b-plank     { background-image: url('assets/tex/plank.png'); }
.mc-cell.b-obsidian  { background-image: url('assets/tex/obsidian.png'); }
.mc-cell.b-tnt       { background-image: url('assets/tex/tnt.png'); }
.mc-cell.b-gold      { background-image: url('assets/tex/goldblock.png'); }
.mc-cell.b-diamond   { background-image: url('assets/tex/diamondblk.png'); }
.mc-cell.b-emerald   { background-image: url('assets/tex/emeraldblk.png'); }
.mc-cell.b-lapis     { background-image: url('assets/tex/lapis.png'); }
.mc-cell.b-gravel    { background-image: url('assets/tex/gravel.png'); }
.mc-cell.b-bedrock   { background-image: url('assets/tex/bedrock.png'); }
.mc-cell.b-wool_w    { background-image: url('assets/tex/wool_w.png'); }
.mc-cell.b-wool_k    { background-image: url('assets/tex/wool_k.png'); }
.mc-cell.b-wool_r    { background-image: url('assets/tex/wool_r.png'); }
.mc-cell.b-wool_g    { background-image: url('assets/tex/wool_g.png'); }
.mc-cell.b-quartz    { background-image: url('assets/tex/quartz.png'); }
.mc-cell.b-netherite { background-image: url('assets/tex/netherite.png'); }
.mc-cell.b-mossy     { background-image: url('assets/tex/mossy.png'); }

/* ore blocks (what a revealed prize tile looks like) */
.mc-cell.b-diamond_ore { background-image: url('assets/tex/diamond_ore.png'); }
.mc-cell.b-emerald_ore { background-image: url('assets/tex/emerald_ore.png'); }
.mc-cell.b-gold_ore    { background-image: url('assets/tex/gold_ore.png'); }
.mc-cell.b-coal_ore    { background-image: url('assets/tex/coal_ore.png'); }
.mc-cell.b-iron_ore    { background-image: url('assets/tex/iron_ore.png'); }

/* item sprite sitting on a block */
.mc-item{
  width: 74%;
  height: 74%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5));
}

/* state: hit / safe / lost */
.mc-cell.hit   { box-shadow: var(--mc-shadow-in), 0 0 16px rgba(147,255,114,.55); }
.mc-cell.boom  { box-shadow: var(--mc-shadow-in), 0 0 20px rgba(255,86,72,.7); }
.mc-cell.dim   { filter: brightness(.42) saturate(.6); }

/* PRE-BET PREVIEW: board fully visible, but not clickable.
   The user asked for exactly this — see the game before betting. */
.mc-board.locked .mc-cell{ cursor: not-allowed; }
.mc-board.locked .mc-cell:hover{ filter: none; }
.mc-board.locked{ position: relative; }
.mc-board.locked::after{
  content: 'PRESS PLAY TO BET';
  position: absolute; inset: auto 0 -34px 0;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: #93FF72;
  text-shadow: 2px 2px 0 #0a0d09;
  pointer-events: none;
}

/* ------------------------------------------------------------- inventory HUD */
.mc-hotbar{
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 5px;
  background: rgba(10,13,9,.86);
  border: 3px solid #0b0d09;
  box-shadow: var(--mc-shadow-out);
  width: max-content;
  margin: 12px auto 0;
}
.mc-slot{
  width: 46px; height: 46px;
  background: rgba(139,139,139,.30);
  box-shadow: var(--mc-shadow-in);
  display: grid; place-items: center;
  position: relative;
}
.mc-slot img{ width: 76%; height: 76%; image-rendering: pixelated; }
.mc-slot .count{
  position: absolute; right: 2px; bottom: 0;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
}

/* -------------------------------------------------------------- xp-style bar */
.mc-xp{
  width: 100%; height: 12px;
  background: #0b0d09;
  border: 2px solid #1a2015;
  box-shadow: var(--mc-shadow-in);
  overflow: hidden;
  margin-top: 8px;
}
.mc-xp > span{
  display: block; height: 100%;
  background: linear-gradient(#a8ff8b, #4fbf35);
  transition: width .25s;
}

/* ------------------------------------------------------------ generic chrome */
.mc-panel{
  background-image: url('assets/tex/dark_plank.png');
  background-size: 64px 64px;
  border: 4px solid #0b0d09;
  box-shadow: var(--mc-shadow-out);
}