:root{--ink:#f8f3ff;--muted:#b8abc9;--gold:#f4d795;--pink:#edb9d8;--line:#ffffff20;--bg:#171329;--panel:#211b39;--lav:#b8a6f0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -15%,#453562 0,#211b39 42%,var(--bg) 77%);color:var(--ink);font-family:'DM Sans','Noto Serif JP',sans-serif;min-height:100vh}.app-shell{max-width:1180px;margin:auto;padding:0 28px}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.2em}.brand-mark{color:var(--gold);font-size:24px}.topbar nav{display:flex;gap:10px}.topbar button,.home-links button,.battle-head button{background:transparent;border:0;color:var(--muted);padding:10px 14px;cursor:pointer}.topbar button:hover,.home-links button:hover{color:var(--gold)}button{font:inherit;color:inherit;cursor:pointer}.hero{text-align:center;min-height:620px;padding:92px 20px 40px;position:relative;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--gold);font-weight:700}.hero h1{font-family:'Noto Serif JP',serif;font-size:clamp(35px,5vw,58px);line-height:1.5;font-weight:500;margin:22px 0 10px}.hero h1 em{font-family:'DM Sans',sans-serif;color:var(--gold);font-style:normal;letter-spacing:.26em;font-size:.83em}.hero>p,.panel>p{color:var(--muted)}.primary{border:0;background:linear-gradient(110deg,#d9afd7,#efd59d);color:#281d3b;font-weight:700;border-radius:30px;padding:15px 30px;min-width:205px;margin:26px 0;box-shadow:0 8px 30px #c88fca30}.primary span{padding-left:16px}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.hero-stats{display:flex;gap:32px;justify-content:center;color:var(--muted);font-size:13px;margin-top:32px}.orbit{position:absolute;color:#f3d594;font-size:54px;opacity:.45}.orbit-a{left:17%;top:33%}.orbit-b{right:18%;top:53%;font-size:38px}.home-links{display:flex;justify-content:center;gap:22px;border-top:1px solid var(--line);padding:22px}.home-links button{font-size:14px}.panel{background:#221d38cc;border:1px solid var(--line);border-radius:22px;padding:38px;margin:45px auto;text-align:center;box-shadow:0 20px 70px #09071230}.panel.compact{max-width:580px}.panel.wide{max-width:1000px}.panel h2{font-family:'Noto Serif JP',serif;font-weight:500;font-size:30px;margin:12px 0}.panel form{display:flex;gap:10px;justify-content:center;margin:28px auto}.panel input{background:#171329;border:1px solid var(--line);padding:14px 17px;border-radius:10px;color:var(--ink);font-size:16px;min-width:230px}.panel form .primary{margin:0}.back{display:block;background:none;border:0;color:var(--muted);margin-bottom:22px}.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:30px 0}.type-card{border:1px solid var(--line);border-radius:16px;background:#ffffff06;padding:22px 16px;text-align:left}.type-card.selected{border-color:var(--gold);background:#f4d7950d}.type-icon{font-size:27px;color:var(--gold)}.type-card h3{margin:12px 0 6px}.type-card p{font-size:13px;min-height:42px;color:var(--muted)}.type-card div{font-size:12px;color:#eadbb4}.battle-head{display:flex;align-items:center;justify-content:center;gap:25px;padding:18px}.battle-head>span{color:var(--muted)}.battle-head>b{color:var(--gold)}.arena{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:20px;background:linear-gradient(120deg,#302548,#211b39);border:1px solid var(--line);border-radius:20px;padding:24px}.fighter{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:center}.fighter.cpu{grid-template-columns:1fr 74px}.fighter.cpu .avatar{grid-column:2;grid-row:1}.fighter.cpu .fighter-info{grid-column:1;grid-row:1}.fighter.cpu .pet{grid-column:1/3}.avatar{width:70px;height:86px;border-radius:45% 45% 35% 35%;display:grid;place-items:center;font-size:36px;color:#f5d58e;background:linear-gradient(145deg,#564472,#a37eaa);box-shadow:inset 0 0 0 2px #ffffff24}.avatar.attack{background:linear-gradient(145deg,#744c76,#d888ae)}.avatar.mp{background:linear-gradient(145deg,#435076,#8b9dc4)}.fighter-name{font-family:'Noto Serif JP';font-weight:600;margin-bottom:7px}.fighter-name small{font:10px 'DM Sans';color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:2px 7px}.meter{margin:6px 0}.meter>div{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.meter b{font-size:11px;color:var(--ink)}.meter small{font-weight:400;color:var(--muted)}.meter i{display:block;height:5px;background:#ffffff16;border-radius:5px;overflow:hidden;margin-top:3px}.meter u{display:block;height:100%;background:linear-gradient(90deg,#e987a9,#f1c98d);border-radius:5px}.meter.mp u{background:#9c8be2}.meter.int u{background:#80c9c4}.pet{grid-column:1/3;color:var(--gold);font-size:11px;min-height:15px}.vs{text-align:center;color:var(--gold);font-size:27px}.vs small{display:block;font-size:8px;letter-spacing:.2em;color:var(--muted)}.battle-controls{display:grid;grid-template-columns:1fr 250px;gap:24px;margin:24px 0 45px}.battle-controls h3{font-size:15px}.battle-controls h3 small{font-weight:400;color:var(--muted);margin-left:8px}.hand{display:grid;grid-template-columns:repeat(4,minmax(115px,1fr));gap:9px}.card{min-height:140px;text-align:left;border:1px solid #b6a4d94a;border-radius:12px;padding:11px;background:linear-gradient(145deg,#302746,#211c37);display:flex;flex-direction:column;position:relative}.card.element{border-color:#e7bd8755}.card:hover:not(:disabled){transform:translateY(-4px);border-color:var(--gold)}.card:disabled{opacity:.43;cursor:not-allowed}.card-attr{font-size:10px;color:var(--gold)}.card strong{font-family:'Noto Serif JP';font-size:13px;margin:10px 0 5px}.card small{font-size:10px;color:var(--muted);line-height:1.5}.cost{margin-top:auto;padding-top:8px;font-size:10px;color:#f1d49e}.battle-controls aside{border-left:1px solid var(--line);padding-left:18px}.secondary{background:#ffffff0b;border:1px solid var(--line);border-radius:9px;padding:11px 14px;width:100%;color:var(--ink)}button:disabled{opacity:.45;cursor:not-allowed}.summon{margin:24px 0 18px;display:flex;flex-wrap:wrap;gap:6px;font-size:11px}.summon b{width:100%;color:var(--muted);margin-bottom:4px}.summon button{font-size:11px;background:#ffffff0c;border:1px solid var(--line);padding:7px;border-radius:8px}.log{max-height:190px;overflow:auto;border-top:1px solid var(--line);padding-top:10px;font-size:11px;color:var(--muted)}.log p{margin:8px 0}.result-star{font-size:60px;color:var(--gold);margin:18px}.result-stats{color:var(--muted);margin:20px}.collection{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px;text-align:left}.mini-card{background:#ffffff08;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;min-height:118px}.mini-card span,.mini-card i{font-size:10px;color:var(--gold);font-style:normal}.mini-card b{font-family:'Noto Serif JP';margin:7px 0}.mini-card small{color:var(--muted);line-height:1.5}.filter{display:flex;justify-content:center;align-items:center;gap:10px;color:var(--muted)}select{background:#171329;color:var(--ink);border:1px solid var(--line);padding:9px;border-radius:8px}.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.record-grid div{padding:20px;background:#ffffff08;border:1px solid var(--line);border-radius:12px}.record-grid b,.record-grid small{display:block}.record-grid b{font-size:27px;color:var(--gold)}.record-grid small{font-size:11px;color:var(--muted);margin-top:5px}.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;text-align:left;margin-top:25px}.rules-grid article{background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:18px}.rules-grid h3{font-family:'Noto Serif JP';color:var(--gold);font-size:15px}.rules-grid p{font-size:13px;line-height:1.8;color:var(--muted)}footer{text-align:center;padding:20px 0;color:var(--muted);font-size:11px}.ad-slot{border:1px dashed #ffffff25;border-radius:9px;max-width:728px;height:70px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:.16em;color:#796d8d}.ad-slot small{font-size:10px;letter-spacing:0}#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:var(--gold)}
@media(max-width:800px){.battle-controls{grid-template-columns:1fr}.battle-controls aside{border-left:0;padding:12px 0}.arena{gap:8px;padding:14px}.hand{grid-template-columns:repeat(3,1fr)}.collection{grid-template-columns:repeat(3,1fr)}}@media(max-width:580px){.app-shell{padding:0 13px}.topbar{height:62px}.topbar nav{gap:0}.topbar button{padding:8px;font-size:11px}.hero{min-height:540px;padding-top:83px}.hero-stats{gap:12px;font-size:10px}.orbit-a{left:5%}.orbit-b{right:6%}.home-links{gap:0;justify-content:space-between}.home-links button{padding:8px 3px;font-size:11px}.panel{padding:25px 16px;margin:24px auto}.type-grid{grid-template-columns:1fr}.type-card{padding:14px}.type-card p{min-height:0}.fighter{grid-template-columns:47px 1fr;gap:8px}.fighter.cpu{grid-template-columns:1fr 47px}.avatar{width:46px;height:59px;font-size:25px}.fighter-name{font-size:12px}.meter>div{font-size:9px}.arena{grid-template-columns:1fr 30px 1fr}.vs{font-size:20px}.fighter-info{min-width:0}.hand{grid-template-columns:repeat(2,minmax(0,1fr))}.card{min-height:135px}.battle-controls h3 small{display:block;margin:3px 0}.collection{grid-template-columns:repeat(2,1fr)}.rules-grid{grid-template-columns:1fr}.battle-head{gap:12px;font-size:12px}.record-grid{grid-template-columns:repeat(2,1fr)}.panel form{flex-direction:column}.panel input{min-width:0;width:100%}}
.matchup{display:flex;justify-content:center;align-items:center;gap:24px;margin:24px 0;color:var(--muted)}.matchup b{color:var(--gold);font-size:13px}.cpu-heading{margin-bottom:10px;color:var(--muted);font-size:13px}.cpu-options{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.cpu-option{border:1px solid var(--line);border-radius:9px;background:#ffffff08;padding:10px 15px;color:var(--ink);font-size:12px}.cpu-option.selected{border-color:var(--gold);color:var(--gold);background:#f4d7950d}
.art-link{max-width:300px;margin:0 auto 18px}.type-card-art{width:100%;height:140px;border-radius:10px;background:linear-gradient(145deg,#55436f,#2c2444);display:grid;place-items:center;overflow:hidden}.type-card-art .portrait-image{width:100%;height:100%;object-fit:cover}.type-card-art .type-icon{font-size:48px}.avatar{overflow:hidden}.avatar .portrait-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.illustration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}.illustration-slot{display:flex;flex-direction:column;align-items:center;padding:16px;background:#ffffff08;border:1px solid var(--line);border-radius:14px}.illustration-preview{width:100%;height:270px;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse,#58466f,#211b39);display:grid;place-items:center}.illustration-preview img{width:100%;height:100%;object-fit:contain}.empty-art{font-size:56px;color:var(--gold);opacity:.65}.illustration-slot h3{font-family:'Noto Serif JP';font-size:15px}.upload-button{display:inline-block;border-radius:20px;padding:10px 18px;background:linear-gradient(110deg,#d9afd7,#efd59d);color:#281d3b;font-weight:700;font-size:12px;cursor:pointer}.upload-button input{display:none}.remove-art{border:0;background:none;color:var(--muted);font-size:11px;padding:9px;cursor:pointer}.illustration-slot small{margin-top:8px;color:var(--muted);font-size:10px;text-align:center}
@media(max-width:650px){.illustration-grid{grid-template-columns:1fr}.illustration-preview{height:330px}.type-card-art{height:210px}}
.card{min-height:232px;padding:9px;gap:2px;border-color:color-mix(in srgb,var(--art-color,#dfc48d) 45%,transparent);transition:transform .16s,border-color .16s,box-shadow .16s}.card:hover:not(:disabled){box-shadow:0 9px 22px #08051080}.card-attr{position:absolute;z-index:1;top:7px;left:8px;padding:3px 6px;border-radius:8px;background:#171329c9;color:var(--art-color,#f4d795);font-size:9px}.card-art{height:82px;min-height:82px;width:100%;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--art-color,#e7c991) 46%,#302645),#211a35 72%);border:1px solid color-mix(in srgb,var(--art-color,#e7c991) 45%,transparent)}.card-art:before,.card-art:after{content:"";position:absolute;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--art-color,#e7c991) 50%,transparent);transform:rotate(45deg)}.card-art:after{width:37px;height:37px;border-radius:50%;transform:none}.card-art>svg{width:68px;height:68px;z-index:1;overflow:visible;color:var(--art-color,#f4d795);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--art-color,#f4d795) 45%,transparent))}.card-art>i{position:absolute;right:7px;bottom:4px;font-size:8px;color:var(--art-color,#f4d795);font-style:normal}.card strong{font-size:12px;margin:3px 0}.card-numbers{display:flex;gap:5px;flex-wrap:wrap}.card-numbers span{font-size:10px;font-weight:700;padding:3px 5px;border-radius:5px;background:#fff1;color:#f8e9c5}.card-numbers .number-attack{color:#ffb7a8;background:#c64d4230}.card-numbers .number-defense{color:#aee5f4;background:#3b85a530}.card-numbers .number-effect{color:#e2caff;background:#9973c42b}.card small{font-size:9px;line-height:1.35}.card .cost{padding-top:2px;font-size:9px;color:var(--gold)}.mini-card{min-height:205px;padding:10px;gap:4px}.mini-card .card-art{height:88px;min-height:88px}.mini-card .card-art>svg{width:72px;height:72px}.mini-card>b{font-family:'Noto Serif JP';font-size:13px;margin:2px 0}.mini-card>small{font-size:10px;line-height:1.45}.mini-card>i{margin-top:auto;font-size:9px}
.action-board{margin:18px 0 22px;padding:17px 20px;background:linear-gradient(110deg,#322644,#241e3d);border:1px solid #f1d69b50;border-radius:16px;box-shadow:inset 0 0 28px #e8c78008}.action-board.waiting{min-height:110px;display:grid;place-content:center;text-align:center;border-style:dashed;border-color:var(--line);box-shadow:none}.action-board-heading{font-family:'Noto Serif JP';font-size:15px;color:var(--gold);padding-bottom:12px}.action-board-heading span{font:11px 'DM Sans';color:var(--muted);margin-left:10px}.waiting .action-board-heading{padding:0}.waiting p{color:var(--muted);font-size:12px;margin:8px 0 0}.action-reveal{display:grid;grid-template-columns:185px 50px minmax(0,1fr);gap:15px;align-items:center}.revealed-card{padding:10px 12px;background:#17132980;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:5px}.revealed-card>small{font-size:10px;color:var(--muted)}.revealed-card>.card-art{height:86px;min-height:86px}.revealed-card>.card-art>svg{width:75px;height:75px}.revealed-card>b{font-family:'Noto Serif JP';font-size:13px}.action-arrow{font-size:28px;color:var(--gold);text-align:center}.action-outcome{align-self:stretch;padding:12px 16px;background:#ffffff08;border:1px solid var(--line);border-radius:12px}.action-outcome>b{display:block;color:#e4d4ff;margin-bottom:8px;font-size:12px}.action-outcome p{margin:6px 0;color:var(--ink);font-size:12px;line-height:1.55}.action-outcome p:before{content:'✦ ';color:var(--gold)}
@media(max-width:580px){.action-board{padding:13px;margin:13px 0 17px}.action-reveal{grid-template-columns:120px 24px minmax(0,1fr);gap:7px}.revealed-card{padding:8px}.revealed-card>.card-art{height:65px;min-height:65px}.revealed-card>.card-art>svg{width:58px;height:58px}.revealed-card>b{font-size:11px}.revealed-card .card-numbers span{font-size:9px}.action-arrow{font-size:20px}.action-outcome{padding:9px}.action-outcome p{font-size:10px}.action-board-heading{font-size:13px}}

.defense-hint{margin:0 0 12px;padding:10px 13px;border:1px solid #ffffff20;border-radius:9px;background:#ffffff08;color:var(--muted);font-size:12px}.defense-hint.active{border-color:#83d6bd88;background:#286b5940;color:#c4ffe9}.reaction-card{border-style:dashed}.reaction-card:disabled{opacity:.32;filter:saturate(.55)}.reaction-label{display:block;margin:3px 0;padding:4px 5px;border-radius:5px;background:#b38f302b;color:#f4d795;font-size:9px;font-weight:700;text-align:center}.defense-hint.active~.hand .reaction-label{background:#55b89335;color:#c4ffe9}.response-board .enemy-choice{border-color:#ed918a99;box-shadow:0 0 22px #ef736514}.response-board .action-board-heading{color:#ffd58f}

/* Battle UI: clear card states, compact field, stable controls */
.battle-layout{max-width:1120px;margin:0 auto 32px}.battle-head{position:sticky;top:0;z-index:8;background:#171329ed;backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:0 0 14px 14px;margin-bottom:12px}.battle-arena{min-height:158px;padding:14px 22px;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr)}.battle-arena .fighter{min-width:0}.battle-arena .avatar{width:58px;height:70px}.battle-arena .meter{margin:4px 0}.battle-arena .meter i{height:7px}.battle-arena .meter>div,.battle-arena .meter b{font-size:11px}.battle-arena .pet{font-size:10px}.battlefield-panel{margin:12px 0;padding:12px 16px;background:linear-gradient(115deg,#29213e,#211b39);border:1px solid #ffffff20;border-radius:15px}.battlefield-heading{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:13px;font-weight:700}.battlefield-heading span{font-size:10px;color:var(--muted);font-weight:400}.battlefield-flow,.last-action-flow{display:grid;grid-template-columns:145px 45px minmax(0,1fr);align-items:center;gap:10px;margin-top:9px}.field-card{display:grid;grid-template-columns:48px 1fr;column-gap:8px;align-items:center;min-width:0;padding:7px 9px;background:#ffffff08;border:1px solid #ffffff1c;border-radius:10px}.field-card>small{grid-column:1/3;color:var(--muted);font-size:9px}.field-card .card-art{grid-row:2/4;width:46px;height:46px;min-height:46px}.field-card .card-art>svg{width:39px;height:39px}.field-card>b{font-size:11px;line-height:1.25}.field-card .card-numbers{grid-column:2}.field-card .card-numbers span{font-size:9px}.field-arrow{text-align:center;color:var(--gold);font-size:24px;font-weight:700}.field-player-cards{display:flex;gap:7px;min-width:0;overflow-x:auto}.field-player-cards .field-card{flex:1 0 135px}.selected-field-card{border-color:#83d6bd88;background:#34735e24}.field-prompt,.field-result{font-size:11px;color:var(--muted);line-height:1.5}.field-result{padding:8px 12px;background:#ffffff08;border-radius:9px}.field-result p{margin:4px 0}.damage-readout{display:inline-block;color:#ffaaa3;font-size:16px;margin-top:3px}.field-hint{font-size:10px;color:var(--muted);margin:8px 0 0}.field-idle{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:12px}.field-idle span{color:var(--muted);font-size:10px}.hand-panel{margin:12px 0;padding:15px;background:#211b39dd;border:1px solid var(--line);border-radius:16px}.hand-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.hand-heading h2{font-size:16px;margin:0}.hand-heading h2 small,.hand-heading>span{font-size:10px;color:var(--muted);font-weight:400}.hand{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.hand .card{min-width:0;min-height:0;height:168px;padding:8px;gap:3px;border:1px solid #b9a7dc55;background:linear-gradient(150deg,#342a4e,#211b39);touch-action:manipulation}.hand .card-art{height:48px;min-height:48px;border-radius:7px}.hand .card-art>svg{width:44px;height:44px}.hand .card strong{font-size:11px;line-height:1.25;margin:2px 0}.hand .card-attr{font-size:10px;font-weight:700}.hand .card-numbers{min-height:18px}.hand .card-numbers span{font-size:9px;padding:2px 4px}.hand .cost{font-size:10px;padding-top:1px}.hand .card-available{filter:none;opacity:1}.hand .card-unavailable,.hand .card:disabled{filter:grayscale(.82) brightness(.64);opacity:.67;border-color:#77708055;background:#282532;cursor:not-allowed}.hand .card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 18px #08051055;border-color:var(--gold)}.hand .card.is-selected{height:172px;transform:translateY(-3px) scale(1.015);z-index:2;outline:2px solid #8ce5c5;border-color:#a6f3d4;background:linear-gradient(150deg,#315448,#25283d);box-shadow:0 0 18px #76dfbb55}.card-state{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 5px;border-radius:5px;background:#17131ed9;color:#ffc1bb;font-size:9px;font-weight:700}.hand-bottom{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;margin-top:12px;align-items:stretch}.selected-detail{min-height:112px;padding:11px 13px;border:1px solid #ffffff1c;border-radius:11px;background:#ffffff06}.selected-detail h3{font-size:11px;color:var(--gold);margin:0 0 7px}.selected-detail article{display:flex;flex-direction:column;gap:4px}.selected-detail article b{font-size:13px}.selected-detail article span{font-size:11px;line-height:1.55;color:var(--ink)}.selected-detail article small,.detail-empty{font-size:10px;color:var(--muted);margin:0}.battle-action-bar{position:sticky;bottom:8px;z-index:6;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:#171329ed;border:1px solid #ffffff24;border-radius:12px;box-shadow:0 8px 24px #09071266;align-content:start}.battle-action-bar .selection-commit{grid-column:1/3;width:100%;min-width:0;margin:0;padding:12px 10px;border-radius:9px}.battle-action-bar .secondary{min-width:0;padding:9px 7px;font-size:11px}.battle-action-bar .summon{grid-column:1/3;margin:4px 0 0}.battle-action-bar .summon button{flex:1}.battle-log{margin:12px 0 28px;padding:9px 13px;background:#ffffff06;border:1px solid var(--line);border-radius:11px}.battle-log summary{cursor:pointer;color:var(--muted);font-size:11px}.battle-log summary span{margin-left:9px;font-size:10px}.battle-log>div{max-height:110px;overflow:auto}.battle-log p{margin:7px 0;color:#e0d7eb;font-size:11px}.battle-arena.damage-impact{animation:damageShake .42s ease}.battle-arena .damage-pop{top:8%;font-size:24px}
@media(max-width:900px){.hand{grid-template-columns:repeat(4,minmax(0,1fr))}.hand-bottom{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:650px){.battle-layout{margin-top:0}.battle-head{justify-content:space-between;gap:6px;padding:8px 10px;font-size:11px}.battle-head button{padding:7px}.battle-arena{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:5px;padding:10px 8px;min-height:130px}.battle-arena .fighter{grid-template-columns:42px minmax(0,1fr);gap:6px}.battle-arena .fighter.cpu{grid-template-columns:minmax(0,1fr) 42px}.battle-arena .avatar{width:40px;height:52px}.battle-arena .fighter-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-arena .meter>div,.battle-arena .meter b{font-size:9px}.battle-arena .meter i{height:5px}.battle-arena .pet{font-size:8px}.battle-arena .vs{font-size:15px}.battle-arena .vs small{font-size:7px}.battlefield-panel{padding:10px;margin:8px 0}.battlefield-flow,.last-action-flow{grid-template-columns:110px 25px minmax(0,1fr);gap:5px}.field-card{grid-template-columns:36px minmax(0,1fr);padding:6px;column-gap:5px}.field-card .card-art{width:34px;height:34px;min-height:34px}.field-card .card-art>svg{width:29px;height:29px}.field-card>b{font-size:9px}.field-card .card-numbers span{font-size:8px}.field-arrow{font-size:17px}.field-player-cards .field-card{flex-basis:120px}.field-prompt,.field-result{font-size:9px}.field-hint{font-size:9px}.hand-panel{padding:10px 8px}.hand-heading{align-items:flex-start;gap:4px}.hand-heading h2{font-size:14px}.hand-heading>span{max-width:60%;text-align:right;line-height:1.3}.hand{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hand .card{height:157px;padding:8px}.hand .card.is-selected{height:161px}.hand .card-art{height:45px;min-height:45px}.hand .card-art>svg{width:41px;height:41px}.hand .card strong{font-size:11px}.hand .card-numbers span{font-size:9px}.card-state{font-size:9px}.hand-bottom{grid-template-columns:1fr;gap:7px}.selected-detail{min-height:88px;padding:9px}.battle-action-bar{position:sticky;bottom:4px;grid-template-columns:1fr 1fr;gap:6px;padding:7px}.battle-action-bar .selection-commit{grid-column:1/3}.battle-action-bar .secondary{min-height:40px}.battle-action-bar .summon{gap:5px}.battle-action-bar .summon button{font-size:10px}.field-idle{gap:8px}.field-idle span{text-align:right}.battle-log{margin-bottom:16px}}
@media(hover:none){.hand .card:hover:not(:disabled){transform:none;box-shadow:none}.hand .card:active:not(:disabled){transform:scale(.98)}}

.hand .card:focus-visible{outline:3px solid #fff0a5;outline-offset:2px}.hand .card-attr{letter-spacing:.03em}.hand .card-state{white-space:normal;line-height:1.15;text-align:center}.battle-action-bar button:focus-visible{outline:2px solid #fff0a5;outline-offset:2px}@media(prefers-reduced-motion:reduce){.hand .card,.arena.damage-impact,.damage-pop{animation:none!important;transition:none!important}}

.hand .card-unavailable,.hand .card:disabled{filter:grayscale(.72);opacity:.72}.hand .card-unavailable .card-state,.hand .card:disabled .card-state{background:#5d2d3b;color:#ffe0dc}.hand .card-unavailable .cost,.hand .card:disabled .cost{color:#d4c7d9}

.fighter-status{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}.status-chip{display:inline-flex;padding:2px 5px;border-radius:5px;background:#8c72bd30;border:1px solid #bda2ee55;color:#e5d5ff;font-size:9px;line-height:1.2}.defense-chip{background:#3c9d7950;border-color:#8ce5c588;color:#c5ffe6}.hand .card[title]{cursor:help}@media(max-width:650px){.status-chip{font-size:8px;padding:2px 4px}}

/* Make card combat values readable at a glance */
.hand .card-numbers{gap:5px;min-height:24px}.hand .card-numbers span{font-size:13px;padding:4px 7px;line-height:1.15}.hand .card-numbers .number-attack,.hand .card-numbers .number-defense{font-size:15px;font-weight:800}.field-card .card-numbers{gap:3px}.field-card .card-numbers span{font-size:11px;padding:3px 5px;line-height:1.15}.field-card .card-numbers .number-attack,.field-card .card-numbers .number-defense{font-size:13px;font-weight:800}.selected-detail .card-numbers span{font-size:13px}@media(max-width:650px){.hand .card-numbers{min-height:23px;gap:4px}.hand .card-numbers span{font-size:12px;padding:4px 6px}.hand .card-numbers .number-attack,.hand .card-numbers .number-defense{font-size:14px}.field-card .card-numbers span{font-size:10px}.field-card .card-numbers .number-attack,.field-card .card-numbers .number-defense{font-size:12px}}

/* Compact battle status header and support a full 20-card hand */
.battle-arena{min-height:0;padding:8px 14px;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:10px}.battle-arena .fighter{grid-template-columns:44px minmax(0,1fr);gap:7px}.battle-arena .fighter.cpu{grid-template-columns:minmax(0,1fr) 44px}.battle-arena .avatar{width:42px;height:52px;font-size:24px}.battle-arena .meter{margin:2px 0}.battle-arena .meter i{height:5px;margin-top:2px}.battle-arena .meter>div,.battle-arena .meter b{font-size:10px}.battle-arena .pet{min-height:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.2}.battle-arena .fighter-status{margin-top:2px}.battle-layout .hand{grid-auto-rows:168px}.battle-layout .hand .card{height:168px}.battle-layout .hand .card.is-selected{height:172px}@media(max-width:650px){.battle-arena{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:4px;padding:7px 6px}.battle-arena .fighter{grid-template-columns:34px minmax(0,1fr);gap:4px}.battle-arena .fighter.cpu{grid-template-columns:minmax(0,1fr) 34px}.battle-arena .avatar{width:32px;height:42px;font-size:20px}.battle-arena .meter>div,.battle-arena .meter b{font-size:8px}.battle-arena .meter i{height:4px}.battle-arena .pet{font-size:7px}.battle-layout .hand{grid-auto-rows:157px}.battle-layout .hand .card{height:157px}.battle-layout .hand .card.is-selected{height:161px}}
.battle-arena .meter.hp-number{margin:1px 0}.battle-arena .meter.hp-number>div{justify-content:space-between}.battle-arena .meter.hp-number b{font-size:14px;color:var(--ink)}@media(max-width:650px){.battle-arena .meter.hp-number b{font-size:12px}}
.battle-arena .fighter-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:4px}.battle-arena .fighter-number{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:3px 2px;border-radius:6px;background:#ffffff0a;line-height:1.1}.battle-arena .fighter-number span{font-size:8px;color:var(--muted)}.battle-arena .fighter-number b{font-size:12px;color:var(--ink)}.battle-arena .fighter-number.hp b{color:#ffc4c1}.battle-arena .fighter-number.mp b{color:#bde8ff}.battle-arena .fighter-number.int b{color:#e4d1ff}@media(max-width:650px){.battle-arena .fighter-stats{gap:2px;margin-top:3px}.battle-arena .fighter-number{padding:2px 1px}.battle-arena .fighter-number span{font-size:7px}.battle-arena .fighter-number b{font-size:10px}}
.battlefield-panel{min-height:190px;padding:18px 22px;margin:16px 0;background:linear-gradient(115deg,#302548,#211b39);box-shadow:inset 0 0 34px #e8c7800b}.battlefield-heading{font-size:15px}.battlefield-heading span{font-size:11px}.battlefield-flow,.last-action-flow{grid-template-columns:190px 58px minmax(0,1fr);gap:14px;margin-top:15px}.field-card{grid-template-columns:66px minmax(0,1fr);column-gap:11px;padding:11px 13px;border-radius:13px}.field-card>small{font-size:10px}.field-card .card-art{width:64px;height:64px;min-height:64px}.field-card .card-art>svg{width:54px;height:54px}.field-card>b{font-size:13px}.field-card .card-numbers span{font-size:12px;padding:4px 6px}.field-arrow{font-size:32px}.field-player-cards{gap:10px}.field-player-cards .field-card{flex-basis:165px}.field-prompt,.field-result{font-size:13px;line-height:1.65}.field-result{padding:12px 16px}.field-result p{margin:7px 0}.field-hint{font-size:11px;margin-top:11px}.field-idle{min-height:130px;font-size:14px}.field-idle span{font-size:12px}@media(max-width:650px){.battlefield-panel{min-height:155px;padding:13px 11px;margin:10px 0}.battlefield-heading{font-size:13px}.battlefield-heading span{font-size:9px}.battlefield-flow,.last-action-flow{grid-template-columns:112px 28px minmax(0,1fr);gap:6px;margin-top:10px}.field-card{grid-template-columns:42px minmax(0,1fr);column-gap:6px;padding:7px;border-radius:10px}.field-card>small{font-size:8px}.field-card .card-art{width:40px;height:40px;min-height:40px}.field-card .card-art>svg{width:34px;height:34px}.field-card>b{font-size:10px}.field-card .card-numbers span{font-size:9px;padding:3px 4px}.field-arrow{font-size:20px}.field-player-cards{gap:6px}.field-player-cards .field-card{flex-basis:128px}.field-prompt,.field-result{font-size:10px;line-height:1.45}.field-result{padding:8px}.field-result p{margin:4px 0}.field-hint{font-size:9px;margin-top:8px}.field-idle{min-height:95px;font-size:12px}.field-idle span{font-size:10px}}
.battle-arena.attack-impact .magic-lane{animation:magicPulse .48s ease}.battle-arena.heal-impact{box-shadow:0 0 30px #7be0a944,inset 0 0 36px #63d9a11a}.heal-pop{left:64%;color:#baffd4;text-shadow:0 2px 14px #41d68c;animation:healFloat .9s ease forwards}@keyframes magicPulse{50%{transform:scale(1.7);filter:drop-shadow(0 0 12px #f4d795)}}@keyframes healFloat{to{opacity:0;transform:translate(-50%,-60px) scale(1.2)}}@media(prefers-reduced-motion:reduce){.battle-arena.attack-impact .magic-lane,.battle-arena.damage-impact,.battle-arena.heal-impact,.heal-pop{animation:none!important}}

/* Turn ownership and battlefield priority */
.turn-indicator{padding:6px 13px;border-radius:999px;font-size:13px;letter-spacing:.02em}.turn-indicator.player-turn{color:#baffdf;background:#286b5940;border:1px solid #83d6bd99;box-shadow:0 0 14px #66d6ad22}.turn-indicator.cpu-turn{color:#ffd2c9;background:#813c454d;border:1px solid #ed918a99;box-shadow:0 0 14px #e6756922}.fighter-name{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.turn-state{font-style:normal;font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;background:#ffffff10;color:#aaa1b9}.turn-state.active{background:#33775f;color:#d4ffeb;box-shadow:0 0 10px #68d6a733}.cpu .turn-state.active{background:#843e48;color:#ffe1dc;box-shadow:0 0 10px #df746333}.turn-idle{opacity:.8}.turn-active .fighter-info{position:relative}.turn-active .fighter-name{color:#fff2c8}.battlefield-panel{min-height:260px;padding:20px 24px;margin:16px 0;background:linear-gradient(115deg,#302548,#211b39);box-shadow:inset 0 0 38px #e8c78012}.battlefield-flow,.last-action-flow{grid-template-columns:200px 62px minmax(0,1fr);gap:16px;margin-top:18px}.field-card{grid-template-columns:72px minmax(0,1fr);column-gap:12px;padding:12px 14px}.field-card .card-art{width:70px;height:70px;min-height:70px}.field-card .card-art>svg{width:60px;height:60px}.field-card>b{font-size:14px}.field-idle{min-height:155px}.field-no-selection{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;border-color:#d5bbff88;background:radial-gradient(ellipse at 50% 45%,#5e477a66,#211b39 72%);box-shadow:inset 0 0 36px #d7b5ff16}.field-no-selection>b{font-family:'Noto Serif JP';font-size:25px;color:#f0dcff;text-shadow:0 0 18px #b88aff77}.field-no-selection>span{font-size:13px;color:#d4c9e3}.battle-head .turn-indicator{min-width:245px;text-align:center}
@media(max-width:650px){.turn-indicator{padding:5px 8px;font-size:10px}.battle-head .turn-indicator{min-width:0;flex:1}.turn-state{font-size:8px;padding:2px 5px}.battlefield-panel{min-height:210px;padding:15px 12px;margin:12px 0}.battlefield-flow,.last-action-flow{grid-template-columns:115px 28px minmax(0,1fr);gap:6px;margin-top:12px}.field-card{grid-template-columns:44px minmax(0,1fr);column-gap:6px;padding:7px}.field-card .card-art{width:42px;height:42px;min-height:42px}.field-card .card-art>svg{width:36px;height:36px}.field-card>b{font-size:10px}.field-idle{min-height:115px}.field-no-selection{min-height:145px}.field-no-selection>b{font-size:21px}.field-no-selection>span{font-size:11px}}
.battlefield-panel{position:relative;overflow:hidden;min-height:clamp(340px,48vh,620px);display:flex;flex-direction:column;justify-content:center}.battlefield-flow,.last-action-flow{align-items:center}.field-empty-choice{min-height:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-color:#d5bbff88;background:radial-gradient(ellipse at 50% 45%,#5e477a66,#211b39 72%)}.field-empty-choice>small{font-size:12px;color:var(--muted)}.field-empty-choice>b{font-family:'Noto Serif JP';font-size:25px;color:#f0dcff;margin-top:8px;text-shadow:0 0 18px #b88aff77}.field-empty-response{align-items:stretch;flex-wrap:wrap}.field-empty-response>.field-prompt{min-height:100px;display:grid;place-content:center;text-align:center;border:1px dashed #ffffff30;border-radius:12px;background:#ffffff06}.field-empty-response .field-result{flex-basis:100%}
@media(max-width:650px){.battlefield-panel{min-height:clamp(260px,43vh,440px);padding:15px 12px}.field-empty-choice{min-height:100px}.field-empty-choice>small{font-size:9px}.field-empty-choice>b{font-size:19px}.field-empty-response>.field-prompt{min-height:84px}}
.field-selection-controls{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:center;margin-top:auto;padding-top:16px}.field-selected-details{min-height:70px;padding:10px 13px;border:1px solid #ffffff25;border-radius:11px;background:#ffffff08}.field-detail-card{display:flex;flex-direction:column;gap:4px}.field-detail-card b{font-size:14px;color:#fff2c8}.field-detail-card span{font-size:12px;line-height:1.5}.field-detail-card small,.field-detail-empty{font-size:11px;color:var(--muted);margin:0}.field-detail-empty{padding:14px 4px}.field-selection-controls .selection-commit{width:100%;min-width:0;margin:0;padding:15px 12px;font-size:15px}.field-selected-details .detail-reason{font-size:11px}.battle-arena .fighter-number span{font-size:10px}.battle-arena .fighter-number b{font-size:16px}.battle-arena .fighter-number.hp b{font-size:22px}.battle-arena .fighter-number.mp b,.battle-arena .fighter-number.int b{font-size:17px}
@media(max-width:650px){.field-selection-controls{grid-template-columns:1fr;gap:8px;padding-top:12px}.field-selected-details{min-height:60px;padding:8px 10px}.field-detail-card b{font-size:12px}.field-detail-card span{font-size:11px}.field-detail-card small,.field-detail-empty{font-size:10px}.field-selection-controls .selection-commit{padding:12px;font-size:14px}.battle-arena .fighter-number span{font-size:8px}.battle-arena .fighter-number b{font-size:14px}.battle-arena .fighter-number.hp b{font-size:18px}.battle-arena .fighter-number.mp b,.battle-arena .fighter-number.int b{font-size:14px}}
.battle-layout{font-size:16px}.battle-head,.turn-indicator{font-size:15px}.battle-head button,.battle-action-bar button,.field-action-buttons button{font-size:14px}.battlefield-heading{font-size:19px}.battlefield-heading span{font-size:14px}.field-hint{font-size:14px}.field-card>small{font-size:12px}.field-card>b{font-size:16px;line-height:1.35}.field-card .card-numbers span{font-size:14px;padding:4px 7px}.field-arrow{font-size:36px}.field-prompt,.field-result{font-size:14px;line-height:1.65}.field-result>b{font-size:15px}.field-result p{font-size:14px}.field-detail-card b{font-size:16px}.field-detail-card span{font-size:14px}.field-detail-card small,.field-detail-empty{font-size:12px}.field-action-buttons{display:grid;gap:8px}.field-action-buttons .selection-commit{font-size:16px;min-height:54px}.field-action-buttons .secondary{min-height:44px}.hand-heading h2{font-size:20px}.hand-heading h2 small,.hand-heading>span{font-size:13px}.hand .card strong{font-size:14px;line-height:1.3}.hand .card-numbers{min-height:26px}.hand .card-numbers span{font-size:15px;padding:5px 7px}.battle-arena .fighter-name{font-size:17px}.battle-arena .fighter-number span{font-size:11px}.battle-arena .fighter-number b{font-size:18px}.battle-arena .fighter-number.hp b{font-size:24px}.battle-arena .fighter-number.mp b,.battle-arena .fighter-number.int b{font-size:19px}.battle-log summary{font-size:14px}.battle-log summary span,.battle-log p{font-size:12px}
@media(max-width:650px){.battle-layout{font-size:14px}.battle-head,.turn-indicator{font-size:12px}.battle-head button,.battle-action-bar button,.field-action-buttons button{font-size:13px}.battlefield-heading{font-size:16px}.battlefield-heading span{font-size:11px}.field-hint{font-size:12px}.field-card>small{font-size:10px}.field-card>b{font-size:13px}.field-card .card-numbers span{font-size:11px}.field-arrow{font-size:24px}.field-prompt,.field-result,.field-result p{font-size:12px}.field-result>b{font-size:13px}.field-detail-card b{font-size:14px}.field-detail-card span{font-size:12px}.field-detail-card small,.field-detail-empty{font-size:11px}.field-action-buttons .selection-commit{font-size:14px;min-height:48px}.field-action-buttons .secondary{min-height:42px}.hand-heading h2{font-size:17px}.hand-heading h2 small,.hand-heading>span{font-size:11px}.hand .card strong{font-size:13px}.hand .card-numbers{min-height:24px}.hand .card-numbers span{font-size:13px;padding:4px 6px}.battle-arena .fighter-name{font-size:12px}.battle-arena .fighter-number span{font-size:9px}.battle-arena .fighter-number b{font-size:16px}.battle-arena .fighter-number.hp b{font-size:20px}.battle-arena .fighter-number.mp b,.battle-arena .fighter-number.int b{font-size:16px}.battle-log summary{font-size:13px}.battle-log summary span,.battle-log p{font-size:11px}}
.battlefield-panel{min-height:clamp(240px,31vh,350px);padding:14px 18px}.battlefield-flow,.last-action-flow{grid-template-columns:160px 46px minmax(0,1fr);gap:10px;margin-top:10px}.field-card{grid-template-columns:54px minmax(0,1fr);column-gap:8px;padding:8px 10px}.field-card .card-art{width:52px;height:52px;min-height:52px}.field-card .card-art>svg{width:44px;height:44px}.field-selection-controls{grid-template-columns:minmax(0,1fr) 330px;gap:10px;padding-top:10px}.field-selected-details{min-height:58px;padding:7px 10px}.field-detail-card{gap:2px}.field-detail-card b{font-size:14px}.field-detail-card span{font-size:12px;line-height:1.35}.field-detail-card small,.field-detail-empty{font-size:10px}.field-detail-empty{padding:8px 3px}.field-action-buttons{grid-template-columns:1.2fr 1fr;gap:5px}.field-action-buttons .selection-commit{grid-column:1/3;min-height:43px;padding:8px 10px;font-size:14px}.field-action-buttons .secondary{min-height:36px;padding:6px 8px;font-size:12px}.field-empty-choice{min-height:90px}.field-empty-choice>b{font-size:21px}
.battle-layout .hand{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:136px;gap:5px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:136px;min-width:0;padding:5px;gap:2px}.battle-layout .hand .card-art{height:38px;min-height:38px}.battle-layout .hand .card-art>svg{width:34px;height:34px}.battle-layout .hand .card strong{font-size:11px;line-height:1.2;margin:1px 0}.battle-layout .hand .card-numbers{min-height:20px;gap:3px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:12px;padding:3px 4px}.battle-layout .hand .number-combo{font-size:9px!important;padding:2px 3px!important}
@media(max-width:1000px){.battle-layout .hand{display:flex;grid-template-columns:none;grid-auto-rows:auto;overflow-x:auto;overflow-y:hidden;gap:7px;padding:2px 2px 8px;scroll-snap-type:x mandatory}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{flex:0 0 102px;height:136px;scroll-snap-align:start}.battle-layout .hand .card strong{font-size:12px}.battle-layout .field-selection-controls{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:650px){.battlefield-panel{min-height:clamp(220px,34vh,300px);padding:12px 10px}.battlefield-flow,.last-action-flow{grid-template-columns:110px 25px minmax(0,1fr);gap:5px;margin-top:8px}.field-card{grid-template-columns:38px minmax(0,1fr);column-gap:5px;padding:6px}.field-card .card-art{width:36px;height:36px;min-height:36px}.field-card .card-art>svg{width:30px;height:30px}.field-selection-controls{grid-template-columns:1fr;gap:6px;padding-top:8px}.field-selected-details{min-height:48px;padding:6px 8px}.field-detail-card b{font-size:12px}.field-detail-card span{font-size:11px}.field-detail-card small,.field-detail-empty{font-size:9px}.field-action-buttons{grid-template-columns:1.2fr 1fr;gap:4px}.field-action-buttons .selection-commit{grid-column:1/3;min-height:40px;padding:7px;font-size:13px}.field-action-buttons .secondary{min-height:34px;padding:5px;font-size:11px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{flex-basis:96px;height:132px}.battle-layout .hand .card-art{height:36px;min-height:36px}.battle-layout .hand .card strong{font-size:11px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:11px;padding:3px}}
.battle-layout .hand{grid-auto-rows:208px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:208px}
@media(max-width:1000px){.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:208px}}
@media(max-width:650px){.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:190px}}
.battlefield-panel :is(.battlefield-heading,.battlefield-heading span,.field-card>small,.field-card>b,.field-hint,.field-prompt,.field-result,.field-result p,.field-detail-card b,.field-detail-card span,.field-detail-card small,.field-detail-empty,.field-action-buttons button){white-space:nowrap}.battlefield-panel :is(.field-card>b,.field-hint,.field-prompt,.field-result p,.field-detail-card span,.field-detail-empty){max-width:100%;overflow-x:auto;overflow-y:hidden;text-overflow:clip}.battlefield-panel .field-card{min-width:0}.battlefield-panel .field-selection-controls,.battlefield-panel .field-selected-details,.battlefield-panel .field-action-buttons{min-width:0}
.hand .card-unavailable:hover{transform:none;box-shadow:none;border-color:#77708055}.detail-reason{display:inline-block;font-style:normal;font-size:10px;color:#ffc1bb;margin-left:5px}.selected-detail article small{display:block;line-height:1.5}

/* Keep all battlefield copy on one line; long strings remain readable by horizontal scrolling. */
.battlefield-panel *{white-space:nowrap}.battlefield-panel :is(span,b,small,p,button){max-width:100%;overflow-x:auto;overflow-y:hidden;text-overflow:clip}.battlefield-panel :is(.field-card,.field-result,.field-prompt,.field-detail-card){min-width:0}


/* Battlefield cards show artwork and combat values; names stay in the detail panel. */
.battlefield-panel .field-card{display:flex;flex:0 0 126px;min-width:0;min-height:134px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px}
.battlefield-panel .field-player-cards .field-card{flex:0 0 126px}
.battlefield-panel .field-card .card-art{display:grid;place-items:center;width:92px;height:92px;min-height:92px;padding:4px;border-radius:12px;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--art-color) 24%,transparent),#ffffff05 70%)}
.battlefield-panel .field-card .card-art>svg{width:100%;height:100%;filter:drop-shadow(0 3px 5px #09071266)}
.battlefield-panel .field-card .card-numbers{display:flex;grid-column:auto;justify-content:center;gap:4px;min-height:0}
.battlefield-panel .field-card .card-numbers span{font-size:16px;padding:4px 7px;font-weight:800}
.battlefield-panel .field-detail-card>b>small{display:inline;color:var(--gold);font-size:.82em}
.battlefield-panel .field-detail-card{min-width:0}
@media(max-width:650px){.battlefield-panel .field-card,.battlefield-panel .field-player-cards .field-card{flex-basis:104px;min-height:118px;padding:6px;gap:5px}.battlefield-panel .field-card .card-art{width:78px;height:78px;min-height:78px}.battlefield-panel .field-card .card-numbers span{font-size:13px;padding:3px 5px}}
.battlefield-panel .field-action-buttons [data-action="end"]{grid-column:1/3}
.battlefield-flow{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}
@media(max-width:650px){.battlefield-flow{grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr)}}
/* Keep the battle field split evenly and prevent its contents from causing page scroll. */
.battlefield-panel{width:100%;max-width:100%;min-width:0;overflow:hidden}
.battlefield-flow,.last-action-flow{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) clamp(28px,5vw,46px) minmax(0,1fr);align-items:center;gap:clamp(4px,1vw,12px)}
.battlefield-flow>.field-player-cards,.battlefield-flow>.field-card,.last-action-flow>.field-result,.last-action-flow>.field-card{width:100%;min-width:0;max-width:100%}
.battlefield-flow>.field-player-cards{display:flex;justify-content:flex-start;gap:6px;overflow:hidden}
.battlefield-panel :is(span,b,small,p,button){overflow:hidden;text-overflow:ellipsis}
.battlefield-panel .field-result{overflow:hidden}
@media(max-width:650px){.battlefield-flow,.last-action-flow{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:4px}.battlefield-panel .field-card,.battlefield-panel .field-player-cards .field-card{flex:1 1 0;width:100%;min-width:0;max-width:100%}}
.cpu-selecting-card>b{color:#ffe8aa;animation:cpuSelectPulse .7s ease-in-out infinite alternate}.cpu-opening-choice .field-arrow{color:#f5dda2;letter-spacing:.15em;animation:cpuSelectPulse .7s ease-in-out infinite alternate}@keyframes cpuSelectPulse{to{opacity:.45;filter:brightness(1.4);text-shadow:0 0 16px #f5dda2}}
.battlefield-panel{min-height:clamp(190px,24vh,280px);padding:10px 14px;margin:7px 0}.battlefield-panel .battlefield-flow{margin-top:5px}.battlefield-panel .field-hint{margin:4px 0 0;line-height:1.2}@media(max-width:650px){.battlefield-panel{min-height:clamp(165px,22vh,230px);padding:8px 9px;margin:6px 0}.battlefield-panel .field-selection-controls{padding-top:5px}.battlefield-panel .field-selected-details{min-height:42px;padding:5px 7px}.battlefield-panel .field-action-buttons .selection-commit{min-height:36px;padding:6px}.battlefield-panel .field-action-buttons .secondary{min-height:30px;padding:4px}}
.field-trade-side{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px}.field-trade-side>small{max-width:100%;color:var(--muted);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-trade-side .field-card{width:100%;min-width:0}.stun-chip{color:#ffe4a8;background:#a55b3740;border-color:#ffc98188}
.battle-layout .hand .card{border-color:color-mix(in srgb,var(--card-glow,#f8fbff) 72%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--card-glow,#f8fbff) 22%,transparent)}.battle-layout .hand .card:hover:not(:disabled),.battle-layout .hand .card.is-selected{border-color:var(--card-glow,#f8fbff);box-shadow:0 0 16px color-mix(in srgb,var(--card-glow,#f8fbff) 48%,transparent)}.battle-layout .hand .card.recovery-card:after,.battlefield-panel .field-card.recovery-card:after{content:'♥';position:absolute;z-index:4;top:5px;right:7px;color:#35e0d0;font-size:18px;line-height:1;text-shadow:0 0 10px #35e0d0b0;pointer-events:none}.battlefield-panel .field-card{position:relative;border-color:color-mix(in srgb,var(--card-glow,#f8fbff) 72%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--card-glow,#f8fbff) 24%,transparent)}
.death-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;overflow:hidden;background:radial-gradient(ellipse at center,#34264feF 0%,#120f20f5 72%);color:#fff4d1;text-align:center;animation:deathBackdrop 3s ease-out both}
.death-overlay>b{z-index:1;font-family:'Noto Serif JP',serif;font-size:clamp(32px,7vw,64px);letter-spacing:.12em;text-shadow:0 0 22px #e8c78099;animation:deathText .55s .35s both}
.death-overlay>span{z-index:1;font-size:clamp(15px,2.5vw,22px);color:#e8ddf6;animation:deathText .6s .55s both}
.death-angel{z-index:1;font-size:clamp(72px,15vw,130px);line-height:1;filter:drop-shadow(0 0 22px #ffe9a9);animation:angelDescend 2.8s cubic-bezier(.2,.7,.25,1) both}
.death-halo{position:absolute;width:min(65vw,520px);aspect-ratio:1;border:2px solid #ffe7a9aa;border-radius:50%;box-shadow:0 0 30px #ffdfa777,inset 0 0 35px #c99bff33;animation:haloBloom 2.8s ease-out both}
@keyframes angelDescend{0%{opacity:0;transform:translateY(-90px) scale(.55)}22%{opacity:1;transform:translateY(0) scale(1.12)}38%,78%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-105px) scale(.82)}}
@keyframes haloBloom{0%{opacity:0;transform:scale(.25) rotate(-25deg)}25%{opacity:.8}75%{opacity:.55;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(1.25) rotate(22deg)}}
@keyframes deathText{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes deathBackdrop{0%{opacity:0}12%,84%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.death-overlay,.death-overlay>*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
.battle-layout .hand .card-attribute-label{display:block;align-self:center;max-width:100%;padding:2px 5px;border:1px solid color-mix(in srgb,var(--card-glow,#f8fbff) 60%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card-glow,#f8fbff) 15%,#171329);color:var(--card-glow,#f8fbff);font-size:14px;font-weight:900;line-height:1.15;text-shadow:0 0 8px color-mix(in srgb,var(--card-glow,#f8fbff) 65%,transparent);white-space:nowrap;overflow:hidden;text-overflow:clip}.battle-layout .hand .card-numbers{justify-content:center;gap:3px}.battle-layout .hand .card-numbers span{font-size:13px;padding:3px 5px;font-weight:900;line-height:1.1}.battlefield-panel .field-card .card-attribute-label{display:block;max-width:100%;padding:2px 8px;border:1px solid color-mix(in srgb,var(--card-glow,#f8fbff) 60%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card-glow,#f8fbff) 15%,#171329);color:var(--card-glow,#f8fbff);font-size:18px;font-weight:900;line-height:1.1;text-align:center;text-shadow:0 0 9px color-mix(in srgb,var(--card-glow,#f8fbff) 65%,transparent);white-space:nowrap}.battlefield-panel .field-card .card-numbers span{font-size:18px;padding:4px 7px;font-weight:900}
@media(max-width:650px){.battle-layout .hand .card-attribute-label{font-size:12px;padding:2px 4px}.battle-layout .hand .card-numbers span{font-size:12px;padding:3px 4px}.battlefield-panel .field-card .card-attribute-label{font-size:14px;padding:2px 5px}.battlefield-panel .field-card .card-numbers span{font-size:15px;padding:3px 5px}}
.pet-effect-banner{position:absolute;z-index:8;left:50%;top:42%;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:80%;padding:10px 18px;border:1px solid #ffe59caa;border-radius:14px;background:linear-gradient(120deg,#201a35ee,#3d3159ee);color:#fff2c6;text-align:center;box-shadow:0 0 24px #efcf7966;transform:translate(-50%,-50%);animation:petEffectFlash 1.9s ease both;pointer-events:none}.pet-effect-banner>b{font-size:18px;font-weight:900}.pet-effect-banner>span{font-size:16px;font-weight:800}.pet-effect-cpu{border-color:#a9d8ffbb;box-shadow:0 0 24px #83c8ff66}@keyframes petEffectFlash{0%{opacity:0;transform:translate(-50%,-35%) scale(.8)}18%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-75%) scale(1.05)}}
@media(max-width:650px){.pet-effect-banner{top:43%;max-width:90%;padding:7px 12px}.pet-effect-banner>b{font-size:15px}.pet-effect-banner>span{font-size:13px}}
.battlefield-panel{position:relative}
.cpu-online-view .online-arena{grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr)}
.cpu-online-view .online-arena .fighter:first-child{grid-column:1;grid-row:1}
.cpu-online-view .online-arena .vs{grid-column:2;grid-row:1}
.cpu-online-view .online-arena .fighter:last-child{grid-column:3;grid-row:1}
@media(max-width:650px){.cpu-online-view .battle-head{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content max-content;align-items:center;gap:4px;padding:6px 5px}.cpu-online-view .battle-head>.turn-indicator{min-width:0;max-width:100%;flex:initial;padding:4px 5px;font-size:9px;overflow:hidden;text-overflow:ellipsis}.cpu-online-view .battle-head>button{width:auto;min-width:0;padding:5px 6px;font-size:9px}}
.battlefield-panel .damage-pop{max-width:48%;font-size:clamp(16px,3.5vw,34px);line-height:1.15;white-space:normal;overflow-wrap:anywhere;text-align:center}
.battlefield-panel .battlefield-flow,.battlefield-panel .last-action-flow{grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}
.battlefield-panel .field-player-cards{width:100%;min-width:0}
.battlefield-panel .field-player-cards .field-card{flex:1 1 0;width:100%;min-width:0}
.defense-reveal-banner{position:absolute;z-index:9;left:50%;top:48%;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:94%;padding:10px 14px;border:1px solid #9ccffff0;border-radius:14px;background:#151324ed;color:#e7f4ff;box-shadow:0 0 24px #73b9ff88;transform:translate(-50%,-50%);animation:defenseRevealFlash var(--reveal-duration,2s) ease both;pointer-events:none}
.defense-reveal-banner>b{font-size:16px;font-weight:900}
.defense-reveal-cards{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%}
.defense-reveal-cards>.field-card{flex:0 1 140px;min-width:0}
.defense-reveal-cards>span{font-size:24px;font-weight:900;color:#b9dcff}
@keyframes defenseRevealFlash{0%{opacity:0;transform:translate(-50%,-40%) scale(.88)}15%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.03)}}
@media(max-width:650px){.battlefield-panel .battlefield-flow,.battlefield-panel .last-action-flow{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)}.defense-reveal-banner{top:48%;gap:5px;padding:7px 8px;max-width:98%}.defense-reveal-banner>b{font-size:13px}.defense-reveal-cards{gap:5px}.defense-reveal-cards>.field-card{flex-basis:104px;min-height:96px;padding:4px;gap:3px}.defense-reveal-cards>.field-card .card-art{width:54px;height:54px;min-height:54px}.defense-reveal-cards>.field-card .card-attribute-label{font-size:11px}.defense-reveal-cards>.field-card .card-numbers span{font-size:12px;padding:2px 4px}.defense-reveal-cards>span{font-size:19px}}
.field-stage{position:relative;margin:0 72px;overflow:visible}
.field-pet-art{position:absolute;top:50%;z-index:3;display:flex;width:60px;max-height:270px;flex-direction:column;align-items:center;gap:8px;transform:translateY(-50%);pointer-events:none}
.field-pets-player{right:calc(100% + 8px)}
.field-pets-cpu{left:calc(100% + 8px)}
.field-pet-unit{display:flex;min-width:0;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pet-illustration{display:grid;place-items:center;width:48px;height:48px;border:1px solid #f2d8ff66;border-radius:50%;background:radial-gradient(circle,#b38cff55,#382b5555 68%,#211b3900);font-size:35px;line-height:1;filter:drop-shadow(0 0 9px #d4aaff99);animation:petFloat 2.6s ease-in-out infinite alternate}
.pet-illustration.pet-heart{color:#ffaad2}.pet-illustration.pet-fox{color:#ffc789}.pet-illustration.pet-dragon{color:#9feaff}.pet-illustration.pet-leaf{color:#a6f0b3}
.pet-illustration img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #160e26aa)}
.field-pet-unit small{max-width:68px;color:#f2dfff;font-size:9px;line-height:1.2;text-shadow:0 1px 5px #100b1b;white-space:normal}
@keyframes petFloat{to{transform:translateY(-4px) rotate(3deg)}}
@media(max-width:650px){.field-stage{margin:0 36px}.field-pet-art{width:30px;max-height:220px;gap:6px}.field-pets-player{right:calc(100% + 3px)}.field-pets-cpu{left:calc(100% + 3px)}.pet-illustration{width:29px;height:29px;font-size:21px}.field-pet-unit small{max-width:38px;font-size:7px}}
.turn-indicator.turn-arrival{color:#effff8;background:linear-gradient(110deg,#286b59,#4f8870);border-color:#baffdf;box-shadow:0 0 24px #85f4c8aa;text-shadow:0 0 10px #baffdf;animation:turnArrival .55s ease-in-out 3}
@keyframes turnArrival{50%{transform:scale(1.09);box-shadow:0 0 32px #a1ffdaa8}}
.battlefield-panel .field-card.consecutive-hit-card{animation:consecutiveHitMotion .62s cubic-bezier(.2,.7,.3,1) both}
.field-hit-count{position:absolute;z-index:4;top:5px;right:6px;padding:4px 7px;border:1px solid #ffc3aa;border-radius:999px;background:#8e3e4df2;color:#fff5e9;font-size:13px;font-weight:1000;line-height:1.1;box-shadow:0 0 13px #ff805f88;animation:hitCountPop .45s ease-out both}
@keyframes consecutiveHitMotion{0%{transform:translateX(0) scale(.9);filter:brightness(1)}22%{transform:translateX(-7px) scale(1.05);filter:brightness(1.45)}45%{transform:translateX(7px) scale(1.03)}68%{transform:translateX(-3px) scale(1.01)}100%{transform:translateX(0) scale(1);filter:brightness(1)}}
@keyframes hitCountPop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}70%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1)}}
@media(max-width:650px){.field-hit-count{top:3px;right:3px;padding:3px 5px;font-size:10px}.battlefield-panel .field-card.consecutive-hit-card{animation-duration:.5s}}
.attack-miss-banner{position:absolute;z-index:12;left:50%;top:48%;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:94%;padding:10px 16px;border:1px solid #fff0a5;border-radius:15px;background:#27203bee;color:#fff4c5;box-shadow:0 0 26px #ffe28c99;transform:translate(-50%,-50%);animation:attackMissMotion 1.5s ease both;pointer-events:none}.attack-miss-banner>b{font-size:clamp(20px,3vw,32px);font-weight:1000;text-shadow:0 0 12px #ffc86f}.attack-miss-banner .field-card{flex:0 1 104px;min-height:96px;padding:4px;gap:3px}.attack-miss-banner .field-card .card-art{width:56px;height:56px;min-height:56px}@keyframes attackMissMotion{0%{opacity:0;transform:translate(-50%,-38%) scale(.72) rotate(-5deg)}14%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}22%,42%,62%{transform:translate(calc(-50% - 7px),-50%) rotate(-2deg)}32%,52%{transform:translate(calc(-50% + 7px),-50%) rotate(2deg)}100%{opacity:0;transform:translate(-50%,-64%) scale(.95)}}
@media(max-width:650px){.attack-miss-banner{gap:3px;padding:7px 9px;max-width:98%}.attack-miss-banner>b{font-size:19px}.attack-miss-banner .field-card{flex-basis:82px;min-height:80px}.attack-miss-banner .field-card .card-art{width:46px;height:46px;min-height:46px}}
.rank-mode-start{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px auto;padding:12px 22px;border:1px solid #bca5ff99;border-radius:12px;background:linear-gradient(120deg,#332653,#493366);color:#f3eaff;font-size:15px;font-weight:800;box-shadow:0 0 20px #a17af033}.rank-mode-start small{font-size:11px;color:#d8c8f0;font-weight:500}.mode-note{padding:8px 12px;border-radius:9px;background:#382b504d;color:#e8dcff}.home-rank{color:#f0dcff}.fighter .rank-title{width:max-content;margin:-3px 0 7px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--rank-color),transparent 42%);border-radius:999px;background:color-mix(in srgb,var(--rank-color),transparent 90%);color:var(--rank-color);font-size:11px;font-weight:800;line-height:1.2;text-shadow:0 0 8px color-mix(in srgb,var(--rank-color),transparent 45%)}.rank-record{margin:10px 0 18px;padding:16px;border:1px solid #c5a5ff66;border-radius:13px;background:linear-gradient(125deg,#392a55,#211b39);color:#ede4ff}.rank-record h3{margin:5px 0;color:#f5e7ff}.rank-record>b{font-size:26px;color:#f4d99c}.rank-record p{margin:5px 0 0;color:var(--muted);font-size:12px}.clear-records-button{padding:10px 14px;border:1px solid #e98f9d88;border-radius:9px;background:#7d344233;color:#ffd9dc}.rank-result{margin:16px auto 0;padding:10px;border:1px solid #c5a5ff55;border-radius:10px;color:#eee0ff;background:#382b504d;font-weight:700}
.battle-layout .hand{grid-auto-rows:184px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:184px}.battle-layout .hand .card strong{font-size:12px}.battle-layout .hand .card-attribute-label{font-size:15px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:13px}.battle-layout .hand .cost{font-size:11px}
@media(max-width:1000px){.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:184px}.battle-layout .hand .card strong{font-size:13px}}
@media(max-width:650px){.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:172px}.battle-layout .hand .card strong{font-size:12px}.battle-layout .hand .card-attribute-label{font-size:13px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:12px}.battle-layout .hand .cost{font-size:11px}}
.battle-layout .hand{grid-auto-rows:129px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:129px;padding:4px;gap:1px}.battle-layout .hand .card-art{height:30px;min-height:30px}.battle-layout .hand .card-art>svg{width:28px;height:28px}.battle-layout .hand .card strong{font-size:13px;line-height:1.1;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.battle-layout .hand .card-attribute-label{font-size:15px;padding:1px 4px}.battle-layout .hand .card-numbers{min-height:18px;gap:2px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:13px;padding:2px 3px}.battle-layout .hand .cost{font-size:11px;padding-top:0}
.hand-hover-detail{position:fixed;z-index:40;top:50%;right:14px;display:flex;width:min(300px,28vw);max-height:min(70vh,460px);overflow:auto;flex-direction:column;gap:10px;padding:16px;border:1px solid #e3cbff99;border-radius:15px;background:#171329f5;color:#f5efff;box-shadow:0 12px 40px #090612bb,0 0 24px #bd8cff33;transform:translateY(-50%);pointer-events:none}.hand-hover-detail[hidden]{display:none}.hover-card-heading{display:flex;align-items:center;gap:10px}.hover-card-heading .card-art{flex:0 0 58px;width:58px;height:58px;min-height:58px}.hover-card-heading .card-art>svg{width:50px;height:50px}.hover-card-heading b,.hover-card-heading span{display:block}.hover-card-heading b{font-size:16px;line-height:1.35}.hover-card-heading span,.hand-hover-detail>small{font-size:12px;color:#c9bddc}.hand-hover-detail .card-numbers{display:flex;gap:6px}.hand-hover-detail .card-numbers span{font-size:14px;padding:4px 7px}.hand-hover-detail p{margin:0;font-size:14px;line-height:1.65}.hand-hover-detail .hover-card-reason{color:#ffc1bb}
@media(max-width:1000px){.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:129px}.hand-hover-detail{width:min(280px,32vw);right:8px;padding:12px}}
@media(max-width:650px){.battle-layout .hand{grid-auto-rows:120px}.battle-layout .hand .card,.battle-layout .hand .card.is-selected{height:120px;flex-basis:96px;padding:3px}.battle-layout .hand .card-art{height:27px;min-height:27px}.battle-layout .hand .card-art>svg{width:25px;height:25px}.battle-layout .hand .card strong{font-size:12px}.battle-layout .hand .card-attribute-label{font-size:13px}.battle-layout .hand .card-numbers{min-height:16px}.battle-layout .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense{font-size:12px;padding:2px}.hand-hover-detail{display:none!important}}
.online-lobby{max-width:620px}.online-lobby h2{margin-top:8px}.online-rank-card{display:flex;align-items:center;gap:10px;margin:18px auto;padding:14px;border:1px solid #c5a5ff66;border-radius:12px;background:#392a55}.online-rank-card>b{color:#f2e6ff}.online-rank-card>strong{margin-left:auto;color:#f4d99c;font-size:21px}.online-label{display:flex;flex-direction:column;gap:7px;text-align:left;color:var(--muted)}.online-label input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:#171329;color:var(--ink)}.online-type-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 20px}.online-type{padding:12px 6px;border:1px solid var(--line);border-radius:9px;background:#ffffff08;color:var(--ink)}.online-type.selected{border-color:var(--gold);background:#f4d79516;color:#fff0c8}.online-queue{width:100%;margin-top:10px}.online-waiting{display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0;padding:20px;border:1px solid #c5a5ff55;border-radius:13px;background:#392a554d}.online-waiting small{color:var(--muted)}.online-pulse{color:#eddaff;font-size:26px;animation:turnArrival .7s ease-in-out infinite}.online-error{color:#ffc1bb}.online-arena{grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr)}.online-arena .fighter-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.online-arena .fighter-name .rank-title{margin:0}.online-field{min-height:230px}.online-incoming,.online-last-action{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px auto;flex-wrap:wrap}.online-incoming>b{color:#ffd0ca}.online-incoming>span,.online-last-action>span{font-size:13px;color:#e6dcef}.online-incoming .field-card,.online-last-action .field-card{flex:0 1 190px}.online-end,.online-skip-defense{display:block;width:min(360px,100%);margin:12px auto}.online-finish{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:15px;padding:18px;border:1px solid #ffffff2b;border-radius:12px;background:#ffffff08}.online-finish b{font-size:28px;color:#baffdf}.online-finish.lost b{color:#ffc1bb}.online-battle .hand{grid-template-columns:repeat(10,minmax(0,1fr))}
.online-card-confirm{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;margin:14px auto;padding:14px;border:1px solid #c5a5ff66;border-radius:12px;background:#392a5577;text-align:left}.online-card-confirm p{margin:5px 0;color:#e6dcef;line-height:1.5}.online-card-confirm small{color:#d0c0e7}.online-card-confirm .primary,.online-card-confirm .secondary{margin:0;white-space:nowrap}.online-battle .hand .card[aria-pressed="true"]{outline:3px solid #f4d795;outline-offset:2px;transform:translateY(-3px)}
@media(max-width:650px){.online-type-list{gap:5px}.online-type{font-size:12px}.online-arena{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);padding:8px 5px}.online-arena .fighter{grid-template-columns:32px minmax(0,1fr);gap:4px}.online-arena .fighter .avatar{width:30px;height:42px}.online-arena .fighter-name{font-size:10px;white-space:normal}.online-arena .fighter-stats{gap:3px}.online-field{padding:10px 7px}.online-incoming,.online-last-action{gap:6px}.online-incoming .field-card,.online-last-action .field-card{flex-basis:145px}.online-incoming>span,.online-last-action>span{font-size:11px}.online-battle .hand{display:flex;grid-template-columns:none;gap:9px;overflow-x:auto;overscroll-behavior-inline:contain;padding:8px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.online-battle .hand .card,.online-battle .hand .card.is-selected{flex:0 0 108px;scroll-snap-align:start}.online-card-confirm{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.online-card-confirm>div{grid-column:1/-1}.online-card-confirm .primary,.online-card-confirm .secondary{width:100%;font-size:12px;padding:10px 5px}}
@media(max-width:650px){.app-shell{padding:0 14px}.topbar{height:58px}.topbar nav{display:none}.home-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:14px 4px}.home-links button{min-width:0;white-space:nowrap;font-size:12px}}
@media(max-width:650px){.home-links button{font-size:10px;padding:8px 0;white-space:normal;overflow-wrap:anywhere;text-align:center}}

@media(max-width:650px){
  .field-stage{margin:42px 0 0}
  .field-pet-art{top:-38px;transform:none;flex-direction:row;align-items:center;width:auto;max-width:49%;max-height:none;gap:4px}
  .field-pet-art .field-pet-unit{flex-direction:row;max-width:100%;gap:4px}
  .field-pet-art .pet-illustration{flex:0 0 28px;width:28px;height:28px}
  .field-pet-art .field-pet-unit small{display:block;max-width:calc(49vw - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
  .field-pets-player{left:4px;right:auto;justify-content:flex-start}
  .field-pets-cpu{right:4px;left:auto;justify-content:flex-end}
  .battle-head,.turn-indicator{flex-wrap:nowrap}
  .battle-head>*{min-width:0;white-space:nowrap}
  .online-battle .battle-head{gap:clamp(3px,1vw,8px);padding-inline:2px}
  .online-battle .online-forfeit{font-size:10px;padding:6px 7px}
  .online-arena .fighter-info{min-width:0}
  .online-arena .fighter-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .online-arena .fighter-name small{font-size:8px;white-space:nowrap}
  .online-arena .fighter-stats{display:flex;flex-wrap:nowrap;gap:2px}
  .online-arena .fighter-stats>*{min-width:0;flex:1 1 0;white-space:nowrap}
  .online-battle .hand .card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-action-bar .summon{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain}
  .battle-action-bar .summon button{flex:0 0 auto;white-space:nowrap}
  .home-links button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:650px){
  .field-stage{margin:42px 0 0}
  .field-pet-art{top:-38px;transform:none;flex-direction:row;align-items:center;width:auto;max-width:49%;max-height:none;gap:4px}
  .field-pet-art .field-pet-unit{flex-direction:row;max-width:100%;gap:4px}
  .field-pet-art .pet-illustration{flex:0 0 28px;width:28px;height:28px}
  .field-pet-art .field-pet-unit small{display:block;max-width:calc(49vw - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
  .field-pets-player{left:4px;right:auto;justify-content:flex-start}
  .field-pets-cpu{right:4px;left:auto;justify-content:flex-end}
  .battle-head,.turn-indicator{flex-wrap:nowrap}
  .battle-head>*{min-width:0;white-space:nowrap}
  .online-arena .fighter-info{min-width:0}
  .online-arena .fighter-name{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .online-arena .fighter-name small{font-size:8px;white-space:nowrap}
  .online-arena .fighter-stats{display:flex;flex-wrap:nowrap;gap:2px}
  .online-arena .fighter-stats>*{min-width:0;flex:1 1 0;white-space:nowrap}
  .online-battle .hand .card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-action-bar .summon{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain}
  .battle-action-bar .summon button{flex:0 0 auto;white-space:nowrap}
  .home-links button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:650px){
  .field-selection-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .field-selected-details,.field-action-buttons{width:100%;min-width:0}
  .field-selected-details .field-card{flex:1 1 auto;width:100%;max-width:100%}
  .field-action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .battlefield-panel .field-action-buttons [data-action="end"]{grid-column:1/-1}
}

@media(max-width:650px){
  .battle-action-bar .summon{align-items:center;min-width:0}
  .battle-action-bar .summon>b,.battle-action-bar .summon button{flex:0 0 max-content;width:max-content;min-width:max-content;white-space:nowrap}
}

@media(max-width:650px){
  .battle-layout .hand,.online-battle .hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:108px;gap:4px;overflow:visible;overscroll-behavior:auto;padding:6px 0 10px;scroll-snap-type:none}
  .battle-layout .hand .card,.battle-layout .hand .card.is-selected,.online-battle .hand .card,.online-battle .hand .card.is-selected{width:100%;min-width:0;height:108px;min-height:0;flex:initial;padding:2px;gap:1px;scroll-snap-align:none}
  .battle-layout .hand .card-art,.online-battle .hand .card-art{height:22px;min-height:22px}
  .battle-layout .hand .card-art>svg,.online-battle .hand .card-art>svg{width:20px;height:20px}
  .battle-layout .hand .card strong,.online-battle .hand .card strong{display:block;font-size:9px;line-height:1.05;max-height:19px;white-space:normal;overflow:hidden;text-overflow:clip}
  .battle-layout .hand .card .card-attribute-label,.online-battle .hand .card .card-attribute-label{font-size:8px;line-height:1;padding:1px}
  .battle-layout .hand .card-numbers,.online-battle .hand .card-numbers{min-height:13px;gap:1px}
  .battle-layout .hand .card-numbers span,.online-battle .hand .card-numbers span,.battle-layout .hand .card-numbers .number-attack,.online-battle .hand .card-numbers .number-attack,.battle-layout .hand .card-numbers .number-defense,.online-battle .hand .card-numbers .number-defense{font-size:9px;padding:1px 2px}
  .battle-layout .hand .card .cost,.online-battle .hand .card .cost{font-size:8px;padding:0}
}
.online-arena .fighter:first-child{grid-column:3;grid-row:1}
.online-arena .vs{grid-column:2;grid-row:1}
.online-arena .fighter:last-child{grid-column:1;grid-row:1}
.online-choice-board{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:start;gap:10px;margin:16px auto;max-width:900px}
.online-choice-side{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.online-choice-side>b{text-align:center;color:var(--gold);font-size:12px}
.online-choice-side .field-card{width:100%;min-width:0}
.online-choice-side .field-card.opponent-card{border-color:#efaaa388}
.online-choice-vs{align-self:center;text-align:center;color:var(--gold);font-size:13px;font-weight:700}
.online-choice-empty{display:grid;min-height:90px;place-items:center;border:1px dashed #ffffff30;border-radius:10px;color:var(--muted);font-size:12px}
.online-pet-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0;padding:10px;border:1px solid #ffffff20;border-radius:11px;background:#ffffff06}
.online-pet-controls>b{flex:1 0 100%;color:var(--gold);font-size:12px}
.online-pet-controls button{width:auto;min-height:42px;padding:8px 11px;touch-action:manipulation}
.online-action-result{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px auto 16px;padding:12px 18px;max-width:720px;border:1px solid #f4d79588;border-radius:12px;background:linear-gradient(110deg,#35284f,#5a4324,#35284f);box-shadow:0 0 24px #f4d79530;animation:onlineResultReveal 1.1s cubic-bezier(.18,.8,.25,1) both}
.online-action-result>b{color:#ffe4a7;letter-spacing:.08em}
.online-action-result>span{color:#fff;font-weight:700;text-align:center}
.online-action-result.recovery{border-color:#8ce8c588;background:linear-gradient(110deg,#173b49,#28523f,#173b49);box-shadow:0 0 30px #54e5a83b;animation:onlineRecoveryReveal 1.15s cubic-bezier(.16,.82,.22,1) both}
.online-action-result.recovery>b{color:#baffdd}
.online-action-result.special{border-color:#c7a5ff99;background:linear-gradient(110deg,#251b48,#49306a,#251b48);box-shadow:0 0 30px #a879ff55;animation:onlineSpecialReveal 1.15s cubic-bezier(.16,.82,.22,1) both}
.online-action-result.special>b{color:#e0ccff}
.online-choice-board.is-revealing .field-card{animation:onlineCardAppear .72s cubic-bezier(.18,.8,.25,1) both}
@keyframes onlineRecoveryReveal{0%{opacity:0;transform:translateY(14px) scale(.9);filter:brightness(1.8)}45%{opacity:1;transform:translateY(-2px) scale(1.035);filter:brightness(1.35)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}
@keyframes onlineSpecialReveal{0%{opacity:0;transform:translateY(12px) rotate(-2deg) scale(.88);filter:brightness(1.8)}50%{opacity:1;transform:translateY(-2px) rotate(1deg) scale(1.035);filter:brightness(1.35)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1);filter:brightness(1)}}
@keyframes onlineCardAppear{0%{opacity:0;transform:translateY(18px) scale(.9)}60%{opacity:1;transform:translateY(-3px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}
.online-arena .fighter-number{position:relative;overflow:visible}
.online-stat-delta{position:absolute;z-index:5;left:50%;top:-18px;padding:2px 6px;border-radius:999px;font-size:12px;font-style:normal;font-weight:900;white-space:nowrap;pointer-events:none;animation:onlineStatFloat 1.45s ease-out both}
.online-stat-delta.gain{color:#b8ffd6;text-shadow:0 0 10px #35d981;background:#123a2bcc}
.online-stat-delta.loss{color:#ffd0c8;text-shadow:0 0 10px #ff553f;background:#511c20cc}
@keyframes onlineStatFloat{0%{opacity:0;transform:translate(-50%,12px) scale(.75)}18%{opacity:1;transform:translate(-50%,0) scale(1.12)}72%{opacity:1;transform:translate(-50%,-10px) scale(1)}100%{opacity:0;transform:translate(-50%,-20px) scale(.94)}}
@keyframes onlineResultReveal{0%{opacity:0;transform:translateY(16px) scale(.94);filter:brightness(1.8)}55%{opacity:1;transform:translateY(-3px) scale(1.02);filter:brightness(1.2)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}
@media(max-width:650px){.online-choice-board{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:4px;margin:10px auto}.online-choice-side>b{font-size:10px}.online-choice-side .field-card{grid-template-columns:34px minmax(0,1fr);gap:4px;padding:5px}.online-choice-side .field-card .card-art{width:32px;height:32px;min-height:32px}.online-choice-side .field-card .card-art>svg{width:28px;height:28px}.online-choice-side .field-card>b{font-size:10px}.online-choice-side .field-card .card-numbers span{font-size:9px;padding:2px}.online-choice-empty{min-height:74px;font-size:10px}}
@media(max-width:650px){.online-pet-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:9px 0;padding:8px}.online-pet-controls>b{grid-column:1/-1;font-size:11px}.online-pet-controls button{width:100%;min-width:0;min-height:42px;padding:7px 4px;font-size:10px;line-height:1.25;white-space:normal}}
.online-battle .hand .card,.online-battle .hand .card.is-selected{height:84px;min-height:0;padding:4px;gap:1px}
.online-battle .hand .card-art{height:23px;min-height:23px}
.online-battle .hand .card-art>svg{width:21px;height:21px}
.online-battle .hand .card-attribute-label{font-size:8px;line-height:1;padding:1px}
.online-battle .hand .card strong{font-size:9px;line-height:1.05;max-height:19px;overflow:hidden}
.card-numbers .attack-plus{display:inline-block;margin-left:1px;color:#ffe478;font-size:1.8em;font-weight:900;line-height:.7;vertical-align:-.08em;text-shadow:0 0 4px #ffc84d66}
.online-battle .hand .card-numbers{min-height:11px;gap:1px}
.online-battle .hand .card-numbers span{font-size:8px;padding:1px 2px}
.online-battle .hand .card .cost{font-size:8px;padding:0}
@media(max-width:650px){.online-battle .hand{grid-auto-rows:54px}.online-battle .hand .card,.online-battle .hand .card.is-selected{height:54px;padding:3px 2px;gap:1px}.online-battle .hand .card-art{display:none}.online-battle .hand .card-attribute-label{font-size:7px}.online-battle .hand .card strong{font-size:8px;line-height:1;max-height:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.online-battle .hand .card-numbers{min-height:9px}.online-battle .hand .card-numbers span{font-size:7px;padding:0 1px}.online-battle .hand .card .cost{font-size:7px;line-height:1;padding:0}}
.online-pet-dock{position:sticky;bottom:0;z-index:10;display:flex;justify-content:flex-end;margin-top:6px;padding:4px 6px;background:linear-gradient(0deg,#171329f2,#171329d9);border-top:1px solid #ffffff18;backdrop-filter:blur(8px)}
.online-pet-dock .online-pet-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;width:min(560px,100%);margin:0;padding:5px;border:0;background:#ffffff08}
.online-pet-dock .online-pet-controls>b{flex:0 0 auto;font-size:9px;white-space:nowrap}
.online-pet-dock .online-pet-controls button{min-height:30px;padding:4px 6px;font-size:9px;white-space:nowrap}
@media(max-width:650px){.online-pet-dock{margin-top:4px;padding:3px}.online-pet-dock .online-pet-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;width:100%;padding:3px}.online-pet-dock .online-pet-controls>b{grid-column:1/-1;font-size:8px}.online-pet-dock .online-pet-controls button{width:100%;min-width:0;min-height:30px;padding:3px 1px;font-size:8px;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:650px){.online-battle .battle-head{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(34px,auto) max-content;align-items:center;gap:4px;padding:6px 5px}.online-battle .battle-head .online-match-label{font-size:9px}.online-battle .battle-head .turn-indicator{min-width:0;max-width:100%;flex:initial;padding:4px 5px;font-size:9px;overflow:hidden;text-overflow:ellipsis}.online-battle .battle-head .online-rank-display{max-width:48px;font-size:8px;overflow:hidden;text-overflow:ellipsis}.online-battle .battle-head .online-forfeit{max-width:48px;padding:4px 3px;font-size:8px;overflow:hidden;text-overflow:clip}}
@media(max-width:650px){.battle-layout:not(.online-battle)>.battle-head{gap:4px;padding:6px}.battle-layout:not(.online-battle)>.battle-head>span{font-size:9px}.battle-layout:not(.online-battle)>.battle-head>.turn-indicator{min-width:0;flex:1;font-size:9px;padding:4px}.battle-layout:not(.online-battle)>.battle-head button{width:auto;min-width:0;padding:5px 6px;font-size:9px}}
.battle-action-bar .summon.free-pet-selection{padding:8px;border:1px solid #c7a5ff99;border-radius:10px;background:#4a3568}
.battle-action-bar .summon.free-pet-selection>b{color:#f0dcff;font-size:12px}
@media(max-width:650px){.battle-action-bar .summon.free-pet-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible}.battle-action-bar .summon.free-pet-selection>b{grid-column:1/-1;width:auto;min-width:0;white-space:normal}.battle-action-bar .summon.free-pet-selection button{width:100%;min-width:0;white-space:normal;padding:9px 4px;font-size:11px}}
@media(max-width:650px){.online-pet-dock .online-pet-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px}.online-pet-dock .online-pet-controls>b{grid-column:1/-1;font-size:10px;white-space:normal}.online-pet-dock .online-pet-controls button{min-height:40px;padding:7px 4px;font-size:10px;white-space:normal}}
.online-battle .turn-indicator,.online-battle .online-rank-display,.online-battle .battlefield-heading span,.online-battle .online-action-result>span,.online-battle .online-finish span,.online-battle .hand-heading>span,.online-battle .battle-log p{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-overflow:clip}
.online-battle .battlefield-heading span{text-align:right}
.battlefield-panel{position:relative}
@media(max-width:650px){.online-pet-dock .online-pet-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px}.online-pet-dock .online-pet-controls>b{grid-column:1/-1;font-size:10px;white-space:normal}.online-pet-dock .online-pet-controls button{min-height:40px;padding:7px 4px;font-size:10px;white-space:normal}}