@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');
:root{color-scheme:dark;font-family:'Space Grotesk',sans-serif;color:#e8eee9;background:#0b0e13}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#1b2c2c55,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}main{max-width:1192px;margin:auto;padding:30px 36px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand{color:#edf6ef;text-decoration:none;font-size:20px;font-weight:700;letter-spacing:2px}.brand span{color:#83f1c4;font-size:30px;vertical-align:middle;margin-right:8px}.edition,small{font-size:12px;letter-spacing:2px;color:#84918e}.edition span{padding:0 12px;color:#4b5754}button{border:1px solid #303c3c;background:transparent;border-radius:5px;padding:10px 14px;font-size:14px}button:hover{border-color:#88f6c4;color:#88f6c4}button:focus-visible{outline:2px solid #eec878;outline-offset:3px}.game-shell{border:1px solid #35423e;box-shadow:0 24px 90px #0007;background:#11171b;border-radius:10px;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;padding:17px 25px;background:#151c20}.topbar small{display:block;margin-bottom:5px}.topbar strong{font-size:22px;color:#ee9586;letter-spacing:4px}.depth{text-align:center}.depth b{font-size:14px;font-weight:500}.coins{text-align:right}.coins strong{color:#edce91;letter-spacing:1px}.arena{position:relative;aspect-ratio:960/600;background:#151d22}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(90deg,#080e16df,#0b141be8);text-align:center;padding:22px}.hidden{display:none!important}.sigil{font-size:50px;color:#89f4cc;line-height:1;margin-bottom:18px;text-shadow:0 0 45px #52ffa2}.overlay small{color:#a9c9bd}h1{font-size:clamp(40px,7vw,84px);line-height:.94;letter-spacing:10px;margin:22px 0 15px}h1 em{font-style:normal;color:#98f4c9}p{font-size:15px;line-height:1.7;color:#9facad}h2{font-size:36px;margin:14px 0}.primary{background:#a0efc8;color:#101e1b;border:0;font-weight:700;padding:16px 25px;margin-top:16px;min-width:230px}.primary:hover{background:#c4ffdf;color:#101e1b}.primary span{margin-left:30px}.hint{font-size:12px;color:#83968f;margin-top:20px}.bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;font-size:13px;color:#9cafaa}.bottom i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9eedc8;margin-right:8px}.bottom button{border:0;padding:5px}.under{display:flex;justify-content:space-between;gap:30px;margin-top:24px}.under p{font-size:13px;margin:10px 0}.under span{margin:0 10px}.artifacts{text-align:right;max-width:45%}kbd{font:inherit;border:1px solid #3e4948;padding:3px 5px;border-radius:3px;color:#bbc9c3;font-size:12px}footer{border-top:1px solid #24302e;margin-top:26px;padding-top:22px;text-align:center;font-size:10px;letter-spacing:2px;color:#637570}#notice{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#0c161be8;color:#b8ffdc;padding:10px 20px;border:1px solid #52977b;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;font-size:14px}.cards{display:flex;gap:14px;margin-top:22px;max-width:800px}.card{width:220px;padding:22px 16px;background:#18282b;border:1px solid #446158;text-align:left}.card b{display:block;font-size:18px;color:#a5f5ce;margin:14px 0 5px}.card p{font-size:14px;margin:0}.card .icon{font-size:35px;color:#e9cd8d}.touch{display:none;justify-content:space-between;align-items:center;margin-top:15px;touch-action:none}.pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}.pad button:first-child{grid-column:2}.pad button:nth-child(2){grid-row:2;grid-column:1}.pad button:nth-child(3){grid-row:2;grid-column:2}.pad button:nth-child(4){grid-row:2;grid-column:3}@media(pointer:coarse){.touch{display:flex}}@media(max-width:700px){main{padding:16px 10px}header{margin-bottom:16px}.edition{display:none}.brand{font-size:15px}.topbar{padding:12px}.topbar strong{font-size:16px;letter-spacing:1px}.under{flex-direction:column;gap:10px}.artifacts{text-align:left;max-width:none}.arena{aspect-ratio:1.25}.overlay h1{font-size:42px;margin:10px 0}.overlay p{font-size:13px;margin:5px}.sigil{font-size:28px;margin:8px}.overlay small{font-size:10px}.hint{margin-top:12px;font-size:10px}.primary{padding:12px;margin-top:10px}.cards{gap:6px;margin-top:8px}.card{width:30%;flex:1;padding:10px 7px}.card b{font-size:13px;margin:4px 0}.card p{font-size:11px}.card .icon{font-size:20px}h2{font-size:24px}.under p{font-size:12px}footer{font-size:9px;line-height:1.8}small{font-size:10px}}
/* Pixel edition: ink-purple stone, warm brass and jade flame. */
:root{background:#101019}body{background:radial-gradient(ellipse at 50% 40%,#34304766,transparent 72%)}.game-shell{border-color:#5c5267;border-radius:4px;box-shadow:0 0 0 4px #181824,0 28px 100px #0008}.topbar{background:#1b1b29;border-bottom:1px solid #5d5366}.bottom{background:#191a27;border-top:1px solid #5b5062}.arena{background:#242634}canvas{image-rendering:pixelated;object-fit:contain}.brand{color:#e9dfcf}.brand span{color:#b4d8b5}.topbar strong{color:#e6a69e}.coins strong{color:#dec393}.overlay{background:linear-gradient(90deg,#131622b8,#11162494,#151526b8);backdrop-filter:none}.overlay h1{font-family:'VT323',monospace;font-size:clamp(60px,9vw,114px);line-height:.8;letter-spacing:8px;color:#f0dcc2;text-shadow:4px 4px 0 #262338,0 3px 30px #090c20}.overlay h1 em{color:#b2d9b2;text-shadow:4px 4px 0 #254343}.sigil{color:#edca92;text-shadow:0 0 30px #d6a36488}.overlay>p{color:#c3b8bc;text-shadow:0 2px 2px #151420}.primary{background:#b4d8b5;border-radius:2px;box-shadow:inset 0 3px #e0efc8,inset 0 -3px #749c8b,3px 3px #10182a;color:#202735}.primary:hover{background:#d9e7bd}.card{background:#252637;border-color:#736075;border-radius:2px;box-shadow:inset 0 2px #92816e}.card b{color:#dcd9b4}.card .icon{color:#edc590}.card:hover{background:#363447}.edition,small{color:#aaa0ad}.under p{color:#afa7b4}.hint{color:#c0bbb7}.artifacts p{color:#b4ceb5}.pad button,.dash{background:#242637;border-color:#655a70}.touch button:active{background:#496d69}#notice{background:#242638ed;border-color:#b5bd99;color:#e1e5c4}.depth b{color:#c9bfcc}@media(max-width:700px){.arena{aspect-ratio:1.6}.overlay h1{font-size:56px}.overlay .sigil{display:none}.overlay>p{display:none}.overlay{padding:12px}.overlay h1{margin:10px 0}.hint{margin-top:8px}.overlay small{font-size:9px}.primary{min-width:190px;font-size:12px}h2{font-size:21px}.card p{font-size:10px;line-height:1.4}.card b{font-size:12px}.cards{margin-top:4px}.card .icon{font-size:18px}}
/* Card choices and the in-run codex. */
#choices{position:fixed;z-index:15;inset:4vh max(12px,calc((100vw - 1060px)/2));height:92vh;overflow:auto;background:#191b2af5;border:1px solid #8a7888;border-radius:8px;justify-content:flex-start;padding:30px 24px;box-shadow:0 0 0 100vmax #070b15b8}.cards{width:100%;max-width:960px;align-items:stretch;gap:16px;margin:18px 0}.card{width:auto;flex:1;min-width:0;padding:18px;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:14px}.card b{font-size:19px;margin:0;line-height:1.2}.card p{font-size:14px;line-height:1.6;margin:0}.card .icon{font-size:30px}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.badge{font-size:10px;letter-spacing:1px;padding:5px 7px;border:1px solid currentColor;border-radius:3px}.badge.blessing{color:#a5d3b5}.badge.bargain{color:#e9c58c}.badge.curse{color:#e99cb7}.card.bargain{border-color:#9e825f}.card.curse{border-color:#a06585;background:#302334}.card .bad{color:#eeb1b0}.card .good{color:#d4dec9}.rank{font-size:12px;color:#a6a0b5}.combo-link{border-top:1px solid #5b6271;padding-top:10px;color:#9adecf!important;margin-top:auto!important}.choice-actions{display:flex;justify-content:center;gap:12px;margin-top:8px}.choice-help{margin:0}.artifacts #codexBtn{padding:7px 14px;margin-top:2px}dialog{color:#ece5dd;background:#191c2b;border:1px solid #8b7787;border-radius:8px;width:min(1120px,94vw);max-height:92vh;padding:24px;overflow:auto}dialog::backdrop{background:#070b15d9}.codex-head{display:flex;justify-content:space-between;align-items:center}.codex-head h2{margin:8px 0 0}.codex-head button{align-self:flex-start}#buildStats{color:#d4d8b9;font-size:14px;padding:12px 0;border-bottom:1px solid #4c485c}details{padding:10px 14px;background:#242b38;border:1px solid #414f59;border-radius:4px}summary{cursor:pointer;font-size:14px;color:#b0dfc8}#comboList{padding-left:18px;font-size:13px;line-height:1.7;color:#b9bdc8;margin:10px 0 0}.rules{font-size:12px;line-height:1.6;color:#9f9bad}.codex-controls{display:flex;flex-direction:column;gap:10px;margin:18px 0}.codex-controls input{font:inherit;font-size:14px;background:#111827;color:#e2dfd0;border:1px solid #5a5469;padding:12px;border-radius:4px;width:100%}.filters{display:flex;flex-wrap:wrap;gap:7px}.filters button{font-size:12px;padding:8px 11px}.filters button[aria-pressed=true]{background:#8caf9b;color:#18252b;border-color:#c6d2b1}#codexGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#codexGrid .card{margin:0}#codexGrid .held{box-shadow:inset 0 3px #b5d7ad}#codexGrid .card p{font-size:13px}.card:hover{color:inherit}.card:focus-visible{outline:3px solid #f6d4a1;outline-offset:3px}@media(max-width:700px){#choices{inset:auto 8px 12px 8px!important;top:50%!important;transform:translateY(-50%)!important;width:calc(100vw - 16px)!important;max-width:540px!important;margin:0 auto!important;height:auto!important;max-height:92dvh!important;padding:12px 8px!important;border-radius:8px!important;box-shadow:0 0 0 100vmax #070b15b8!important}#choices>p{display:block!important}#choices h2{font-size:15px!important;margin:2px 0 4px!important}#choices small{font-size:9px!important;letter-spacing:1px!important}#choices .choice-help{font-size:9.5px!important;margin:0 0 6px!important;line-height:1.3!important}#choices .cards{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:5px!important;width:100%!important;margin:4px 0 6px!important;align-items:stretch!important}#choices .card{flex:1 1 0!important;min-width:0!important;width:calc(33.33% - 4px)!important;padding:6px 5px!important;min-height:auto!important;max-height:58vh!important;overflow-y:auto!important;gap:3px!important;border-radius:6px!important;font-size:9px!important}#choices .card-top{min-height:auto!important;gap:2px!important}#choices .card .icon{font-size:16px!important;line-height:1!important}#choices .card .badge{font-size:7px!important;padding:1px 3px!important;letter-spacing:0!important;line-height:1!important}#choices .card .rarity{font-size:7.5px!important;padding:1px 3px!important;line-height:1!important}#choices .card b{font-size:11px!important;line-height:1.2!important;margin:2px 0!important}#choices .card .rank{font-size:7.5px!important;margin:0!important}#choices .card-stats{gap:2px!important}#choices .card-stat{padding:2px 3px!important;gap:2px!important;border-radius:3px!important}#choices .card-stat strong{font-size:9px!important;line-height:1.2!important}#choices .card-stat small{font-size:7px!important}#choices .card-description{padding:4px 5px!important;font-size:8px!important;line-height:1.3!important;border-radius:4px!important;margin-top:auto!important}#choices .card p,#choices .card .good,#choices .card .bad{font-size:8px!important;line-height:1.3!important;padding:3px!important;margin:0!important}#choices .combo-link{font-size:7px!important;line-height:1.2!important;padding-top:2px!important;margin-top:2px!important}#choices .choice-actions{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;padding:2px 0!important;margin-top:4px!important}#choices .choice-actions button{flex:1!important;font-size:11px!important;padding:6px 10px!important}dialog{padding:16px}#codexGrid{grid-template-columns:1fr}#buildStats{line-height:1.7}.artifacts{margin-bottom:4px}.topbar strong{font-size:17px}#notice{font-size:11px!important;padding:5px 12px!important;top:10px!important}}

.rarity{font-size:12px;font-weight:700;letter-spacing:1px;padding:6px 8px;border-left:3px solid currentColor;background:#0d142755}.rarity-F{color:#b3b6c2}.rarity-D{color:#acd89f}.rarity-C{color:#88cfe1}.rarity-B{color:#bca1ef}.rarity-A{color:#f1c58d}.rarity-S{color:#ff97bf;text-shadow:0 0 14px #ef6caa55}#rarityOdds{color:#d5dcbd}

#shop{width:min(1080px,95vw)}#shopStock{max-width:none}#shopFunds{color:#e4ca97}button:disabled{opacity:.4;cursor:not-allowed}#shopStock button{margin-top:auto}#shopStock .card .rank{display:none}@media(max-width:700px){#shopStock{flex-direction:column}.bottom{flex-wrap:wrap;gap:5px}}

/* Three-column game workspace. The ad slot has no network requests until configured. */
main{max-width:1900px;padding:24px}.play-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 302px;gap:20px;align-items:start}.play-center{min-width:0}.character-panel,.advert-sticky{position:sticky;top:20px}.character-panel{padding:20px 16px;background:#191c29;border:1px solid #50475d;border-radius:5px;max-height:calc(100vh - 40px);overflow:auto}.character-panel h2{font-size:22px;margin:10px 0 20px}.character-panel h3{font-size:15px;margin:0}.character-panel dl{margin:0 0 22px}.character-panel dl>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #303343;font-size:14px}.character-panel dt{color:#a8adba}.character-panel dd{margin:0;color:#dce6c7;font-variant-numeric:tabular-nums}.held-heading{display:flex;justify-content:space-between;align-items:center}.held-heading>span{color:#b9d6b7;background:#2c3c3a;padding:3px 8px;border-radius:4px;font-size:13px}.character-panel #items{font-size:12px;line-height:1.7;color:#9caab0}.held-card{display:flex;align-items:center;width:100%;gap:8px;text-align:left;padding:8px 5px;margin:6px 0;font-size:13px}.held-card .rarity{padding:4px;flex:none}.held-card>span:nth-child(2){flex:1;line-height:1.5}.held-card b{font-size:12px;color:#d2c7af}.character-panel #codexBtn{width:100%;margin-top:12px}#liveCombos p{font-size:12px;line-height:1.6;padding-top:12px;border-top:1px solid #384452}#liveCombos b{display:block;color:#abd9bf}#liveCombos span{display:block;margin-top:4px;color:#a3abb6}.advert-sticky{text-align:center}.advert-sticky>small{display:block;margin:0 0 12px;font-size:11px;letter-spacing:2px}.advert-slot{width:300px;height:600px;max-width:100%;border:1px dashed #4b485b;background:repeating-linear-gradient(135deg,#191b27,#191b27 12px,#1b1d29 12px,#1b1d29 24px);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#777f92;border-radius:4px}.advert-slot span{font-size:14px}.advert-slot strong{font-size:26px;font-weight:500;margin-top:14px;color:#a1a7b6}.advert-slot p{font-size:12px;color:#747e90}.under{margin-top:18px}.under p{line-height:2}.game-shell{box-shadow:0 0 0 2px #181824,0 20px 50px #0005}.topbar{padding:14px 18px}.bottom{flex-wrap:wrap;gap:5px}.overlay h1{font-size:clamp(45px,5.2vw,84px)}.overlay .sigil{margin-bottom:5px}.overlay p{margin:8px 0}.advert-panel{min-width:0}
@media(max-width:1450px){.play-layout{grid-template-columns:210px minmax(0,1fr) 162px;gap:14px}main{padding:20px 16px}.advert-slot{width:160px}.character-panel{padding:16px 12px}.overlay h1{font-size:58px}.overlay .sigil{display:none}}
@media(max-width:1100px){.play-layout{grid-template-columns:minmax(0,1fr) 162px}.play-center{grid-column:1;grid-row:1}.character-panel{grid-column:1;grid-row:2;position:static;max-height:none}.advert-panel{grid-column:2;grid-row:1 / span 2}.character-panel dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}#heldCards{display:grid;grid-template-columns:1fr 1fr;gap:6px}.character-panel #codexBtn{max-width:300px}}
@media(max-width:760px){main{padding:14px 10px}.play-layout{display:flex;flex-direction:column;gap:18px}.play-center,.character-panel{width:100%}.advert-panel{display:none}.character-panel{order:2}.play-center{order:1}.overlay h1{font-size:48px}.character-panel dl{gap:0 16px}.character-panel h2{margin-bottom:10px}#heldCards{grid-template-columns:1fr}.topbar{padding:12px}.under{margin-top:14px}}

.advert-slot strong span{font-size:24px}.ad-narrow{display:none}@media(max-width:1450px){.ad-wide{display:none}.ad-narrow{display:inline}}
/* A passive card receipt, placed outside the main arena on wide screens. */
.card-pickup{position:fixed;right:18px;bottom:22px;z-index:40;width:290px;max-width:calc(100vw - 36px);padding:14px 16px;background:#151d28f5;border:1px solid #78978b;border-left:3px solid #bcddba;box-shadow:0 8px 28px #0006;color:#e7ede4;pointer-events:none;text-align:left;font-size:13px;line-height:1.45}
.card-pickup small{display:block;color:#a7c9b8;font-size:10px;letter-spacing:.14em;margin-bottom:5px}
.card-pickup strong{display:block;font-size:16px;color:#f2e5bd}
.card-pickup span{display:block;font-size:10px;color:#b7b5c8;margin:4px 0 8px}
.card-pickup p{margin:5px 0 0;color:#c0e1bf}
.card-pickup #cardPickupBad{color:#efa79b}
@media(max-width:900px){
  .card-pickup{
    top:calc(56px + env(safe-area-inset-top, 0px))!important;
    bottom:auto!important;
    right:calc(10px + env(safe-area-inset-right, 0px))!important;
    left:auto!important;
    width:auto!important;
    max-width:215px!important;
    padding:6px 10px!important;
    font-size:9.5px!important;
    line-height:1.32!important;
    border-radius:6px!important;
    background:#151d28ed!important;
    backdrop-filter:blur(4px)!important;
    box-shadow:0 4px 16px #0008!important;
    border:1px solid #78978b88!important;
    border-left:3px solid #bcddba!important;
  }
  .card-pickup small{font-size:8px!important;letter-spacing:.08em!important;margin-bottom:2px!important}
  .card-pickup strong{font-size:12px!important;line-height:1.2!important}
  .card-pickup span{font-size:8.5px!important;margin:2px 0 3px!important}
  .card-pickup p{font-size:8.5px!important;margin:2px 0 0!important;line-height:1.3!important}
  .card-pickup #cardPickupBad{font-size:8.5px!important}
}

.restart-fade{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding:0 20px 8vh;color:#e9e5d5;font:14px monospace;text-align:center}.restart-fade.hidden{display:none}.restart-help{display:block;margin-top:8px;font-size:11px;color:#9299a6}

#debugGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#debugGrid .card{margin:0}#debugGrid button{margin-top:auto}#debugGrid button:disabled{opacity:.5;cursor:default}#debugResult{color:#b0dfc8;font-size:14px}@media(max-width:700px){#debugGrid{grid-template-columns:1fr}}
.header-actions{display:flex;gap:10px;align-items:center}
.lang-btn{font-weight:600;letter-spacing:1px;background:#1b1b29;border:1px solid #5c5267;color:#dec393;padding:8px 14px;border-radius:4px;cursor:pointer;transition:all .15s ease}
.lang-btn:hover{background:#252637;border-color:#88f6c4;color:#88f6c4;box-shadow:0 0 10px rgba(136,246,196,.25)}
.lang-btn:focus-visible{outline:2px solid #eec878;outline-offset:3px}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.topbar>div{min-width:0}.topbar .depth{overflow-wrap:anywhere}.topbar .coins strong{letter-spacing:0;font-size:clamp(12px,1.5vw,20px)}
.topbar #health{display:block;width:100%;height:18px;overflow:hidden;font-size:0;letter-spacing:0;color:transparent;border:2px solid #75444d;border-radius:3px;box-shadow:inset 0 2px #ffffff18;background:repeating-linear-gradient(to right,transparent 0,transparent max(0px,calc(var(--hp-unit,16.6667%) - var(--hp-gap,2px))),#231d29 max(0px,calc(var(--hp-unit,16.6667%) - var(--hp-gap,2px))),#231d29 var(--hp-unit,16.6667%)),linear-gradient(to right,#e78b8e 0,var(--hp-fill,100%),#3c2836 var(--hp-fill,100%),#3c2836 100%)}
@media(max-width:480px){.topbar{gap:8px;padding:10px 8px}.topbar small{font-size:9px;letter-spacing:1px}.topbar .depth b{font-size:11px}.topbar #health{height:16px}.topbar .coins strong{font-size:12px;overflow-wrap:anywhere}}

/* Ad Modal Interstitial */
.ad-modal-overlay{position:fixed;inset:0;z-index:9999;background:#070b15e0;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:adFadeIn .2s ease-out}
@keyframes adFadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.ad-modal-card{width:min(380px,94vw);background:#191c2b;border:2px solid #5c5267;border-radius:6px;box-shadow:0 0 0 2px #0f121b,0 16px 40px #000000b3,0 0 30px #f59e0b26;display:flex;flex-direction:column;overflow:hidden}
.ad-modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#141724;border-bottom:1px solid #3d3b4e}
.ad-modal-title-wrap{display:flex;align-items:center;gap:8px}
.ad-badge{font-size:10px;font-weight:700;letter-spacing:1px;padding:2px 6px;border-radius:3px;background:#f59e0b22;border:1px solid #f59e0b;color:#fbbf24}
.ad-title{font-size:13px;font-weight:600;color:#e5e7eb;letter-spacing:.5px}
.ad-close-btn{background:transparent;border:1px solid #4a4959;color:#9ca3af;border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;padding:0;cursor:pointer;transition:all .15s ease}
.ad-close-btn:hover{background:#dc262622;border-color:#ef4444;color:#f87171}
.ad-modal-body{padding:14px;display:flex;justify-content:center;align-items:center;background:#121420}
.ad-slot-box{position:relative;width:300px;height:250px;background:#181b29;border:1px solid #36394d;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ad-placeholder-layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:radial-gradient(circle at 50% 40%,#25283d,#141624);pointer-events:none}
.ad-pixel-flame{font-size:32px;color:#fbbf24;text-shadow:0 0 15px #f59e0b88;margin-bottom:6px;animation:flamePulse 2s infinite ease-in-out}
@keyframes flamePulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}}
.ad-placeholder-brand{font-family:'VT323',monospace;font-size:28px;letter-spacing:4px;color:#f3f4f6;text-shadow:2px 2px 0 #1f2336}
.ad-placeholder-desc{font-size:12px;color:#94a3b8;margin:8px 0 4px;line-height:1.4;max-width:240px}
.ad-placeholder-meta{font-size:11px;color:#34d399;background:#064e3b44;border:1px solid #059669;border-radius:3px;padding:2px 8px;margin-top:6px;letter-spacing:.5px}
.ad-modal-footer{padding:12px 16px;background:#141724;border-top:1px solid #3d3b4e;display:flex;justify-content:center}
.ad-skip-action{width:100%;padding:12px 18px;margin:0;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.ad-skip-timer{font-size:12px;color:#274737;font-weight:600}

/* Reroll Choice Button & Upgraded Skip Button */
.choice-reroll-btn{background:#252637;border:1px solid #f59e0b;color:#fbbf24;font-size:13px;font-weight:600;padding:10px 16px;border-radius:4px;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}
.choice-reroll-btn:hover:not(:disabled){background:#3b3530;border-color:#fde047;color:#fef08a;box-shadow:0 0 12px #f59e0b59}
.choice-reroll-btn:disabled{opacity:.45;cursor:not-allowed;border-color:#64748b;color:#94a3b8;background:#1e293b44}
#skipCard{border-color:#38bdf8;color:#7dd3fc;transition:all .15s ease}
#skipCard:hover{border-color:#7dd3fc;color:#bae6fd;box-shadow:0 0 10px #38bdf840}

/* SEO Semantic Guide & FAQ Section */
.seo-guide{margin:40px auto 20px;padding:28px 32px;background:#151824cc;border:1px solid #3c4257;border-radius:8px;box-shadow:0 12px 40px #00000055;color:#cbd5e1;line-height:1.7}
.seo-guide h2{color:#88f6c4;font-size:22px;margin:0 0 14px;letter-spacing:1px}
.seo-guide h3{color:#f1f5f9;font-size:16px;margin:24px 0 10px;letter-spacing:.5px;border-left:3px solid #6af4c5;padding-left:10px}
.seo-guide p{font-size:14px;color:#94a3b8;margin:0 0 14px;line-height:1.8}
.seo-guide ul{margin:0 0 18px;padding-left:22px}
.seo-guide li{font-size:14px;color:#cbd5e1;margin-bottom:8px}
.seo-guide li strong{color:#f8fafc}
.seo-faq-item{background:#1a1e2d;border:1px solid #2f364a;border-radius:6px;margin-bottom:10px;padding:12px 16px}
.seo-faq-item summary{font-weight:600;color:#e2e8f0;cursor:pointer;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{content:'+';font-size:18px;color:#6af4c5}
.seo-faq-item[open] summary::after{content:'−';color:#f87171}
.seo-faq-item[open] summary{color:#88f6c4;margin-bottom:10px;border-bottom:1px solid #2d354b;padding-bottom:8px}
.seo-faq-item p{margin:0;font-size:13px;color:#94a3b8}
@media(max-width:760px){.seo-guide{padding:20px 16px;margin:24px 0 16px}.seo-guide h2{font-size:18px}.seo-guide h3{font-size:15px}}

/* Multilingual Guide Switching */
html[lang="en"] [data-lang-block="vi"]{display:none!important}
html[lang="en"] [data-lang-block="en"]{display:block!important}
html:not([lang="en"]) [data-lang-block="en"]{display:none!important}
html:not([lang="en"]) [data-lang-block="vi"]{display:block!important}

/* Footer Legal Links & Sidebar Publisher Content */
footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;text-align:center}
.footer-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:12px;color:#64748b}
.footer-legal-links a{color:#6af4c5;text-decoration:none}
.footer-legal-links a:hover{color:#fff;text-decoration:underline}
.sidebar-tips-box{margin-top:14px;padding:12px;background:#151926;border:1px solid #2d3748;border-radius:6px;text-align:left}
.sidebar-tips-box small{display:block;color:#f6ad55;font-size:10px;font-weight:700;letter-spacing:1px;margin-bottom:6px}
.sidebar-tips-box p{margin:4px 0;font-size:11px;color:#cbd5e1;line-height:1.4}

/* In-Game Legal Dialog & Modal Tabs */
#legalModal{max-width:860px;width:min(860px,94vw);max-height:88vh;padding:24px;border:1px solid #8b7787;border-radius:10px;background:#191c2b;color:#e2e8f0;box-shadow:0 12px 40px rgba(0,0,0,0.75);overflow-y:auto}
#legalModal::backdrop{background:#070b15d9;backdrop-filter:blur(3px)}
.legal-modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2d3748;padding-bottom:14px;margin-bottom:16px}
.legal-modal-head small{color:#6af4c5;font-size:11px;letter-spacing:1px;font-weight:700}
.legal-modal-head h2{margin:4px 0 0;font-size:20px;color:#f8fafc}
.legal-modal-actions{display:flex;align-items:center;gap:10px}
.lang-switch-sm{background:#232b3e;color:#6af4c5;border:1px solid #3d4a67;border-radius:5px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s ease}
.lang-switch-sm:hover{background:#2e3850;color:#fff;border-color:#6af4c5}
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;border-bottom:1px solid #252d3d;padding-bottom:10px}
.legal-tab-btn{background:transparent;border:1px solid #3d4a67;color:#94a3b8;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s ease}
.legal-tab-btn:hover{color:#e2e8f0;border-color:#6af4c5}
.legal-tab-btn[aria-selected="true"]{background:#6af4c51f;color:#6af4c5;border-color:#6af4c5}
.legal-modal-body{font-size:14px;line-height:1.7;color:#cbd5e1}
.legal-modal-body h3{color:#f6ad55;font-size:16px;margin:20px 0 8px}
.legal-modal-body p{margin:8px 0;font-size:13.5px}
.legal-modal-body ul{padding-left:20px;margin:8px 0 14px}
.legal-modal-body li{margin-bottom:6px;font-size:13px}
.legal-modal-body strong{color:#f1f5f9}
.legal-modal-body a{color:#6af4c5;text-decoration:underline}
.legal-tab-panel{display:none}
.legal-tab-panel.active{display:block}
@media(max-width:700px){
  #legalModal{padding:16px;inset:10px;max-height:calc(100dvh - 20px);width:calc(100vw - 20px)}
  .legal-modal-head h2{font-size:16px}
  .legal-tab-btn{padding:5px 9px;font-size:11px}
  .legal-modal-body{font-size:13px}
}

/* ============================================================
   MOBILE TWIN-STICK JOYSTICKS & ANTI-COPY OPTIMIZATIONS
   ============================================================ */

/* 1. Triệt tiêu hoàn toàn menu Copy / Text selection / Callout trên di động */
*, *::before, *::after {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

input, textarea {
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

.twin-stick-container,
.joystick-zone,
.joystick-base,
.joystick-knob,
.touch-dash-btn,
canvas,
.arena {
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* 2. Container Twin-Stick - Minimalist Retro Dungeon Style */
.twin-stick-container {
  display: none;
  width: 100%;
  max-width: 960px;
  margin: 10px auto 0;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(18, 19, 29, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(70, 64, 85, 0.4);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

@media (pointer: coarse), (max-width: 900px) {
  .twin-stick-container {
    display: flex;
  }
}

.twin-stick-container.force-touch-visible {
  display: flex !important;
}

/* 3. Joystick Zones */
.joystick-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 124px;
  touch-action: none;
}

/* 4. Joystick Base (Vòng ngoài phong cách đá cổ / hắc diện) */
.joystick-base {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(30, 31, 46, 0.65) 0%, rgba(16, 17, 26, 0.9) 80%);
  border: 1.5px solid rgba(68, 64, 85, 0.45);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  pointer-events: none;
}

.zone-left .joystick-base {
  border-color: rgba(90, 110, 105, 0.4);
}

.zone-left .joystick-base.active {
  border-color: #6da38e;
  box-shadow: inset 0 0 12px rgba(131, 241, 196, 0.12), 0 0 10px rgba(131, 241, 196, 0.15);
}

.zone-right .joystick-base {
  border-color: rgba(110, 85, 75, 0.4);
}

.zone-right .joystick-base.active {
  border-color: #a06e52;
  box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.12), 0 0 10px rgba(245, 158, 11, 0.15);
}

/* Compass Ticks */
.joystick-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tick {
  position: absolute;
  background: rgba(145, 140, 160, 0.28);
}

.tick-n, .tick-s {
  width: 2px;
  height: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.tick-n { top: 4px; }
.tick-s { bottom: 4px; }

.tick-e, .tick-w {
  height: 2px;
  width: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.tick-e { right: 4px; }
.tick-w { left: 4px; }

/* 5. Joystick Knob (Cần gạt lõi đá cổ) */
.joystick-knob {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  pointer-events: none;
}

.knob-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.08s ease, border-color 0.12s ease;
}

.knob-move {
  background: linear-gradient(145deg, #282a3a, #1a1b26);
  border: 1.5px solid #485450;
  color: #84bfab;
}

.knob-fire {
  background: linear-gradient(145deg, #2e282a, #1d1819);
  border: 1.5px solid #5a4742;
  color: #cf9679;
}

.knob-icon {
  display: block;
  opacity: 0.82;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: opacity 0.12s ease, transform 0.08s ease;
}

.joystick-base.active .knob-core {
  transform: scale(1.05);
}

.zone-left .joystick-base.active .knob-move {
  border-color: #79ab97;
  color: #a6ebd2;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.65), 0 0 10px rgba(131, 241, 196, 0.22);
}

.zone-right .joystick-base.active .knob-fire {
  border-color: #ab765b;
  color: #f0bda1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.65), 0 0 10px rgba(245, 158, 11, 0.22);
}

.joystick-base.active .knob-icon {
  opacity: 1;
}

/* 6. Dash Button (Nút Lướt dạng cổ vật phù hợp style game) */
.zone-right {
  position: relative;
}

.touch-dash-btn {
  position: absolute;
  top: -4px;
  right: 8px;
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2b2b3d, #1b1b26);
  border: 1.5px solid #504c63;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dcd2bf;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.touch-dash-btn:hover {
  border-color: #8c829e;
  color: #f5eedf;
}

.touch-dash-btn:active,
.touch-dash-btn.active {
  transform: scale(0.92);
  background: linear-gradient(145deg, #1c1c28, #13131c);
  border-color: #a497bd;
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 10px rgba(220, 210, 190, 0.25);
}

.dash-svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

@media (max-width: 600px) {
  .twin-stick-container {
    padding: 6px 10px;
    margin-top: 8px;
  }
  .joystick-zone {
    min-height: 112px;
  }
  .joystick-base {
    width: 98px;
    height: 98px;
  }
  .joystick-knob {
    width: 44px;
    height: 44px;
  }
  .knob-icon {
    width: 19px;
    height: 19px;
  }
  .touch-dash-btn {
    width: 44px;
    height: 44px;
    top: -6px;
    right: 2px;
  }
  .dash-svg {
    width: 19px;
    height: 19px;
  }
}


