/* Presentation only. The original script owns all game state and board geometry. */ body{--ca-surface:#25291f;--ca-edge:#817253;--ca-soft:#c4c5b0;--ca-bright:#f0e9d6;font-family:var(--ca-sans)} body.theme-candlelit{--ca-surface:#16242c;--ca-edge:#758078;--ca-soft:#b9cbd0;--ca-bright:#edf2ec} .btn,select,.cardInfoBtn,.playCardBtn,.choice{border-radius:3px!important;transition:background .16s,border-color .16s,color .16s,transform .16s} .btn{font-weight:600} .btn:disabled{opacity:.5} .btn:active:not(:disabled){transform:translateY(1px)} .engineChip,.preThemeControl{border-radius:2px} .engineChip:before,.liveDot i{box-shadow:none!important} /* Set-up and opening hand use the same materials as the selected battle theme. */ html:has(body.preBattleMode){height:auto;min-height:100%;overflow-y:auto} body.preBattleMode{height:auto!important;overflow-y:auto!important;--muted:#c5c9b7} body.preBattleMode .preBattlePanel{padding:27px!important;border-radius:4px!important;background:linear-gradient(115deg,#2b3025f7,#1c241bf7)!important;border:1px solid #a9956a!important;box-shadow:0 10px 26px #19170f30!important;backdrop-filter:none;-webkit-backdrop-filter:none} body.preBattleMode .preBattlePanel:before{inset:7px;border-radius:1px;border-color:#b7a57729} body.preBattleMode.theme-candlelit .preBattlePanel{background:linear-gradient(115deg,#1b2c34f7,#111c24f7)!important;border-color:#9d9274!important;box-shadow:0 10px 26px #050b1050!important} .preBattleHeader{padding-bottom:19px;border-color:#9f9c7150;gap:20px} .preBattleKicker{font-size:12px;letter-spacing:.12em;font-weight:600;color:#dac292;margin-bottom:9px} .preBattleHeader .title{font-family:var(--ca-serif);font-weight:500;font-size:34px;letter-spacing:-.035em;line-height:1.1;color:#f0e9d6} body.preBattleMode .preBattleIntro{font-size:16px!important;line-height:1.55;color:#c6cbb9!important;margin-top:11px;max-width:62ch} body.preBattleMode.theme-candlelit .preBattleIntro{color:#bfced3!important} body.preBattleMode .setup{gap:15px!important} body.preBattleMode .sectionTitle{font-family:var(--ca-serif);font-size:22px!important;font-weight:500;letter-spacing:-.02em;color:#eee6cf;margin-top:5px!important} body.preBattleMode .label{font-size:14px!important;font-weight:550;letter-spacing:.02em;color:#ccd1bd!important} body.preBattleMode.theme-candlelit .label{color:#c5d4d9!important} body.preBattleMode select{background:#161f16!important;color:#f0eddf!important;border-color:#777c5d!important;font-size:16px!important;font-weight:400!important;min-height:46px!important;padding:9px 12px!important;border-radius:2px!important} body.preBattleMode select:hover{border-color:#c4b481!important} body.preBattleMode.theme-candlelit select{background:#0e1c26!important;color:#eaf0ed!important;border-color:#657b82!important} .preThemeControl{border:0!important;background:none!important;padding:0;gap:10px} .preThemeControl>span{font-size:11px;font-weight:600;color:#cfbf9c;letter-spacing:.08em} body.preBattleMode .preThemeControl select{font-size:14px!important;min-height:44px!important;width:auto!important;max-width:195px;padding:8px!important} .preBattleMeta{min-width:240px;gap:12px} .engineChip{font-size:12px;font-weight:550;min-height:32px;background:#192318;border-color:#5d694a;color:#cbd7bc;letter-spacing:0} .engineChip.isOnline{background:#243729;border-color:#698365;color:#d5e4c8}.engineChip.isOffline{color:#f8ccc4;background:#432c26;border-color:#a47a66} body.preBattleMode .btn{background:#303d29!important;border-color:#7d8560!important;color:#ece8d8!important;box-shadow:none!important;font-size:16px!important;font-weight:600} body.preBattleMode .btn:hover:not(:disabled){background:#3e4b33!important;border-color:#c4b481!important;transform:none} body.preBattleMode .btn.primary{background:#d3bd8c!important;color:#24281d!important;border-color:#ebd6a9!important;box-shadow:inset 0 -3px #5b4b2530!important} body.preBattleMode .btn.primary:hover:not(:disabled){background:#e3cfa3!important} body.preBattleMode .btn.good{background:#304c37!important;border-color:#83a17a!important;color:#e6f2df!important} body.preBattleMode.theme-candlelit .btn{background:#253b44!important;border-color:#67818a!important;color:#e3edeb!important} body.preBattleMode.theme-candlelit .btn.primary{background:#d3bd8c!important;color:#24281d!important;border-color:#ebd6a9!important} body.preBattleMode.theme-candlelit .btn.good{background:#284d43!important;border-color:#779c88!important;color:#e3f3e7!important} .preBattleActions{padding-top:9px} .mulliganHeader .openingTitle{font-size:34px!important} body.preBattleMode #mulligan .card{border-radius:3px!important;background:#192318!important;border-color:#8a805b!important;box-shadow:none!important;padding:14px!important;gap:10px} body.preBattleMode #mulligan .cardTitle{font-family:var(--ca-serif);font-size:19px!important;line-height:1.15;font-weight:550;color:#f1e6ca!important} body.preBattleMode #mulligan .card .effect{font-size:14px!important;line-height:1.5!important;color:#d1d8c3!important;display:block!important;overflow:visible!important} body.preBattleMode #mulligan .cardType{font-size:11px!important;letter-spacing:.06em;font-weight:600} body.preBattleMode #mulligan .cardAccess{font-size:12px!important;line-height:1.4;color:#b8c4a5!important} body.preBattleMode #mulligan .notPlayable{font-size:10px;color:#afba9e;line-height:1.4} body.preBattleMode #mulligan .cardInfoBtn{min-height:34px!important;font-size:12px!important;padding:5px 8px!important;background:#28351f!important;color:#ecdfbd!important;border-color:#7f875f!important} body.preBattleMode.theme-candlelit #mulligan .card{background:#11232d!important;border-color:#66808b!important;box-shadow:none!important} body.preBattleMode.theme-candlelit #mulligan .card .effect{color:#d4e0df!important} body.preBattleMode.theme-candlelit #mulligan .cardAccess{color:#b6ced0!important} body.preBattleMode.theme-candlelit #mulligan .cardInfoBtn{background:#243b43!important;color:#e4ece5!important} .mulliganHand{scrollbar-color:#b29a69 #182216;scroll-snap-type:x proximity} .mulliganHand::-webkit-scrollbar-track{background:#182216;border-radius:1px} .mulliganHand::-webkit-scrollbar-thumb{background:#b29a69;border-radius:1px;border:2px solid #182216} /* Choice and feedback dialogs are legible in both existing themes. */ .modalBack,.postMatchBack{background:#080e0cc7;backdrop-filter:none;-webkit-backdrop-filter:none} body .modal,body.battleMode .modal,body .globalTip,body.battleMode .globalTip,.postMatchModal{background:#242f22!important;border-color:#a99c73!important;border-radius:4px;box-shadow:0 12px 40px #0005!important;color:#eee8d6!important} body.theme-candlelit .modal,body.theme-candlelit .globalTip,body.theme-candlelit .postMatchModal{background:#172b34!important;border-color:#8a9590!important} .modal{padding:22px} .modal .title{font-family:var(--ca-serif);font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1.2} .modal .muted{font-size:16px;line-height:1.6;color:#c5d1bc} body.theme-candlelit .modal .muted{color:#c4d7da} body .choice,body.battleMode .choice{background:#303e2b!important;border-color:#768460!important;color:#eee6cd!important;font-size:16px} body.theme-candlelit .choice{background:#28424a!important;border-color:#6f8c92!important;color:#ebf1e8!important} body .choice.selected{background:#495537!important;border-color:#ddc186!important} .postMatchModal{padding:32px} .postMatchKicker{font-size:12px;font-weight:600;letter-spacing:.15em;color:#d6c08d} .postMatchModal h2{font-family:var(--ca-serif);font-size:35px;font-weight:500;letter-spacing:-.04em;line-height:1.15;margin:15px 0} .postMatchModal p{font-size:16px;line-height:1.6;color:#cad4ba} body.theme-candlelit .postMatchModal p{color:#c3d4d8} .postMatchFeedback{background:#d5bd88;border-color:#e4d3ac;border-radius:2px;color:#222a1d!important;font-size:16px;font-weight:650;box-shadow:none} .postMatchSecondary .btn,.postMatchSecondary a{min-height:44px;border-radius:2px;font-size:14px;font-weight:550;background:#1b2619;border-color:#7c8562;color:#e5e5cd!important} body .postMatchSecondary .btn{background:#1b2619!important;border-color:#7c8562!important} body.theme-candlelit .postMatchSecondary .btn,body.theme-candlelit .postMatchSecondary a{background:#172b34!important;border-color:#6b8487!important} select option,select optgroup{background:#182417!important;color:#f1ecda!important} body.theme-candlelit select option,body.theme-candlelit select optgroup{background:#12252e!important;color:#ebf3ec!important} /* Fixed tabletop geometry is deliberately untouched: only edge/material/type changes. */ body.battleMode .hero,body.battleMode .heroPortrait,body.battleMode .masterySlot,body.battleMode .card,body.battleMode #logPanel,body.battleMode .footerActions,body.battleMode #handPanel,body.battleMode #topPanel,body.battleMode .matZoneHud{border-radius:4px!important} body.battleMode .heroName{font-family:var(--ca-serif);font-weight:600;letter-spacing:-.035em} body.battleMode .cardTitle{font-family:var(--ca-sans);font-weight:650;letter-spacing:-.01em} body.battleMode .hero,body.battleMode .card,body.battleMode #logPanel,body.battleMode .footerActions,body.battleMode #handPanel,body.battleMode #topPanel,body.battleMode .matZoneHud{box-shadow:0 3px 8px #191b1230!important} body.battleMode .card.playable{border-color:#e5c17e!important;box-shadow:inset 0 0 0 1px #e5c17e!important} body.battleMode .card.playable:hover{box-shadow:inset 0 0 0 1px #eed5a0,0 3px 8px #1116!important} body.battleMode #logPanel,body.battleMode .footerActions{background:#252d20f7!important;border-color:#8b815f!important;filter:none!important} body.battleMode #handPanel{background:#1c281bf7!important;border-color:#807e5a!important} body.battleMode .card{background:#273222!important;border-color:#7d7d56!important} body.battleMode .card .effect{color:#dae0c8!important} body.battleMode .cardAccess{color:#bfcbac!important} body.battleMode .notPlayable{color:#a9b39a!important} body.battleMode #topPanel{background:#273322!important;border-color:#a19667!important} body.battleMode .footerActions .btn,body.battleMode .cardInfoBtn{background:#34422b!important;border-color:#737e54!important;color:#e7e6cc!important;font-weight:600} body.battleMode .footerActions .btn:hover:not(:disabled){background:#435038!important;border-color:#b5ab7b!important} body.battleMode .matZoneHud{background:#35402b!important;border-color:#89875d!important;color:#ead7a8!important} body.battleMode #arenaTheme{border-radius:2px!important;background:#1b2819!important;border-color:#8b906d!important;color:#eee6cb!important;font-family:var(--ca-sans)!important;font-size:13px!important} body.battleMode #themeControl label{font-size:10px;color:#d0c49e} body.battleMode.theme-candlelit #logPanel,body.battleMode.theme-candlelit .footerActions{background:#14252df7!important;border-color:#7d8881!important} body.battleMode.theme-candlelit #handPanel{background:#10232df7!important;border-color:#748780!important} body.battleMode.theme-candlelit #topPanel{background:#1a3139!important;border-color:#9b9474!important} body.battleMode.theme-candlelit .card{background:#1e353e!important;border-color:#78918f!important} body.battleMode.theme-candlelit .cardTitle{color:#f1ecd9!important} body.battleMode.theme-candlelit .card .effect{color:#d6e3dc!important} body.battleMode.theme-candlelit .cardAccess{color:#c0d5d1!important} body.battleMode.theme-candlelit .notPlayable{color:#afc3c2!important} body.battleMode.theme-candlelit .footerActions .btn,body.battleMode.theme-candlelit .cardInfoBtn{background:#2c454c!important;border-color:#75938e!important;color:#edf0df!important} body.battleMode.theme-candlelit .matZoneHud{background:#20383f!important;border-color:#829182!important} body.battleMode.theme-candlelit #arenaTheme{background:#132b34!important;border-color:#82988d!important;color:#eef1de!important} @media(min-width:1000px){ body.battleMode #pcPanel,body.battleMode #youPanel{border-radius:9px!important;border-color:#aa8c53!important;box-shadow:0 0 0 5px #283222,0 0 0 6px #a18a58,0 6px 14px #191b1238!important} body.battleMode #pcPanel:before,body.battleMode #youPanel:before{border-radius:4px!important;box-shadow:none!important} body.battleMode #pcPanel:after,body.battleMode #youPanel:after{border-radius:2px!important;background:#293423!important;box-shadow:none!important} body.battleMode #pcHeroes>*:before,body.battleMode #youHeroes>*:before{border-radius:6px;box-shadow:none} body.battleMode .hero{background:linear-gradient(135deg,#f5eddb,#e1d6b9)!important;border-color:#9c8c61!important} body.battleMode .heroMeta{color:#5f6249!important}.hero.battleMode .badgeLabel{color:#5a6042!important} body.battleMode .hero .badgeLabel{color:#60674b!important} body.battleMode .statusPill.neutral{color:#62664e!important;opacity:1!important} body.battleMode .emptyMastery{color:#63674f!important} body.battleMode .passiveBadge,body.battleMode .pathBadge{border-radius:3px!important;border-color:#a6a283!important;background:#f3efdd!important;color:#444b35!important} body.battleMode .statLabel,body.battleMode .statMax{color:#6a684e!important} body.battleMode .heroActions .btn{background:#344329!important;border-color:#72835b!important;color:#f0ecd5!important;border-radius:2px!important} body.battleMode .masterySlot{background:#eeead5!important;border-color:#a7a47f!important} body.battleMode .mastery,body.battleMode .masteryHint{color:#535b3d!important} body.battleMode.theme-candlelit #pcPanel,body.battleMode.theme-candlelit #youPanel{box-shadow:0 0 0 5px #203540,0 0 0 6px #988861,0 6px 14px #060b1250!important} } @media(max-width:999px){ body.battleMode #pcPanel,body.battleMode #youPanel,body.battleMode #referencePanel{background:#202c1ce8;border-color:#8d9369;box-shadow:none} body.battleMode.theme-candlelit #pcPanel,body.battleMode.theme-candlelit #youPanel,body.battleMode.theme-candlelit #referencePanel{background:#142a32e8;border-color:#7a9692} body.battleMode .heroActions .btn{min-height:44px!important;height:auto!important;font-size:11px!important;line-height:1.3!important;white-space:normal!important;padding:6px!important} body.battleMode .card{min-height:236px;padding:10px} body.battleMode .cardTitle{font-size:16px!important;line-height:1.2} body.battleMode .cardType{font-size:11px;letter-spacing:.05em} body.battleMode .card .effect{font-size:13px!important;line-height:1.5!important} body.battleMode .cardAccess{font-size:11px;line-height:1.4} body.battleMode .notPlayable{font-size:10px;white-space:normal} body.battleMode .cardInfoBtn,body.battleMode .playCardBtn{min-height:40px!important;font-size:12px!important;padding:5px 7px!important} body.battleMode{padding-bottom:calc(116px + env(safe-area-inset-bottom))!important} body.battleMode .footerActions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;justify-content:stretch;padding:8px 10px calc(8px + env(safe-area-inset-bottom))} body.battleMode .footerActions .btn{min-width:0;min-height:44px;max-width:none;font-size:12px;line-height:1.25;padding:6px 4px} body.battleMode #themeControl{grid-column:1/-1;min-width:0;margin:0;padding:0;min-height:44px;justify-content:space-between} body.battleMode #arenaTheme{min-height:44px!important;height:44px!important;width:180px!important;margin:0!important;font-size:16px!important} body.battleMode .heroIdentity{min-width:0} body.battleMode .passiveBadge,body.battleMode .pathBadge{display:block;min-width:0;width:100%;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;line-height:1.35} body.battleMode .panel{border-radius:5px} body.battleMode .hero{background:#263522!important;border-color:#829168!important;color:#ece8d3!important} body.battleMode .heroName{color:#f0e9d3!important}.heroMeta{color:#bccdb0!important} body.battleMode .hpReadout strong,body.battleMode .defReadout strong{color:#ece4c8!important} body.battleMode .statLabel,body.battleMode .statMax{color:#c3ccb2!important} body.battleMode .statusPill{color:#ccd2ba!important;background:#34482b!important} body.battleMode .passiveBadge,body.battleMode .pathBadge{color:#e0e4c6!important;background:#2a3f21!important;border-color:#70845a!important;border-radius:3px!important} body.battleMode .badgeLabel{color:#c4d9af!important} body.battleMode .emptyMastery{color:#bfcdaa!important} body.battleMode .heroActions .btn{color:#ede8cf!important;background:#34452a!important} body.battleMode.theme-candlelit .hero{background:#203940!important;border-color:#7b9390!important} body.battleMode.theme-candlelit .passiveBadge{background:#1a3037!important;border-color:#688c83!important} body.battleMode .footerActions .btn{border-radius:3px!important} } @media(max-width:560px){ body.battleMode{padding-bottom:calc(166px + env(safe-area-inset-bottom))!important} body.battleMode .footerActions{grid-template-columns:repeat(3,minmax(0,1fr))} body.battleMode .heroTop{row-gap:5px} body.battleMode .heroName{white-space:normal;overflow-wrap:normal;line-height:1.2} } @media(max-width:760px){ body.preBattleMode .preBattlePanel{padding:21px 16px!important;border-radius:3px!important} .preBattleHeader .title{font-size:30px}.preBattleKicker{font-size:11px;line-height:1.6;letter-spacing:.09em} .preBattleMeta{min-width:0}.preThemeControl{justify-content:space-between} body.preBattleMode .preBattleIntro{font-size:16px!important} body.preBattleMode .preThemeControl select{font-size:16px!important;max-width:210px} body.preBattleMode .btn{font-size:15px!important} .mulliganHand{max-width:100%}.mulliganHeader .openingTitle{font-size:31px!important} .modal{padding:20px 16px}.modal .title{font-size:25px} .postMatchModal{padding:26px 19px}.postMatchModal h2{font-size:31px} } /* === FIX36 card readability: enlarge hand cards on desktop hover/focus === Presentation-only. Keeps the card anchored to the hand, raises it above neighboring cards, and avoids clipping while leaving gameplay untouched. */ @media (min-width:1000px) and (hover:hover) and (pointer:fine){ body.battleMode #handPanel{ overflow:visible!important; } body.battleMode #hand{ overflow:visible!important; } body.battleMode #hand .card{ transform-origin:center bottom; transition:transform .18s ease, border-color .16s ease, filter .16s ease, box-shadow .18s ease!important; will-change:transform; } body.battleMode #hand .card:first-child{transform-origin:left bottom} body.battleMode #hand .card:last-child{transform-origin:right bottom} body.battleMode #hand .card:hover, body.battleMode #hand .card:focus, body.battleMode #hand .card:focus-within{ transform:translateY(-14px) scale(1.42)!important; z-index:90!important; box-shadow:0 18px 40px rgba(0,0,0,.50),0 0 0 1px rgba(238,213,160,.62)!important; filter:brightness(1.06)!important; } /* Raise the hand tray's stacking context only while a card is focused. */ body.battleMode #handPanel:has(#hand .card:hover), body.battleMode #handPanel:has(#hand .card:focus), body.battleMode #handPanel:has(#hand .card:focus-within){ z-index:80!important; } } /* === FIX36 card focus refinement === Hand cards are slightly larger on hover. Active Mastery slots reveal a full readable card preview on desktop hover/focus; mobile retains the info button. */ .masteryCardPreview{ position:fixed; z-index:10050; width:250px; max-width:calc(100vw - 28px); pointer-events:none; opacity:0; visibility:hidden; transform:translateY(5px) scale(.98); transition:opacity .14s ease,transform .14s ease,visibility .14s ease; } .masteryCardPreview.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } body.battleMode .masteryCardPreview .masteryPreviewCard{ height:auto!important; min-height:235px!important; width:100%!important; padding:12px!important; overflow:hidden!important; border-radius:8px!important; box-shadow:0 22px 52px rgba(0,0,0,.58),0 0 0 1px rgba(238,213,160,.44)!important; filter:none!important; } body.battleMode .masteryCardPreview .cardTitle{ font-size:18px!important; line-height:1.12!important; } body.battleMode .masteryCardPreview .cardType{ font-size:10px!important; } body.battleMode .masteryCardPreview .costGem{ width:40px!important; height:40px!important; } body.battleMode .masteryCardPreview .costGem b{ font-size:18px!important; line-height:16px!important; } body.battleMode .masteryCardPreview .costGem small{ font-size:6px!important; } body.battleMode .masteryCardPreview .effect{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; font-size:13.5px!important; line-height:1.42!important; margin-top:8px!important; } body.battleMode .masteryCardPreview .cardAccess{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; font-size:10px!important; line-height:1.35!important; margin-top:8px!important; } .masteryPreviewFooter{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid rgba(203,155,70,.28); font-size:9px; letter-spacing:.08em; color:#bba77f; } .masteryPreviewFooter strong{ color:#efd596; font-size:10px; } @media (hover:none),(pointer:coarse){ .masteryCardPreview{display:none!important} } /* === FIX36 right-rail vignette layout === Desktop only: reserve a stable center-right home for action details. The physical mats stay untouched. */ @media (min-width:1000px){ body.battleMode #logPanel{ top:22px!important; height:218px!important; } body.battleMode .footerActions{ top:646px!important; height:178px!important; } body.battleMode .footerActions{ grid-template-columns:1fr 1fr!important; grid-auto-rows:38px!important; align-content:start!important; padding:8px!important; gap:7px!important; } body.battleMode .footerActions .btn{ min-height:38px!important; height:38px!important; } body.battleMode #themeControl{ height:40px!important; min-height:40px!important; align-self:start!important; } /* Keep the shorter battle history usable by scrolling internally. */ body.battleMode #logPanel .log{ overflow-y:auto!important; min-height:0!important; } } /* === FIX36 right-rail flow refinement === Desktop: log at top, a dedicated presentation/decision zone in the middle, and compact controls at the bottom. The tabletop geometry is untouched. */ @media (min-width:1000px){ body.battleMode #logPanel{ top:22px!important; height:170px!important; } body.battleMode .footerActions{ top:674px!important; height:150px!important; padding:7px!important; grid-template-columns:1fr 1fr!important; grid-auto-rows:32px!important; gap:5px!important; align-content:start!important; } body.battleMode .footerActions .btn{ min-height:32px!important; height:32px!important; padding:4px 5px!important; font-size:9px!important; line-height:1.1!important; } body.battleMode #themeControl{ grid-column:1/-1!important; min-height:32px!important; height:32px!important; margin:0!important; padding:0!important; } body.battleMode #arenaTheme{ min-height:32px!important; height:32px!important; font-size:11px!important; } body.battleMode #logPanel .log{ min-height:0!important; overflow-y:auto!important; } /* Mastery decisions use the same middle-right presentation zone as battle actions. */ body.battleMode .modalBack.railDecision{ background:rgba(3,7,13,.10)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; align-items:flex-start!important; justify-content:flex-start!important; } body.battleMode .modalBack.railDecision .modal{ position:fixed!important; margin:0!important; max-width:none!important; max-height:none!important; overflow:hidden!important; border-radius:12px!important; padding:14px!important; } body.battleMode .modalBack.railDecision .row.between{ display:block!important; } body.battleMode .modalBack.railDecision #modalClose{ display:none!important; } body.battleMode .modalBack.railDecision #modalTitle{ font-size:18px!important; line-height:1.15!important; } body.battleMode .modalBack.railDecision #modalTitle:before{ font-size:8px!important; margin-bottom:3px!important; } body.battleMode .modalBack.railDecision #modalText{ max-width:none!important; font-size:11px!important; line-height:1.38!important; margin-top:4px!important; } body.battleMode .modalBack.railDecision .choiceGrid{ grid-template-columns:1fr!important; gap:7px!important; margin-top:10px!important; } body.battleMode .modalBack.railDecision .choice{ min-height:48px!important; padding:9px!important; font-size:11px!important; line-height:1.3!important; } body.battleMode .modalBack.railDecision.railCompact .modal{ padding:11px!important; } body.battleMode .modalBack.railDecision.railCompact #modalTitle{font-size:16px!important} body.battleMode .modalBack.railDecision.railCompact #modalText{font-size:10px!important;line-height:1.3!important} body.battleMode .modalBack.railDecision.railCompact .choice{min-height:42px!important;padding:7px!important;font-size:10px!important} body.battleMode .modalBack.railDecision.railCompact .choiceGrid{gap:5px!important;margin-top:7px!important} } /* === FIX36 persistent right-rail information card === Desktop only. The empty card is always present, action details and Active Mastery occupy this exact slot, and the controls keep their readable size. */ @media (min-width:1000px){ body.battleMode #logPanel{ top:22px!important; height:170px!important; } body.battleMode #battleInfoPanel{ display:block!important; position:absolute!important; left:1352px!important; top:204px!important; width:230px!important; height:414px!important; margin:0!important; padding:0!important; overflow:hidden!important; border-radius:22px!important; background: linear-gradient(180deg,rgba(25,43,29,.98),rgba(18,31,22,.99))!important; border:1px solid rgba(203,155,70,.40)!important; box-shadow: 0 10px 26px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,242,199,.025)!important; z-index:34!important; pointer-events:none!important; } body.battleMode .footerActions{ top:630px!important; height:194px!important; padding:8px!important; grid-template-columns:1fr 1fr!important; grid-auto-rows:38px!important; gap:7px!important; align-content:start!important; } body.battleMode .footerActions .btn{ min-height:38px!important; height:38px!important; padding:6px!important; font-size:10px!important; line-height:1.15!important; } body.battleMode #themeControl{ grid-column:1/-1!important; min-height:40px!important; height:40px!important; margin-top:2px!important; padding:2px 2px 4px 2px!important; } body.battleMode #arenaTheme{ min-height:32px!important; height:32px!important; font-size:10px!important; } /* Active Mastery uses the permanent card's exact footprint. */ body.battleMode .modalBack.railDecision{ background:rgba(6,9,7,.16)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; align-items:flex-start!important; justify-content:flex-start!important; } body.battleMode .modalBack.railDecision .modal{ position:fixed!important; margin:0!important; max-width:none!important; max-height:none!important; overflow:hidden!important; border-radius:22px!important; padding:17px!important; background: linear-gradient(180deg,rgba(25,43,29,.995),rgba(18,31,22,.995))!important; border:1px solid rgba(203,155,70,.52)!important; box-shadow:0 12px 32px rgba(0,0,0,.38)!important; } body.battleMode .modalBack.railDecision .row.between{display:block!important} body.battleMode .modalBack.railDecision #modalClose{display:none!important} body.battleMode .modalBack.railDecision #modalTitle{ font-size:20px!important; line-height:1.15!important; margin-bottom:7px!important; } body.battleMode .modalBack.railDecision #modalTitle:before{ font-size:9px!important; margin-bottom:5px!important; } body.battleMode .modalBack.railDecision #modalText{ white-space:normal!important; overflow-wrap:anywhere!important; max-width:none!important; font-size:12px!important; line-height:1.42!important; margin-top:4px!important; } body.battleMode .modalBack.railDecision .choiceGrid{ grid-template-columns:1fr!important; gap:9px!important; margin-top:13px!important; } body.battleMode .modalBack.railDecision .choice{ min-height:64px!important; height:auto!important; padding:11px!important; font-size:12px!important; line-height:1.35!important; white-space:normal!important; overflow-wrap:anywhere!important; } body.battleMode .modalBack.railDecision.railCompact .modal{padding:13px!important} body.battleMode .modalBack.railDecision.railCompact #modalTitle{font-size:17px!important} body.battleMode .modalBack.railDecision.railCompact #modalText{font-size:10.5px!important;line-height:1.32!important} body.battleMode .modalBack.railDecision.railCompact .choiceGrid{gap:6px!important;margin-top:9px!important} body.battleMode .modalBack.railDecision.railCompact .choice{min-height:50px!important;padding:8px!important;font-size:10.5px!important} } @media (max-width:999px){ #battleInfoPanel{display:none!important} } /* === FIX36 audited decision fit === All in-battle decisions stay inside the permanent right-side card. The rail is narrow, so 6+ choices stay in one compact column instead of wrapping into unreadable half-width buttons. */ @media (min-width:1000px){ body.battleMode .modalBack.railDecision .modal{ box-sizing:border-box!important; overflow:hidden!important; } body.battleMode .modalBack.railDecision .choiceGrid{ grid-template-columns:1fr!important; min-width:0!important; } body.battleMode .modalBack.railDecision .choice{ width:100%!important; max-width:100%!important; box-sizing:border-box!important; overflow:hidden!important; white-space:normal!important; } body.battleMode .modalBack.railDecision .choice b, body.battleMode .modalBack.railDecision .choice .muted{ display:block!important; max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; } /* 1–3 visual choices */ body.battleMode .modalBack.railDecision:not(.railMany) .modal{ padding:14px!important; } body.battleMode .modalBack.railDecision:not(.railMany) #modalTitle{ font-size:18px!important; line-height:1.1!important; margin-bottom:4px!important; } body.battleMode .modalBack.railDecision:not(.railMany) #modalText{ font-size:10.5px!important; line-height:1.28!important; margin-top:2px!important; } body.battleMode .modalBack.railDecision:not(.railMany) .choiceGrid{ gap:7px!important; margin-top:9px!important; } body.battleMode .modalBack.railDecision:not(.railMany) .choice{ min-height:48px!important; padding:8px!important; font-size:10px!important; line-height:1.2!important; } body.battleMode .modalBack.railDecision:not(.railMany) .choice .muted{ margin-top:2px!important; font-size:8px!important; line-height:1.14!important; } /* 4–5 visual rows */ body.battleMode .modalBack.railDecision.railMany:not(.railGrid) .modal{ padding:10px!important; } body.battleMode .modalBack.railDecision.railMany:not(.railGrid) #modalTitle{ font-size:16px!important; line-height:1.08!important; margin-bottom:3px!important; } body.battleMode .modalBack.railDecision.railMany:not(.railGrid) #modalText{ font-size:9px!important; line-height:1.18!important; margin-top:1px!important; } body.battleMode .modalBack.railDecision.railMany:not(.railGrid) .choiceGrid{ gap:4px!important; margin-top:6px!important; } body.battleMode .modalBack.railDecision.railMany:not(.railGrid) .choice{ min-height:38px!important; padding:5px 7px!important; font-size:9px!important; line-height:1.12!important; } body.battleMode .modalBack.railDecision.railMany:not(.railGrid) .choice .muted{ margin-top:1px!important; font-size:7px!important; line-height:1.1!important; } /* 6+ visual rows, including Basic cycling and multi-target confirm UI */ body.battleMode .modalBack.railDecision.railGrid .modal{ padding:7px!important; } body.battleMode .modalBack.railDecision.railGrid #modalTitle{ font-size:13.5px!important; line-height:1.04!important; margin-bottom:1px!important; } body.battleMode .modalBack.railDecision.railGrid #modalText{ font-size:7.8px!important; line-height:1.12!important; margin-top:1px!important; } body.battleMode .modalBack.railDecision.railGrid .choiceGrid{ grid-template-columns:1fr!important; gap:3px!important; margin-top:4px!important; } body.battleMode .modalBack.railDecision.railGrid .choice{ min-height:29px!important; padding:3px 5px!important; font-size:7.8px!important; line-height:1.06!important; } body.battleMode .modalBack.railDecision.railGrid .choice .muted{ margin-top:1px!important; font-size:6.4px!important; line-height:1.05!important; } body.battleMode .modalBack.railDecision.railGrid .selectionCount{ padding:3px 5px!important; font-size:7px!important; min-height:22px!important; } body.battleMode .modalBack.railDecision.railGrid .confirmMulti{ min-height:29px!important; height:auto!important; padding:3px 5px!important; font-size:7.8px!important; } /* Emergency fit passes for unusually long Hero/Technique names. */ body.battleMode .modalBack.railDecision.railDense .modal{ padding:6px!important; } body.battleMode .modalBack.railDecision.railDense #modalTitle{font-size:12.5px!important} body.battleMode .modalBack.railDecision.railDense #modalText{ font-size:7.3px!important;line-height:1.08!important } body.battleMode .modalBack.railDecision.railDense .choice{ min-height:27px!important;padding:3px 4px!important;font-size:7.3px!important } body.battleMode .modalBack.railDecision.railDense .choice .muted{font-size:6.1px!important} body.battleMode .modalBack.railDecision.railUltra .modal{ padding:5px!important; } body.battleMode .modalBack.railDecision.railUltra #modalTitle{font-size:11.5px!important} body.battleMode .modalBack.railDecision.railUltra #modalText{ font-size:6.8px!important;line-height:1.05!important } body.battleMode .modalBack.railDecision.railUltra .choice{ min-height:25px!important;padding:2px 4px!important;font-size:6.9px!important } body.battleMode .modalBack.railDecision.railUltra .choice .muted{font-size:5.9px!important} } /* === FIX36 decision-card containment fix === On desktop, decision UI is physically mounted inside #battleInfoPanel. This guarantees it can never grow wider/taller than the reserved card. */ @media (min-width:1000px){ body.battleMode #battleInfoPanel.decisionActive{ pointer-events:auto!important; } body.battleMode #decisionBlocker{ display:none; position:absolute; inset:0; z-index:33; background:transparent; pointer-events:auto; } body.battleMode #decisionBlocker.show{ display:block; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; align-items:stretch!important; justify-content:stretch!important; z-index:2!important; overflow:hidden!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded > #decisionModal{ position:relative!important; inset:auto!important; left:auto!important; top:auto!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; box-sizing:border-box!important; overflow:hidden!important; border:0!important; border-radius:21px!important; box-shadow:none!important; background:transparent!important; padding:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany > #decisionModal{ padding:10px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid > #decisionModal{ padding:7px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense > #decisionModal{ padding:6px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra > #decisionModal{ padding:5px!important; } /* Never allow decision content to establish its own scrolling region. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded #modalChoices, body.battleMode #battleInfoPanel > .modalBack.railEmbedded .choiceGrid{ max-height:none!important; overflow:visible!important; } } /* === FIX36 readable decision typography === The card placement is correct; make simple decisions easier to read. Larger decision sets keep their compact-fit rules. */ @media (min-width:1000px){ body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) > #decisionModal{ padding:18px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) #modalTitle{ font-size:22px!important; line-height:1.12!important; margin-bottom:7px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) #modalTitle:before{ font-size:9px!important; letter-spacing:.14em!important; margin-bottom:5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) #modalText{ font-size:12.5px!important; line-height:1.38!important; margin-top:4px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choiceGrid{ gap:10px!important; margin-top:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choice{ min-height:64px!important; padding:12px 13px!important; font-size:12px!important; line-height:1.25!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choice b{ font-size:12.5px!important; line-height:1.22!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choice .muted{ margin-top:4px!important; font-size:10px!important; line-height:1.22!important; } /* Target/performer lists with three choices get slightly tighter, but remain much more readable than the previous version. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choiceGrid:has(.choice:nth-of-type(3)){ gap:8px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choiceGrid:has(.choice:nth-of-type(3)) .choice{ min-height:56px!important; padding:10px 12px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choiceGrid:has(.choice:nth-of-type(3)) .choice b{ font-size:11.5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded:not(.railMany) .choiceGrid:has(.choice:nth-of-type(3)) .choice .muted{ font-size:9.5px!important; } } /* === FIX36 readable right-rail decisions v2 === 1–3 real choices should use the available space instead of shrinking. This includes 3-target multi-select prompts such as Soul Whirlwind. */ @media (min-width:1000px){ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple > #decisionModal{ padding:18px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalTitle{ font-size:24px!important; line-height:1.08!important; margin-bottom:8px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalTitle:before{ font-size:10px!important; letter-spacing:.15em!important; margin-bottom:6px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalText{ font-size:14px!important; line-height:1.34!important; margin:4px 0 0!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choiceGrid{ gap:9px!important; margin-top:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice{ min-height:58px!important; padding:11px 12px!important; font-size:14px!important; line-height:1.2!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice b{ font-size:14px!important; line-height:1.18!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice .muted{ margin-top:4px!important; font-size:11px!important; line-height:1.18!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .selectionCount{ min-height:34px!important; padding:7px 10px!important; font-size:11px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .selectionCount strong{ font-size:12px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .confirmMulti{ min-height:48px!important; height:auto!important; padding:9px 10px!important; font-size:13px!important; line-height:1.15!important; } /* Three-choice target lists need slightly tighter rows, but still large. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice:nth-of-type(3){ /* marker only; sizing remains readable */ } /* Ensure older emergency compact rules cannot shrink simple decisions. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra > #decisionModal{ padding:18px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact #modalTitle, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense #modalTitle, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra #modalTitle{ font-size:24px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact #modalText, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense #modalText, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra #modalText{ font-size:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact .choice, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense .choice, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra .choice{ min-height:58px!important; padding:11px 12px!important; font-size:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact .choice b, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense .choice b, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra .choice b{ font-size:14px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact .choice .muted, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense .choice .muted, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra .choice .muted{ font-size:11px!important; } } /* === FIX36 decision readability v3: use the available card space === */ @media (min-width:1000px){ /* 1–3 choices: large, comfortable reading. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple > #decisionModal{ padding:20px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalTitle{ font-size:27px!important; line-height:1.08!important; margin-bottom:9px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalTitle:before{ font-size:10.5px!important; margin-bottom:7px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple #modalText{ font-size:15px!important; line-height:1.35!important; margin-top:4px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choiceGrid{ gap:11px!important; margin-top:16px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice{ min-height:68px!important; padding:13px 14px!important; font-size:15px!important; line-height:1.2!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice b{ font-size:15px!important; line-height:1.18!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .choice .muted{ margin-top:5px!important; font-size:11.5px!important; line-height:1.2!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .selectionCount{ min-height:38px!important; padding:8px 11px!important; font-size:12px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple .confirmMulti{ min-height:52px!important; padding:10px 12px!important; font-size:14px!important; } /* 4–5 choices: still comfortably readable. These should NOT be compacted. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) > #decisionModal{ padding:16px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) #modalTitle{ font-size:22px!important; line-height:1.08!important; margin-bottom:7px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) #modalTitle:before{ font-size:9.5px!important; margin-bottom:5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) #modalText{ font-size:12.5px!important; line-height:1.28!important; margin-top:3px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) .choiceGrid{ gap:8px!important; margin-top:12px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) .choice{ min-height:54px!important; padding:10px 11px!important; font-size:13px!important; line-height:1.16!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) .choice b{ font-size:13px!important; line-height:1.15!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid) .choice .muted{ margin-top:3px!important; font-size:10px!important; line-height:1.15!important; } /* 6+ choices still need a compact mode, but keep them more readable than before. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid > #decisionModal{ padding:9px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid #modalTitle{ font-size:16px!important; line-height:1.06!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid #modalText{ font-size:9.5px!important; line-height:1.16!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid .choiceGrid{ grid-template-columns:1fr!important; gap:4px!important; margin-top:6px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid .choice{ min-height:34px!important; padding:5px 6px!important; font-size:9.5px!important; line-height:1.1!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid .choice b{ font-size:9.5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid .choice .muted{ font-size:7.5px!important; line-height:1.08!important; } /* Protect 1–5 choice layouts from older compact classes. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railCompact > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railDense > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple.railUltra > #decisionModal{ padding:20px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid).railCompact > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid).railDense > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany:not(.railGrid).railUltra > #decisionModal{ padding:16px!important; } } /* === FIX36 final decision rule: READABILITY FIRST === All decisions use one readable type system. Long content wraps. The panel grows upward and the Battle Log shrinks temporarily instead of shrinking decision text or adding a decision scrollbar. */ @media (min-width:1000px){ body.battleMode #battleInfoPanel{ transition:top .16s ease,height .16s ease!important; } body.battleMode #logPanel{ transition:height .16s ease!important; } body.battleMode #logPanel.decisionLogShrunk .log{ overflow:hidden!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railSimple > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railMany > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railGrid > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense > #decisionModal, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra > #decisionModal{ padding:18px!important; overflow:hidden!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded #modalTitle{ font-size:24px!important; line-height:1.08!important; margin:0 0 8px!important; white-space:normal!important; overflow-wrap:anywhere!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded #modalTitle:before{ font-size:10px!important; line-height:1.1!important; letter-spacing:.14em!important; margin-bottom:6px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded #modalText{ font-size:14px!important; line-height:1.34!important; margin:4px 0 0!important; white-space:normal!important; overflow-wrap:anywhere!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .choiceGrid{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; margin-top:14px!important; max-height:none!important; overflow:visible!important; min-width:0!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .choice{ width:100%!important; max-width:100%!important; min-width:0!important; min-height:52px!important; height:auto!important; box-sizing:border-box!important; padding:10px 11px!important; font-size:13.5px!important; line-height:1.2!important; white-space:normal!important; overflow:visible!important; overflow-wrap:anywhere!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .choice b{ display:block!important; font-size:13.5px!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .choice .muted{ display:block!important; margin-top:3px!important; font-size:10.5px!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .selectionCount{ min-height:32px!important; height:auto!important; padding:6px 9px!important; font-size:11px!important; line-height:1.15!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .selectionCount strong{ font-size:11.5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .confirmMulti{ min-height:46px!important; height:auto!important; padding:9px 10px!important; font-size:13px!important; line-height:1.15!important; white-space:normal!important; } /* Explicitly neutralize every older compact-mode font override. */ body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact #modalTitle, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense #modalTitle, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra #modalTitle{ font-size:24px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact #modalText, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense #modalText, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra #modalText{ font-size:14px!important; line-height:1.34!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact .choice, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense .choice, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra .choice{ min-height:52px!important; padding:10px 11px!important; font-size:13.5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact .choice b, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense .choice b, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra .choice b{ font-size:13.5px!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railCompact .choice .muted, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railDense .choice .muted, body.battleMode #battleInfoPanel > .modalBack.railEmbedded.railUltra .choice .muted{ font-size:10.5px!important; } } /* === FIX36 turn action cues === Clarifies End Opportunity / Finish Round without changing gameplay. */ @keyframes caTurnOptionPulse{ 0%,100%{box-shadow:0 0 0 1px rgba(232,189,104,.20),0 0 8px rgba(232,189,104,.10)} 50%{box-shadow:0 0 0 1px rgba(232,189,104,.34),0 0 14px rgba(232,189,104,.20)} } @keyframes caFinishPulse{ 0%,100%{box-shadow:0 0 0 1px rgba(239,139,150,.28),0 0 10px rgba(239,139,150,.12)} 50%{box-shadow:0 0 0 2px rgba(239,139,150,.48),0 0 18px rgba(239,139,150,.26)} } body.battleMode .footerActions #endOpportunity.turnOption:not(:disabled){ border-color:rgba(232,189,104,.72)!important; color:#ffe2a0!important; background:linear-gradient(180deg,rgba(55,43,19,.96),rgba(26,24,18,.98))!important; animation:caTurnOptionPulse 1.8s ease-in-out infinite; } body.battleMode .footerActions #finish.turnOption:not(:disabled){ border-color:rgba(239,139,150,.62)!important; color:#ffc4cc!important; background:linear-gradient(180deg,rgba(62,29,36,.96),rgba(31,21,25,.98))!important; } body.battleMode .footerActions #endOpportunity.recommendedAction:not(:disabled){ border-color:rgba(244,204,112,.95)!important; color:#fff0bc!important; box-shadow:0 0 0 2px rgba(232,189,104,.38),0 0 18px rgba(232,189,104,.24)!important; } body.battleMode .footerActions #finish.recommendedAction:not(:disabled){ border-color:rgba(249,159,170,.95)!important; color:#ffe1e5!important; background:linear-gradient(180deg,rgba(84,34,45,.98),rgba(38,22,28,.99))!important; animation:caFinishPulse 1.55s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ body.battleMode .footerActions #endOpportunity.turnOption:not(:disabled), body.battleMode .footerActions #finish.recommendedAction:not(:disabled){ animation:none!important; } } /* === FIX36 cancel / choose-another-card escape === */ @media (min-width:1000px){ body.battleMode #battleInfoPanel > .modalBack.railEmbedded .decisionCancel{ width:100%!important; min-width:0!important; min-height:46px!important; height:auto!important; margin-top:2px!important; padding:9px 11px!important; border-color:rgba(197,209,188,.42)!important; background:rgba(18,27,20,.72)!important; color:#dfe8d7!important; font-size:13px!important; font-weight:800!important; line-height:1.18!important; text-align:center!important; white-space:normal!important; overflow-wrap:anywhere!important; box-shadow:none!important; } body.battleMode #battleInfoPanel > .modalBack.railEmbedded .decisionCancel:hover, body.battleMode #battleInfoPanel > .modalBack.railEmbedded .decisionCancel:focus-visible{ border-color:rgba(232,189,104,.72)!important; color:#ffe5aa!important; background:rgba(48,40,23,.82)!important; } } /* On mobile, retain the normal modal and also provide the same clear escape. */ @media (max-width:999px){ .decisionCancel{ grid-column:1/-1!important; width:100%!important; min-height:48px!important; height:auto!important; white-space:normal!important; } } /* === FIX36 readability + full hover card text === Presentation only: slightly larger battle typography. Hovered hand cards grow upward and reveal the complete effect text rather than line-clamping it. */ @media (min-width:1000px){ body.battleMode .heroName{font-size:20px!important;line-height:1.04!important} body.battleMode .heroMeta{font-size:11.5px!important;line-height:1.18!important} body.battleMode .passiveBadge, body.battleMode .pathBadge, body.battleMode .statusPill, body.battleMode .badgeLabel{font-size:10px!important;line-height:1.14!important} body.battleMode .hpReadout strong{font-size:24px!important} body.battleMode .statMax{font-size:12px!important} body.battleMode .statLabel{font-size:10px!important} body.battleMode .defReadout strong{font-size:18px!important} body.battleMode .heroActions .btn{min-height:26px!important;height:26px!important;font-size:9.8px!important;padding:4px 7px!important} body.battleMode .masteryLabel{font-size:13px!important;line-height:1.08!important} body.battleMode .masteryLabel small{font-size:9.6px!important;line-height:1.15!important} body.battleMode .matZoneHud small{font-size:8.5px!important;line-height:1.16!important} body.battleMode .matZoneHud strong{font-size:26px!important} body.battleMode .matZoneHud .zoneSub{font-size:7.3px!important;line-height:1.14!important} body.battleMode #topPanel .hudEyebrow{font-size:9px!important} body.battleMode .roundBlock strong{font-size:29px!important} body.battleMode .opportunityCenter .title{font-size:20px!important;line-height:1.02!important} body.battleMode .opportunityCenter .statusline{font-size:9.7px!important;line-height:1.12!important} body.battleMode .apChip{font-size:10px!important} body.battleMode .apChip .ap{font-size:22px!important} body.battleMode .apChip small{font-size:7.8px!important} body.battleMode .handHeader .partyKicker{font-size:8.8px!important} body.battleMode .handHeader .sectionTitle{font-size:13.5px!important} body.battleMode .zoneReadout{font-size:9.5px!important;line-height:1.16!important} body.battleMode .cardTitle{font-size:15px!important;line-height:1.08!important} body.battleMode .cardType{font-size:9px!important} body.battleMode .card .effect{font-size:10.8px!important;line-height:1.26!important} body.battleMode .cardAccess{font-size:8.3px!important;line-height:1.18!important} body.battleMode .costGem b{font-size:14px!important} body.battleMode .costGem small{font-size:6px!important} body.battleMode .cardInfoBtn, body.battleMode .playCardBtn{min-height:24px!important;font-size:8.8px!important;padding:4px 8px!important} body.battleMode .globalTip{font-size:13px!important;line-height:1.5!important} body.battleMode .railHeader .sectionTitle{font-size:14px!important} body.battleMode .liveDot{font-size:8px!important} body.battleMode .log{font-size:11px!important;line-height:1.48!important} body.battleMode .log div{padding:5px 3px 5px 10px!important} body.battleMode #battleInfoPanel{font-size:13px!important;line-height:1.34!important} body.battleMode #battleInfoPanel .title, body.battleMode #battleInfoPanel h2, body.battleMode #battleInfoPanel h3{font-size:17px!important;line-height:1.12!important} body.battleMode #battleInfoPanel .muted, body.battleMode #battleInfoPanel .label, body.battleMode #battleInfoPanel small{font-size:11.5px!important;line-height:1.28!important} body.battleMode #battleInfoPanel button, body.battleMode #battleInfoPanel .btn{font-size:12.2px!important;line-height:1.2!important} body.battleMode .footerActions .btn{min-height:42px!important;height:42px!important;font-size:11px!important;padding:7px 10px!important} body.battleMode #themeControl label{font-size:9px!important} body.battleMode #arenaTheme{font-size:11px!important;min-height:34px!important;height:34px!important} } @media (min-width:1000px) and (hover:hover) and (pointer:fine){ /* Keep the bottom edge anchored while giving the focused card more vertical room. */ body.battleMode #hand .card:hover, body.battleMode #hand .card:focus, body.battleMode #hand .card:focus-within{ height:calc(100% + 52px)!important; min-height:0!important; margin-top:-52px!important; transform:translateY(-10px) scale(1.42)!important; } body.battleMode #hand .card:hover .effect, body.battleMode #hand .card:focus .effect, body.battleMode #hand .card:focus-within .effect{ display:block!important; -webkit-line-clamp:unset!important; -webkit-box-orient:initial!important; overflow:visible!important; max-height:none!important; flex:1 1 auto!important; white-space:normal!important; } body.battleMode #hand .card:hover .cardAccess, body.battleMode #hand .card:focus .cardAccess, body.battleMode #hand .card:focus-within .cardAccess{ white-space:normal!important; overflow:visible!important; } } /* === FIX36 post-match close control === */ .postMatchModal{position:relative!important} .postMatchClose{ position:absolute;top:10px;right:10px;z-index:2; width:36px;height:36px;padding:0;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(225,190,120,.46); background:rgba(24,16,12,.62);color:#f3e2bd; font-size:25px;line-height:1;font-weight:500;cursor:pointer; } .postMatchClose:hover,.postMatchClose:focus-visible{ border-color:rgba(239,205,137,.88);background:rgba(72,46,25,.82);color:#fff5dc; outline:2px solid rgba(239,205,137,.22);outline-offset:2px; } body.theme-candlelit .postMatchClose{ background:rgba(6,16,27,.72);border-color:rgba(127,161,196,.50);color:#e4edf7; } @media(max-width:560px){.postMatchClose{top:8px;right:8px;width:38px;height:38px;font-size:26px}}