/* M36 screen composition: portrait game surfaces, command sheets and catalog grids. */
[hidden] { display:none!important; }
dialog:not([open]) { display:none; }
body:has(dialog[open]) { overflow:hidden; }
dialog { color:var(--ui-text); font-family:inherit; }
dialog::backdrop { background:#080b16bf; backdrop-filter:blur(7px); }
.icon-button { display:grid; place-items:center; flex:none; width:48px; height:48px; min-height:48px; padding:0; border:1px solid #8d97a65c; border-radius:50%; background:#303746; color:#f4f1e9; font-size:1.8rem; cursor:pointer; }
.icon-button svg { width:22px; height:22px; }
.overlay-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 0 1rem; border-bottom:1px solid #949eb43b; }
.overlay-head h2 { font-size:1.4rem; margin:.3rem 0; letter-spacing:-.04em; }
.overlay-head .eyebrow { margin:0; color:#d4c5a6; font-size:.7rem; }
.menu-overlay { position:fixed; inset:0; width:min(100%,760px); height:100dvh; max-width:100%; max-height:100dvh; margin:auto; padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); border:0; background:radial-gradient(ellipse at 100% 0%,#53617855,transparent 60%),linear-gradient(155deg,#202735,#11151f 70%); overflow:auto; overscroll-behavior:contain; }
.menu-overlay .rail-nav,.menu-overlay .rail-nav.menu-ready { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; max-height:none; overflow:visible; padding:1.25rem 0; }
.menu-overlay .rail-nav__group { display:contents; }
.menu-overlay .rail-nav__group h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.menu-overlay .rail-nav a,.menu-overlay .rail-nav form button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; width:100%; aspect-ratio:1; min-height:0; padding:.5rem .25rem; border:1px solid #828c9e50; border-radius:12px 3px 12px 3px; background:linear-gradient(135deg,#364153b3,#222b3b80); color:#e6e9ef; text-align:center; text-decoration:none; font-size:.71rem; font-weight:650; line-height:1.45; overflow-wrap:anywhere; word-break:keep-all; box-shadow:inset 0 1px #dae3f017; }
.menu-overlay .rail-nav :is(a,button) svg { width:32px; height:32px; color:#d9c9a7; }
.menu-overlay .rail-nav a:hover,.menu-overlay .rail-nav a[aria-current=page] { border-color:#d8c79f; background:linear-gradient(130deg,#c1b08b44,#3a4358); box-shadow:inset 0 2px #d8c79f; color:#fffaf1; }
.menu-overlay .rail-nav form { margin:0; }
.overlay-hint { font-size:.75rem; color:#bbc2cf; text-align:center; padding:.75rem; }
.screen-path { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#939eb2; padding:0 0 .6rem; border-bottom:1px solid #747f922a; font-size:.68rem; letter-spacing:.05em; }
.screen-path a { display:flex; align-items:center; gap:.4rem; min-height:36px; color:#d5dbe5; text-decoration:none; font-size:.8rem; letter-spacing:0; }
.screen-path svg { width:18px; height:18px; }
body:not([data-page=home]) .main-stage { padding-inline:1rem; }
body:not([data-page=home]) :is(.catalog-head,.preview-head,.page-intro) h1 { font-size:1.65rem; padding-left:.75rem; border-left:3px solid var(--ui-accent); margin:1rem 0 .7rem; }
body:not([data-page=home]) :is(.catalog-head,.preview-head,.page-intro)>p:not(.eyebrow) { font-size:.85rem; color:#bfc7d5; line-height:1.65; }
body:not([data-page=home]) .panel { padding:1rem; border:1px solid #76839938; border-radius:12px 3px; background:linear-gradient(135deg,#2b354890,#1b253590); box-shadow:inset 0 1px #a6b3cc0f; }
body:not([data-page=home]) .panel>h2 { display:flex; align-items:center; gap:.5rem; margin:.2rem 0 1rem; padding-bottom:.7rem; border-bottom:1px solid #9da8bb35; font-size:1rem; color:#e6e1d6; }
body:not([data-page=home]) .panel>h2::before { content:''; width:6px; height:6px; background:#d8c79f; transform:rotate(45deg); }
body:not([data-page=home]) .panel p { line-height:1.75; font-size:.86rem; }
body:not([data-page=home]) .profile-form { border:0; border-radius:0; background:none; padding:.3rem 0; max-width:none; }
body:not([data-page=home]) .preset-row { display:grid; gap:.7rem; padding:1rem .2rem; border-bottom:1px solid #9ba7bf40; font-size:.86rem; }
body:not([data-page=home]) .preset-row form { margin:0; }
body:not([data-page=home]) .main-stage form>button { width:100%; }
body:not([data-page=home]) :is(.filter-form,.catalog-search) button { width:auto; }
.screen-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:1.2rem 0; border:1px solid #9ba7bf40; background:#151d2b; border-radius:3px; }
.main-stage .screen-tabs button { flex:1; padding:.65rem .3rem; min-height:48px; border:0; border-radius:2px; font-size:.8rem; color:#c0c9d8; background:transparent; box-shadow:none; white-space:normal; }
.main-stage .screen-tabs button[aria-selected=true] { background:#e5e0d3; color:#202735; }
.action-sheet { position:fixed; inset:auto 0 0; width:min(100%,760px); max-width:100%; max-height:92dvh; margin:0 auto; padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border:1px solid #8d96a861; border-top:2px solid #d5c4a2; border-radius:18px 18px 0 0; background:linear-gradient(145deg,#2a3345,#17202e 60%); overflow:auto; overscroll-behavior:contain; box-shadow:0 -12px 80px #0007; }
.action-sheet .sheet-content { padding-top:1rem; }
.action-sheet :is(p,label,summary,li) { font-size:.9rem; line-height:1.75; }
.action-sheet :is(p,label,small) { color:#c7cfdd; }
.action-sheet form { display:grid; gap:.7rem; margin:1rem 0; max-width:100%; }
.action-sheet :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select) { box-sizing:border-box; width:100%; min-width:0; min-height:48px; padding:.7rem; border:1px solid #8090aa80; border-radius:4px; background:#111926; color:#f2f3f4; font-size:1rem; }
.action-sheet textarea { min-height:100px; }
.action-sheet button:not(.icon-button) { min-height:48px; padding:.75rem 1rem; border:1px solid #9aa7bc60; border-radius:3px; color:#e9edf3; background:#39455b; font-size:.88rem; font-weight:650; cursor:pointer; }
.action-sheet .game-button { color:#232937!important; background:#e7e0cf!important; border-color:#f7f1e1!important; }
.action-sheet .profile-form { border:0; background:none; padding:0; }
.action-sheet .unit-info { padding:.5rem 0; }
.action-sheet .unit-info h2 { font-size:1.1rem; }
.action-sheet input[type=checkbox] { width:20px; height:20px; accent-color:#d8c79f; }
.action-sheet .unit-info form[action$='/reset/'] button,.danger-workflow button { color:#ffd4cc; border-color:#ca8b86; background:#53343e; }
.main-stage details[data-sheet]>summary { padding:.65rem .9rem; border:1px solid #7b88a342; border-radius:6px; background:#242e40; font-size:.85rem; }
.partner-collection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; align-items:start; }
.partner-card { min-width:0; }
.partner-card__details { border:0; margin:0; padding:0; }
.main-stage .partner-card__details>summary { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; border:1px solid #77839c70; border-radius:8px 2px; background:#263044; }
.partner-card__details>summary::after { content:none; }
.partner-card__art.unit-thumb { position:relative; width:100%; height:150px; min-height:0; padding:.3rem; background:radial-gradient(ellipse at 50% 30%,#59668188,#1c2638 70%); }
.partner-card__art img { width:100%; height:100%; object-fit:contain; padding:.2rem; }
.partner-card__level { position:absolute; left:.35rem; bottom:.4rem; padding:.2rem .4rem; border-radius:2px; background:#151c2be8; color:#e3d5b8; font-size:.65rem; }
.partner-card__name { padding:.6rem .4rem .2rem; font-size:.74rem; line-height:1.5; min-height:3.4em; word-break:keep-all; overflow-wrap:anywhere; }
.partner-card__state { padding:.2rem .4rem .5rem; color:#aebbd1; font-size:.65rem; }
body[data-page=garage] .collection-stage { display:grid; grid-template-columns:1fr 1.1fr; gap:1rem; align-items:center; margin-bottom:1rem; padding:1rem 0; }
body[data-page=garage] .collection-stage__art.unit-thumb { height:230px; min-height:0; padding:0; }
body[data-page=garage] .collection-stage__info { text-align:left; }
body[data-page=garage] .collection-stage__info h2 { font-size:1.15rem; margin:.3rem 0; }
body[data-page=garage] .collection-stage__stats { margin:.6rem 0; }
body[data-page=garage] .collection-stage__stats>div { gap:.5rem; padding:.4rem 0; }
body[data-page=garage] .collection-stage__stats :is(dt,dd) { font-size:.7rem; }
body[data-page=garage] .collection-stage .game-button { font-size:.75rem; padding:.7rem .6rem; }
.active-partner-management { margin:0 0 1rem; }
.active-partner-management.sheet-ready>summary { display:none; }
.pool-selector { display:flex!important; justify-content:space-between!important; align-items:center; gap:.75rem; width:100%; padding:.75rem 1rem!important; border-radius:5px!important; background:#313c50!important; text-align:left; }
.pool-selector__choice { display:flex; align-items:center; gap:.75rem; min-width:0; }
.pool-selector__choice>span:last-child { min-width:0; overflow-wrap:anywhere; }
.pool-selector__cover { position:relative; display:block; flex:none; width:48px; aspect-ratio:18/17; overflow:hidden; border-radius:3px; }
.pool-selector__cover>img { position:absolute; inset:0; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.unit-thumb:has(img[hidden]) .unit-fallback { display:grid; }
.pool-selector[hidden] { display:none!important; }
.pool-selector small { display:block; color:#b9c4d5; font-size:.7rem; margin-bottom:.2rem; }
.pool-selector strong { font-size:1.1rem; color:#f2ede1; }
.pool-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:1rem 0; }
.pool-catalog a { display:flex; flex-direction:column; gap:.45rem; padding:1rem; border:1px solid #8b99b460; border-radius:8px 2px; background:linear-gradient(135deg,#44536d,#252e40); color:#ebedf1; text-decoration:none; font-size:1rem; }
.pool-catalog a[aria-current] { border-color:#d8c79f; box-shadow:inset 0 2px #d8c79f; }
.pool-catalog__icon { color:#d8c79f; }
.pool-catalog small { font-size:.72rem; color:#bac6d9; }
.draw-screen-head { margin-bottom:.6rem; }
.draw-screen-head>p { display:none; }
body[data-page=blood_market] .screen-path { display:none; }
.draw-wallet { display:flex; justify-content:space-between; gap:.5rem; padding:.65rem .75rem; margin-bottom:.8rem; border:1px solid #8b97b03b; border-radius:4px; background:#1b2535; font-size:.75rem; }
.draw-wallet span { display:grid; gap:.25rem; }
.draw-wallet strong { font-size:.9rem; color:#e2d1b1; }
.draw-banner { margin-top:.7rem; background:radial-gradient(ellipse at 50% 35%,#4e5b7435,transparent 70%); }
.draw-banner__title { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.4rem; padding:.6rem 0; }
.draw-banner__title small { grid-column:1/-1; color:#aebbd0; font-size:.6rem; letter-spacing:.1em; }
.draw-banner__title h2 { font-size:1.5rem; margin:0; }
.draw-banner__title>span { font-size:.7rem; color:#abbad0; }
.draw-banner__art.unit-thumb { height:clamp(220px,32svh,330px); padding:.6rem .5rem 2rem; }
.draw-example { bottom:.1rem; left:0; width:100%; font-size:.7rem; background:none; color:#c4ccdb; }
.draw-tier { position:absolute; top:.35rem; left:0; padding:.3rem .6rem; background:#d8c79f20; color:#e6d4ae; font-size:.7rem; border-left:2px solid #d8c79f; }
.draw-price { display:grid; grid-template-columns:1fr auto; gap:.4rem; padding:.8rem 1rem; border:1px solid #8292b143; background:#27344a80; border-radius:4px; }
.draw-price>span { color:#bdc8dc; font-size:.8rem; }
.draw-price strong { font-size:1.1rem; grid-row:span 2; align-self:center; color:#e9ddc4; }
.draw-price strong small { font-size:.65rem; }
.draw-banner__info { padding:0 0 1rem; }
.draw-rules { margin-top:.7rem; }
.draw-rules>summary { justify-content:center; }
.pool-candidate-list { list-style:none; padding:0; }
.pool-candidate-list li { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid #77849a40; }
.pool-candidate-list small { flex:none; font-size:.7rem; }
.master-status { display:grid; grid-template-columns:1fr; gap:1rem; padding:1.2rem; border:1px solid #8090a854; border-radius:12px 3px; background:radial-gradient(ellipse at 0 0,#67739365,transparent 70%),#1f2a3d; }
.master-status__identity { display:flex; align-items:center; gap:1rem; }
.master-status__identity>svg { width:56px; height:56px; padding:.6rem; border:1px solid #ddceb277; color:#e0cba4; border-radius:8px 2px; }
.master-status__identity>div { display:grid; grid-template-columns:auto 1fr; align-items:end; gap:.3rem .7rem; }
.master-status__identity small { grid-column:1/-1; color:#adbbd2; font-size:.65rem; letter-spacing:.1em; }
.master-status__identity strong { font-size:2rem; line-height:1; color:#f0e8d7; }
.master-status__identity span { font-size:.9rem; color:#cbd4e2; }
.master-status dl { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:0; }
.master-status dt { font-size:.7rem; color:#a8b8d0; }
.master-status dd { margin:.3rem 0 0; color:#eee5d1; font-size:1rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.training-screen>h2 { display:none; }
.screen-guide { font-size:.8rem; color:#b9c6da; line-height:1.7; margin:.8rem 0; }
.training-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.main-stage .training-card>summary { display:grid; grid-template-columns:32px 1fr; gap:.5rem; min-height:146px; padding:1rem; background:linear-gradient(140deg,#45536b90,#222d40); border:1px solid #8b99b760; border-radius:10px 2px; }
.training-card>summary::after { content:none; }
.training-card summary svg { color:#d8c79f; }
.training-card summary>span { font-size:.95rem; }
.training-card summary>strong { grid-column:1/-1; font-size:1.9rem; line-height:1.2; color:#ebe4d6; }
.training-card summary>small { grid-column:1/-1; color:#aebdd3; font-size:.7rem; }
.training-detail__stat { display:flex; align-items:baseline; justify-content:space-between; padding:1rem; background:#40526b40; border-left:3px solid #d8c79f; }
.training-detail__stat strong { font-size:2rem; color:#ecdfc2; }
.training-action { display:grid; gap:.3rem; margin:1rem 0; padding:1rem; border:1px solid #8b97ad54; background:#243248; border-radius:6px; }
.training-action h3 { margin:0; font-size:1rem; }
.training-action p { margin:.4rem 0; }
.training-action form { margin:.5rem 0 0; }
.unavailable-note { padding:.7rem; border-left:2px solid #c9a889; background:#372c283d; }
.danger-workflow { margin-top:1rem; }
.main-stage .danger-workflow>summary { border-color:#b6858077; color:#efc2b8; background:#3b2c3d; }
.inventory-grid,.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.trait-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; }
.trait-grid .trait-card { color:inherit; text-decoration:none; padding:.75rem .5rem; text-align:center; }
.trait-grid .trait-card h3 { font-size:.75rem; }
.trait-grid .trait-card svg { width:22px; height:22px; }
.trait-grid .trait-card:hover { border-color:#d8c79f; }
.trait-card,.inventory-tile { min-width:0; padding:1rem; border:1px solid #8493b14a; background:#28364b; border-radius:8px 2px; }
.trait-card svg,.inventory-tile svg { color:#dac7a0; width:30px; height:30px; }
.trait-card h3,.inventory-tile h3 { font-size:.9rem; line-height:1.6; margin:.5rem 0; overflow-wrap:anywhere; }
.trait-card strong { font-size:1.6rem; }
.trait-card small { font-size:.8rem; color:#b8c5da; }
.inventory-tile>small { display:block; color:#a4b7cf; font-size:.7rem; }
.inventory-tile>strong { display:block; margin-top:.5rem; color:#e1cda8; }
.equipment-loadout { padding:1rem 0; border-bottom:1px solid #72829b50; }
.equipment-loadout h3 { font-size:.95rem; }
.equipment-loadout dl>div,.stat-list>div { display:flex; justify-content:space-between; gap:.5rem; }
.equipment-loadout dt { color:#b0c0d7; font-size:.8rem; }
.equipment-loadout dd { margin:0; font-size:.8rem; }
.item-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.item-grid .item-card { min-width:0; padding:1rem .75rem; background:linear-gradient(145deg,#39496380,#222e4380); border-radius:8px 2px; }
.item-grid .item-card h2 { font-size:.9rem; line-height:1.6; margin:.6rem 0; word-break:keep-all; overflow-wrap:anywhere; }
.item-card__emblem { width:32px; height:32px; color:#dac7a0; }
.item-grid .stat-list { font-size:.76rem; }
.item-grid .stat-list dt { color:#a9bed9; }
.item-grid .stat-list dd { margin:0; color:#e1e8f3; }
.item-grid .item-description { font-size:.76rem; color:#b1c1da; }
body[data-page=groups] .panel>p { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.75rem; border-left:2px solid #d8c79f; background:#34435d4a; }
.nt-status { display:grid; justify-items:center; gap:.6rem; padding:2rem 1rem; margin:1rem 0; border:1px solid #8493b160; background:radial-gradient(ellipse,#5f728540,#1f2a3d); }
.nt-status svg { width:46px; height:46px; color:#dcc49d; }
.nt-status strong { font-size:3rem; line-height:1; color:#eee4ce; }
.nt-status span { font-size:.8rem; color:#b4c5db; }
body[data-page=private_messages] .panel>article { padding:1rem; margin:.75rem 0; border:1px solid #94a2bc40; border-radius:8px 2px; background:#253147; }
body[data-page=team] .member-card { border:1px solid #8697b343; background:#233249; padding:1rem; margin:1rem 0; border-radius:10px 2px; }
body[data-page=profile] .dashboard-grid>article:first-child { background:linear-gradient(125deg,#5e6e8640,#252f42); }
.auth-form { background:linear-gradient(145deg,#334056ba,#1b2437)!important; border:1px solid #a2acc45c!important; border-radius:14px 3px!important; }
@media(min-width:600px) { .menu-overlay .rail-nav,.menu-overlay .rail-nav.menu-ready { grid-template-columns:repeat(5,minmax(0,1fr)); } .partner-card__art.unit-thumb { height:230px; } .training-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .action-sheet { padding:1.6rem; } }
@media(max-width:420px) { .menu-overlay .rail-nav,.menu-overlay .rail-nav.menu-ready { gap:.5rem; grid-template-columns:repeat(3,minmax(0,1fr)); } .menu-overlay .rail-nav :is(a,form button) { font-size:.76rem; gap:.3rem; padding:.3rem; } .menu-overlay .rail-nav :is(a,button) svg { width:28px; height:28px; } }
@media(max-width:360px) { .partner-card__art.unit-thumb { height:125px; } .partner-card__name { font-size:.7rem; } .collection-stage { gap:.6rem!important; } .draw-price { padding:.6rem; } .draw-price strong { font-size:.95rem; } .screen-tabs button { font-size:.74rem!important; } }
@media(prefers-reduced-motion:no-preference) { .action-sheet[open],.menu-overlay[open] { animation:screen-enter .16s ease-out; } @keyframes screen-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } }

.resource-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:1rem 0; }
.resource-board>div { padding:1rem .7rem; background:linear-gradient(125deg,#4b5e795c,#233147); border:1px solid #8494af4f; border-radius:8px 2px; min-width:0; }
.resource-board dt { color:#afbed4; font-size:.72rem; }
.resource-board dd { color:#e9d9b6; margin:.6rem 0 0; font-size:1.1rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body[data-page=tactics] .preset-row { border:1px solid #8998af50; padding:0; margin:.7rem 0; border-radius:6px; background:#2b3950; }
body[data-page=tactics] .preset-row>summary { padding:1rem; }
body[data-page=rankings] .ranking-table tr { padding:.65rem .6rem; gap:.5rem .75rem; }
body[data-page=rankings] .ranking-table td[data-label] { font-size:.73rem; padding:.25rem 0; }
body[data-page=rankings] .rank-character { gap:.6rem; }
body[data-page=rankings] .rank-portrait.unit-thumb { width:48px; min-width:48px; height:60px; }
body[data-page=group_unit] .shared-unit-image { display:block; margin:auto; max-height:290px; width:100%; object-fit:contain; }
.sheet-content .unit-thumb { height:220px; min-height:0; margin-bottom:1rem; }
.sheet-content .unit-thumb img { width:100%; height:100%; object-fit:contain; }
.action-sheet .draw-rewards { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
.action-sheet .draw-rewards .unit-card { display:grid; grid-template-columns:minmax(88px,.65fr) minmax(0,1fr); align-items:start; }
.action-sheet .draw-rewards .unit-thumb { height:180px; margin:0; padding:.5rem; }
.action-sheet .draw-rewards .unit-info { min-width:0; padding:.85rem .65rem; }
.action-sheet .draw-rewards h3 { font-size:.95rem; line-height:1.5; overflow-wrap:anywhere; margin:.5rem 0; }
.action-sheet .draw-rewards p { font-size:.75rem; margin:0; }
.reward-instances { margin-top:.75rem; }
.reward-instances summary { min-height:44px; display:flex; align-items:center; font-size:.8rem; cursor:pointer; }
.reward-instances .pool-candidate-list { font-size:.8rem; }
.reward-instances a { min-height:44px; display:flex; align-items:center; overflow-wrap:anywhere; }

/* M37: choices, price and outcomes stay legible in a portrait viewport. */
.rail-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.pilot-chip { justify-self:end; max-width:100%; }
.pilot-chip>span:last-child { min-width:0; }
.pilot-chip strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.health-warning { display:block; color:#f1c8ad; text-decoration:none; padding:.7rem; margin:.6rem 0; border-left:2px solid #c99775; background:#4b302c55; font-size:.78rem; }
.battle-preparation,.npc-pool-guide { margin:.8rem 0; }
.npc-pool-guide article { margin:.8rem 0; padding:.7rem; border:1px solid var(--ui-line); border-radius:6px; }
.battle-replay { scroll-margin-top:12px; margin:1rem 0; padding:.6rem; border:1px solid #899ab657; border-radius:12px 3px; background:#161f2f; }
.battle-replay .battle-scene { min-height:0; padding:.6rem .4rem; }
.battle-replay .battle-actor { gap:.5rem; }
.battle-replay .battle-actor__frame { height:clamp(120px,25svh,220px); }
.battle-replay .battle-actor__frame img { width:100%; height:100%; max-height:100%; object-fit:contain; }
.battle-replay .battle-actor figcaption { min-height:0; padding:.45rem; }
.battle-replay .battle-actor figcaption :is(strong,span:not(.eyebrow)) { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.battle-replay .battle-resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; margin-top:.3rem; }
.battle-replay .battle-resources meter { width:100%; }
.battle-replay .battle-resources { grid-template-columns:1fr; }
.battle-replay .battle-resources>div { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.15rem .4rem; }
.battle-replay .battle-resources dd { margin:0; justify-self:end; font-size:.68rem; white-space:nowrap; overflow-wrap:normal; }
.battle-replay .battle-resources meter { grid-column:1/-1; margin:0 0 .15rem; }
.battle-replay .preview-controls { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.65rem; margin:.5rem 0 0; }
.battle-replay .preview-controls button { min-height:44px; padding:.5rem; font-size:.75rem; }
.battle-replay .preview-controls>label[for=playback-speed] { display:none; }
.battle-replay .preview-controls select { min-height:44px; width:100%; }
.battle-replay .preview-controls .motion-choice { font-size:.72rem; }
.battle-replay .preview-controls .motion-choice input { width:20px; height:20px; }
.battle-replay #result-status { grid-column:1/-1; font-size:.72rem; line-height:1.5; }
.battle-replay .battle-progress-label { display:block; margin-top:.4rem; font-size:.7rem; }
.battle-replay progress { width:100%; height:5px; }
body[data-page=battle_result] .result-head { margin:.5rem 0 .7rem; }
body[data-page=battle_result] .result-summary { grid-template-columns:1fr; gap:.5rem; }
body[data-page=battle_result] .result-summary:has(>div+div) { grid-template-columns:1fr 1fr; }
body[data-page=battle_result] .result-summary p { margin:.3rem 0 0; font-size:.75rem; }
.reward-caption { color:#e8d6b3; font-size:.75rem; margin:.7rem 0 .2rem; }
.result-rewards dd { font-variant-numeric:tabular-nums; }
.pity-progress { display:grid; gap:.35rem; margin:.7rem 0; border-left:2px solid #b6a386; padding:.7rem; background:#27394c; font-size:.8rem; }
.pity-progress small { color:#b8c6db; font-size:.7rem; }
.draw-banner__info { display:grid; grid-template-columns:minmax(0,1fr); }
.pool-catalog__icon { position:relative; display:grid; place-items:center; flex:none; width:100%; height:auto; aspect-ratio:18/17; min-width:0; overflow:hidden; border-radius:4px; background:#111926; }
.pool-catalog__icon>img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; }
.pool-catalog a { min-width:0; font-size:.95rem; padding:.75rem; overflow-wrap:anywhere; }
.pool-catalog small { color:#b9c9df; font-size:.7rem; }
.pool-chooser .pool-catalog { align-items:stretch; }
@media(min-width:600px) { .pool-chooser .pool-catalog { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.odds-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.75rem; }
.odds-table :is(th,td) { padding:.6rem .25rem; text-align:left; border-bottom:1px solid #8290aa50; }
.odds-table caption { margin:.7rem 0; color:#bac6d8; text-align:left; }
.draw-history { margin:1rem 0; }
.draw-history__row { display:grid; gap:.3rem; padding:.8rem 0; border-bottom:1px solid #8290aa50; text-decoration:none; }
.draw-history__row strong { color:#e5d2b1; font-size:.8rem; }
.action-sheet .draw-rewards .unit-card { border:1px solid #8796af55; border-radius:7px 2px; overflow:hidden; background:linear-gradient(145deg,#344259,#202c42); }
.action-sheet .draw-rewards .unit-card[data-tier=rarity_1],.action-sheet .draw-rewards .unit-card[data-tier=rarity_2] { border-color:#bbadcf; background:radial-gradient(ellipse at top,#8264a047,#202c42 85%); }
.action-sheet .draw-rewards .unit-card[data-tier=rarity_4],.action-sheet .draw-rewards .unit-card[data-tier=rarity_5] { border-color:#ebcd91; background:radial-gradient(ellipse at top,#c8a67365,#202c42 85%); box-shadow:0 0 12px #dfc28724; }
.market-search { display:grid; gap:.5rem; padding:.8rem; background:#25334a; border:1px solid #7e8ba347; border-radius:8px 2px; }
.market-search>div { display:grid; grid-template-columns:1fr 1fr auto; gap:.35rem; }
.market-search :is(input,select,button) { width:100%; min-width:0; min-height:44px; border:1px solid #8292aa75; background:#172131; color:#e5eaf1; padding:.55rem; border-radius:3px; font-size:.75rem; }
.market-search label { font-size:.75rem; color:#bac8dc; }
body[data-page=market] .market-card.panel { display:grid; grid-template-columns:100px minmax(0,1fr); padding:.8rem; gap:.75rem; }
body[data-page=market] .market-art.unit-thumb { height:145px; min-height:0; margin:0; padding:.25rem; background:radial-gradient(ellipse,#64789945,transparent 75%); }
body[data-page=market] .market-art img { width:100%; height:100%; padding:0; object-fit:contain; }
body[data-page=market] .market-info { padding:0; min-width:0; }
body[data-page=market] .market-info h2 { font-size:1rem; margin:.3rem 0; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
body[data-page=market] .market-info .market-price { font-size:1.2rem; margin:.6rem 0; line-height:1.3; }
.market-info small { font-size:.7rem; color:#bac5d8; }
.market-actions { grid-column:1/-1; display:grid; gap:.5rem; }
.market-actions>small { color:#b1c2d9; font-size:.7rem; line-height:1.5; }
.market-actions :is(form,p) { margin:0; }
.market-bid label { display:block; margin-bottom:.35rem; font-size:.75rem; color:#cfdbed; }
.market-bid>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; }
.market-bid input { min-width:0; width:100%; min-height:48px; font-size:.95rem; padding:.5rem; color:#e8edf7; border:1px solid #8999b369; background:#152031; border-radius:3px; }
.market-bid .game-button { min-width:70px; }
.shop-grid .panel h2 { font-size:1rem; line-height:1.6; }
.shop-grid .stat-list { font-size:.75rem; margin:.8rem 0; }
.shop-grid .shop-price { color:#e7d4b1; font-weight:700; }
.member-card__portrait { width:90px; height:110px; object-fit:contain; float:right; margin:0 0 .5rem .5rem; }
.guide-status { display:grid; gap:.5rem; padding:1rem; margin:1rem 0; border:1px solid var(--ui-line); background:#25334a; font-size:.8rem; }
.guide-steps { display:grid; gap:1rem; list-style:none; padding:0; }
.guide-steps>li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:.65rem; border:1px solid var(--ui-line); border-radius:8px 2px; padding:1rem .7rem; background:linear-gradient(130deg,#2d3a50,#192332); }
.guide-step { font-weight:800; color:var(--ui-accent); font-size:1.1rem; }
.guide-steps h2 { margin:0 0 .6rem; font-size:1rem; line-height:1.5; }
.guide-steps p { font-size:.8rem; line-height:1.8; color:#c4cddd; }
.guide-steps .game-button { width:100%; font-size:.75rem; }
.guide-training { display:grid; gap:.5rem; margin:1rem 0; }
.guide-training>div { display:grid; gap:.25rem; padding:.6rem; background:#121c2c; font-size:.75rem; }
.guide-training small { color:#e2bc97; line-height:1.5; }
@media(max-width:360px) { .home-actions { grid-template-columns:1fr; } .home-actions .game-button { white-space:nowrap; font-size:.85rem; } .shop-grid { grid-template-columns:1fr; } .battle-replay .battle-actor figcaption strong { font-size:.7rem; } .battle-replay .battle-actor figcaption>span:not(.eyebrow) { font-size:.6rem; } .market-search>div { grid-template-columns:1fr 1fr; } .market-search button { grid-column:1/-1; } }
@media(prefers-reduced-motion:no-preference) { .action-sheet .draw-rewards .unit-card { animation:reward-arrive .35s ease-out both; animation-delay:calc(var(--reward-index,0)*40ms); } @keyframes reward-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }
.pool-season-filter{display:flex;align-items:center;gap:12px;margin:12px 0}.pool-season-filter select{flex:1;min-width:0;padding:10px;background:#202635;color:inherit;border:1px solid #667085;border-radius:8px}.pool-catalog a[hidden]{display:none}.pool-season{color:#aab3c2}