:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f9f0df;background:#0a0c15;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}#app{max-width:1700px;margin:auto}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#11121c;border-bottom:1px solid #343245;gap:15px}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.14em}.brand b{font-family:Georgia,serif;font-size:21px;display:block}.brand small{color:#988a75;display:block;font-size:9px;margin-top:4px;letter-spacing:.25em}.sigil{font-size:34px;color:#debd6f}.roomLine{display:flex;align-items:center;gap:14px;font-size:12px;color:#aaa8bc;flex-wrap:wrap}.roomLine span:nth-child(2){color:#e9bc70;font-weight:bold}main{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:calc(100vh - 72px)}#stage{height:min(850px,calc(100vh - 72px));min-height:630px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#414258,#141924 65%,#0a0b12)}#three{position:absolute;inset:0;pointer-events:none}#three canvas{display:block;width:100%;height:100%}.hero{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;filter:drop-shadow(0 2px 6px #000)}.hero strong{display:block;font-family:Georgia,serif;font-size:16px;text-shadow:0 1px 3px #000}.hero span{font-size:12px;color:#efe1bb}.hero em{font-style:normal;color:#ffd0c5;font-weight:bold}.topHero{left:4%;top:5%}.bottomHero{left:4%;bottom:20%}.portrait{width:58px;height:58px;border:3px solid #a88651;border-radius:50%;display:grid;place-items:center;font-size:32px;background:radial-gradient(circle,#ac4034,#251520 73%)}.portrait.ally{background:radial-gradient(circle,#66b5ff,#1a2747 73%)}.topBacks{display:flex;gap:5px;position:absolute;top:5%;right:6%;transform:rotate(4deg)}.back{height:75px;width:49px;border:2px solid #8e6a4c;border-radius:7px;display:grid;place-items:center;color:#ddab6f;font-size:20px;background:repeating-linear-gradient(45deg,#222034,#222034 9px,#342331 10px,#342331 18px);box-shadow:0 3px 6px #0008}.combat{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:10px;text-shadow:0 2px 4px #000;z-index:1}.effect{letter-spacing:.26em;color:#e0c18b;font-size:10px}.elementLine{font-size:11px;color:#c7c0b8}.elementLine b{color:#f4e9ce}.hand{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:end;width:96%;height:215px;z-index:5;gap:clamp(1px,.6vw,10px)}.card{--edge:#777;position:relative;flex:0 1 137px;min-width:0;height:185px;padding:5px;border:2px solid var(--edge);background:#0b1020;border-radius:9px;box-shadow:0 5px 10px #0009,inset 0 0 0 2px #181420;color:#fff;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;transition:transform .15s,box-shadow .15s;cursor:pointer}.card.fire{--edge:#dd7139}.card.water{--edge:#4fc0f0}.card.earth{--edge:#7daa5a}.card.air{--edge:#bd85ea}.card.playable{box-shadow:0 0 0 2px #efd28a,0 0 18px #edb95a77}.card:hover{transform:translateY(-14px);z-index:3}.card:disabled{opacity:.7}.art{min-height:0;flex:1;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:5px 5px 0 0;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--edge),#000 30%),#131322 75%)}.art:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,transparent 25%,#090814aa 100%)}.artIcon{font-size:55px;filter:drop-shadow(0 0 13px var(--edge));z-index:1;text-shadow:1px 3px #15131a}.elem{position:absolute;top:5px;left:5px;z-index:2;border:1px solid #c7a16d;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;background:#111b2c;font-size:16px}.cardTitle{min-height:26px;background:#131321;border-top:2px solid #be985e;display:grid;place-items:center;font:700 10px Georgia,serif;text-align:center;padding:3px 2px}.cardEffect{font-size:9px;line-height:1.25;color:#d8cbbd;min-height:29px;text-align:center;padding:5px 2px 0}.damageBadge{position:absolute;bottom:2px;right:3px;background:#712b32;border:1px solid #f7bd70;border-radius:5px;font-weight:900;font-size:14px;padding:2px 5px;box-shadow:0 0 7px #000}.damageBadge:before{content:'⚔ ';font-size:11px;color:#f5ca93}.card.central{width:163px;height:223px;cursor:default;flex:none;box-shadow:0 0 30px #ddb36555}.card.central .artIcon{font-size:73px}.card.central .cardTitle{font-size:13px}.card.central .cardEffect{font-size:11px;min-height:40px}.turnFlag{position:absolute;right:3%;top:42%;background:#171a27dd;border:1px solid #997749;border-radius:7px;padding:12px 18px;color:#e9c57f;font:700 15px Georgia;letter-spacing:.03em;z-index:2}aside{background:linear-gradient(175deg,#181b29,#11131f);border-left:1px solid #48404a;padding:22px 18px;display:flex;flex-direction:column;gap:20px}.asideGroup{border-bottom:1px solid #34384a;padding-bottom:20px}.smallTitle{font-size:10px;letter-spacing:.15em;color:#aaa5b4;margin-bottom:12px}.dmg{display:flex;align-items:center;justify-content:space-between;gap:12px}.dmg span{font-size:12px;color:#e0dbdb}.dmg strong{color:#ffab8e;font:700 34px Georgia,serif}.muted{color:#9995a5;font-size:11px;line-height:1.5;margin-top:5px}#log{display:flex;flex-direction:column;gap:10px;color:#d8d1ca;font-size:12px;line-height:1.4}.primary,.minor{border-radius:6px;padding:12px 15px;color:#fcf4de;transition:.15s}.primary{background:linear-gradient(#9b5b2c,#63361e);border:1px solid #dcab6b;font-weight:700}.primary.alt{background:linear-gradient(#455e8b,#293e62);border-color:#8fb5f2}.minor{background:#252637;border:1px solid #575065}.actions{display:flex;flex-direction:column;gap:9px}.rule{font-size:11px;line-height:1.7;color:#aaa4a1}.overlay{position:fixed;inset:0;background:#080a13d9;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:20;padding:20px}.overlay.hidden{display:none}.modal{width:min(420px,100%);background:linear-gradient(#24283a,#161822);border:1px solid #8c7457;border-radius:12px;padding:30px;box-shadow:0 20px 90px #0009;text-align:center}.modalIcon{font-size:52px;color:#e9c17b}h1{font-family:Georgia,serif;font-size:35px;margin:8px 0}h2{font:26px Georgia,serif}.modal p{font-size:13px;color:#bcb6ba;line-height:1.6}.modal label{display:block;text-align:left;margin-top:20px;font-size:12px;color:#e0d5c2}.modal input{width:100%;margin:7px 0 0;background:#111420;border:1px solid #525365;color:white;padding:13px;border-radius:6px;min-width:0}.modalButtons{display:grid;gap:10px;margin-top:16px}.join{display:flex;gap:8px;margin-top:18px}.join input{margin:0}.message{min-height:18px;font-size:12px;color:#f3a08d;margin-top:12px}.elements{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}.elements button{font-size:18px}.toast{position:fixed;bottom:18px;right:18px;padding:12px 18px;background:#212335;border:1px solid #aa895a;border-radius:8px;z-index:30;display:none;max-width:360px;font-size:13px}@media(max-width:950px){main{grid-template-columns:1fr}#stage{height:690px;min-height:690px}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rule{grid-column:span 2}.card{height:165px}.hand{height:185px}}@media(max-width:560px){header{padding:0 10px;height:62px}.brand b{font-size:15px}.brand small{font-size:7px}.roomLine{gap:6px;font-size:10px}.roomLine button{padding:8px;font-size:10px}#stage{height:590px;min-height:590px}.portrait{width:44px;height:44px;font-size:25px}.hero strong{font-size:13px}.topHero{top:4%}.bottomHero{bottom:26%}.topBacks{top:14%;right:4%}.back{height:49px;width:29px;font-size:13px}.combat{top:43%}.turnFlag{top:18%;right:3%;padding:8px;font-size:11px}.card{height:139px;padding:2px;border-width:1px;border-radius:5px}.artIcon{font-size:28px}.elem{width:19px;height:19px;font-size:11px}.cardTitle{font-size:8px;min-height:27px}.cardEffect{font-size:7px;min-height:29px}.damageBadge{font-size:11px;padding:1px 2px}.card.central{height:178px;width:134px}.card.central .artIcon{font-size:54px}.hand{bottom:2%;height:155px;width:99%;gap:2px}.hand .card:nth-child(n+6){margin-left:-8px}aside{padding:16px 11px}.asideGroup{padding-bottom:12px}.smallTitle{font-size:9px}.dmg strong{font-size:26px}.dmg span{font-size:11px}}

/* Keep element, spell, ability and end-of-round damage in separate rows. */
.hand{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;align-items:center;height:250px;padding:14px 6px 8px;gap:10px;scrollbar-width:thin}
.hand .card{flex:0 0 154px;margin-left:0;height:224px}
.hand .card:first-child{margin-left:auto}.hand .card:last-child{margin-right:auto}
.card{padding:7px;gap:0;background:#101322}
.card:disabled{opacity:1;filter:saturate(.65)}
.card:disabled:hover{transform:none}
.card.playable{box-shadow:0 0 0 2px #efd28a,0 0 18px #edb95a77}
.card:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cardElement{font-size:11px;font-weight:700;line-height:22px;text-align:left;color:#f4e9d5}
.card .art{min-height:35px;border-radius:4px}
.card .artIcon{font-size:42px}
.card .cardTitle{font:700 14px/1.2 Georgia,serif;min-height:32px;padding:7px 2px;border-top:1px solid var(--edge);background:transparent}
.card .cardEffect{font:11px/1.35 system-ui,sans-serif;color:#eee7dc;min-height:0;padding:2px 3px 8px;flex-shrink:0}
.cardFooter{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #ffffff25;padding:5px 3px 0;font:10px/1.3 system-ui,sans-serif;color:#c3bac2;flex-shrink:0}
.cardFooter strong{color:#ffd1bc;font-size:17px}
.card.central{width:174px;height:250px}
.card.central .cardTitle{font-size:17px}
.card.central .cardEffect{font-size:12px;min-height:0}
.card.central .artIcon{font-size:58px}
.bottomHero{bottom:265px}
@media(max-width:560px){.hand{height:218px;width:98%;gap:8px}.hand .card{flex-basis:138px;height:196px}.card .cardTitle{font-size:13px}.card .cardEffect{font-size:10px}.card .artIcon{font-size:32px}.card.central{height:222px;width:154px}.bottomHero{bottom:224px}.combat{top:37%}.topBacks{top:5%;max-width:42%;overflow:hidden}}

/* Full illustrations retain their elemental colors even when a card is unavailable. */
.card .art{background:#101322;min-height:110px}
.card .art:after{display:none}
.spellArt{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain}
.card:disabled{filter:none}
.cardElement{color:var(--edge);letter-spacing:.06em;font-size:10px;text-transform:uppercase}
.hand{height:306px}.hand .card{height:280px;flex-basis:164px}
.card.central{width:188px;height:296px}
.bottomHero{bottom:308px}
#stage{min-height:780px}.combat{top:33%}
@media(max-width:560px){#stage{height:760px;min-height:760px}.hand{height:284px}.hand .card{height:260px;flex-basis:148px}.card .art{min-height:100px}.card.central{width:164px;height:264px}.bottomHero{bottom:294px}.combat{top:32%}}

.drawPile{position:absolute;left:12%;top:37%;width:48px;height:68px;border:2px solid #96754c;border-radius:6px;background:repeating-linear-gradient(45deg,#222034,#222034 8px,#342331 9px,#342331 16px);color:#e1bb7c;display:grid;place-content:center;text-align:center;box-shadow:4px 4px #171822,7px 7px #5e4b3c;z-index:2}
.drawPile span{font-size:27px}.drawPile small{font-size:7px;letter-spacing:.1em}
.battleFx{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:hidden;--fx-color:#f4cc89}
.battleFx .flightCard{position:absolute;margin:0;max-width:none;min-width:0;pointer-events:none;transform-origin:center;box-shadow:0 12px 32px #0009,0 0 24px var(--fx-color);will-change:transform}
.battleAnnouncement{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);max-width:72%;text-align:center;color:#fff3d6;background:#111522eb;border:1px solid #ad8a55;border-radius:20px;padding:8px 15px;font-size:12px;line-height:1.4;z-index:7;pointer-events:none;box-shadow:0 4px 16px #0006}
.battleAnnouncement:empty{display:none}
.spellProjectile{position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff,0 0 28px var(--fx-color),0 0 55px var(--fx-color)}
.spellBurst{position:absolute;width:108px;height:108px;border:4px solid var(--fx-color);border-radius:50%;box-shadow:0 0 24px var(--fx-color),inset 0 0 24px var(--fx-color)}
.spellBurst:before,.spellBurst:after{content:'';position:absolute;inset:12px;border:2px solid var(--fx-color);border-radius:inherit;transform:rotate(45deg)}
.spellBurst:after{inset:-14px;opacity:.5}
.spellBurst.curse{border-radius:15%;transform-origin:center}
.spellBurst.stun{border:0;border-radius:0;background:var(--fx-color);clip-path:polygon(55% 0,18% 55%,45% 55%,30% 100%,85% 35%,57% 35%);filter:drop-shadow(0 0 10px var(--fx-color))}
.spellBurst.sleep{border:0;box-shadow:inset 22px -8px var(--fx-color),0 0 28px var(--fx-color)}
.spellBurst.sleep:before,.spellBurst.sleep:after{display:none}
.spellBurst.chain{width:130px;height:45px;border-radius:50%;border-style:dashed}
.spellBurst.portal{width:140px;height:180px;border-width:7px}
.spellBurst.blade{width:12px;height:150px;border-radius:60% 0;background:#fff;transform-origin:center}
.spellBurst.rune{border-radius:3px;width:90px;height:90px}
.spellBurst.spark{width:48px;height:48px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.spellBurst.damage{border-color:#ff785c;box-shadow:0 0 35px #ff785c,inset 0 0 30px #ff785c}
.effectLabel{position:absolute;white-space:nowrap;padding:7px 10px;border:1px solid var(--fx-color);background:#111522f5;border-radius:6px;color:white;font-size:12px;font-weight:700;text-shadow:0 1px 3px #000;box-shadow:0 0 16px #0008}
.drawFlight{position:absolute;width:40px;height:58px;border:2px solid #d5ab69;border-radius:5px;background:repeating-linear-gradient(45deg,#222034,#222034 7px,#6d4c59 8px,#6d4c59 14px);box-shadow:0 0 14px var(--fx-color)}
@media(max-width:560px){.drawPile{left:7%;top:33%;width:34px;height:49px}.drawPile span{font-size:20px}.drawPile small{font-size:6px}.battleAnnouncement{top:51.5%;font-size:10px;max-width:90%;width:max-content;padding:6px 10px}.effectLabel{font-size:10px}.spellBurst{width:75px;height:75px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

.effectLabel{max-width:240px;white-space:normal;width:max-content;text-align:center}

/* Keep the action summary beside the arena, clear of the active-element label. */
.battleAnnouncement{left:auto;right:3%;top:52%;transform:none;max-width:32%;text-align:center}
@media(max-width:560px){.battleAnnouncement{top:auto;bottom:calc(2% + 294px);max-width:52%;width:max-content}}

#soundBtn{min-height:44px;min-width:108px;white-space:nowrap}#soundBtn[aria-pressed="false"]{opacity:.72}#soundBtn:focus-visible{outline:2px solid #e5bf77;outline-offset:3px}

[hidden]{display:none!important}.actionHint{font-size:13px;line-height:1.5;color:#efd49f}.actionHint:empty{display:none}.actions{flex-wrap:wrap}.actions button{min-height:44px}.card.selectedCard{outline:3px solid #ffe29c;outline-offset:-3px;opacity:1;box-shadow:0 0 22px #e9bb6555}.card.selectedCard::after{content:attr(data-order);position:absolute;top:10px;right:10px;background:#ffe29c;color:#211a12;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:bold 16px Georgia;z-index:3}

/* Rules stay in the browser's modal layer, including over the match menu. */
#rulesBtn,#welcomeRulesBtn{min-height:44px}#welcomeRulesBtn{width:100%;margin-top:14px}
#rulesDialog{padding:0;border:1px solid #9d8055;border-radius:16px;width:min(900px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 28px);color:#f9f0df;background:#141724;box-shadow:0 24px 90px #000b;overflow:hidden}
#rulesDialog[open]{display:flex;flex-direction:column}#rulesDialog::backdrop{background:#070911c9;backdrop-filter:blur(5px)}
.rulesHeader{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 26px;border-bottom:1px solid #393b4a;flex-shrink:0}.rulesEyebrow{font-size:10px;letter-spacing:.24em;color:#ddbd80}.rulesHeader h2{font:700 28px Georgia,serif;margin:6px 0 0}.rulesHeader h2:focus{outline:none}#closeRulesBtn{min-width:44px;min-height:44px;font-size:20px}
.rulesBody{overflow-y:auto;overscroll-behavior:contain;padding:20px 26px;min-height:0;line-height:1.6;font-size:14px}.rulesIntro{margin:0 0 20px;color:#c9c5cc}.rulesGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.ruleCard{padding:18px;border:1px solid #3b3d50;border-radius:10px;background:#1b1e2d}.ruleNumber{font-size:11px;letter-spacing:.12em;color:#d7b77f}.ruleCard h3{font:700 20px Georgia,serif;margin:8px 0 12px}.ruleCard p{margin:10px 0 0;color:#d7d3da}.ruleCard strong{color:#ffe2a2}.ruleExample{padding:10px 12px;border-left:2px solid #b38b53;background:#111522;border-radius:0 6px 6px 0}.rulesDetails{margin-top:20px;color:#c9c5cc}.rulesDetails summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0;color:#e8c58b}.rulesFooter{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 26px;border-top:1px solid #393b4a;flex-shrink:0}.rulesFooter span{font-size:12px;color:#aaa7b4}.rulesFooter button{min-height:44px}#rulesDialog button:focus-visible,.rulesDetails summary:focus-visible{outline:2px solid #ffe2a2;outline-offset:3px}
@media(max-width:700px){header{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.roomLine{flex:1 1 100%;justify-content:flex-end}.rulesGrid{grid-template-columns:1fr}.rulesHeader{padding:14px 16px}.rulesHeader h2{font-size:24px}.rulesBody{padding:14px 16px}.rulesFooter{padding:12px 16px}.ruleCard{padding:15px}.rulesFooter span{max-width:180px}}
body:has(#rulesDialog[open]){overflow:hidden}

#tutorialDialog{width:min(780px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid #9d8055;border-radius:16px;background:#141724;color:#f9f0df;overflow:hidden;box-shadow:0 24px 90px #000b}#tutorialDialog[open]{display:flex;flex-direction:column}#tutorialDialog::backdrop{background:#070911e6;backdrop-filter:blur(5px)}body:has(#tutorialDialog[open]){overflow:hidden}.tutorialBody{padding:20px 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0;line-height:1.5}.tutorialBody h3{font:700 24px Georgia;margin:0 0 12px}.tutorialBody h3:focus{outline:none}#tutorialIntro{max-width:560px;margin:auto;padding:24px 0}#tutorialIntro .primary{margin-top:18px}.tutorialFooter{padding:12px 24px;border-top:1px solid #393b4a;color:#aaa7b4;font-size:12px;line-height:1.5;flex-shrink:0}.lessonField{display:flex;align-items:center;gap:30px;padding:14px 20px;margin:14px 0 20px;background:radial-gradient(ellipse at left,#31384f,#191d2c);border:1px solid #3b3d50;border-radius:12px}.lessonField .smallTitle{display:block;margin-bottom:6px}#lessonStatus{color:#efcf8d;max-width:240px}#lessonHand{display:flex;gap:12px;overflow-x:auto;padding:4px 3px 10px}.lessonCard{position:relative;display:flex;flex-direction:column;flex:0 0 136px;width:136px;padding:6px;background:#0b1020;color:#fff;border:2px solid #a89c83;border-radius:9px;text-align:left;overflow:hidden}.lessonCard.fire{border-color:#dd7139}.lessonCard.water{border-color:#4fc0f0}.lessonCard.earth{border-color:#7daa5a}.lessonCard.air{border-color:#bd85ea}.lessonCard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}.lessonElement{font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:#e6d2ac}.lessonCard strong{font:700 14px Georgia;text-align:center;margin:9px 0 4px}.lessonCard[aria-pressed="true"]{outline:2px solid #ffe29c;outline-offset:0}.lessonCard:disabled{opacity:.65}.lessonCard:focus-visible,#tutorialDialog button:focus-visible{outline:3px solid #ffe29c;outline-offset:2px}.lessonOrder{position:absolute;top:28px;right:8px;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;background:#ffe29c;color:#211a12;font-weight:bold}#lessonBoard .lessonCard{width:100px}#lessonBoard .lessonCard strong{font-size:12px}#lessonFeedback{min-height:24px;color:#e8c58b;margin:12px 0}.lessonSuccess{padding:12px 16px;background:#24382d;border:1px solid #658c70;border-radius:8px;color:#d4f0d4!important}.lessonActions{display:flex;gap:10px;flex-wrap:wrap}.lessonActions button,#skipTutorialBtn{min-height:44px}.rulesFooter{flex-wrap:wrap}@media(max-width:560px){.tutorialBody{padding:16px}.tutorialFooter{padding:10px 16px}.lessonField{gap:18px;padding:12px}.lessonCard{flex-basis:118px;width:118px}.tutorialBody h3{font-size:21px}#lessonPrompt{font-size:14px}.lessonActions button{flex:1}#lessonHand{gap:9px}.rulesFooter span{order:3;max-width:none;width:100%}}

#lessonOpponent{border:1px solid #534338;border-radius:10px;padding:14px;margin:0 0 18px;background:#211f29}.lessonOpponentTitle{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.lessonOpponentTitle .smallTitle{margin:0}.lessonOpponentTitle strong{font-size:13px;color:#f4b3a4;white-space:nowrap}#lessonOpponentHand{display:flex;gap:10px}#lessonOpponentHand .lessonCard{width:108px;flex:0 0 108px}.lessonDamage{font-size:11px;color:#dbc9af;text-align:center;margin:3px 0}.lessonDamage b{color:#ffd68b}#lessonDamageResult{margin:12px 0 0;font-size:15px;font-weight:700;color:#e8c58b}#lessonDamageResult.portalResult{padding:12px;border-radius:8px;background:#353024;color:#ffe7ab;animation:portalResult .4s ease-out}.lessonElements{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.lessonElements button{min-height:44px;flex:1}@keyframes portalResult{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){#lessonDamageResult.portalResult{animation:none}}@media(max-width:560px){.lessonOpponentTitle{align-items:flex-start;flex-direction:column}#lessonOpponent{padding:12px}.lessonElements button{flex-basis:40%}}

.lessonChoices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 4px}.lessonChoice{display:flex;align-items:center;gap:12px;padding:12px;text-align:left;background:#1d2233;border:1px solid #5a503e;border-radius:10px;color:#f9f0df;min-height:108px}.lessonChoice img{width:62px;height:76px;object-fit:cover;border-radius:6px;flex-shrink:0}.lessonChoice strong{display:block;font:700 18px Georgia;line-height:1.2}.lessonChoice small{display:block;font-size:12px;line-height:1.5;color:#c6bfba;margin-top:7px}.lessonChoice:hover{background:#292e40;border-color:#d7b77f}.tutorialHeaderActions{display:flex;gap:8px;align-items:center}.tutorialHeaderActions button{min-height:44px}#tutorialIntro{max-width:none;padding:4px 0}#tutorialIntro>.primary{width:100%}@media(max-width:560px){.lessonChoices{grid-template-columns:1fr}.lessonChoice{min-height:88px}.lessonChoice img{width:54px;height:62px}#tutorialDialog>.rulesHeader{align-items:flex-start;flex-wrap:wrap;gap:12px}.tutorialHeaderActions{width:100%}.tutorialHeaderActions button{flex:1}}

.lessonCompletion{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:#b4afbd}.lessonChoice.lessonCompleted{border-color:#71967c;background:#202d2b}.lessonCompleted .lessonCompletion{color:#b9e8c5;font-weight:700}.lessonChoice.lessonCompleted:hover{background:#2b3b35;border-color:#a5d5b2}

.rematchPanel{padding:14px;border:1px solid #b99a63;border-radius:10px;background:#272535}.rematchPanel p{margin:0 0 12px;line-height:1.5;color:#ffe2aa}.rematchActions{display:flex;gap:8px;flex-wrap:wrap}.rematchActions button{flex:1;min-height:44px}.rematchPanel small{display:block;color:#c4becb;line-height:1.5;margin-top:12px}.rematchPanel[hidden]{display:none}

#inviteDialog{width:min(460px,calc(100% - 32px));box-sizing:border-box;padding:24px;background:#171b2b;color:#f9f0df;border:1px solid #b99a63;border-radius:14px}#inviteDialog::backdrop{background:#070911c9}#inviteDialog h2{margin-top:0;font-family:Georgia}#inviteDialog p{font-size:14px;line-height:1.5}#inviteDialog label{font-size:12px;color:#d9c49b}#inviteLink{box-sizing:border-box;width:100%;margin-top:8px;padding:12px;color:#fff;background:#101421;border:1px solid #777185;border-radius:6px}#inviteStatus{min-height:42px;color:#d9c49b}.inviteActions{display:flex;gap:10px;flex-wrap:wrap}.inviteActions button{min-height:44px}#inviteBtn[hidden]{display:none}

/* Release: accessible controls, compact phone layout and resilient menus. */
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ffe6a5;outline-offset:4px}
.modal{max-height:90dvh;overflow:auto}#continueBtn{width:100%;margin-bottom:16px}.savedMatch{display:block;width:100%;margin:8px 0}#aboutBtn{margin-top:12px;font-size:12px}
#resultDialog,#aboutDialog{box-sizing:border-box;width:min(560px,94vw);max-height:90dvh;overflow:auto;padding:28px;color:#eee6d7;background:#151724;border:1px solid #c6a16b;border-radius:18px;line-height:1.6}dialog::backdrop{background:#080a15bb}.resultActions{display:flex;flex-wrap:wrap;gap:12px}.staticBattlefield{background:radial-gradient(ellipse at center,#454052,#171b29 70%)}
@media(max-width:950px){aside .actions{grid-column:1/-1;grid-row:1}aside .rule{grid-column:1/-1}.roomLine{gap:6px}.roomLine button{min-height:40px}}
@media(max-width:560px){.modal{padding:20px}header{padding:12px}.roomLine{justify-content:flex-start}.roomLine button{font-size:12px;padding:8px}#stage{min-height:710px}.combat{top:30%}.bottomHero{bottom:285px}aside{padding:12px}.actions{position:relative}.resultActions button{flex:1 1 120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:560px){.topBacks{display:none}}

.languageSelect{font:inherit;color:#f4e8ca;background:#222637;border:1px solid #777183;border-radius:7px;padding:9px;min-height:40px}.modal>.languageSelect{margin-bottom:14px}.tutorialHeaderActions{flex-wrap:wrap}.languageSelect:focus-visible{outline:3px solid #ffe6a5;outline-offset:3px}