*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:var(--bg);color:var(--text);
  user-select:none;-webkit-user-select:none;
}
/* ---------- themes ---------- */
:root,[data-theme="classic"]{
  --bg:#1c1b1a;
  --bg-image:radial-gradient(120% 60% at 50% 0%,#2a2724 0%,#1c1b1a 60%,#141312 100%);
  --text:#f3ead8;
  --gold:#d4a84a;--gold-hi:#f2d58a;--gold-lo:#8a6a26;
  --sq-light:#e8cfa0;--sq-dark:#a9774b;
  --coord-on-light:#8a5a33;--coord-on-dark:#f3dfb7;
  --frame:linear-gradient(145deg,#f2d58a,#b88a32 45%,#7a5a1e 70%,#e6c26e);
  --bubble-bg:#f7f0e1;--bubble-text:#2a2420;--bubble-border:#d4a84a;
  --btn-bg:linear-gradient(180deg,#2e2a26,#1d1a17);
  --btn-text:#f2d58a;--btn-border:#d4a84a;
  --btn-primary-bg:linear-gradient(180deg,#e2bc62,#b38532);--btn-primary-text:#1c1610;
  --last:rgba(255,214,90,.45);--sel:rgba(255,226,120,.6);
  --dot:rgba(40,25,10,.38);--check:radial-gradient(circle,rgba(255,40,30,.95) 0%,rgba(230,30,20,.55) 45%,rgba(200,0,0,0) 75%);
  --avatar-ring:#d4a84a;
}
[data-theme="fantasy"]{
  --bg:#0b2f33;
  --bg-image:radial-gradient(90% 45% at 50% 8%,rgba(80,220,200,.20) 0%,rgba(80,220,200,0) 70%),
             radial-gradient(70% 40% at 50% 100%,rgba(60,200,180,.14) 0%,rgba(0,0,0,0) 70%),
             linear-gradient(180deg,#0e3a3f 0%,#0a2a2e 55%,#071f22 100%);
  --text:#e9f4ef;
  --gold:#d9b25a;--gold-hi:#f5dc96;--gold-lo:#7d6125;
  --sq-light:#a7aca4;--sq-dark:#45624a;
  --coord-on-light:#2f4733;--coord-on-dark:#dfe6da;
  --frame:linear-gradient(145deg,#8a8f88,#5d625c 30%,#c9a24e 50%,#5d625c 70%,#9aa097);
  --bubble-bg:#f1e3bf;--bubble-text:#3b2a14;--bubble-border:#a8823e;
  --btn-bg:linear-gradient(180deg,#6f746c,#4a4f48 55%,#3c403a);
  --btn-text:#f8e6b0;--btn-border:#d9b25a;
  --btn-primary-bg:linear-gradient(180deg,#e6c46c,#a9802f);--btn-primary-text:#22180a;
  --last:rgba(150,240,190,.42);--sel:rgba(170,255,210,.55);
  --dot:rgba(10,30,15,.42);
  --avatar-ring:#d9b25a;
}
body{background-image:var(--bg-image);background-attachment:fixed}

/* ---------- layout ---------- */
.app{
  height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 10px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 12px) env(safe-area-inset-left);
  gap:12px;
}
.coach{display:flex;align-items:center;gap:12px;padding:0 14px;flex:0 0 auto}
.avatar{
  flex:0 0 auto;width:86px;height:86px;border-radius:50%;padding:0;cursor:pointer;
  border:3px solid var(--avatar-ring);background:#000;overflow:hidden;
  box-shadow:0 0 0 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45);
}
[data-theme="fantasy"] .avatar{box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 18px rgba(110,240,220,.45)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.bubble{
  position:relative;flex:1 1 auto;min-height:72px;display:flex;align-items:center;
  background:var(--bubble-bg);color:var(--bubble-text);
  border:2px solid var(--bubble-border);border-radius:16px;padding:10px 14px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.bubble::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;background:var(--bubble-bg);
  border-left:2px solid var(--bubble-border);border-bottom:2px solid var(--bubble-border);
}
.bubble p{margin:0;font-size:18px;line-height:1.3;font-weight:600}
[data-theme="fantasy"] .bubble{
  border-radius:6px;
  background:linear-gradient(90deg,#d9c290 0%,#f3e6c3 8%,#f6ebcd 50%,#f3e6c3 92%,#d9c290 100%);
  box-shadow:inset 0 0 18px rgba(140,100,40,.35),0 4px 16px rgba(0,0,0,.45);
}
[data-theme="fantasy"] .bubble::before{background:#d9c290}
[data-theme="fantasy"] .bubble p{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:700}

.board-wrap{flex:0 0 auto;display:flex;justify-content:center}
.board-frame{
  position:relative;
  /* as wide as the screen allows, but never taller than the space left */
  width:min(100vw - env(safe-area-inset-left) - env(safe-area-inset-right), 100dvh - 320px);
  aspect-ratio:1/1;padding:5px;background:var(--frame);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
[data-theme="fantasy"] .board-frame{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 28px rgba(90,230,210,.25)}
.board{
  position:relative;width:100%;height:100%;display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  touch-action:none;
}
.sq{position:relative;display:flex;align-items:center;justify-content:center}
.sq.light{background:var(--sq-light)}
.sq.dark{background:var(--sq-dark)}
[data-theme="fantasy"] .sq.light{
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 45%),
             radial-gradient(circle at 75% 80%,rgba(0,0,0,.10),transparent 50%),var(--sq-light);
  box-shadow:inset 0 0 0 1px rgba(60,66,58,.35);
}
[data-theme="fantasy"] .sq.dark{
  background:radial-gradient(circle at 70% 30%,rgba(140,190,120,.22),transparent 50%),
             radial-gradient(circle at 25% 80%,rgba(0,0,0,.18),transparent 55%),var(--sq-dark);
  box-shadow:inset 0 0 0 1px rgba(20,35,22,.45);
}
.sq.last::after,.sq.sel::after{content:"";position:absolute;inset:0;pointer-events:none}
.sq.last::after{background:var(--last)}
.sq.sel::after{background:var(--sel)}
.sq.check{background-image:var(--check,radial-gradient(circle,rgba(255,40,30,.95) 0%,rgba(230,30,20,.55) 45%,rgba(200,0,0,0) 75%))!important}
.piece{width:92%;height:92%;position:relative;z-index:2;pointer-events:none;-webkit-user-drag:none}
.piece.dragging{opacity:.3}
.dot{position:absolute;z-index:3;pointer-events:none;width:30%;height:30%;border-radius:50%;background:var(--dot)}
.dot.cap{width:100%;height:100%;background:transparent;border-radius:50%;box-shadow:inset 0 0 0 5px var(--dot)}
.coord{position:absolute;z-index:1;font-size:13px;font-weight:800;line-height:1;pointer-events:none}
.coord.rank{top:3px;left:3px}
.coord.file{bottom:2px;right:4px}
.sq.light .coord{color:var(--coord-on-light)}
.sq.dark .coord{color:var(--coord-on-dark)}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) scale(1.12);filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}

/* promotion picker */
.promo{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.promo[hidden]{display:none}
.promo-card{background:var(--bubble-bg);color:var(--bubble-text);border:3px solid var(--gold);border-radius:14px;padding:12px 14px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.promo-card p{margin:0 0 8px;font-weight:800;font-size:18px}
.promo-row{display:flex;gap:8px}
.promo-row button{width:64px;height:64px;border-radius:10px;border:2px solid var(--gold);background:#fff8e8;padding:4px;cursor:pointer}
.promo-row img{width:100%;height:100%}

/* buttons */
.controls{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 16px;min-height:0}
.btn-row{display:flex;gap:12px}
.btn-row .btn{flex:1 1 0}
.btn{
  position:relative;height:64px;border-radius:14px;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-text);
  border:2px solid var(--btn-border);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.45);
  font:800 19px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.08em;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--gold-hi)}
[data-theme="fantasy"] .btn{
  border:3px solid var(--btn-border);border-radius:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 0 0 2px #3a3e37,inset 0 2px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.5);
  font-family:Georgia,"Times New Roman",serif;
}
[data-theme="fantasy"] .btn-primary{text-shadow:none}

/* ================= v2: opening picker ================= */
:root,[data-theme="classic"]{
  --panel-bg:linear-gradient(180deg,#2b2825 0%,#1f1d1b 100%);
  --panel-border:#d4a84a;
  --panel-text:#f3ead8;--panel-sub:#b9b0a2;--panel-moves:#d9c9a3;
  --row-bg:rgba(255,255,255,.04);--row-border:rgba(212,168,74,.18);
  --row-sel-bg:linear-gradient(90deg,rgba(212,168,74,.38),rgba(212,168,74,.18));--row-sel-border:#f2d58a;
  --tab-bg:#151413;--tab-on-bg:linear-gradient(180deg,#e2bc62,#b38532);--tab-on-text:#1c1610;
  --input-bg:#f7f0e1;--input-text:#2a2420;
  --chip-bg:rgba(212,168,74,.18);--chip-text:#f2d58a;
}
[data-theme="fantasy"]{
  --panel-bg:linear-gradient(180deg,#123f44 0%,#0b2c30 100%);
  --panel-border:#d9b25a;
  --panel-text:#eef6f1;--panel-sub:#a9c4bd;--panel-moves:#e6d5a8;
  --row-bg:rgba(255,255,255,.05);--row-border:rgba(217,178,90,.20);
  --row-sel-bg:linear-gradient(90deg,rgba(217,178,90,.42),rgba(217,178,90,.18));--row-sel-border:#f5dc96;
  --tab-bg:#082226;--tab-on-bg:linear-gradient(180deg,#e6c46c,#a9802f);--tab-on-text:#22180a;
  --input-bg:#f1e3bf;--input-text:#3b2a14;
  --chip-bg:rgba(120,230,210,.16);--chip-text:#bff3e6;
}
.picker{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);
  padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 10px);
}
.picker[hidden]{display:none}
.picker-panel{
  position:relative;width:100%;max-width:520px;height:min(84dvh,780px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel-bg);color:var(--panel-text);
  border:2px solid var(--panel-border);border-radius:18px;
  box-shadow:0 0 0 3px rgba(0,0,0,.45),0 18px 50px rgba(0,0,0,.65);
}
[data-theme="fantasy"] .picker-panel{box-shadow:0 0 0 3px rgba(0,0,0,.45),0 18px 50px rgba(0,0,0,.65),0 0 34px rgba(90,230,210,.25)}
.picker-close{
  position:absolute;top:-2px;right:-2px;z-index:3;width:34px;height:34px;border-radius:0 16px 0 12px;
  border:2px solid var(--panel-border);background:#000a;color:var(--panel-text);cursor:pointer;padding:6px;
}
.picker-close svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.picker-head{display:flex;align-items:center;gap:10px;padding:18px 40px 10px 14px}
.picker-head h2{flex:1 1 auto;margin:0;text-align:center;font-size:21px;font-weight:800;color:var(--gold-hi);letter-spacing:.02em}
[data-theme="fantasy"] .picker-head h2{font-family:Georgia,"Times New Roman",serif}
.picker-head h2[hidden]{display:none}
.icon-btn{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;padding:10px;cursor:pointer;
  background:var(--btn-bg);color:var(--gold-hi);border:2px solid var(--gold);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.4);
}
.icon-btn svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.search-input{
  flex:1 1 auto;min-width:0;height:44px;border-radius:22px;padding:0 16px;
  border:2px solid var(--gold);background:var(--input-bg);color:var(--input-text);
  font:600 17px system-ui,-apple-system,Roboto,Arial,sans-serif;outline:none;user-select:text;-webkit-user-select:text;
}
.search-input[hidden]{display:none}
.tabs{display:flex;gap:6px;margin:0 14px;padding:4px;border-radius:14px;background:var(--tab-bg);border:1px solid var(--row-border)}
.tab{
  flex:1 1 0;height:42px;border-radius:10px;border:0;cursor:pointer;background:transparent;color:var(--panel-sub);
  font:800 16px system-ui,-apple-system,Roboto,Arial,sans-serif;letter-spacing:.02em;
}
.tab[aria-selected="true"]{background:var(--tab-on-bg);color:var(--tab-on-text);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sort-label{padding:8px 18px 6px;font-size:13px;font-weight:600;color:var(--panel-sub)}
.op-list{
  flex:1 1 auto;min-height:0;margin:0;padding:2px 10px 10px;list-style:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.op-row{
  display:flex;align-items:center;gap:10px;padding:10px 10px;margin:0 0 6px;border-radius:12px;cursor:pointer;
  background:var(--row-bg);border:1.5px solid var(--row-border);
}
.op-row.sel{background:var(--row-sel-bg);border-color:var(--row-sel-border);box-shadow:0 0 0 1px var(--row-sel-border),0 0 14px rgba(242,213,138,.25)}
.op-icon{flex:0 0 auto;width:34px;height:34px;padding:2px;border-radius:50%;background:rgba(255,255,255,.12)}
.op-text{flex:1 1 auto;min-width:0}
.op-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.op-name{font-size:17px;font-weight:800;color:var(--panel-text)}
.op-vs{font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--chip-bg);color:var(--chip-text)}
.op-goal{font-size:14px;line-height:1.3;color:var(--panel-sub);margin-top:2px}
.op-moves{font-size:12.5px;color:var(--panel-moves);margin-top:3px;line-height:1.35;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.op-stat{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--gold-hi);opacity:.85}
.op-empty{margin:20px;text-align:center;color:var(--panel-sub);font-size:16px}
.op-empty[hidden]{display:none}
.picker-foot{padding:10px 14px 14px;border-top:1px solid var(--row-border)}
.choose-btn{width:100%}
.choose-btn:disabled{opacity:.45;cursor:default}
.sort-sheet{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(0,0,0,.5)}
.sort-sheet[hidden]{display:none}
.sort-card{
  width:100%;padding:16px 14px 18px;border-top:2px solid var(--gold);border-radius:18px 18px 0 0;
  background:var(--panel-bg);box-shadow:0 -10px 30px rgba(0,0,0,.5);
}
.sort-card h3{margin:0 0 10px;text-align:center;font-size:18px;color:var(--gold-hi)}
.sort-opt{
  display:block;width:100%;height:50px;margin:0 0 8px;border-radius:12px;cursor:pointer;text-align:left;padding:0 16px;
  background:var(--row-bg);color:var(--panel-text);border:1.5px solid var(--row-border);
  font:700 17px system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.sort-opt.on{background:var(--row-sel-bg);border-color:var(--row-sel-border)}
.sort-opt.on::after{content:"\2713";float:right;color:var(--gold-hi)}