: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}
/* tier rows */
.tier-row{display:flex;gap:14px;align-items:stretch;margin:18px 0}
.tier-badge{position:relative;flex:0 0 108px;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:120px}
.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:14px 16px;display:flex;flex-wrap:wrap;gap:12px;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{display:inline-flex;flex-direction:column;align-items:center;width:84px;text-decoration:none;color:inherit}
.hex-frame{width:72px;height:80px;padding:4px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--cost-1)}
.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%;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#1c2230;display:block}
.hex-name{font-size:.72rem;margin-top:4px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hex-items{display:flex;gap:2px;margin-top:2px;min-height:20px}
.hex-items img{width:20px;height:20px;border-radius:4px;background:#1c2230}
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:280px 1fr 220px;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:8px}
.augments img{width:100%;aspect-ratio:1;object-fit:contain;background:#1c2230;border-radius:10px}
.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 */
.positioning{margin-top:14px}
.board{display:grid;grid-template-columns:repeat(7,52px);gap:4px;justify-content:center;padding:8px 0}
.board-row{display:contents}
.board-row.offset .board-hex:first-child{grid-column-start:1}
.board-hex{width:52px;height:58px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#222839;position:relative}
.board-hex.placed{background:var(--cost-1);cursor:default}
.board-hex.placed img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.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}
.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}
footer{margin-top:40px;color:var(--muted);font-size:.8rem}