@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
/* Dark Neon theme */
:root{
  --bg:#0a0f19; --ink:#e7eefc; --muted:#9fb2d6; --line:rgba(255,255,255,.10);
  --neon:#00e5ff; --neon-2:#9b5cff; --neon-3:#00ffa3;
  --shadow-neon:0 0 .6rem rgba(0,229,255,.35),0 0 2rem rgba(155,92,255,.22);
  --radius:16px;
}
html,body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{text-decoration:none}
body:before{content:"";position:fixed;inset:0;background:
  radial-gradient(60vw 60vh at 10% 10%, rgba(0,229,255,.08), transparent 60%),
  radial-gradient(50vw 50vh at 90% 20%, rgba(155,92,255,.10), transparent 60%),
  radial-gradient(40vw 40vh at 40% 90%, rgba(0,255,163,.08), transparent 60%);
pointer-events:none;z-index:-2}
body:after{content:"";position:fixed;inset:-2px;background:
  linear-gradient(transparent 0, rgba(255,255,255,.04) 2px, transparent 2px) 0 0/100% 34px,
  linear-gradient(90deg, transparent 0, rgba(255,255,255,.04) 2px, transparent 2px) 0 0/34px 100%;
opacity:.25;filter:blur(.2px);pointer-events:none;z-index:-3;animation:gridmove 28s linear infinite}
@keyframes gridmove{to{transform:translateY(34px)}}
.navbar{backdrop-filter: blur(12px); border-bottom:1px solid var(--line)}
.brand-badge{width:36px;height:36px;border-radius:10px;background: conic-gradient(from 180deg,var(--neon),var(--neon-2),var(--neon-3),var(--neon)); filter: drop-shadow(0 0 10px rgba(0,229,255,.45));}
.btn-neon{position:relative;color:#001016;font-weight:800;letter-spacing:.02em;border:0;background:linear-gradient(90deg,var(--neon),var(--neon-2)); box-shadow: var(--shadow-neon)}
.btn-neon:after{content:"";position:absolute;inset:-2px;border-radius:.5rem;border:1px solid rgba(255,255,255,.28)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff}
.btn-ghost:hover{box-shadow:var(--shadow-neon)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 14px rgba(0,0,0,.35)}
.card:hover{box-shadow:0 2px 24px rgba(0,229,255,.18)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem;border-radius:999px;background:rgba(0,229,255,.12);color:var(--neon);font-weight:800;font-size:.75rem;text-shadow:0 0 8px rgba(0,229,255,.4)}
.hero-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(155,92,255,.08),transparent);mix-blend-mode:screen;animation:scan 6s linear infinite}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* Info bar highlight */
.info-flash{animation:infoFlash 1s ease-out}
@keyframes infoFlash{0%{box-shadow:var(--shadow-neon)}100%{box-shadow:none}}
.alert.info-flash{box-shadow:var(--shadow-neon)}

.pointer{
	cursor: pointer;
}
/* === Damas (Checkers) UI === */
#board { gap:1px !important; }
#board .board-cell { aspect-ratio: 1/1; border: 1px solid var(--line, #39424c); border-radius: 10px; display:flex; align-items:center; justify-content:center; background: var(--cell-bg, rgba(255,255,255,0.02)); transition: transform .08s ease, box-shadow .2s ease; color:#fff; }
#board .board-cell.light { --cell-bg: rgba(255,255,255,.03); }
#board .board-cell.dark  { --cell-bg: rgba(255,255,255,.08); }
#board .board-cell:hover { box-shadow: 0 0 0 2px rgba(0,229,255,.25) inset; }
#board .board-cell.selected { box-shadow: 0 0 0 4px rgba(0,229,255,.6) inset; }
/* Último lance */
#board .board-cell.last-from { box-shadow: 0 0 0 4px rgba(255,193,7,.85) inset; }
#board .board-cell.last-to   { box-shadow: 0 0 0 4px rgba(0,255,163,.85) inset; }
/* Movimentos legais */
#board .board-cell.legal-move { outline: 3px dashed rgba(0,229,255,.65); outline-offset: -6px; }
#board .board-cell.legal-capture { outline: 3px solid rgba(255,77,90,.85); box-shadow: 0 0 0 4px rgba(255,77,90,.25) inset; }

/* Peças */
.piece { width: 72%; height: 72%; border-radius: 50%; position: relative; box-shadow: inset 0 6px 10px rgba(255,255,255,.15), inset 0 -6px 10px rgba(0,0,0,.4), 0 4px 8px rgba(0,0,0,.35); }
.piece-red   { background: radial-gradient(35% 35% at 30% 30%, #ff9aa4 0%, #ff4d5a 35%, #e01928 65%, #9b0d18 100%); }
.piece-black { background: radial-gradient(35% 35% at 30% 30%, #bfc6cf 0%, #8b97a6 35%, #4c5a6b 65%, #1e2732 100%); }
.piece-king { outline: 3px solid rgba(255,215,0,.8); outline-offset: -6px; }
.piece-king .king-mark { position:absolute; right: -6%; top: -6%; color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,.7); font-size: 22%; }
@media (min-width: 768px){ .piece { width: 78%; height: 78%; } }

/* Indicador de turno (verde) */
#turn { display:inline-block; padding:.1rem .5rem; border-radius:.5rem; font-weight:800; }
.turn-green { color:#00ffa3; background:rgba(0,255,163,.16); box-shadow: 0 0 10px rgba(0,255,163,.2) inset; }
#players .is-turn { color:#00ffa3; text-shadow:0 0 8px rgba(0,255,163,.45); }

/* Seta do último lance */
#boardWrap{ position:relative; }
#moveArrow{ overflow:visible; }
#moveArrow line{ stroke: rgba(0,229,255,.85); stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(0,229,255,.6)); }
#moveArrow defs marker path{ fill: rgba(0,229,255,.85); }

/* Animações de movimento/captura */
.piece.move-pulse{ animation: piecePulse .35s ease-in-out; }
@keyframes piecePulse{ 0%{ transform: scale(.9); } 50%{ transform: scale(1.08); } 100%{ transform: scale(1); } }
.piece.capture-pop{ animation: capturePop .28s ease-out; }
@keyframes capturePop{ 0%{ transform: scale(.9) rotate(0); } 60%{ transform: scale(1.1) rotate(-2deg); } 100%{ transform: scale(1) rotate(0); } }
/* camera container */
#cams { display:block }
.cam-strip{ display:flex; gap:.5rem; }
.cam-slot{ position:relative; flex:1 1 0; min-width:140px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; overflow:hidden; height:150px; display:flex; align-items:center; justify-content:center; }
.cam-slot video{ width:100%; height:100%; object-fit:cover; }
.cam-label{ position:absolute; left:6px; top:6px; background:rgba(0,0,0,.5); padding:.1rem .4rem; border-radius:.4rem; font-size:.75rem; }
@media (max-width: 576px){
  .cam-slot{ height:90px; min-width:45%; }
}

/* === Project custom helpers: form/button alignment, table mobile tweaks, action icons === */
/* Right align primary form actions */
.form-actions{display:flex;justify-content:flex-end;gap:.5rem;align-items:center}
.btn-icon{padding:.35rem .5rem;display:inline-flex;align-items:center;justify-content:center}

/* Center action buttons inside table action columns */
.table .actions{display:flex;justify-content:center;gap:.35rem;align-items:center}

/* Smaller tables on mobile to fit more content */
@media (max-width: 768px){
  .table, .table-responsive table{font-size:.88rem}
  .table td, .table th{padding:.4rem .5rem}
}
@media (max-width: 576px){
  .table, .table-responsive table{font-size:.82rem}
  .table td, .table th{padding:.32rem .4rem}
  .table .text-nowrap{white-space:normal}
}

/* Small visual tweak for icon-only buttons */
.btn-icon i{font-size:1rem}