:root{color-scheme:dark;--bg:#101c24;--panel:#192b34;--panel2:#243946;--stroke:#3a5661;--txt:#e9f6eb;--muted:#a8c6bd;--accent:#e5c67c;--glow:#6cab96}
*{box-sizing:border-box}body{margin:0;color:var(--txt);font:15px system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(ellipse at top,#274a4f,transparent 65%),var(--bg)}
button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:#aadfd4}.shell{max-width:1490px;margin:auto;padding:28px}
.head{display:flex;justify-content:space-between;align-items:start;gap:30px;margin-bottom:22px}.head h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,56px);letter-spacing:.045em;margin:4px 0}.head h1 span{color:var(--accent)}.head p{margin:0;color:var(--muted)}
.eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;color:#b8d6a2}.head-links{display:grid;gap:11px;justify-items:end;white-space:nowrap}.notice{border:1px solid #587c7c;background:linear-gradient(100deg,#25474b,#1a303a);border-radius:12px;padding:14px 18px;color:#d1e6e0;margin-bottom:22px;line-height:1.5}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.section-head h2{font-family:Georgia,serif;font-size:22px;margin:0}.section-head>span{color:var(--muted);font-size:13px}
.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.roster-card{display:flex;align-items:center;text-align:left;gap:12px;width:100%;border:1px solid var(--stroke);border-radius:12px;background:#182d37;padding:12px;transition:background .14s,border-color .14s;min-height:95px;color:var(--txt)}
.roster-card:hover{background:#27454c}.roster-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px #e5c67c55;background:#2d4449}.roster-card img{height:57px;width:57px;image-rendering:pixelated;object-fit:contain;flex-shrink:0}.roster-card strong{display:block;font-size:17px}.roster-card small{display:block;color:var(--muted);line-height:1.4}
.game-area{margin-top:28px}.round{color:var(--muted)}.round strong{color:#fff}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:16px;align-items:start}
.canvas-wrap{background:#122b34;border-radius:14px;padding:9px;border:1px solid var(--stroke);overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;image-rendering:pixelated;cursor:crosshair}
.bottom-controls{display:flex;align-items:center;gap:24px;padding:16px 0}.move-pad{display:grid;grid-template-columns:repeat(3,45px);gap:5px;flex-shrink:0}
.move-pad button{touch-action:none;user-select:none;-webkit-user-select:none;height:43px;border:1px solid #5b7b7b;background:#25454b;border-radius:6px;font-weight:700;color:white}.move-pad button:hover{background:#3e696a}.move-pad #wait{font-size:12px;color:var(--accent)}
.controls-help{max-width:490px}.controls-help p{font-size:13px;color:var(--muted);line-height:1.55;margin:4px 0 11px}.secondary{border:1px solid var(--stroke);background:var(--panel2);color:var(--txt);padding:9px 13px;border-radius:8px}.secondary:hover{background:#31515a}
.side{border:1px solid var(--stroke);background:var(--panel);border-radius:14px;padding:16px;min-width:0}.side h3{margin:16px 0 10px;display:flex;align-items:baseline;justify-content:space-between}.side h3 small{font-size:11px;font-weight:400;color:var(--muted)}
.hero{display:flex;align-items:center;gap:14px}.hero img{image-rendering:pixelated;width:70px;height:70px;object-fit:contain}.hero h2{margin:0 0 5px;font-size:22px}.hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.hp-track{height:9px;background:#0e222c;border-radius:100px;overflow:hidden;margin-top:13px;border:1px solid #48666e}.hp-fill{height:100%;background:#88ce8e;transition:width .16s}
.hp-caption{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--muted)}.moves{display:grid;grid-template-columns:1fr 1fr;gap:8px}.move{border:1px solid #557079;background:#26424b;border-radius:10px;color:#fff;text-align:left;padding:12px 10px}.move:hover:not(:disabled){background:#375860;border-color:var(--accent)}
.move strong{font-size:14px;display:block}.move small{font-size:11px;display:flex;justify-content:space-between;margin-top:6px;color:#c5d9d9}.target{border:1px solid #46646b;background:#142b34;border-radius:10px;padding:10px;margin-top:13px;font-size:13px;line-height:1.5;color:#d0e5dd}
.events{margin:0;padding:10px 10px 10px 28px;max-height:226px;overflow-y:auto;background:#122530;border-radius:8px;color:#bdcfca;font-size:12px;line-height:1.65}.events li{padding:1px 0;border-bottom:1px solid #24404a}.events li:last-child{color:#f4e7be}
footer{color:#83a29d;font-size:12px;line-height:1.65;margin:18px 0 0}
@media(max-width:970px){.play-layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:repeat(2,1fr);column-gap:20px}.side h3{grid-column:auto}.side .events{grid-column:1/-1}.roster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.shell{padding:14px}.head{display:block}.head-links{display:flex;justify-content:start;margin-top:14px}.roster{grid-template-columns:1fr 1fr}.roster-card{padding:8px;gap:6px}.roster-card img{width:42px;height:42px}.roster-card strong{font-size:14px}.roster-card small{font-size:11px}.bottom-controls{gap:14px}.side{display:block}}