:root{
  --bg:#ffeaa7;--board:#fff;--accent:#fd79a8;--text:#2d3436;--line:#d35400;
}
*{box-sizing:border-box}
body{
  margin:0; padding:20px; text-align:center;
  font-family:'Gamja Flower', cursive, sans-serif;
  background:var(--bg); color:var(--text);
}
header{display:flex;flex-direction:column;gap:6px;align-items:center}
#board{
  width:360px;height:360px; margin:16px auto; position:relative;
  background:var(--board); border:5px solid var(--line); border-radius:20px;
}
.node{
  width:28px;height:28px;border-radius:50%; position:absolute;
  background:#fab1a0; border:2px solid #e17055;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.node.start{background:#ffeaa7;border-color:#d35400}
.start-arrow{
  position:absolute; transform:translateX(-50%);
  font-size:18px; color:#d35400;
}
/* center node style removed */
.token{
  width:18px;height:18px;border-radius:50%; position:absolute;
  border:2px solid #333; display:flex;align-items:center;justify-content:center;
  font-size:11px; color:#fff; cursor:pointer;
}
.token.black{background:#2d3436;border-color:#1f2527}
.token.white{background:#dfe6e9;color:#2d3436;border-color:#b2bec3}
.token.highlight{outline:3px solid #55efc4; outline-offset:1px}
#yut-result{font-size:1.6em; min-height:1.4em; margin:8px}
button, select{
  background:var(--accent); color:white; border:none; padding:10px 18px;
  font-size:1em; border-radius:24px; cursor:pointer;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
select{background:#fff;color:#2d3436;border:2px solid #fd79a8}
.controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.message{margin-top:8px;color:#636e72}
#turn{font-weight:bold}
#choice{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);
  display:none; align-items:center; justify-content:center;
}
#choice .card{
  background:white; padding:16px 20px; border-radius:12px; width:280px;
}
#choice button{margin:6px}