/* chess-coach — mobile-first teaching board */

:root{
  --bg:#0f1116;
  --panel:#181b23;
  --panel-2:#1f2330;
  --line:#2a3040;
  --text:#e8ebf2;
  --muted:#8b93a6;
  --accent:#4f8cff;
  --from:#2f7cf6;      /* cool = source square */
  --to:#ff9f0a;        /* warm = target square */
  --light:#e9d6b0;
  --dark:#a87c52;
  --board: min(94vw, 60vh);
  --radius:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* .promo/.sheet/.busy set display:flex, which would beat the UA [hidden] rule
   and leave invisible layers swallowing taps. Make [hidden] authoritative. */
[hidden]{display:none !important;}

html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}

body{
  touch-action:manipulation;
  min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app{
  max-width:520px;
  margin:0 auto;
  padding:10px 12px 26px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ---------------- top bar ---------------- */
.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.brand{font-size:17px;font-weight:650;letter-spacing:.2px;}
.brand .sub{font-size:11px;font-weight:400;color:var(--muted);margin-left:7px;letter-spacing:1px;}
.engine{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.engine.down{color:#ff6b6b;}

/* ---------------- status ---------------- */
.statusbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:26px;}
.pill{
  font-size:12px;line-height:1;
  padding:7px 10px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;
}
.pill.turn{color:var(--text);font-weight:600;}
.pill.turn.mine{border-color:#3a5b9a;background:#1b2740;color:#cfe0ff;}
.pill.turn.check{border-color:#a33;background:#3a1b1e;color:#ffc9c9;}
.pill.turn.over{border-color:#4a6b3a;background:#1d2a18;color:#cfe8b8;}
.pill.last{color:#c9b28a;}
.pill:empty{display:none;}

/* ---------------- board ---------------- */
.board-wrap{
  position:relative;
  width:var(--board);
  height:var(--board);
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  touch-action:manipulation;
  /* the checkerboard lives on the wrapper so the heatmap can be painted
     *between* the squares and the pieces (pieces must stay readable at
     full overlay opacity). Both orientations have a light top-left square. */
  background-image:repeating-conic-gradient(var(--dark) 0% 25%, var(--light) 0% 50%);
  background-size:25% 25%;
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}

.board{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  z-index:3;                 /* pieces above the heatmap */
}

.sq{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--board) / 8 * 0.76);
  line-height:1;
  user-select:none;-webkit-user-select:none;
  cursor:pointer;
}
.sq{background:transparent;}

.coord{
  position:absolute;
  font-size:max(8px, calc(var(--board) / 8 * 0.2));
  font-weight:700;letter-spacing:.2px;
  opacity:.62;pointer-events:none;z-index:1;
}
.coord.rank{top:2px;left:3px;}
.coord.file{bottom:2px;right:3px;}
.sq.light .coord{color:#8a6435;}
.sq.dark  .coord{color:#f6e9d2;}

/* pieces: solid glyphs for both colours, separated by fill + outline */
.piece{
  position:relative;z-index:2;
  paint-order:stroke fill;
  -webkit-text-stroke:1.1px #14151b;
  color:#fffdf7;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.piece.b{
  -webkit-text-stroke:1.1px #f2ece0;
  color:#17181e;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

/* selection + legal destinations */
.sq.sel::before{
  content:'';position:absolute;inset:0;
  background:rgba(79,140,255,.34);
  box-shadow:inset 0 0 0 2px rgba(160,200,255,.9);
  z-index:1;
}
.sq.dest::after{
  content:'';position:absolute;
  width:30%;height:30%;border-radius:50%;
  background:rgba(18,20,26,.34);
  z-index:1;
}
.sq.dest.occupied::after{
  width:82%;height:82%;border-radius:50%;
  background:transparent;
  box-shadow:inset 0 0 0 5px rgba(18,20,26,.34);
}

/* ---------------- heatmap overlay ---------------- */
.overlay{
  position:absolute;inset:0;
  border-radius:var(--radius);
  overflow:hidden;
  pointer-events:none;
  z-index:2;                 /* between the checkerboard and the pieces */
}
.hl{position:absolute;width:12.5%;height:12.5%;}
.hl > i{
  position:absolute;inset:7%;display:block;
  border-radius:22%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.hl.from > i{background:var(--from);}
.hl.to   > i{background:var(--to);}
.hl.r1 > i{box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), 0 0 10px rgba(0,0,0,.35);}

/* ---------------- arrows ---------------- */
.arrows{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;
  overflow:visible;
}
.arrows .halo{stroke:#0b0d12;stroke-linecap:round;fill:none;}
.arrows .shaft{stroke:#ffffff;stroke-linecap:round;fill:none;}
.arrows .head{fill:#ffffff;}
.arrows .headhalo{fill:#0b0d12;}

/* ---------------- busy + promotion ---------------- */
.busy{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  background:rgba(12,14,20,.86);
  border:1px solid var(--line);
  color:var(--text);
  font-size:12px;padding:7px 12px;border-radius:999px;
  z-index:6;pointer-events:none;backdrop-filter:blur(4px);
}
.spin{
  width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--accent);
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg);}}

.promo{
  position:absolute;inset:0;z-index:7;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,14,.72);
  border-radius:var(--radius);
}
.promo .card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
  display:flex;gap:8px;align-items:center;
}
.promo .card span{font-size:11px;color:var(--muted);margin-right:2px;}
.promo button{
  width:46px;height:46px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);
  color:#fffdf7;font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.promo button:active{background:#2b3242;}

/* ---------------- controls ---------------- */
.controls{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  width:var(--board);margin:0 auto;
}
.btn{
  appearance:none;border:1px solid var(--line);
  background:var(--panel);color:var(--text);
  font-size:14px;font-weight:550;
  padding:12px 6px;border-radius:11px;
  cursor:pointer;font-family:inherit;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:active{background:var(--panel-2);}
.btn:disabled{opacity:.4;cursor:default;}
.btn.toggle[aria-pressed="true"]{
  background:#1b2740;border-color:#3a5b9a;color:#cfe0ff;
}

/* ---------------- hint list ---------------- */
.hints{
  width:var(--board);margin:0 auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 10px 6px;
}
.hints-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--muted);margin-bottom:6px;
}
.hints-head em{font-style:normal;color:#5d6a85;font-size:11px;}
.hints-head .meta{font-variant-numeric:tabular-nums;font-size:11px;}
.hint-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.hint-list .row{
  display:grid;
  grid-template-columns:20px 14px 1fr auto auto;
  gap:7px;align-items:center;
  padding:6px 4px;border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.hint-list .row + .row{border-top:1px solid rgba(255,255,255,.045);}
.hint-list .rk{color:#5d6a85;font-size:11px;text-align:center;}
.hint-list .sw{position:relative;height:16px;width:12px;}
.hint-list .sw i{position:absolute;width:9px;height:9px;border-radius:3px;display:block;}
.hint-list .sw i.a{background:var(--from);top:0;}
.hint-list .sw i.b{background:var(--to);bottom:0;}
.hint-list .mv{font-size:13px;display:flex;align-items:center;gap:6px;min-width:0;}
.hint-list .glyph{font-size:17px;line-height:1;color:#fffdf7;-webkit-text-stroke:.8px #14151b;}
.hint-list .glyph.b{color:#17181e;-webkit-text-stroke:.8px #f2ece0;}
.hint-list .sqs{color:var(--muted);font-size:12px;}
.hint-list .san{font-size:12px;color:#a9b4cc;}
.hint-list .ev{font-size:12px;font-weight:600;color:#9fd0a0;text-align:right;}
.hint-list .ev.neg{color:#e39a9a;}
.hint-list .pv{
  grid-column:3 / -1;font-size:11px;color:#5d6a85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hint-list .empty{
  font-size:12px;color:#5d6a85;padding:9px 4px;
}
.hint-list .empty.thinking{color:#8fa6d8;}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#3a1b1e;border:1px solid #7a3336;color:#ffd9d9;
  font-size:13px;padding:10px 14px;border-radius:10px;
  z-index:50;max-width:88vw;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ---------------- sheet ---------------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(5,7,11,.6);z-index:40;}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(520px,100vw);
  background:var(--panel);
  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  z-index:41;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 -12px 40px rgba(0,0,0,.55);
}
.sheet h2{margin:0;font-size:15px;font-weight:600;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:12px;color:var(--muted);}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;}
.seg button{
  appearance:none;font-family:inherit;font-size:13px;
  padding:11px 4px;border-radius:10px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
}
.seg button.on{background:#1b2740;border-color:#3a5b9a;color:#cfe0ff;font-weight:600;}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn.primary{background:#24406f;border-color:#3a5b9a;color:#dbe8ff;font-weight:600;}
.btn.ghost{background:transparent;color:var(--muted);}

@media (max-height:700px){
  :root{--board:min(94vw, 52vh);}
}