:root{--ink:#18313d;--muted:#607681;--paper:#edf4f3;--surface:#f8fbfa;--surface-strong:#fff;--line:#b9cbc9;--aqua:#9adfd2;--aqua-soft:#d9f1ec;--aqua-dark:#176b6a;--navy:#173f50;--coral:#d95f52;--yellow:#f2cf63;--white:#fff;--arena:#a9b8b6;--danger:#a94038;--danger-border:#8d352f;--spread-border:#245a72;--font-sans:"Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);margin:0;line-height:1.6}button,a{font:inherit}button{color:inherit}.site-shell{min-height:100vh;overflow:hidden}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;max-width:1240px;margin:0 auto;padding:24px 34px;display:flex}.brand{color:var(--navy);letter-spacing:.04em;align-items:center;gap:12px;font-weight:800;text-decoration:none;display:flex}.header-tools{align-items:center;gap:16px;display:flex}.text-button{border:0;border-bottom:1px solid var(--aqua-dark);color:var(--aqua-dark);cursor:pointer;letter-spacing:.04em;background:0 0;padding:4px 0;font-size:12px;font-weight:700}.setup-panel{max-width:1240px;margin:0 auto 70px;padding:34px}.setup-copy{margin-bottom:24px}.setup-copy h2{color:var(--navy);letter-spacing:.03em;margin:0 0 5px;font-size:25px}.role-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.role-card{border:1px solid var(--line);text-align:left;background:var(--surface-strong);cursor:pointer;border-radius:8px;min-height:140px;padding:18px;transition:background .18s,border-color .18s}.role-card:hover{border-color:var(--aqua-dark);background:var(--aqua-soft)}.role-card:focus-visible,.arena:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.role-position{color:var(--muted);font-size:12px;font-weight:700;display:block}.role-token{color:var(--navy);letter-spacing:-.03em;margin:14px 0 5px;font-size:42px;font-weight:800;line-height:.9;display:block}.role-card strong{color:var(--ink);font-size:20px;display:block}.quick-guide{border:1px solid var(--line);background:var(--surface);border-radius:8px;grid-template-columns:repeat(4,1fr);margin-top:12px;display:grid;overflow:hidden}.quick-guide>div{border-right:1px solid var(--line);grid-template-columns:55px 1fr;align-items:center;padding:18px 14px;display:grid}.quick-guide>div:last-child{border:0}.quick-guide span{font-size:25px}.quick-guide img{object-fit:contain;vertical-align:middle;width:29px;height:29px}.quick-guide strong{color:var(--navy);font-size:13px;line-height:1.5}.game-active .site-header{padding-top:16px;padding-bottom:16px}.game-layout{max-width:650px;margin:0 auto 60px;padding:24px 34px 40px}.arena-wrap{width:100%;max-width:650px;margin:0 auto;padding:54px;position:relative}.game-controls{z-index:31;width:clamp(150px,44%,220px);position:absolute;top:32%;left:50%;transform:translate(-50%,-50%)}.arena{aspect-ratio:1;border:3px solid var(--navy);background:var(--arena);cursor:crosshair;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;padding:0;display:block;position:relative;overflow:hidden}.grid-lines{background-image:linear-gradient(#173f5057 1px,#0000 1px),linear-gradient(90deg,#173f5057 1px,#0000 1px);background-size:20% 20%;position:absolute;inset:0}.role-zone{color:#173f507a;pointer-events:none;border:1px dashed #173f5042;place-items:center;width:50%;height:50%;display:grid;position:absolute}.role-zone.selected{border:2px dashed var(--aqua-dark);color:var(--aqua-dark);background:#d9f1ec57}.role-zone i{font-size:36px;font-style:normal;font-weight:800}.role-zone small{letter-spacing:.12em;font-size:8px;font-weight:800;position:absolute;bottom:10px}.zone-nw{top:0;left:0}.zone-ne{top:0;right:0}.zone-sw{bottom:0;left:0}.zone-se{bottom:0;right:0}.familiar-layer{--enemy-icon-current-diameter:var(--enemy-icon-diameter);--enemy-icon-glyph-offset:12px;z-index:10;pointer-events:none;position:absolute;inset:54px}.familiar{width:var(--enemy-icon-current-diameter);height:var(--enemy-icon-current-diameter);border:1px solid var(--line);background:var(--surface-strong);font-size:calc(var(--enemy-icon-current-diameter) - var(--enemy-icon-glyph-offset));border-radius:50%;place-items:center;display:grid;position:absolute}.familiar img{width:calc(var(--enemy-icon-current-diameter) - 4px);height:calc(var(--enemy-icon-current-diameter) - 4px);object-fit:contain}.familiar-north{transform:translate(-50%,-88%)}.familiar-south{transform:translate(-50%,-12%)}.familiar-west{transform:translate(-88%,-50%)}.familiar-east{transform:translate(-12%,-50%)}.memory-sequence{z-index:20;width:max-content;animation:sine-wave-memory var(--memory-sequence-duration) linear forwards;pointer-events:none;align-items:center;gap:clamp(8px,2vw,18px);display:flex;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.memory-creature{border:3px solid var(--navy);background:var(--surface-strong);border-radius:50%;place-items:center;width:clamp(52px,8vw,82px);height:clamp(52px,8vw,82px);font-size:clamp(46px,7vw,74px);line-height:1;display:grid}.memory-creature img{object-fit:contain;width:90%;height:90%}@keyframes sine-wave-memory{0%{left:100%;transform:translateY(-50%)}12.5%{transform:translate(-12.5%,calc(-50% - 52px))}25%{transform:translate(-25%,-50%)}37.5%{transform:translate(-37.5%,calc(52px - 50%))}50%{transform:translate(-50%,-50%)}62.5%{transform:translate(-62.5%,calc(-50% - 52px))}75%{transform:translate(-75%,-50%)}87.5%{transform:translate(-87.5%,calc(52px - 50%))}to{left:0;transform:translate(-100%,-50%)}}.attack-shape{z-index:4;border:2px solid var(--danger-border);pointer-events:none;background:#d95f52ad;display:block;position:absolute}.attack-puffer{border-radius:50%}.attack-chocobo{border:0;inset:0}.spread-circle{z-index:7;aspect-ratio:1;border:3px solid var(--white);box-shadow:0 0 0 2px var(--spread-border);pointer-events:none;background:#397a9c6b;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.player-pin{z-index:12;border:3px solid var(--white);background:var(--navy);color:var(--white);pointer-events:none;border-radius:50%;place-items:center;font-size:14px;font-weight:800;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #173f504d}.pin-safe{background:var(--aqua-dark)}.pin-hit{background:var(--coral)}.arena-result{z-index:30;width:max-content;max-width:86%;color:var(--white);text-align:center;pointer-events:none;border-radius:8px;padding:12px 18px;font-size:14px;font-weight:800;line-height:1.5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arena-result-success{color:var(--yellow);text-shadow:0 2px 0 var(--navy), 0 5px 14px #173f5073;letter-spacing:.08em;background:0 0;padding:0;font-size:24px;animation:.35s ease-out celebrate}.arena-result-failure{background:var(--danger)}.arena-hint{z-index:30;background:var(--navy);width:max-content;max-width:80%;color:var(--white);text-align:center;border-radius:20px;margin:0;padding:9px 14px;font-size:11px;font-weight:700;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.primary-button{border:3px solid var(--aqua);background:var(--navy);width:100%;min-height:48px;color:var(--white);box-shadow:0 5px 0 var(--ink), 0 10px 24px #102b3b4d;letter-spacing:.04em;cursor:pointer;border-radius:8px;padding:11px 16px;font-size:18px;font-weight:800;transition:background .18s,transform .18s,box-shadow .18s}.primary-button:hover{background:var(--aqua-dark);box-shadow:0 7px 0 var(--ink), 0 12px 26px #102b3b57;transform:translateY(-2px)}@keyframes celebrate{0%{opacity:0;transform:translate(-50%,-50%)scale(.65)rotate(-4deg)}70%{transform:translate(-50%,-50%)scale(1.08)rotate(2deg)}}@media (width<=980px){.role-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.site-header{padding:18px 20px}.brand{font-size:13px}.setup-panel{padding:20px}.role-card{min-height:124px;padding:14px}.role-token{margin-top:12px;font-size:38px}.role-card strong{font-size:15px}.quick-guide{grid-template-columns:repeat(2,1fr)}.quick-guide>div:nth-child(2){border-right:0}.quick-guide>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.game-layout{padding:10px 4px 40px}.arena-wrap{max-width:560px;padding:32px}.familiar-layer{--enemy-icon-current-diameter:calc(var(--enemy-icon-diameter) - 6px);--enemy-icon-glyph-offset:10px;inset:32px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}.memory-sequence{left:50%;transform:translate(-50%,-50%)}}