/* Arena viewport layout; editor and collection keep their document layout. */
.game-page{height:100vh;height:100dvh;display:grid;grid-template-rows:56px minmax(0,1fr);overflow:hidden;overscroll-behavior:none}.game-page>header{height:auto;padding:0 max(16px,env(safe-area-inset-left));gap:25px}.game-page main{width:100%;max-width:1600px;min-height:0;margin:0 auto;padding:10px 18px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}.game-page .intro{margin:0;min-height:32px;display:flex;gap:15px;flex-shrink:0;align-items:center}.game-page .intro>div:not(.arena-toolbar){display:none}.game-page .intro #restart{margin:0;padding:7px 12px;font-size:11px;min-height:32px}.arena-toolbar{display:flex;align-items:center;gap:8px;flex:1;font-size:10px;letter-spacing:2px;color:var(--lime)}.arena-toolbar .outline{padding:7px 10px;font-size:10px;letter-spacing:0;min-height:32px}.arena-toolbar #openHistory{margin-left:auto}.game-page .layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 245px;gap:12px}.game-page .arena{min-width:0;min-height:0;display:grid;grid-template-rows:40px 30px 46px minmax(0,1fr) 24px minmax(0,1fr) 46px 40px 0px 40px clamp(90px,16dvh,150px);overflow:hidden;border-radius:12px}.game-page .player{padding:3px 14px;gap:9px;min-width:0}.game-page .avatar{width:30px;height:30px;flex-shrink:0;font-size:20px}.game-page .player strong{font-size:12px}.game-page .player small{font-size:9px;margin-top:1px}.game-page .life{width:115px;flex-shrink:0}.game-page .life b{font-size:17px}.game-page meter{height:6px;margin-top:0}.game-page .deck-row{padding:2px 12px;gap:9px;min-height:0;min-width:0}.game-page .deck-pile{height:25px;width:19px;font-size:12px;border-width:1px;box-shadow:2px 2px #846e49}.game-page .deck-pile small{display:none}.game-page .enemy-hand{height:100%;padding:1px 2px;overflow-y:hidden;align-items:center}.game-page .enemy-hand .card.model-card{width:16px;min-width:16px}.game-page .my-deck-row{overflow:visible;position:relative;border:0;z-index:1;padding:0}.game-page #youDeck{position:absolute;bottom:6px;right:15px;width:22px;height:30px;pointer-events:none}.game-page .my-deck-row>span{display:none}.game-page .field{container-type:size;min-height:0;padding:4px 12px;gap:clamp(8px,2vw,22px);overflow:visible}.game-page .field .card.model-card,.game-page .field .slot{width:min(26cqw,calc((100cqh - 15px)*.6847),145px);min-width:0;flex-shrink:0;aspect-ratio:1038/1516;height:auto;max-height:calc(100cqh - 15px)}.game-page .slot{font-size:22px;border-radius:5px}.battle-stats{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:9px;white-space:nowrap;background:#0b130eee;border:1px solid #405238;border-radius:4px;padding:2px 4px;color:#ecffd9;line-height:1;z-index:2;pointer-events:none}.game-page .spell-row{min-height:0;padding:3px;gap:10px;overflow:visible}.game-page .spell-row .card.model-card,.game-page .spell-slot{width:26px;min-width:26px;aspect-ratio:1038/1516;height:auto;max-height:38px}.game-page .spell-label{writing-mode:horizontal-tb;font-size:7px;letter-spacing:1px}.game-page .spell-row .badge{display:none}.game-page .divider{font-size:8px;gap:10px}.game-page .divider b{padding:4px 12px;font-size:8px}.game-page .handbar{padding:3px 12px;gap:10px;min-width:0}.game-page .handbar .primary{min-height:32px;padding:7px 12px;font-size:11px}.game-page .hand{container-type:size;min-height:0;align-items:center;padding:7px 12px;gap:10px;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x;overflow-y:hidden;scroll-snap-type:x proximity}.game-page .hand .card.model-card{width:calc((100cqh - 16px)*.6847);min-width:calc((100cqh - 16px)*.6847);max-width:110px;flex-shrink:0;scroll-snap-align:center}.game-page .hand .card:hover{transform:none}.game-page .game-sidebar{overflow-y:auto;min-height:0;display:block;scrollbar-width:thin}.game-page .panel{padding:14px;margin-bottom:10px}.game-page .panel h2{font-size:18px;margin:8px 0 12px}.game-page .detail-art.full-card{max-width:min(100%,calc(29dvh * .6847));margin:0 auto}.game-page #actions button{min-height:40px;font-size:12px}.game-page .panel>p:not(.eyebrow){font-size:11px;line-height:1.4}.game-page .footnote{font-size:7px}.game-page dialog{max-height:calc(100dvh - 30px);overflow-y:auto;overscroll-behavior:contain}.game-page .reaction-cards{flex-wrap:nowrap;overflow-x:auto;padding:4px;scroll-snap-type:x proximity}.game-page .reaction-choice{min-width:130px;flex-shrink:0;scroll-snap-align:start}.game-page #passReaction{min-height:44px;width:100%;position:sticky;bottom:0;background:#1a2016}.game-page .close{min-width:40px;min-height:40px}.card-sheet{padding:12px!important;max-width:450px!important}.card-sheet #detailPanel{border:0;margin:0;padding:10px}.card-sheet .detail-art.full-card{max-width:min(195px,calc(37dvh * .6847))}.card-sheet #actions{grid-template-columns:1fr;gap:8px}.card-sheet #actions button{min-height:44px}.card-sheet #detailText{font-size:13px}.card-sheet #detailName{font-size:20px}.card-sheet>.close{position:absolute;right:8px;top:4px;z-index:2}.card-sheet .eyebrow{padding-right:30px}#mobileLog p{font-size:12px;border-left:2px solid #6c8b3c;padding-left:10px;line-height:1.6}button,a,input,select,textarea{touch-action:manipulation}.game-page nav{gap:12px;align-items:center}.game-page nav button,.game-page nav a{min-height:40px;display:flex;align-items:center;justify-content:center}.game-page .version{font-size:8px;letter-spacing:1px}
@media(max-width:1000px){.game-page{grid-template-rows:48px minmax(0,1fr)}.game-page>header{gap:12px;padding:0 max(10px,env(safe-area-inset-left))}.game-page .brand{font-size:18px;flex-shrink:0}.game-page .brand small{font-size:6px;letter-spacing:3px;margin-top:2px}.game-page nav{margin-left:auto;gap:10px}.game-page nav button,.game-page nav a{font-size:10px}.game-page #collection{display:none}.game-page .version{display:none}.game-page main{padding:5px max(6px,env(safe-area-inset-left)) max(5px,env(safe-area-inset-bottom));gap:5px}.game-page .layout{display:flex;min-height:0}.game-page .arena{width:100%;grid-template-rows:36px 25px 38px minmax(0,1fr) 22px minmax(0,1fr) 38px 36px 0px 42px clamp(88px,17dvh,140px)}.game-page .game-sidebar{display:none}.game-page .intro{min-height:32px;gap:8px}.game-page .intro #restart{font-size:10px;padding:6px 8px}.game-page .arena-toolbar{font-size:9px;gap:6px}.game-page .arena-toolbar .outline{font-size:9px;padding:6px 8px}.game-page .handbar .primary{min-height:36px;font-size:11px}.game-page .handbar>span{font-size:9px;white-space:nowrap}.game-page .handbar small{font-size:9px}.game-page .player{padding:2px 10px}.game-page .player small{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-page .life{width:100px}.game-page .field .card.model-card,.game-page .field .slot{width:min(26cqw,calc((100cqh - 14px)*.6847),135px)}.game-page .spell-row{gap:9px}.game-page .spell-row .card.model-card,.game-page .spell-slot{width:22px;min-width:22px;max-height:33px}.game-page .hand .card.model-card{max-width:100px}.game-page .field{padding:3px 7px}.game-page .spell-label{font-size:6px}.game-page .card-sheet{margin:auto auto max(6px,env(safe-area-inset-bottom));width:calc(100% - 12px);border-radius:18px 18px 10px 10px}.game-page .card-sheet #detailPanel{display:grid;grid-template-columns:minmax(95px,.8fr) minmax(0,1fr);gap:8px 16px;align-items:start}.card-sheet #detailPanel>.eyebrow{grid-column:1/-1;margin:0}.card-sheet #detailName{grid-column:2;grid-row:2;margin:0;padding-right:20px}.card-sheet #detailArt{grid-column:1;grid-row:2/5;width:100%;max-width:180px}.card-sheet #detailText{grid-column:2;grid-row:3;margin:0;font-size:11px!important}.card-sheet #actions{grid-column:2;grid-row:4}.card-sheet #actions .help{font-size:9px;margin:0}.game-page #reactionModal{padding:20px 14px}.game-page #reactionTitle{font-size:20px;padding-right:10px}.game-page .reaction-choice{width:125px;min-width:125px}}
@media(max-width:380px){.game-page .brand{font-size:15px}.game-page nav{gap:6px}.game-page nav button,.game-page nav a{font-size:9px}.game-page .arena-toolbar>span{display:none}.game-page #status{max-width:150px}.game-page .life{width:85px}.game-page .handbar{gap:6px}.game-page .handbar small{font-size:8px}.game-page .handbar .primary{font-size:10px;padding:6px 9px}}
@media(max-height:650px) and (orientation:portrait){.game-page{grid-template-rows:42px minmax(0,1fr)}.game-page .arena{grid-template-rows:30px 20px 30px minmax(0,1fr) 18px minmax(0,1fr) 30px 30px 0px 38px 78px}.game-page .spell-row .card.model-card,.game-page .spell-slot{width:17px;min-width:17px}.game-page .player small{display:none}.game-page .avatar{width:24px;height:24px;font-size:16px}.game-page .intro{min-height:28px}.game-page .intro #restart,.game-page .arena-toolbar .outline{min-height:28px}.game-page .handbar .primary{min-height:32px}.battle-stats{font-size:8px;bottom:-10px}}
@media(max-width:1000px) and (orientation:landscape) and (max-height:600px){.game-page{grid-template-rows:42px minmax(0,1fr)}.game-page main{padding:3px max(6px,env(safe-area-inset-left)) max(3px,env(safe-area-inset-bottom));gap:3px}.game-page .intro{min-height:26px}.game-page .intro #restart,.game-page .arena-toolbar .outline{min-height:26px;padding:4px 8px}.game-page .arena{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 135px;grid-template-rows:32px 23px 34px minmax(0,1fr) 22px;gap:0}.game-page .player.enemy{grid-area:1/1}.game-page .enemy-deck-row{grid-area:2/1}.game-page #botSpells{grid-area:3/1}.game-page #enemyField{grid-area:4/1}.game-page #myField{grid-area:4/2}.game-page #youSpells{grid-area:3/2}.game-page .player:not(.enemy){grid-area:1/2}.game-page .my-deck-row{grid-area:2/2;position:relative;padding:2px 10px;overflow:hidden}.game-page #youDeck{position:static;width:17px;height:22px}.game-page .my-deck-row>span{display:block;font-size:7px}.game-page .divider{grid-area:5/1/6/3}.game-page .handbar{grid-area:1/3/3/4;flex-wrap:wrap;justify-content:center;padding:3px;gap:3px;border-left:1px solid var(--line)}.game-page .handbar small{font-size:7px}.game-page .handbar .primary{margin:0;width:100%;min-height:28px;font-size:9px;padding:4px}.game-page .hand{grid-area:3/3/6/4;flex-direction:column;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:7px;gap:10px;border-left:1px solid var(--line);container-type:normal;scroll-snap-type:y proximity}.game-page .hand .card.model-card{width:70px;min-width:70px;max-width:70px;flex-shrink:0}.game-page .field .card.model-card,.game-page .field .slot{width:min(26cqw,calc((100cqh - 14px)*.6847),100px)}.game-page .field{gap:8px}.game-page .life{width:75px}.game-page .player strong{font-size:10px}.game-page .player small{font-size:7px;max-width:120px}.game-page .avatar{width:23px;height:23px;font-size:16px}.game-page .spell-row .card.model-card,.game-page .spell-slot{width:19px;min-width:19px}.game-page .card-sheet{max-width:500px!important}.card-sheet #detailArt{max-width:130px}.game-page .reaction-choice{width:95px;min-width:95px}.game-page #reactionTitle{margin:5px 0}.game-page .reaction-cards{margin:8px 0}.game-page #reactionEvent{margin:4px 0;font-size:11px}.game-page #passReaction{min-height:36px}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.game-page .hand .card:hover{filter:brightness(1.12)}}
@media(max-width:1000px) and (orientation:portrait){.game-page .arena{grid-template-rows:32px 20px 28px minmax(0,1fr) 20px minmax(0,1fr) 28px 32px 0px 40px clamp(78px,14dvh,115px)}.game-page .spell-row .card.model-card,.game-page .spell-slot{width:17px;min-width:17px;max-height:25px}.game-page .field .card.model-card:before{content:'';position:absolute;inset:-5px;min-height:44px;min-width:44px}.game-page .field .card{touch-action:manipulation}}
@media(max-height:650px) and (orientation:portrait){.game-page .arena{grid-template-rows:26px 18px 25px minmax(0,1fr) 16px minmax(0,1fr) 25px 26px 0px 36px 68px}.game-page .player strong{font-size:10px}.game-page .life b{font-size:15px}.game-page .player{padding:1px 8px}.game-page .handbar .primary{min-height:30px}.game-page .avatar{height:22px;width:22px;font-size:15px}}
.life-draining{color:#ff8875!important;text-shadow:0 0 15px #ff654a88}.damage-number{position:fixed;z-index:11020;font-weight:700;font-size:clamp(25px,5vw,45px);color:#ff8c76;text-shadow:0 3px 0 #4b130c,0 0 22px #fa603577;pointer-events:none;white-space:nowrap}.finisher-stage{position:fixed;inset:0;z-index:10004;pointer-events:none;background:radial-gradient(ellipse,#11150e66,#060908db);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-block:clamp(14px,5dvh,50px) solid #0009}.finisher-stage>span{font-size:clamp(23px,5vw,55px);font-weight:700;letter-spacing:5px;color:#ffe5a1;text-shadow:0 0 35px #ffad4666}.finisher-stage>small{font-size:9px;letter-spacing:4px;color:#ecd5a9}.duel-ghost.finisher-card{z-index:10006!important;transform-origin:center;box-shadow:0 0 45px #ffcf7055}.finisher-burst,.field-blast{position:fixed;z-index:10009;pointer-events:none;width:clamp(180px,45vw,650px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff3bbdd 0%,#ffbc6677 18%,#ef7d4422 45%,transparent 68%);border:2px solid #ffc66b66;box-shadow:0 0 80px #ff995533}.field-blast{width:min(90vw,900px);background:radial-gradient(circle,#ffdb8fbb,#fd8a5f44 25%,transparent 65%)}.field-fragment{z-index:10008}.arena[data-loser=bot] #enemyField,.arena[data-loser=bot] #botSpells,.arena[data-loser=bot] #botHand,.arena[data-loser=you] #myField,.arena[data-loser=you] #youSpells,.arena[data-loser=you] #hand{opacity:.08;filter:grayscale(1)}#sound[aria-pressed=false]{color:#839279}@media(max-width:380px){.game-page #fullscreen{font-size:0;padding:6px;min-width:30px}.game-page #fullscreen:before{content:'⛶';font-size:16px}.game-page .arena-toolbar{gap:4px}.game-page #sound{padding:6px;font-size:9px}}
/* Text colors inside the supplied card template must not inherit panel white. */
.game-page #detailArt .card-face,.game-page #detailArt .fixed-name,.game-page #detailArt .fixed-description,.game-page #detailArt .fixed-stats{color:#000!important;text-shadow:none!important}.game-page .arena{position:relative}.empty-collection{position:absolute;inset:0;z-index:60;background:radial-gradient(ellipse,#26341cf5,#10150bfa);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center;gap:15px}.empty-collection[hidden]{display:none}.empty-collection h2{font-size:clamp(23px,4vw,38px);color:var(--lime);margin:0}.empty-collection p{font-size:13px;line-height:1.6;max-width:320px;color:#bfceb0}.empty-collection a{text-decoration:none;min-height:44px;display:flex;align-items:center}#commandContext{line-height:1.5}
.play-notice{display:none}.play-notice[hidden]{display:none!important}@media(max-width:1000px){.play-notice{position:fixed;right:max(8px,env(safe-area-inset-right));top:95px;z-index:80;display:grid;grid-template-columns:43px minmax(0,1fr);gap:9px;width:min(235px,62vw);padding:9px;border:1px solid #75934b;border-radius:10px;box-shadow:0 7px 25px #0009;background:#172012f2;color:#eef8df;text-align:left}.play-notice small{display:block;color:var(--lime);font-size:8px;line-height:1.4}.play-notice strong{display:block;font-size:11px;margin:4px 0}.play-notice>span>span{font-size:9px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.notice-card{width:43px}.play-notice .fixed-name,.play-notice .fixed-description,.play-notice .fixed-stats{color:#000!important;text-shadow:none!important}}
/* Keep the effect notice compact and reserve its own grid track so it cannot push the hand off-screen. */
.game-page .arena{grid-template-rows:40px 30px 46px minmax(0,1fr) 24px minmax(28px,auto) minmax(0,1fr) 46px 40px 0px 40px clamp(90px,16dvh,150px)}
.active-effects{margin:2px 10px;padding:4px 8px;min-height:24px;max-height:42px;overflow:auto;font-size:clamp(9px,.75vw,11px);line-height:1.25;letter-spacing:0}
@media(max-width:1000px){.game-page .arena{grid-template-rows:36px 25px 38px minmax(0,1fr) 22px minmax(26px,auto) minmax(0,1fr) 38px 36px 0px 42px clamp(88px,17dvh,140px)}}

/* Online duel: expand the selected-card inspector on desktop and fit its content. */
@media (min-width: 1001px) {
  .online-game .layout {
    grid-template-columns: minmax(0, 1fr) minmax(350px, min(31vw, 460px));
    gap: clamp(10px, 1vw, 18px);
  }

  .online-game .game-sidebar {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(110px, .48fr) auto;
    gap: 8px;
    overflow: hidden;
  }

  .online-game #detailPanel {
    min-height: 0;
    margin: 0;
    padding: clamp(12px, 1.2vw, 20px);
    display: grid;
    grid-template-columns: minmax(125px, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    align-content: start;
    align-items: start;
    gap: 8px clamp(12px, 1vw, 18px);
    overflow: hidden;
  }

  .online-game #commandContext {
    grid-column: 1 / -1;
    margin: 0;
    font-size: clamp(8px, .65vw, 10px);
  }

  .online-game #detailName {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    font-size: clamp(17px, 1.3vw, 23px);
    overflow-wrap: anywhere;
  }

  .online-game #detailArt {
    grid-column: 1;
    grid-row: 2 / 6;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: start;
  }

  .online-game #detailArt.full-card {
    max-width: none;
    margin: 0;
  }

  .online-game #detailText {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    max-height: 100%;
    margin: 0;
    overflow: auto;
    overflow-wrap: anywhere;
    font-size: clamp(11px, .8vw, 14px);
    line-height: 1.5;
  }

  .online-game #actionPrompt {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    font-size: clamp(9px, .7vw, 11px);
    line-height: 1.35;
  }

  .online-game #actions {
    grid-column: 2;
    grid-row: 5;
    align-self: end;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 7px;
  }

  .online-game #actions button {
    min-height: 40px;
    padding: 8px;
    white-space: normal;
  }

  .online-game .game-sidebar .history {
    min-height: 0;
    margin: 0;
    overflow: auto;
  }

  .online-game #log {
    max-height: min(24dvh, 220px);
  }
}

@media (min-width: 1001px) and (max-height: 720px) {
  .online-game .game-sidebar {
    grid-template-rows: minmax(0, 1fr) minmax(86px, .38fr) auto;
  }

  .online-game #detailPanel {
    gap: 5px 10px;
    padding: 10px;
  }

  .online-game #detailText {
    font-size: 11px;
    line-height: 1.35;
  }
}