/* v0.4.8 — restrained sci-fi board + crystal blocks
   Reference direction: dark blue game board, thin cyan grid, metallic frame.
   No candy-like oversized highlights. */

/* ===== BOARD FRAME ===== */
.pirate-board-stage{
  position:relative!important;
  padding:7px!important;
  border:1px solid #465762!important;
  border-radius:12px!important;
  background:
    linear-gradient(135deg,rgba(166,190,203,.12) 0 1px,transparent 1px 28px),
    linear-gradient(180deg,#222c32 0%,#121a1f 18%,#080f13 52%,#141d22 84%,#273239 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(225,239,247,.16),
    inset 0 -1px 0 #000,
    inset 5px 0 10px rgba(0,0,0,.22),
    inset -5px 0 10px rgba(0,0,0,.22),
    0 5px 14px rgba(0,0,0,.36)!important;
}
.pirate-board-stage::before,
.pirate-board-stage::after{
  content:""!important;
  position:absolute!important;
  left:29%!important;right:29%!important;height:2px!important;
  border-radius:1px!important;
  background:linear-gradient(90deg,transparent,#21a9d5 20%,#71dfff 50%,#21a9d5 80%,transparent)!important;
  box-shadow:0 0 4px rgba(56,198,239,.38)!important;
  pointer-events:none!important;z-index:3!important;
}
.pirate-board-stage::before{top:3px!important}
.pirate-board-stage::after{top:auto!important;bottom:3px!important}
.brass-bolt{
  width:6px!important;height:6px!important;
  background:radial-gradient(circle at 35% 30%,#bfcbd1 0 13%,#5f6b72 25% 52%,#151c20 60% 100%)!important;
  border:1px solid #75838a!important;box-shadow:0 1px 1px #000!important;
}
.board-wrap{
  position:relative!important;
  padding:3px!important;
  border:1px solid #1f617c!important;
  border-radius:8px!important;
  background:#071218!important;
  box-shadow:
    0 0 0 1px rgba(53,182,225,.12),
    inset 0 0 12px rgba(21,112,149,.10)!important;
}
.board{
  border:1px solid #31a9cf!important;
  border-radius:5px!important;
  overflow:hidden!important;
  background:
    repeating-linear-gradient(0deg,rgba(88,190,226,.012) 0 1px,transparent 1px 3px),
    linear-gradient(135deg,rgba(59,117,144,.035) 0 17%,transparent 17% 64%,rgba(58,114,140,.018) 64% 78%,transparent 78%),
    linear-gradient(180deg,#062131 0%,#041b28 48%,#031620 100%)!important;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.42),
    inset 0 0 7px rgba(24,127,166,.08)!important;
}
.board-cell{
  border:1px solid rgba(28,93,124,.66)!important;
  background:
    radial-gradient(circle at 1px 1px,rgba(85,178,214,.38) 0 1px,transparent 1.45px),
    rgba(2,24,35,.18)!important;
  box-shadow:none!important;
}
.board-cell:nth-child(3n){border-right:1.5px solid rgba(39,126,165,.82)!important}
.board-cell:nth-child(9n){border-right:1px solid rgba(28,93,124,.66)!important}
.board-cell:nth-child(n+19):nth-child(-n+27),
.board-cell:nth-child(n+46):nth-child(-n+54){border-bottom:1.5px solid rgba(39,126,165,.82)!important}

/* ===== PLACED BLOCKS: crisp crystal, not candy ===== */
.board-cell.filled,
.board-cell.preview-filled,
.board-cell.filled.board-colored,
.board-cell.preview-filled.board-colored{
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--piece-soft,#9cc6ff) 42%,white) 0 3%,
      color-mix(in srgb,var(--piece-color,#2378ff) 88%,white) 4% 18%,
      var(--piece-color,#2378ff) 42% 72%,
      color-mix(in srgb,var(--piece-color,#2378ff) 67%,black) 100%)!important;
  border:1px solid color-mix(in srgb,var(--piece-color,#2378ff) 58%,white)!important;
  border-radius:2px!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.32),
    inset -2px -2px 3px rgba(0,0,0,.28),
    0 0 4px color-mix(in srgb,var(--piece-color,#2378ff) 30%,transparent)!important;
  z-index:1!important;
}
.board-cell.filled::after,
.board-cell.preview-filled::after{
  content:""!important;
  position:absolute!important;
  left:8%!important;right:34%!important;top:7%!important;height:8%!important;
  border-radius:1px!important;
  background:rgba(255,255,255,.32)!important;
  border:none!important;pointer-events:none!important;opacity:.8!important;
}
.board-cell.will-clear::after{
  content:""!important;position:absolute!important;inset:11%!important;height:auto!important;
  border:1px dashed rgba(255,255,255,.74)!important;border-radius:2px!important;
  background:transparent!important;opacity:1!important;
}
.board-cell.suggested{
  outline:2px solid #ffe85f!important;
  box-shadow:inset 0 0 0 1px #ffe85f,0 0 5px rgba(255,226,72,.34)!important;
}
.board-cell.suggested::before{color:#ffe85f!important;text-shadow:0 1px 2px #000!important}
.board-cell.drag-valid{outline:2px solid #64df9a!important}
.board-cell.drag-invalid{outline:2px solid #e96778!important}

/* ===== MINI PIECES ===== */
.mini-piece-cell{position:relative!important;overflow:hidden!important}
.mini-piece-cell.on,
.mini-piece-cell.on.dynamic-piece{
  border:1px solid color-mix(in srgb,var(--piece-color,#2378ff) 58%,white)!important;
  border-radius:2px!important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--piece-soft,#9cc6ff) 38%,white) 0 4%,
      color-mix(in srgb,var(--piece-color,#2378ff) 88%,white) 5% 20%,
      var(--piece-color,#2378ff) 44% 72%,
      color-mix(in srgb,var(--piece-color,#2378ff) 68%,black) 100%)!important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.30),
    inset -1px -2px 2px rgba(0,0,0,.28),
    0 0 4px color-mix(in srgb,var(--piece-color,#2378ff) 26%,transparent)!important;
}
.mini-piece-cell.on::after{
  content:""!important;position:absolute!important;
  left:10%!important;top:8%!important;width:46%!important;height:8%!important;
  border-radius:1px!important;background:rgba(255,255,255,.30)!important;pointer-events:none!important;
}
.preset-option{background:linear-gradient(180deg,#0a1821,#071118)!important;border-color:#294f62!important}
.preset-option:hover,.preset-option:focus-visible{border-color:#45b9df!important;background:linear-gradient(180deg,#0c2230,#081720)!important}

/* ===== DESKTOP CURRENT PIECES: use available height without looking stretched ===== */
@media (min-width:761px){
  #piecesPanel{display:flex!important;flex-direction:column!important;min-height:0!important}
  #piecesPanel .piece-row{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;flex:1 1 auto!important;min-height:210px!important;align-items:stretch!important;
  }
  #piecesPanel .piece-card{
    display:grid!important;grid-template-rows:auto auto minmax(132px,1fr) auto!important;
    min-height:210px!important;padding:8px!important;border-radius:10px!important;align-content:stretch!important;
  }
  #piecesPanel .current-piece-box{
    height:auto!important;min-height:132px!important;max-height:none!important;margin:6px 0!important;padding:9px 5px!important;
    justify-content:center!important;
    background:linear-gradient(180deg,#07141d,#040d13)!important;
    border:1px solid #254859!important;box-shadow:inset 0 0 10px rgba(19,81,107,.08)!important;
  }
  #piecesPanel .piece-drag-shape{max-width:100%!important;max-height:112px!important;min-height:72px!important;gap:4px!important}
  #piecesPanel .mini-piece-cell{width:20px!important;height:20px!important}
  #piecesPanel .piece-drag-shape.shape-max-4 .mini-piece-cell{width:17px!important;height:17px!important}
  #piecesPanel .piece-drag-shape.shape-max-5 .mini-piece-cell{width:14px!important;height:14px!important}
  #piecesPanel .piece-title b{font-size:23px!important}
  #piecesPanel .piece-title span{font-size:10px!important}
  #piecesPanel .preset-open{min-height:31px!important;font-size:10px!important}
  #piecesPanel .nav-place{min-height:32px!important;font-size:9.5px!important}
  #piecesPanel .survival-desktop{flex:0 0 auto!important;margin-top:8px!important}
}

/* ===== MOBILE ===== */
@media (max-width:760px){
  .pirate-board-stage{padding:4px!important;border-radius:8px!important}
  .pirate-board-stage::before,.pirate-board-stage::after{left:32%!important;right:32%!important;height:1px!important}
  .board-wrap{padding:2px!important;border-radius:6px!important}
  .board{border-width:1px!important;border-radius:4px!important}
  .board-cell{border-color:rgba(28,93,124,.60)!important}
  .board-cell:nth-child(3n){border-right-width:1.25px!important}
  .board-cell:nth-child(n+19):nth-child(-n+27),.board-cell:nth-child(n+46):nth-child(-n+54){border-bottom-width:1.25px!important}
  .board-cell.filled,.board-cell.preview-filled,.board-cell.filled.board-colored,.board-cell.preview-filled.board-colored{border-radius:1px!important}
  #piecesPanel .current-piece-box{background:linear-gradient(180deg,#07141d,#040d13)!important;border-color:#254859!important}
  #piecesPanel .mini-piece-cell{width:10px!important;height:10px!important;border-radius:1.5px!important}
  #piecesPanel .piece-drag-shape.shape-max-4 .mini-piece-cell{width:9px!important;height:9px!important}
  #piecesPanel .piece-drag-shape.shape-max-5 .mini-piece-cell{width:8px!important;height:8px!important}
}
@media (max-width:380px){
  #piecesPanel .mini-piece-cell{width:9px!important;height:9px!important}
  #piecesPanel .piece-drag-shape.shape-max-5 .mini-piece-cell{width:7px!important;height:7px!important}
}