@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--paper:#e7dfc8;--muted:#a5a495;--acid:#c2cf81;--blood:#be6654;--line:#aaa68a3a}*{box-sizing:border-box}body{margin:0;background:#12120f;color:var(--paper);font-family:Arial,'Noto Sans KR',sans-serif;font-size:16px;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:#191b17d9;padding:12px 18px;border-radius:2px;transition:background .2s,transform .2s,border .2s}button:hover:enabled{border-color:var(--acid);background:#30372b}button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}button:disabled{cursor:default;opacity:.38}button.primary{background:var(--acid);color:#1a2119;border-color:var(--acid);font-weight:700}button.primary:hover:enabled{background:#d5e49b}button[hidden],[hidden]{display:none!important}#world,.vignette,.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#world{z-index:-3}.vignette{z-index:-2;background:radial-gradient(ellipse at 58% 48%,transparent 10%,#05080650 72%,#050605dd 100%)}.grain{z-index:20;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:88px;padding:24px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #aaa68a1c;background:linear-gradient(#080a09b0,transparent)}.brand{font-weight:900;font-size:23px;letter-spacing:-1px;text-decoration:none;color:var(--paper)}.brand span{display:block;font-size:12px;color:var(--muted);letter-spacing:3px;margin-top:5px;font-weight:400}.top-actions{display:flex;align-items:center;gap:12px}.top-actions button{padding:8px 12px;font-size:14px;background:#10141070}.edition,.eyebrow{font-size:12px;letter-spacing:2px;color:var(--acid)}.edition{margin-right:30px;color:var(--muted)}.menu{min-height:calc(100svh - 88px);position:relative;padding:6vh 8%;display:flex;align-items:center}.menu-copy{width:340px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(76px,9vw,144px);font-weight:400;line-height:.79;letter-spacing:-8px;margin:38px 0 28px}h1 em{font-style:normal;color:var(--acid)}.menu p{font-size:17px;color:#c5c6b8;line-height:1.9;margin-bottom:30px}.menu-buttons{display:flex;flex-direction:column;gap:10px}.menu-buttons button{text-align:left;display:flex;justify-content:space-between;padding:16px}.menu-buttons button span{font-size:13px;opacity:.75}.menu-foot{display:block;font-size:12px;color:var(--muted);margin-top:22px}.quote{position:absolute;right:9%;bottom:20%;font-family:Georgia,serif;font-size:22px;color:#d9d7c6;letter-spacing:1px}.quote span{display:block;font-size:12px;margin-top:16px;text-align:right;color:var(--muted)}.version{position:absolute;bottom:24px;right:4%;font-size:12px;letter-spacing:3px;color:#8b8f80}#game{height:calc(100svh - 88px);min-height:640px;position:relative}.enemy-hud{position:absolute;top:20px;left:4%;width:220px}.enemy-hud>span{font-size:12px;letter-spacing:2px;color:var(--acid)}h2{font-family:Georgia,serif;font-weight:400;margin:8px 0 12px;font-size:28px}.vital{display:flex;align-items:center;gap:10px}.vital span{font-size:12px;color:var(--muted)}.vital strong{font-family:Georgia,serif;font-size:28px;font-weight:400}.hp-track{width:110px;height:4px;background:#85867a30}.hp-track i{height:100%;display:block;background:var(--acid);transition:width .5s}.enemy-hand{display:flex;gap:7px;margin-top:16px}.back{width:32px;height:46px;border:1px solid #aea58775;background:repeating-linear-gradient(45deg,#a29b7514 0 2px,#1f231f 2px 7px);display:grid;place-items:center;font-family:Georgia;color:#b5b388;transform:rotate(-4deg)}.dialogue{position:absolute;top:4%;right:5%;width:290px;border-left:1px solid var(--acid);padding-left:20px;text-shadow:0 2px 10px #000}.dialogue>span{font-size:12px;color:var(--acid);letter-spacing:2px}.dialogue p{font-size:17px;line-height:1.8;margin:10px 0}.dialogue button{display:block;text-align:left;font-size:14px;width:100%;padding:8px 10px;margin-top:7px;background:#151b16cc}.table-state{position:absolute;left:50%;top:31%;transform:translateX(-50%);text-align:center}#round-label{font-size:12px;letter-spacing:4px;color:#b4baa8}#pile{height:150px;display:grid;place-items:center;margin:12px 0}#pile .card{width:95px;height:140px;transform:rotate(-7deg);padding:9px;pointer-events:none}#pile .card .face{font-size:42px}#pile .card small{display:none}#table-caption{font-size:13px;color:var(--acid);min-width:220px}.round-log{position:absolute;left:4%;top:36%;max-width:225px;font-size:12px;color:var(--muted)}.round-log>span{letter-spacing:2px;color:#7f8a76}.round-log ol{list-style:none;padding:0;line-height:1.8}.round-log li{margin-bottom:5px}.player-zone{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(800px,92vw)}.player-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:20px}.player-status .eyebrow{font-size:12px}.turn-info{text-align:center;display:flex;flex-direction:column;gap:7px;max-width:340px}.turn-info strong{font-size:16px;font-weight:400;color:var(--acid)}.turn-info span{font-size:13px;color:#bfc3b2;line-height:1.4}.remaining{text-align:right;min-width:70px}.remaining span{font-size:12px;color:var(--muted);display:block}.remaining strong{font-size:25px;font-family:Georgia;color:var(--blood)}.hand{display:flex;justify-content:center;gap:12px;min-height:181px;align-items:end}.card{--ink:#292c24;background:#d6cdb6;color:var(--ink);border:1px solid #a8a18d;border-radius:5px;position:relative;display:flex;flex-direction:column;align-items:center;width:126px;height:178px;padding:10px 9px;box-shadow:2px 5px 12px #0009;flex-shrink:0}.card:before{content:'';position:absolute;inset:5px;border:1px solid #4a4c393b;border-radius:2px;pointer-events:none}.card:hover:enabled{background:#e6dfc9;transform:translateY(-9px);border-color:var(--acid)}.card.selected{transform:translateY(-16px)!important;box-shadow:0 0 0 2px var(--acid),0 12px 30px #000b}.card.blocked{filter:brightness(.5);opacity:.9}.card .num{position:absolute;left:12px;top:8px;font-family:Georgia,serif;font-size:25px}.card .corner{position:absolute;right:12px;top:12px;font-size:10px}.card .face{font-family:Arial,sans-serif;font-size:55px;margin:18px 0 5px;line-height:1.1;filter:grayscale(1);text-shadow:1px 1px #fff5}.card .name{font-size:15px;font-weight:700;margin-top:10px;text-align:center}.selected-card-panel{margin:14px auto 0;padding:14px 16px;border:1px solid var(--line);background:linear-gradient(180deg,#141813e8,#10140fe0);box-shadow:0 8px 24px #0005;text-align:left;max-width:560px}.selected-card-panel.empty{opacity:.88}.selected-card-panel .eyebrow{display:block;margin-bottom:6px}.selected-card-panel strong{display:block;font-size:20px;font-weight:700;color:var(--paper)}.selected-card-rarity{display:block;margin-top:5px;font-size:12px;letter-spacing:1px;color:var(--acid)}#selected-card-desc{margin:9px 0 0;color:#d4d4c8;line-height:1.65;font-size:14px}.action-row{display:flex;justify-content:center;align-items:center;gap:10px;min-height:69px;padding-top:14px}.action-row button{font-size:14px;padding:12px 18px}.empty-pile{height:125px;width:90px;border:1px dashed #b5b39844;display:grid;place-items:center;font-size:30px;color:#b5b39855;border-radius:5px}.flicker{animation:hurt .6s ease-out}@keyframes hurt{0%{box-shadow:inset 0 0 150px #c03422aa}100%{box-shadow:inset 0 0 0 transparent}}dialog{color:var(--paper);width:min(660px,94vw);max-height:88svh;overflow:auto;background:#181d18;border:1px solid #767c5b;padding:34px;box-shadow:0 30px 150px #000}dialog::backdrop{background:#020604bc;backdrop-filter:blur(6px)}dialog h2{font-size:32px;margin:10px 0 18px}dialog p{color:#bfc5b4;line-height:1.8}dialog .close{position:absolute;right:12px;top:10px;padding:2px 9px;font-size:26px;background:none;border:0}dialog li{line-height:1.8;margin-bottom:10px;color:#c4c8b9}dialog .primary{width:100%;margin-top:16px}.deck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.deck-option{text-align:left;padding:12px;min-height:108px}.deck-option.chosen{border:1px solid var(--acid);background:#38402b}.deck-option strong{display:block;font-size:17px;margin-bottom:7px}.deck-option small{color:#b9beaa;font-size:12px;line-height:1.5}.deck-count{color:var(--acid)}.results{display:flex;gap:12px;margin:20px 0}.results>div{flex:1;border:1px solid var(--line);padding:16px;color:var(--muted);font-size:13px}.results strong{display:block;font-family:Georgia;font-size:38px;color:var(--paper);margin-top:6px}.subtitle{font-size:13px!important;color:var(--acid)!important}.fallback-scene{background:radial-gradient(ellipse at top,#30382a,#080b09 75%)}
@media(min-width:1500px){.player-zone{bottom:30px}.hand .card{width:140px;height:192px}.hand{min-height:200px}}
@media(max-width:800px){header{height:72px;padding:16px 5%}.brand{font-size:20px}.brand span{font-size:10px;letter-spacing:2px}.edition{display:none}.top-actions{gap:6px}.top-actions button{font-size:12px;padding:7px 9px}.menu{min-height:calc(100svh - 72px);padding:7vh 7%;align-items:end;padding-bottom:7vh}.menu-copy{width:290px}.menu .eyebrow{font-size:10px}h1{font-size:91px;letter-spacing:-5px;margin:25px 0}.menu p{font-size:15px;margin-bottom:23px}.quote{display:none}.version{display:none}.menu-buttons button{padding:14px}.menu-foot{font-size:11px}#game{height:calc(100svh - 72px);min-height:660px}.enemy-hud{top:14px;left:5%;width:130px}.enemy-hud h2{font-size:23px}.enemy-hud .hp-track{width:55px}.enemy-hud .vital strong{font-size:23px}.enemy-hand{gap:5px;margin-top:10px}.back{width:24px;height:35px;font-size:13px}.dialogue{top:16px;right:5%;width:49%;padding-left:12px}.dialogue p{font-size:14px;line-height:1.7;margin:7px 0}.dialogue button{font-size:12px;padding:7px}.round-log{display:none}.table-state{top:29%}#pile{height:115px;margin:9px 0}#pile .card{width:78px;height:113px}#pile .card .face{font-size:35px;margin-top:16px}#pile .card .name{font-size:12px}#pile .card .num{font-size:20px}.player-zone{width:94%;bottom:8px}.player-status{gap:8px;margin-bottom:15px}.player-status .hp-track{width:40px}.player-status .vital strong{font-size:24px}.player-status .eyebrow{font-size:10px}.turn-info{max-width:195px}.turn-info strong{font-size:14px}.turn-info span{font-size:12px}.remaining{min-width:54px}.remaining span{font-size:10px}.hand{gap:7px;min-height:142px}.card{width:calc((94vw - 24px)/4);max-width:104px;height:143px;padding:8px 5px}.card .face{font-size:39px;margin-top:22px}.card .name{font-size:12px}.card .num{font-size:21px;left:10px;top:7px}.card .corner{font-size:8px;right:9px}.selected-card-panel{margin-top:10px;padding:11px 12px;max-width:none}.selected-card-panel strong{font-size:16px}#selected-card-desc{font-size:12px;line-height:1.55}.action-row{flex-wrap:wrap;gap:7px;padding-top:12px}.action-row button{padding:11px 17px;min-height:42px}.deck-grid{grid-template-columns:repeat(3,1fr)}dialog{padding:25px 20px}.deck-option{padding:9px}.deck-option strong{font-size:14px}.deck-option small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* The House expansion */
:root{--paper:#d0c6ad;--acid:#b9bd91;--muted:#979788}.menu{padding-top:3vh;padding-bottom:4vh}.menu-copy{width:350px}.menu h1{font-size:clamp(68px,8vw,115px);margin:24px 0}.menu p{margin-bottom:18px}.menu-buttons{gap:7px}.menu-buttons button{padding:12px 15px}.minor-actions{display:flex;gap:8px}.minor-actions button{font-size:12px;padding:8px 12px}.campaign-track{height:3px;background:#9ca28222;margin:18px 0 8px}.campaign-track i{display:block;height:100%;background:var(--acid)}#wallet{font-size:12px;color:var(--acid);line-height:1.5;margin:10px 0}.menu-foot{font-size:11px;line-height:1.6;margin-top:10px}#battle-rule{font-size:12px;line-height:1.6;color:#b8b096;max-width:260px;margin:10px auto}.card{background:linear-gradient(130deg,#b7ac91,#807965);border-color:#574e3d;color:#242720}.card:hover:enabled{background:#c1b79e}.card .face{filter:none}.card small{color:#363a2e;font-size:11px}.card .corner{font-weight:700;letter-spacing:0}.rarity-N{color:#9eab91}.rarity-R{color:#8fa8b7}.rarity-SR{color:#a492b2}.rarity-SSR{color:#be9b5c}.card .rarity-N{color:#404938}.card .rarity-R{color:#314b58}.card .rarity-SR{color:#513c5c}.card .rarity-SSR{color:#59411d}.rarity-border-R{border-color:#71828c!important}.rarity-border-SR{border-color:#887494!important}.rarity-border-SSR{border-color:#a3864d!important}.rarity-label{display:block;font-size:12px;margin:5px 0}.deck-option small{display:block}.mode-switch,.collection-filters{display:flex;gap:7px;flex-wrap:wrap}.mode-switch button[aria-pressed=true],.collection-filters button[aria-pressed=true]{background:#3b4230;border-color:var(--acid)}.collection-filters button{padding:8px 10px;font-size:13px}.collection-filters label{font-size:13px;align-self:center}.chapter-map{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.chapter-map h3{font-size:15px;color:var(--acid);font-weight:400}.stage{width:100%;display:flex;gap:12px;align-items:center;text-align:left;margin:8px 0;padding:12px 9px}.stage-index{font-family:Georgia;font-size:21px;color:#a5a88c}.stage b{display:block;font-size:14px;font-weight:400}.stage small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.stage-mark{font-size:11px;color:var(--acid);margin-left:auto;white-space:nowrap}.stage.boss{border-color:#8e624755;background:#33271e55}.story-prose p{line-height:2;font-size:16px}.boss-rule{border-left:2px solid #a77a55;background:#2b261b66;padding:15px;margin:20px 0}.boss-rule>b{font-size:13px;color:#c6a981}.boss-rule p{font-size:14px;margin:8px 0 0}.wide{width:100%;margin-top:10px}.reward-line{border:1px solid #9a9b6044;padding:15px;margin:15px 0;background:#545b2522;color:#c3c89c;line-height:1.8;font-size:14px}.story-choices{border-top:1px solid var(--line);margin-top:20px}.story-choices button{display:block;width:100%;text-align:left;margin-bottom:9px}.story-choices small{display:block;color:var(--muted);font-size:12px}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 10px;margin:20px 0}.collection-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}.collection-item .card{width:132px;height:188px}.collection-item small{font-size:11px;color:var(--muted)}.collection-item button{font-size:12px;padding:8px}.collection-item.unowned .card{filter:brightness(.6);opacity:.8}.mask-preview{display:block;width:66px;height:70px;background-size:contain;background-repeat:no-repeat;background-position:center;margin:15px 0 0!important}.card .mask-preview{flex:1;min-height:30px}.card .name{flex-shrink:0}.pack-wallet{display:flex;justify-content:center;gap:30px;align-items:center;color:var(--acid);margin:15px 0;font-size:15px}.pity-meter{text-align:center;font-size:14px!important}.pack-reveal{display:flex;justify-content:center;gap:14px;min-height:245px;margin:30px 0}.pack-reveal .card{width:140px;height:190px}.sealed-card{height:190px;width:140px;background:repeating-linear-gradient(45deg,#242820 0 3px,#35372a 3px 4px);border:1px solid #888866;font-size:48px;display:flex;flex-direction:column;align-items:center;justify-content:center}.sealed-card small{font-size:12px;margin-top:25px}.revealed{animation:reveal-card .5s ease both}@keyframes reveal-card{from{opacity:0;transform:rotateY(80deg) translateY(12px)}to{opacity:1;transform:none}}#pack-scene{display:block;width:100%;height:260px;touch-action:none}.journal-entry{padding:20px 0;border-bottom:1px solid var(--line)}.journal-entry>span{font-size:12px;color:var(--muted)}.journal-entry h3{font-size:18px;color:var(--acid)}.journal-entry b{font-size:14px;font-weight:400;color:#d0ba97}.import-label{display:block;border:1px solid var(--line);padding:14px;text-align:center;margin-top:15px;cursor:pointer}.import-label input{display:block;width:100%;margin-top:10px;font-size:13px}details{margin-top:22px;color:var(--muted);font-size:13px}details p{font-size:13px;line-height:1.8}summary{cursor:pointer}.is-3d #hand .card,.is-3d #pile .card{background:transparent!important;color:transparent!important;border-color:transparent!important;box-shadow:none!important;filter:none!important}.is-3d #hand .card:before,.is-3d #pile .card:before{display:none}.is-3d #hand .card>*,.is-3d #pile .card>*{opacity:0}.is-3d #hand .card:focus-visible{outline:2px solid var(--acid)}
@media(max-width:800px){.menu{padding-top:4vh;align-items:center}.menu-copy{width:min(340px,90vw)}.menu h1{font-size:75px;margin:20px 0}.menu p{font-size:14px;line-height:1.7}.menu-buttons button{font-size:14px;padding:11px 12px}.menu-buttons button span{font-size:11px}.chapter-map{grid-template-columns:1fr;gap:10px}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 6px}.collection-item .card{width:100%;max-width:130px;height:163px}.collection-item .card small{font-size:10px}.collection-item .card .mask-preview{width:52px;height:56px}.collection-item button{font-size:11px;padding:6px}.pack-reveal{gap:7px;min-height:215px}.pack-reveal .card,.sealed-card{width:calc((84vw - 16px)/3);max-width:135px;height:161px}.pack-reveal .card .name{font-size:12px}.pack-reveal .card small{font-size:10px}.pack-wallet{gap:18px;font-size:13px}#battle-rule{font-size:11px;max-width:220px}.story-prose p{font-size:15px}.mask-preview{width:52px;height:52px}.card small{font-size:10px}#pack-scene{height:210px}}

#reveal-scene{width:100%;height:280px;display:block}.reveal-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.reveal-labels button{font-size:13px;padding:9px}.reveal-labels button:disabled{opacity:1;color:var(--acid)}.reveal-labels small{display:block;font-size:11px;margin-top:6px;color:var(--muted)}@media(max-width:800px){#reveal-scene{height:225px}.reveal-labels button{font-size:11px;padding:8px 3px}}

/* UI polish: less annotation, clearer selected-card reading */
.menu-foot[hidden],.campaign-track[hidden]{display:none!important}
.campaign-track{height:2px;background:#9ca28210;margin:16px 0 8px;overflow:hidden}.campaign-track i{display:block;height:100%;background:var(--acid);box-shadow:0 0 12px #b9bd9166}
.selected-card-panel{position:relative;margin:12px auto 0;padding:13px 16px 14px;max-width:560px;border:1px solid #9da27c55;background:linear-gradient(135deg,#171b16f2,#0e120ef2);box-shadow:0 12px 34px #0008;text-align:left}
.selected-card-panel:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid);opacity:.8}
.selected-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;font-size:11px;letter-spacing:1.4px;color:#8f9485}
.selected-card-top #selected-card-state{letter-spacing:.3px;font-weight:700}.selected-card-top .can-play{color:#c7d493}.selected-card-top .cannot-play{color:#b9776d}
.selected-card-panel strong{display:inline-block;font-family:Georgia,'Times New Roman',serif;font-size:22px;font-weight:400;color:#eee8d4}
.selected-card-rarity{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:1px;vertical-align:2px}
#selected-card-desc{margin:7px 0 0;color:#d8d7ca;font-size:14px;line-height:1.55}
.collection-card{padding:10px 9px}.collection-card:hover:enabled{transform:translateY(-6px)}
.card-detail-view{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;margin:24px 0;padding:18px;border:1px solid var(--line);background:#10141088}
.card-detail-mask{width:140px;height:160px!important;margin:0!important;border:1px solid #8e8b7255;background-size:contain;background-position:center;background-repeat:no-repeat}
.card-detail-view p{margin:10px 0 14px;color:#e1dfd2;font-size:16px;line-height:1.75}.card-detail-number,.card-detail-owned{font-size:12px;letter-spacing:1px;color:var(--acid)}
.version{display:none!important}
@media(max-width:800px){.selected-card-panel{margin-top:8px;padding:10px 12px 11px}.selected-card-panel strong{font-size:17px}.selected-card-top{font-size:10px}#selected-card-desc{font-size:12px;line-height:1.45}.card-detail-view{grid-template-columns:92px 1fr;gap:14px;padding:12px}.card-detail-mask{width:86px;height:104px!important}.card-detail-view p{font-size:13px;line-height:1.6}}

.altered-number{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#382c25;background:#cbb99a;padding:2px 5px;border:1px solid #705b49;border-radius:2px;white-space:nowrap}.is-3d #hand .altered-number{opacity:0!important}

/* Cinematic battle entrance + transient round title */
.battle-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#010201;opacity:1;pointer-events:auto;transition:opacity 1.55s cubic-bezier(.22,.61,.36,1)}
.battle-intro[hidden]{display:none!important}.battle-intro.active{opacity:1}.battle-intro.active.reveal{opacity:0}
.battle-intro-copy{display:flex;flex-direction:column;align-items:center;gap:13px;color:#c9c6b2;font-family:Georgia,'Times New Roman',serif;font-size:15px;letter-spacing:8px;text-indent:8px;text-transform:uppercase;transition:opacity .55s ease,transform .55s ease}
.battle-intro-copy i{display:block;width:46px;height:1px;background:#aeb389;box-shadow:0 0 16px #cdd49d66;animation:prepare-pulse 1.1s ease-in-out infinite}
.battle-intro.reveal .battle-intro-copy{opacity:0;transform:translateY(-6px)}
@keyframes prepare-pulse{0%,100%{transform:scaleX(.42);opacity:.28}50%{transform:scaleX(1);opacity:.9}}
#game.cinematic-intro .enemy-hud,#game.cinematic-intro .dialogue,#game.cinematic-intro .table-state,#game.cinematic-intro .round-log,#game.cinematic-intro .player-zone{opacity:0;pointer-events:none}
.enemy-hud,.dialogue,.table-state,.round-log,.player-zone{transition:opacity .5s ease}
.round-flash{position:absolute;z-index:30;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;text-shadow:0 3px 22px #000}
.round-flash span{font-size:11px;letter-spacing:7px;text-indent:7px;color:#a7ab91}.round-flash strong{margin-top:2px;font-family:Georgia,'Times New Roman',serif;font-size:54px;font-weight:400;line-height:1;color:#ded8c4}
.round-flash.show{animation:round-title 1.6s ease both}
@keyframes round-title{0%{opacity:0;transform:translate(-50%,-42%) scale(.96)}18%,66%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(1.015)}}
#battle-rule[hidden]{display:none!important}
@media(max-width:800px){.battle-intro-copy{font-size:13px;letter-spacing:6px;text-indent:6px}.round-flash{top:42%}.round-flash strong{font-size:44px}}
@media(prefers-reduced-motion:reduce){.battle-intro{transition:opacity .2s linear}.round-flash.show{animation-duration:.7s}.battle-intro-copy i{animation:none}}

/* Clean battle center: only the turn title remains visible. */
#hint,#table-caption,#battle-rule{display:none!important}
.turn-info{gap:0}
.turn-info strong{display:block}

/* Story 12: automatic dialogue */
#responses{display:none!important}
.dialogue{width:320px;min-height:96px}
.dialogue p{will-change:opacity,transform}
.dialogue p.speaking{animation:voice-in .32s ease-out both}
@keyframes voice-in{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:800px){.dialogue{width:52%;min-height:82px}.dialogue p{font-size:14px;line-height:1.65}}

/* Opponent played-card inspection */
#pile .played-card-inspect{pointer-events:auto!important;cursor:pointer;border-radius:5px}#pile .played-card-inspect:focus-visible{outline:2px solid var(--acid);outline-offset:5px}.is-3d #pile .played-card-inspect{pointer-events:auto!important}.played-number-note{display:block;margin:7px 0 2px;font-size:12px;color:var(--muted)}

/* Tutorial 14: guide the required card without adding extra HUD copy */
.card.tutorial-target:not(.selected){box-shadow:0 0 0 2px #d4dc9a99,0 0 26px #c2cf8144,2px 5px 12px #0009;animation:tutorial-card-pulse 1.6s ease-in-out infinite}
@keyframes tutorial-card-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.is-3d #hand .card.tutorial-target{outline:2px solid #c2cf81aa;outline-offset:3px}

/* mobile16 performance pass */
#world{transform:translateZ(0)}.card{contain:layout paint;will-change:transform}.selected-card-panel{contain:layout paint}@media(max-width:800px){dialog::backdrop{backdrop-filter:none}.grain{opacity:.045}.card{will-change:auto}.card.selected{will-change:transform}.dialogue,.player-zone,.enemy-hud{transform:translateZ(0)}}


/* fx17: stage gimmick effects — visual only, no extra HUD text */
.gimmick-fx{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;overflow:hidden;contain:strict}
.gimmick-fx:before,.gimmick-fx:after{content:'';position:absolute;inset:-7%;pointer-events:none;opacity:0}
.gimmick-fx.active{opacity:1}
.gimmick-fx.fx-guard:before{background:radial-gradient(ellipse at 50% 46%,#d4d8a526 0 21%,transparent 55%),radial-gradient(ellipse at center,transparent 42%,#0a0d08a8 100%);animation:fx-guard .95s ease-out both}
.gimmick-fx.fx-hush:before{background:#020302;animation:fx-hush 1.05s steps(1,end) both}
.gimmick-fx.fx-hush:after{background:linear-gradient(90deg,transparent 0 47%,#d8d6b20d 50%,transparent 53%);animation:fx-hush-line .9s ease-out both}
.gimmick-fx.fx-narrow:before{background:linear-gradient(to bottom,#010201 0 16%,#070907cc 25%,transparent 43% 57%,#070907cc 75%,#010201 84% 100%);animation:fx-narrow 1.05s cubic-bezier(.2,.8,.2,1) both}
.gimmick-fx.fx-erosion:before{background:radial-gradient(ellipse at center,transparent 38%,#5f231d42 72%,#130806c7 100%);animation:fx-erosion .95s ease-out both}
.gimmick-fx.fx-erosion:after{background:repeating-linear-gradient(104deg,transparent 0 45px,#d0a27a12 47px,transparent 49px 91px);animation:fx-tear .8s ease-out both}
.gimmick-fx.fx-pressure:before{background:radial-gradient(ellipse at center,transparent 22%,#02030259 63%,#010201d9 100%);animation:fx-pressure 1.12s cubic-bezier(.2,.75,.25,1) both}
.gimmick-fx.fx-final:before{background:radial-gradient(circle at 50% 42%,#b9885526,transparent 38%),radial-gradient(ellipse at center,transparent 32%,#160b0ac7 100%);animation:fx-final 1.2s ease-out both}
.gimmick-fx.fx-final:after,.gimmick-fx.fx-final2:after{background:repeating-linear-gradient(0deg,transparent 0 7px,#dfd9bd0a 8px,transparent 9px 15px);animation:fx-scan 1.1s linear both}
.gimmick-fx.fx-final2:before{background:radial-gradient(circle at 50% 42%,#d0b06b35 0 8%,transparent 34%),linear-gradient(100deg,#39151245,transparent 30% 70%,#24123145);animation:fx-final2 1.4s steps(2,end) both}
@keyframes fx-guard{0%{opacity:0;transform:scale(.985)}28%{opacity:.8}100%{opacity:0;transform:scale(1.025)}}
@keyframes fx-hush{0%{opacity:0}13%{opacity:.72}25%{opacity:.16}38%{opacity:.56}51%{opacity:.08}70%{opacity:.27}100%{opacity:0}}
@keyframes fx-hush-line{0%{opacity:0;transform:scaleX(.2)}35%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.3)}}
@keyframes fx-narrow{0%{opacity:0;transform:scaleY(1.25)}32%{opacity:.72;transform:scaleY(.88)}72%{opacity:.35;transform:scaleY(.94)}100%{opacity:0;transform:scaleY(1)}}
@keyframes fx-erosion{0%{opacity:0;transform:scale(1)}24%{opacity:.72;transform:scale(1.018)}50%{opacity:.35;transform:translateX(-.4%)}72%{opacity:.5;transform:translateX(.25%)}100%{opacity:0;transform:none}}
@keyframes fx-tear{0%{opacity:0;transform:skewX(0)}30%{opacity:.7;transform:skewX(-2deg)}100%{opacity:0;transform:skewX(1deg)}}
@keyframes fx-pressure{0%{opacity:0;transform:scale(1.1)}35%{opacity:.83;transform:scale(.965)}68%{opacity:.43;transform:scale(.98)}100%{opacity:0;transform:scale(1)}}
@keyframes fx-final{0%{opacity:0;transform:scale(1)}15%{opacity:.8}26%{opacity:.15}43%{opacity:.62;transform:scale(1.012)}100%{opacity:0;transform:scale(1.035)}}
@keyframes fx-final2{0%{opacity:0;transform:translateX(0) scale(1)}12%{opacity:.8;transform:translateX(-.7%) scale(1.018)}24%{opacity:.26;transform:translateX(.6%) scale(.99)}38%{opacity:.72;transform:translateX(-.35%) scale(1.015)}58%{opacity:.34;transform:translateX(.2%)}100%{opacity:0;transform:none}}
@keyframes fx-scan{0%{opacity:0;transform:translateY(-4%)}25%{opacity:.8}100%{opacity:0;transform:translateY(4%)}}
@media(max-width:800px){.gimmick-fx:before,.gimmick-fx:after{inset:-4%}.gimmick-fx.fx-erosion:after,.gimmick-fx.fx-final:after,.gimmick-fx.fx-final2:after{opacity:.7}}
@media(prefers-reduced-motion:reduce){.gimmick-fx:before,.gimmick-fx:after{animation-duration:.35s!important;transform:none!important}}


/* hit18: projected tap target follows the physical 3D pile card. */
.opponent-card-hitbox{position:fixed;z-index:66;display:block;padding:0;margin:0;border:0!important;border-radius:14px;background:transparent!important;box-shadow:none!important;opacity:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform:none!important}
.opponent-card-hitbox[hidden]{display:none!important}.opponent-card-hitbox:hover,.opponent-card-hitbox:active{background:transparent!important;border:0!important;transform:none!important}.opponent-card-hitbox:focus-visible{opacity:1;outline:2px solid var(--acid);outline-offset:3px}
#hand{touch-action:manipulation}
@media(max-width:800px){.opponent-card-hitbox{border-radius:18px}}

/* Keep the projected target below the player's hand controls, and use DOM pile only in fallback mode. */
.player-zone{z-index:18}.opponent-card-hitbox{z-index:16}.is-3d #pile .played-card-inspect{pointer-events:none!important}.fallback-scene #pile .played-card-inspect{pointer-events:auto!important}


/* mobile19 — viewport fit and full-screen settlement damage flash */
.flicker{animation:none!important;box-shadow:none!important}
body.flicker::after{
 content:'';position:fixed;z-index:95;inset:-24px;pointer-events:none;
 background:radial-gradient(ellipse at center,transparent 30%,rgba(91,14,8,.12) 54%,rgba(143,24,14,.48) 78%,rgba(193,48,30,.82) 100%);
 opacity:0;animation:hurt-screen19 .62s ease-out both;will-change:opacity,transform
}
@keyframes hurt-screen19{0%{opacity:.98;transform:scale(1.025)}42%{opacity:.58}100%{opacity:0;transform:scale(1)}}

body.in-battle{overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body.in-battle #game{overflow:hidden}

@media(max-width:800px){
 :root{--mobile-header:64px}
 html,body{width:100%;max-width:100%;overflow-x:hidden}
 body.in-battle{height:100dvh;min-height:100dvh}
 header{
  height:calc(var(--mobile-header) + env(safe-area-inset-top));
  min-height:calc(var(--mobile-header) + env(safe-area-inset-top));
  padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
 }
 .brand{font-size:18px;line-height:1}.brand span{font-size:9px;letter-spacing:1.6px;margin-top:5px}
 .top-actions{gap:5px}.top-actions button{font-size:11px;padding:7px 8px;min-width:0}
 #game{
  height:calc(100dvh - var(--mobile-header) - env(safe-area-inset-top));
  min-height:0;max-height:calc(100dvh - var(--mobile-header) - env(safe-area-inset-top));
  overflow:hidden;
 }
 .enemy-hud{top:10px;left:max(14px,env(safe-area-inset-left));width:min(43vw,154px)}
 .enemy-hud>span{font-size:10px;line-height:1.35;letter-spacing:1.3px;display:block;max-width:100%}
 .enemy-hud h2{font-size:21px;margin:7px 0 8px}.enemy-hud .vital{gap:7px}.enemy-hud .vital strong{font-size:22px}.enemy-hud .hp-track{width:50px}
 .enemy-hand{margin-top:10px;gap:5px}.back{width:23px;height:33px}
 .dialogue{top:10px;right:max(12px,env(safe-area-inset-right));width:min(48vw,180px);min-height:70px;padding-left:10px}
 .dialogue>span{font-size:10px;letter-spacing:1.2px}.dialogue p{font-size:12.5px;line-height:1.55;margin:6px 0;max-height:5.0em;overflow:hidden}
 .table-state{top:29.5%}#pile{height:104px;margin:4px 0}
 .player-zone{
  left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  width:auto;transform:none;bottom:max(6px,env(safe-area-inset-bottom));
 }
 .player-status{gap:8px;margin-bottom:7px;padding:0 2px;align-items:end}
 .player-status .eyebrow{font-size:9px;letter-spacing:1.2px}.player-status .vital{gap:6px}.player-status .vital strong{font-size:22px}.player-status .hp-track{width:42px}
 .turn-info{max-width:120px;min-width:88px}.turn-info strong{font-size:14px;white-space:nowrap}
 .remaining{min-width:58px;padding-right:1px}.remaining span{font-size:9px;white-space:nowrap}.remaining strong{font-size:22px}
 .hand{gap:6px;min-height:112px;align-items:end;padding:0 2px}
 .card{width:clamp(76px,21vw,96px);height:clamp(108px,30vw,136px);padding:7px 5px}
 .card .face{font-size:36px;margin-top:18px}.card .name{font-size:11px;margin-top:4px}.card .num{font-size:19px;left:8px;top:6px}.card .corner{font-size:8px;right:8px;top:8px}
 .selected-card-panel{margin-top:7px;padding:9px 10px;max-height:92px;overflow:auto;border-radius:3px}
 .selected-card-panel .selected-card-top{margin-bottom:2px}.selected-card-panel strong{font-size:15px}.selected-card-rarity{font-size:10px;margin-top:2px}#selected-card-desc{font-size:11.5px;line-height:1.4;margin:5px 0 0}
 .action-row{min-height:48px;padding-top:7px;gap:7px}.action-row button{font-size:13px;padding:10px 14px;min-height:40px}
 .round-flash{top:39%}.round-flash strong{font-size:40px}
 .opponent-card-hitbox{max-width:42vw;max-height:25dvh}
 .gimmick-fx{inset:-2px}
}

@media(max-width:430px) and (max-height:760px){
 :root{--mobile-header:58px}
 .enemy-hud{top:6px}.dialogue{top:6px}.dialogue p{font-size:11.5px;max-height:4.5em}
 .table-state{top:27%}.player-status{margin-bottom:4px}.hand{min-height:100px}
 .card{width:clamp(70px,20vw,88px);height:clamp(100px,28vw,126px)}
 .selected-card-panel{max-height:76px;padding:7px 9px}.action-row{min-height:43px;padding-top:5px}.action-row button{min-height:36px;padding:8px 12px}
}

/* skin22: free mask skins in face collection */
.skin-shelf{margin:18px 0 22px;padding:14px;border:1px solid #8c846744;background:#171913aa}.skin-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px}.skin-heading b{font:600 15px Georgia;color:#d1c7aa}.skin-heading span{font-size:11px;color:var(--muted)}.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.skin-item{min-width:0;border:1px solid #77745e55;background:#24271f88;padding:10px;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;gap:5px 9px;align-items:center}.skin-item.equipped{border-color:#b9bd91aa;background:#323626aa}.skin-item.locked{border-style:dashed}.skin-mask{grid-row:1/3;width:56px!important;height:60px!important;margin:0!important}.skin-copy{min-width:0}.skin-copy b{display:block;font-size:13px;color:#ded8c3}.skin-copy small{display:block;margin-top:3px;font-size:10px;line-height:1.35;color:#8f9185}.skin-item button{font-size:11px;padding:7px 8px;min-height:32px}.skin-item button:disabled{opacity:.7;color:#c7ca9c}.skin-item[data-skin="pixel"],body[data-skin="pixel"] .selected-card-panel{image-rendering:pixelated}.skin-item[data-skin="demon"]{background:#260e0f99;border-color:#70322c77}body[data-skin="demon"] .selected-card-panel{border-color:#6c292555;background:#1d0d0ddd}body[data-skin="demon"] .selected-card-rarity{filter:saturate(.8)}
@media(max-width:800px){.skin-shelf{padding:10px;margin:14px 0 18px}.skin-heading{align-items:flex-start;flex-direction:column;gap:3px}.skin-grid{grid-template-columns:1fr}.skin-item{grid-template-columns:54px minmax(0,1fr) 76px;grid-template-rows:auto}.skin-mask{grid-row:auto;width:50px!important;height:52px!important}.skin-item button{min-height:40px}.skin-copy small{font-size:10px}}
/* Online uses the same 3D table; only connection controls sit above the scene. */
.online-bar{position:fixed;z-index:12;left:50%;transform:translateX(-50%);top:75px;width:min(540px,90vw);padding:10px 14px;border:1px solid #7b705449;background:#11120fdd;backdrop-filter:blur(8px);font-size:12px;box-sizing:border-box}.online-bar[hidden]{display:none}.online-bar>div:first-child{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.online-bar-actions{display:flex;gap:6px;margin-top:7px}.online-bar button{padding:6px 9px;font-size:11px}.online-bar p:empty{display:none}#online-notice{color:#e3ae87;margin:6px 0;line-height:1.4}#online-emotes{display:flex;gap:5px;margin-top:5px}#online-emotes[hidden]{display:none}.online-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.online-fields label{display:grid;gap:8px;font-size:13px}.online-fields input{width:100%;box-sizing:border-box;padding:13px;background:#10110f;border:1px solid #706d56;color:#eee9d7;font:inherit;border-radius:3px}.online-fields input:focus{outline:1px solid #d5bd85}.online-join-actions{display:flex;gap:10px}.room-code{display:block;font-size:clamp(22px,5vw,36px);letter-spacing:.13em;margin:22px 0;color:#ded3b6}#online-error{min-height:1.4em;color:#dec198;line-height:1.6}#join-code{text-transform:uppercase}body:has(.online-bar:not([hidden])) .dialogue{top:34%}body:has(.online-bar:not([hidden])) #hint{max-width:420px;line-height:1.45;white-space:normal} @media(max-width:700px){.online-bar{top:62px;width:calc(100vw - 24px);font-size:10px;padding:7px 10px}.online-bar button{font-size:10px;padding:5px 7px}.online-fields{grid-template-columns:1fr}.online-bar #online-emotes{margin-top:4px}body:has(.online-bar:not([hidden])) .dialogue{top:34%;}body:has(.online-bar:not([hidden])) .enemy-hud{top:190px}body:has(.online-bar:not([hidden])) #hint{max-width:50vw;font-size:10px;max-height:65px;overflow:auto}}
.transfer-fields{grid-template-columns:1fr;margin-bottom:10px}.transfer-fields input{text-transform:uppercase;letter-spacing:.14em;text-align:center;font-weight:700}.transfer-code{display:block;margin:22px 0;padding:18px 12px;border:1px solid #8f8968;background:#0d0e0c;color:#e8dfc5;text-align:center;font:700 clamp(26px,7vw,42px)/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em;user-select:all}#transfer-status,#copy-status{min-height:1.4em;color:#dec198;line-height:1.6}.nightmare-rule strong{color:#d3b1a0}

/* ui28: damage/armor hierarchy + compact used-card history */
.defense-readout{display:block!important;margin-top:3px;font-size:11px!important;color:#b7b9a9!important;letter-spacing:.02em;white-space:nowrap}
.defense-readout b{font-family:Georgia,'Times New Roman',serif;font-size:14px;color:#d9ddbf;font-weight:600;margin-left:3px}
.round-log .log-owner{display:inline-block;min-width:28px;margin-right:4px;font-size:10px;letter-spacing:.04em;color:#979b8d}
.round-log .log-owner.mine{color:#c5cf91}.round-log .log-owner.enemy{color:#c7998d}.round-log li b{font-family:Georgia,'Times New Roman',serif;color:#d8d5c4;font-weight:500;margin-right:3px}.round-log .log-empty{opacity:.55}

@media(max-width:800px){
 .remaining{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}
 .defense-readout{font-size:8.5px!important;margin-top:1px}.defense-readout b{font-size:11px;margin-left:2px}
 .round-log{display:block;z-index:17;left:max(10px,env(safe-area-inset-left));top:160px;width:min(34vw,136px);max-width:none;padding:4px 6px;border:1px solid #aaa68a1c;background:#0d0f0cb8;box-shadow:0 4px 12px #0004;backdrop-filter:blur(2px);font-size:8.7px;line-height:1.18;pointer-events:none}
 .round-log>span{display:block;font-size:7px;letter-spacing:.8px;margin-bottom:2px;color:#8e947f}
 .round-log ol{margin:0;padding:0;line-height:1.25;max-height:25px;overflow:hidden}
 .round-log li{margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .round-log li:nth-last-child(n+3){display:none}
 .round-log .log-owner{min-width:18px;margin-right:1px;font-size:7px}.round-log li b{font-size:9px;margin-right:1px}
}
@media(max-width:430px) and (max-height:760px){
 .round-log{top:142px;width:min(32vw,124px);padding:4px 5px;font-size:8px}.round-log>span{font-size:6.5px}.round-log ol{max-height:23px}
}

/* ui32: unified typography + sharp vector identity + restrained horror UI */
:root{
 --ui-font:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
 --paper:#e9e2cf;--paper-strong:#f4edd9;--muted:#a6a594;--acid:#c3ce86;--blood:#b96254;
 --panel-soft:linear-gradient(180deg,rgba(18,22,17,.90),rgba(10,12,10,.95));
 --panel-edge:#bcb28d35;--shadow-soft:0 12px 34px rgba(0,0,0,.30);--shadow-hard:0 22px 72px rgba(0,0,0,.54);
}
html,body,button,input,select,textarea,dialog{font-family:var(--ui-font);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.vital strong,.remaining strong,.results strong,.card .num,.card .name,.defense-readout b,.back,.quote{font-family:var(--ui-font)!important}
body{background:radial-gradient(circle at 54% 14%,#1a1f18 0,#11130f 31%,#080a08 100%);color:var(--paper);letter-spacing:-.012em}
.vignette{background:radial-gradient(ellipse at 58% 46%,transparent 6%,#0508065c 63%,#020302ed 100%)}
.grain{opacity:.045;mix-blend-mode:soft-light}

header{height:82px;padding:16px 4.5%;background:linear-gradient(180deg,rgba(6,8,7,.94),rgba(8,10,9,.65) 64%,rgba(8,10,9,.08));backdrop-filter:blur(8px);border-bottom:1px solid #bdb38d1f;position:relative;z-index:25}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--paper-strong);text-transform:none}
.brand-mask{position:relative;display:block;width:33px;height:37px;flex:0 0 33px;border:1.4px solid #c8ce9a;border-radius:48% 48% 44% 44%/42% 42% 58% 58%;box-shadow:0 0 18px rgba(194,207,129,.10),inset 0 0 15px rgba(194,207,129,.03);background:linear-gradient(160deg,rgba(226,219,194,.055),rgba(18,21,16,.30))}
.brand-mask:before{content:"";position:absolute;left:7px;right:7px;top:13px;height:6px;border-top:1.35px solid #d6d0ba;border-radius:50%;transform:rotate(-2deg);box-shadow:0 9px 0 -3px rgba(190,102,84,.92)}
.brand-mask:after{content:"";position:absolute;left:15px;top:4px;width:1px;height:28px;background:linear-gradient(#777d62,#c3cf81 42%,#9c5f53 43% 58%,#696d59 59%);transform:rotate(9deg);opacity:.82}
.brand-mask i{position:absolute;left:8px;top:14px;width:4px;height:2px;border-radius:50%;background:#090b09;box-shadow:13px 0 0 #090b09}
.brand-type{display:flex;flex-direction:column;min-width:0;line-height:1}.brand-type b{font-size:18px;font-weight:780;letter-spacing:.15em;color:#efe8d3;white-space:nowrap}.brand-type small{margin-top:5px;font-size:8.5px;font-weight:560;letter-spacing:.19em;color:#999c8d;white-space:nowrap}
.top-actions{gap:7px}.top-actions button{padding:8px 11px;font-size:12px;border-radius:3px;background:rgba(10,13,11,.72);border-color:#a39c7b2e;color:#c9c6b7;box-shadow:none}.top-actions button:hover:enabled{background:#22271e;border-color:#bdc68877}.top-actions button.sound-on{border-color:#b9c58088;color:#d8dfa8;box-shadow:inset 0 0 12px rgba(195,206,134,.08)}

.menu{min-height:calc(100svh - 82px);padding:5.5vh 8%;align-items:center}.menu:before{content:"";position:absolute;left:6.7%;top:9%;bottom:10%;width:1px;background:linear-gradient(transparent,#b9b18b30 18% 82%,transparent);pointer-events:none}
.menu-copy{width:min(405px,90vw);padding-left:24px;position:relative}.menu .eyebrow{font-size:10px;font-weight:700;letter-spacing:.27em;color:#9eaa78}
.hero-wordmark{position:relative;display:inline-flex;flex-direction:column;margin:25px 0 25px;padding:14px 44px 15px 0;font-size:clamp(70px,8.2vw,128px);font-weight:860;line-height:.73;letter-spacing:-.055em;color:var(--paper-strong);text-shadow:0 8px 30px rgba(0,0,0,.68);user-select:none}
.hero-wordmark:before,.hero-wordmark:after{content:"";position:absolute;left:0;width:min(292px,76vw);height:1px;background:linear-gradient(90deg,rgba(195,207,129,.80),rgba(195,207,129,0))}.hero-wordmark:before{top:0}.hero-wordmark:after{bottom:0;opacity:.55}
.hero-wordmark span{display:block}.hero-wordmark .hero-you{color:var(--acid);padding-left:.22em;margin-top:.11em}.hero-wordmark i{position:absolute;right:10px;top:17%;width:26px;height:57%;border-left:1px solid rgba(190,102,84,.85);transform:skew(-10deg) rotate(8deg);filter:drop-shadow(0 0 5px rgba(190,102,84,.22))}.hero-wordmark i:after{content:"";position:absolute;left:-5px;top:44%;width:11px;height:1px;background:#be6654;transform:rotate(30deg)}
.menu p{font-size:15px;line-height:1.78;color:#c6c5b9;max-width:31ch;margin-bottom:23px}.menu-buttons{gap:8px}.menu-buttons button{position:relative;overflow:hidden;padding:13px 15px 13px 17px;border-radius:3px;background:linear-gradient(90deg,rgba(19,23,18,.96),rgba(14,17,13,.92));border-color:#aaa27d31;box-shadow:0 7px 22px rgba(0,0,0,.18);font-weight:610;color:#ddd8c7}.menu-buttons button:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#8f9770;opacity:.28;transition:opacity .2s,background .2s}.menu-buttons button:hover:enabled{transform:translateX(2px);background:linear-gradient(90deg,#252b20f2,#151912ec)}.menu-buttons button:hover:enabled:before{opacity:1;background:var(--acid)}.menu-buttons button.primary{background:linear-gradient(90deg,#b8c57a,#ced995);color:#171b14;border-color:#cad492;font-weight:780}.menu-buttons button.primary:before{background:#fff8cf;opacity:.7}.menu-buttons button span{font-size:11px;letter-spacing:.045em;opacity:.64}
.campaign-track{height:3px;border-radius:99px;background:#77755d29;margin:14px 0 10px;overflow:hidden}.campaign-track i{display:block;height:100%;background:linear-gradient(90deg,#899461,#ced998);box-shadow:0 0 10px #bcc78166}#wallet{font-size:11px!important;color:#929689!important;letter-spacing:.015em;margin:9px 0 7px!important}.minor-actions{display:flex;gap:7px;flex-wrap:wrap}.minor-actions button{font-size:11px;padding:8px 10px;background:#0d100ddb;border-color:#8f896d2a;color:#aeb0a3;box-shadow:none}.menu-foot{font-size:10px;letter-spacing:.02em}.quote{font-size:19px;font-weight:500;letter-spacing:.02em;color:#cbc8b9}.quote span{font-size:10px;letter-spacing:.08em}

button{border-radius:3px;border-color:#b9b08a35;background:linear-gradient(180deg,rgba(26,30,24,.97),rgba(15,18,14,.97));box-shadow:inset 0 1px rgba(255,255,255,.035);font-weight:600;letter-spacing:-.005em}button:hover:enabled{transform:translateY(-1px);border-color:#c9d49483;background:linear-gradient(180deg,rgba(46,53,40,.98),rgba(28,34,26,.98))}button.primary{background:linear-gradient(180deg,#ced98e,#b5c277);color:#131812;border-color:#d7dea7;box-shadow:0 9px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,219,.38)}
.enemy-hud,.dialogue,.round-log,.selected-card-panel,.online-bar,dialog{border-radius:4px}.enemy-hud{padding:12px 14px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.enemy-hud>span,.dialogue>span,.eyebrow,.edition{font-weight:700;letter-spacing:.15em}.enemy-hud h2,h2{font-weight:720;letter-spacing:-.035em}.vital strong,.remaining strong{font-weight:760;letter-spacing:-.045em}.hp-track{height:3px;border-radius:99px;overflow:hidden}.hp-track i{background:linear-gradient(90deg,#87955e,#ced998)}
.dialogue{border-left:0;padding:11px 13px 11px 16px;background:transparent;box-shadow:none;backdrop-filter:none}.dialogue p{color:#d5d3c7;font-weight:470}.dialogue button{border-radius:3px;background:rgba(17,21,16,.82)}
.table-state:after{content:"";position:absolute;left:50%;top:50%;width:250px;height:250px;transform:translate(-50%,-50%);border:1px solid #9e987326;border-radius:50%;pointer-events:none;mask-image:linear-gradient(to bottom,#0000,#000 23% 77%,#0000);z-index:-1}#table-caption{font-weight:650;letter-spacing:.02em}.round-log{border:0;background:transparent;box-shadow:none;backdrop-filter:none}.round-log>span{font-weight:700}
.player-status{padding:7px 9px;border:0;background:transparent;backdrop-filter:none;border-radius:0}.turn-info strong{font-weight:700}.remaining{padding-left:8px;border-left:0}.defense-readout{color:#c2c5b7!important}
.card{border-radius:5px;border-color:#aaa18b;background:linear-gradient(145deg,#ddd4bd,#c9bfa6);box-shadow:0 13px 23px rgba(0,0,0,.39),0 1px 0 rgba(255,255,255,.16) inset;color:#252820}.card:before{border-color:#4a4c3943;border-radius:3px}.card .num{font-weight:790;letter-spacing:-.065em}.card .name{font-weight:760;letter-spacing:-.018em}.card .corner{font-weight:720;letter-spacing:.07em}.card:hover:enabled{background:linear-gradient(145deg,#eee6d1,#d7ccb0)}.card.selected{box-shadow:0 0 0 1px #dce59d,0 14px 34px rgba(0,0,0,.72),0 0 23px rgba(181,195,123,.14)}
.selected-card-panel{border:1px solid #aaa27d30;background:linear-gradient(180deg,rgba(18,22,17,.74),rgba(9,12,9,.78));box-shadow:var(--shadow-soft)}.selected-card-panel strong{font-weight:740}.selected-card-rarity{font-weight:650}.selected-card-panel .selected-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;letter-spacing:.10em;color:#aeb2a1;text-transform:uppercase}
dialog{background:linear-gradient(180deg,rgba(23,27,22,.985),rgba(13,16,13,.99));border:1px solid #b4aa8548;box-shadow:var(--shadow-hard);padding:31px}dialog:before{content:"";display:block;width:38px;height:2px;margin-bottom:14px;background:linear-gradient(90deg,var(--acid),transparent)}dialog h2{font-size:29px;font-weight:760}.deck-option,.collection-item,.skin-item,.results>div,.boss-rule,.skin-shelf{border-radius:3px}.online-fields input{border-radius:3px;background:#0b0e0b;border-color:#8c876a55;font-family:var(--ui-font)}.transfer-code{border-radius:4px}

@media(max-width:800px){
 header{height:64px;padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left))}.brand{gap:7px}.brand-mask{width:27px;height:31px;flex-basis:27px}.brand-mask:before{left:6px;right:6px;top:10px;box-shadow:0 8px 0 -3px rgba(190,102,84,.92)}.brand-mask:after{left:12px;top:3px;height:24px}.brand-mask i{left:7px;top:11px;box-shadow:10px 0 0 #090b09}.brand-type b{font-size:14px;letter-spacing:.12em}.brand-type small{font-size:7px;letter-spacing:.12em;margin-top:4px}.top-actions{gap:4px}.top-actions button{font-size:10px;padding:7px 7px}
 .menu{min-height:calc(100svh - 64px);padding:5vh 6% 5.5vh;align-items:flex-end}.menu:before{left:5.2%;top:5%;bottom:5%}.menu-copy{width:min(334px,92vw);padding-left:15px}.menu .eyebrow{font-size:8px;letter-spacing:.22em}.hero-wordmark{font-size:clamp(62px,19vw,83px);padding-right:32px;margin:17px 0 21px}.hero-wordmark i{right:5px}.menu p{font-size:13px;line-height:1.65;margin-bottom:18px}.menu-buttons{gap:6px}.menu-buttons button{padding:11px 12px 11px 14px;font-size:13px}.menu-buttons button span{font-size:9px}.minor-actions button{font-size:10px;padding:7px 8px}#wallet{font-size:9.5px!important}.quote{display:none}
 #game{height:calc(100dvh - 64px);max-height:calc(100dvh - 64px)}.enemy-hud{padding:10px 11px}.enemy-hud h2{font-size:20px}.dialogue{padding:10px 10px 10px 12px}.round-log{background:transparent;border:0}.player-status{padding:6px 7px}dialog{padding:24px 18px}dialog h2{font-size:25px}
}
@media(max-width:380px){.brand-type small{display:none}.top-actions button{padding:6px}.hero-wordmark{font-size:59px}.menu-copy{padding-left:12px}.menu-buttons button{font-size:12px}}


/* v34: tutorial frame polish while keeping transparent battle UI */
body.tutorial-mode .enemy-hud,
body.tutorial-mode .dialogue{
 position:absolute;
}
body.tutorial-mode .enemy-hud:before,
body.tutorial-mode .dialogue:before{display:none}
body.tutorial-mode .enemy-hud{
 min-height:252px;
}
body.tutorial-mode .dialogue{
 width:min(320px,42vw);
 min-height:132px;
 display:flex;
 flex-direction:column;
 justify-content:flex-start;
}
body.tutorial-mode .dialogue p{
 max-width:15ch;
}
body.tutorial-mode .round-log{
 margin-top:8px;
}
body.tutorial-mode #chapter,
body.tutorial-mode #speaker{
 color:#d4dca4;
}
body.tutorial-mode #chapter{letter-spacing:.18em}
body.tutorial-mode #speaker{letter-spacing:.12em}

@media(max-width:800px){
 body.tutorial-mode .enemy-hud{min-height:214px}
 body.tutorial-mode .dialogue{width:min(45vw,182px);min-height:116px}
 body.tutorial-mode .dialogue p{max-width:12ch}
 body.tutorial-mode .enemy-hud:before,
 body.tutorial-mode .dialogue:before{
  background:
   linear-gradient(90deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) left top/20px 1px no-repeat,
   linear-gradient(180deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) left top/1px 20px no-repeat,
   linear-gradient(90deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) right top/20px 1px no-repeat,
   linear-gradient(180deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) right top/1px 20px no-repeat,
   linear-gradient(90deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) left bottom/20px 1px no-repeat,
   linear-gradient(180deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) left bottom/1px 20px no-repeat,
   linear-gradient(90deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) right bottom/20px 1px no-repeat,
   linear-gradient(180deg, rgba(194,207,129,.52), rgba(194,207,129,.52)) right bottom/1px 20px no-repeat;
 }
}


/* v35: keep the right tutorial copy completely frameless */
.dialogue,
body.tutorial-mode .dialogue{
 border:0!important;
 border-left:0!important;
 box-shadow:none!important;
 background:transparent!important;
 backdrop-filter:none!important;
}
body.tutorial-mode .dialogue:before{display:none!important;content:none!important}

/* Tutorial target hugs the actual card instead of floating outside it. */
.card.tutorial-target:not(.selected){
 outline:0!important;
 box-shadow:inset 0 0 0 2px rgba(205,219,139,.88),0 10px 24px rgba(0,0,0,.42)!important;
 animation:tutorial-card-glow 1.55s ease-in-out infinite!important;
}
.is-3d #hand .card.tutorial-target{outline:0!important;outline-offset:0!important}
@keyframes tutorial-card-glow{
 0%,100%{filter:brightness(1);box-shadow:inset 0 0 0 2px rgba(205,219,139,.68),0 10px 24px rgba(0,0,0,.40)}
 50%{filter:brightness(1.07);box-shadow:inset 0 0 0 2px rgba(229,238,168,.98),0 10px 24px rgba(0,0,0,.44),0 0 13px rgba(194,207,129,.16)}
}


/* v36: clean header, character-safe tutorial copy, local-music build */
.brand{gap:0!important}.brand-mask{display:none!important}
body.in-battle header{height:58px!important;min-height:58px!important;padding:8px 4%!important;justify-content:flex-end!important;background:linear-gradient(180deg,rgba(6,8,7,.88),rgba(8,10,9,.10))!important}
body.in-battle header .brand{display:none!important}
body.in-battle #game{height:calc(100svh - 58px)!important;min-height:0}
body.tutorial-mode .enemy-hud:before,body.tutorial-mode .dialogue:before{display:none!important;content:none!important}
body.tutorial-mode .dialogue{left:auto!important;right:4%!important;width:min(34vw,260px)!important;max-width:260px!important;min-height:0!important;padding:0!important;border:0!important;border-left:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
body.tutorial-mode .dialogue p{max-width:none!important;max-height:none!important;overflow:visible!important;margin-top:8px!important}
body.tutorial-mode .dialogue>span{display:block}
.card.tutorial-target:not(.selected){outline:0!important;box-shadow:inset 0 0 0 2px rgba(219,230,154,.92),0 10px 24px rgba(0,0,0,.42)!important}
.is-3d #hand .card.tutorial-target{outline:0!important;outline-offset:0!important}
@media(max-width:800px){
 body.in-battle{--mobile-header:50px}
 body.in-battle header{height:calc(50px + env(safe-area-inset-top))!important;min-height:calc(50px + env(safe-area-inset-top))!important;padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))!important}
 body.in-battle #game{height:calc(100dvh - 50px - env(safe-area-inset-top))!important;max-height:calc(100dvh - 50px - env(safe-area-inset-top))!important}
 .brand-type b{font-size:15px}.brand-type small{font-size:7px}
 body.tutorial-mode .dialogue{top:10px!important;left:auto!important;right:max(12px,env(safe-area-inset-right))!important;width:34vw!important;max-width:138px!important;padding:0!important}
 body.tutorial-mode .dialogue>span{font-size:9.5px!important;line-height:1.25!important;letter-spacing:.11em!important}
 body.tutorial-mode .dialogue p{font-size:10.9px!important;line-height:1.46!important;margin:7px 0 0!important;max-width:none!important;max-height:none!important;overflow:visible!important}
}
@media(max-width:390px){body.tutorial-mode .dialogue{width:33vw!important;max-width:126px!important;right:3.5%!important}body.tutorial-mode .dialogue p{font-size:10.8px!important;line-height:1.46!important}}

/* v38 fully borderless transparent battle overlay */
#game .enemy-hud,#game .dialogue,#game .round-log,#game .player-status{outline:none!important;border:none!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important}
#game .dialogue,#game .round-log,#game .enemy-hud{border-left:none!important}
#game .remaining{border-left:none!important}
body.tutorial-mode .enemy-hud:before,body.tutorial-mode .dialogue:before{display:none!important}
/* v40: transparent entrance captions stay below the character. */
.battle-intro{background:transparent;display:block;opacity:1;transition:none;overflow:hidden}
.battle-intro.active.reveal{opacity:1}
.battle-intro .battle-intro-copy{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:calc(12% + env(safe-area-inset-bottom));align-items:flex-start;gap:10px;max-width:70%;font-family:inherit;font-size:clamp(17px,3vw,27px);letter-spacing:.05em;text-indent:0;text-transform:none;text-shadow:0 2px 12px #000;animation:entrance-caption 1.1s ease both}
.battle-intro .battle-intro-copy small{font-size:clamp(12px,1.7vw,15px);letter-spacing:0;line-height:1.6;color:#aaa58e}
#skip-intro{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(4% + env(safe-area-inset-bottom));border:0;background:transparent;box-shadow:none;color:#c1bea9;font-size:13px;padding:14px 8px}
#skip-intro:focus-visible{outline:1px solid #b6b192;outline-offset:3px}
@keyframes entrance-caption{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.battle-intro .battle-intro-copy{animation:none}}

/* v42: history follows the opponent hand, including wrapped names and online HUD. */
#game .enemy-hud > .round-log{
 position:static;inset:auto;transform:none;display:block;
 width:100%;max-width:100%;box-sizing:border-box;
 margin:10px 0 0;padding:0;pointer-events:none;
}
#game .enemy-hand{min-height:34px}
@media(max-width:800px){
 #game .enemy-hud > .round-log{margin-top:8px}
}

/* v43: concise battle status and immediate pack results. */
#game #table-caption:not([hidden]){display:block!important;font-size:11px;color:var(--acid);margin-top:4px}
#game #battle-rule{display:none}
.quick-pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:16px 0}
.quick-pack-grid button{text-align:left;padding:10px;font-size:12px}
.quick-pack-grid span{font-size:10px}
#quick-packs{margin-top:8px;width:100%}


/* v44: feedback pass — less text, clearer legal-number state, faster packs. */
#game #hint[hidden]{display:none!important}
#game #hint{font-size:11px!important;line-height:1.3!important;max-width:330px}
#selected-card-desc{font-size:12px!important;line-height:1.35!important;margin-top:5px!important;color:#c9cabb!important}
.selected-card-panel{padding:9px 12px!important;margin-top:8px!important;max-width:520px!important}
.selected-card-panel strong{font-size:16px!important}.selected-card-rarity{font-size:10px!important;margin-top:2px!important}
#table-caption{font-size:12px!important;letter-spacing:.01em!important}
#quick-packs{width:100%;margin-top:8px}.danger{border-color:#a75c524d!important;color:#d99a90!important}
.pack-wallet{margin:10px 0 4px!important}.pity-meter{margin:4px 0 10px!important;font-size:11px!important}
@media(max-width:800px){
 #game #hint{font-size:9.5px!important;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .selected-card-panel{padding:7px 9px!important;margin-top:5px!important;max-height:72px!important;overflow:hidden}
 #selected-card-desc{font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .selected-card-panel strong{font-size:13px!important}
}

/* v51 PvP prep: keep dense ban/pick lists readable on phones. */
@media(max-width:700px){
 #online-ban-grid,#online-draft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #online-ban-grid .deck-option,#online-draft-grid .deck-option{min-height:92px;padding:10px}
 #online-ban-grid .deck-option strong,#online-draft-grid .deck-option strong{font-size:14px;line-height:1.3}
 #online-ban-grid .deck-option small,#online-draft-grid .deck-option small{font-size:10.5px;line-height:1.42}
}