:root{
  --bg:#020309;
  --card: rgba(255,255,255,.035);
  --line: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --gold:#ffcf6a;
  --ember:#ff6a00;
  --cyan:#63d7ff;
  --violet:#a66bff;

  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: radial-gradient(circle at 18% 10%, rgba(99,215,255,.12), transparent 55%),
              radial-gradient(circle at 78% 28%, rgba(255,106,0,.10), transparent 55%),
              radial-gradient(circle at 50% 90%, rgba(166,107,255,.10), transparent 58%),
              var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.clutch-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.15rem 4rem;
}

.clutch-hero{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,207,106,.10), rgba(0,0,0,0));
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.clutch-hero::after{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,106,0,.18), transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(99,215,255,.14), transparent 55%),
    radial-gradient(circle at 55% 75%, rgba(166,107,255,.14), transparent 58%);
  pointer-events:none;
}
.clutch-hero *{ position:relative; }

.hero-kicker{
  display:inline-flex;
  border:1px solid var(--line);
  background: rgba(0,0,0,.35);
  padding:.35rem .65rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: .86rem;
}
.hero-title{
  margin:.75rem 0 .15rem;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing:.03em;
}
.hero-sub{
  margin: 0;
  max-width: 78ch;
  color: var(--muted);
}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top: 1rem;
}
.badge{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  padding:.45rem .7rem;
  color: var(--muted);
  font-size:.85rem;
}

.hero-nav{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top: 1.1rem;
}
.nav-btn{
  text-decoration:none;
  color: var(--muted);
  border:1px solid var(--line);
  background: rgba(0,0,0,.30);
  padding:.55rem .8rem;
  border-radius: 12px;
}
.nav-btn:hover{ filter:brightness(1.08); }

.clutch-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media(min-width: 980px){
  .clutch-grid{ grid-template-columns: 1.35fr .65fr; }
}

.panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.1rem 1.05rem;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  margin-bottom: .75rem;
}
.panel-title{
  margin:0;
  font-size: 1.05rem;
  letter-spacing:.02em;
  color: rgba(255,255,255,.88);
}

.panel-tools{ display:flex; gap:.5rem; }

.btn{
  border:1px solid rgba(255,207,106,.35);
  background: linear-gradient(180deg, rgba(255,207,106,.16), rgba(255,207,106,.06));
  color: var(--text);
  border-radius: 12px;
  padding:.65rem .85rem;
  font-weight: 700;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.06); }
.btn.ghost{
  border:1px solid var(--line);
  background: rgba(0,0,0,.30);
  color: var(--muted);
}
.select{
  width:100%;
  border:1px solid var(--line);
  background: rgba(0,0,0,.30);
  color: var(--text);
  padding:.6rem .7rem;
  border-radius: 12px;
}

.statusbar{
  display:flex;
  justify-content:space-between;
  gap: .75rem;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  padding:.55rem .75rem;
  margin-bottom: .9rem;
}
.turn{ display:flex; gap:.55rem; align-items:center; color: var(--muted); }
.dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--ember);
  box-shadow: 0 0 12px rgba(255,106,0,.65);
}
.score{ color: var(--muted); }

.board-wrap{
  border:1px solid var(--line);
  border-radius: 18px;
  padding: .9rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,207,106,.10), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(99,215,255,.10), transparent 60%),
    rgba(0,0,0,.35);
}

.board{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  user-select:none;
}

.cell{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35)),
    radial-gradient(circle at 30% 25%, rgba(99,215,255,.14), transparent 55%);
  cursor:pointer;
  overflow:hidden;
}
.cell:hover{ filter:brightness(1.08); }
.cell:focus{ outline: 2px solid rgba(99,215,255,.55); outline-offset:2px; }

.cell.core{
  border:1px solid rgba(255,207,106,.24);
  box-shadow:
    0 0 18px rgba(255,207,106,.20),
    inset 0 0 24px rgba(255,207,106,.10);
}
.cell.core::after{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 50% 50%, rgba(255,207,106,.14), transparent 55%);
  pointer-events:none;
}

.piece{
  position:absolute;
  inset: 14%;
  border-radius: 14px;
  transform: rotate(45deg);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 0 22px rgba(255,106,0,.20);
}
.piece.ember{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,207,106,.45), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,106,0,.35), transparent 55%),
    linear-gradient(180deg, rgba(255,106,0,.25), rgba(0,0,0,.45));
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 0 22px rgba(255,106,0,.38);
}
.piece.void{
  background:
    radial-gradient(circle at 30% 30%, rgba(99,215,255,.25), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(166,107,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(20,22,36,.65), rgba(0,0,0,.55));
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 0 22px rgba(99,215,255,.24);
}

.hint{
  margin-top: .85rem;
  color: var(--muted);
  font-size: .95rem;
}

.side-panel .console-block{
  border:1px solid var(--line);
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  padding: .85rem;
  margin-top: .8rem;
}
.row{ display:flex; gap:.6rem; align-items:center; }
.row + .row{ margin-top:.7rem; }

.check{
  display:flex; gap:.6rem; align-items:center;
  color: var(--muted);
  font-size:.92rem;
}
.check input{ transform: translateY(1px); }

.subhead{
  margin:0 0 .55rem;
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}

.rules{
  margin:0;
  padding-left: 1.1rem;
  color: var(--muted);
}
.rules li{ margin:.35rem 0; }

.callout{
  margin-top:.7rem;
  padding-left:.9rem;
  border-left: 3px solid rgba(255,207,106,.55);
  color: var(--muted);
}

.log{
  max-height: 220px;
  overflow:auto;
  padding:.7rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.86rem;
  line-height:1.5;
}
.fineprint p{ margin:.55rem 0; }
.muted{ color: var(--muted); }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.62);
  padding: 1.25rem;
  z-index: 999;
}
.modal.is-open{ display:flex; }
.modal-card{
  width:min(860px, 100%);
  border:1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,106,0,.14), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(99,215,255,.14), transparent 55%),
    rgba(10,12,22,.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal-head h2{
  margin:0;
  font-size:1.05rem;
  letter-spacing:.02em;
}
.modal-body{ padding: 1rem; }
.tutorial-steps{
  margin:0;
  padding-left: 1.1rem;
  color: var(--muted);
}
.tutorial-steps li{ margin:.45rem 0; }
.modal-callout{
  margin-top: .8rem;
  border-left: 3px solid rgba(99,215,255,.55);
  padding-left: .9rem;
  color: var(--muted);
}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top: 1rem;
}

.clutch-hero {
  margin: 1.5rem auto 2rem;
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 40px rgba(255,120,40,.18);
}



.clutch-hero {
  max-width: 1100px;
  margin: 1.25rem auto 1.5rem;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 35px rgba(255,120,40,.15);
}

.clutch-hero img {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
  object-fit: contain;
}

/* === THE CLUTCH — HERO IMAGE: REMOVE HAZE === */
.clutch-hero {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.clutch-hero::before,
.clutch-hero::after {
  content: none !important;
  display: none !important;
}

.clutch-hero img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* === PIECES: Flame Shards (not domino/Go) === */
.cell { position: relative; }

.piece{
  width: 78%;
  height: 78%;
  margin: auto;
  position: relative;
  transform: rotate(45deg);
  border-radius: 10px;
  clip-path: polygon(50% 0%, 92% 20%, 100% 50%, 92% 80%, 50% 100%, 8% 80%, 0% 50%, 8% 20%);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.piece::before{
  content:"";
  position:absolute; inset:8%;
  clip-path: inherit;
  opacity:.9;
  transform: rotate(-12deg);
}

.piece::after{
  content:"";
  position:absolute; inset:18%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity:.75;
  mix-blend-mode: screen;
}

/* Ember = molten shard */
.piece.ember{
  background: radial-gradient(circle at 30% 30%, rgba(255,200,120,.95), rgba(255,106,0,.75) 45%, rgba(120,20,0,.2) 75%);
  box-shadow: 0 0 18px rgba(255,106,0,.55), inset 0 0 10px rgba(255,210,140,.25);
}
.piece.ember::before{
  background: linear-gradient(135deg, rgba(255,220,160,.85), rgba(255,106,0,.25));
}
.piece.ember::after{
  background: radial-gradient(circle, rgba(255,210,120,.85), rgba(255,106,0,0));
}

/* Void = obsidian shard */
.piece.void{
  background: radial-gradient(circle at 30% 30%, rgba(150,240,255,.55), rgba(50,70,120,.35) 40%, rgba(0,0,0,.75) 78%);
  box-shadow: 0 0 18px rgba(99,215,255,.45), inset 0 0 10px rgba(99,215,255,.18);
}
.piece.void::before{
  background: linear-gradient(135deg, rgba(120,240,255,.55), rgba(0,0,0,.25));
}
.piece.void::after{
  background: radial-gradient(circle, rgba(120,240,255,.65), rgba(0,0,0,0));
}

.sigil {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.ember-sigil {
  color: #ff6a00;
  filter: drop-shadow(0 0 12px rgba(255,106,0,.65));
}

.void-sigil {
  color: #63d7ff;
  filter: drop-shadow(0 0 12px rgba(99,215,255,.65));
}

/* ================================
   CLUTCH — Micro-Polish Animations
   ================================ */

.piece.spawn {
  animation: sigilSpawn 220ms ease-out both;
}

@keyframes sigilSpawn {
  0%   { transform: scale(.7) rotate(0deg); opacity: 0; filter: blur(2px); }
  70%  { transform: scale(1.08) rotate(6deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* flipped pieces: quick energy surge */
.piece.flipped {
  animation: flipSurge 260ms ease-out both;
}

@keyframes flipSurge {
  0%   { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  60%  { filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,255,255,.20)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* board pulses (AI + Ember capture) */
#board.void-pulse {
  animation: voidPulse 220ms ease-out both;
}

@keyframes voidPulse {
  0%   { box-shadow: 0 0 0 rgba(99,215,255,0); }
  55%  { box-shadow: 0 0 26px rgba(99,215,255,.22); }
  100% { box-shadow: 0 0 0 rgba(99,215,255,0); }
}

#board.ember-pulse {
  animation: emberPulse 220ms ease-out both;
}

@keyframes emberPulse {
  0%   { box-shadow: 0 0 0 rgba(255,106,0,0); }
  55%  { box-shadow: 0 0 26px rgba(255,106,0,.22); }
  100% { box-shadow: 0 0 0 rgba(255,106,0,0); }
}

/* ===== CLUTCH: visible sigil animations (SVG-safe) ===== */

.piece.spawn .sigil {
  transform-origin: 50% 50%;
  animation: sigilPop 260ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes sigilPop {
  0%   { transform: scale(.55); opacity: 0; filter: blur(2px); }
  70%  { transform: scale(1.18); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}

.piece.flipped .sigil {
  transform-origin: 50% 50%;
  animation: flipFlash 280ms ease-out both;
}

@keyframes flipFlash {
  0%   { transform: scale(1); filter: brightness(1); }
  55%  { transform: scale(1.12); filter: brightness(1.55); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* board pulses (bigger so you feel it) */
#board.void-pulse { animation: voidPulse 260ms ease-out both; }
#board.ember-pulse { animation: emberPulse 260ms ease-out both; }

@keyframes voidPulse {
  0%   { box-shadow: 0 0 0 rgba(99,215,255,0); }
  60%  { box-shadow: 0 0 40px rgba(99,215,255,.28); }
  100% { box-shadow: 0 0 0 rgba(99,215,255,0); }
}

@keyframes emberPulse {
  0%   { box-shadow: 0 0 0 rgba(255,106,0,0); }
  60%  { box-shadow: 0 0 40px rgba(255,106,0,.28); }
  100% { box-shadow: 0 0 0 rgba(255,106,0,0); }
}