:root{
  --bg:#141a26;
  --bg2:#202d42;
  --panel:#202d42;
  --panel2:#3b4556;

  --accent:#f2cc83;
  --accent2:#f7d89a;

  --text:#f9fafb;
  --muted:#9ca3af;
  --border:rgba(148,163,184,.5);

  --danger:#e34242;
  --ok:#22c55e;

  --shadow:0 18px 45px rgba(0,0,0,.22);
  --r-xl:1.4rem;
  --r-pill:999px;
  --t:150ms ease-out;

  --btn-bg:var(--accent);
  --btn-text:#111827;
  --btn-shadow:0 12px 26px rgba(0,0,0,.28);
  --btn-hover-bg:var(--accent2);
  --btn-hover-shadow:0 16px 34px rgba(0,0,0,.34);
  --btn-active-shadow:0 10px 22px rgba(0,0,0,.28);

  --board-bg:#bb834f;
  --board-bg2:#d09b62;
  --board-line:#3b2a1c;
  --board-point:rgba(255,255,255,.05);
  --board-point-ring:rgba(255,255,255,.08);

  --w-piece:#ffffff;
  --b-piece:#0b0f14;
  --w-outline:rgba(0,0,0,.65);
  --b-outline:rgba(255,255,255,.75);

  --ring-sel:rgba(247,216,154,1);
  --legal-dot-color:rgba(156,163,175,.78);
  --last:rgba(34,197,94,.22);
  --mill:rgba(247,216,154,.30);
  --capture:rgba(227,66,66,.42);

  --overlay-bg:rgba(0,0,0,.50);
}

body.theme-light{
  --bg:#f7ecd4;
  --bg2:#faefdc;
  --panel:#fff7e7;
  --panel2:#f2cc83;

  --accent:#296117;
  --accent2:#3b7f22;

  --text:#111827;
  --muted:#4b5563;
  --border:rgba(148,119,81,.6);

  --danger:#b91c1c;
  --ok:#296117;

  --btn-bg:var(--accent);
  --btn-text:#ffffff;
  --btn-shadow:0 12px 26px rgba(0,0,0,.18);
  --btn-hover-bg:var(--accent2);
  --btn-hover-shadow:0 16px 34px rgba(0,0,0,.22);
  --btn-active-shadow:0 10px 22px rgba(0,0,0,.18);

  --board-bg:#bb834f;
  --board-bg2:#d09b62;
  --board-line:#3b2a1c;
  --board-point:rgba(255,255,255,.06);
  --board-point-ring:rgba(255,255,255,.10);

  --w-outline:rgba(0,0,0,.55);
  --b-outline:rgba(255,255,255,.85);

  --ring-sel:rgba(59,127,34,1);
  --legal-dot-color:rgba(75,85,99,.72);
  --last:rgba(41,97,23,.18);
  --mill:rgba(41,97,23,.18);
  --capture:rgba(185,28,28,.32);

  --overlay-bg:rgba(255,255,255,.38);
}

*{
  box-sizing:border-box;
  min-width:0;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

body{
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding:24px;
}

.shell{
  max-width:1320px;
  width:100%;
  background:var(--bg2);
  border-radius:1.8rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.title{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 520px;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--panel2);
  border:1px solid var(--accent);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--accent);
  flex:0 0 auto;
}

h1{
  margin:0;
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:.02em;
  word-break:break-word;
}

h1 .em{
  color:var(--accent);
}

.subtitle{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  max-width:860px;
  line-height:1.35;
}

.right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  font-size:.85rem;
  flex:0 1 420px;
}

.toggleTheme{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--panel);
  cursor:pointer;
  color:var(--muted);
  transition:background var(--t),transform var(--t),box-shadow var(--t);
  user-select:none;
  text-decoration:none;
  max-width:100%;
}

.toggleTheme:hover{
  background:var(--panel2);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.homeLink{
  color:inherit;
  text-decoration:none;
}

.homeLogo{
  width:22px;
  height:22px;
  border-radius:6px;
  display:inline-block;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  flex:0 0 auto;
}

body.theme-light .homeLogo{
  background:rgba(0,0,0,.05);
}

.homeLogo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.homeText{
  display:inline-flex;
  flex-direction:column;
  line-height:1.1;
}

.homeText strong{
  color:var(--text);
  font-weight:800;
  font-size:.85rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.homeText span{
  font-size:.72rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  max-width:100%;
}

.pill strong{
  color:var(--text);
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  gap:18px;
}

.panel{
  background:var(--panel);
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  padding:14px 16px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.panel.in{
  border-color:var(--accent);
}

.panelHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.panelHead h2{
  margin:0;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  word-break:break-word;
}

.tag{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 9px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}

.divider{
  margin:10px 0 8px;
  border-top:1px solid var(--border);
  position:relative;
}

.divider > span{
  position:absolute;
  top:-8px;
  left:0;
  padding-right:6px;
  font-size:.72rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--panel);
  white-space:nowrap;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
}

label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.82rem;
}

.labRow{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.labRow strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.labRow .hint{
  font-size:.72rem;
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}

select,
input[type="range"]{
  width:100%;
  padding:8px 10px;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:.85rem;
  outline:none;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}

input[type="range"]{
  padding:8px 0;
  border:0;
  background:transparent;
  accent-color:var(--accent);
}

select:focus,
button:focus,
.point:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent2),0 0 0 5px rgba(0,0,0,.25);
  outline:none;
}

.btnRow{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.btnRow.compact{
  padding-top:0;
  border-top:0;
  margin-top:0;
}

.btn{
  border:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:1rem;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:var(--btn-shadow);
  transition:transform var(--t),box-shadow var(--t),filter var(--t),background var(--t);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  user-select:none;
}

.btn:hover{
  transform:translateY(-1px);
  background:var(--btn-hover-bg);
  box-shadow:var(--btn-hover-shadow);
  filter:saturate(1.05);
}

.btn:active{
  transform:translateY(0);
  box-shadow:var(--btn-active-shadow);
}

.btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  box-shadow:none;
  color:var(--text);
}

.btn.ghost:hover{
  background:var(--panel2);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.btn.danger{
  background:var(--danger);
  color:#fff;
}

.btn.small{
  padding:8px 10px;
  border-radius:.95rem;
  font-size:.82rem;
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}

.note{
  color:var(--muted);
  font-size:.78rem;
  line-height:1.35;
  margin-top:6px;
  overflow-wrap:anywhere;
}

.status{
  margin-top:10px;
  font-size:.82rem;
  color:var(--muted);
  min-height:1.2em;
  overflow-wrap:anywhere;
}

.status.bad{
  color:var(--danger);
}

.status.ok{
  color:var(--ok);
}

.boardWrap{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.boardTopBar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  font-size:.78rem;
  white-space:nowrap;
  max-width:100%;
}

.chip strong{
  color:var(--text);
}

.chip .miniDot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
  flex:0 0 auto;
}

.chip.warn .miniDot{
  background:var(--danger);
}

.chip.ok .miniDot{
  background:var(--ok);
}

.reserveCard{
  border-radius:1.2rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
  padding:12px 14px;
}

.reserveTitle{
  color:var(--accent);
  font-weight:800;
  font-size:.95rem;
  margin-bottom:10px;
}

.reserveRow{
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 72px;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.reserveRow:last-child{
  margin-bottom:0;
}

.reserveLabel{
  font-size:.9rem;
  font-weight:700;
}

.reserveStrip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.reserveStone{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 5px 8px rgba(255,255,255,.18),
    inset 0 -6px 10px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.18);
  opacity:1;
  transition:opacity var(--t), transform var(--t), filter var(--t);
}

.reserveStone.white{
  background:
    radial-gradient(circle at 35% 28%, #ffffff, #f3efe3 58%, #d8ceb9 100%);
}

.reserveStone.black{
  background:
    radial-gradient(circle at 35% 28%, #3d4655, #111827 52%, #030712 100%);
}

.reserveStone.off{
  opacity:.18;
  filter:saturate(.4);
}

.reserveCount{
  text-align:right;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.boardShell{
  width:100%;
  display:flex;
  justify-content:center;
  position:relative;
}

.millBoard{
  width:min(100%, 720px);
  aspect-ratio:1 / 1;
  position:relative;
  border-radius:1.4rem;
  overflow:hidden;
  border:1px solid rgba(59,42,28,.55);
  box-shadow:
    0 16px 36px rgba(0,0,0,.25),
    inset 0 0 0 2px rgba(255,255,255,.10),
    inset 0 0 0 5px rgba(80,52,27,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06)),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(180deg, var(--board-bg2), var(--board-bg));
}

.millBoard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.022) 0px,
      rgba(255,255,255,.022) 2px,
      rgba(0,0,0,.015) 3px,
      rgba(0,0,0,.015) 6px
    );
  mix-blend-mode:overlay;
  pointer-events:none;
}

.millSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--board-line);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.04));
}

.millSvg rect{
  fill:transparent;
}

.pointsLayer{
  position:absolute;
  inset:0;
}

.point{
  --s:clamp(28px, 6.4vmin, 52px);
  position:absolute;
  width:var(--s);
  height:var(--s);
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid var(--board-point-ring);
  background:var(--board-point);
  cursor:pointer;
  padding:0;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),background var(--t);
}

.point::before{
  content:"";
  position:absolute;
  inset:42%;
  border-radius:999px;
  background:rgba(59,42,28,.38);
  transition:inset var(--t), background var(--t), box-shadow var(--t);
}

.point:hover{
  transform:translate(-50%,-50%) scale(1.04);
  box-shadow:0 10px 20px rgba(0,0,0,.16);
  border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
}

.point.selected{
  border-color:var(--ring-sel);
  box-shadow:
    0 0 0 3px var(--ring-sel),
    0 14px 28px rgba(0,0,0,.26);
}

.point.legal::before{
  inset:31%;
  background:var(--legal-dot-color);
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}

.point.last{
  background:var(--last);
}

.point.mill{
  box-shadow:
    0 0 0 3px var(--mill),
    0 14px 28px rgba(0,0,0,.25);
}

.point.capture{
  background:var(--capture);
  border-color:var(--danger);
}

.stone{
  position:absolute;
  inset:10%;
  border-radius:999px;
  display:block;
  box-shadow:
    inset 0 7px 12px rgba(255,255,255,.22),
    inset 0 -10px 16px rgba(0,0,0,.36),
    0 8px 16px rgba(0,0,0,.28);
}

.stone.w{
  background:
    radial-gradient(circle at 36% 28%, #ffffff, #f2ecdd 52%, #d9cfbc 100%);
  border:1px solid var(--w-outline);
}

.stone.b{
  background:
    radial-gradient(circle at 36% 28%, #36404d, #111827 52%, #030712 100%);
  border:1px solid var(--b-outline);
  box-shadow:
    inset 0 7px 12px rgba(255,255,255,.16),
    inset 0 -10px 16px rgba(0,0,0,.50),
    0 8px 16px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.22);
}

.coord{
  position:absolute;
  right:5px;
  bottom:4px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:rgba(255,255,255,.46);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  pointer-events:none;
}

body.theme-light .coord{
  color:rgba(255,255,255,.66);
}

.boardOverlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:50;
  border-radius:1.4rem;
  background:var(--overlay-bg);
  backdrop-filter:blur(2px);
}

.boardOverlay.show{
  display:flex;
}

.gameCard{
  width:min(440px, calc(100% - 10px));
  border-radius:1.4rem;
  border:1px solid var(--border);
  background:var(--bg2);
  box-shadow:0 22px 70px rgba(0,0,0,.38);
  padding:14px 14px 12px;
}

.gameCardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.gameCardHead h3{
  margin:0;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.gameCardBody{
  border-top:1px solid var(--border);
  padding-top:10px;
  display:grid;
  gap:10px;
}

.goMain{
  margin:0;
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.goDetail{
  margin:0;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.rightCol{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.overviewCard{
  border-radius:1.1rem;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
  padding:12px 14px;
}

.overviewRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.overviewDivider{
  height:1px;
  background:rgba(148,163,184,.25);
  margin:12px 0;
}

.overviewStone{
  width:38px;
  height:38px;
  border-radius:999px;
  flex:0 0 auto;
  margin-top:2px;
  box-shadow:
    inset 0 7px 12px rgba(255,255,255,.20),
    inset 0 -8px 12px rgba(0,0,0,.28),
    0 8px 16px rgba(0,0,0,.20);
}

.overviewStone.white{
  background:
    radial-gradient(circle at 35% 28%, #ffffff, #f2ecdd 52%, #d9cfbc 100%);
  border:1px solid var(--w-outline);
}

.overviewStone.black{
  background:
    radial-gradient(circle at 35% 28%, #36404d, #111827 52%, #030712 100%);
  border:1px solid var(--b-outline);
}

.overviewText{
  flex:1 1 auto;
}

.overviewTop{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.overviewSub{
  font-size:.84rem;
  color:var(--muted);
  margin-top:2px;
}

.turnBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(242,204,131,.18);
  border:1px solid rgba(242,204,131,.45);
  color:var(--accent);
  font-size:.75rem;
  font-weight:700;
}

.turnBadge.hidden{
  display:none;
}

.phaseSteps{
  display:grid;
  gap:10px;
}

.phaseStep{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  align-items:flex-start;
  border:1px solid rgba(148,163,184,.24);
  border-radius:1rem;
  padding:10px 12px;
  background:rgba(0,0,0,.06);
  opacity:.55;
}

.phaseStep.active{
  opacity:1;
  border-color:rgba(242,204,131,.42);
  background:rgba(242,204,131,.08);
}

.phaseNo{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:rgba(255,255,255,.14);
  color:var(--text);
}

.phaseStep.active .phaseNo{
  background:var(--accent);
  color:#111827;
}

.phaseHead{
  font-weight:800;
  margin-bottom:2px;
}

.phaseDesc{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.35;
}

.moves{
  display:grid;
  gap:10px;
}

.miniRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.movesList{
  border-radius:1rem;
  border:1px solid var(--border);
  background:var(--panel);
  padding:10px;
  max-height:320px;
  overflow:auto;
}

.mvRow{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  padding:6px 6px;
  border-bottom:1px dashed rgba(148,163,184,.25);
  font-size:.84rem;
  align-items:baseline;
}

.mvRow:last-child{
  border-bottom:0;
}

.mvNo{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  text-align:right;
  padding-right:6px;
}

.mvText{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:baseline;
}

.mvPly{
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.ruleList{
  display:grid;
  gap:8px;
  font-size:.82rem;
  color:var(--muted);
  line-height:1.4;
}

.ruleList p{
  margin:0;
}

.ruleList strong{
  color:var(--text);
}

.footerTiny{
  margin-top:8px;
  text-align:right;
  font-size:.7rem;
  color:var(--muted);
  overflow-wrap:anywhere;
}

@media (max-width:1040px){
  body{
    padding:12px;
  }

  .shell{
    padding:16px;
    border-radius:1.4rem;
  }

  .layout{
    grid-template-columns:1fr;
  }

  .right{
    align-items:flex-start;
  }
}

@media (max-width:700px){
  .grid{
    grid-template-columns:1fr;
  }

  .reserveRow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .reserveCount{
    text-align:left;
  }

  .boardTopBar{
    align-items:flex-start;
  }

  .movesList{
    max-height:260px;
  }
}

@media (max-width:520px){
  .point{
    --s:clamp(26px, 8.2vw, 40px);
  }

  .btn{
    width:100%;
    justify-content:center;
  }

  .btn.small{
    width:auto;
  }

  .toggleTheme{
    width:100%;
    justify-content:flex-start;
  }

  .pill{
    width:100%;
  }

  .badge{
    white-space:normal;
  }
}