.tierlist-page{min-height:100vh;padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-24)}.tl-header{text-align:center;margin-bottom:var(--space-10)}.tl-header__eyebrow{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;margin-bottom:var(--space-2)}.tl-header__title{font-family:var(--font-display);font-size:clamp(3rem, 7vw, 5.5rem);color:var(--text-primary);line-height:var(--lh-tight);margin-bottom:var(--space-3)}.tl-header__title em{font-style:normal;background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;padding-right:.15em}.tl-header__sub{color:var(--text-secondary);font-size:var(--fs-base);max-width:560px;margin:0 auto}.tl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-8);padding:var(--space-4) var(--space-5);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg)}.tl-toolbar__group{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.tl-toolbar__divider{width:1px;height:28px;background:var(--border-default);flex-shrink:0}.tl-toolbar__spacer{flex:1}.tl-search-wrap{position:relative}.tl-search{background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-sm);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-8);width:160px;outline:0;transition:border-color var(--duration-fast) var(--ease-out),width var(--duration-normal) var(--ease-out)}.tl-search:focus{border-color:var(--accent-yellow);width:200px}.tl-search-wrap::before{content:'';position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}.tl-filter-btn{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-default);background:0 0;color:var(--text-secondary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);white-space:nowrap}.tl-filter-btn:hover{border-color:var(--border-strong);color:var(--text-primary);transform:scale(1.04)}.tl-filter-btn.active{background:var(--accent-yellow);border-color:var(--accent-yellow);color:#000;font-weight:var(--fw-bold)}.tl-action-btn{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);white-space:nowrap}.tl-action-btn:hover{transform:scale(1.05);border-color:var(--accent-yellow);color:var(--accent-yellow)}.tl-action-btn:active{transform:scale(.96)}.tl-action-btn--primary{background:var(--accent-yellow);border-color:var(--accent-yellow);color:#000;font-weight:var(--fw-bold)}.tl-action-btn--primary:hover{background:var(--accent-yellow-glow);border-color:var(--accent-yellow-glow);color:#000;box-shadow:var(--shadow-glow-yellow)}.tl-action-btn--meta{border-color:var(--accent-blue);color:var(--accent-blue)}.tl-action-btn--meta:hover{background:var(--accent-blue-dim);border-color:var(--accent-blue);color:var(--accent-blue)}.tl-placed-count{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}.tl-tiers{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-8)}.tl-tier-row{display:flex;align-items:stretch;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-default);min-height:70px;transition:border-color var(--duration-fast) var(--ease-out)}.tl-tier-row:hover{border-color:var(--border-strong)}.tl-tier-label{display:flex;align-items:center;justify-content:center;min-width:68px;font-family:var(--font-display);font-size:var(--fs-3xl);line-height:1;color:#000;flex-shrink:0;user-select:none}.tl-drop-zone{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);min-height:70px;background:var(--bg-secondary);transition:background var(--duration-fast) var(--ease-out);position:relative}.tl-drop-zone--over{background:var(--accent-yellow-dim);outline:2px dashed var(--accent-yellow);outline-offset:-3px}.tl-drop-zone__hint{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted);align-self:center;user-select:none;pointer-events:none;padding:var(--space-2)}.tl-brawler{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);cursor:grab;position:relative;user-select:none;-webkit-touch-callout:none;transition:transform var(--duration-fast) var(--ease-out),opacity var(--duration-fast) var(--ease-out)}.tl-brawler:hover{transform:translateY(-3px) scale(1.08);z-index:5}.tl-brawler:active{cursor:grabbing}.tl-brawler--dragging{opacity:.35}.tl-brawler__cls-dot{width:6px;height:6px;border-radius:50%;position:absolute;top:2px;right:2px;z-index:2;border:1px solid rgba(0,0,0,.4)}.tl-brawler .brawler-avatar{--avatar-size:64px;border-radius:var(--radius-sm)}#tl-pool .tl-brawler .brawler-avatar{--avatar-size:56px;width:100%;height:auto;aspect-ratio:1/1}.tl-pool-section{margin-top:var(--space-10)}.tl-pool-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.tl-pool-title{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text-primary);letter-spacing:var(--ls-display)}.tl-pool-count{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}#tl-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--space-2);padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);min-height:100px;transition:background var(--duration-fast) var(--ease-out)}#tl-pool .tl-brawler{display:flex}#tl-pool.tl-drop-zone--over{background:rgba(148,163,184,.08);outline:2px dashed var(--border-strong);outline-offset:-3px}.tl-pool__empty{width:100%;text-align:center;padding:var(--space-8);font-family:var(--font-mono);color:var(--text-muted);font-size:var(--fs-base)}.tl-touch-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:scale(1.1);border-radius:var(--radius-md);box-shadow:0 12px 40px rgba(0,0,0,.6)}.tl-quick-menu{position:fixed;z-index:9990;display:flex;gap:var(--space-1);padding:var(--space-2);background:var(--bg-glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--bg-glass-border);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);opacity:0;transform:scale(.95);transform-origin:var(--qm-origin,bottom center);pointer-events:none;transition:opacity .1s var(--ease-out),transform .1s var(--ease-out);will-change:transform,opacity}.tl-quick-menu--open{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out)}.tl-quick-menu::after{content:'';position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;background:var(--bg-glass);border-right:1px solid var(--bg-glass-border);border-bottom:1px solid var(--bg-glass-border);transform:rotate(45deg)}.tl-quick-menu--below::after{bottom:auto;top:-4px;border:0;border-left:1px solid var(--bg-glass-border);border-top:1px solid var(--bg-glass-border)}.tl-qm-btn{width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid var(--qm-color);background:0 0;color:var(--qm-color);font-family:var(--font-display);font-size:var(--fs-xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 120ms var(--ease-out),background-color 120ms var(--ease-out),color 120ms var(--ease-out)}.tl-qm-btn--current{background:var(--qm-color);color:#07080c}.tl-qm-btn:active{transform:scale(.92)}@media (hover:hover) and (pointer:fine){.tl-qm-btn:hover{background:var(--qm-color);color:#07080c;transform:scale(1.12)}}.tl-qm-btn--s{--qm-color:#F59E0B}.tl-qm-btn--a{--qm-color:#22C55E}.tl-qm-btn--b{--qm-color:#60A5FA}.tl-qm-btn--c{--qm-color:#A78BFA}.tl-qm-btn--d{--qm-color:#94A3B8}.tl-qm-btn--f{--qm-color:#EF4444}@media (prefers-reduced-motion:reduce){.tl-quick-menu,.tl-quick-menu--open{transform:none;transition:opacity 120ms}.tl-qm-btn{transition:background-color 120ms,color 120ms}.tl-qm-btn:active,.tl-qm-btn:hover{transform:none}}.tl-toast{position:fixed;bottom:var(--space-8);left:50%;transform:translateX(-50%) translateY(2rem);background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-sm);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);z-index:9998;opacity:0;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);pointer-events:none;white-space:nowrap}.tl-toast--visible{opacity:1;transform:translateX(-50%) translateY(0)}.tl-tier-label--s{background:#f59e0b}.tl-tier-label--a{background:#22c55e}.tl-tier-label--b{background:#60a5fa}.tl-tier-label--c{background:#a78bfa}.tl-tier-label--d{background:#94a3b8}.tl-tier-label--f{background:#ef4444}.tl-drop-zone--s-bg{background:rgba(245,158,11,.04)}.tl-drop-zone--a-bg{background:rgba(34,197,94,.04)}.tl-drop-zone--b-bg{background:rgba(96,165,250,.04)}.tl-drop-zone--c-bg{background:rgba(167,139,250,.04)}.tl-drop-zone--d-bg{background:rgba(148,163,184,.04)}.tl-drop-zone--f-bg{background:rgba(239,68,68,.04)}.tl-how-to{display:flex;gap:var(--space-6);margin-bottom:var(--space-8);padding:var(--space-4) var(--space-5);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-wrap:wrap}.tl-how-to__step{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-secondary)}.tl-how-to__num{width:22px;height:22px;border-radius:50%;background:var(--accent-yellow);color:#000;font-size:var(--fs-xs);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;flex-shrink:0}@media (max-width:900px){.tl-toolbar{gap:var(--space-2)}.tl-toolbar__divider,.tl-toolbar__spacer{display:none}.tl-filter-btn{font-size:var(--fs-2xs);padding:var(--space-1) var(--space-2)}.tl-tier-label{min-width:50px;font-size:var(--fs-2xl)}.tl-brawler .brawler-avatar{--avatar-size:52px}#tl-pool{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}}@media (max-width:600px){.tierlist-page{padding-top:calc(var(--nav-height) + var(--space-4))}.tl-header__title{font-size:var(--fs-3xl)}.tl-toolbar{padding:var(--space-3)}.tl-search{width:120px}.tl-search:focus{width:150px}.tl-how-to{gap:var(--space-3)}.tl-how-to__step:last-child{display:none}.tl-tier-label{min-width:42px;font-size:var(--fs-xl)}#tl-pool{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.tl-brawler .brawler-avatar{--avatar-size:44px}#tl-pool .tl-brawler .brawler-avatar{--avatar-size:40px}.tl-action-btn span,.tl-placed-count{display:none}}