:root{
  --paper:#f4efe4;
  --paper-2:#fffaf0;
  --ink:#1e1b18;
  --muted:#71695f;
  --line:#322419;
  --wood:#d9a765;
  --wood-dark:#b67838;
  --accent:#1f7a54;
  --accent-2:#2f6feb;
  --warm:#d65c4b;
  --panel:#fffdf7;
  --shadow:0 18px 44px rgba(48,34,18,.16);
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(47,111,235,.09), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(214,92,75,.11), transparent 30%),
    linear-gradient(180deg,#fbf8f1,var(--paper));
  font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,select{font:inherit}
button{cursor:pointer}

.app-shell{
  width:min(1180px,100%);
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}

.play-area,.coach-panel{min-width:0}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.back-link{
  color:#5c3e9e;
  text-decoration:none;
  font-size:13px;
}

h1{
  margin:4px 0 2px;
  font-size:clamp(28px,5vw,54px);
  line-height:1;
  letter-spacing:0;
  font-weight:800;
}

.brand-block p{
  margin:0;
  color:var(--muted);
  max-width:620px;
  overflow-wrap:anywhere;
}

.mode-strip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(67,50,31,.14);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(52,39,24,.08);
}

.mode-strip-mobile{
  display:none;
}

.icon-button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font-weight:800;
}

.icon-button.active{
  background:#1f1b16;
  color:#fff8e8;
}

.control-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.command-button,.segmented button{
  min-height:38px;
  border:1px solid rgba(38,28,18,.22);
  background:rgba(255,255,255,.78);
  color:var(--ink);
  border-radius:7px;
  padding:7px 12px;
  box-shadow:0 4px 10px rgba(43,31,20,.08);
}

.command-button:hover,.segmented button:hover{background:#fff}

.segmented{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:8px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(38,28,18,.14);
}

.segmented button{
  min-height:30px;
  padding:4px 10px;
  border-radius:999px;
  box-shadow:none;
}

.segmented button.active{
  background:var(--accent-2);
  border-color:var(--accent-2);
  color:white;
}

.select-label{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}

select{
  min-height:36px;
  border-radius:6px;
  border:1px solid rgba(38,28,18,.22);
  background:white;
  padding:4px 8px;
}

.status-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
  margin-bottom:12px;
  font-size:16px;
}

.status-label{
  color:var(--muted);
  margin-right:5px;
}

.capture-status{
  display:flex;
  align-items:center;
  gap:6px;
}

.capture-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:26px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(38,28,18,.16);
  background:rgba(255,255,255,.64);
  font-size:13px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.04);
}

.black-capture{
  color:#15120f;
}

.white-capture{
  color:#6c6258;
}

.board-stage{
  display:flex;
  align-items:center;
  justify-content:center;
}

.board-card{
  width:min(94vw,720px);
  aspect-ratio:1/1;
  padding:clamp(10px,1.8vw,16px);
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(255,241,205,.18),rgba(55,28,12,.18)),
    repeating-linear-gradient(90deg,rgba(255,230,184,.10) 0 1px, transparent 1px 18px),
    linear-gradient(90deg,#9b6737,#c78f4c 31%,#8d552a 65%,#d5a35f);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(72,39,16,.48),
    inset 0 0 32px rgba(66,34,12,.24);
}

.goban-frame{
  --coord:clamp(18px,3.2vw,28px);
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:var(--coord) minmax(0,1fr) var(--coord);
  grid-template-rows:var(--coord) minmax(0,1fr) var(--coord);
  align-items:stretch;
  justify-items:stretch;
  border-radius:6px;
  background:rgba(255,235,190,.16);
  box-shadow:inset 0 0 0 1px rgba(64,36,16,.12);
}

.coord-corner{min-width:0;min-height:0}

.coord-row,.coord-col{
  display:grid;
  color:rgba(37,23,12,.92);
  font-weight:700;
  font-size:clamp(10px,1.75vw,16px);
  line-height:1;
  text-shadow:0 1px 0 rgba(255,230,183,.6);
  user-select:none;
}

.coord-row{
  grid-template-columns:repeat(var(--n),1fr);
  align-items:center;
  justify-items:center;
}

.coord-col{
  grid-template-rows:repeat(var(--n),1fr);
  align-items:center;
  justify-items:center;
}

.muted-coords{
  opacity:.46;
}

.go-board{
  --n:19;
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(var(--n),1fr);
  grid-template-rows:repeat(var(--n),1fr);
  border:1.5px solid var(--line);
  overflow:hidden;
}

.photo-board{
  border:0;
  background:url("./assets/board_19x19_3.png") center/100% 100% no-repeat;
}

.dynamic-board{
  background:
    repeating-linear-gradient(90deg, transparent 0 calc((100% / var(--n)) - 1px), rgba(35,24,15,.76) calc((100% / var(--n)) - 1px) calc(100% / var(--n))),
    repeating-linear-gradient(0deg, transparent 0 calc((100% / var(--n)) - 1px), rgba(35,24,15,.76) calc((100% / var(--n)) - 1px) calc(100% / var(--n))),
    url("./assets/board-wood.png") center/cover;
}

.cell{
  position:relative;
  min-width:0;
  padding:0;
  margin:0;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:inherit;
}

.star{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(5px,1.1vw,8px);
  height:clamp(5px,1.1vw,8px);
  border-radius:50%;
  background:#20160d;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
}

.photo-board .star{
  display:none;
}

.heat{
  position:absolute;
  inset:6%;
  border-radius:50%;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:.18s ease;
  filter:blur(.2px);
}

.territory-on.show-map .heat,
.territory-on.show-guide .heat{opacity:var(--heat-a,0)}

.territory-off .heat{opacity:0 !important}

.territory-toggle.active{
  border-color:rgba(31,122,84,.42);
  background:rgba(31,122,84,.12);
  color:#114832;
}

.stone{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  border-radius:80%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:4;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  background-position:center;
  background-repeat:no-repeat;
  background-size:135%;
}

.stone.black{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  background-image:url("./assets/black.png");
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.34));
}

.stone.white{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  background-image:url("./assets/white.png");
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.24));
}

.last-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:34%;
  border:2px solid #f2422f;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  opacity:0;
  pointer-events:none;
}

.last .last-ring{opacity:1}

.hint{
  position:absolute;
  left:50%;
  top:50%;
  width:76%;
  height:76%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  opacity:0;
  pointer-events:none;
  border:3px solid rgba(31,122,84,.9);
  box-shadow:0 0 0 4px rgba(31,122,84,.13),0 0 18px rgba(31,122,84,.55);
}

.show-guide .hint{opacity:1}

.pending::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:58%;
  height:58%;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(31,122,84,.42),0 5px 12px rgba(0,0,0,.2);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:7;
  pointer-events:none;
}

.coach-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:sticky;
  top:16px;
  align-self:start;
}

.coach-card{
  background:rgba(255,253,247,.86);
  border:1px solid rgba(67,50,31,.13);
  border-radius:8px;
  padding:15px;
  box-shadow:0 10px 28px rgba(52,39,24,.08);
}

.coach-card.primary{
  background:linear-gradient(180deg,#163e31,#1f7a54);
  color:#fff;
  border-color:transparent;
}

.coach-card h2{
  margin:5px 0 8px;
  font-size:20px;
  line-height:1.25;
  letter-spacing:0;
}

.coach-card p{margin:0;color:inherit}

.eyebrow{
  color:inherit;
  opacity:.72;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
}

.legend{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.legend span{
  display:flex;
  align-items:center;
  gap:8px;
}

.legend-dot,.legend-ring{
  width:18px;
  height:18px;
  display:inline-block;
  border-radius:50%;
  flex:0 0 auto;
}

.legend-dot.blue{background:rgba(47,111,235,.4)}
.legend-dot.red{background:rgba(214,92,75,.38)}
.legend-ring{border:3px solid var(--accent);box-shadow:0 0 10px rgba(31,122,84,.35)}

.metric-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0;
}

.metric-line span{color:var(--muted)}

.meter{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(47,111,235,.28),rgba(214,92,75,.26));
  margin-top:10px;
}

.meter span{
  display:block;
  width:50%;
  height:100%;
  background:#1f1b16;
  border-radius:999px;
  transform-origin:left center;
  transition:width .2s ease;
}

.idea-list{
  margin:8px 0 0;
  padding-left:18px;
}

.idea-list li{margin:7px 0}

.link-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:8px;
}

.link-list a{
  color:#155c40;
  text-decoration:none;
  font-weight:700;
}

.link-list a:hover{text-decoration:underline}

.faq-list{
  margin:8px 0 0;
}

.faq-list dt{
  margin-top:10px;
  font-weight:800;
}

.faq-list dd{
  margin:3px 0 0;
  color:var(--muted);
}

@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .coach-panel{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .coach-card.primary{grid-column:1/-1}
}

@media (max-width:640px){
  .app-shell{
    padding:0;
    gap:8px;
  }
  .topbar{
    flex-direction:column;
    gap:6px;
    margin:0 0 6px;
    padding:0 4px;
  }
  .back-link{font-size:13px}
  h1{
    margin:0;
    font-size:clamp(30px,9vw,40px);
    line-height:1.05;
  }
  .brand-block p{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:14px;
  }
  .mode-strip{
    align-self:flex-start;
    padding:3px;
    gap:4px;
    box-shadow:none;
  }
  .topbar > .mode-strip{
    display:none;
  }
  .mode-strip-mobile{
    display:flex;
    order:1;
  }
  .icon-button{
    width:31px;
    height:31px;
    border-radius:7px;
  }
  .control-row{
    gap:5px 6px;
    margin:0 4px 6px;
    align-items:center;
  }
  .command-button,
  .segmented button{
    min-height:32px;
    padding:4px 8px;
    border-radius:8px;
  }
  .command-button{
    order:1;
    font-size:13px;
    white-space:nowrap;
  }
  .segmented{
    order:2;
    gap:2px;
    padding:2px;
    border-radius:9px;
  }
  .segmented button{
    min-height:29px;
    padding:3px 8px;
    font-size:13px;
  }
  .select-label{
    order:2;
    gap:4px;
    font-size:13px;
    white-space:nowrap;
  }
  select{
    min-height:31px;
    padding:3px 6px;
    font-size:13px;
  }
  .coach-panel{display:flex}
  .board-stage{
    justify-content:center;
    width:100%;
  }
  .board-card{
    width:100vw !important;
    max-width:none;
    padding:2px;
    border-radius:0;
  }
  .goban-frame{
    --coord:0px;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    background:transparent;
    box-shadow:none;
  }
  .coord-row,
  .coord-col,
  .coord-corner{
    display:none;
  }
  .go-board{
    grid-column:1;
    grid-row:1;
  }
  .status-row{
    font-size:14px;
    gap:8px 12px;
    margin:0 4px 8px;
  }
  .coach-card{
    border-radius:0;
  }
}