:root{color-scheme:dark;--bg:#0c0e13;--panel:#141821;--panel2:#0f131b;--line:#262d3b;--fg:#eef1f6;--muted:#9aa3b5;--gold:#f5b301;--tier-s:#e5484d;--tier-a:#f76b15;--tier-b:#ffd60a;--tier-c:#46a758;--tier-x:#12a594;--cost-1:#8b8f98;--cost-2:#2fbf71;--cost-3:#3e9bff;--cost-4:#b16dff;--cost-5:#ffb224}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.6}
.wrap{max-width:1200px;margin:0 auto;padding:20px 16px 64px}
.site-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:6px}
.site-head h1{font-size:1.6rem;margin:.2em 0;letter-spacing:.02em}
.site-head h1 .dim{color:var(--gold)}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.85rem;color:var(--muted);background:var(--panel)}
.meta{color:var(--muted);font-size:.9rem}
.filter{margin:12px 0;padding:.6em .8em;width:100%;max-width:420px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);font:inherit}
.style-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px;align-items:center}
.style-chip{appearance:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font:inherit;font-size:.85rem;color:var(--muted);background:var(--panel);cursor:pointer;line-height:1.4}
.style-chip:hover{border-color:var(--gold);color:var(--fg)}
.style-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.style-chip[aria-pressed="true"]{background:var(--gold);color:#10131a;border-color:var(--gold);font-weight:700}
/* tier rows */
.tier-row{display:flex;gap:14px;align-items:stretch;margin:18px 0}
.tier-badge{position:relative;flex:0 0 120px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;font-size:3rem;font-weight:900;line-height:1;color:#10131a;min-height:132px}
.tier-badge small{font-size:.7rem;font-weight:700;letter-spacing:.12em;margin-top:6px}
.tier-badge::before,.tier-badge::after{content:"";position:absolute;width:14px;height:14px;border:3px solid #10131a}
.tier-badge::before{top:6px;left:6px;border-right:none;border-bottom:none}
.tier-badge::after{bottom:6px;right:6px;border-left:none;border-top:none}
.tier-badge.tier-s{background:var(--tier-s)}.tier-badge.tier-a{background:var(--tier-a)}.tier-badge.tier-b{background:var(--tier-b)}.tier-badge.tier-c{background:var(--tier-c)}.tier-badge.tier-x{background:var(--tier-x)}
.tier-pill{position:relative;flex:1;border:2px solid var(--line);border-radius:18px;background:var(--panel2);padding:16px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tier-row.tier-s .tier-pill{border-color:var(--tier-s)}.tier-row.tier-a .tier-pill{border-color:var(--tier-a)}.tier-row.tier-b .tier-pill{border-color:var(--tier-b)}.tier-row.tier-c .tier-pill{border-color:var(--tier-c)}.tier-row.tier-x .tier-pill{border-color:var(--tier-x)}
.pill-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--tier-x);color:#10131a;font-weight:800;font-size:.75rem;letter-spacing:.08em;border-radius:999px;padding:1px 14px}
.empty-note{color:var(--muted)}
/* hex portraits */
.hex{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:88px;text-decoration:none;color:inherit}
.hex-frame{width:80px;height:88px;padding:4px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--cost-1);overflow:hidden}
.hex.cost-1 .hex-frame{background:var(--cost-1)}.hex.cost-2 .hex-frame{background:var(--cost-2)}.hex.cost-3 .hex-frame{background:var(--cost-3)}.hex.cost-4 .hex-frame{background:var(--cost-4)}.hex.cost-5 .hex-frame{background:var(--cost-5)}
.hex-frame img{width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;background:#1c2230;display:block;border:0}
.hex-name{font-size:.72rem;margin-top:4px;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hex-items{display:flex;gap:2px;margin-top:-12px;min-height:20px;position:relative;z-index:1}
.hex-items img{width:20px;height:20px;border-radius:4px;background:#1c2230;outline:1px solid rgba(0,0,0,.6)}
a.hex:hover .hex-name{text-decoration:underline}
/* detail layout */
.back{display:inline-block;margin:8px 0 16px;color:var(--gold)}
.comp-layout{display:grid;grid-template-columns:300px minmax(0,1fr) 240px;gap:14px;align-items:start}
@media (max-width:980px){.comp-layout{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.comp-sidebar{background:var(--panel2);text-align:center}
.comp-sidebar .hex.hero{width:150px}
.comp-sidebar .hex.hero .hex-frame{width:132px;height:146px}
.comp-sidebar h1{font-size:1.25rem;margin:10px 0 2px}
.playstyle{color:var(--gold);font-size:.82rem;font-weight:700}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;padding:0 .6em;border-radius:.6em;font-weight:700;background:var(--fg);color:var(--bg);font-size:.85rem}
.comp-sidebar h3{font-size:.85rem;color:var(--muted);margin:16px 0 8px;letter-spacing:.06em}
.augments{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:start}
.aug-tip img{width:48px;height:48px;min-width:48px;max-width:48px;aspect-ratio:1;object-fit:contain;object-position:center;display:block;background:#1c2230;border-radius:10px}
.aug-tip{position:relative;display:inline-flex;flex-direction:column;align-items:center;cursor:help;border-radius:10px}
.aug-tip:focus{outline:2px solid var(--gold);outline-offset:2px}
.aug-name{font-size:.62rem;color:var(--muted);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aug-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:180px;max-width:250px;background:#0f131b;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.78rem;line-height:1.5;display:none;z-index:30;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.aug-tip:hover .aug-pop,.aug-tip:focus-within .aug-pop{display:block}
.aug-pop strong{display:block;color:var(--gold);margin-bottom:2px}
.copy-btn{margin-top:12px;width:100%;padding:.55em .8em;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg);font:inherit;font-size:.85rem;cursor:pointer}
.copy-btn:hover{border-color:var(--gold)}
.aug-prio{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.aug-prio span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.75rem;background:var(--panel)}
.unit-hexes{display:flex;flex-wrap:wrap;gap:10px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:760px){.trio{grid-template-columns:1fr}}
.trio h3,.positioning h3,.tips h3,.stages h3,.comp-alt h3{font-size:.9rem;margin:0 0 10px;text-align:center}
.mini-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mini-row img{width:34px;height:34px;border-radius:8px;background:#1c2230}
.mini-row .arrow{align-self:center;color:var(--muted)}
.unit-chip{display:inline-flex;flex-direction:column;align-items:center;width:64px;font-size:.68rem}
.unit-chip img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#1c2230}
/* positioning board: honeycomb like the original (odd rows half-hex offset, nested) */
.positioning{margin-top:14px}
.board{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 0 16px}
.board-row{display:flex;gap:4px;justify-content:center}
.board-row+.board-row{margin-top:-8px}
.board-row.offset{margin-left:56px}
.board-cell{position:relative;width:52px;height:66px;flex:0 0 auto;overflow:visible}
.board-hex{display:block;width:52px;height:58px;-webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#3d4660;position:relative;overflow:hidden}
.board-hex.placed{padding:3px;background-color:var(--cost-1);background-size:cover;background-position:center;background-repeat:no-repeat;background-clip:content-box;cursor:default}
.board-hex.placed.cost-1{background-color:var(--cost-1)}.board-hex.placed.cost-2{background-color:var(--cost-2)}.board-hex.placed.cost-3{background-color:var(--cost-3)}.board-hex.placed.cost-4{background-color:var(--cost-4)}.board-hex.placed.cost-5{background-color:var(--cost-5)}
.board-hex.placed img.board-portrait{width:100%;height:100%;min-width:100%;object-fit:cover;background:#1c2230;display:block;border:0}
.board-hex .bname{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:.55rem;text-shadow:0 1px 2px #000;z-index:1;overflow:hidden;white-space:nowrap}
.board-hex .bstars{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:.6rem;color:var(--gold);text-shadow:0 1px 2px #000;z-index:1}
.board-items{position:absolute;left:0;right:0;bottom:0;display:flex;gap:2px;justify-content:center;z-index:2;overflow:visible}
.board-items img{width:18px;height:18px;min-width:18px;border-radius:4px;background:#1c2230;outline:1px solid rgba(0,0,0,.65);display:block}
.tips{margin-top:14px}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:760px){.stages{grid-template-columns:1fr}}
.stages h4{margin:0 0 8px;text-align:center;font-size:.85rem}
.tips-list{margin:8px 0;padding-left:1.3em;font-size:.92rem}
details.orig{margin-top:10px;font-size:.82rem;color:var(--muted)}
details.orig summary{cursor:pointer}
footer{margin-top:40px;color:var(--muted);font-size:.8rem}

/* 懸隔メモ — per-comp only (detail section + index hex cue). No site-wide panel. */
.gap-memos{margin:14px 0 18px;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;background:var(--panel);padding:12px 14px 14px}
.gap-memos-detail{margin-top:14px}
.gap-head{margin-bottom:10px}
.gap-head h2{font-size:.95rem;margin:0;letter-spacing:.06em;color:var(--gold);display:inline-block}
.gap-lead{margin:6px 0 0;font-size:.78rem;color:var(--muted);line-height:1.45}
.gap-note{margin:0 0 8px;padding:8px 10px;background:var(--panel2);border-radius:8px;border:1px solid var(--line)}
.gap-note:last-child{margin-bottom:0}
.gap-title{font-size:.86rem;font-weight:700;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gap-title-text{color:var(--fg)}
.gap-body{font-size:.82rem;color:var(--muted);margin:0;line-height:1.55}
.gap-tag{display:inline-block;border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:700;letter-spacing:.04em;line-height:1.4}
.gap-tag-watch{background:#3a1f1f;color:#ff9b9b;border:1px solid #6b3030}
.gap-tag-upside{background:#1a2f24;color:#6ddea0;border:1px solid #2f6b4a}
.gap-tag-other{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
/* per-comp cue on tierlist hex */
.hex-gap{position:absolute;top:-2px;right:-6px;z-index:2;font-size:.58rem;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:999px;line-height:1.35;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.45)}
.hex-gap-watch{background:#3a1f1f;color:#ff9b9b;border:1px solid #6b3030}
.hex-gap-upside{background:#1a2f24;color:#6ddea0;border:1px solid #2f6b4a}
.hex-gap-mixed{background:#2a2418;color:var(--gold);border:1px solid var(--gold)}
.hex-gap-other{background:var(--panel);color:var(--muted);border:1px solid var(--line)}

.site-note{margin:10px 0 4px;padding:8px 10px;border:1px solid #2f5f8a;border-left:4px solid #7cc4ff;border-radius:8px;background:#13212f;font-size:.85rem;line-height:1.55}
.site-note-label{display:inline-block;font-weight:800;color:#7cc4ff;margin-right:6px}
.site-note small{color:var(--muted)}
.site-note p{margin:4px 0 0}