.online-field .enigma-duel-field{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch;gap:10px;max-width:none;min-height:260px;margin:12px 0;padding:12px;border:1px solid #9a87ce55;border-radius:16px;background:radial-gradient(ellipse at 50% 0,#63508033,transparent 75%),#17132966}
.enigma-duel-field .duel-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.duel-player-name{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;border:1px solid #83dbc277;border-radius:999px;background:#24473c88;color:#b9ffe2;font-size:13px}
.duel-opponent .duel-player-name{border-color:#e7b2c477;background:#53334688;color:#ffd3e0}
.duel-player-name i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:currentColor}
.duel-player-name b{min-width:0;overflow-wrap:anywhere}
.duel-card-list{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.duel-card-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;min-width:0;margin:0;padding:6px;border:1px solid #a3dcc377;border-left:4px solid #7ed6b6;border-radius:9px;background:#253f3bcc;text-align:left}
.duel-opponent .duel-card-row{border-color:#dcadc077;border-left-color:#db9cb8;background:#453044cc}
.duel-card-row .card-art{grid-column:1;grid-row:1/3;width:70px;height:70px;min-height:70px}
.duel-card-row .card-art>svg{width:58px;height:58px}
.duel-card-name{min-width:0;align-self:center;color:#fff2cb;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.duel-card-values{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;flex-wrap:wrap}
.duel-card-values .card-numbers{gap:2px;min-width:0}
.duel-card-values .card-numbers span{font-size:13px}
.duel-card-cost{margin-left:auto;color:#d5c9f2;font-size:10px;white-space:nowrap}
.duel-total{margin-top:auto;display:flex;justify-content:center;align-items:center;min-height:40px;padding:6px;border:2px solid #9ed4b8;border-radius:10px;background:#c7f3d4;color:#24382e;text-align:center;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.duel-opponent .duel-total{border-color:#d5a6c2;background:#f1d4e6;color:#4b3041}
.duel-flow-arrow{align-self:start;margin-top:3px;color:#f3c382;font-size:30px;font-weight:900;text-align:center;line-height:1}
.enigma-duel-field .online-choice-empty{flex:1;min-height:100px;font-size:12px}
.enigma-duel-field.is-revealing .duel-card-row{animation:onlineCardAppear .5s ease-out both}
@media(max-width:650px){.online-field .enigma-duel-field{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:4px;min-height:210px;padding:6px;margin:8px 0}.enigma-duel-field .duel-side{gap:7px}.duel-player-name{padding:5px 6px;font-size:11px;gap:4px}.duel-flow-arrow{font-size:22px;margin-top:4px}.duel-card-row{grid-template-columns:38px minmax(0,1fr);gap:4px;padding:4px;border-left-width:3px}.duel-card-row .card-art{width:38px;height:43px;min-height:43px}.duel-card-row .card-art>svg{width:32px;height:32px}.duel-card-name{font-size:10px}.duel-card-values .card-numbers span{font-size:10px;padding:1px 2px}.duel-card-cost{font-size:8px}.duel-total{font-size:16px;min-height:33px;padding:4px}.enigma-duel-field .online-choice-empty{font-size:10px;min-height:80px}}

/* Compact field and on-demand card descriptions. */
.online-battle .online-field{min-height:0;padding:8px}
.online-battle .online-field .enigma-duel-field{min-height:145px;margin:6px 0;padding:7px}
.online-battle .duel-side{gap:6px}
.online-battle .duel-card-row{grid-template-columns:48px minmax(0,1fr);padding:4px;cursor:pointer;touch-action:manipulation;font:inherit}
.online-battle .duel-card-row .card-art{width:48px;height:48px;min-height:48px}
.online-battle .duel-card-row .card-art>svg{width:40px;height:40px}
.online-battle .duel-total{min-height:30px;padding:3px;font-size:17px}
.online-battle .enigma-duel-field .online-choice-empty{min-height:45px}
.online-battle .online-card-confirm{display:flex;justify-content:flex-end;gap:6px;margin:5px 0;padding:5px}
.online-battle .online-card-confirm>div{display:none}
.online-battle .online-card-confirm button{min-height:34px;padding:6px 10px}
.online-battle .online-end,.online-battle .online-skip-defense{margin:5px auto;padding:7px}
.online-battle .hand-panel{margin-top:5px}
.card-description-bubble{position:fixed;z-index:10000;width:min(285px,calc(100vw - 16px));padding:12px 32px 12px 13px;border:1px solid #c8b4ee;border-radius:12px;background:#302541;color:#f8efff;box-shadow:0 5px 24px #0009;box-sizing:border-box;text-align:left;overflow-wrap:anywhere}
.card-description-bubble:after{content:'';position:absolute;bottom:-7px;left:calc(50% - 6px);width:12px;height:12px;transform:rotate(45deg);background:#302541;border-right:1px solid #c8b4ee;border-bottom:1px solid #c8b4ee}
.card-description-bubble.bubble-below:after{bottom:auto;top:-7px;transform:rotate(225deg)}
.card-description-bubble>b{color:#ffe2a7;font-size:13px}
.card-description-bubble p{margin:7px 0;font-size:12px;line-height:1.5}
.card-description-bubble small{color:#cabbdf;font-size:10px}
.card-description-bubble [data-close-card-bubble]{position:absolute;right:4px;top:4px;width:28px;height:28px;min-height:0;padding:0;border:0;background:transparent;color:#fff;font-size:22px;line-height:1}
@media(max-width:650px){.online-battle .online-field{padding:6px}.online-battle .online-field .enigma-duel-field{min-height:125px;padding:5px}.online-battle .duel-card-row{grid-template-columns:32px minmax(0,1fr)}.online-battle .duel-card-row .card-art{width:32px;height:35px;min-height:35px}.online-battle .duel-card-row .card-art>svg{width:28px;height:28px}.online-battle .duel-total{font-size:15px;min-height:27px}.online-battle .online-card-confirm button{flex:1;width:auto;padding:6px;font-size:11px}}

.trade-result-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;margin:6px 0;color:#f5edff}
.trade-result-table caption{font-weight:700;color:#ffe2a7;font-size:12px}
.trade-result-table th{padding:4px;font-size:11px;color:#ddd0ee}
.trade-result-table td{padding:0;vertical-align:top}
.trade-result-card{display:flex;align-items:center;gap:7px;width:100%;padding:6px;border:1px solid #bfa5e477;border-radius:9px;background:#38294f;text-align:left;color:inherit}
.trade-result-card .card-art{flex:0 0 40px;width:40px;height:40px;min-height:40px}
.trade-result-card .card-art>svg{width:34px;height:34px}
.trade-result-card>span{min-width:0}
.trade-result-card b{display:block;font-size:12px;overflow-wrap:anywhere}
@media(max-width:650px){.trade-result-card{gap:4px;padding:4px}.trade-result-card b{font-size:10px}.trade-result-card .card-art{flex-basis:28px;width:28px;height:32px;min-height:32px}.trade-result-card .card-art>svg{width:24px;height:24px}.trade-result-card .card-numbers span{font-size:9px}}

/* Fixed-height battlefield: multiple cards overlap inside their own side. */
.online-battle .online-field .enigma-duel-field{height:340px;min-height:340px;box-sizing:border-box}
.online-battle .enigma-duel-field .duel-side{display:grid;grid-template-rows:32px minmax(0,1fr) 36px;gap:8px;min-height:0}
.online-battle .enigma-duel-field .duel-card-list{--stack-card-height:76px;--stack-step:max(24px,min(56px,calc((100% - var(--stack-card-height)) / max(1,var(--stack-count) - 1))));display:block;position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px 0 0;isolation:isolate}
.online-battle .enigma-duel-field .duel-card-row{position:absolute;top:calc(var(--stack-index) * var(--stack-step));left:0;width:calc(100% - 3px);height:var(--stack-card-height);min-height:0;box-sizing:border-box;grid-template-columns:58px minmax(0,1fr);grid-template-rows:27px 27px;align-content:start;gap:4px 7px;padding:6px;z-index:calc(var(--stack-index) + 1);background:#283b37;box-shadow:0 -2px 6px #0003}
.online-battle .enigma-duel-field .duel-opponent .duel-card-row{background:#423044}
.online-battle .enigma-duel-field .duel-card-row:hover,.online-battle .enigma-duel-field .duel-card-row:focus-visible{z-index:40;outline:2px solid #f4d795;outline-offset:-2px}
.online-battle .enigma-duel-field .duel-card-row .card-art{width:58px;height:60px;min-height:60px}
.online-battle .enigma-duel-field .duel-card-row .card-art>svg{width:50px;height:50px}
.online-battle .enigma-duel-field .duel-card-name{align-self:start;max-height:27px;overflow:hidden;line-height:1.2}
.online-battle .enigma-duel-field .duel-total{margin:0;height:36px;box-sizing:border-box}
.online-battle .enigma-duel-field .online-choice-empty{height:100%;box-sizing:border-box}
@media(max-width:650px){.online-battle .online-field .enigma-duel-field{height:290px;min-height:290px}.online-battle .enigma-duel-field .duel-side{grid-template-rows:30px minmax(0,1fr) 32px;gap:6px}.online-battle .enigma-duel-field .duel-card-list{--stack-card-height:66px;--stack-step:max(24px,min(48px,calc((100% - var(--stack-card-height)) / max(1,var(--stack-count) - 1))))}.online-battle .enigma-duel-field .duel-card-row{grid-template-columns:36px minmax(0,1fr);grid-template-rows:25px 23px;padding:5px;gap:3px 4px}.online-battle .enigma-duel-field .duel-card-row .card-art{width:36px;height:52px;min-height:52px}.online-battle .enigma-duel-field .duel-card-row .card-art>svg{width:32px;height:32px}.online-battle .enigma-duel-field .duel-card-name{max-height:25px}.online-battle .enigma-duel-field .duel-total{height:32px}}

/* More compact battle chrome; selection is confirmed on empty field space. */
.online-battle .online-field .enigma-duel-field{height:310px;min-height:310px}
.online-battle .online-field:focus-visible{outline:2px solid #f4d795;outline-offset:2px}
.online-battle .online-arena{padding:7px;margin-top:4px;margin-bottom:4px}
.online-battle .online-arena .fighter .avatar{height:54px}
@media(max-width:650px){.online-battle .online-field .enigma-duel-field{height:260px;min-height:260px}.online-battle .online-arena .fighter .avatar{height:34px}}

/* Illustration-first hand: original ENIGMA art with an attribute-colored stat strip. */
.online-battle .hand{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:auto;gap:4px;overflow:visible;padding:5px 2px 8px}
.online-battle .hand .card,.online-battle .hand .card.is-selected{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 21px;align-content:stretch;height:auto;min-height:0;aspect-ratio:1/1.2;gap:0;padding:0;border:1px solid #b0cba9;border-radius:5px;background:#e5f8d8;overflow:hidden;touch-action:manipulation}
.online-battle .hand .card .card-art{display:grid;width:100%;height:100%;min-height:0;box-sizing:border-box;border:0;border-radius:3px 3px 0 0;grid-row:1}
.online-battle .hand .card .card-art>svg{width:85%;height:85%;max-width:none;max-height:none}
.online-battle .hand .card .card-art>i{display:none}
.hand-card-footer{grid-row:2;display:flex;align-items:center;justify-content:center;gap:1px;width:100%;min-width:0;box-sizing:border-box;background:#e5f8d8;color:var(--hand-attribute);font-size:clamp(10px,1.4vw,16px);font-weight:900;line-height:1;white-space:nowrap}
.hand-card-footer .hand-plus{font-size:1.65em;line-height:.75;color:#936508}
.hand-attribute{position:absolute;top:3px;left:3px;z-index:2;display:grid;place-items:center;min-width:17px;height:17px;padding:1px;border-radius:4px;background:#f1ffe9ed;color:var(--hand-attribute);font-size:11px;font-weight:900;line-height:1}
.hand-mp{position:absolute;right:2px;bottom:24px;z-index:2;padding:2px 3px;border-radius:4px;background:#22152fe0;color:#fff0c6;font-size:8px;line-height:1}
.online-battle .hand .card.card-unavailable{opacity:.65;filter:none}
@media(max-width:650px){.online-battle .hand{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:3px}.online-battle .hand .card,.online-battle .hand .card.is-selected{height:auto;aspect-ratio:1/1.15;grid-template-rows:minmax(0,1fr) 19px;padding:0}.hand-card-footer{font-size:11px}.hand-attribute{min-width:14px;height:14px;font-size:9px;top:2px;left:2px}.hand-mp{bottom:21px;font-size:7px}}

.rules-body{font-size:14px;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}
.free-pet-picker{position:relative;z-index:11;margin:8px 0;border:1px solid var(--gold);border-radius:12px;background:#251b44}
.free-pet-picker .online-pet-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:10px;gap:8px}
.free-pet-picker .online-pet-controls>b{grid-column:1/-1;white-space:normal}
.free-pet-picker .online-pet-controls button{width:100%;min-width:0;min-height:44px;white-space:normal;font-size:12px;touch-action:manipulation}
.rules-attribute-table{width:100%;border-collapse:collapse;margin:8px 0;text-align:left}
.rules-attribute-table th,.rules-attribute-table td{padding:5px 9px;border-bottom:1px solid #ffffff25}
.rules-attribute-table th{color:var(--gold)}