:root{
  --bg1:#fdf3dc; --bg2:#f3d9a4; --ink:#33220f; --card:#fffaf0; --line:#8a5a28; --muted:#8c7352;
  --gold:#f0b84a; --red:#e5484d; --blue:#3b82f6;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--ink);min-height:100vh;
  font-family:"Jua","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  background:
    radial-gradient(circle at 15% 10%,#fff6dd 0,transparent 40%),
    radial-gradient(circle at 90% 90%,#f7c98a55 0,transparent 45%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
}
header{text-align:center;padding:20px 16px 0}
h1{
  margin:0;font-size:2.2rem;letter-spacing:.12em;
  background:linear-gradient(90deg,var(--red),#f59e0b,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #fff8);
}
.sub{margin:4px 0 0;color:var(--muted);font-size:.9rem}
main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;max-width:1100px;margin:0 auto;padding:16px 16px 40px}
.board-wrap{background:linear-gradient(145deg,#8a5a28,#6b4119);border-radius:28px;padding:10px;box-shadow:0 14px 30px #4a2c0a55,inset 0 2px 0 #ffffff33}
#board{width:100%;height:auto;display:block;max-height:82vh;margin:0 auto;border-radius:22px}
.panel{display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid #ecd9b0;border-radius:16px;padding:14px;box-shadow:0 4px 12px #6b411922}
.card h2{margin:0 0 10px;font-size:1.05rem}
.muted{font-weight:400;color:var(--muted);font-size:.82rem;margin-left:6px}
.hint{margin:10px 0 0;font-size:.76rem;color:var(--muted)}

.team{
  background:var(--card);border:2px solid #ecd9b0;border-radius:16px;padding:12px 14px;margin-bottom:10px;cursor:pointer;
  transition:transform .15s,box-shadow .2s,border-color .2s;box-shadow:0 3px 8px #6b411922;
}
.team:hover{transform:translateY(-1px)}
.team.turn{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 6px 16px #6b411933;animation:glow 1.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 10%,transparent),0 6px 16px #6b411933}}
.team .head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:1.1rem;color:var(--c)}
.team .head small{color:var(--muted);font-weight:400;font-size:.8rem}
.tray{display:flex;gap:8px;margin-top:10px;min-height:38px;align-items:center}
.tray .none{color:var(--muted);font-size:.8rem}
.pc{
  width:36px;height:36px;border-radius:50%;color:#fff;font-weight:800;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--c) 45%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000));
  border:2px solid #fff;box-shadow:0 3px 6px #0004;cursor:pointer;padding:0;font-size:1rem;font:inherit;font-weight:800;
  transition:transform .15s;
}
.pc:hover:not(.done):not(.slot){transform:translateY(-3px) scale(1.08);background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--c) 45%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000))}
.pc.sel{outline:3px solid #33220f;outline-offset:2px;animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.home{display:flex;gap:6px;align-items:center;margin-top:10px;padding:7px 10px;border:2px dashed #d3b886;border-radius:12px;background:linear-gradient(#fbefce,#f6e3b6)}
.homelbl{font-size:.75rem;color:var(--muted);margin-right:auto}
.home .pc{width:28px;height:28px;font-size:.8rem;cursor:default}
.pc.done{animation:drop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translateY(-24px) scale(1.4);opacity:0}}
.pc.slot{background:transparent;border:2px dotted #d3b886;box-shadow:none}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
button{font:inherit;border:0;color:var(--ink);cursor:pointer}
.steps button{
  background:linear-gradient(#fffdf5,#f6e3b6);border-radius:14px;padding:10px 4px 8px;
  box-shadow:0 4px 0 #c79a55,0 6px 10px #6b411933;transition:transform .08s,box-shadow .08s,filter .15s;
}
.steps button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px)}
.steps button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #c79a55}
.steps button:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 2px 0 #c79a55}
.steps button b{display:block;font-size:1.25rem}
.steps button span{font-size:.72rem;color:var(--muted)}
.steps button:nth-child(4),.steps button:nth-child(5){background:linear-gradient(#fff2c4,#f9d56e)}
.steps button:nth-child(6){background:linear-gradient(#f3e8ff,#dcc6f7)}
.opts label{display:block;font-size:.88rem;padding:4px 0;cursor:pointer}
.btns{display:flex;gap:10px}
.btns button{flex:1;padding:11px;border-radius:12px;background:#fff;box-shadow:0 3px 0 #d3b886;font-weight:700}
.btns button:hover{filter:brightness(.97)}
.btns .danger{color:#b3261e}
#log{margin:0;padding:0;list-style:none;max-height:160px;overflow:auto;font-size:.82rem}
#log li{padding:3px 0;border-bottom:1px dashed #eadcbf}
#log li:first-child{font-weight:700}

.win{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:10;animation:fade .3s}
.win.hidden{display:none}
.win>div{background:linear-gradient(#fffdf5,#fbe7b3);border:4px solid var(--gold);border-radius:24px;padding:34px 48px;text-align:center;font-size:2rem;font-weight:800;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
.win button{margin-top:18px;font-size:1rem;padding:11px 28px;border-radius:12px;background:#fff;box-shadow:0 3px 0 #c79a55}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.conf{position:fixed;top:-20px;width:10px;height:16px;z-index:11;pointer-events:none;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{top:105vh;margin-left:60px}}

/* svg */
.edge{stroke:#8a5a28;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.node{stroke:#8a5a28;stroke-width:3}
.node.big{stroke-width:4}
.ring{fill:none;stroke:#8a5a28;stroke-width:2;stroke-dasharray:3 4;opacity:.8;pointer-events:none}
.star{font-size:22px;fill:#8a5a28;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.lbl{font-size:15px;fill:#6b4119;text-anchor:middle;pointer-events:none;font-weight:700}
.ghost{fill:#ffffff55;stroke:#33220f;stroke-width:4;stroke-dasharray:6 5;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.pcs{cursor:pointer}
.pcs circle:not(.halo){stroke:#fff;stroke-width:3}
.pcs text{fill:#fff;font-weight:800;font-size:16px;text-anchor:middle;dominant-baseline:central;pointer-events:none;paint-order:stroke;stroke:#0004;stroke-width:2px}
.halo{fill:none;stroke:#33220f;stroke-width:3;stroke-dasharray:5 4;animation:spin 3s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.pcs.pop{animation:pcpop .45s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
@keyframes pcpop{from{transform:scale(1.7) translateY(-14px);opacity:.3}}
@media(max-width:860px){main{grid-template-columns:1fr}h1{font-size:1.8rem}}