:root{color-scheme:dark;--accent:#f3c686;--muted:#abb8bb;--panel:#112029f5;--edge:#ffffff22;--safeL:max(16px,env(safe-area-inset-left));--safeR:max(16px,env(safe-area-inset-right));--safeB:max(14px,env(safe-area-inset-bottom))}*{box-sizing:border-box}html,body{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;background:#101d24;color:#f2f4f1;font:14px 'Noto Sans KR',Arial,sans-serif}body.playing{touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}button,input,select{font:inherit}button{cursor:var(--game-cursor-pointer,pointer);touch-action:manipulation;min-height:44px;background:#21323ce8;color:#e9eeea;border:1px solid #ffffff2b;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:700}button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:var(--game-cursor-default,default)}button.primary{background:var(--accent);color:#292920;border:0}button.quiet{background:transparent}input,select{width:100%;padding:10px;background:#0b1820;color:white;border:1px solid #465760;border-radius:6px;font:inherit}input:focus,select:focus{outline:1px solid var(--accent)}label{display:block;font-size:10px;color:#c2cdce;margin-bottom:10px}label input{margin-top:5px}a{color:var(--accent)}[hidden]{display:none!important}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#09171bea,transparent 85%),linear-gradient(0deg,#07111790,transparent 40%)}body.playing #vignette{background:linear-gradient(#07111760,transparent 25%,transparent 75%,#07111788)}header{position:fixed;top:env(safe-area-inset-top);left:0;right:0;min-height:62px;display:flex;align-items:center;gap:8px;padding:10px var(--safeR) 10px var(--safeL);z-index:20;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:22px}.brand span{font-size:12px;letter-spacing:.13em;font-weight:900;color:white}.brand small{display:block;color:#b2c3c5;font-size:7px;letter-spacing:.25em;margin-top:3px}header .live{margin-left:auto;font-size:9px;color:#d3dddc;display:flex;gap:5px;align-items:center}.live i{width:5px;height:5px;background:#a4d3ad;border-radius:100%}header button{font-size:10px;padding:7px 10px;min-height:36px}#soundBtn{margin-left:auto}.live+#soundBtn{margin-left:0}body.playing .brand{opacity:.8}body.playing header .live{display:none}body.playing #soundBtn{margin-left:auto}
.panel{position:absolute;left:6%;top:95px;width:410px;max-height:calc(100dvh - 112px);padding:0 12px 12px 0;overflow:auto;scrollbar-width:thin}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.19em;color:var(--accent)}h1{font-size:60px;line-height:1.14;letter-spacing:-.05em;margin:20px 0}h1 em{font-style:normal;color:var(--accent)}.lead{color:#cad4d3;font-size:13px;line-height:1.9}.tags{display:flex;gap:7px;margin:20px 0}.tags span{padding:5px 9px;border:1px solid #ffffff30;border-radius:4px;font-size:10px}.login{padding:14px;background:#14272ec9;border:1px solid var(--edge);border-radius:9px}.row{display:flex;align-items:center;gap:8px;justify-content:space-between}.row button{flex:1}.muted{font-size:10px;line-height:1.8;color:var(--muted)}.deploy{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px}.deploy select{width:140px}.deploy h3{margin:5px 0;font-size:14px}#play{padding:14px 18px;text-align:left}#mission{position:absolute;right:6%;bottom:8%;text-align:right}#mission h2{font-size:24px;font-weight:500;line-height:1.6}#mission p{font-size:12px;color:#c5d1ce;line-height:1.8}.missionNum{font-size:82px;font-weight:900;color:#ffffff40}.missionNum span{display:block;font-size:9px;letter-spacing:.25em;color:var(--accent)}#rooms,.credits{font-size:10px;line-height:1.8;color:var(--muted)}.credits{margin-top:18px}.credits summary{min-height:36px;cursor:var(--game-cursor-pointer,pointer)}body.playing #mission{display:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:11;text-shadow:0 1px 5px #0009}#hud button{pointer-events:auto}.stage{position:absolute;top:82px;left:var(--safeL)}.stage strong{display:block;font-size:32px;line-height:1.15;letter-spacing:-.05em}.stage small{font-size:10px;margin-left:5px;font-weight:400}.stage>span:last-child{font-size:8px;color:#d4deda}.operationHud{position:absolute;top:73px;left:50%;transform:translateX(-50%);width:min(248px,56%);padding:8px 12px 10px;background:linear-gradient(#13232be8,#13232b98);border:1px solid #ffffff23;border-radius:9px;text-align:center}.remainingTitle{font-size:10px;display:flex;align-items:baseline;justify-content:center;gap:8px}.remainingTitle b{font-size:30px;line-height:1.1;letter-spacing:-.035em}.remainingTitle>span{font-size:9px;color:#adbcba}.operationHud p{font-size:8px;white-space:nowrap;color:#c8d4d3;margin:7px 0 10px}.coreHud{display:flex;gap:7px;align-items:center;font-size:8px}.coreHud .bar{flex:1}.coreHud>b{font-size:7px;font-weight:400;color:#c1cdcb}.bar{height:3px;background:#ffffff24;overflow:hidden;border-radius:8px}.bar i{display:block;height:100%;background:var(--accent);transition:width .1s;width:100%}#party{position:absolute;top:182px;right:var(--safeR);font-size:9px;line-height:1.8;text-align:right;color:#e2e8e3}.partyCount{color:var(--accent);font-weight:700;display:block}.renderHud{position:absolute;top:164px;left:var(--safeL);font-size:8px;color:#c7d9d0;font-variant-numeric:tabular-nums}#hud .floating{position:absolute;right:var(--safeR);top:80px;min-height:42px;padding:9px 12px;font-size:10px;background:#12222be0;border-color:#eac88e55}#invBtn span{color:var(--accent);margin-left:6px}
.playerHud{position:absolute;left:var(--safeL);bottom:var(--safeB);display:flex;align-items:center;gap:9px}.portrait{width:78px;height:78px;position:relative;flex-shrink:0;border-radius:50%;background:#253739;box-shadow:0 3px 20px #0007}.portrait img{position:absolute;inset:7px;width:64px;height:64px;object-fit:cover;border-radius:50%}.portrait svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.portrait circle{fill:none;stroke-width:3.5}.ringTrack{stroke:#ffffff26}#hpRing{stroke:#d1e6c4;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .15s}.portrait>b{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);padding:0 8px 1px;border-radius:5px;background:#12232bef;min-width:40px;text-align:center;font-size:19px;line-height:1.2;font-variant-numeric:tabular-nums}.playerInfo{display:flex;flex-direction:column;gap:3px}.playerInfo>b{font-size:11px;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hpMax,#respawn{font-size:8px;color:#d0dcd8}.playerInfo .eyebrow{font-size:7px}.playerHud.danger #hpRing{stroke:#f3766b}.playerHud.danger #hpText{color:#ffb3a9}
.weaponHud{position:absolute;right:var(--safeR);bottom:var(--safeB);min-width:104px;text-align:right;padding:7px 10px 8px;border-right:2px solid #e7c186;background:linear-gradient(90deg,transparent,#13252bc9);border-radius:5px}.weaponHud>span{display:block;font-size:10px;color:var(--accent)}.weaponHud b{font-size:36px;line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.weaponHud small{font-size:12px;color:#c8d2d0;margin-left:6px}.reloadBar{margin:5px 0;height:2px}.reloadBar i{background:#e8eeda}#reloadText{font-size:8px;min-height:12px;color:#fff0d3}#combatStatus{font-size:7px;color:#d4e0d5}.centerAction{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);min-width:156px;padding:16px 22px}
#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;--reticle-gap:calc(8px + var(--bloom,0px));--reticle-arm:13px;color:#f0fff9;filter:drop-shadow(0 1px 2px #000);pointer-events:none}
#crosshair i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;background:currentColor;border:1px solid #122628;border-radius:50%;box-shadow:0 0 5px #d6fffaaa}
#crosshair b{position:absolute;background:currentColor;border:1px solid #133031;box-shadow:0 0 4px #000c;border-radius:2px}
#crosshair .reticleTop,#crosshair .reticleBottom{width:4px;height:var(--reticle-arm);left:calc(50% - 2px)}
#crosshair .reticleTop{top:calc(50% - var(--reticle-gap) - var(--reticle-arm))}#crosshair .reticleBottom{top:calc(50% + var(--reticle-gap))}
#crosshair .reticleLeft,#crosshair .reticleRight{width:var(--reticle-arm);height:4px;top:calc(50% - 2px)}
#crosshair .reticleLeft{left:calc(50% - var(--reticle-gap) - var(--reticle-arm))}#crosshair .reticleRight{left:calc(50% + var(--reticle-gap))}
#crosshair.locked{color:#ffd16d}#crosshair.locked i{background:#ff7055}
#hud[data-gun=shotgun] #crosshair:before{content:'';position:absolute;left:50%;top:50%;width:calc(52px + var(--bloom,0px) + var(--bloom,0px));height:calc(52px + var(--bloom,0px) + var(--bloom,0px));transform:translate(-50%,-50%);border:1px solid #fff8;border-radius:50%}
.isAiming #crosshair{--reticle-gap:calc(6px + var(--bloom,0px));--reticle-arm:18px}
.sniperAiming #crosshair{width:144px;height:144px;--reticle-arm:52px;--reticle-gap:calc(8px + var(--bloom,0px));color:#f4fff9}.sniperAiming #crosshair i{width:7px;height:7px;background:#ff684e;box-shadow:0 0 7px #ff593b}
#targetHud{position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);font-size:10px;text-align:center;white-space:nowrap;color:#f2fbf4;text-shadow:0 1px 3px #000,0 0 3px #000}.sniperAiming #targetHud{top:calc(50% + 78px)}#targetHud.locked{color:#ffd16d}
#hitMarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:bold 48px Arial;color:#ffdf98;text-shadow:0 1px 3px #27110e,0 0 9px #ff4d18;opacity:0;pointer-events:none}#hitMarker.hit{opacity:1}
#enemyBars{position:absolute;inset:0}.enemyHealth{position:absolute;top:0;left:0;width:38px;height:4px;border:1px solid #110403d0;border-radius:3px;background:#2a151aab;box-shadow:0 1px 2px #0008;will-change:transform}.enemyHealth.large{width:62px;height:5px}.enemyHealth i{display:block;height:100%;background:#ed514d;border-radius:3px}
#mobile{position:fixed;inset:0;z-index:10;pointer-events:none}#moveArea,#lookArea{position:absolute;top:25%;bottom:0;width:50%;pointer-events:auto;touch-action:none;user-select:none}#moveArea{left:0}#lookArea{right:0}#stick{position:absolute;left:30%;top:67%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff2e;background:#101f271b;opacity:.55;pointer-events:none}#stick.pressed{opacity:1;border-color:#f6dba482}#stick div{width:35px;height:35px;border:1px solid #ffffff50;border-radius:50%;background:#fff5}.touchLabel{position:absolute;bottom:calc(112px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:9px;letter-spacing:.2em;color:#ffffff88;text-shadow:0 1px 4px #000;pointer-events:none}#touchHint{position:absolute;bottom:calc(145px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:9px;color:#edf2e8;text-shadow:0 1px 4px black;transition:opacity 1s}#touchHint.used{opacity:0}
#toast{position:fixed;top:29%;left:50%;transform:translateX(-50%);padding:11px 17px;max-width:90%;background:#12272fec;border-left:3px solid var(--accent);border-radius:4px;z-index:40;display:none;font-size:12px}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;max-height:88dvh;overflow:auto;padding:22px;background:var(--panel);border:1px solid #57666e;border-radius:12px;box-shadow:0 25px 100px #0008}.modal h2{margin:7px 0 16px;font-size:23px}.modal small{font-size:10px;color:var(--muted)}#result{width:min(460px,92%);text-align:center}#result button{margin:5px}#ranking{font-size:12px;line-height:2;margin:14px 0}#inventory{width:min(820px,94%)}#inventory .row button{flex:0 auto}#inventory #guns button{flex:1;font-size:11px;padding:10px 6px}#guns .active{border-color:var(--accent);color:var(--accent);background:#443c2d}#equipped{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0;color:#d6c5a8;font-size:10px}#items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.item{padding:12px;background:#1b303a;border:1px solid #42565e;border-top:2px solid var(--grade);border-radius:7px;min-width:0;font-size:11px}.item h4{color:var(--grade);margin:0 0 7px}.item p{margin:5px 0}.item button{font-size:10px;min-height:34px;padding:5px 7px;margin:6px 3px 0 0}.item.inactive{opacity:.6}
@media(max-width:700px){header .live{display:none}#soundBtn,.live+#soundBtn{margin-left:auto}header{gap:6px}header button{padding:7px;font-size:9px}.brand{gap:5px;font-size:17px}.brand span{font-size:10px}.brand small{font-size:6px}#mission{display:none}.panel{left:7%;width:86%;top:83px;max-height:calc(100dvh - 101px)}h1{font-size:43px;margin:15px 0}.lead{font-size:12px}.tags{margin:14px 0}.modal{padding:17px}#items{grid-template-columns:repeat(2,minmax(0,1fr))}.remainingTitle{gap:5px}.remainingTitle b{font-size:27px}.operationHud{width:52%;padding:8px}.coreHud>b{display:none}#party{top:174px;font-size:8px}#hud .floating{top:78px;padding:9px}.playerInfo>b{max-width:70px}#respawn{font-size:7px}.portrait{width:68px;height:68px}.portrait img{width:54px;height:54px}.playerInfo .eyebrow{display:none}.playerHud{gap:7px}.weaponHud{min-width:93px;padding-right:8px}.weaponHud b{font-size:33px}}
@media(orientation:landscape) and (max-height:560px){header{min-height:43px;padding-top:5px;padding-bottom:5px}.brand small{display:none}header button{min-height:32px}.panel{top:59px;max-height:calc(100dvh - 68px);width:390px;left:5%}h1{font-size:34px;margin:10px 0}.lead,.tags{display:none}.login{padding:10px}.deploy{margin:10px 0}.stage{top:55px}.stage strong{font-size:27px}.operationHud{top:16px;width:246px;max-width:36%;padding:5px 10px 7px}.remainingTitle b{font-size:26px}.operationHud p{margin:3px 0 6px}.coreHud>b{display:block}body.playing header{right:0}body.playing .brand{max-width:140px}body.playing #soundBtn{margin-left:auto}body.playing header button{font-size:8px}#party{top:100px;right:var(--safeR);font-size:8px}.renderHud{top:131px}#hud .floating{top:53px}.playerHud{bottom:var(--safeB)}.portrait{width:65px;height:65px}.portrait img{width:51px;height:51px}.playerInfo>b{max-width:110px}.weaponHud{bottom:var(--safeB)}.weaponHud b{font-size:30px}#moveArea,#lookArea{top:22%}#stick{top:60%;width:80px;height:80px}.touchLabel{bottom:96px;font-size:8px}#touchHint{bottom:100px;font-size:8px}.centerAction{top:61%}.modal{max-height:92dvh}#mission{display:none}}
@media(max-width:360px){.brand{font-size:0}.brand span{font-size:9px}header button{font-size:8px;padding:6px}.stage strong{font-size:26px}.stage .eyebrow{font-size:7px}#hud .floating{padding:8px;font-size:9px}.operationHud{left:49%;width:52%}.remainingTitle{font-size:9px}.playerInfo{display:none}}
/* v4: compact combat HUD, independent equipment and belongings views. */
:root{--safeL:max(12px,env(safe-area-inset-left));--safeR:max(12px,env(safe-area-inset-right));--safeB:max(12px,env(safe-area-inset-bottom))}
button{font-size:14px;min-height:44px}header{z-index:25}#settingsBtn{margin-left:auto;min-width:52px;min-height:44px;font-size:13px}#settingsMenu{position:absolute;right:var(--safeR);top:62px;width:190px;padding:12px;background:#132127fa;border:1px solid #ffffff30;border-radius:12px;box-shadow:0 8px 36px #0009;display:grid;gap:8px;pointer-events:auto}#settingsMenu strong{padding:5px 3px;font-size:14px}#settingsMenu small{float:right;color:var(--muted);font-size:11px}#settingsMenu button{font-size:14px;margin:0;min-height:44px}body.playing .brand{display:none}.brand small{letter-spacing:0;font-size:10px;margin-top:5px}
.stage{top:18px;left:var(--safeL)}.stage strong{font-size:23px}.stage small{font-size:11px}.operationHud{top:12px;width:166px;padding:8px 12px;background:#162329d9;border:1px solid #ffffff1c;box-shadow:0 4px 18px #0002;border-radius:12px}.remainingTitle{font-size:12px;gap:10px}.remainingTitle b{font-size:25px;line-height:1.1}.coreHud{font-size:10px;margin-top:7px;gap:6px}.coreHud>b{display:none}.coreHud .bar{height:3px}.loadoutButtons{position:absolute;top:80px;right:var(--safeR);display:flex;gap:6px;pointer-events:auto}.loadoutButtons button{font-size:13px;min-width:61px;padding:10px 11px;background:#17272ee6;border-color:#ffffff35;border-radius:11px}#invBtn span{display:none}#party{top:134px}.portrait{width:64px;height:64px}.portrait img{width:50px;height:50px}.portrait>b{font-size:20px;bottom:-2px;min-width:40px}.playerHud{gap:7px}.playerInfo{gap:4px}#hpMax{font-size:10px;color:#dfebe4}#respawn{font-size:11px;color:#f3d49e;max-width:78px}.playerInfo:has(#respawn:empty){align-self:end;margin-bottom:4px}.weaponHud{min-width:90px;padding:5px 8px;background:#162329aa;border-right:0;border-radius:10px}.weaponHud>span{font-size:12px}.weaponHud b{font-size:31px}.weaponHud small{font-size:12px}#reloadText{font-size:10px;min-height:12px}#combatStatus,#targetHud,.touchLabel{display:none}#touchHint{bottom:calc(98px + env(safe-area-inset-bottom));font-size:11px;animation:hideHint 1s 5s forwards}#stick{top:auto;bottom:105px;left:32%;width:84px;height:84px;transform:translateX(-50%);opacity:.45}#stick.pressed{transform:translate(-50%,-50%);bottom:auto}#stick div{width:31px;height:31px}#moveArea,#lookArea{top:20%}.centerAction{font-size:15px;min-height:48px;top:60%;padding:12px 22px}@keyframes hideHint{to{opacity:0}}
#inventory.loadoutSheet{width:min(550px,calc(100% - 20px));height:min(680px,91dvh);max-height:91dvh;padding:0;overflow:hidden;display:flex;flex-direction:column;background:#121d23fc;border-color:#71808066;border-radius:18px;touch-action:pan-y;text-shadow:none}.sheetHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px;flex-shrink:0}.sheetHead h2{font-size:21px;margin:0}.sheetHead button{padding:8px 12px;font-size:13px;min-height:44px}.sheetTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px 14px 12px;border-bottom:1px solid #ffffff18;flex-shrink:0}.sheetTabs button{font-size:15px;min-height:44px;background:#21313980;border:1px solid transparent;border-radius:10px}.sheetTabs button[aria-selected=true]{color:#f0d39f;background:#58493366;border-color:#d2b78380}.sheetTabs small{margin-left:6px;color:#bcc7c9;font-size:12px}.sheetBody{padding:12px 14px 18px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;scrollbar-width:thin;touch-action:pan-y}.sectionLabel{margin:2px 0 10px;font-size:13px;color:#c5d0d0}#inventory #guns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#inventory #guns button{min-height:48px;font-size:14px;padding:10px 6px;border-radius:10px;background:#25343b}#inventory #guns .active{background:#66533866;border-color:#f0d39f;color:#ffe1a6}.gunDetails{font-size:12px;color:#c0cecb;line-height:1.6;margin:10px 0 16px}#equipped{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.equipSlot{display:flex;flex-direction:column;text-align:left;gap:5px;min-height:92px;padding:12px;background:#223039;border-color:#ffffff1a;border-left:3px solid var(--grade);border-radius:10px}.equipSlot>span{font-size:11px;color:#a8b8bb}.equipSlot>strong{font-size:14px;color:var(--grade)}.equipSlot>small{font-size:11px;color:#b4c2c3}.sheetNote{font-size:12px;line-height:1.6;color:#adbec0;margin:12px 0}#storagePane>.sheetNote{margin-top:0}#items{display:flex;flex-direction:column;gap:10px}.item{font-size:14px;padding:13px;background:#233139;border:1px solid #ffffff20;border-left:3px solid var(--grade);border-radius:11px;opacity:1}.item h4{font-size:15px;line-height:1.5;margin:0 0 7px}.item h4 small{font-size:10px;float:right;color:#d5c8a9}.item p{font-size:12px;line-height:1.55;margin:4px 0;color:#b9c6c9}.item p.itemOption{color:#e0e8e5}.item p.itemHint{color:#d9ba7e}.itemActions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:6px;margin-top:10px}.item .itemActions button{min-height:44px;font-size:13px;margin:0;padding:8px 4px;border-radius:8px}.item .itemActions .itemEquip{border-color:#cab68b88;color:#ffe1a6;background:#63503955}.emptyBag{text-align:center;padding:45px 5px;color:#d9e2df}.emptyBag b{font-size:16px}.emptyBag p{font-size:12px;color:#a7b8bc;line-height:1.8}
@media(orientation:landscape) and (max-height:560px){header{padding-top:6px;padding-bottom:4px}#settingsMenu{top:56px}body.playing #settingsBtn{min-height:44px;font-size:13px}.loadoutButtons{top:6px;right:calc(var(--safeR) + 60px)}.stage{top:14px}.operationHud{top:8px;max-width:30%;width:166px;padding:7px 12px}.remainingTitle b{font-size:24px}.coreHud>b{display:none}.portrait{width:60px;height:60px}.portrait img{width:46px;height:46px}.weaponHud b{font-size:29px}#stick{bottom:86px;width:78px;height:78px;top:auto}#touchHint{bottom:80px}#inventory.loadoutSheet{width:min(760px,calc(100% - 32px));height:94dvh;max-height:94dvh;border-radius:14px}.sheetHead{padding:6px 12px 0}.sheetHead h2{font-size:19px}.sheetTabs{padding:2px 12px 7px}.sheetTabs button{min-height:40px;font-size:14px}.sheetBody{padding:10px 12px}#equipmentPane{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:15px;align-content:start}#equipmentPane .sectionLabel{grid-column:1;margin-top:0}#inventory #guns{grid-column:1;align-self:start}#inventory #guns button{min-height:44px;font-size:13px}#equipmentPane .gunDetails{grid-column:1;font-size:11px;margin:7px 0}#equipped{grid-column:2;grid-row:1 / span 4;gap:6px}.equipSlot{min-height:61px;padding:7px 9px;gap:3px}.equipSlot>span{font-size:10px}.equipSlot>strong{font-size:12px}.equipSlot>small{font-size:10px}#equipmentPane .sheetNote{grid-column:1;font-size:11px;margin:3px 0}#items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.emptyBag{grid-column:1 / -1}.item{padding:10px}.item h4{font-size:14px}.item .itemActions button{font-size:12px}}
@media(max-width:360px){.operationHud{left:50%;width:145px}.remainingTitle{font-size:11px}.loadoutButtons{top:78px}.playerInfo{display:flex}#inventory.loadoutSheet{width:calc(100% - 12px)}.sheetBody{padding:10px}.equipSlot{padding:9px;min-height:84px}.equipSlot>strong{font-size:13px}.brand span{font-size:11px}}
#hud:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--scope,0);background:radial-gradient(circle at center,transparent 0 24%,#0003 34%,#070b0cd9 67%)}.takingDamage #vignette{animation:damageEdges .4s ease-out}@keyframes damageEdges{0%{box-shadow:inset 0 0 80px #9b132a99}100%{box-shadow:inset 0 0 0 #9b132a00}}.desktopHelp{font-size:12px;line-height:1.8;color:#bfcac7;margin-bottom:0}body[data-controls=desktop] #stick,body[data-controls=desktop] .touchLabel{display:none}
@media(min-width:1000px) and (min-height:600px){body[data-controls=desktop] header{padding:16px 24px}body[data-controls=desktop] #settingsBtn{min-height:48px;min-width:68px;font-size:15px}body[data-controls=desktop] .stage{top:26px;left:24px}body[data-controls=desktop] .stage strong{font-size:32px}body[data-controls=desktop] .loadoutButtons{top:16px;right:104px;gap:10px}body[data-controls=desktop] .loadoutButtons button{font-size:16px;min-width:82px;min-height:48px}body[data-controls=desktop] .operationHud{top:20px;width:224px;padding:10px 18px}body[data-controls=desktop] .remainingTitle{font-size:15px}body[data-controls=desktop] .remainingTitle b{font-size:32px}body[data-controls=desktop] .coreHud{font-size:12px}body[data-controls=desktop] .playerHud{left:24px;bottom:24px}body[data-controls=desktop] .portrait{width:86px;height:86px}body[data-controls=desktop] .portrait img{width:72px;height:72px}body[data-controls=desktop] .portrait>b{font-size:25px}body[data-controls=desktop] #hpMax{font-size:13px}body[data-controls=desktop] .weaponHud{right:24px;bottom:24px;min-width:130px;padding:12px 16px}body[data-controls=desktop] .weaponHud b{font-size:46px}body[data-controls=desktop] .weaponHud>span{font-size:15px}body[data-controls=desktop] .weaponHud small{font-size:17px}body[data-controls=desktop] #reloadText{font-size:12px}body[data-controls=desktop] #inventory.loadoutSheet{width:700px;height:min(780px,90dvh)}body[data-controls=desktop] .sheetHead{padding:18px 22px 8px}body[data-controls=desktop] .sheetHead h2{font-size:26px}body[data-controls=desktop] .sheetTabs{padding:8px 22px 14px}body[data-controls=desktop] .sheetTabs button{font-size:18px;min-height:50px}body[data-controls=desktop] .sheetBody{padding:18px 22px}body[data-controls=desktop] #inventory #guns button{font-size:17px;min-height:54px}body[data-controls=desktop] .equipSlot{min-height:103px}body[data-controls=desktop] .equipSlot>strong,body[data-controls=desktop] .item h4{font-size:17px}body[data-controls=desktop] .equipSlot>small,body[data-controls=desktop] .item p,body[data-controls=desktop] .gunDetails,body[data-controls=desktop] .sheetNote{font-size:14px}body[data-controls=desktop] .item .itemActions button{font-size:15px;min-height:48px}}
.cycleGun{position:absolute;right:var(--safeR);bottom:calc(var(--safeB) + 106px);min-width:126px;min-height:58px;padding:9px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid #edce9780;border-radius:14px;background:#233239ed;box-shadow:0 3px 16px #0004;color:#ffe1ad;touch-action:manipulation}
.cycleGun>span{font-size:14px;font-weight:700;white-space:nowrap}.cycleGun>small{font-size:10px;font-weight:400;color:#c5d1d0}.cycleGun kbd{display:none}.cycleGun:active{background:#605037;transform:scale(.97)}
#currentEquipmentGun{font-size:20px;color:var(--accent)}
@media(orientation:landscape) and (max-height:560px){.cycleGun{bottom:calc(var(--safeB) + 91px);min-width:119px;min-height:54px;padding:7px 10px}#currentEquipmentGun{grid-column:1;font-size:20px}}
@media(min-width:1000px) and (min-height:600px){body[data-controls=desktop] .cycleGun{right:24px;bottom:170px;min-width:154px;min-height:66px}body[data-controls=desktop] .cycleGun>span{font-size:16px}body[data-controls=desktop] .cycleGun>small{font-size:12px}body[data-controls=desktop] .cycleGun kbd{display:inline-block;font:11px inherit;padding:1px 4px;margin-left:5px;border:1px solid #bfa87e66;border-radius:4px}}

/* Desktop controls stay visible during play; touch retains its one-button cycle. */
#weaponShortcuts,#pcControls{display:none}
body[data-controls=desktop] #weaponShortcuts{display:flex;position:absolute;bottom:100px;left:50%;transform:translateX(-50%);gap:5px;pointer-events:auto}
#weaponShortcuts button{display:grid;grid-template-columns:20px 1fr;gap:3px 5px;min-width:100px;padding:9px 10px;background:#0a171ee8;border:1px solid #b2cec24d;color:#cbd9d4;border-radius:9px;line-height:1.25;font-size:12px}
#weaponShortcuts button small{grid-column:2;font-size:10px;color:#a6bdb6}#weaponShortcuts button.selected{border-color:#eac17b;background:#343023ed;color:#ffe0a1;box-shadow:0 0 0 1px #eac17b44}#weaponShortcuts button.selected small{color:#f4dfb7}
#weaponShortcuts kbd{grid-row:1 / 3;align-self:center;justify-self:center}
body[data-controls=desktop] #pcControls{display:grid;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);gap:3px;text-align:center;line-height:1.6;font-size:11px;color:#e3ebe7;background:#08181dc7;border:1px solid #aac6bb22;border-radius:8px;padding:6px 14px;white-space:nowrap;text-shadow:0 1px 2px #000}
#pcControls b{font-size:10px;font-weight:500;color:#c7b58c}.cursorFree #cursorMode{color:#ffe1a3}
body[data-controls=desktop] #cycleGun{display:none}
body[data-controls=desktop] #crosshair{--reticle-arm:17px}body[data-controls=desktop] .isAiming #crosshair{--reticle-arm:22px}body[data-controls=desktop] .sniperAiming #crosshair{--reticle-arm:52px}
body[data-controls=desktop] #targetHud{font-size:12px}
kbd{font:inherit;font-size:10px;background:#12272c;border:1px solid #87a29855;border-radius:4px;padding:2px 5px;color:#d9e8e1}
body[data-controls=touch] .loadoutButtons kbd{display:none}
.itemCompare{font-size:12px!important;line-height:1.65;color:#d5dfda!important}.itemCompare.improves{color:#89e4b1!important}.itemCompare.decreases{color:#eeaa94!important}
html,body{min-height:100%;width:100%;margin:0}#world{width:100vw;height:100dvh;display:block}
@media (max-height:550px){body[data-controls=desktop] #weaponShortcuts{bottom:64px}body[data-controls=desktop] #pcControls{bottom:5px;padding:3px 10px;font-size:10px;grid-template-columns:auto auto;gap:0 10px}#pcControls b{grid-column:1 / 3}#weaponShortcuts button{padding:6px 8px;min-width:90px}}

/* Four independent full equipment sets, accessible on phone and desktop. */
.loadoutGunTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px 14px;border-bottom:1px solid #ffffff18;flex-shrink:0}
.loadoutGunTabs button{min-width:0;padding:8px 3px;font-size:12px;min-height:53px;line-height:1.4}.loadoutGunTabs button small{display:block;font-size:9px;font-weight:400;color:#a8bcba;margin-top:3px}.loadoutGunTabs button[aria-selected=true]{color:#ffe1a6;background:#57482b;border-color:#e5be77}
.equipCard{position:relative;min-width:0}.equipCard .equipSlot{width:100%;height:100%;padding-bottom:36px}.equipCard .unequip{position:absolute;right:6px;bottom:4px;min-height:32px;padding:4px 9px;font-size:11px;background:transparent;border:0;color:#d5bb8c}
.storageFilters{display:flex;gap:7px;margin-bottom:14px}.storageFilters select{font-size:12px;min-height:44px;min-width:0}.itemComparison{background:#0b181e77;border-radius:7px;margin-top:10px;padding:8px 10px}.itemComparison>span{display:block;font-size:10px;color:#b6c7c4;margin-bottom:5px}.compareRow{display:grid;grid-template-columns:1fr auto 10px;gap:7px;font-size:11px;line-height:1.8}.compareRow b{font-weight:500;font-variant-numeric:tabular-nums}.compareRow.improves{color:#9be9b7}.compareRow.decreases{color:#f4aa91}.item p.equippedNote{color:#edcf97}
.battleSheet{width:min(600px,calc(100% - 24px));padding:0;max-height:90dvh;display:flex;flex-direction:column;overflow:hidden;border:1px solid #68807880;background:#112029fa;border-radius:16px}.battleSheet .sheetHead{border-bottom:1px solid #ffffff18;padding-bottom:12px}.scoreTable{overflow-x:auto}.scoreTable table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;text-align:right}.scoreTable th{font-weight:400;color:#a5b9b7;font-size:11px;padding:10px 8px;border-bottom:1px solid #ffffff25}.scoreTable td{font-size:13px;padding:13px 8px;border-bottom:1px solid #ffffff12}.scoreTable th:first-child,.scoreTable td:first-child{text-align:left}.scoreTable td:first-child{max-width:240px}.scoreTable strong{font-size:13px;overflow-wrap:anywhere}.scoreTable small{margin-left:5px;font-size:9px;color:#9ce2b5}.scoreRank{display:inline-block;color:#a4b5b0;min-width:22px}.scoreTable em{display:inline-block;font-size:9px;font-style:normal;background:#735930;color:#ffe1a1;border-radius:3px;padding:1px 4px;margin-left:5px}.scoreTable .selfRow{background:#b4d3bc09}.scoreTable .mvpRow td{color:#ffe0a0}.mvpCard{padding:16px;border:1px solid #f3c68670;border-radius:10px;background:linear-gradient(120deg,#56412780,#162931);margin:10px 0}.mvpCard>span{font-size:10px;color:#ebc687;letter-spacing:.1em;display:block}.mvpCard>strong{font-size:23px;display:block;margin:5px 0;overflow-wrap:anywhere}.mvpCard p{font-size:12px;margin:5px 0;color:#dce4dc}.mvpCard small{font-size:11px;color:#ead29f}#result{max-height:90dvh;overflow:auto;width:min(600px,calc(100% - 24px))}#result #ranking{margin-bottom:16px}
@media (orientation:landscape) and (max-height:560px){.loadoutGunTabs{padding:5px 12px}.loadoutGunTabs button{min-height:44px;padding:3px;font-size:12px}.loadoutGunTabs button small{margin:0}.equipCard .equipSlot{min-height:90px}#equipmentPane{grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)}#equipped{grid-row:1 / span 5}.loadoutButtons{gap:4px}.loadoutButtons button{padding:8px;font-size:11px}}
@media (min-width:1000px) and (min-height:600px){body[data-controls=desktop] .loadoutGunTabs{padding:10px 22px}body[data-controls=desktop] .loadoutGunTabs button{font-size:15px;min-height:60px}.compareRow{font-size:13px}.scoreTable td{font-size:17px;padding:16px 10px}.scoreTable strong{font-size:16px}.scoreTable th{font-size:13px}.battleSheet{width:660px}}
.commsButtons{position:absolute;left:var(--safeL);bottom:calc(var(--safeB) + 101px);display:flex;gap:6px;pointer-events:auto}.commsButtons button{min-height:42px;padding:8px 12px;font-size:12px;background:#10232bea}.commsButtons button[aria-pressed=true]{border-color:#8bc89c;color:#acf1bf;background:#224230e8}.voiceNote{font-size:10px;line-height:1.6;padding:0 6px;color:#9dafad}#chatLog{position:absolute;left:var(--safeL);bottom:calc(var(--safeB) + 150px);max-width:min(310px,46vw);pointer-events:none;font-size:11px;line-height:1.6}#chatLog p{margin:3px 0;padding:5px 8px;background:#07181dcb;border-radius:5px;overflow-wrap:anywhere}#chatLog b{color:#edcc93;margin-right:5px}#chatForm{pointer-events:auto;position:absolute;left:50%;bottom:calc(var(--safeB) + 8px);transform:translateX(-50%);display:grid;grid-template-columns:1fr auto auto;gap:6px;width:min(480px,calc(100% - 24px));padding:12px;background:#13262df5;border:1px solid #d1b07d88;border-radius:12px;z-index:50}#chatForm label{grid-column:1 / -1;margin:0;font-size:12px}#chatForm input{min-width:0;font-size:16px}#chatForm button{padding:8px 12px}#roundClock{font-size:12px;letter-spacing:.03em;color:#ccd8d1;display:block;margin-top:4px;font-variant-numeric:tabular-nums}#roundClock.urgent{color:#ffb089}
/* Larger, readable entry controls across desktop, portrait and short landscape. */
.login{padding:18px;border-color:#8da9a540;background:#12272fe8}.login label{font-size:13px;line-height:1.5}.login input{font-size:16px;min-height:48px;padding:12px}.login button{font-size:14px;min-height:48px}.login .muted{font-size:12px}.panel{width:440px;max-width:calc(100vw - 32px)}.deploy h3{font-size:16px}.deploy select{font-size:16px;min-height:48px}#play{font-size:17px;min-height:54px}.panel>.muted{font-size:12px}.desktopHelp{font-size:13px}.brand small{font-size:9px;letter-spacing:.06em}
@media (min-width:1100px) and (min-height:700px){.panel{left:5%;top:100px;width:470px}h1{font-size:62px;margin:16px 0}.lead{font-size:15px}.tags span{font-size:12px}.login{padding:20px}.login label{font-size:14px}.login input{font-size:18px;min-height:52px}.login button{min-height:50px;font-size:16px}#mission{right:5%;bottom:10%}#mission h2{font-size:30px}.commsButtons{bottom:124px}.commsButtons button{font-size:14px;min-height:44px}#chatLog{bottom:177px;font-size:13px;max-width:340px}}
@media (max-width:600px){.panel{top:80px;left:16px;width:calc(100% - 32px);max-height:calc(100dvh - 92px);padding:0 0 20px}.panel h1{font-size:42px;margin:12px 0}.panel .lead{font-size:13px}.tags{margin:13px 0;flex-wrap:wrap;gap:5px}.tags span{font-size:11px;padding:5px 7px}.login{padding:14px}.loadoutButtons{top:14px;right:calc(var(--safeR) + 62px);gap:4px}.loadoutButtons button{padding:8px;font-size:12px;min-height:42px}.stage{top:80px}.operationHud{top:77px}.commsButtons{bottom:calc(var(--safeB) + 101px)}#chatLog{bottom:calc(var(--safeB) + 150px);font-size:10px;max-width:45vw}.itemActions{grid-template-columns:1.5fr 1fr .8fr}.scoreTable td{padding:11px 5px;font-size:12px}.scoreTable strong{font-size:12px}}
@media (orientation:landscape) and (max-height:560px){.panel{top:68px;left:4%;width:55%;max-width:560px;max-height:calc(100dvh - 75px)}.panel h1{font-size:34px;margin:8px 0}.panel .lead{font-size:12px}.tags{margin:10px 0}.login input{min-height:44px}.login{padding:12px}.commsButtons{bottom:calc(var(--safeB) + 73px)}#chatLog{bottom:calc(var(--safeB) + 122px);max-width:30vw;font-size:10px}.commsButtons button{min-height:38px;font-size:11px;padding:6px 9px}.loadoutButtons{top:7px;right:calc(var(--safeR) + 60px)}.stage{top:10px}.operationHud{top:8px}#roundClock{font-size:10px}.loadoutButtons button{min-height:40px}.battleSheet{max-height:94dvh}.battleSheet .sheetHead{padding-top:7px;padding-bottom:7px}#mission{max-width:32%;bottom:10%}#mission h2{font-size:19px}}
/* Four weapon identities retain a high-contrast common center. */
#hud[data-gun=rifle] #crosshair{color:#dcfff2;--reticle-arm:17px;--reticle-gap:calc(8px + var(--bloom,0px))}#hud[data-gun=rifle] #crosshair:after{content:'';position:absolute;width:38px;height:38px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #b6ffdf66;border-radius:7px}
#hud[data-gun=sniper] #crosshair{color:#fff2d4;--reticle-arm:24px;--reticle-gap:calc(7px + var(--bloom,0px))}#hud[data-gun=sniper] #crosshair i{background:#ff624c;width:7px;height:7px;box-shadow:0 0 7px #fd4c27}#hud[data-gun=sniper] #crosshair:before{content:'';position:absolute;width:84px;height:84px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #e7f5ea9c;border-radius:50%}#hud.sniperAiming #crosshair:before{width:158px;height:158px;border-color:#e7f5eab0}#hud.sniperAiming #crosshair{--reticle-arm:55px}
#hud[data-gun=shotgun] #crosshair{color:#ffe1a2;--reticle-gap:calc(13px + var(--bloom,0px));--reticle-arm:14px}#hud[data-gun=shotgun] #crosshair:before{width:calc(72px + var(--bloom,0px) + var(--bloom,0px));height:calc(72px + var(--bloom,0px) + var(--bloom,0px));border:2px dashed #ffdd9fc9}#hud[data-gun=shotgun] #crosshair i{width:8px;height:8px;border-radius:2px}
#hud[data-gun=flame] #crosshair{color:#ffc086;--reticle-arm:11px;--reticle-gap:calc(10px + var(--bloom,0px))}#hud[data-gun=flame] #crosshair:before{content:'';position:absolute;left:50%;top:50%;width:65px;height:48px;transform:translate(-50%,-50%);border:3px solid #ffb268;border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;filter:drop-shadow(0 0 3px #7d251a)}#hud[data-gun=flame] #crosshair i{width:8px;height:8px;border-radius:1px;transform:translate(-50%,-50%) rotate(45deg);background:#ffc086}.sniperAiming #targetHud{top:calc(50% + 94px)}

/* Touch aim stays legible without covering the target's face. */
body[data-controls=touch] #hud #crosshair{width:40px;height:40px;--reticle-arm:8px;--reticle-gap:calc(5px + var(--bloom,0px) * .4);filter:drop-shadow(0 1px 1px #000)}
body[data-controls=touch] #hud #crosshair b{border:0;box-shadow:none;opacity:.9}
body[data-controls=touch] #hud #crosshair .reticleTop,body[data-controls=touch] #hud #crosshair .reticleBottom{width:1.5px;left:calc(50% - .75px)}
body[data-controls=touch] #hud #crosshair .reticleLeft,body[data-controls=touch] #hud #crosshair .reticleRight{height:1.5px;top:calc(50% - .75px)}
body[data-controls=touch] #hud #crosshair i{width:3px;height:3px;box-shadow:none;border:0}
body[data-controls=touch] #hud[data-gun=rifle] #crosshair:after{display:none}
body[data-controls=touch] #hud[data-gun=sniper] #crosshair{--reticle-arm:11px}
body[data-controls=touch] #hud[data-gun=sniper] #crosshair:before{width:48px;height:48px;border-width:1px}
body[data-controls=touch] #hud.sniperAiming #crosshair{width:84px;height:84px;--reticle-arm:27px;--reticle-gap:7px}
body[data-controls=touch] #hud.sniperAiming #crosshair:before{width:84px;height:84px}
body[data-controls=touch] #hud[data-gun=shotgun] #crosshair:before{width:calc(38px + var(--bloom,0px) * .7);height:calc(38px + var(--bloom,0px) * .7);border-width:1px}
body[data-controls=touch] #hud[data-gun=flame] #crosshair:before{width:36px;height:28px;border-width:1.5px;filter:none}
body[data-controls=touch] #targetHud{top:calc(50% + 30px);font-size:9px;opacity:.85}
body[data-controls=touch] .sniperAiming #targetHud{top:calc(50% + 51px)}
#loadoutGuns[hidden]{display:none}#boxItems{display:flex;flex-direction:column;gap:10px}.storageFilters{grid-template-columns:1fr}
#prepareNotice{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 2px 8px #000}
#prepareNotice small,#prepareNotice span{display:block;color:#e8d4ab;font-size:12px}#prepareNotice b{display:block;font-size:54px;font-variant-numeric:tabular-nums;line-height:1.25;color:#fff1d4}
/* Account-first lobby: large desktop controls, compact independent mobile panels. */
#lobby.panel{top:84px;max-height:calc(100dvh - 96px)}
body[data-account=in] #lobby{left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 40px));max-width:none;padding:24px;background:#10212beF;border:1px solid #ffffff20;border-radius:18px}
body[data-account=in] #lobby>h1,body[data-account=in] #lobby>.lead,body[data-account=in] #lobby>.tags{display:none}
.accountHeader{display:flex;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid #ffffff20}.accountHeader h2{margin:0;font-size:24px}.accountHeader small{color:#a9bbbf}.accountHeader>button{margin-left:auto}#accountRank{display:flex;gap:12px;align-items:center;min-width:240px}.rankBadge{font-size:20px;color:#efd28d;white-space:nowrap}.xpTrack{height:5px;background:#ffffff20;border-radius:4px;margin:7px 0;width:220px}.xpTrack i{display:block;height:100%;background:#efcc8c;border-radius:4px}#accountRank small{font-size:11px}.lobbyColumns{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px}.onlineColumn{border-left:1px solid #ffffff1a;padding-left:24px}.onlineColumn h3{font-size:16px}.onlineColumn h3 span{color:#dfc38a}#onlinePlayers{padding:0;list-style:none;max-height:400px;overflow:auto}#onlinePlayers li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff14}#onlinePlayers b,#onlinePlayers small{display:block}#onlinePlayers b{font-size:14px}#onlinePlayers small{font-size:11px;color:#a4b5b9;margin-top:4px}.onlineDot{width:6px;height:6px;margin-left:auto;background:#8acaa1;border-radius:50%}.roomCard{width:100%;display:grid;grid-template-columns:64px 1fr 44px 56px;gap:12px;text-align:left;align-items:center;margin-bottom:8px;padding:16px}.roomCard span{font-size:12px;color:#c1d0d1}.roomCard small{font-size:11px;color:#dfc38a}.emptyRoom{padding:28px 16px;border:1px dashed #ffffff28;text-align:center;color:#a8b9bc}.lobbyTools{display:flex;gap:8px;margin:10px 0 20px}.autoEquipRow{display:flex;gap:12px;align-items:center;padding:8px 14px;flex-shrink:0;border-bottom:1px solid #ffffff15}.autoEquipRow button{font-size:12px;min-height:38px}.autoEquipRow label{display:flex;align-items:center;gap:7px;font-size:12px;margin:0}.autoEquipRow input{width:18px;height:18px;margin:0}.storageFilters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#playerLabels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.playerLabel{position:absolute;top:0;left:0;text-align:center;white-space:nowrap;line-height:1.3;text-shadow:0 1px 3px #000,0 0 4px #000}.playerLabel small{font-size:10px;display:block;color:#e8cb8c}.playerLabel b{font-size:12px;color:#f5f6ed}.playerLabel.selfLabel{opacity:.8}
body[data-controls=desktop] #loginPanel{max-width:520px}body[data-controls=desktop] #loginPanel input{min-height:50px;font-size:18px}body[data-controls=desktop] #loginPanel label{font-size:14px}body[data-controls=desktop] #loginPanel button{min-height:48px;font-size:16px}
body[data-controls=touch] #moveArea{top:auto;bottom:env(safe-area-inset-bottom);left:0;width:148px;height:148px;z-index:2}
body[data-controls=touch] #stick{left:74px;top:74px;bottom:auto;width:88px;height:88px;transform:translate(-50%,-50%);opacity:.7}
body[data-controls=touch] .playerHud{left:var(--safeL);bottom:calc(var(--safeB) + 142px);gap:7px;pointer-events:none}
body[data-controls=touch] .portrait{width:48px;height:48px}body[data-controls=touch] .portrait img{inset:5px;width:38px;height:38px}body[data-controls=touch] .portrait>b{font-size:16px;min-width:32px}body[data-controls=touch] #hpMax{font-size:10px}
body[data-controls=touch] #chatLog{bottom:calc(var(--safeB) + 200px);max-height:65px;max-width:min(270px,62vw);overflow:hidden;font-size:10px;line-height:1.35}body[data-controls=touch] #chatLog p{padding:3px 5px;margin:2px 0}
body[data-controls=touch] .commsButtons{left:156px;bottom:calc(var(--safeB) + 5px);gap:4px}body[data-controls=touch] .commsButtons button{min-width:38px;min-height:38px;font-size:10px;padding:5px}
body[data-controls=touch] .weaponHud{bottom:var(--safeB);min-width:82px;max-width:94px}body[data-controls=touch] .weaponHud b{font-size:27px}body[data-controls=touch] .cycleGun{width:clamp(92px,24vw,132px);right:var(--safeR);bottom:calc(var(--safeB) + 108px);min-height:44px;padding:6px;font-size:11px}body[data-controls=touch] .cycleGun small{font-size:9px}
@media(max-width:600px){#lobby.panel{top:70px;max-height:calc(100dvh - 80px)}#lobby h1{font-size:32px;margin:9px 0}#lobby .lead{font-size:12px;line-height:1.5}.login label{font-size:12px}.login input{min-height:44px;font-size:16px}.login button{font-size:14px}body[data-account=in] #lobby{width:calc(100% - 20px);padding:14px}.accountHeader{flex-wrap:wrap;gap:10px;padding-bottom:12px}.accountHeader h2{font-size:18px}.accountHeader>button{min-height:38px;padding:6px 9px;font-size:11px}.accountHeader #accountRank{order:3;width:100%;min-width:0}#accountRank>div{flex:1}.xpTrack{width:100%}.lobbyColumns{grid-template-columns:minmax(0,1fr) 110px;gap:12px}.onlineColumn{padding-left:10px}.onlineColumn h3{font-size:12px}#onlinePlayers li{gap:5px}#onlinePlayers .rankBadge{font-size:13px}#onlinePlayers b{font-size:11px;max-width:73px;overflow:hidden;text-overflow:ellipsis}#onlinePlayers small{font-size:9px}#onlinePlayers .onlineDot{display:none}.deploy{flex-wrap:wrap;gap:7px}.deploy select{width:100%;font-size:13px}.roomCard{padding:10px;grid-template-columns:1fr auto;gap:5px}.roomCard span{grid-row:2;font-size:10px}.roomCard small{grid-column:2;font-size:10px}.lobbyTools button{font-size:12px;padding:6px 9px}.autoEquipRow{padding:6px 10px;gap:6px}.autoEquipRow button,.autoEquipRow label{font-size:10px}.sheetTabs button{font-size:12px}.sheetHead h2{font-size:18px}#inventory.loadoutSheet{max-height:94dvh;height:94dvh}.sheetBody{padding:10px}.equipSlot{min-height:72px;padding:8px}.equipSlot>strong{font-size:12px}.equipSlot>small{font-size:10px}.playerLabel small{font-size:8px}.playerLabel b{font-size:10px}}
@media(orientation:landscape) and (max-height:560px){#lobby.panel{top:56px;max-height:calc(100dvh - 64px)}body[data-account=in] #lobby{padding:12px 18px}.accountHeader{padding-bottom:8px}.accountHeader h2{font-size:18px}.lobbyColumns{grid-template-columns:minmax(0,1fr) 180px;gap:18px}.onlineColumn{padding-left:14px}#onlinePlayers li{padding:7px 0}body[data-controls=touch] #moveArea{width:132px;height:132px}body[data-controls=touch] #stick{left:66px;top:66px;width:78px;height:78px}body[data-controls=touch] .playerHud{bottom:calc(var(--safeB) + 127px)}body[data-controls=touch] #chatLog{bottom:calc(var(--safeB) + 183px);max-height:44px;max-width:260px}body[data-controls=touch] .commsButtons{left:142px}body[data-controls=touch] #inventory.loadoutSheet{height:94dvh;max-height:94dvh}.autoEquipRow{padding:4px 14px}.autoEquipRow button{min-height:32px}}

/* Upright insignia: vector paths never inherit font glyph orientation. */
.rankBadge{display:inline-flex;flex:none;align-items:center;justify-content:center}.rankInsignia{width:32px;height:32px;flex:none;vertical-align:middle;filter:drop-shadow(0 1px 1px #000a)}.playerLabel .rankInsignia{width:17px;height:17px}.playerLabel small{display:flex;align-items:center;justify-content:center;gap:3px}
.lootReveal{position:fixed;inset:0;z-index:90;background:#04090dcc;display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top)) 16px;backdrop-filter:blur(5px)}.lootReveal[hidden]{display:none}.lootReveal>section{width:min(100%,360px);max-height:88dvh;overflow:auto;background:#14222b;border:1px solid #52616b;border-radius:18px;padding:22px;box-sizing:border-box;box-shadow:0 18px 80px #0008;text-align:center}.lootReveal h2{font-size:20px;margin:8px 0 20px}.lootReveal>section>small{color:#b5c3c8;font-size:11px;letter-spacing:2px}.rewardCard{border-top:2px solid var(--grade);padding-top:14px;text-align:left}.rewardGrade{font-size:11px;color:var(--grade)}.rewardCard h3{font-size:26px;margin:6px 0}.rewardCard p{font-size:12px;color:#bac6cb;line-height:1.5}.rewardCard strong{font-size:17px}.rewardCard ul{list-style:none;padding:0;margin:14px 0}.rewardCard li{display:flex;justify-content:space-between;padding:5px 0;font-size:12px}.rewardDestination{border-top:1px solid #ffffff20;padding-top:12px}.lootReveal button{width:100%;min-height:44px;margin-top:8px}body[data-controls=touch] .rankInsignia{width:24px;height:24px}body[data-controls=touch] .playerLabel .rankInsignia{width:15px;height:15px}@media(max-height:500px){.lootReveal>section{padding:12px 18px}.lootReveal h2{margin:3px 0 8px}.rewardCard{padding-top:7px}.rewardCard h3{font-size:21px}.rewardCard p{margin:6px 0}.rewardCard ul{margin:7px 0}}

.volumeRow{display:grid;grid-template-columns:62px minmax(70px,1fr) 34px;gap:8px;align-items:center;font-size:11px;margin:9px 0}.volumeRow input{min-height:24px;width:100%;padding:0;accent-color:#ddbd7b}.volumeRow output{text-align:right}#settingsMenu{max-height:calc(100dvh - 80px);overflow:auto;min-width:245px}

.reserveReloadNote{font-size:11px;color:#d6c39b;line-height:1.5;border-top:1px solid #ffffff20;padding-top:10px}

/* Primary phone layout. Scoped to touch landscape; lists scroll inside panels. */
@media (orientation:landscape) and (max-height:600px){
body[data-controls=touch]{--safeL:max(12px,env(safe-area-inset-left));--safeR:max(12px,env(safe-area-inset-right));--safeB:max(8px,env(safe-area-inset-bottom));font-size:12px}
body[data-controls=touch] header{height:40px;min-height:40px;padding:3px var(--safeR) 3px var(--safeL)}
body[data-controls=touch] header button{min-height:34px;padding:5px 10px}
body[data-controls=touch] #mission{display:none}
body[data-controls=touch] #lobby.panel{left:var(--safeL);right:var(--safeR);top:44px;bottom:var(--safeB);width:auto;max-width:none;max-height:none;transform:none;padding:10px 12px;overflow:auto}
body[data-controls=touch]:not([data-account=in]) #lobby{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(265px,1.2fr);grid-template-rows:20px auto 1fr auto;gap:0 20px;align-items:start}
body[data-controls=touch]:not([data-account=in]) #lobby>.eyebrow{grid-column:1;grid-row:1;font-size:8px}
body[data-controls=touch]:not([data-account=in]) #lobby>h1{grid-column:1;grid-row:2;font-size:clamp(25px,4.3vw,38px);margin:6px 0}
body[data-controls=touch]:not([data-account=in]) #lobby>.lead{grid-column:1;grid-row:3;font-size:11px;line-height:1.6;margin:8px 0}
body[data-controls=touch]:not([data-account=in]) #lobby>.tags{grid-column:1;grid-row:4;flex-wrap:wrap;gap:4px;margin:5px 0}
body[data-controls=touch]:not([data-account=in]) #loginPanel{grid-column:2;grid-row:1 / 5;padding:10px 12px;width:100%;max-width:none;min-width:0}
body[data-controls=touch] .login label{font-size:11px;margin-bottom:6px;line-height:1.3}
body[data-controls=touch] .login input{min-height:38px;padding:7px 9px;font-size:16px;margin-top:3px}
body[data-controls=touch] .login button{min-height:38px;padding:6px;font-size:12px}
body[data-controls=touch] .login .muted{font-size:10px;line-height:1.4;margin:6px 0}
body[data-controls=touch] #lobby>.credits{grid-column:1 / -1;margin:5px 0;font-size:9px}
body[data-controls=touch] #lobby>.credits summary{min-height:28px}
body[data-controls=touch][data-account=in] #lobby{display:flex;flex-direction:column;padding:10px 14px;overflow:hidden;border-radius:10px}
body[data-controls=touch][data-account=in] #lobby>.eyebrow{display:none}
body[data-controls=touch] #onlineLobby{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-controls=touch] .accountHeader{flex-wrap:nowrap;gap:12px;padding-bottom:7px;flex:none}
body[data-controls=touch] .accountHeader h2{font-size:16px;margin:0}
body[data-controls=touch] .accountHeader small{font-size:9px}
body[data-controls=touch] .accountHeader>button{min-height:34px;padding:5px 10px;font-size:11px}
body[data-controls=touch] .accountHeader #accountRank{order:0;min-width:0;width:auto;flex:1;gap:8px}
body[data-controls=touch] #accountRank>div{flex:1;min-width:0}
body[data-controls=touch] .xpTrack{width:100%;max-width:230px;margin:4px 0}
body[data-controls=touch] #accountRank small{font-size:9px}
/* v10.9 review: 8 header buttons (+ 캐릭터 정보, 제작) squeezed the rank column to 0-36 px on landscape phones — tighter buttons, a fixed rank column */
body[data-controls=touch] .accountHeader{gap:6px}body[data-controls=touch] .accountHeader>button{padding:5px 8px}body[data-controls=touch] #accountRank>div{min-width:86px}body[data-controls=touch] #accountRank :is(b,small){white-space:nowrap}
body[data-controls=touch] .lobbyColumns{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(130px,25%);gap:14px;overflow:hidden}
body[data-controls=touch] .lobbyColumns>.roomsColumn{min-height:0;overflow:auto;padding-right:3px}
body[data-controls=touch] .onlineColumn{min-height:0;overflow:auto;padding-left:12px}
body[data-controls=touch] .onlineColumn h3{font-size:12px;margin:10px 0 3px}
body[data-controls=touch] #onlinePlayers{margin:0;max-height:none;overflow:visible}
body[data-controls=touch] #onlinePlayers li{gap:6px;padding:6px 0}
body[data-controls=touch] #onlinePlayers b{font-size:11px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
body[data-controls=touch] #onlinePlayers small{font-size:9px;margin-top:1px}
body[data-controls=touch] .deploy{margin:8px 0 6px;flex-wrap:nowrap;gap:8px}
body[data-controls=touch] .deploy h3{font-size:13px;white-space:nowrap}
body[data-controls=touch] .deploy select{width:150px;font-size:12px;min-height:36px;padding:6px}
body[data-controls=touch] #play{min-height:38px;font-size:13px;padding:8px 12px}
body[data-controls=touch] .lobbyTools{gap:6px;margin:7px 0}
body[data-controls=touch] .lobbyTools button{min-height:34px;font-size:11px;padding:6px 10px}
body[data-controls=touch] .roomCard{grid-template-columns:54px 1fr 34px 46px;gap:6px;padding:8px;margin-bottom:5px;min-height:40px;font-size:11px}
body[data-controls=touch] .roomCard span,body[data-controls=touch] .roomCard small{font-size:10px;grid-row:auto;grid-column:auto}
body[data-controls=touch] #inventory.loadoutSheet{width:calc(100% - var(--safeL) - var(--safeR));height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:none;border-radius:10px;display:flex;flex-direction:column;padding:0;overflow:hidden}
body[data-controls=touch] .sheetHead{padding:5px 12px;min-height:36px;flex:none}
body[data-controls=touch] .sheetHead h2{font-size:16px;margin:0}
body[data-controls=touch] .sheetHead button{min-height:32px;padding:5px 10px;font-size:11px}
body[data-controls=touch] .sheetTabs{padding:3px 12px;gap:5px;flex:none}
body[data-controls=touch] .sheetTabs button{font-size:12px;min-height:34px;padding:5px 10px}
body[data-controls=touch] .loadoutGunTabs{padding:3px 12px;gap:5px;flex:none}
body[data-controls=touch] .loadoutGunTabs button{min-height:34px;padding:5px;font-size:11px}
body[data-controls=touch] .loadoutGunTabs button small{display:none}
body[data-controls=touch] .autoEquipRow{padding:4px 12px;gap:12px;flex:none}
body[data-controls=touch] .autoEquipRow button{min-height:32px;padding:4px 8px;font-size:10px}
body[data-controls=touch] .autoEquipRow label{font-size:10px}
body[data-controls=touch] #inventory>.sheetNote{font-size:9px;margin:0;padding:2px 12px;line-height:1.4;flex:none}
body[data-controls=touch] .sheetBody{padding:8px 12px;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
body[data-controls=touch] #equipmentPane{display:block}
body[data-controls=touch] #equipmentPane .sectionLabel{display:none}
body[data-controls=touch] #currentEquipmentGun{font-size:14px;display:inline-block;margin:0 8px 5px 0}
body[data-controls=touch] .gunDetails{display:inline;font-size:10px;line-height:1.4}
body[data-controls=touch] #equipped{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;grid-row:auto;margin:4px 0}
body[data-controls=touch] .equipCard .equipSlot{min-height:84px;padding:7px 7px 30px}
body[data-controls=touch] .equipSlot>strong{font-size:11px;line-height:1.35;overflow-wrap:anywhere}
body[data-controls=touch] .equipSlot>small{font-size:9px}
body[data-controls=touch] .equipCard .unequip{min-height:28px;font-size:10px;bottom:2px;padding:3px 7px}
body[data-controls=touch] .sheetNote{font-size:9px;line-height:1.4;margin:5px 0}
body[data-controls=touch] #items{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body[data-controls=touch] .item{padding:8px;font-size:10px}
body[data-controls=touch] .item h4{font-size:12px;margin:0 0 5px}
body[data-controls=touch] .item p,body[data-controls=touch] .compareRow{font-size:10px;line-height:1.4}
body[data-controls=touch] .itemComparison{padding:5px 7px;margin-top:5px}
body[data-controls=touch] .item .itemActions button{font-size:10px;min-height:32px;padding:4px}
body[data-controls=touch] .storageFilters{gap:6px;margin-bottom:7px}
body[data-controls=touch] .storageFilters select{min-height:34px;padding:5px 8px;font-size:11px}
body[data-controls=touch] .battleSheet{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 16px)}
body[data-controls=touch] .scoreTable td{font-size:11px;padding:7px 6px}
body[data-controls=touch] .scoreTable th,body[data-controls=touch] .scoreTable strong{font-size:11px}
body[data-controls=touch] .mvpCard{padding:8px;margin:5px 0}
body[data-controls=touch] .mvpCard>strong{font-size:18px;margin:2px 0}
body[data-controls=touch] #result{padding:12px;max-height:calc(100dvh - 16px)}
body[data-controls=touch] #result h2{font-size:18px;margin:5px 0}
body[data-controls=touch] #settingsMenu{top:40px;max-height:calc(100dvh - 48px - env(safe-area-inset-bottom));min-width:230px;padding:10px}
body[data-controls=touch] .volumeRow{margin:6px 0;font-size:10px}
body[data-controls=touch] .stage{top:8px;left:var(--safeL)}
body[data-controls=touch] .stage strong{font-size:24px}
body[data-controls=touch] .operationHud{top:7px;width:155px;padding:5px 8px}
body[data-controls=touch] .remainingTitle{font-size:9px;gap:5px}
body[data-controls=touch] .remainingTitle b{font-size:23px}
body[data-controls=touch] .coreHud{font-size:8px;margin-top:3px}
body[data-controls=touch] .loadoutButtons{top:5px;right:calc(var(--safeR) + 48px);gap:4px}
body[data-controls=touch] .loadoutButtons button{min-height:34px;padding:5px 8px;font-size:10px}
body[data-controls=touch] #moveArea{left:env(safe-area-inset-left);width:136px;height:136px}
body[data-controls=touch] #stick{left:68px;top:68px;width:80px;height:80px}
body[data-controls=touch] .playerHud{left:calc(var(--safeL) + 132px);bottom:calc(var(--safeB) + 45px);gap:5px}
body[data-controls=touch] .portrait{width:40px;height:40px}
body[data-controls=touch] .portrait img{inset:4px;width:32px;height:32px}
body[data-controls=touch] .portrait>b{font-size:13px;min-width:28px;padding:0 5px}
body[data-controls=touch] #hpMax{font-size:9px}
body[data-controls=touch] .commsButtons{left:calc(var(--safeL) + 132px);bottom:var(--safeB)}
body[data-controls=touch] .commsButtons button{min-height:34px;min-width:38px;font-size:10px}
body[data-controls=touch] #chatLog{left:var(--safeL);bottom:calc(var(--safeB) + 144px);max-width:230px;max-height:42px;font-size:9px}
body[data-controls=touch] .weaponHud{max-width:88px;min-width:80px;padding:4px 6px}
body[data-controls=touch] .weaponHud b{font-size:25px}
body[data-controls=touch] #combatStatus{display:none}
body[data-controls=touch] .cycleGun{bottom:calc(var(--safeB) + 85px);min-width:96px;width:106px;min-height:42px;padding:5px}
body[data-controls=touch] .cycleGun>span{font-size:11px}
body[data-controls=touch] #touchHint{bottom:var(--safeB);font-size:9px;left:35%;right:22%}
body[data-controls=touch] #moveArea .touchLabel{bottom:8px;font-size:8px}
body[data-controls=touch] #lookArea .touchLabel{display:none}
body[data-controls=touch] .lootReveal>section{width:min(520px,85%);max-height:calc(100dvh - 20px);padding:10px 16px}
body[data-controls=touch] .rewardCard h3{font-size:19px}
body[data-controls=touch] #prepareNotice b{font-size:36px}
}

/* v9.12 mobile feedback, shop and six ranking categories */
body[data-controls=touch] #hitMarker{display:none!important}
#cycleGun,[data-gun-key]{touch-action:manipulation}
.lobbyTools{flex-wrap:wrap}#goldBalance{color:#ffe1a6;align-self:center}
.extraSheet{width:min(680px,94vw);max-height:86dvh;overflow:auto;padding:0}
.extraSheet .sheetBody{overflow:auto}.shopCards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shopCards article{display:flex;flex-direction:column;gap:14px;padding:16px 10px;border:1px solid #ffffff20;border-radius:12px;background:#233139}.shopCards b{color:#ffe1a6}
.rankTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 16px}.rankTabs button{font-size:12px;min-height:40px}.rankTabs button[aria-selected=true]{border-color:#f4d394;color:#ffe1a6}
.rankingRows{padding:0;list-style:none}.rankingRows li{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:12px 4px;border-bottom:1px solid #ffffff16;font-size:13px}.rankingRows strong{text-align:right}.ownRank,#equipmentDps{color:#ffe1a6;font-size:12px;line-height:1.7}
#dpsNotice{position:fixed;z-index:130;bottom:calc(18px + var(--safeB));left:50%;transform:translateX(-50%);width:max-content;max-width:92vw;background:#132d2df5;border:1px solid #91b8a1;border-radius:10px;padding:10px 18px;color:#d5ffe0;font-size:13px;white-space:pre-line;pointer-events:none}
@media(max-width:520px){.shopCards{grid-template-columns:1fr}.shopCards article{display:grid;grid-template-columns:1fr auto;align-items:center}.shopCards button{grid-column:1/-1}.rankingRows li{font-size:11px}}

#inventory .sheetTabs{grid-template-columns:repeat(4,minmax(0,1fr))}#filtersPane h3{margin:0;font-size:17px}#filtersPane>.sheetNote{margin:8px 0 12px}#autoEquipFilters{display:grid;gap:12px}.slotFilter{min-width:0;margin:0;padding:12px;border:1px solid #71808055;border-radius:10px;background:#203039}.slotFilter legend{padding:0 6px;color:#edd6aa;font-size:14px}.filterPriorities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.filterPriorities label{min-width:0;font-size:12px;color:#b9c9cc}.filterPriorities select{width:100%;margin-top:6px;min-height:44px;padding:8px 4px;background:#17262e;color:#e8eeee;border:1px solid #536970;border-radius:7px;font-size:12px}@media(max-width:520px){#inventory .sheetTabs{padding-left:10px;padding-right:10px;gap:3px}#inventory .sheetTabs button{padding:6px 2px;font-size:13px}#inventory .sheetTabs small{display:block;margin:2px 0 0;font-size:10px}.filterPriorities{grid-template-columns:1fr}.filterPriorities label{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center}.filterPriorities select{margin:0}.slotFilter{padding:9px 10px}}

.rewardEquipChoice{border-top:1px solid #ffffff22;margin-top:12px;padding-top:4px}.rewardEquipChoice button:disabled{opacity:.65}.lootReveal .itemComparison{margin:12px 0}.lootReveal .compareRow b{font-size:12px}.lootReveal>section{width:min(100%,500px)}.equippedNote{color:#efda9d!important;font-weight:600}

/* v10 anime theme: glossy violet panels, pink/cyan highlights, character select. */
:root{--accent:#ff8fc4;--pink:#ff4f9a;--cyan:#56e4ff;--violet:#7a5cff;--ink:#150f2e;--panel:#1a1438f5;--muted:#b7b1d8;--display:'Black Han Sans','Noto Sans KR',sans-serif}
html,body{background:var(--ink)}
button{border-radius:12px;background:#231b4ae8;border-color:#a894ff40;transition:transform .12s,border-color .12s,box-shadow .12s}
button:hover:not(:disabled){border-color:var(--cyan);box-shadow:0 0 0 1px #56e4ff55,0 4px 16px #56e4ff22}
button.primary{background:linear-gradient(100deg,var(--pink),var(--violet));color:#fff;border:0;box-shadow:0 6px 20px #ff4f9a55;text-shadow:0 1px 2px #0005}
button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 26px #ff4f9a80}
button.quiet{background:transparent;border-color:#ffffff30}
input,select{background:#0f0b26;border:1px solid #6e5bd070;border-radius:12px}
input:focus,select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px #56e4ff33}
body:not(.playing) #vignette{background:radial-gradient(ellipse at 85% 20%,#ff4f9a38,transparent 55%),radial-gradient(ellipse at 10% 90%,#56e4ff2a,transparent 55%),linear-gradient(90deg,#150f2ef0,#150f2e99 45%,transparent 85%)}
.brand{font-family:var(--display);color:var(--pink)}.brand span{font-family:var(--display);font-weight:400;letter-spacing:.08em;background:linear-gradient(90deg,#fff,#ffc4e1);-webkit-background-clip:text;background-clip:text;color:transparent}.brand small{-webkit-text-fill-color:#c9c1f0}
.eyebrow{display:inline-block;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--violet));color:#fff;letter-spacing:.16em;transform:skewX(-10deg)}
#lobby>h1{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.08;background:linear-gradient(170deg,#fff 35%,#ffc6e3 70%,#b9a8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #ff4f9a66) drop-shadow(0 8px 18px #0008);transform:skewX(-6deg);transform-origin:left}
#lobby>h1 em{color:transparent;background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text}
.lead{color:#ddd7f7}
.tags span{border-radius:999px;border-color:#56e4ff70;background:#56e4ff14;color:#d8f7ff}
.login,#characterSelect{position:relative;border:1px solid #b9a6ff55;border-radius:22px;background:linear-gradient(160deg,#241a52f0,#150f2ef2);box-shadow:0 0 0 1px #ffffff0d inset,0 20px 60px #0009,0 0 40px #7a5cff33}
.login:before,#characterSelect:before{content:'✦';position:absolute;top:-13px;right:18px;font-size:22px;color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.login label{color:#e5defc}
#toast{background:#1d1542f2;border-left:0;border-radius:999px;box-shadow:0 0 0 1px #ff8fc466,0 8px 30px #0008;padding:11px 22px}
.modal,.battleSheet,#inventory.loadoutSheet,.lootReveal>section{background:linear-gradient(160deg,#211a4cfa,#150f2efa);border-color:#a894ff55;border-radius:20px}
.missionNum{font-family:var(--display);font-weight:400;color:#ffffff30;-webkit-text-stroke:1px #ff8fc4aa}#mission h2{font-family:var(--display);font-weight:400}
.stage .stageLabel{margin:0 6px 0 0;font-size:11px;letter-spacing:.14em;color:var(--accent)}.stage b{font-family:var(--display);font-weight:400}
.roomCard strong small{display:block;font-size:9px;letter-spacing:.14em;color:var(--accent)}.roomCard strong{font-family:var(--display);font-weight:400;font-size:20px}
.xpTrack i{background:linear-gradient(90deg,var(--pink),var(--cyan))}
/* Logged-in panels share one centered frame. */
body[data-account=in] #lobby,body[data-account=select] #lobby{left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 40px));max-width:none;padding:24px;background:linear-gradient(160deg,#211a4cf2,#150f2ef2);border:1px solid #a894ff45;border-radius:24px;box-shadow:0 24px 80px #0009}
body[data-account=select] #lobby>h1,body[data-account=select] #lobby>.lead,body[data-account=select] #lobby>.tags,body[data-account=select] #lobby>.eyebrow,body[data-account=in] #lobby>.eyebrow{display:none}
body[data-account=select] #lobby{width:min(980px,calc(100% - 40px))}
#characterSelect{padding:0;background:none;border:0;box-shadow:none}#characterSelect:before{top:-8px;right:4px}
.selectHead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}.selectHead h2{font-family:var(--display);font-weight:400;font-size:34px;margin:8px 0 0}.selectHead button{min-height:40px}
.characterSlots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.charCard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;padding:8px 8px 12px;text-align:center;border-radius:18px;border:2px solid #a894ff40;background:linear-gradient(170deg,#2c2160,#171034)}
.charCard .charArt{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#ff8fc455,transparent 65%),linear-gradient(#3a2b7a,#1b1340)}
.charCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.charCard strong{font-family:var(--display);font-weight:400;font-size:18px;margin-top:6px}.charCard small{font-size:10px;letter-spacing:.2em;color:var(--cyan)}
.charNo{position:absolute;z-index:1;top:12px;left:12px;font:12px var(--display);padding:2px 7px;border-radius:999px;background:#0009;color:#fff}
.charCard.ready:hover{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 0 0 2px #ff4f9a55,0 12px 30px #ff4f9a44}
.charCard.locked{background:#000;border-color:#ffffff14}.charCard.locked .charArt{background:#050505}
.charCard.locked .charArt i{position:absolute;left:50%;bottom:0;width:62%;height:40%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:#161616}
.charCard.locked .charArt i:before{content:'';position:absolute;left:50%;bottom:112%;width:58%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#161616}
.charCard.locked strong{color:#444}.charCard.locked small{color:#3a3a3a}.charCard.locked:hover{border-color:#ffffff30;box-shadow:none}
#characterInfo{text-align:center;margin:16px 0 0;font-size:13px}
.accountHeader{border-bottom-color:#a894ff30}.accountHeader h2{font-family:var(--display);font-weight:400}
#changeCharacter{margin-left:auto}#changeCharacter+#logout{margin-left:0}
@media(max-width:760px){.characterSlots{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.selectHead h2{font-size:26px}body[data-account=select] #lobby{width:calc(100% - 20px);padding:14px}}
@media(orientation:landscape) and (max-height:600px){body[data-controls=touch][data-account=select] #lobby{display:flex;flex-direction:column;align-items:stretch;padding:10px 14px}.characterSlots{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.charCard{padding:5px 5px 7px;border-radius:14px}.charCard .charArt{aspect-ratio:4/5}.charCard strong{font-size:14px;margin-top:3px}.charCard small{font-size:8px}.selectHead{margin-bottom:8px}.selectHead h2{font-size:20px;margin-top:4px}.selectHead button{min-height:34px}#characterInfo{margin-top:8px;font-size:11px}}
.guestBtn{width:100%;margin-top:8px;border:1px dashed #56e4ff88;background:#56e4ff12;color:#c9f5ff}

/* v10 wizard HUD: skill bar replaces the gun/ammo widgets. */
#skillBar{display:none}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #skillBar{display:flex;position:absolute;left:50%;bottom:92px;transform:translateX(-50%);gap:8px;pointer-events:none}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) .weaponHud,#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #weaponShortcuts,#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #cycleGun,#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #reloadText{display:none!important}
.skillSlot{position:relative;width:74px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 4px;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#2a1f5ee8,#150f2ee8);border:1.5px solid #a894ff66;box-shadow:0 4px 16px #0006}
.skillSlot kbd{position:absolute;top:5px;left:6px;font-size:10px;padding:1px 5px;background:#0008;border-color:#ffffff30}
.skillSlot b{font-size:11px;font-weight:700;color:#e9f6ff;text-align:center;line-height:1.2;z-index:1}
.skillSlot[data-skill=bolt]{border-color:#56e4ff88}.skillSlot[data-skill=dodge]{width:60px}
.skillSlot i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cd,0)*100%);background:#05030fcc;pointer-events:none}
.skillSlot span{position:absolute;inset:0;display:grid;place-items:center;font:20px var(--display);color:#fff;text-shadow:0 1px 3px #000;z-index:2}
.skillSlot.ready{border-color:var(--cyan);box-shadow:0 0 0 1px #56e4ff55,0 0 14px #56e4ff44}.skillSlot.empty{filter:grayscale(.8) brightness(.7)}
.skillSlot .slotIcon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.skillSlot.hasIcon kbd{z-index:1}.skillSlot.hasIcon b{position:relative;z-index:2;align-self:stretch;margin:0 -4px -6px;padding:12px 2px 5px;background:linear-gradient(#0000,#000000c8 55%);text-shadow:0 1px 2px #000}
.skillSlot.hasIcon i{z-index:1}.skillSlot.hasIcon.empty .slotIcon{filter:grayscale(1)}
#prepPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));padding:18px 18px 14px;text-align:center;border-radius:18px;background:linear-gradient(160deg,#241a4ef0,#110c26f2);border:1.5px solid #a894ff66;box-shadow:0 12px 40px #000a;pointer-events:auto;z-index:6}
#prepPanel[hidden],#prepPanel:has(>#start[hidden]){display:none}#prepPanel h3{margin:2px 0 4px;font-size:22px}#prepPanel p{margin:0 0 12px;font-size:12px;color:#d9d2ff}#prepPanel small{display:block;margin-top:8px;font-size:11px;color:#cfc8f5}
#prepChars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}#prepChars button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;border-radius:14px;border:1.5px solid #ffffff26;background:#0006;color:#fff;cursor:var(--game-cursor-pointer,pointer);font-weight:700}
#prepChars button img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#1b1538}#prepChars button.on{border-color:var(--cyan);box-shadow:0 0 0 1px #56e4ff66,0 0 16px #56e4ff55}#prepChars button.on{cursor:var(--game-cursor-default,default);background:#56e4ff22}
#prepPanel #start{width:100%;font-size:18px;padding:14px}#prepPanel #start kbd{margin-left:8px;font-size:13px}
.joinLoading{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,#2a1d5cf2,#0b0718fa 70%)}.joinLoading[hidden]{display:none}
.jlCard{width:min(460px,100%);text-align:center}.jlCard h3{margin:4px 0 12px;font-size:22px}.jlBar{height:6px;border-radius:6px;background:#ffffff1a;overflow:hidden;margin:0 auto 18px;width:70%}.jlBar i{display:block;height:100%;width:40%;border-radius:6px;background:linear-gradient(90deg,#56e4ff,#b58cff);animation:jlSlide 1.1s ease-in-out infinite}
@keyframes jlSlide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.jlTip{text-align:left;padding:14px 16px;border-radius:14px;background:#0008;border:1px solid #a894ff55}.jlTip small{display:block;font-size:11px;color:#cfc8f5;margin-bottom:4px}.jlTip b{font-size:18px}.jlTip em{display:block;font-style:normal;font-size:12px;color:#9fe9ff;margin:2px 0 8px}
.jlTip ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}.jlTip li{font-size:12px;line-height:1.45;color:#ece8ff}.jlTip kbd{margin-right:6px;font-size:10px}
.jlTip[data-class=berserker]{border-color:#ff8a2a66}.jlTip[data-class=archer]{border-color:#56e4ff66}
.skillSlot em{position:absolute;top:4px;right:6px;font:16px var(--display);font-style:normal;color:#ffe3f1;text-shadow:0 0 6px #ff4f9a;z-index:2}
/* v10 wizard reticle: soft ring + dot; pink when an enemy is under it, filled when locked. */
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair{width:34px;height:34px;color:#e9f6ff}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair b{display:none}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair:before{content:'';position:absolute;inset:0;border:2px solid currentColor;border-radius:50%;opacity:.85;box-shadow:0 0 6px #56e4ff88}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair i{width:5px;height:5px;background:currentColor;border:0;box-shadow:0 0 4px #000}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair.hover{color:#ff8fc4}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair.locked{color:#ff5fa8}#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair.locked:before{border-width:3px;box-shadow:0 0 10px #ff4f9a}
#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair.locked i{background:#ff5fa8}#hud:is([data-character=wizard],[data-character=berserker],[data-character=archer],[data-character=assassin]) #crosshair:after{display:none}

/* Berserker: charge gauge (stage colours orange → red → dark crimson) and active skill highlight. */
#chargeGauge{position:absolute;left:50%;bottom:176px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
#chargeGauge[hidden]{display:none}
#chargeGauge i{width:46px;height:10px;border-radius:5px;background:#0008;border:1px solid #ffffff33;transition:background .08s}
#chargeGauge[data-stage="1"] i.on{background:#ff8a2a;box-shadow:0 0 10px #ff8a2a}
#chargeGauge[data-stage="2"] i.on{background:#ff2a1a;box-shadow:0 0 12px #ff2a1a}
#chargeGauge[data-stage="3"] i.on{background:#7a0c38;box-shadow:0 0 14px #ff2a6a}
.skillSlot.active{border-color:#ff8a2a;box-shadow:0 0 0 1px #ff8a2a88,0 0 16px #ff5a2a66}
/* v10 gear: item card, ground loot tags, bid prompts, loot pop-up, character sheet */
.itemCard{--grade:#cfd6d8;border:1px solid color-mix(in srgb,var(--grade) 55%,transparent);border-radius:12px;padding:10px 12px;background:linear-gradient(160deg,color-mix(in srgb,var(--grade) 16%,#140f2e) 0%,#120d28f0 60%);font-size:12px;line-height:1.45}
.itemCard .itemTitle{font-size:11px;color:var(--muted);margin-bottom:4px}
.itemHead{display:flex;gap:10px;align-items:center}.itemHead svg{flex:none;width:56px;height:56px}
.itemHead b{display:block;color:var(--grade);font-size:14px}.itemHead small{color:var(--muted)}
.itemBase{margin:8px 0 4px;font-weight:700}.itemOpts{margin:0;padding-left:16px;color:#b9e2ff}
.itemSpecial{margin:6px 0 0;color:#ffcf8a}.itemSet{margin-top:6px;border-top:1px solid #ffffff1f;padding-top:6px}.itemSet b{color:#7fe08a}
.itemSet p,.setRow p{margin:2px 0;color:#8a93a0}.itemSet p.on,.setRow p.on,.setList p.on{color:#9ff0a8}
#lootLayer{position:fixed;inset:0;pointer-events:none;z-index:6}
.dropTag{position:absolute;left:0;top:0;--grade:#fff;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;color:#fff;background:#140f2ed9;border:1px solid var(--grade);box-shadow:0 0 12px color-mix(in srgb,var(--grade) 50%,transparent)}
.dropTag.mine{color:var(--grade)}
#bidStack{position:fixed;right:var(--safeR);top:120px;z-index:25;display:flex;flex-direction:column;gap:8px;width:min(300px,calc(100vw - 32px));pointer-events:none}
.bidCard{pointer-events:auto;background:#1d1542f2;border:1px solid #ff8fc466;border-radius:14px;padding:10px;box-shadow:0 8px 30px #0008;font-size:12px}
.bidHead{font-weight:700;margin-bottom:6px;color:#ffd6ec}.bidTime{height:4px;border-radius:4px;background:#ffffff1a;margin:8px 0;overflow:hidden}.bidTime i{display:block;height:100%;background:#ff8fc4;width:100%}
.bidButtons{display:flex;gap:6px}.bidButtons button{flex:1;min-height:36px}.bidButtons button:first-child{background:var(--accent);color:#292920;border:0}.bidNote{margin:0;color:var(--muted)}
#lootPopup{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:26;width:min(320px,calc(100vw - 32px));pointer-events:none;animation:lootIn .2s ease-out}
#lootPopup .lootWho{text-align:center;font-weight:700;margin-bottom:6px;text-shadow:0 2px 6px #000}#lootPopup.mine .lootWho{color:var(--accent)}
#lootPopup .rolls{text-align:center;margin:6px 0 0;font-size:12px;text-shadow:0 2px 6px #000}
@keyframes lootIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
.gearSheet{width:min(1180px,calc(100vw - 32px));max-height:92dvh;padding:16px 18px}
.gearTop{display:flex;align-items:center;gap:12px;margin-bottom:10px}.gearTop h2{margin:0;font-size:18px;flex:1}
.gearTabs{display:flex;gap:6px}.gearTabs button{min-height:34px;padding:6px 14px}.gearTabs button.on{background:var(--accent);color:#292920;border:0}
.gearClose{min-height:34px}
.gearGrid{display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(240px,.85fr) minmax(340px,1.3fr);gap:14px;align-items:start}
.gearGrid h3{margin:4px 0 8px;font-size:13px;color:#ffd6ec}.gearGrid h3 small{color:var(--muted);font-weight:400}
.gearStats dl{margin:0;display:grid;gap:4px}.gearStats dl>div{display:grid;grid-template-columns:1fr auto;padding:5px 8px;border-radius:8px;background:#ffffff08}
.gearStats dt{color:var(--muted)}.gearStats dd{margin:0;font-weight:700}.gearStats small{grid-column:1/-1;color:#8a93a0;font-size:11px}
.gearStats dl>div.dps{background:#ff8fc41f}.gearStats dl>div.dps dd{color:var(--accent);font-size:16px}
.skillTable{width:100%;border-collapse:collapse;font-size:11px}.skillTable th,.skillTable td{padding:4px 5px;text-align:right;border-bottom:1px solid #ffffff12}.skillTable th:first-child,.skillTable td:first-child{text-align:left}
.skillTable em{color:#9ff0a8;font-style:normal}.setList{font-size:11px}.setRow{margin-bottom:6px}.setRow b{color:#7fe08a}
.gearSlots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gearSlot,.bagCell{--grade:#445;position:relative;padding:3px;min-height:0;aspect-ratio:1;border-radius:10px;border:1px solid color-mix(in srgb,var(--grade) 70%,transparent);background:#0f0b22;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* v10.13.2 잠금 표시 (gear-ui.js LOCK_MARK): a gold padlock in the top-left corner of a locked item */
.lockMark{position:absolute;left:3px;top:3px;z-index:2;width:14px;height:14px;color:#ffd16d;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 2px #000);pointer-events:none}.lockMark svg{display:block;width:100%;height:100%}body[data-controls=touch] .lockMark{width:12px;height:12px;left:2px;top:2px}
.gearSlot svg,.bagCell svg{width:100%;height:auto;max-width:64px}.gearSlot small{font-size:11px;color:var(--muted);font-weight:400}.gearSlot.empty{opacity:.55}
.gearSlot.sel,.bagCell.sel{outline:2px solid var(--accent);outline-offset:1px}
.gearDetail{margin-top:10px;display:grid;gap:8px}.compare{font-size:12px;background:#ffffff08;border-radius:10px;padding:8px 10px}.compare ul{margin:4px 0 0;padding-left:16px}
.compare li.up{color:#9ff0a8}.compare li.down{color:#ff8f9a}.itemActions{display:flex;flex-wrap:wrap;gap:6px}.itemActions button{min-height:36px;flex:1}
/* Every player gets every bid now (v10.4 open loot): the prompt stack scrolls instead of running off the screen. */
#bidStack{max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain}
#result button.chosen{outline:2px solid #ffd27a;box-shadow:0 0 12px #ffd27a66}
/* v10.9 result keys (user: "GHB로 가자"): '반복 [G]' plain text hint, hidden on touch like the other key hints. */
#result kbd.resultKey{background:none;border:0;padding:0;margin-left:2px;font-size:.85em;color:inherit;opacity:.72}body[data-controls=touch] #result kbd.resultKey{display:none}
.bagGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:62dvh;overflow:auto;padding-right:2px}
/* Stash under the bag (v10.8.1: 100 slots per class): the bag scrolls in less height to leave it room. */
.gearBag .bagGrid{max-height:38dvh}.gearBag .stashGrid{max-height:22dvh}.stashHead{margin-top:12px;padding-top:10px;border-top:1px solid #ffffff1f}
.bagCell.blank{border-style:dashed;border-color:#ffffff14;background:transparent}.bagCell.other{opacity:.45}
.bagCell.worn::after{content:'E';position:absolute;right:4px;top:2px;font-size:11px;color:var(--accent);font-weight:700}
.bagCell.locked::before{content:'🔒';position:absolute;left:3px;bottom:1px;font-size:11px}
/* v10.10.2 초기화 주문서 stack count (item-icons.js stackBadge) */
.stackN{position:absolute;right:3px;bottom:2px;padding:0 4px;border-radius:6px;background:#0b0818e6;border:1px solid #d8b25a99;color:#ffe3a3;font:800 11px/1.4 system-ui,sans-serif;font-style:normal;pointer-events:none}
.itemHead{position:relative}.itemHead .stackN{left:40px;right:auto;bottom:0}
@media (max-width:900px){.gearGrid{grid-template-columns:1fr}.bagGrid{grid-template-columns:repeat(6,1fr);max-height:none}.gearBag .bagGrid,.gearBag .stashGrid{max-height:none}.gearSheet{padding:12px}}
/* Berserker overcharge: pulsing blood-red screen edge while the HP drains, and a throbbing HP ring */
body.overcharging #hud::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 120px 30px #8a0a12aa;animation:overchargePulse .5s ease-in-out infinite alternate}
body.overcharging #hpRing{animation:overchargeRing .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px #d0101c)}
body.overcharging #hpText{color:#ff5a5a}
@keyframes overchargePulse{from{opacity:.55}to{opacity:1}}
@keyframes overchargeRing{from{transform:scale(1)}to{transform:scale(1.06)}}
/* v10 HUD pass: charge gauge, HP bars over characters, larger portrait, ally panel (top left), clearer controls help */
#chargeGauge{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);width:min(360px,70vw);display:block;pointer-events:none;--m2:46.7%;--c:#c98a4a}
#chargeGauge[data-stage="2"]{--c:#d8612c}#chargeGauge[data-stage="3"]{--c:#e8321e}#chargeGauge[data-stage="over"]{--c:#b0101a}
.chargeHead{display:flex;justify-content:space-between;font-size:12px;font-weight:700;text-shadow:0 1px 3px #000;margin-bottom:3px}.chargeHead span{color:var(--c)}
.chargeTrack{position:relative;height:12px;border-radius:7px;background:#0d0a1ccc;border:1px solid #ffffff33;overflow:hidden;box-shadow:0 2px 10px #0008}
#chargeFill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#c98a4a,var(--c));box-shadow:0 0 10px var(--c)}
.chargeTrack s{position:absolute;top:-1px;bottom:-1px;width:2px;background:#fff9;text-decoration:none}.chargeTrack .mark2{left:var(--m2)}.chargeTrack .mark3{right:0}
.chargeLabels{position:relative;height:12px;font-size:10px;color:#ddd}.chargeLabels span{position:absolute;left:0}.chargeLabels .l2{left:var(--m2);transform:translateX(-50%)}.chargeLabels .l3{left:auto;right:0}
#chargeGauge[data-stage="3"] .chargeTrack,#chargeGauge[data-stage="over"] .chargeTrack{animation:chargeFull .35s ease-in-out infinite alternate}
@keyframes chargeFull{from{box-shadow:0 0 6px var(--c)}to{box-shadow:0 0 18px var(--c)}}
.playerLabel .labelHp{display:block;width:64px;height:5px;margin:2px auto 0;border-radius:3px;background:#000a;border:1px solid #fff4;overflow:hidden}
.playerLabel .labelHp>i{display:block;height:100%;width:100%;background:#4fd46a;transition:width .15s}.playerLabel .labelHp.low>i{background:#e8412e}
.playerLabel.selfLabel .labelHp>i{background:#6ab8ff}
.playerHud .portrait{width:104px;height:104px}
#hpText{font-size:18px}
#party{top:64px;left:var(--safeL);right:auto;text-align:left;font-size:11px;line-height:1.35;width:230px;display:grid;gap:5px;pointer-events:none}
#party[hidden]{display:none}
#party .partyCount{font-size:11px;margin-bottom:2px}
#party .ally{background:#140f2ecc;border:1px solid #ffffff22;border-radius:9px;padding:5px 8px}#party .ally.down{opacity:.5}
#party .allyTop{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}#party .allyTop svg{width:16px;height:16px;flex:none}
#party .allyTop small{color:var(--muted)}#party .allyTop em{font-style:normal;color:#ffd6ec;font-size:10px;border:1px solid #ff8fc466;border-radius:6px;padding:0 5px}#party .allyTop b{overflow:hidden;text-overflow:ellipsis}
#party .allyHp{position:relative;height:12px;margin-top:4px;border-radius:6px;background:#000a;overflow:hidden}
#party .allyHp i{position:absolute;left:0;top:0;bottom:0;background:#4fd46a}#party .allyHp i.low{background:#e8412e}
#party .allyHp span{position:relative;display:block;text-align:center;font-size:9px;line-height:12px;text-shadow:0 1px 2px #000}
#pcControls{display:grid;grid-template-columns:1fr;font-size:11px;bottom:6px;padding:4px 12px;gap:1px}
@media (pointer:coarse){#pcControls{display:none}#party{top:56px;width:190px}.playerHud .portrait{width:80px;height:80px}}/* v10 HUD pass (specificity fixes over the older per-device rules) */
#hud #chargeGauge{bottom:178px;display:block;gap:0}
#hud #chargeGauge[hidden]{display:none}
#hud #party{top:92px}
body[data-controls] #hud .playerHud .portrait{width:112px;height:112px}
body[data-controls] #hud .playerHud .portrait img{inset:8px;width:96px;height:96px}
body[data-controls] #hud .playerHud .portrait>b{font-size:24px}
body[data-controls=touch] #hud .playerHud .portrait{width:76px;height:76px}
body[data-controls=touch] #hud .playerHud .portrait img{inset:6px;width:64px;height:64px}#hud #party{top:112px}
.skillSheet{width:min(820px,calc(100vw - 32px))}
/* v10.11.21d (user: "Pc핸드폰 ui 온라인게임처럼해달라는거. Pc도 적용해줘"): a PC gets the same — the wide window size, the skill cards two
   abreast (the list was 1.5× a 1080p screen, 2.2× at 720p). */
@media (min-width:901px){.skillSheet{width:min(1180px,calc(100vw - 32px))}.skillSheet .skillList{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v10.11.21c (user: "핸드폰으로 ui크기가안맞는다 … 스크롤 밀어야해"): a landscape phone uses the whole width, the skill cards two abreast. */
@media (orientation:landscape){html.phoneFit .skillSheet{width:calc(100vw - 12px)}html.phoneFit .skillSheet .skillList{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}html.phoneFit .skillSheet .skillPassive{margin-bottom:6px}
html.phoneFit .skillSheet .skillCard{grid-template-columns:52px minmax(0,1fr);gap:8px;padding:6px 8px}html.phoneFit .skillSheet .skillIcon{width:46px;height:46px}html.phoneFit .skillSheet .spRows:not(.one){grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}html.phoneFit .skillSheet .spRow{padding:2px 3px;gap:2px}html.phoneFit .skillSheet .spRow button{width:30px;min-height:30px}html.phoneFit body[data-controls=touch] #skillSheet .spRow .spPct{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.skillPassive{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:#ff8fc41a;font-size:12px}
.skillList{display:grid;gap:8px}
.skillCard{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14}
.skillHead{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.skillIcon{display:block;width:56px;height:56px;border-radius:10px;border:1px solid #ffffff2b;box-shadow:0 2px 8px #0006;object-fit:cover}
.skillCard kbd{justify-self:start;padding:3px 8px;border-radius:6px;background:#21323c;border:1px solid #ffffff2b;font-size:11px}
.skillCard b{font-size:14px;color:#ffd6ec}.skillCard p{margin:3px 0;font-size:12px;line-height:1.5}.skillCard small{color:#9ff0a8;font-size:11px}
/* Boot loading (v10.9.3, user: "그다음 로딩하면서 준비하고"): the short step after the login — a small card over the menu backdrop (key art),
   the lobby under it hidden until it closes by itself; no illustration of its own, no patch notes (업데이트 내역 window). */
#loadingScreen{position:fixed;inset:0;z-index:100;display:grid;place-items:end center;padding:16px 16px max(10dvh,20px);background:linear-gradient(0deg,#07050fd9,#07050f66 42%,#07050f1f)}
#loadingScreen[hidden]{display:none}
body:has(#loadingScreen:not([hidden])) #lobby{visibility:hidden}
.loadCard{width:min(560px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:18px;background:linear-gradient(160deg,#1d1446ee,#0c0820f2);border:1px solid #ffffff24;box-shadow:0 18px 50px #000b}
.loadTitle small{display:block;letter-spacing:.3em;color:#ff8fc4;font-weight:700;font-size:12px}.loadTitle b{font-size:clamp(22px,4vw,34px);text-shadow:0 2px 16px #ff8fc466}
.loadBar{height:14px;border-radius:8px;background:#0008;border:1px solid #ffffff2a;overflow:hidden}.loadBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8fd8ff,#ff8fc4);transition:width .25s}
.loadInfo{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.loadInfo b{color:#fff}
.loadTip{display:flex;gap:10px;align-items:baseline;margin:2px 0 0;min-height:3.2em;font-size:13px;line-height:1.6;color:#d6dbe8}.loadTip b{flex:none;padding:1px 7px;border-radius:6px;background:#56e4ff24;color:var(--cyan);font-size:11px;letter-spacing:.08em}
.loadActions{display:flex;gap:8px;justify-content:flex-end}.loadActions:has(.loadSkip[hidden]){display:none}.loadActions button{min-height:44px;padding:10px 22px}
/* v10.10.1 start menu in the same card (loading-screen.js menu): 로고 → 로딩 → 로그인 → 메뉴 */
.loadBody{display:flex;flex-direction:column;gap:10px}.loadBody[hidden],.loadMenu[hidden],.loadMenuActions button[hidden]{display:none}
.loadMenu{display:flex;flex-direction:column;gap:14px}.loadWelcome{margin:0;font-size:15px;color:#d6dbe8}
/* v10.10.2 main menu tiles (loading-screen.js MENU_ITEMS), 로그아웃 below; v10.11.20: five in a row — 공지사항 · 업데이트 · 대기방 · 환경설정 · 크레딧 */
.loadCard:has(.loadMenu:not([hidden])){width:min(860px,100%);padding:20px 22px 16px}
.menuTiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.menuTile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:124px;padding:14px 8px 12px;border-radius:16px;border:1px solid #ffffff22;background:linear-gradient(165deg,#2c1f62e6,#140d33f2);color:#fff;box-shadow:inset 0 1px 0 #ffffff1c,0 6px 18px #0006;transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;cursor:var(--game-cursor-pointer,pointer)}
.menuTile:hover,.menuTile:focus-visible{transform:translateY(-3px);border-color:#8fd8ffaa;box-shadow:inset 0 1px 0 #ffffff28,0 12px 28px #0009,0 0 0 2px #8fd8ff33;outline:none}
.menuTile:active{transform:translateY(0)}
.menuTile .mtIcon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#ffffff14;color:#8fd8ff;box-shadow:inset 0 0 0 1px #ffffff14}
.menuTile .mtIcon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menuTile b{font-size:16px;font-weight:800;letter-spacing:.02em}.menuTile small{font-size:11px;color:#c9c3e6}
.menuTile.primary{background:linear-gradient(160deg,#ff5fa8,#a93cff);border-color:#ffffff66;box-shadow:inset 0 1px 0 #ffffff40,0 10px 26px #ff5fa84d}
.menuTile.primary .mtIcon{background:#ffffff33;color:#fff}.menuTile.primary small{color:#ffe8f5}
.menuTile.primary:hover,.menuTile.primary:focus-visible{border-color:#fff;box-shadow:inset 0 1px 0 #ffffff55,0 14px 32px #ff5fa866,0 0 0 2px #ffffff40}
.menuLogout{align-self:center;min-height:34px;padding:4px 16px;font-size:12px;opacity:.72}.menuLogout:hover{opacity:1}
@media (max-width:600px){.menuTiles{grid-template-columns:repeat(2,minmax(0,1fr))}.menuTile{min-height:100px}.menuTile.primary{grid-column:1 / -1;order:-1}}
@media (orientation:landscape) and (max-height:560px){.menuTile{min-height:92px;padding:8px 6px}.menuTile .mtIcon{width:36px;height:36px}.loadCard:has(.loadMenu:not([hidden])){padding:12px 14px 10px}}
@media (prefers-reduced-motion:reduce){.menuTile{transition:none}.menuTile:hover,.menuTile:focus-visible{transform:none}}
/* 환경설정 from the menu: the header (its 설정 panel) above the menu card, the panel centred. v10.10.3: only while the menu is on screen
   (the closed #loadingScreen keeps its .loadMenu unhidden, so the header stayed over every window and covered their ✕) */
body:has(#loadingScreen:not([hidden]) .loadMenu:not([hidden])) header{z-index:110}
body:has(#loadingScreen:not([hidden]) .loadMenu:not([hidden])) #settingsMenu{position:fixed;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:min(780px,calc(100vw - 24px))/* v10.11.8: the big 설정 window (end of file) */;max-height:calc(100dvh - 20px);box-shadow:0 20px 70px #000c}
/* 공지사항 · 크레딧 (menu-windows.js), the 업데이트 내역 look */
.menuWindow{z-index:125}.mwCard{width:min(680px,100%);height:auto;max-height:min(720px,calc(100dvh - 32px))}
.mwCard .unHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.mwCard .unHead button{min-height:40px;padding:6px 14px}
.mwBody{overflow:auto;padding:14px 18px 20px;display:flex;flex-direction:column;gap:12px}
.mwNotice{padding:12px 14px;border-radius:14px;background:#ffffff0c;border:1px solid #ffffff14}.mwNotice h3{margin:0 0 6px;font-size:16px}.mwNotice h3 small{margin-left:6px;font-size:11px;font-weight:400;color:var(--muted)}
.mwNotice p{margin:4px 0;font-size:13px;line-height:1.65;color:#dcd8f0}.mwLatest{background:linear-gradient(160deg,#ff5fa826,#8fd8ff1a);border-color:#ff8fc455}.mwLatest h3 em{font-style:normal;color:#ff8fc4;margin-right:4px}
.mwLatest button{margin-top:8px;min-height:40px;padding:6px 16px}
.mwCredits{display:flex;flex-direction:column;gap:14px;text-align:center}.mwLogo{margin:4px 0 2px;display:flex;flex-direction:column;gap:2px}.mwLogo b{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.08em}.mwLogo small{color:#ff8fc4;letter-spacing:.3em;font-size:11px}
.mwCredits h3{margin:0 0 4px;font-size:12px;letter-spacing:.2em;color:#8fd8ff}.mwCredits p{margin:2px 0;font-size:13px;line-height:1.6;color:#e2def5;overflow-wrap:anywhere}.mwAi{font-size:11px!important;color:var(--muted)!important}
/* Floating combat text, buff column, core shield */
#floatLayer{position:fixed;inset:0;pointer-events:none;z-index:7}
.floatText{position:absolute;left:0;top:0;font-weight:800;font-size:18px;white-space:nowrap;text-shadow:0 2px 4px #000,0 0 10px #000a}
#buffBar{position:fixed;left:var(--safeL);top:42%;z-index:6;display:flex;flex-direction:column;gap:5px;pointer-events:none}
#buffBar:empty{display:none}
body:not(.playing) #buffBar{display:none}
.buff{min-width:118px;padding:4px 10px;border-radius:9px;background:#140f2ed9;border:1px solid #ffffff2a;border-left:4px solid var(--c,#8fd8ff);font-size:12px;display:flex;justify-content:space-between;gap:10px}
.buff span{color:var(--muted)}.buff.rage{--c:#e8412e}.buff.guard{--c:#ffc070}.buff.blood{--c:#9a0c12}.buff.ice{--c:#8fd8ff}
.coreHud .bar{position:relative}.coreHud .bar .coreShield{position:absolute;left:0;top:0;height:40%;background:#6ab8ff;box-shadow:0 0 6px #6ab8ff;border-radius:3px}
/* Enchant + probability window */
.gearGold{font-size:13px;font-weight:700;color:#ffd36a;margin-right:auto}
.itemOpts li.enchanted{color:#ffd36a}.itemOpts li em{font-style:normal;font-size:10px;padding:0 5px;margin-left:4px;border-radius:5px;background:#ffd36a33;border:1px solid #ffd36a88}
.probSheet{width:min(860px,calc(100vw - 32px))}
.probStage{font-size:12px;display:flex;align-items:center;gap:6px}.probStage input{width:64px;min-height:30px;border-radius:6px;background:#0d0a1c;border:1px solid #ffffff33;color:#fff;padding:2px 6px}
.probSections{display:grid;gap:10px}.probSection{padding:8px 12px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff14}.probSection.enchant{border-color:#ffd36a66}
.probSection h3{margin:2px 0 6px;font-size:14px;color:#ffd6ec}.probIntro{margin:0 0 6px;font-size:12px;color:#ffd36a}.probSection ul{margin:4px 0 0;padding-left:18px;font-size:12px}
.probTable{width:100%;border-collapse:collapse;font-size:12px}.probTable th,.probTable td{padding:4px 6px;border-bottom:1px solid #ffffff12;text-align:right}.probTable th:first-child,.probTable td:first-child{text-align:left}
/* Voice/chat buttons sit above the enlarged portrait */
body[data-controls] #hud .commsButtons{left:var(--safeL);right:auto;bottom:calc(var(--safeB) + 128px)}
body[data-controls] #hud #chatLog{bottom:calc(var(--safeB) + 176px)}

.itemActions{flex-wrap:wrap}.itemActions button{flex:1 1 auto;min-width:72px;white-space:nowrap}

/* Ranking window (L) */
/* "랭킹창 참고변경건": shared table, existing gear frame / tabs / class portraits / rank insignia. */
#rankSheet{--rankHead:38px;width:min(1080px,calc(100vw - 32px));height:min(680px,88dvh);display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
#rankSheet .gearTop{flex:none}#rankSheet .gearTop h2{font-size:18px}.rankScope{background:transparent;min-height:34px;padding:6px 12px;color:var(--accent)}
.rankHelp{flex:none;font-size:12px;color:var(--muted);margin-bottom:10px}.rankHelp summary{cursor:pointer}.rankHelp p{margin:8px 0;line-height:1.6;max-height:90px;overflow:auto}
.rankLayout{display:grid;grid-template-columns:minmax(0,1fr) 154px;gap:14px;flex:1;min-height:0}.rankScroll{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;border:1px solid #a894ff33;border-radius:8px;background:#130f2be8}
#rankSheet .rankTable{table-layout:fixed;font-variant-numeric:tabular-nums;font-size:12px;line-height:1.4}#rankSheet .rankTable th,#rankSheet .rankTable td{height:46px;padding:6px;text-align:center;white-space:nowrap}#rankSheet .rankTable th{height:var(--rankHead);color:var(--muted);font-weight:500;background:#282047;position:sticky;top:0;z-index:3}
.rankPosCol{width:7%}.rankChangeCol{width:9%}.rankClassCol{width:7%}.rankNameCol{width:24%}.rankValueCol{width:17%}.rankDateCol{width:17%}.rankBadgeCol{width:19%}
#rankSheet .rankTable .rankName{text-align:left;overflow:hidden;text-overflow:ellipsis;font-weight:600}#rankSheet .rankTable td:nth-child(5){text-align:right;font-weight:700}.rankClass img{width:30px;height:30px;object-fit:cover;border-radius:6px;vertical-align:middle;border:1px solid #ffffff26}
#rankSheet .rankPinned td{position:sticky;top:var(--rankHead);z-index:2;background:#3c2354;color:#ffe5f3;border-bottom:1px solid #ff8fc477}.rankMe{display:block;font-size:10px;color:var(--accent)}.rankTable tbody:not(.rankPinned) tr:nth-child(even){background:#ffffff04}.rankBadgeCell .rankInsignia{width:24px;height:24px}.rankBadgeCell span{font-size:11px;margin-left:4px}
.rankChange{font-size:11px;color:var(--muted)}.rankChange.up{color:var(--accent)}.rankChange.down{color:#a894ff}.rankMedal{display:inline-grid;place-items:center;width:28px;height:30px;font-weight:900;background:linear-gradient(135deg,#ff8fc440,#7a5cff40);border:1px solid #ff8fc477;border-radius:50% 50% 40% 40%;box-shadow:0 2px 7px #0005;position:relative}.rankMedal:after{content:'';position:absolute;bottom:-4px;width:12px;height:6px;background:#7a5cff88;clip-path:polygon(0 0,100% 0,100% 100%,50% 65%,0 100%)}.medal1{color:#ffe5f3}.medal2{color:#d7cdff;border-color:#a894ff77}.medal3{color:#b7b1d8;border-color:#b7b1d866}
.rankFilters{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0}.rankFilters>span{color:var(--muted);font-size:12px;padding:0 4px 2px}.rankFilters button{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 10px;background:#282047;border-color:#a894ff33}.rankFilters button.on{background:linear-gradient(120deg,#ff4f9a28,#7a5cff35);border-color:#ff8fc488;color:#ffe5f3}.rankFilters img{width:34px;height:34px;object-fit:cover;border-radius:6px}.rankFilters b{font-size:12px}.rankAll{width:34px;font-size:10px;color:var(--accent)}.rankFooter{display:flex;justify-content:space-between;gap:12px;flex:none;border-top:1px solid #ffffff18;padding-top:10px;margin-top:12px;color:var(--muted);font-size:11px}.rankFooter>span:first-child{color:var(--accent)}#rankSheet .rankTable .rankEmpty{text-align:left;white-space:normal;padding:18px;line-height:1.7}
/* Phone sizing only; phone-fit.js keeps the documented 70% / 800px logical viewport. */
html.phoneFit body[data-controls=touch] #rankSheet{--rankHead:52px;width:min(1500px,calc(100vw - 48px));height:88dvh;max-height:88dvh;zoom:1;padding:20px 24px}
html.phoneFit body[data-controls=touch] #rankSheet .gearTop{margin-bottom:14px;padding-right:64px;gap:16px}html.phoneFit body[data-controls=touch] #rankSheet .gearTop h2{font-size:24px}html.phoneFit body[data-controls=touch] #rankSheet .gearTabs button,html.phoneFit body[data-controls=touch] #rankSheet .rankScope{font-size:20px;min-height:80px;padding:10px 22px}html.phoneFit body[data-controls=touch] #rankSheet .gearClose{font-size:20px;min-height:80px;min-width:80px}
html.phoneFit body[data-controls=touch] #rankSheet .rankLayout{grid-template-columns:minmax(0,1fr) 210px;gap:18px}html.phoneFit body[data-controls=touch] #rankSheet .rankHelp{font-size:18px;margin-bottom:14px}html.phoneFit body[data-controls=touch] #rankSheet .rankTable.rankTable th,html.phoneFit body[data-controls=touch] #rankSheet .rankTable.rankTable td{font-size:20px;height:72px;padding:8px}html.phoneFit body[data-controls=touch] #rankSheet .rankTable.rankTable th{height:var(--rankHead);font-size:18px}html.phoneFit body[data-controls=touch] #rankSheet .rankTable{min-width:1000px}
html.phoneFit body[data-controls=touch] #rankSheet .rankClass img{width:48px;height:48px}html.phoneFit body[data-controls=touch] #rankSheet .rankMedal{width:42px;height:44px}html.phoneFit body[data-controls=touch] #rankSheet .rankChange{font-size:18px}html.phoneFit body[data-controls=touch] #rankSheet .rankMe{font-size:15px}html.phoneFit body[data-controls=touch] #rankSheet .rankBadgeCell .rankInsignia{width:32px;height:32px}html.phoneFit body[data-controls=touch] #rankSheet .rankBadgeCell span{font-size:18px}
html.phoneFit body[data-controls=touch] #rankSheet .rankFilters{gap:6px}html.phoneFit body[data-controls=touch] #rankSheet .rankFilters>span{font-size:18px}html.phoneFit body[data-controls=touch] #rankSheet .rankFilters button{min-height:80px;padding:12px;gap:14px}html.phoneFit body[data-controls=touch] #rankSheet .rankFilters img{width:46px;height:46px}html.phoneFit body[data-controls=touch] #rankSheet .rankFilters b{font-size:20px}html.phoneFit body[data-controls=touch] #rankSheet .rankAll{width:46px;font-size:16px}html.phoneFit body[data-controls=touch] #rankSheet .rankFooter{font-size:18px;padding-top:14px;margin-top:16px}

/* v10.11.22 암살자 틈 (openings, app.js renderOpeningGauge): the gauge as an amber n/5 meter — no stage marks; all five pulse gold. */
#chargeGauge[data-class="assassin"]{--c:#f3b55a}#chargeGauge[data-class="assassin"] :is(.chargeTrack s,.chargeLabels){display:none}
#chargeGauge[data-class="assassin"] .chargeTrack{position:relative}#chargeGauge[data-class="assassin"] .chargeTrack::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 calc(20% - 2px),#0b0718 calc(20% - 2px) 20%)}
#chargeGauge[data-class="assassin"][data-stage="over"]{--c:#ffd36a}#chargeGauge[data-class="assassin"][data-stage="over"] .chargeTrack{animation:chargeFull .3s ease-in-out infinite alternate}
/* Archer charge gauge: teal → sky → white */
#chargeGauge[data-class="archer"]{--c:#12c9b4}#chargeGauge[data-class="archer"][data-stage="2"]{--c:#49b8ff}#chargeGauge[data-class="archer"][data-stage="3"]{--c:#1f4dff}
/* v10.8 한계 당김 (archer-overdraw.js): with the special a 4th segment, stage-3 mark → end, fills in its own violet (stage 4) */
#chargeGauge .odZone,#chargeGauge .mark4,#chargeGauge .l4{display:none}
#chargeGauge[data-class="archer"][data-overdraw] .odZone{display:block;position:absolute;left:var(--m3);right:0;top:0;bottom:0;background:#b13cff26}
#chargeGauge .odFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f4dff,#b13cff);box-shadow:0 0 10px #b13cff}
#chargeGauge[data-class="archer"][data-overdraw] .chargeTrack s{z-index:1}#chargeGauge[data-class="archer"][data-overdraw] .chargeTrack .mark3{left:var(--m3);right:auto}#chargeGauge[data-class="archer"][data-overdraw] .mark4{display:block;right:0}
#chargeGauge[data-class="archer"][data-overdraw] .chargeLabels .l3{left:var(--m3);right:auto;transform:translateX(-50%)}#chargeGauge[data-class="archer"][data-overdraw] .chargeLabels .l4{display:block;left:auto;right:0}
#chargeGauge[data-class="archer"][data-stage="4"]{--c:#b13cff}#chargeGauge[data-class="archer"][data-stage="4"] .chargeTrack{animation:chargeFull .25s ease-in-out infinite alternate}

/* Damage numbers over monsters */
.dmgNum{position:absolute;left:0;top:0;font-weight:900;font-size:21px;letter-spacing:-.02em;color:#fff;white-space:nowrap;text-shadow:0 2px 2px #000,0 0 6px #000,0 0 12px #0009;will-change:transform,opacity;font-variant-numeric:tabular-nums}
.dmgNum.ally{font-size:14px;color:#c8c8d4;opacity:.85}
.dmgNum[data-effect=ice]{color:#c9f2ff}.dmgNum[data-effect=axe]{color:#fff1de}.dmgNum:is([data-effect=arrow],[data-effect=focus],[data-effect=pierce],[data-effect=shock]){color:#c4fff4}.dmgNum[data-effect=rain]{color:#9fe3ff;font-size:17px}
.dmgNum.big{font-size:30px;color:#ffd84a;text-shadow:0 0 10px #ff8a00,0 2px 2px #000,0 0 4px #000}

/* Free look (wheel held): no crosshair over the character */
body.freeLook #crosshair{visibility:hidden}

/* Menu backdrop (user: no game view behind the login / lobby). Login: update notes + common keys on the right.
   Character select / lobby: key art (v10.9: menu-art/login-keyart.webp, from the login on) or the three portraits over a canyon-dusk gradient. */
#menuBackdrop{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 78% 30%,#3a1d3d 0%,#1a1030 42%,#0a0b1c 100%)}
body.playing #menuBackdrop{display:none}
body:not(.playing) #mission{display:none}
#menuBackdrop .mbArt{position:absolute;inset:0;display:none;background:var(--art,none) center/cover no-repeat,radial-gradient(80% 70% at 70% 55%,#d8763a55,transparent 60%),linear-gradient(180deg,#2a1638 0%,#5b2a3a 45%,#b0582e 78%,#3a1a16 100%)}
#menuBackdrop .mbArt:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#070a18ee 0%,#070a18aa 34%,transparent 62%),linear-gradient(0deg,#070a18cc,transparent 30%)}
#menuBackdrop .mbCast{position:absolute;right:3%;bottom:0;display:flex;align-items:flex-end;justify-content:flex-end;height:min(52vh,56vw/3);max-width:60vw}
#menuBackdrop .mbCast img{height:100%;width:auto;aspect-ratio:1;object-fit:cover;margin-left:-4%;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);filter:saturate(1.1) contrast(1.05)}
#menuBackdrop .mbCast img:nth-child(2){height:115%;z-index:1}
#menuBackdrop.hasArt .mbCast{display:none}
body:not([data-account=out]) #menuBackdrop .mbArt{display:block}
#menuBackdrop .mbInfo{position:absolute;right:5%;top:96px;bottom:40px;width:min(560px,44vw);display:none;flex-direction:column;gap:14px}
body[data-account=out] #menuBackdrop .mbInfo{display:flex}
#menuBackdrop .mbInfo section{background:#12102ad9;border:1px solid #ffffff1f;border-radius:16px;padding:16px 18px;box-shadow:0 10px 30px #0008}
#menuBackdrop .mbInfo h3{margin:0 0 10px;font-size:15px;letter-spacing:.04em;color:var(--accent,#8fe8ff)}
#menuBackdrop .mbNotes{flex:1;min-height:180px;overflow:auto;scrollbar-width:thin}#menuBackdrop .mbKeys{flex:none}
#menuBackdrop .mbNotes article{margin-bottom:14px}#menuBackdrop .mbNotes h4{margin:0;font-size:14px}#menuBackdrop .mbNotes h4 small{color:#9aa3b8;font-weight:400;margin-left:6px}
#menuBackdrop .mbNotes b{display:block;font-size:13px;margin:2px 0 6px}#menuBackdrop .mbNotes h5{margin:8px 0 2px;font-size:12px;color:#ffd27a}
#menuBackdrop .mbNotes ul{margin:0;padding-left:18px}#menuBackdrop .mbNotes li{font-size:12px;line-height:1.65;color:#d6dbe8}
#menuBackdrop .mbKeys dl{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;margin:0;font-size:12px}#menuBackdrop .mbKeys dt{text-align:right}#menuBackdrop .mbKeys dd{margin:0;color:#d6dbe8;align-self:center}
#menuBackdrop .mbKeys kbd{display:inline-block;padding:2px 7px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff2e;font-size:11px;white-space:nowrap}
@media (max-width:900px){#menuBackdrop .mbInfo{display:none!important}#menuBackdrop .mbCast{opacity:.45}}
/* v10.9 art (user: "넣어줘 개좋다"; public/menu-art.js). The key art (menu-backdrop.js --art, .hasArt once loaded) behind the
   login, character select and lobby — never in battle (body.playing hides #menuBackdrop) — centred, so a portrait crop keeps the
   wizard; a light shade where the login text sits. The loading pictures behind the boot / join cards: the card on the picture's
   empty panel (data-art-side), at the bottom on a portrait screen (where the <picture> swaps in the tall one). */
#menuBackdrop.hasArt .mbArt{display:block;background:var(--art) 50% 50%/cover no-repeat,#1a1030}
#menuBackdrop.hasArt .mbArt:after{background:linear-gradient(90deg,#0b0818b3 0%,#0b081859 30%,transparent 52%),linear-gradient(0deg,#0b081899,transparent 26%)}
@media (orientation:portrait) and (max-width:600px){#menuBackdrop.hasArt .mbArt:after{background:linear-gradient(180deg,#0b0818a6,#0b081873 40%,#0b0818b3)}}
.loadCard>:not(.loadNotes){flex:none}/* the long v10.9 notes had squeezed the 14 px progress bar to 2 px */
.loadArt{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.loadArt img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease-out}.loadArt img.in{opacity:1}
#loadingScreen[data-art-side],.joinLoading[data-art-side]{grid-template-columns:minmax(0,1fr);padding:16px max(16px,3.5%)}
#loadingScreen[data-art-side=left],.joinLoading[data-art-side=left]{justify-items:start}
#loadingScreen[data-art-side=right],.joinLoading[data-art-side=right]{justify-items:end}
#loadingScreen[data-art-side] .loadCard,.joinLoading[data-art-side] .jlCard{width:clamp(280px,40%,600px);padding:18px 20px;border-radius:18px;background:linear-gradient(160deg,#1d1446e8,#0c0820f0);border:1px solid #ffffff24;box-shadow:0 18px 50px #000b}
.joinLoading[data-art-side] .jlCard{width:clamp(280px,38%,460px)}
@media (orientation:landscape) and (max-height:560px){#loadingScreen[data-art-side] .loadCard{padding:10px 12px;gap:8px}#loadingScreen[data-art-side] .loadTitle b{font-size:20px}#loadingScreen[data-art-side] .loadNotes{min-height:80px}.joinLoading[data-art-side] .jlCard{padding:12px 14px}}
@media (orientation:portrait){
 #loadingScreen[data-art-side],.joinLoading[data-art-side]{justify-items:center;align-items:end;padding:12px 12px max(12px,env(safe-area-inset-bottom))}
 #loadingScreen[data-art-side] .loadCard,.joinLoading[data-art-side] .jlCard{width:min(640px,100%);padding:12px 14px}
 #loadingScreen[data-art-side] .loadCard{max-height:50dvh}#loadingScreen[data-art-side] .loadNotes{min-height:72px}}

/* Title on one line (user) */
#lobby h1{white-space:nowrap;font-size:clamp(28px,2.9vw,44px)}

/* Login progress window (login-progress.js) */
.loginProgress{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#060b10b3;backdrop-filter:blur(3px);padding:16px}
.loginProgress[hidden]{display:none}
.loginProgressCard{width:min(420px,100%);padding:22px 22px 18px;border-radius:16px;background:linear-gradient(160deg,#16303af7,#0d1a21f7);border:1px solid #ffffff26;box-shadow:0 18px 50px #000a;color:#e9f1f2}
.loginProgressCard h2{margin:0 0 14px;font-size:18px;letter-spacing:.02em}
.loginProgressBar{height:12px;border-radius:999px;background:#ffffff14;overflow:hidden;border:1px solid #ffffff1f}
.loginProgressBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff7fb5,#ffd36e);box-shadow:0 0 12px #ff9ac7aa;transition:width .25s ease-out}
.loginProgressPct{display:block;margin:8px 0 12px;font-size:26px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;color:#ffe1ef}
.loginSteps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.loginSteps li{display:flex;align-items:center;gap:9px;font-size:13px;color:#8fa3a7}
.loginSteps li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff12;border:1px solid #ffffff26;font-size:11px;font-weight:700}
.loginSteps li.done{color:#bfe9c6}.loginSteps li.done span{background:#3fbf6a;border-color:#3fbf6a;color:#08140c}
.loginSteps li.now{color:#fff}.loginSteps li.now span{background:#ff7fb5;border-color:#ff7fb5;color:#20070f;animation:loginPulse 1s ease-in-out infinite}
.loginSteps li.error{color:#ffb4b4}.loginSteps li.error span{background:#e04848;border-color:#e04848;color:#fff}
.loginProgressDetail{margin:0;min-height:1.4em;font-size:12.5px;line-height:1.5;color:#b9c7ca}
.loginProgressCard.failed .loginProgressBar i{background:#e04848;box-shadow:none}
.loginProgressCard button{margin-top:14px;width:100%}
@keyframes loginPulse{50%{box-shadow:0 0 0 5px #ff7fb533}}
@media (prefers-reduced-motion:reduce){.loginSteps li.now span{animation:none}.loginProgressBar i{transition:none}}
/* Codex (도감) tab inside the probability sheet (prob-ui.js) */
.probViews{display:flex;gap:4px;padding:3px;border-radius:10px;background:#ffffff0d;border:1px solid #ffffff1a}
.probViews button{min-height:30px;padding:4px 14px;border-radius:8px;background:transparent;border:0;color:#c9d3d6}
.probViews button.on{background:#ff7fb5;color:#20070f;font-weight:700}
.codexNav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.codexNav button{min-height:28px;padding:3px 10px;border-radius:999px;font-size:12px;background:#ffffff0f;border:1px solid #ffffff24}
.codexNav button:hover{border-color:#ff7fb5}
.codexSection{scroll-margin-top:8px}
.codexTable{margin:6px 0}
.codexTable td,.codexTable th{text-align:left;vertical-align:top;line-height:1.45}
.codexTable td{white-space:normal}
.codexSection ul{margin:6px 0 2px;padding-left:18px;font-size:12px;line-height:1.55}.codexTable td:first-child,.codexTable th:first-child{white-space:nowrap}
.skillSlot.stomp{outline:2px solid #ffb347;box-shadow:0 0 14px #ffb34788}.skillSlot.stomp b{color:#ffd28a}
.skillSlot.cascade{outline:2px solid #7fd4ff;box-shadow:0 0 14px #7fd4ff88}.skillSlot.cascade b{color:#c8f0ff}
/* v10.5 key settings (key-settings-ui.js) */
.keySheet{width:min(640px,calc(100vw - 32px))}
.keySheet .gearTop h2{margin:0;flex:1}
.keyHelp{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:#ff8fc41a;font-size:12px;line-height:1.5}
.keyRows{display:grid;gap:6px}
.keyRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff14}
.keyRow.listening{border-color:var(--accent);background:#ff8fc41f}
.keyName{flex:1;min-width:0;display:grid;gap:3px}
.keyName b{font-size:13px}.keyName b small{font-weight:400;color:var(--muted);font-size:10px}
.keySkills{display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--muted);font-size:11px}
.keySkills .me{color:#ffd6ec;font-weight:700}
.keyCap{min-width:112px;min-height:40px;font-weight:700;font-size:14px}
.keyRow.listening .keyCap{background:var(--accent);color:#292920;border:0;animation:keyPulse 1s ease-in-out infinite}
@keyframes keyPulse{50%{opacity:.65}}
.keyMsg{min-height:18px;margin:8px 0 4px;font-size:12px;color:#ffd6ec}
.keyFoot{display:flex;align-items:center;gap:10px}.keyFoot small{flex:1;color:var(--muted);font-size:10px;line-height:1.4}.keyFoot button{min-height:36px;white-space:nowrap}
@media(max-width:560px){.keyRow{flex-wrap:wrap}.keyCap{width:100%}.keyFoot{flex-direction:column;align-items:stretch}}
/* v10.5 loot log (loot-log.js): right-middle, set / unique and up, newest at the bottom, ten at most; hidden outside a room */
#lootLog{position:fixed;right:var(--safeR);top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:4px;width:min(270px,calc(100vw - 32px));pointer-events:none}
#lootLog[hidden],#hud[hidden]~#lootLog{display:none}
#lootLog .llEntry{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border-radius:10px;background:#140f2ecc;border:1px solid #ffffff1f;border-left:3px solid #5fd068;animation:llIn .25s ease-out;transition:opacity .25s,transform .25s}
#lootLog .llEntry.unique{border-left-color:#ff9d47}
#lootLog .llEntry.mine{background:#2a1a4ee6;box-shadow:0 0 0 1px #ff8fc455}
#lootLog .llEntry.out{opacity:0;transform:translateX(20px)}
#lootLog .llIcon svg{display:block}
#lootLog .llText{display:grid;min-width:0}
#lootLog .llText b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
#lootLog .llText small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes llIn{from{opacity:0;transform:translateX(24px)}}
body[data-controls=touch] #lootLog{width:min(200px,42vw);gap:3px}body[data-controls=touch] #lootLog .llIcon{display:none}body[data-controls=touch] #lootLog .llText b{font-size:10px}body[data-controls=touch] #lootLog .llText small{font-size:9px}/* v10.5 boss damage meter (boss-meter.js): left middle above the buff chips, from the first boss hit until 5 s after the kill */
#leftStack{position:fixed;left:var(--safeL);top:42%;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
#leftStack #buffBar{position:static}
body:not(.playing) #leftStack{display:none}
#bossMeter{width:236px;padding:8px;border-radius:12px;background:#140f2ee0;border:1px solid #ffffff26;box-shadow:0 6px 20px #0006;display:grid;gap:4px;font-size:12px;animation:llIn .2s ease-out}
#bossMeter[hidden]{display:none}
#bossMeter.dead{border-color:#ffd47a80}
.bmHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}.bmHead b{font-size:12px;color:#ffd6ec}.bmHead small{font-size:10px;color:var(--muted)}
.bmRow{position:relative;display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:7px;background:#ffffff0d;overflow:hidden}
.bmRow>i{position:absolute;left:0;top:0;bottom:0;background:var(--c,#7a5cff55);transition:width .25s}
.bmRow>span{position:relative}
.bmRow[data-class=wizard]{--c:#56b8ff55}.bmRow[data-class=berserker]{--c:#e8412e55}.bmRow[data-class=archer]{--c:#5fd06855}
.bmRow.me{box-shadow:inset 0 0 0 1px #ff8fc4cc}.bmRow.me .bmName{color:#ffd6ec;font-weight:700}
.bmRank{width:14px;color:var(--muted);font-size:10px;text-align:center}
.bmName{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bmName small{margin-left:4px;font-size:9px;color:var(--muted)}
.bmDmg{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}.bmDmg small{margin-left:4px;font-size:9px;color:var(--muted);font-weight:400}
body[data-controls=touch] #bossMeter{width:176px;padding:6px;font-size:10px}body[data-controls=touch] .bmName small{display:none}/* v10.5 Iron Bulwark 4: blocked damage reflected to the attacker */
.dmgNum[data-effect=reflect]{color:#ffc070}
/* v10.6 mobile auto-combat HUD */
/* Phones only (user: auto combat must never run on desktop). Touch layout, body[data-controls=touch], landscape first:
   LEFT HALF = joystick, RIGHT HALF = camera (v10.6 user: "좌측 조이스틱 우측 시점변경"). #moveArea is the whole left half and
   #lookArea the whole right half, from just under the header row (44 px) down to the bottom edge — no bottom cut, the strip
   beside the skill bar turns the camera too. A finger anywhere on the left half brings the stick under it (app.js); at rest
   the stick waits bottom-left. Both are in #mobile (z 10), under #hud (z 11): the HUD buttons (skill slots, dodge, 장비 /
   스킬 / 정보 / ?, 음성 / 채팅) and the header (설정, z 25) keep their taps; everything else in #hud passes touches through.
   The skill bar (body.skillBar-normal / -small / -hidden, touch-hud.js, settings → 자동 전투 → 스킬 칸; default 작게):
   보통 = a compact icon row on the bottom edge right of the resting stick; 64 px are reserved for that row (44 px slots, and
   the 60 px round dodge button set 18 px apart so a thumb aimed at it does not land on the last skill). The portrait
   (.playerHud) and #touchHint sit above the row and #bidStack ends above it. 작게 / 숨김: see the rules further down.
   Dodge (.autoManual) is always the player's own button, auto combat on or off, and never hidden. With auto combat on
   (body[data-controls=touch].autoCombat; bindAutoCombatClass only sets the class with {touch:true}) each listed skill shows
   AUTO or OFF (.autoOff) top-left and a LONG PRESS toggles it (.autoHold while it runs). No auto rule may match a desktop
   body. The top buttons (장비 / 스킬 / 정보 / ? / 설정) grow to thumb size; 확률 and 랭킹 stay in the lobby. */
body[data-controls=touch] #mobile #moveArea,body[data-controls=touch] #mobile #lookArea{top:calc(env(safe-area-inset-top) + 44px);bottom:0;width:50%;height:auto}
body[data-controls=touch] #mobile #moveArea{left:0;right:auto}
body[data-controls=touch] #mobile #lookArea{right:0;left:auto}
body[data-controls=touch] #mobile #stick{left:calc(env(safe-area-inset-left) + 74px);top:calc(100% - env(safe-area-inset-bottom) - 74px);bottom:auto;transform:translate(-50%,-50%)}
@media (orientation:landscape) and (max-height:600px){body[data-controls=touch] #mobile #stick{left:calc(env(safe-area-inset-left) + 68px);top:calc(100% - env(safe-area-inset-bottom) - 68px)}}
body[data-controls=touch] #pcControls,body[data-controls=touch] #skillBar kbd{display:none!important}
body[data-controls=touch] #hud #skillBar{left:calc(var(--safeL) + 150px);right:auto;bottom:var(--safeB);transform:none;gap:6px;align-items:center}
body[data-controls=touch] #hud .skillSlot{width:44px;height:44px;padding:0;border-radius:12px;justify-content:center}
body[data-controls=touch] #hud .skillSlot.hasIcon b{display:none}
body[data-controls=touch] #hud .skillSlot:not(.hasIcon) b{font-size:10px;line-height:1.1;padding:0 2px}
body[data-controls=touch] #hud .skillSlot span{font-size:15px}
body[data-controls=touch] #hud .skillSlot em{top:auto;bottom:1px;right:3px;font-size:10px}
body[data-controls=touch] #hud .skillSlot[data-skill=dodge]{width:60px;height:60px;margin-left:18px;border-radius:50%;border-color:#56e4ffaa}
body[data-controls=touch] #hud .skillSlot:is([data-skill=dodge],.autoManual){pointer-events:auto;cursor:var(--game-cursor-pointer,pointer);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body[data-controls=touch] #hud .playerHud{left:calc(var(--safeL) + 150px);bottom:calc(var(--safeB) + 64px)}
body[data-controls=touch] #mobile #touchHint{bottom:calc(var(--safeB) + 64px);left:45%;right:var(--safeR)}
body[data-controls=touch] #bidStack{max-height:calc(100dvh - 120px - var(--safeB) - 64px)}
body[data-controls=touch] #hud .loadoutButtons{top:4px;right:calc(var(--safeR) + 64px);gap:6px}
body[data-controls=touch] #hud .loadoutButtons button{min-width:48px;min-height:44px;padding:6px 10px;font-size:13px;border-radius:12px}
body[data-controls=touch] #hud :is(#probHudBtn,#rankHudBtn){display:none}
body[data-controls=touch].playing #settingsBtn{min-width:56px;min-height:44px;font-size:14px}
/* Narrow landscape phones (750 px wide or less): the four top buttons (장비 / 스킬 / 정보 / ?, about 212 px ending 76 px from
   the right edge) would run into the centred enemy counter (.operationHud: 155 px wide, about 7-45 px down), so they drop
   just below it. Portrait play is covered by the rotate hint. */
@media (orientation:landscape) and (max-width:750px){body[data-controls=touch] #hud .loadoutButtons{top:56px}}
/* The ? button (app.js, touch only): reopens the controls guide. Round, 44 px. */
body:not([data-controls=touch]) #touchGuideBtn{display:none}
body[data-controls=touch] #hud .loadoutButtons #touchGuideBtn{min-width:44px;width:44px;min-height:44px;padding:0;border-radius:50%;font:800 19px/1 Arial,sans-serif;color:#ffe1ad;border-color:#ffe1ad80}
/* Settings menu → 자동 전투 (#autoSkillsBtn): phones only. */
body:not([data-controls=touch]) #autoSkillsBtn{display:none}
/* AUTO / OFF corner badges and the long press: phones with auto combat on only. .autoHold fills the slot from the bottom
   over the 450 ms the press needs (auto-skill-settings.js AUTO_HOLD_MS). */
body[data-controls=touch].autoCombat #hud .skillSlot::after{content:'AUTO';position:absolute;z-index:3;top:2px;left:2px;padding:1px 3px;border-radius:5px;font:800 8px/1.1 Arial,sans-serif;letter-spacing:.03em;color:#062012;background:#6fe3a2e6;box-shadow:0 1px 2px #0008;pointer-events:none}
body[data-controls=touch].autoCombat #hud .skillSlot.autoOff::after{content:'OFF';color:#fff;background:#6f7680eb}
body[data-controls=touch].autoCombat #hud .skillSlot:is([data-skill=dodge],.autoManual)::after{content:none}
body[data-controls=touch].autoCombat #hud .skillSlot.autoOff{border-style:dashed}
body[data-controls=touch].autoCombat #hud .skillSlot.autoOff .slotIcon{filter:grayscale(1) brightness(.5)}
body[data-controls=touch].autoCombat #hud .skillSlot{pointer-events:auto;cursor:var(--game-cursor-pointer,pointer);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform .08s}
body[data-controls=touch].autoCombat #hud .skillSlot:active{transform:scale(.92)}
body[data-controls=touch].autoCombat #hud .skillSlot.autoHold::before{content:'';position:absolute;inset:0;z-index:3;background:#ffe1ad4d;transform-origin:50% 100%;animation:autoHoldFill .45s linear both;pointer-events:none}
@keyframes autoHoldFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Skill bar size (touch-hud.js; body.skillBar-* is only ever set on touch). 작게 (the default): a row of 28 px icons centred on
   the bottom edge, out of both thumbs' way; the cooldown shade and number still show, the AUTO / OFF badge shrinks to a
   6 px dot (green = auto, grey = off) and the long press still works. 숨김: every slot but dodge is hidden. In both, the
   dodge button — the phone's only manual action — stays big (64 px) and moves to the bottom-right corner under the right
   thumb (absolute inside the full-width #skillBar, which has no transform); #bidStack ends above it. 보통: the rules above. */
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud #skillBar{left:0;right:0;justify-content:center;gap:4px}
body[data-controls=touch].skillBar-small #hud .skillSlot{width:28px;height:28px;border-radius:8px;border-width:1px;box-shadow:none}
body[data-controls=touch].skillBar-small #hud .skillSlot span{font-size:12px}
body[data-controls=touch].skillBar-small #hud .skillSlot em{bottom:0;right:1px;font-size:8px}
body[data-controls=touch].skillBar-small #hud .skillSlot:not(.hasIcon) b{font-size:7px;padding:0 1px}
body[data-controls=touch].skillBar-small.autoCombat #hud .skillSlot:not([data-skill=dodge],.autoManual)::after{content:'';top:2px;left:2px;width:6px;height:6px;padding:0;border-radius:50%}
body[data-controls=touch].skillBar-small.autoCombat #hud .skillSlot.autoOff:not([data-skill=dodge],.autoManual)::after{content:''}
body[data-controls=touch].skillBar-small.autoCombat #hud .skillSlot:active{transform:scale(.88)}
body[data-controls=touch].skillBar-hidden #hud .skillSlot:not([data-skill=dodge]){display:none}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud .skillSlot[data-skill=dodge]{position:absolute;right:calc(var(--safeR) + 14px);bottom:10px;width:64px;height:64px;margin:0;border-radius:50%;border-width:1.5px;box-shadow:0 4px 16px #0006}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud .skillSlot[data-skill=dodge] span{font-size:16px}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud .skillSlot[data-skill=dodge]:not(.hasIcon) b{font-size:11px;padding:0 2px}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #bidStack{max-height:calc(100dvh - 120px - var(--safeB) - 86px)}
/* Portrait phone (#rotateHint, index.html). Menus: a slim banner (z 19) on the bottom edge, about 64 px tall — the lobby
   panel stops above it so its bottom stays reachable. Play: a blocking overlay at z-index 24 — over the HUD (11) and the
   touch areas (10), under the header (25: 설정 → 로비로), #bidStack (25), #lootPopup (26), the windows (30) and the toast (40),
   so a player whose phone has rotation lock on is never stuck. */
.rotateHint{display:none}
@media (orientation:portrait) and (max-width:600px){
 body[data-controls=touch] .rotateHint{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:19;flex-direction:column;align-items:center;gap:2px;padding:8px 16px calc(env(safe-area-inset-bottom) + 8px);background:#0b1118e6;border-top:1px solid #f3c68655;text-align:center;pointer-events:none}
 body[data-controls=touch]:not(.playing) .rotateHint small:not(.rotateLock){display:none}
 body[data-controls=touch]:not(.playing) #lobby.panel{max-height:calc(100dvh - 80px - 64px - env(safe-area-inset-bottom))}
 body[data-controls=touch].playing .rotateHint{top:0;z-index:24;justify-content:center;gap:14px;background:#070b12f2;border:0;pointer-events:auto;touch-action:none}}
.rotateHint b{font-size:16px;line-height:1.3;color:#ffe1ad}.rotateHint small{font-size:12px;line-height:1.5;color:#c5d1d0}.rotateHint .rotateLock{font-size:11px;color:#f3c686}
.rotateHint i{display:none;width:30px;height:50px;border:3px solid var(--accent);border-radius:8px;animation:rotateHintTurn 2s ease-in-out infinite}
body.playing .rotateHint i{display:block}body.playing .rotateHint b{font-size:22px}body.playing .rotateHint .rotateLock{font-size:12px}
@keyframes rotateHintTurn{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
/* Auto-skill settings window (auto-skill-settings.js, #autoSkillSheet): the whole row is the switch (44 px or taller
   everywhere). The title bar is sticky, so ✕ stays reachable while the list scrolls on a small screen. */
.autoSheet{--autoPad:16px;width:min(640px,calc(100vw - 32px));padding:0 var(--autoPad) 14px}
.autoSheet .gearTop{position:sticky;top:0;z-index:2;margin:0 calc(-1 * var(--autoPad)) 10px;padding:10px var(--autoPad) 8px;background:#1c1644f7;border-bottom:1px solid #ffffff14}
.autoSheet .gearTop h2{margin:0;flex:1}.autoSheet .gearClose{min-width:44px;min-height:44px}
.autoNote{margin:14px 0 8px;font-size:14px;line-height:1.5;color:#ffe1ad}
.autoWarn{margin:0 0 10px;padding:8px 12px;border-radius:10px;border:1px solid #ffb34766;background:#ffb3471a;color:#ffd9a0;font-size:12px;line-height:1.45}
.autoRow{width:100%;min-height:56px;margin:0;padding:8px 12px;flex-wrap:nowrap;text-align:left;font-weight:400;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.autoRow .keyName b{font-size:14px;font-weight:700}.autoRow .keySkills{display:block;font-size:11px;line-height:1.35}
.autoIcon{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;background:#0f0b22}
.autoIcon .skillIcon{display:block;width:40px;height:40px;border:0;border-radius:0;box-shadow:none}
.autoSwitch{flex:none;position:relative;width:48px;height:28px;border-radius:14px;background:#3a4650;border:1px solid #ffffff30;transition:background .15s,border-color .15s}
.autoSwitch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#c9d1d4;box-shadow:0 1px 3px #0009;transition:transform .15s}
.autoRow[aria-checked=true] .autoSwitch{background:#2f9e62;border-color:#8ff0b8aa}.autoRow[aria-checked=true] .autoSwitch i{transform:translateX(20px);background:#fff}
.autoState{flex:none;min-width:28px;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);text-align:center}.autoRow[aria-checked=true] .autoState{color:#9ff0a8}
.autoRow[aria-checked=false] .autoIcon{filter:grayscale(1) brightness(.6)}.autoRow[aria-checked=false] .keyName b{color:#b9c2c6}
.autoMaster{min-height:60px;margin:0 0 10px;background:#ff8fc414;border-color:#ffd6ec40}.autoMaster .keyName b{font-size:15px}
.autoTabs{margin:0 0 8px}.autoTabs button{flex:1;min-height:44px;font-size:14px}.autoTabs button small{font-size:11px;font-weight:400;color:inherit;opacity:.8}
.autoRows{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.autoRows.masterOff .autoRow{opacity:.55}
.autoSheet .keyFoot button{min-height:44px}
/* 스킬 칸 보통 / 작게 / 숨김 (a radio group of 44 px buttons) and 조작 안내, right under the master switch (touch only). */
.autoHud{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;padding:8px 10px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff1a}
.autoHudLabel{font-size:13px;font-weight:700;white-space:nowrap}
.autoSeg{display:flex;flex:1 1 200px;min-width:0;gap:3px;padding:3px;border-radius:12px;background:#0f0b22;border:1px solid #ffffff26}
.autoSeg button{flex:1;min-width:0;min-height:44px;margin:0;padding:6px 8px;border:0;border-radius:9px;background:transparent;box-shadow:none;font-size:13px;color:#c9c3ea;touch-action:manipulation}
.autoSeg button[aria-checked=true]{background:#2f9e62;color:#fff}
.autoGuideBtn{min-height:44px;white-space:nowrap}
.autoHudNote{flex-basis:100%;font-size:11px;line-height:1.35;color:var(--muted)}
@media (orientation:landscape) and (max-height:500px){.autoHud{margin-bottom:6px;padding:4px 8px}.autoHudNote{display:none}}
/* Controls guide (touch-hud.js TouchGuide, #touchGuide, phones only — created on first use, appended to <body>). Laid out
   over the real controls: the two dashed halves are #moveArea (left, cyan) and #lookArea (right, pink); rings with tags
   mark the skill row, the dodge button and 설정 (measured when shown). The list and 확인 sit between the half labels and
   the bottom strip (skill row / dodge). z-index 23: over the HUD (11) and the touch areas (10), under the rotate hint (24),
   the header (25, 설정 stays live), the loot prompts (25 / 26), the windows (30) and the toast (40). Any tap closes it. */
.touchGuide{position:fixed;inset:0;z-index:23;background:#05030fc4;color:#f4f1ff;text-shadow:0 1px 3px #000;cursor:var(--game-cursor-pointer,pointer);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;animation:tgIn .18s ease-out}
.touchGuide[hidden],.touchGuide [hidden]{display:none}
@keyframes tgIn{from{opacity:0}}
.tgHalf{position:absolute;top:calc(env(safe-area-inset-top) + 46px);bottom:6px;width:calc(50% - 9px);border:2px dashed;border-radius:18px;pointer-events:none}
.tgHalf.tgL{left:6px;border-color:#56e4ff99;background:#56e4ff0f}
.tgHalf.tgR{right:6px;border-color:#ff8fc499;background:#ff8fc40f}
.tgZone{position:absolute;top:calc(env(safe-area-inset-top) + 54px);max-width:calc(50% - 40px);display:grid;gap:2px;line-height:1.25}
.tgZone.tgL{left:calc(var(--safeL) + 8px);text-align:left}
.tgZone.tgR{right:calc(var(--safeR) + 8px);text-align:right}
.tgZone strong{font-size:17px}
.tgZone b{font-family:var(--display);font-weight:400;letter-spacing:.06em}
.tgZone.tgL b{color:#56e4ff}.tgZone.tgR b{color:#ff8fc4}
.tgZone small{font-size:11px;color:#d6d0f5}
.tgBody{position:absolute;left:var(--safeL);right:var(--safeR);top:calc(env(safe-area-inset-top) + 98px);bottom:calc(var(--safeB) + 80px);display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.tgInner{margin:auto;width:min(640px,100%);display:grid;justify-items:center;gap:8px}
.tgTitle{margin:0;font:20px var(--display);color:#ffe1ad}
.tgItems{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tgItems li{padding:6px 10px;border-radius:10px;background:#1c1644eb;border:1px solid #a894ff44;text-align:left;font-size:12px;line-height:1.3}
.tgItems b{display:block;font-size:13px;color:#ffe1ad}
.tgItems span{display:block;color:#e6e1ff}
.tgFoot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px}
.tgOk{min-width:150px;min-height:48px;font-size:17px}
.tgFoot small{font-size:11px;color:#d6d0f5}
.tgMark{position:absolute;pointer-events:none}
.tgRing{position:absolute;inset:0;border:2px solid #ffe1ad;border-radius:14px;box-shadow:0 0 0 3px #ffe1ad33,0 0 18px #ffe1ad66;animation:tgPulse 1.4s ease-in-out infinite}
.tgMark[data-mark=dodge] .tgRing{border-radius:50%}
.tgTag{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:#ffe1ad;color:#231b10;font-size:11px;font-weight:800;line-height:1.3;white-space:nowrap;text-shadow:none;box-shadow:0 2px 8px #0008}
.tgMark.tgAlignL .tgTag{left:0;transform:none}
.tgMark.tgAlignR .tgTag{left:auto;right:0;transform:none}
.tgMark.tgBelow .tgTag{bottom:auto;top:calc(100% + 6px)}
.tgMark[data-place=side] .tgTag{top:50%;bottom:auto;left:auto;right:calc(100% + 8px);transform:translateY(-50%)}
@keyframes tgPulse{50%{box-shadow:0 0 0 6px #ffe1ad22,0 0 24px #ffe1ad88}}
@media (max-height:420px){.tgTitle{display:none}}
@media (max-width:560px){.tgItems{grid-template-columns:1fr}.tgZone{max-width:calc(50% - 24px)}.tgZone strong{font-size:14px}}
body[data-controls=touch] .autoSheet{--autoPad:14px;padding-bottom:10px;max-height:calc(100dvh - 12px)}
/* Narrow phones: the switch alone shows the state (aria-checked carries it for screen readers). */
@media (max-width:420px){.autoState{display:none}.autoRow{padding:8px 10px}}
/* Landscape phones: three compact columns (icon, name, switch), no hint lines, rows still 48 px. */
@media (orientation:landscape) and (max-height:500px){.autoSheet{width:min(760px,calc(100vw - 24px))}.autoSheet .gearTop{padding-top:6px;padding-bottom:4px;margin-bottom:6px}.autoSheet .keyMsg{min-height:0;margin:4px 0}
 .autoRows{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.autoRow{min-height:48px;padding:4px 8px;gap:8px}.autoRow .keySkills,.autoState{display:none}.autoIcon,.autoIcon .skillIcon{width:32px;height:32px}
 .autoMaster{min-height:48px;margin-bottom:6px}.autoWarn{margin-bottom:6px;padding:6px 10px}.autoTabs{margin-bottom:6px}}
@media (prefers-reduced-motion:reduce){.touchGuide,.tgRing{animation:none}.autoSwitch,.autoSwitch i{transition:none}.rotateHint i{animation:none;transform:rotate(-90deg)}body[data-controls=touch].autoCombat #hud .skillSlot{transition:none}body[data-controls=touch].autoCombat #hud .skillSlot.autoHold::before{animation:none}}
/* v10.6 phone landscape compact HUD (user: "가로화면 기준으로 자잘한 UI 작게 만들어 HUD랑"). Phones only: every rule is
   body[data-controls=touch], landscape up to 600 px tall (desktop at any size and portrait phones are untouched). The small
   widgets shrink by about a third; anything a thumb presses stays 32 px or taller, text stays about 10 px or larger (a few
   secondary labels that were already 9 px stay 9 px), and the stick and the dodge button keep their size. Layout (844 x 390):
     top row, y 2-34 .. STAGE + clock | 음성 채팅 | 남은 적 (centre) | 장비 스킬 정보 ? | 설정 (header 36 px)
     left column ...... party (x 12-158) from y 40; chat log above the resting stick (it keeps the newest lines in view)
     left-centre ...... #leftStack (boss meter, buffs) stacked upwards from just above the portrait (x 166-316)
     bottom ........... portrait 48 px at x 162 over the skill row. 작게: 28 px icons centred, dodge 64 px bottom-right;
                        보통: 40 px icons + the 60 px dodge from x 162. Charge gauge right of the portrait.
     right ............ bid prompts from y 40 (the loot log fades out while one is open), loot log right-middle (newest 5)
     centre ........... the brief ones: hint under the enemy counter, toast, loot pop-up, countdown at 34 %.
   The controls guide (touch-hud.js) measures its rings when it opens (and again when 스킬 칸 changes), so they follow these
   positions. The first four rules are review fixes for every phone size:
   - the top buttons paint over #prepPanel (z 6), so 장비 / 스킬 / 정보 / ? / 음성 / 채팅 stay tappable between stages;
   - bid cards without buttons (auto-bid) let swipes through to the camera half and the guide, and fade under the guide;
   - guide tags paint over the guide's own list. */
body[data-controls=touch] #hud :is(.loadoutButtons,.commsButtons){z-index:7}
body[data-controls=touch] #bidStack .bidCard:not(:has([data-bid])){pointer-events:none}
body[data-controls=touch]:has(#touchGuide:not([hidden])) #bidStack{opacity:.25}
body[data-controls=touch] .tgMark{z-index:1}
/* Guide on screens 360 px tall or less: the list and 확인 fit (no zone notes, list starts higher, tighter items). */
@media (orientation:landscape) and (max-height:360px){
body[data-controls=touch] .tgZone small{display:none}
body[data-controls=touch] .tgBody{top:calc(env(safe-area-inset-top) + 80px)}
body[data-controls=touch] .tgInner{gap:6px}
body[data-controls=touch] .tgItems{gap:4px}
body[data-controls=touch] .tgItems li{padding:4px 8px;line-height:1.2}
body[data-controls=touch] .tgOk{min-height:44px;font-size:16px}
}
@media (orientation:landscape) and (max-height:600px){
body[data-controls=touch] header{height:36px;min-height:36px;padding:2px var(--safeR) 2px var(--safeL)}
body[data-controls=touch] .brand{font-size:16px;gap:5px}
body[data-controls=touch] .brand span{font-size:10px}
body[data-controls=touch] .live{gap:4px}
body[data-controls=touch] #settingsBtn,body[data-controls=touch].playing #settingsBtn{min-width:44px;min-height:32px;padding:3px 8px;font-size:11px;border-radius:10px}
body[data-controls=touch] #settingsMenu{top:38px}
body[data-controls=touch] .stage{top:3px}
body[data-controls=touch] .stage strong{font-size:17px;line-height:1.15}
body[data-controls=touch] .stage .stageLabel{margin-right:4px;font-size:10px}
body[data-controls=touch] #roundClock{margin-top:1px;font-size:10px;line-height:12px}
body[data-controls=touch] #hud .operationHud{top:3px;width:104px;padding:3px 8px 4px;border-radius:9px}
body[data-controls=touch] #hud .remainingTitle{gap:4px;font-size:10px}
body[data-controls=touch] #hud .remainingTitle b{font-size:17px}
body[data-controls=touch] #hud .commsButtons{left:calc(var(--safeL) + 80px);top:3px;bottom:auto;gap:4px}
body[data-controls=touch] #hud .commsButtons button{min-width:40px;min-height:32px;padding:3px 8px;font-size:11px;border-radius:9px}
body[data-controls=touch] #hud .loadoutButtons{top:2px;right:calc(var(--safeR) + 50px);gap:4px}
body[data-controls=touch] #hud .loadoutButtons button{min-width:38px;min-height:32px;padding:3px 7px;font-size:11px;border-radius:9px}
body[data-controls=touch] #hud .loadoutButtons #touchGuideBtn{min-width:32px;width:32px;height:32px;min-height:32px;padding:0;font:800 15px/1 Arial,sans-serif}
body[data-controls=touch] #hud #party{top:90px/* v10.14.0: under the own HP row (.playerHud 42–84, 얼음 충전 on top of it) — at 40px it covered it */;left:var(--safeL);width:146px;gap:3px;font-size:10px;line-height:1.3}
body[data-controls=touch] #hud #party .partyCount{margin:0;font-size:10px}
body[data-controls=touch] #hud #party .ally{padding:2px 6px 3px;border-radius:7px}
body[data-controls=touch] #hud #party .allyTop{gap:4px}
body[data-controls=touch] #hud #party .allyTop svg{width:12px;height:12px}
body[data-controls=touch] #hud #party .allyTop small{display:none}
body[data-controls=touch] #hud #party .allyTop em{padding:0 3px;border-radius:5px;font-size:10px}
body[data-controls=touch] #hud #party .allyHp{height:10px;margin-top:2px;border-radius:5px}
body[data-controls=touch] #hud #party .allyHp span{font-size:9px;line-height:10px}
body[data-controls=touch] #hud #chatLog{left:var(--safeL);bottom:calc(var(--safeB) + 112px);max-width:146px;max-height:38px;display:flex;flex-direction:column;justify-content:flex-end;font-size:10px;line-height:1.3;-webkit-mask-image:linear-gradient(transparent,#000 14px);mask-image:linear-gradient(transparent,#000 14px)}
body[data-controls=touch] #hud .playerHud{left:calc(var(--safeL) + 150px);bottom:calc(var(--safeB) + 66px);gap:5px}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud .playerHud{bottom:calc(var(--safeB) + 40px)}
body[data-controls=touch] #hud .playerHud .portrait{width:48px;height:48px}
body[data-controls=touch] #hud .playerHud .portrait img{inset:4px;width:40px;height:40px}
body[data-controls=touch] #hud .playerHud .portrait>b{bottom:-4px;min-width:30px;padding:0 4px;border-radius:4px;font-size:14px}
body[data-controls=touch] #hud #hpMax,body[data-controls=touch] #hud #respawn{font-size:10px}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #hud #skillBar{gap:5px}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #hud .skillSlot{width:40px;height:40px;border-radius:11px}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #hud .skillSlot[data-skill=dodge]{width:60px;height:60px;margin-left:14px;border-radius:50%}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #hud .skillSlot span{font-size:14px}
body[data-controls=touch] #hud #chargeGauge{left:calc(var(--safeL) + 280px);right:calc(var(--safeR) + 12px);bottom:calc(var(--safeB) + 72px);width:auto;max-width:240px;transform:none}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #hud #chargeGauge{max-width:min(240px,calc(100vw - var(--safeL) - var(--safeR) - 288px - min(170px,27vw)))}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #hud #chargeGauge{right:calc(var(--safeR) + 90px);bottom:calc(var(--safeB) + 40px)}
body[data-controls=touch] #chargeGauge .chargeHead{margin-bottom:1px;font-size:10px}
body[data-controls=touch] #chargeGauge .chargeTrack{height:8px;border-radius:5px}
body[data-controls=touch] #chargeGauge .chargeLabels{height:10px;font-size:10px}
/* v10.11.10 (user: "딜미터기 위치 아쉽다 더좌측으로 이동 전투에방해안되도록"): the boss 딜미터기 + buffs at the left edge under the party
   list (app.js placeLeftStack's top, as on PC) — no longer beside the stick in the middle of the fight */
body[data-controls=touch] #leftStack{left:var(--safeL);gap:4px}
body[data-controls=touch] #bossMeter{width:150px;padding:3px 5px;gap:2px;border-radius:9px;font-size:10px;line-height:1.3}
body[data-controls=touch] #bossMeter .bmHead{gap:4px;margin-bottom:0}
body[data-controls=touch] #bossMeter .bmHead b{font-size:10px;white-space:nowrap}
body[data-controls=touch] #bossMeter .bmHead small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
body[data-controls=touch] #bossMeter .bmRow{gap:4px;padding:1px 5px;border-radius:5px;line-height:1.2}
body[data-controls=touch] #bossMeter .bmRank{width:10px;font-size:10px}
body[data-controls=touch] #bossMeter .bmDmg small{margin-left:3px;font-size:9px}
body[data-controls=touch] #buffBar{gap:2px}
body[data-controls=touch] .buff{min-width:92px;gap:8px;padding:1px 7px;border-left-width:3px;border-radius:7px;font-size:10px;line-height:1.35}
body[data-controls=touch] #lootLog{width:min(170px,27vw);gap:2px;transition:opacity .2s,visibility .2s}
body[data-controls=touch] #lootLog .llEntry{gap:5px;padding:2px 6px 2px 5px;border-radius:7px}
body[data-controls=touch] #lootLog .llText b{font-size:10px}
body[data-controls=touch] #lootLog .llText small{font-size:9px}
body[data-controls=touch] #lootLog .llEntry:nth-last-child(n+6){display:none}
body[data-controls=touch]:has(#bidStack>.bidCard) #lootLog{opacity:0;visibility:hidden}
body[data-controls=touch] #bidStack{top:40px;right:var(--safeR);width:min(200px,32vw);gap:4px;max-height:calc(100dvh - 40px - var(--safeB) - 72px)}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #bidStack{max-height:calc(100dvh - 40px - var(--safeB) - 86px)}
body[data-controls=touch] .bidCard{padding:5px 7px;border-radius:10px;font-size:10px}
body[data-controls=touch] .bidHead{margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
body[data-controls=touch] .bidTime{height:3px;margin:4px 0}
body[data-controls=touch] .bidNote{font-size:10px}
body[data-controls=touch] :is(#bidStack,#lootPopup) .itemCard{padding:4px 6px;border-radius:8px;font-size:10px}
body[data-controls=touch] :is(#bidStack,#lootPopup) .itemHead{gap:6px}
body[data-controls=touch] :is(#bidStack,#lootPopup) .itemHead svg{width:30px;height:30px}
body[data-controls=touch] :is(#bidStack,#lootPopup) .itemHead b{font-size:11px}
body[data-controls=touch] :is(#bidStack,#lootPopup) .itemHead small{font-size:10px}
body[data-controls=touch] :is(#bidStack,#lootPopup) :is(.itemTitle,.itemBase,.itemOpts,.itemSpecial,.itemSet){display:none}
body[data-controls=touch] #lootPopup{top:84px;left:max(50%,calc(100% - var(--safeR) - 310px));width:min(200px,36vw)}
body[data-controls=touch] #lootPopup .lootWho{margin-bottom:3px;font-size:11px}
body[data-controls=touch] #lootPopup .rolls{margin-top:3px;font-size:10px}
body[data-controls=touch] #toast{top:52px;max-width:min(360px,calc(100vw - 340px));padding:6px 14px;font-size:11px;line-height:1.35;text-align:center}
body[data-controls=touch] #mobile #touchHint{top:36px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 340px);font-size:10px;line-height:1.3}
body[data-controls=touch] #prepareNotice{top:34%}
body[data-controls=touch] #prepareNotice :is(small,span){font-size:10px}
body[data-controls=touch] #prepareNotice b{font-size:26px}
body[data-controls=touch] #prepPanel{width:min(340px,calc(100vw - 340px));min-width:220px;max-height:calc(100dvh - 80px);overflow:auto;padding:8px 12px;border-radius:14px}
body[data-controls=touch] #prepPanel h3{margin:2px 0;font-size:16px}
body[data-controls=touch] #prepPanel p{margin:0 0 6px;font-size:10px}
body[data-controls=touch] #prepPanel>small,body[data-controls=touch] #prepPanel #start kbd{display:none}
body[data-controls=touch] #prepChars{gap:6px;margin-bottom:8px}
body[data-controls=touch] #prepChars button{min-height:0;gap:3px;padding:4px;border-radius:10px;font-size:11px}
body[data-controls=touch] #prepChars button img{height:clamp(36px,14vh,56px);aspect-ratio:auto;object-position:50% 20%;border-radius:7px}
body[data-controls=touch] #prepPanel #start{min-height:38px;padding:7px 10px;font-size:14px}
body[data-controls=touch] .enemyHealth{width:30px}
body[data-controls=touch] .enemyHealth.large{width:48px}
body[data-controls=touch] .playerLabel small{font-size:10px}
body[data-controls=touch] .playerLabel b{font-size:10px}
body[data-controls=touch] .playerLabel .rankInsignia{width:12px;height:12px}
body[data-controls=touch] .playerLabel .labelHp{width:48px;height:4px}
body[data-controls=touch] .dmgNum{font-size:17px}
body[data-controls=touch] .dmgNum[data-effect=rain]{font-size:14px}
body[data-controls=touch] .dmgNum.ally{font-size:12px}
body[data-controls=touch] .dmgNum.big{font-size:24px}
body[data-controls=touch] .floatText{font-size:14px}
body[data-controls=touch] .dropTag{padding:2px 7px;font-size:10px}
/* 5+ allies (8-player rooms): one-line ally rows (HP bar beside the name) so the party column clears the chat log. */
body[data-controls=touch] #hud #party:has(>.ally:nth-of-type(5)) .ally{display:flex;align-items:center;gap:5px;min-width:0;padding:2px 6px}
body[data-controls=touch] #hud #party:has(>.ally:nth-of-type(5)) .allyTop{flex:1;min-width:0}
body[data-controls=touch] #hud #party:has(>.ally:nth-of-type(5)) .allyHp{flex:none;width:34px;height:5px;margin:0}
body[data-controls=touch] #hud #party:has(>.ally:nth-of-type(5)) .allyHp span{display:none}
}
/* Very short screens (iPhone SE 1st gen, 568 x 320): thin ally bars without numbers, boss meter top 3 + me, newest 3 loot
   lines, chat and countdown nudged so the party column and a one-line toast stay clear. */
@media (orientation:landscape) and (max-height:340px){
body[data-controls=touch] #hud #party .allyHp{height:4px;margin-top:1px}
body[data-controls=touch] #hud #party .allyHp span{display:none}
body[data-controls=touch] #hud #chatLog{bottom:calc(var(--safeB) + 102px);max-height:36px}
body[data-controls=touch] #prepareNotice{top:36%}
body[data-controls=touch] #bossMeter .bmRow:nth-child(n+5):not(.me){display:none}
body[data-controls=touch] #lootLog .llEntry:nth-last-child(n+4){display:none}
}
/* Narrower than 560 px: the top-right buttons no longer fit beside the enemy counter, so they drop under 설정. */
@media (orientation:landscape) and (max-height:600px) and (max-width:559px){
body[data-controls=touch] #hud .loadoutButtons{top:38px;right:var(--safeR)}
body[data-controls=touch] #bidStack{top:74px}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #bidStack{max-height:calc(100dvh - 74px - var(--safeB) - 72px)}
body[data-controls=touch]:is(.skillBar-small,.skillBar-hidden) #bidStack{max-height:calc(100dvh - 74px - var(--safeB) - 86px)}
}
/* The open 설정 menu is never covered by the (automatic, untappable) bid cards or the loot pop-up. */
body[data-controls=touch]:has(#settingsMenu:not([hidden])) :is(#bidStack,#lootPopup){visibility:hidden}
/* 320 px tall or less (landscape phones with the URL bar): one-line ally rows, top 2 + me on the boss meter in 보통, and
   a two-column guide list that fits with 확인. */
@media (orientation:landscape) and (max-height:320px){
body[data-controls=touch] #hud #party .ally{display:flex;align-items:center;gap:5px;min-width:0;padding:2px 6px}
body[data-controls=touch] #hud #party .allyTop{flex:1;min-width:0}
body[data-controls=touch] #hud #party .allyHp{flex:none;width:34px;height:5px;margin:0}
body[data-controls=touch]:not(.skillBar-small):not(.skillBar-hidden) #bossMeter .bmRow:nth-child(n+4):not(.me){display:none}
body[data-controls=touch] .tgItems{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-controls=touch] .tgFoot small{display:none}
body[data-controls=touch] .tgItems li{padding:3px 8px}
body[data-controls=touch] .tgInner{gap:4px}
}
/* ==== v10.7 phone full-auto hunting (auto-hunt.js / auto-move.js) — touch only ==========================================
   The round 자동 / 수동 switch (app.js mountHuntToggle, built only with {touch:true}) closes the 음성 / 채팅 group: top-left on
   landscape phones, on the joystick's side everywhere. 수동 = a plain round button; 자동 = green and glowing
   (aria-pressed=true). 44 px, 34 px in the compact landscape HUD. The controls guide rings it (data-mark=hunt). The
   settings row (이동: 수동 / 자동 사냥) reuses the .autoHud / .autoSeg look of 스킬 칸.
   Daily limit (v10.7): while 자동 the button carries today's runs left ('자동 17'), wrapped onto two short lines inside the
   circle; the settings row shows '오늘 남은 자동 사냥 17/20' (.autoHuntQuota, kept in the compact layout).
   Guide: the ring's tag sits level with it, on its right (GUIDE_MARKS place:'side') — below it, it covered the left zone's
   '왼쪽 · 조이스틱으로 이동' on landscape phones; the 음성 / 채팅 group is always at the left edge, so the right side is free. */
body[data-controls=touch] #hud .commsButtons #huntToggle{flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1.5px solid #ffe1ad80;background:#10232bea;color:#ffe1ad;font:800 13px/1 Arial,sans-serif;letter-spacing:-.02em;white-space:normal;word-break:keep-all;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body[data-controls=touch] #hud .commsButtons #huntToggle[aria-pressed=true]{color:#062012;background:#6fe3a2;border-color:#d4ffe6;box-shadow:0 0 0 2px #6fe3a255,0 0 14px #6fe3a2aa}
body[data-controls=touch] .tgMark[data-mark=hunt] .tgRing{border-radius:50%}
body[data-controls=touch] .tgMark[data-mark=hunt][data-place=side] .tgTag{top:50%;bottom:auto;right:auto;left:calc(100% + 8px);transform:translateY(-50%)}
body[data-controls=touch] .autoHuntQuota{flex-basis:100%;font-size:12px;line-height:1.35;color:var(--muted)}
body[data-controls=touch] .autoHuntQuota b{color:#ffe1ad;font-weight:800}
@media (orientation:landscape) and (max-height:600px){body[data-controls=touch] #hud .commsButtons #huntToggle{width:34px;min-width:34px;height:34px;min-height:34px;font-size:11px}}
@media (prefers-reduced-motion:no-preference){body[data-controls=touch] #hud .commsButtons #huntToggle[aria-pressed=true]{animation:huntGlow 2.4s ease-in-out infinite}}
@keyframes huntGlow{50%{box-shadow:0 0 0 3px #6fe3a233,0 0 20px #6fe3a2cc}}
/* ==== end v10.7 full-auto hunting ==================================================================================== */
/* v10.8 B3 boss bar ========================================================================================== */
/* Top-centre HP bar under the remaining-enemies panel (boss-bar.js): the boss (red) and the mid-boss (amber), name, status, %. */
#bossBar{position:absolute;left:50%;top:84px;transform:translateX(-50%);width:min(420px,46vw);display:grid;gap:5px;pointer-events:none}
#bossBar[hidden]{display:none}
#bossBar .bbRow{padding:5px 10px 7px;border-radius:10px;background:linear-gradient(#1c1016e8,#1c1016b0);border:1px solid #ff6a5a44;box-shadow:0 4px 16px #0006;animation:llIn .2s ease-out}
#bossBar .bbRow[data-kind=midboss]{border-color:#ffb45a55}
#bossBar .bbHead{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:12px;line-height:1.25;color:#f6eee8;white-space:nowrap}
#bossBar .bbHead small{flex:none;font-size:10px;letter-spacing:.04em;color:#ff8a7a}
#bossBar .bbRow[data-kind=midboss] .bbHead small{color:#ffc27a}
#bossBar .bbHead b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px}
#bossBar .bbHead em{flex:none;font-style:normal;font-size:10px;color:#ffe066}
#bossBar .bbHead span{flex:none;margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:#fff}
#bossBar .bbTrack{margin-top:4px;height:8px;border-radius:5px;background:#2a151ad0;border:1px solid #0008;overflow:hidden}
#bossBar .bbTrack i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#b8261f,#ed514d);transition:width .15s linear}
#bossBar .bbRow[data-kind=midboss] .bbTrack i{background:linear-gradient(90deg,#c0620f,#f2a33a)}
#bossBar .bbRow.incoming .bbTrack i{opacity:.35;animation:bbPulse .8s ease-in-out infinite alternate}
@keyframes bbPulse{from{opacity:.2}to{opacity:.6}}
@media(max-width:999px),(max-height:599px){body[data-controls=desktop] #bossBar{top:130px}}
body[data-controls=touch] #bossBar{top:36px;width:min(300px,42vw);gap:3px}
body[data-controls=touch] #bossBar .bbRow{padding:2px 7px 4px;border-radius:8px}
body[data-controls=touch] #bossBar .bbHead{gap:4px;font-size:9px}
body[data-controls=touch] #bossBar .bbHead b{font-size:10px}
body[data-controls=touch] #bossBar .bbHead small,body[data-controls=touch] #bossBar .bbHead em{font-size:8px}
body[data-controls=touch] #bossBar .bbTrack{height:5px;margin-top:2px}
/* ==== end v10.8 B3 boss bar ======================================================================================= */
/* v10.8 B4 maps ================================================================================================ */
/* Lobby room cards: the room's arena after its status (lobby-view.js roomMapMarkup), tinted per map. */
.roomCard .roomMap{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-style:normal;font-size:11px;line-height:1.5;color:#e9dcc4;background:#ffffff14;border:1px solid #ffffff22;white-space:nowrap}
.roomCard .roomMap[data-map=downtown]{color:#ffd6a4;border-color:#ffb86a55}
.roomCard .roomMap[data-map=snow]{color:#d8ecff;border-color:#9fd0ff55}
.roomCard .roomMap[data-map=forest]{color:#c6f0b0;border-color:#8fd07a55}
body[data-controls=touch] .roomCard .roomMap{margin-left:4px;padding:0 5px;font-size:9px}
/* ==== end v10.8 B4 maps =========================================================================================== */
/* v10.8 integration ============================================================================================= */
/* Join card: the room's map while its files load (join-loading.js map(), map-world.js onLoading). */
.jlCard .jlMap{margin:-8px 0 14px;font-size:12px;color:#cfc8f5}.jlCard .jlMap[hidden]{display:none}
/* Toasts drop below the top boss bar while it shows (two rows end at 174 px on desktop, 220 px on a narrow / short desktop
   window, 97 px on phones), so the mid-boss warning never covers the bar it announces. */
body:has(#bossBar:not([hidden])) #toast{top:max(29%,184px)}
@media(max-width:999px),(max-height:599px){body[data-controls=desktop]:has(#bossBar:not([hidden])) #toast{top:max(29%,230px)}}
body[data-controls=touch]:has(#bossBar:not([hidden])) #toast{top:104px}
/* ==== end v10.8 integration ======================================================================================= */
/* v10.8 PC UI scale ============================================================================================== */
/* User: "PC로 할 때 UI가 전체적으로 작은데 30프로 정도 키우자". ui-scale.js puts .uiScaled + --ui-scale (≤ 1.3, fitted to the
   window; v10.15.1 "UI 크기90프로로": 90 % of that by default, so also below 1 — ×0.9 on small windows; every divided-back cap
   below holds either way) on <html> only on a mouse + keyboard screen, and this block is gated on the same pointer, so phones and touch
   screens keep their layout exactly. Every UI layer is drawn with CSS zoom: clicks, getBoundingClientRect and scrolling
   follow it. The overlays projected from the 3D scene set their transforms in screen px, so they are zoomed back to 1 (the
   floating combat text is outside the zoomed layers; only its font grows). #leftStack is placed by app.js in screen px
   (placeLeftStack), so its children are zoomed, not the stack. */
#uiScaleRow[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
 :root.uiScaled :is(header,#lobby,#mission,#hud,#loadingScreen,#joinLoading,#loginProgress,#toast,#bidStack,#lootPopup,#lootLog,.modal,#menuBackdrop .mbInfo,.unCard),
 :root.uiScaled #leftStack>*{zoom:var(--ui-scale)}
 :root.uiScaled #hud :is(#enemyBars,#playerLabels,#crosshair,#hitMarker){zoom:calc(1 / var(--ui-scale))}
 /* Viewport units are zoomed too (100dvh inside a ×1.3 layer is 130 % of the window): the caps that bind are divided back. */
 :root.uiScaled #lobby.panel{max-height:calc(100dvh / var(--ui-scale) - 96px);max-width:calc(100vw / var(--ui-scale) - 32px)}
 :root.uiScaled #settingsMenu{max-height:calc(100dvh / var(--ui-scale) - 20px);width:min(780px,calc(100vw / var(--ui-scale) - 24px))/* v10.11.8: the big 설정 window */}
 :root.uiScaled .loadCard{max-height:calc(100dvh / var(--ui-scale) - 32px)}
 :root.uiScaled .unCard{width:min(940px,calc(100vw / var(--ui-scale) - 32px));height:min(680px,calc(100dvh / var(--ui-scale) - 32px))}
 :root.uiScaled #menuBackdrop .mbInfo{width:min(560px,calc(44vw / var(--ui-scale)))}
 /* Bid prompts: at ×1.3 three of them (a unique + two normals) needed 691 px of the stack's 552 at 1600×900 and the third was
    cut off. A lone prompt keeps its whole item card; once two or more are up each shows the item's name line only (bidding
    is automatic, and the loot card that settles it shows the whole item), so three of any grade fit. 20 px narrower, so the
    stack stays clear of the mage / archer controls strip under the skill bar (the berserker's longer first line can still
    end a few px under a third prompt in windows narrower than ~1800 px). */
 :root.uiScaled #bidStack{max-height:calc(100dvh / var(--ui-scale) - 140px);width:min(280px,calc(100vw / var(--ui-scale) - 32px))}
 :root.uiScaled #bidStack .bidCard:not(:only-child) .itemCard>:not(.itemHead){display:none}
 :root.uiScaled .modal{max-height:calc(88dvh / var(--ui-scale))}
 :root.uiScaled :is(.battleSheet,#result){max-height:calc(90dvh / var(--ui-scale))}
 :root.uiScaled .gearSheet{width:min(1180px,calc(100vw / var(--ui-scale) - 32px));max-height:calc(92dvh / var(--ui-scale))}
 :root.uiScaled .skillSheet{width:min(1180px,calc(100vw / var(--ui-scale) - 32px))}/* v10.11.21d: the wide window, as .skillSheet below */
 :root.uiScaled #rankSheet{width:min(1080px,calc(100vw / var(--ui-scale) - 32px));height:min(680px,calc(88dvh / var(--ui-scale)))}
 :root.uiScaled .probSheet{width:min(860px,calc(100vw / var(--ui-scale) - 32px))}
 :root.uiScaled :is(.keySheet,.autoSheet){width:min(640px,calc(100vw / var(--ui-scale) - 32px))}
 :root.uiScaled .bagGrid{max-height:calc(62dvh / var(--ui-scale))}
 :root.uiScaled .gearBag .bagGrid{max-height:calc(38dvh / var(--ui-scale))}
 :root.uiScaled .gearBag .stashGrid{max-height:calc(22dvh / var(--ui-scale))}
 /* The HUD then has 1230 px of room (a 1600 px window at ×1.3): the top-right buttons sit a little tighter and 남은 적 a
    little narrower, so they no longer run into each other (measured: 72 px overlap otherwise). */
 :root.uiScaled body[data-controls=desktop] .loadoutButtons{gap:6px}
 :root.uiScaled body[data-controls=desktop] .loadoutButtons button{min-width:70px;padding-left:8px;padding-right:8px}
 :root.uiScaled body[data-controls=desktop] .operationHud{width:190px}
 /* Taller at ×1.3 (measured at 1600×900): the loot card drops below a showing boss bar (it covered the mid-boss row) and the
    loot log sits a little lower, clear of a bid card under the top-right buttons. */
 :root.uiScaled body:has(#bossBar:not([hidden])) #lootPopup{top:max(18%,182px)}
 :root.uiScaled #lootLog{top:calc(50% + 24px)}
 /* The loot card also ends above the skill bar (its top is 166 px over the bottom): a set item's list of set bonuses ran onto
    the bar (by 104 px at 1600×900 with the boss bar, 30 px without). With the boss bar that list is left out; otherwise only
    the card's tail is cut, never the name line above it or the dice rolls under it. */
 :root.uiScaled #lootPopup{display:flex;flex-direction:column;max-height:calc(82dvh / var(--ui-scale) - 176px)}
 :root.uiScaled #lootPopup .itemCard{min-height:0;overflow:hidden}
 :root.uiScaled body:has(#bossBar:not([hidden])) #lootPopup{max-height:min(calc(82dvh / var(--ui-scale) - 176px),calc(100dvh / var(--ui-scale) - 358px))}
 :root.uiScaled body:has(#bossBar:not([hidden])) #lootPopup .itemSet{display:none}
 /* Login: in the smallest fitted windows (1366×768 at ×1.1, 1600×900 at ×1.3) the panel scrolled and the server status /
    연결 재시도 line, the one to read when logging in fails, sat below its edge. The title block and the form sit tighter. */
 :root.uiScaled body[data-account=out] #lobby>h1{margin:8px 0}
 :root.uiScaled body[data-account=out] #lobby>.lead{margin:8px 0}
 :root.uiScaled body[data-account=out] #lobby>.tags{margin:10px 0 12px}
 :root.uiScaled body[data-account=out] .login{padding:16px}
 :root.uiScaled body[data-account=out] .login label{margin-bottom:8px}
 :root.uiScaled body[data-account=out] .login input{min-height:46px}
 :root.uiScaled body[data-account=out] .login button{min-height:44px}
 :root.uiScaled body[data-account=out] .login p{margin:8px 0}
 /* v10.11.20 the login card alone, vertically centred: its height cap divided back */:root.uiScaled body[data-account=out] #lobby.panel{max-height:calc(100dvh / var(--ui-scale) - 32px)}
 /* Damage numbers / floating text grow with the UI; their position stays the projected point. */
 :root.uiScaled .floatText{font-size:calc(18px * var(--ui-scale))}
 :root.uiScaled .dmgNum{font-size:calc(21px * var(--ui-scale))}
 :root.uiScaled .dmgNum.ally{font-size:calc(14px * var(--ui-scale))}
 :root.uiScaled .dmgNum[data-effect=rain]{font-size:calc(17px * var(--ui-scale))}
 :root.uiScaled .dmgNum.big{font-size:calc(30px * var(--ui-scale))}
 /* v10.9 rooms: the room popups and the battle briefing grow like the other windows (the room lobby / waiting room are in
    #lobby already); their viewport caps are divided back. */
 :root.uiScaled :is(#roomPopup .rpCard,#briefing .brCard,#battleMenu .rpCard){zoom:var(--ui-scale)}
 :root.uiScaled .rpCard{max-height:calc(100dvh / var(--ui-scale) - 32px);max-width:calc(100vw / var(--ui-scale) - 32px)}
 :root.uiScaled .brCard{max-height:calc(100dvh / var(--ui-scale) - 24px);max-width:calc(100vw / var(--ui-scale) - 32px)}
 :root.uiScaled .rlList{max-height:min(calc(52dvh / var(--ui-scale)),560px)}
 :root.uiScaled .rpList{max-height:calc(42dvh / var(--ui-scale))}
 /* v10.9.3 훈련소 딜 로그 (dmg-log-ui.js, in #hud): it still ends above the skill bar. */
 :root.uiScaled #dmgLog .dlBody{max-height:calc(100dvh / var(--ui-scale) - 330px)}
}
/* ==== end v10.8 PC UI scale ======================================================================================= */
/* ==== v10.9 얼음운석 (ice-meteorite-hud.js, app.js; user: "쿨3분", "사용후 10초간 스킬불가 및 상태") ======================== */
/* The right-click slot (hidden until the three Ice Fall uniques are worn) in ice blue; 탈진 greys every wizard slot but the blink and labels it. */
.skillSlot[data-skill=meteorite]{border-color:#7fd4ffaa;background:linear-gradient(160deg,#16305ee8,#0a1530e8)}
.skillSlot[data-skill=meteorite].active{border-color:#e6f7ff;box-shadow:0 0 0 1px #bfe9ffaa,0 0 18px #7fd4ffaa}
.skillSlot[data-skill=meteorite] span{font-size:15px}
.skillSlot.locked{border-color:#6f768099;box-shadow:none}.skillSlot.locked .slotIcon{filter:grayscale(1) brightness(.4)}.skillSlot.locked b{color:#9aa0aa}
.skillSlot.locked::before{content:'탈진';position:absolute;z-index:3;top:30%;left:50%;transform:translate(-50%,-50%);padding:1px 5px;border-radius:6px;font:800 11px/1.2 Arial,sans-serif;color:#ffd0d0;background:#3a0d18d9;border:1px solid #ff6a7a88;pointer-events:none;white-space:nowrap}
body[data-controls=touch] #hud .skillSlot.locked::before{font-size:8px;padding:0 2px}
/* The charge gauge while the own wizard charges: 0초 / 5초 / 10초 in ice blue, pulsing once full (no third mark). */
#chargeGauge[data-class="wizard"]{--c:#7fd4ff}#chargeGauge[data-class="wizard"] #chargeFill{background:linear-gradient(90deg,#2f6fd6,var(--c))}
#chargeGauge[data-class="wizard"] .mark3{display:none}#chargeGauge[data-class="wizard"][data-stage="full"]{--c:#e6f7ff}
#chargeGauge[data-class="wizard"][data-stage="full"] .chargeTrack{animation:chargeFull .35s ease-in-out infinite alternate}
/* During the own charge the ground marker is the aim. */
#crosshair.metAim{visibility:hidden!important}
/* The blizzard's ticks (hit tag 'storm', every enemy each 0.5 s) float small and pale (#floatLayer: above the PC UI scale's
   .dmgNum size, which stays inside its own block). */
#floatLayer .dmgNum.storm{font-size:14px;color:#dff4ff}body[data-controls=touch] #floatLayer .dmgNum.storm{font-size:12px}
/* ==== end v10.9 얼음운석 ============================================================================================ */
/* ==== v10.9 rooms ==================================================================================================== */
/* User: "방만들기 방입장 필터 새로고침 넣어주고 필터에 스테이지 구간 … 대기실에서 전투력 직업 계급 아이디 보이고 … 팝업창형식으로하자" and the
   ~7 s briefing ("세트템 서버규칙 클리어조건 몬스터패턴 맵설명"). room-ui.js / briefing.js. #onlineLobby[data-rooms] is set only when the
   server has rooms (the rooms1 cap); without it the stage select below stays exactly as before. Chip rows scroll inside
   themselves, never the page. */
#onlineLobby[data-rooms=lobby] .roomsColumn>:is(.deploy,.row,h3,#rooms),#onlineLobby[data-rooms=waiting] .lobbyColumns{display:none}
:is(#roomLobby,#waitingRoom,#roomPopup,#briefing,#unlockLine,#unlockChip)[hidden]{display:none}
#toast{z-index:65}
/* Room lobby: toolbar, filter chips, the list. */
.roomLobby{display:flex;flex-direction:column;gap:8px;min-height:0}
.rlBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rlBar button{min-height:42px;padding:6px 14px;font-size:13px}.rlGap{flex:1}
.rlBadge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 4px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px}.rlBadge[hidden]{display:none}
.rlChips{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;min-height:24px}.rlChips::-webkit-scrollbar{display:none}
.rlChip{min-height:28px;padding:2px 10px;border-radius:999px;font-size:11px;white-space:nowrap}
.rlCount{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}.rlFresh{color:var(--cyan);font-size:11px;white-space:nowrap}
.rlReady{margin:0;font-size:12px}.rlReady[hidden]{display:none}
.rlList{display:grid;gap:6px;align-content:start;overflow:auto;max-height:min(52dvh,560px);padding-right:3px;scrollbar-width:thin}
.rlEmpty{margin:0;padding:26px 8px;color:var(--muted);text-align:center;line-height:1.7}
.rmRow{display:grid;grid-template-columns:48px 56px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:58px;padding:8px 12px;text-align:left;border:1px solid #a894ff33;border-radius:12px;background:#231b4ae0;color:inherit}
.rmRow.sel{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}.rmRow.no{opacity:.6}
.rmNo{font-family:var(--display);font-size:13px;color:var(--muted)}
.rmStage{font-family:var(--display);font-weight:400;font-size:22px;line-height:1}.rmStage small{display:block;font:700 9px 'Noto Sans KR',sans-serif;letter-spacing:.14em;color:var(--accent)}
.rmMain{display:grid;gap:3px;min-width:0}.rmName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.rmMeta{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:11px;color:var(--muted)}.rmMeta :is(i,em){font-style:normal}.rmMeta .roomMap{margin-left:0}
.rmStatus{padding:0 7px;border-radius:999px;background:#ffffff14;color:#e9e4ff}.rmRow[data-status=battle] .rmStatus{color:#ffb9c6}.rmRow[data-status=loading] .rmStatus{color:#9fe8ff}.rmRow:is([data-status=clear],[data-status=failed]) .rmStatus{color:#c9c3e6}
.rmSide{display:grid;justify-items:end;gap:3px}.rmCount{font-size:15px;font-variant-numeric:tabular-nums}.rmClasses{display:flex;gap:2px;min-height:17px}
.rmCls{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;background:#ffffff1f;font-size:10px;font-style:normal}
:is(.rmCls,.wrCard)[data-c=wizard]{--cls:#9fdcff}:is(.rmCls,.wrCard)[data-c=berserker]{--cls:#ffb08a}:is(.rmCls,.wrCard)[data-c=archer]{--cls:#b6f09a}.rmCls{color:var(--cls,#fff)}
.rmMine{font-size:10px;color:var(--cyan);white-space:nowrap}.rmMine.first{color:#ffd28a}.rmMine.bad{color:#ff9aa8}
/* mobile m-fix4: a row's standing as a short chip too (room-ui.js mineHTML) — only the phone's lobby list shows it (phone-screen.js) */.rmMine .rmShort{display:none}
/* Popups (방 만들기 / 방 입장 / 필터 / 입장 확인 / 이전 방 복귀): one card, inner scroll, 16 px inputs (no zoom on iOS). */
.roomPopup{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;background:#0b0718b8;backdrop-filter:blur(3px)}
.rpCard{display:flex;flex-direction:column;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:hidden;background:linear-gradient(160deg,#241c52fa,#150f2efa);border:1px solid #a894ff55;border-radius:18px;box-shadow:0 24px 80px #000a}
.rpCard[data-kind=create]{width:min(880px,100%)}.rpCard[data-kind=filter]{width:min(620px,100%)}
/* v10.14.0 회원가입 창 (signup-sheet.js): the room popup's card; under the login card (#loadingScreen 100) */
.signupSheet{z-index:80}.suCard{width:min(420px,100%)}
.suError{min-height:1.4em;margin:0;color:#ff8fa3;font-size:12px;line-height:1.4}.suError.info{color:var(--muted)}
.suCard input[aria-invalid=true]{border-color:#ff6b86;box-shadow:0 0 0 1px #ff6b8666}
.suActions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:6px 18px 16px}.suActions button{min-height:46px;padding:0 18px}
@media (max-height:520px){.signupSheet{padding:8px}.suCard{max-height:calc(100dvh - 16px)}.suCard .rpHead{padding:10px 14px 2px}.suCard .rpHead h3{font-size:18px}
 .suCard .rpBody{gap:6px;padding:2px 14px 4px}.suCard .rpField{gap:3px}.suCard .rpBody input:not([type=checkbox]){min-height:36px}.suActions{padding:4px 14px 10px}.suActions button{min-height:40px}}
/* 회원 탈퇴 창 (account-delete-ui.js, mobile 2026-10-02): the room popup's card with a red warning box and a red 탈퇴하기 (off until the password
   and 탈퇴 are typed); 설정's [회원 탈퇴] is a quiet red button, gone in a battle. A phone (≤520 px tall) gets the compact card, its body scrolls.
   Above the start menu and its 설정 (#loadingScreen 100, header 110 there), like 업데이트 내역 (120). */
.deleteSheet{z-index:125}.delCard{width:min(460px,100%)}
.delWarn{display:grid;gap:6px;padding:10px 12px;border:1px solid #ff6b8a66;border-radius:12px;background:#3a0d1ccc;color:#ffe3e8;font-size:13px;line-height:1.5}
.delWarn p{margin:0}.delWarn ul{margin:0;padding-left:18px}.delWarn li{margin:1px 0}.delWarn b{color:#fff}.delWarn .delNever b{color:#ffa3b3}
.dangerBtn{color:#fff;background:linear-gradient(100deg,#e2405e,#9c1f4b);border-color:#ff8fa3}.dangerBtn:disabled{background:#4a2633;color:#ffd0d8;border-color:#ff6b8a44;cursor:not-allowed}
#settingsMenu #deleteAccountBtn{color:#ffb3c0;background:transparent;border-color:#ff6b8a66}body.playing #deleteAccountBtn{display:none}
@media (max-height:520px){.deleteSheet{padding:8px}.delCard{max-height:calc(100dvh - 16px)}.delCard .rpHead{padding:10px 14px 2px}.delCard .rpHead h3{font-size:18px}
 .delCard .rpBody{gap:6px;padding:2px 14px 4px}.delCard .rpField{gap:3px}.delCard .rpBody input:not([type=checkbox]){min-height:36px}.delWarn{gap:3px;padding:7px 10px;font-size:12px;line-height:1.4}}
.rpHead{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 10px}.rpHead h3{margin:0;font-family:var(--display);font-weight:400;font-size:22px}.rpHead small{color:var(--muted);font-size:12px}
.rpX{margin-left:auto;min-width:44px;min-height:44px;padding:0}
.rpBody{display:grid;gap:12px;min-height:0;overflow:auto;padding:6px 18px 12px;overscroll-behavior:contain}
.rpCols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.rpCol{display:grid;gap:12px;align-content:start;min-width:0}
.rpField{display:grid;gap:6px;min-width:0}.rpField>span{font-size:12px;font-weight:700;color:var(--accent)}.rpField small{color:var(--muted);font-size:11px;line-height:1.5}
.rpBody input:not([type=checkbox]){width:100%;min-width:0;min-height:42px;padding:6px 10px;border:1px solid #a894ff55;border-radius:10px;background:#120d2a;color:#fff;font-size:16px}
.rpStepper{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:6px;align-items:center}.rpStepper output{text-align:center;font-family:var(--display);font-size:22px;white-space:nowrap}
.rpStepper button{min-width:44px;min-height:42px;padding:0 8px}.rpStepper.small button{min-width:40px;padding:0 4px;font-size:12px}.rpStepper.small input{text-align:center}
.rpRange{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.rpToggles,.rpPresets{display:flex;flex-wrap:wrap;gap:6px}.rpToggles button,.rpPresets button{min-height:42px;padding:4px 12px;font-size:12px}
:is(.rpToggles,.rpPresets) button.on{background:linear-gradient(100deg,var(--pink),var(--violet));border-color:transparent;color:#fff}
.rpCp{display:grid;grid-template-columns:78px 44px minmax(0,1fr) 44px;gap:6px;align-items:center;font-size:13px}.rpCp button{min-height:42px;padding:0}
.rpLink{justify-self:start;min-height:34px;padding:0;background:none;border:0;box-shadow:none;color:var(--cyan);font-size:12px;text-decoration:underline}
.rpCheck{display:flex;align-items:center;gap:10px;min-height:42px;font-size:13px}.rpCheck input{width:22px;height:22px;accent-color:var(--pink)}
.rpNote{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.rpMine{margin:0;padding:10px 12px;border-radius:10px;background:#ffffff0d;font-size:12px;line-height:1.6}:is(.rpMine,.rpInfo) .ok{color:#8ff0c0}:is(.rpMine,.rpInfo) .bad{color:#ff9aa8}
.rpList{display:grid;gap:6px;align-content:start;max-height:42dvh;overflow:auto}
.rpInfo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:13px}.rpInfo dt{color:var(--muted)}.rpInfo dd{margin:0}
.rpError{margin:0 18px 8px;padding:8px 12px;border:1px solid #ff4f9a66;border-radius:10px;background:#ff4f9a22;color:#ffd0e0;font-size:13px}.rpError[hidden]{display:none}
.rpCount{margin:0;color:var(--muted);font-size:12px}
.rpFoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid #a894ff25}.rpFoot button{min-width:100px;min-height:44px}
/* Waiting room: header, 8 member cards (계급 · 아이디 · 직업 · 전투력), chat, the clear rule, the action bar. */
.waitingRoom{display:grid;gap:12px;margin-top:14px;min-height:0}
.wrHead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}.wrTitle{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0}
.wrTitle h3{margin:0;font-family:var(--display);font-weight:400;font-size:24px;overflow-wrap:anywhere}.wrStage{color:var(--muted);font-size:13px}.wrStage small{font-size:11px}
.wrChips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}.wrChips i{padding:2px 9px;border:1px solid #ffffff22;border-radius:999px;background:#ffffff14;font-size:11px;font-style:normal;white-space:nowrap}
.wrBrief{margin-left:auto;min-height:42px}
.wrBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,32%);gap:14px;min-height:0}
.wrGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start;min-width:0}
.wrCard{display:grid;gap:3px;justify-items:start;align-content:start;min-width:0;min-height:120px;padding:10px;border:1px solid #a894ff33;border-radius:14px;background:#231b4ae8}
.wrCard.me{border-color:var(--cyan);box-shadow:inset 0 0 0 1px #56e4ff66}.wrCard.away{opacity:.55}.wrCard.empty{place-items:center;border-style:dashed;background:#ffffff06;color:#ffffff55;font-size:12px}
.wrRank{display:flex;align-items:center;gap:6px;min-width:0;color:#efd28d;font-size:18px}.wrRank svg{width:24px;height:24px;flex:none}.wrRank small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.wrId{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.wrClass{color:var(--cls,#fff);font-size:12px;font-weight:700}
.wrCp{color:var(--muted);font-size:11px}.wrCp b{color:#fff;font-size:13px;font-variant-numeric:tabular-nums}
.wrTags{display:flex;flex-wrap:wrap;gap:3px}.wrTags i{padding:1px 6px;border-radius:6px;background:#ffffff1a;font-size:10px;font-style:normal}
.wrTags .tag-me{background:var(--cyan);color:#0b0718}.wrTags .tag-first{background:#ffd28a33;color:#ffd28a}.wrTags :is(.tag-locked,.tag-cp){background:#ff4f9a2e;color:#ffb0c8}.wrTags .tag-game{background:#56e4ff22;color:#aef1ff}
.wrChat{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid #a894ff33;border-radius:14px;background:#120d2ad0}
.wrLog{flex:1;min-height:160px;max-height:300px;overflow:auto;padding:10px;font-size:12px;line-height:1.55}.wrLog p{margin:0 0 4px;overflow-wrap:anywhere}.wrLog b{margin-right:6px;color:var(--accent)}.wrLog .wrHint{color:var(--muted)}
.wrChatForm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px;border-top:1px solid #a894ff25}
.wrChatForm input{min-width:0;min-height:42px;padding:6px 10px;border:1px solid #a894ff55;border-radius:10px;background:#0b0718;color:#fff;font-size:16px}.wrChatForm button{min-height:42px}
.wrRule{margin:0;padding:8px 12px;border:1px solid #56e4ff33;border-radius:10px;background:#56e4ff14;color:#cdf6ff;font-size:12px}
.wrActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.wrChars{display:flex;gap:6px;margin-right:auto}
:is(.wrChars,.brChars) button{display:flex;align-items:center;gap:6px;min-height:44px;padding:3px 10px 3px 3px}:is(.wrChars,.brChars) img{width:36px;height:36px;border-radius:9px;object-fit:cover}
:is(.wrChars,.brChars) button.on{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}.wrChars button:disabled{opacity:.4}
.wrStart{min-width:210px;min-height:50px;font-size:15px}.wrStart.auto{background:linear-gradient(100deg,#2bc4a0,var(--violet))}
/* Briefing: 3 columns on a wide screen (all six blocks at once), tabs on phones / narrow windows (briefing.js data-layout). */
.briefing{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) var(--safeR) max(12px,env(safe-area-inset-bottom)) var(--safeL);background:radial-gradient(ellipse at 50% 35%,#2a1d5cf4,#0b0718fc 72%)}
.brCard{position:relative;display:flex;flex-direction:column;gap:10px;width:min(1180px,100%);max-height:100%;min-height:0}
.brHead{display:flex;align-items:flex-start;gap:12px}.brHead h3{margin:6px 0 2px;font-family:var(--display);font-weight:400;font-size:30px}.brHead small{color:var(--muted);font-size:12px}.brClose{margin-left:auto;min-width:44px;min-height:44px}
.brTabs{display:none;gap:4px;overflow-x:auto;scrollbar-width:none}.brTabs button{flex:none;min-height:38px;padding:2px 12px;font-size:12px}.brTabs button.on{background:linear-gradient(100deg,var(--pink),var(--violet));border-color:transparent;color:#fff}
.brPages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;overflow:auto;overscroll-behavior:contain}
.brPage{min-width:0;padding:12px 14px;border:1px solid #a894ff33;border-radius:14px;background:#1a1438e6}.brPage h4{margin:0 0 6px;color:var(--accent);font-size:13px}
.brPage ul{display:grid;gap:4px;margin:0;padding-left:16px;font-size:12px;line-height:1.5}.brPage li.t-lead{margin-left:-16px;list-style:none;color:#fff;font-weight:700}
.brPage li.t-good{color:#8ff0c0}.brPage li.t-mine{color:#ffd28a}.brPage li.t-note{color:var(--muted)}
.brFoot{display:grid;gap:6px}.brBar{height:6px;overflow:hidden;border-radius:6px;background:#ffffff1a}.brBar i{display:block;width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,#56e4ff,#b58cff);transition:width .25s linear}
.brStatus{margin:0;font-size:13px}.brRule{margin:0;color:#cdf6ff;font-size:12px}
.brChars{display:flex;gap:8px;justify-content:center}.brChars[hidden]{display:none}
.brTap{position:absolute;top:0;right:0;min-height:44px;padding:6px 18px;border-radius:999px;background:linear-gradient(100deg,var(--pink),var(--violet));border:0;color:#fff}.brTap[hidden]{display:none}
@media(max-width:999px){.brPages{grid-template-columns:repeat(2,minmax(0,1fr))}}
.briefing[data-layout=tabs] .brTabs{display:flex}.briefing[data-layout=tabs] .brPages{display:block;flex:1}
.briefing[data-layout=tabs] .brPage{display:none}.briefing[data-layout=tabs] .brPage.on{display:block}.briefing[data-layout=tabs] .brPage ul{font-size:13px}
/* v10.9 review — PC: the 3-column grid ran past the card at 1280×720 / 1920×1080 during the 7 s load (세트템 / 서버 규칙 / 클리어 조건
   cut off). 요약 repeats the five, so it is the phones' page only; the five flow in CSS columns (briefing.js orders them 맵+클리어 |
   몬스터 | 세트+규칙), and the class switch sits in the head row instead of taking a row of its own. */
.briefing[data-layout=cols] .brPage[data-key=summary]{display:none}
.briefing[data-layout=cols] .brPages{display:block;columns:3;column-gap:10px}.briefing[data-layout=cols] .brPage{break-inside:avoid;margin-bottom:10px}
.briefing[data-layout=cols] .brChars{position:absolute;top:0;right:0}
@media(max-width:999px){.briefing[data-layout=cols] .brPages{columns:2}}@media(max-width:640px){.briefing[data-layout=cols] .brPages{columns:1}.briefing[data-layout=cols] .brChars{position:static}}
@media(max-height:800px){.briefing[data-layout=cols] .brPage{padding:9px 12px}.briefing[data-layout=cols] .brPage ul{gap:2px;line-height:1.45}}
/* Phones (landscape): the class row took ~50–90 px under the page, so the page was cut (맵's 적 보정 line) — the portraits go in the
   head row (icons only, like the waiting room), the 전체 화면 tap button over the footer's right end, and a page's lines run in two
   columns on the wide screen. */
@media(orientation:landscape){.briefing[data-layout=tabs] .brChars{position:absolute;top:0;right:0;gap:4px}.briefing[data-layout=tabs] .brChars button{min-height:40px;padding:2px}.briefing[data-layout=tabs] .brChars img{width:34px;height:34px}.briefing[data-layout=tabs] .brChars span{display:none}
 .briefing[data-layout=tabs] .brTap{top:auto;bottom:0}.briefing[data-layout=tabs] .brPage.on ul{display:block;columns:2;column-gap:18px}.briefing[data-layout=tabs] .brPage li{break-inside:avoid;margin-bottom:3px}}
/* Result: the unlock line; HUD: the unlock chip under the clock. */
#unlockLine{display:grid;gap:4px;margin:-4px 0 12px;font-size:13px}#unlockLine .good{color:#8ff0c0}#unlockLine .bad{color:#ffb0bf}#vote:disabled{opacity:.55}
.stage>#unlockChip{position:absolute;left:calc(100% + 8px);bottom:0;display:block;width:max-content;padding:2px 9px;border:1px solid #56e4ff55;border-radius:999px;background:#0b0718b3;color:#cdf6ff;font-size:11px;white-space:nowrap}
.stage>#unlockChip.off{border-color:#ffffff25;background:#ffffff10;color:#ffffff88}
/* Phones: the 음성 / 채팅 / 자동 buttons sit right of the stage number, so the chip goes under 남은 적 (under the boss bar
   while it shows, like the toasts). */
body[data-controls=touch] .stage>#unlockChip{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 34px);bottom:auto;transform:translateX(-50%);padding:1px 8px;font-size:10px}
/* Integration QA (v10.9): the touch hint line (#touchHint, top 36px) stays until the first joystick / look touch, which a phone
   in 자동 사냥 may never make, and every room battle shows it again — the chip steps below it meanwhile (the boss bar rule wins). */
body[data-controls=touch]:has(#touchHint:not(.used)) .stage>#unlockChip{top:calc(env(safe-area-inset-top) + 54px)}
body[data-controls=touch]:has(#bossBar:not([hidden])) .stage>#unlockChip{top:calc(env(safe-area-inset-top) + 100px)}
/* Phones (touch): compact rows, the waiting room fills the lobby card — grid 4×2 of ~54 px cards left, chat right, the start
   button large at the bottom right; while typing in the chat the grid steps aside. */
body[data-controls=touch] .rlBar{gap:6px}body[data-controls=touch] .rlBar button{min-height:40px;padding:4px 10px;font-size:12px}
body[data-controls=touch] .rlList{max-height:none}body[data-controls=touch] .roomsColumn:has(#roomLobby:not([hidden])){display:flex;flex-direction:column}
body[data-controls=touch] #roomLobby:not([hidden]){flex:1;min-height:0}body[data-controls=touch] .rlList{flex:1;min-height:0}
body[data-controls=touch] .rmRow{grid-template-columns:38px 44px minmax(0,1fr) auto;gap:7px;min-height:46px;padding:5px 8px}body[data-controls=touch] .rmStage{font-size:18px}body[data-controls=touch] .rmName{font-size:12px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] .waitingRoom{display:flex;flex:1;flex-direction:column;gap:6px;min-height:0;margin-top:6px}
body[data-controls=touch] .wrHead{flex-wrap:nowrap;gap:8px}body[data-controls=touch] .wrTitle{flex-wrap:nowrap;min-width:0}body[data-controls=touch] .wrTitle h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body[data-controls=touch] .wrStage{white-space:nowrap;font-size:11px}body[data-controls=touch] .wrChips{flex:1;min-width:0}
body[data-controls=touch] .wrTitle h3{font-size:18px}body[data-controls=touch] .wrBrief{min-height:38px;padding:4px 10px;font-size:12px}
body[data-controls=touch] .wrBody{flex:1;grid-template-columns:62% minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:8px}
body[data-controls=touch] .wrGrid{grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;min-height:0}
/* Compact card: insignia | 아이디 / 직업 · 전투력 (two lines), tags as small dots of text on the right; ~40 px tall. */
body[data-controls=touch] .wrCard{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:0 5px;align-content:center;min-height:0;padding:3px 6px;border-radius:10px;overflow:hidden}
body[data-controls=touch] .wrCard .wrRank{grid-row:1 / 3;font-size:14px}body[data-controls=touch] .wrRank svg{width:20px;height:20px}body[data-controls=touch] .wrRank small{display:none}
body[data-controls=touch] .wrId{grid-column:2;grid-row:1;padding-right:18px;font-size:11px;line-height:1.25}body[data-controls=touch] .wrCard>:is(.wrClass,.wrCp){grid-column:2;display:inline;font-size:10px;line-height:1.25}
body[data-controls=touch] .wrCard .wrClass{grid-row:2}body[data-controls=touch] .wrCard .wrCp{grid-row:2;justify-self:end;font-size:0}body[data-controls=touch] .wrCp b{font-size:10px}
body[data-controls=touch] .wrTags{grid-column:2;grid-row:1;justify-self:end}body[data-controls=touch] .wrTags i{font-size:8px;padding:0 3px}body[data-controls=touch] .wrTags i:not(.tag-me,.tag-cp,.tag-away,.tag-game){display:none}
/* v10.9 review (user: "대기실에서 전투력 직업 계급 아이디 보이고"): the 계급 name under the insignia (a lone 이등병 bar read as a dash), and
   미해금 / 첫 도전 as a colour dot (pink / gold, the tag's title names it) — the rule line below the cards explains them. */
body[data-controls=touch] .wrCard .wrRank{flex-direction:column;justify-content:center;gap:1px}body[data-controls=touch] .wrCard .wrRank small{display:block;max-width:42px;font-size:8px;line-height:1.1}
body[data-controls=touch] .wrTags i:is(.tag-first,.tag-locked){display:inline-block;width:7px;height:7px;padding:0;border-radius:50%;font-size:0;align-self:center}body[data-controls=touch] .wrTags i.tag-first{background:#ffd28a}body[data-controls=touch] .wrTags i.tag-locked{background:#ff6fa3}
body[data-controls=touch] .wrLog{min-height:0;max-height:none;padding:6px 8px;font-size:11px}body[data-controls=touch] .wrChatForm{padding:5px}
body[data-controls=touch] .waitingRoom:has(.wrChatForm input:focus) .wrGrid{display:none}body[data-controls=touch] .waitingRoom:has(.wrChatForm input:focus) .wrBody{grid-template-columns:minmax(0,1fr)}
body[data-controls=touch] .wrRule{padding:4px 8px;font-size:10px}
body[data-controls=touch] .wrActions{flex-wrap:nowrap;gap:5px}body[data-controls=touch] .wrActions>button{min-height:42px;padding:4px 10px;font-size:12px}
body[data-controls=touch] .wrChars button{padding:2px;min-height:42px}body[data-controls=touch] .wrChars img{width:34px;height:34px}body[data-controls=touch] .wrChars span{display:none}
body[data-controls=touch] .wrStart{min-width:0;flex:1;min-height:52px;font-size:14px}
/* v10.9 review: no PC key hints on touch (장비 I · 스킬 K); a portrait phone (before rotating) stacks the waiting room instead of the 62% / 38% split. */
body[data-controls=touch] .wrActions kbd{display:none}
@media (orientation:portrait) and (max-width:640px){body[data-controls=touch] .wrHead,body[data-controls=touch] .wrTitle{flex-wrap:wrap}body[data-controls=touch] .wrBody{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(140px,1fr)}body[data-controls=touch] .wrGrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:46px}body[data-controls=touch] .wrActions{flex-wrap:wrap}body[data-controls=touch] .wrStart{flex:1 1 100%}}
body[data-controls=touch] .roomPopup{padding:max(8px,env(safe-area-inset-top)) var(--safeR) max(8px,env(safe-area-inset-bottom)) var(--safeL)}body[data-controls=touch] .rpCard{max-height:calc(100dvh - 16px)}
@media(orientation:landscape) and (max-height:560px){
 .rpHead{padding:10px 14px 6px}.rpHead h3{font-size:18px}.rpBody{padding:4px 14px 8px;gap:8px}.rpCol{gap:8px}.rpFoot{padding:8px 14px 10px}.rpError{margin:0 14px 6px}.rpList{max-height:none}
 .rpCard[data-kind=filter] .rpBody{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-content:start}.rpCard[data-kind=filter] .rpField{grid-row:span 5}
 /* Integration QA (812×375): two 5-part steppers side by side do not fit the left column (the inputs shrank to 0 and the ±10
    buttons overlapped), so 시작 and 끝 stack. */
 .rpRange{grid-template-columns:minmax(0,1fr);gap:4px}.rpRange>b{justify-self:center;line-height:1}.rpStepper.small{grid-template-columns:auto auto minmax(56px,1fr) auto auto}
 .briefing{padding-top:6px;padding-bottom:6px}.brCard{gap:6px}.brHead h3{margin-top:2px;font-size:19px}.brHead .eyebrow{display:none}.brPage{padding:8px 12px}
 body[data-controls=touch] #unlockLine{margin:-6px 0 6px;font-size:11px}
}
@media(max-width:640px){.rpCols{grid-template-columns:minmax(0,1fr)}.rpRange{grid-template-columns:minmax(0,1fr);gap:4px}.rpRange>b{justify-self:center;line-height:1}.wrGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.wrBody{grid-template-columns:minmax(0,1fr)}.brPages{grid-template-columns:minmax(0,1fr)}}
/* (The PC UI scale rules for the room popup / briefing cards live in the "v10.8 PC UI scale" block, like every scale rule.) */
/* ==== end v10.9 rooms ================================================================================================ */
/* ==== v10.9.2 PC 버전 다운로드 (public/desktop.js; login panel only, hidden while the URL is empty / on phones / in the exe) ==== */
.desktopDownload{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #ffffff1c}.desktopDownload[hidden]{display:none}.desktopDownloadBtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #56e4ff88;border-radius:12px;background:linear-gradient(100deg,#56e4ff1f,#7a5cff2e);color:#dff8ff;font-weight:700;text-decoration:none;transition:border-color .12s,box-shadow .12s}.desktopDownloadBtn::before{content:'⬇'}.desktopDownloadBtn:hover,.desktopDownloadBtn:focus-visible{border-color:#56e4ff;box-shadow:0 0 18px #56e4ff44}.desktopDownloadNote{color:var(--muted);font-size:11px;line-height:1.4;text-align:center}
/* ==== v10.9.3 훈련소 DPS 측정 (dps-meter-ui.js; user: "훈련소에서 DPS측정 기능만들어주고 30초간딜한거 DPS랭킹에표기"): right side, training ground only ==== */
#dpsPanel{position:absolute;right:var(--safeR);top:140px;z-index:7;width:min(250px,calc(100vw - 32px));padding:10px 12px;border-radius:12px;background:linear-gradient(#10232be8,#10232bc4);border:1px solid #56e4ff44;box-shadow:0 6px 20px #0006;display:grid;gap:7px;font-size:12px;pointer-events:auto;animation:llIn .2s ease-out}
#dpsPanel[hidden]{display:none}
#dpsPanel p{margin:0;line-height:1.45}
#dpsPanel .dpsHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#dpsPanel .dpsHead b{font-size:14px;color:#cdf6ff;letter-spacing:.02em}
#dpsPanel .dpsHead small{font-size:10px;color:#9fb4b8}
#dpsPanel .dpsNote{font-size:11px;color:#c8d4d3}
#dpsPanel .dpsBest{font-size:11px;color:#ffe1ad}#dpsPanel .dpsBest b{font-size:13px;font-variant-numeric:tabular-nums}
#dpsPanel .dpsState{display:grid;gap:2px;padding:8px;border-radius:9px;background:#56e4ff18;border:1px dashed #56e4ff66;text-align:center}
#dpsPanel .dpsState b{font-size:15px;color:#fff;animation:bbPulse .8s ease-in-out infinite alternate}
#dpsPanel .dpsState small{font-size:10px;color:#adbcba}
#dpsPanel .dpsClock{display:flex;align-items:baseline;justify-content:center;gap:5px}
#dpsPanel .dpsClock b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
#dpsPanel .dpsClock small{font-size:11px;color:#adbcba}
#dpsPanel .dpsTrack{height:6px;border-radius:4px;background:#ffffff1c;overflow:hidden}
#dpsPanel .dpsTrack i{display:block;height:100%;background:linear-gradient(90deg,#2fb7d6,#8ff0ff);transition:width .1s linear}
#dpsPanel .dpsStats{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#dpsPanel .dpsStats div{min-width:0;padding:4px 5px;border-radius:7px;background:#ffffff0d;text-align:center}
#dpsPanel .dpsStats dt{font-size:9px;color:#9fb4b8}
#dpsPanel .dpsStats dd{margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
#dpsPanel .dpsResult{display:grid;justify-items:center;gap:2px;padding:6px;border-radius:9px;background:#ffd47a14;border:1px solid #ffd47a55}
#dpsPanel .dpsResult small{font-size:10px;color:#ffe1ad}
#dpsPanel .dpsResult b{font-size:28px;line-height:1.05;color:#ffd47a;font-variant-numeric:tabular-nums}
#dpsPanel :is(.dpsLine,.dpsWarn){padding:5px 7px;border-radius:7px;background:#ffffff0d;color:#dbe6e4;font-size:11px}
#dpsPanel :is(.dpsLine,.dpsWarn) small{display:block;margin-top:2px;font-size:10px;font-weight:400;opacity:.85}
#dpsPanel .dpsLine.best{background:#6fe3a222;color:#b6ffd6;font-weight:700}
#dpsPanel :is(.dpsLine.party,.dpsWarn){background:#ffb45a1f;color:#ffd6a0}
#dpsPanel .dpsBtns{display:flex;gap:6px}
#dpsPanel .dpsBtns button{flex:1;min-height:36px;padding:6px 10px;border-radius:9px;font-size:13px}
#dpsPanel .dpsBtns kbd{margin-left:6px;font-size:10px}
/* Phones: narrower and shorter, so the result stays clear of the dodge button (bottom right) on a 390 px tall screen. */
body[data-controls=touch] #dpsPanel{top:104px;width:min(220px,36vw);max-height:calc(100dvh - 104px - 96px);overflow-y:auto;padding:6px 8px;gap:4px;font-size:10px}
body[data-controls=touch] #dpsPanel :is(.dpsNote,.dpsState small,.dpsHead small,kbd){display:none}
body[data-controls=touch] #dpsPanel .dpsHead b{font-size:12px}
body[data-controls=touch] #dpsPanel :is(.dpsClock b,.dpsResult b){font-size:18px}
body[data-controls=touch] #dpsPanel .dpsResult{padding:3px 6px;gap:0}
body[data-controls=touch] #dpsPanel .dpsStats div{padding:2px 4px}
body[data-controls=touch] #dpsPanel .dpsStats dd{font-size:11px}
body[data-controls=touch] #dpsPanel :is(.dpsLine,.dpsWarn){padding:3px 6px;font-size:10px;line-height:1.3}
body[data-controls=touch] #dpsPanel .dpsBtns button{min-height:32px;padding:4px 6px;font-size:11px}
/* The ranking window's tabs wrap now that it has eight (three DPS tabs). */
#rankSheet .gearTabs{flex-wrap:wrap}
/* ==== end v10.9.3 DPS ==== */
/* ==== v10.9.3 훈련소 딜 로그 (dmg-log-ui.js; user: "어떤 스킬로 딜을 넣었는지 옆에 딜로그도 보였으면 좋겠어. 파생 스킬은 해당 스킬 하위 스킬로
   보이게끔 해주고 세부내역" → "훈련장 dps야"): left of #dpsPanel, top-aligned with it, the DPS panel's look. It ends above the skill
   bar (its own scroll). PC: 숨기기 leaves the '딜 로그' button. Phones: only that button, which opens the log as a sheet left of the
   DPS panel, clear of the joystick (bottom left), the skill buttons (bottom middle) and the dodge button (bottom right). ==== */
#dmgLog{position:absolute;right:calc(var(--safeR) + min(250px,calc(100vw - 32px)) + 8px);top:140px;z-index:7;width:min(332px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:flex-end;font-size:11px;pointer-events:none}
#dmgLog[hidden]{display:none}
#dmgLog>*{pointer-events:auto}
#dmgLog .dlBody{width:100%;max-height:calc(100dvh - 330px);padding:8px 10px;border-radius:12px;background:linear-gradient(#10232be8,#10232bc4);border:1px solid #56e4ff44;box-shadow:0 6px 20px #0006;display:flex;flex-direction:column;gap:5px;animation:llIn .2s ease-out}
#dmgLog .dlHead{display:flex;align-items:center;gap:8px}
#dmgLog .dlHead b{font-size:14px;color:#cdf6ff;letter-spacing:.02em}
#dmgLog .dlHead small{font-size:10px;color:#9fb4b8}
#dmgLog :is(.dlHide,.dlChip){min-height:0;margin:0;padding:3px 9px;border-radius:8px;border:1px solid #56e4ff44;background:#ffffff10;color:#cdf6ff;font-size:10px;font-weight:700;line-height:1.3}
#dmgLog .dlHide{margin-left:auto}
#dmgLog .dlChip{display:none;padding:6px 12px;border-radius:999px;background:linear-gradient(#10232be8,#10232bc4);border-color:#56e4ff66;box-shadow:0 4px 14px #0006;font-size:12px}
#dmgLog .dlChip::after{content:' ▾';color:#8ff0ff}
#dmgLog :is(.dlCols,.dlRow){display:grid;grid-template-columns:minmax(0,1fr) 62px 40px 32px 56px;column-gap:4px;align-items:center}
/* The column heads scroll with the rows (sticky), so a scroll bar never shifts them off their columns. */
#dmgLog .dlCols{position:sticky;top:0;z-index:1;padding:0 4px 2px;background:#10232bf2;font-size:9px;color:#9fb4b8}
#dmgLog .dlCols span:not(:first-child){text-align:right}
#dmgLog .dlRows{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:2px;scrollbar-width:thin;scrollbar-color:#56e4ff55 transparent}
#dmgLog .dlRow{position:relative;padding:3px 4px 5px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
#dmgLog .dlRow>:not(.dlName,.dlBar){text-align:right;overflow:hidden;text-overflow:ellipsis}
#dmgLog .dlRow>b{color:#fff;font-weight:700}
#dmgLog .dlRow>[data-f=share]{color:#8ff0ff}
#dmgLog .dlRow>[data-f=hits]{color:#c8d4d3}
#dmgLog .dlRow>[data-f=max]{color:#ffe1ad}
#dmgLog .dlName{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#eaf6f8;font-weight:700}
#dmgLog .dlGroup>.dlRow{background:#ffffff0a}
#dmgLog .dlRow.fold{cursor:var(--game-cursor-pointer,pointer)}
#dmgLog .dlRow.fold:hover{background:#56e4ff1c}
#dmgLog .dlChev{flex:none;width:14px;min-height:0;height:14px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;color:#8ff0ff;font-size:12px;line-height:14px;text-align:center}
#dmgLog .dlChev:hover{box-shadow:none}
#dmgLog .dlChev::before{content:'▸';display:inline-block;transition:transform .12s}
#dmgLog .dlGroup[data-open="1"] .dlChev::before{transform:rotate(90deg)}
#dmgLog .dlSubs{display:grid;gap:1px;margin:1px 0 2px 7px;padding-left:4px;border-left:1px solid #56e4ff33}
#dmgLog .dlGroup[data-open="0"] .dlSubs{display:none}
#dmgLog .dlRow.sub{padding-top:2px;padding-bottom:4px}
#dmgLog .dlRow.sub .dlName{font-weight:400;color:#c8d4d3}
#dmgLog .dlRow.sub.base .dlName{color:#9fb4b8}
#dmgLog .dlBar{position:absolute;left:4px;right:4px;bottom:1px;height:2px;border-radius:2px;background:#ffffff12;overflow:hidden}
#dmgLog .dlBar i{display:block;height:100%;background:linear-gradient(90deg,#2fb7d6,#8ff0ff);transition:width .1s linear}
#dmgLog .dlRow.sub .dlBar i{background:#8ff0ff88}
#dmgLog .dlEmpty{margin:4px 0;color:#9fb4b8;text-align:center}
#dmgLog .dlFoot{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
#dmgLog .dlFoot div{min-width:0;padding:3px 4px;border-radius:7px;background:#ffffff0d;text-align:center}
#dmgLog .dlFoot dt{font-size:9px;color:#9fb4b8}
#dmgLog .dlFoot dd{margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
body:not([data-controls=touch]) #dmgLog[data-off] .dlBody{display:none}
body:not([data-controls=touch]) #dmgLog[data-off] .dlChip{display:inline-flex}
/* (Its PC UI scale cap lives in the "v10.8 PC UI scale" block, like every scale rule.) */
/* Phones: the '딜 로그' button left of the DPS panel; open, the sheet ends 48 px above the bottom, above the skill buttons
   (measured at 844×390: the buttons start 36 px up, the joystick ends at x 108, the dodge button starts at x 754). */
body[data-controls=touch] #dmgLog{top:104px;right:calc(var(--safeR) + min(220px,36vw) + 6px);width:min(330px,calc(100vw - min(220px,36vw) - var(--safeL) - var(--safeR) - 120px));font-size:10px}
body[data-controls=touch] #dmgLog .dlChip{display:inline-flex;padding:5px 11px;font-size:11px}
body[data-controls=touch] #dmgLog[data-open] .dlChip{display:none}
body[data-controls=touch] #dmgLog:not([data-open]) .dlBody{display:none}
body[data-controls=touch] #dmgLog .dlBody{max-height:calc(100dvh - 104px - 48px);padding:6px 8px;gap:3px}
body[data-controls=touch] #dmgLog .dlHead b{font-size:12px}
body[data-controls=touch] #dmgLog .dlHide{padding:4px 10px;font-size:11px}
body[data-controls=touch] #dmgLog :is(.dlCols,.dlRow){grid-template-columns:minmax(0,1fr) 58px 38px 30px 52px;column-gap:3px}
body[data-controls=touch] #dmgLog .dlFoot dd{font-size:10px}
/* ==== end v10.9.3 딜 로그 ==== */
/* Phone loading readability (user: "핸드폰 로딩화면 작은문제"). Local glass-size correction inside the unchanged 800 / 70% fit. */
html.phoneFit body[data-controls=touch] #phoneReconnect{position:fixed;z-index:250;left:50%;top:20%;transform:translateX(-50%);zoom:var(--vvk,1);display:grid;gap:6px;width:min(460px,calc(100vw / var(--vvk,1) - 24px));padding:14px 18px;border:1px solid #b6a3ff66;border-radius:14px;background:#100b25f5;text-align:center;pointer-events:none}
html.phoneFit body[data-controls=touch] #phoneReconnect b{font-size:20px}
html.phoneFit body[data-controls=touch] #phoneReconnect span{font-size:14px}
/* v10.15.6: "파티원 목록정도가 글씨폰트가 적당" — same HUD units, no independent meter zoom. */
html.phoneFit.phHud body[data-controls=touch].playing{--party-font:calc(16px * var(--phk));--party-line:1.5;--party-width:calc(180px * var(--phk));--party-pad-y:calc(2px * var(--phk));--party-pad-x:calc(6px * var(--phk));--party-radius:calc(6px * var(--phk));--party-row:calc(28px * var(--phk) + 4px);--party-bg:#140f2ecc;--party-border:1px solid #ffffff22;--meter-gap:calc(2px * var(--phk))}
html.phoneFit.phHud body[data-controls=touch].playing.phChatOpen #bossMeter,html.phoneFit.phHud body[data-controls=touch].playing.phChatOpen #raidHud .rhMeter{display:none}
html.phoneFit.phHud body[data-controls=touch].playing :is(#bossMeter,#raidHud .rhMeter){zoom:1;box-sizing:border-box;width:var(--party-width);font-size:var(--party-font);line-height:var(--party-line);padding:0;gap:var(--meter-gap);border:0;border-radius:0;background:none;box-shadow:none;pointer-events:auto;max-height:max(30dvh,calc(5 * var(--party-row) + 4 * var(--meter-gap)));overflow:auto;overscroll-behavior:contain}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter :is(.bmToggle,.bmRow),html.phoneFit.phHud body[data-controls=touch].playing #raidHud :is(.rhMeterHead,.rhRow){box-sizing:border-box;min-height:var(--party-row);padding:var(--party-pad-y) var(--party-pad-x);margin:0;border:var(--party-border);border-radius:var(--party-radius);background:var(--party-bg);font-size:var(--party-font);line-height:var(--party-line);gap:var(--meter-gap)}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmToggle{display:flex;justify-content:space-between;align-items:center;width:100%;touch-action:manipulation}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmToggle span{font-size:inherit;color:#cfe8ff}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmHead{display:none}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmRow{display:flex}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmRank{width:calc(14px * var(--phk));font-size:inherit;flex:none}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmDmg{flex:none;white-space:nowrap}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter .bmDmg small{display:none}
html.phoneFit.phHud body[data-controls=touch].playing #bossMeter.bmClosed :is(.bmHead,.bmRow){display:none}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhMeter{left:var(--safeL);right:auto;top:var(--phone-meter-top,26vh);bottom:auto;max-height:max(30dvh,calc(5 * var(--party-row) + 4 * var(--meter-gap)))}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhMeterHead{width:100%}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhRows{display:grid;gap:var(--meter-gap);padding:var(--meter-gap) 0 0;max-height:none}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhMeter.closed .rhRows{display:none}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhRow{grid-template-columns:calc(14px * var(--phk)) minmax(0,1fr) max-content}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud :is(.rhHeadRow,.rhRow>span:nth-child(n+4),.rhName small){display:none}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhRow.me{box-shadow:inset 0 0 0 1px #ff8fc4cc}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhPlayer summary{list-style:none;cursor:pointer;touch-action:manipulation}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhPlayer summary::-webkit-details-marker{display:none}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhDetail{padding:var(--party-pad-y) var(--party-pad-x);font-size:var(--party-font);line-height:var(--party-line);background:var(--party-bg);overflow-wrap:anywhere}
html.phoneFit.phHud body[data-controls=touch].playing.raidMode #leftStack{padding-top:0}
html.phoneFit.phHud body[data-controls=touch].playing:has(#bossMeter:not([hidden])) #hud #party,html.phoneFit.phHud body[data-controls=touch].playing.raidMode:has(.rhMeter:not(.closed)) #hud #party{max-height:calc(108px * var(--phk));overflow-y:auto;overscroll-behavior:contain;pointer-events:auto}
html.phoneFit.phHud body[data-controls=touch].playing:has(#bossMeter:not([hidden]):not(.bmClosed)) #phTicker,html.phoneFit.phHud body[data-controls=touch].playing.raidMode:has(.rhMeter:not(.closed)) #phTicker{position:fixed;left:calc(var(--safeL) + var(--party-width) + 8px);top:var(--phone-meter-top,26vh);width:calc(200px * var(--phk));max-width:calc(200px * var(--phk));max-height:calc(96px * var(--phk));overflow:hidden}
html.phoneFit body[data-controls=touch] #splash .splashCredit{font-size:calc(15px * var(--vvk,1))}
html.phoneFit body[data-controls=touch] #splash .splashTitle{font-size:calc(42px * var(--vvk,1))}
html.phoneFit body[data-controls=touch] #splash :is(.splashSub,.splashTag){font-size:calc(15px * var(--vvk,1))}
html.phoneFit body[data-controls=touch] #opening .opWait{width:calc(28px * var(--vvk,1));height:calc(28px * var(--vvk,1));border-width:calc(2px * var(--vvk,1))}
html.phoneFit body[data-controls=touch] #opening .opSkip{zoom:var(--vvk,1);font-size:13px;min-height:36px;bottom:calc(7vh / var(--vvk,1) + 12px)}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])){place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 35%,#2a1d5cf4,#0b0718fc 72%)}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])) .loadCard{zoom:var(--vvk,1);width:min(720px,calc(100vw / var(--vvk,1) - 32px));max-height:calc(100dvh / var(--vvk,1) - 24px);overflow:auto;padding:20px 24px;gap:14px}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])) .loadTitle b{font-size:24px}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])) :is(.loadInfo,.loadTip){font-size:14px}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])) :is(.loadTitle small,.loadTip b){font-size:13px}
html.phoneFit body[data-controls=touch] #loadingScreen:has(.loadBody:not([hidden])) .loadSkip{font-size:13px;min-height:36px}
html.phoneFit body[data-controls=touch] #joinLoading{padding:calc(12px * var(--vvk,1));align-items:center}
html.phoneFit body[data-controls=touch] #joinLoading .jlCard{zoom:var(--vvk,1);width:calc(68vw / var(--vvk,1));max-height:calc(100dvh / var(--vvk,1) - 24px);overflow:auto;padding:10px 14px;box-sizing:border-box;background:#110c27ed}
html.phoneFit body[data-controls=touch] #joinLoading .eyebrow{display:none}
html.phoneFit body[data-controls=touch] #joinLoading h3{font-size:22px;margin:0 0 6px}
html.phoneFit body[data-controls=touch] #joinLoading .jlBar{width:100%;height:8px;margin-bottom:8px}
html.phoneFit body[data-controls=touch] #joinLoading .jlMap{font-size:14px;margin:0 0 6px}
html.phoneFit body[data-controls=touch] #joinLoading :is(.jlTip small,.jlTip em,.jlTip li,.jlTip kbd){font-size:13px}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip{padding:8px 10px}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip li{line-height:1.35}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip ul{gap:4px}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip small{margin-bottom:2px}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip em{margin:2px 0 4px}
html.phoneFit body[data-controls=touch] #joinLoading .jlTip b{font-size:18px}

html.phoneFit body[data-controls=touch] #loginProgress .loginProgressCard{zoom:var(--vvk,1);width:min(680px,calc(100vw / var(--vvk,1) - 32px));max-height:calc(100dvh / var(--vvk,1) - 24px);overflow:auto;padding:16px}
html.phoneFit body[data-controls=touch] #loginProgress h2{font-size:22px;margin-bottom:8px}
html.phoneFit body[data-controls=touch] #loginProgress :is(.loginProgressDetail,.loginSteps){font-size:14px}
html.phoneFit body[data-controls=touch] #loginProgress :is(.loginSteps li,.loginSteps span,.loginProgressCard button){font-size:13px}
html.phoneFit body[data-controls=touch] #loginProgress .loginProgressPct{margin:4px 0 6px}
html.phoneFit body[data-controls=touch] #loginProgress .loginSteps{gap:4px;margin-bottom:8px}
html.phoneFit body[data-controls=touch] #loginProgress .loginProgressCard button{min-height:36px;margin-top:10px}
/* End phone loading readability. */
/* ==== v10.9.3 splash · 바로 로그인 · 업데이트 내역 (splash.js, update-notes-ui.js; the loading step is in the "Boot loading" block) ==== */
/* Splash (user: "처음에 제작자 냉하리 좀비 서바이벌 이런 식으로 로딩창 하나 뜨고"): over everything from the first paint (dark, empty until the
   bundle fills it — then the credit, the title and the subtitle fade in), gone after ~2.5 s or on a click / key. No illustration. */
#splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:radial-gradient(110% 85% at 50% 42%,#231a47 0%,#100b22 52%,#05040b 100%);cursor:var(--game-cursor-pointer,pointer);-webkit-user-select:none;user-select:none;transition:opacity .5s ease-in}
#splash[hidden]{display:none}#splash.out{opacity:0;pointer-events:none}
#splash:empty{animation:splashIdle .3s 8s forwards}/* the bundle never ran: it does not cover the page for good */
@keyframes splashIdle{to{opacity:0;visibility:hidden}}
.splashCard{display:grid;justify-items:center;gap:12px;text-align:center}
.splashCredit{font-size:clamp(12px,1.25vw,16px);letter-spacing:.34em;padding-left:.34em;color:#b7b1d8;animation:splashIn .6s ease-out both}
.splashTitle{font-family:var(--display);font-weight:400;font-size:clamp(48px,8.5vw,128px);line-height:1;letter-spacing:.06em;padding-left:.06em;color:#fff;text-shadow:0 0 34px #ff8fc44d,0 6px 30px #000c;animation:splashIn .7s .25s ease-out both}
.splashSub{font-size:clamp(15px,1.9vw,24px);letter-spacing:.5em;padding-left:.5em;color:var(--accent);animation:splashIn .7s .5s ease-out both}
@keyframes splashIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#splash[data-motion=reduced]{transition:none}#splash[data-motion=reduced] *{animation:none}
@media (prefers-reduced-motion:reduce){#splash{transition:none}#splash *{animation:none}}
@media (orientation:landscape) and (max-height:560px){.splashCard{gap:8px}.splashTitle{font-size:clamp(40px,11vh,72px)}}
/* 업데이트 내역 (user: "로그인 창 업뎃은 선택해서 볼 수 있게 하고"): the menu's 업데이트 tile (v10.11.20: no longer on the login — "로그인창
   집중하도록 업데이트내역X"), 설정 → 업데이트 내역, and the window — versions on the left (a row on a narrow portrait screen), the notes right. */
.updateNotes{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#05040bbf;backdrop-filter:blur(3px)}
.updateNotes[hidden]{display:none}
.unCard{width:min(940px,100%);height:min(680px,calc(100dvh - 32px));display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,#211a4cfa,#150f2efa);border:1px solid #a894ff55;border-radius:20px;box-shadow:0 25px 100px #000a}
.unHead{border-bottom:1px solid #ffffff18;padding:12px 16px}.unHead h2{margin:0;font-family:var(--display);font-weight:400;font-size:24px}.unClose{min-height:40px;padding:6px 14px}.unClose kbd{margin-left:4px;font-size:10px}
.unBody{flex:1;min-height:0;display:grid;grid-template-columns:210px minmax(0,1fr)}
.unList{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:10px;border-right:1px solid #ffffff14;scrollbar-width:thin}
.unList button{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 6px;min-height:46px;padding:6px 12px;text-align:left;background:#ffffff08;border:1px solid #ffffff1c;border-radius:10px}
.unList button b{font-size:14px}.unList button small{grid-column:1;font-size:11px;color:var(--muted)}.unList button em{grid-column:2;grid-row:1 / 3;font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--cyan);color:#07131a}
.unList button.on{border-color:var(--accent);background:#ff8fc424;color:#fff}
.unNote{overflow:auto;padding:16px 22px 24px;font-size:13px;line-height:1.7;scrollbar-width:thin}.unNote:focus{outline:none}
.unNote h3{margin:0;font-size:20px;color:#ffd6ec}.unNote h3 small{margin-left:6px;font-size:12px;font-weight:400;color:var(--muted)}.unTitle{margin:4px 0 8px;font-size:15px;font-weight:700}
.unNote h4{margin:14px 0 4px;font-size:13px;color:#8fd8ff}.unNote ul{margin:0;padding-left:18px}.unNote li{margin:3px 0;color:#e1e4f0}.unEmpty{color:var(--muted)}
@media (max-width:600px){.unBody{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.unList{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #ffffff14}.unList button{min-width:112px}}
@media (orientation:landscape) and (max-height:560px){.updateNotes{padding:8px}.unCard{height:calc(100dvh - 16px)}.unBody{grid-template-columns:156px minmax(0,1fr)}.unHead{padding:6px 12px}.unHead h2{font-size:18px}.unList{padding:6px;gap:4px}.unList button{min-height:36px;padding:3px 10px}.unList button b{font-size:12px}.unNote{padding:10px 14px 16px;font-size:12px}.unNote h3{font-size:16px}}
body[data-controls=touch] .unClose kbd{display:none}
/* (PC UI 크기: .unCard is zoomed and sized in the "v10.8 PC UI scale" block, like every scale rule.) */
/* ==== end v10.9.3 splash · 바로 로그인 · 업데이트 내역 ==== */
/* v10.11.5 설정 → 프레임 제한 (PC only, frame-clock.js installFrameCap shows it) */
#frameCapRow[hidden]{display:none}
/* v10.11.20 설정 → 화질 (display.js installRenderQuality; every device) */
#renderQualityRow[hidden]{display:none}
/* v10.11.5 성능 표시 (perf-overlay.js): one line at the top middle, never in the way of clicks */
#perfOverlay{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:95;padding:2px 10px;border-radius:6px;background:#000b;color:#cfeaff;font:600 12px/1.5 ui-monospace,Consolas,monospace;white-space:nowrap;pointer-events:none}#perfOverlay[hidden]{display:none}
/* v10.11.7 로그인 저장 (saved-login.js): a small checkbox row under the password, not a full-width field */
#loginPanel #rememberLabel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 10px;font-size:13px;line-height:1.3;cursor:var(--game-cursor-pointer,pointer)}#loginPanel #rememberLabel small{font-size:11px;color:var(--muted)}
#loginPanel #remember{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:#f3c686;cursor:var(--game-cursor-pointer,pointer)}
/* v10.11.8 휴대폰 화면 맞춤 (phone-fit.js): the fitted page never pans or bounces */
html.phoneFit,html.phoneFit body{overflow:hidden;overscroll-behavior:none}
/* v10.11.8 설정 창 크게 (user: "환경설정도 인게임에서 창크게해주고 다보이게 pc도동일"): one wide window in the middle — its rows in
   columns (3 where the width allows, else 2 / 1), every row in view without scrolling; PC, phone, lobby and battle alike. On a phone
   in a fight it opens at the phone's own size (app.js uiOpen({settings:false}): phone-fit stays off), so it is big there too. */
html body #settingsMenu:not([hidden]){position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 20px);min-width:0;display:block;columns:3 220px;column-gap:20px;padding:16px 20px 14px;overflow:auto;border-radius:16px;box-shadow:0 20px 70px #000c}
html body #settingsMenu:not([hidden])>*{break-inside:avoid}
html body #settingsMenu:not([hidden])>strong{display:block;column-span:all;padding:0 0 12px;font-size:19px}html body #settingsMenu:not([hidden])>strong small{font-size:12px}
html body #settingsMenu:not([hidden])>button{display:block;width:100%;margin:0 0 9px;min-height:46px;font-size:15px}
html body #settingsMenu:not([hidden]) .volumeRow{margin:0 0 12px;font-size:13px;grid-template-columns:84px minmax(80px,1fr) 42px}html body #settingsMenu:not([hidden]) .volumeRow input{min-height:28px}
html body #settingsMenu:not([hidden])>.voiceNote{column-span:all;margin:4px 0 0;font-size:11px}
@media (max-height:420px){html body #settingsMenu:not([hidden]){padding:10px 16px}html body #settingsMenu:not([hidden])>strong{padding-bottom:6px;font-size:16px}html body #settingsMenu:not([hidden])>button{min-height:38px;margin-bottom:6px;font-size:14px}html body #settingsMenu:not([hidden]) .volumeRow{margin-bottom:7px}}
/* v10.11.8 휴대폰 로그인 (user: "로그인화면 … 쓸모없이길다 모바일 환경에 맞게 재조정"): no keyboard guide on a touch screen (it showed
   behind the login once the fitted page was wider than 900 px), and the login column no wider than it needs */
body[data-controls=touch] #menuBackdrop .mbInfo{display:none!important}
html.phoneFit body[data-controls=touch]:not([data-account=in]) #lobby{grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:0 40px}
/* v10.11.8 (user: "환경설정 닫기버튼만들어"): ✕ 닫기 at the window's top right, the version beside it */
html body #settingsMenu #settingsClose{position:absolute;top:10px;right:12px;width:auto;min-height:34px;margin:0;padding:4px 14px;font-size:14px;z-index:1}
html body #settingsMenu:not([hidden])>strong{padding-right:110px}#settingsMenu:not([hidden])>strong small{float:none;margin-left:10px}
#settingsMenu[hidden] #settingsClose{display:none}
/* v10.11.8 안드로이드 앱 받기 (mobile-app.js) beside PC 버전 다운로드: one row, each half; alone it takes the row */
.downloadRow{display:flex;gap:8px;align-items:stretch}.downloadRow>.desktopDownload{flex:1 1 0;min-width:0}
.appDownloadBtn::before{content:'📱'}
/* v10.11.10 로그인 form (the browser's password manager offers to save the ID and password): no box of its own, the panel lays out its fields */
#loginForm{display:contents}
/* v10.11.10 훈련소 DPS 측정 on a phone: top left (the right side is the fight and the skill pad); its damage log beside it */
body[data-controls=touch] #dpsPanel{left:var(--safeL);right:auto}
body[data-controls=touch] #dmgLog{left:calc(var(--safeL) + min(220px,36vw) + 6px);right:auto;align-items:flex-start}
/* v10.11.11 앱으로 설치 (user: "아이폰 안드로이드 둘다다운되도록 꾸미고설정해줘"; mobile-app.js): PC · 안드로이드 · 아이폰 tiles under one heading,
   each with its icon and colour; only the ones this device can use (a PC shows all three) */
.downloadRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #ffffff1c}
.downloadRow::before{content:'앱으로 설치';grid-column:1/-1;margin-bottom:-2px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#cdf6ff}
.downloadRow:not(:has(.desktopDownload:not([hidden]))){display:none}
.downloadRow>.desktopDownload{margin:0;padding:8px;border:1px solid #ffffff1f;border-radius:14px;background:linear-gradient(160deg,#ffffff10,#ffffff04);display:grid;gap:6px;align-content:start}
.downloadRow>.desktopDownload[hidden]{display:none}
.downloadRow .desktopDownloadBtn{flex-direction:column;gap:6px;min-height:0;padding:10px 6px 9px;border-radius:11px;font-size:13px;text-align:center;line-height:1.2}
.downloadRow .desktopDownloadBtn::before{content:'';width:30px;height:30px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.downloadRow .desktopDownloadNote{font-size:10px;line-height:1.35}
#desktopDownload .desktopDownloadBtn{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 4h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v8h16V6zM8 19h8v2H8zm3-3h2v3h-2z'/></svg>")}
#appDownload .desktopDownloadBtn{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 1h10a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 3v15h10V4zm4 3h2v5h2l-3 3-3-3h2z'/></svg>");color:#c9ffe0;border-color:#3ddc8488;background:linear-gradient(100deg,#3ddc841f,#1f8a5a2e)}
#iosDownload .desktopDownloadBtn{--ico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 1h10a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 3v15h10V4zm4 4h2v3h3v2h-3v3h-2v-3H8v-2h3z'/></svg>");color:#f2f4ff;border-color:#e6e9ff88;background:linear-gradient(100deg,#ffffff1c,#9aa3c02e)}
#appDownload .desktopDownloadBtn:hover,#appDownload .desktopDownloadBtn:focus-visible{border-color:#3ddc84;box-shadow:0 0 18px #3ddc8444}
#iosDownload .desktopDownloadBtn:hover,#iosDownload .desktopDownloadBtn:focus-visible{border-color:#fff;box-shadow:0 0 18px #ffffff33}
/* v10.11.21d the old Android app's update notice (mobile-app.js mountAppUpdate): a bar over everything at the top. */
.appUpdate{position:fixed;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:10px;width:min(760px,calc(100vw - 16px));padding:8px 10px 8px 14px;border-radius:12px;background:#2a0f1ef2;border:1px solid #ff8fc4aa;box-shadow:0 8px 30px #000b;color:#ffe9f3;font-size:13px;font-weight:700;line-height:1.35}
.appUpdate span{flex:1;min-width:0}.appUpdate a{flex:none;padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,#ff5fa8,#8b6cff);color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}.appUpdate button{flex:none;min-width:34px;min-height:34px;padding:0;border:0;background:none;color:#ffd6ea;font-size:16px}
/* The install guide (mobile-app.js showInstallGuide) */
.installGuide{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:16px;background:#05040bcc;backdrop-filter:blur(3px)}
.igCard{width:min(430px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:18px 18px 14px;border-radius:18px;background:linear-gradient(#171233f7,#0f0b26f7);border:1px solid #a894ff55;box-shadow:0 20px 60px #000c;display:grid;gap:12px;color:#eef1ff}
.igHead{display:flex;align-items:center;gap:10px}.igHead h3{margin:0;font-size:18px}
.igIcon{flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#7a5cff,#56e4ff)}.igIcon.android{background:linear-gradient(135deg,#1f8a5a,#3ddc84)}.igIcon.ios{background:linear-gradient(135deg,#9aa3c0,#ffffff)}
.igLead{margin:0;font-size:13px;color:#cfd8e3}
.igSteps{margin:0;padding:0;list-style:none;counter-reset:ig;display:grid;gap:9px}
.igSteps li{counter-increment:ig;display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:start;font-size:14px;line-height:1.45}
.igSteps li::before{content:counter(ig);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#7a5cff;color:#fff;font-weight:800;font-size:13px}
.igSteps small{display:block;color:var(--muted);font-size:11px}
.igQr{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a}.igQr img{flex:none;width:132px;height:132px;border-radius:8px;background:#fff;padding:5px}
.igQr span{font-size:12px;color:#cfd8e3;line-height:1.55}.igQr b{color:#fff}
.igDone{margin:0;font-size:12px;color:#b8c7d6;line-height:1.5}
.igBtns{display:flex;gap:8px;flex-wrap:wrap}.igBtns>*{flex:1 1 110px;min-height:42px;margin:0}
.igDirect{display:grid;place-items:center;border:1px solid #3ddc8488;border-radius:10px;color:#c9ffe0;font-weight:700;text-decoration:none}
/* v10.11.11 the inline QR (qr-game.js) */
.igQr .igQrImg{flex:none;width:132px;height:132px;border-radius:8px;background:#fff;padding:5px;box-sizing:border-box}.igQr .igQrImg svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
/* v10.11.13 휴대폰 수동 전투 — the right-hand skill pad (touch-pad.js; app.js padMode): big round buttons bottom right over the
   look area; the small skill bar gives way to it. Positions are set per button (PAD in touch-pad.js). */
#touchPad{position:absolute;right:var(--safeR);bottom:var(--safeB);width:250px;height:200px;z-index:3;pointer-events:none}
#touchPad[hidden]{display:none}
body.padMode #hud #skillBar{display:none!important}
#touchPad .padBtn{position:absolute;display:grid;place-items:center;margin:0;padding:0;min-width:0;min-height:0;border-radius:50%;border:2px solid #ffffff4a;background:radial-gradient(circle at 50% 36%,#2b3d55e8,#0c131fe8);color:#fff;box-shadow:0 4px 14px #0009;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overflow:hidden;transition:transform .06s,border-color .15s,box-shadow .15s,opacity .15s}
#touchPad .padIcon{position:absolute;left:13%;top:13%;width:74%;height:74%;object-fit:contain;pointer-events:none;border-radius:50%}
#touchPad .padIcon:not([src]){display:none}
#touchPad .padCd{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(#000000b8 calc(var(--cd,0)*360deg),transparent 0);pointer-events:none}
#touchPad .padTime{position:relative;font:800 16px/1 Arial,sans-serif;text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none}
#touchPad .padName{display:none}#touchPad .padBtn.noIcon .padName{display:block;position:relative;font:800 12px/1.1 sans-serif;text-align:center;padding:0 4px;text-shadow:0 1px 3px #000;pointer-events:none}
#touchPad .padBtn.ready{border-color:#9ff0ffb0}
#touchPad .padBtn.active{border-color:#ffd36a;box-shadow:0 0 16px #ffd36acc}
#touchPad .padBtn:is(.empty,.locked){filter:grayscale(.85) brightness(.7)}
#touchPad .padBtn.pressed{transform:scale(.92);border-color:#fff;box-shadow:0 0 18px #ffffff66}
/* v10.11.20 수동 전투 v3: the big MAIN button (평타 held, or the skill 설정 → 조작 put there), every skill in an arc round it, 구르기
   left, the buff switch on top; the buttons' opacity is 설정 → 조작's (--padAlpha); [배치] drags them (they wiggle while it is on). */
#touchPad .padBtn:not(.pad-edit):not(.pad-reset){opacity:var(--padAlpha,.92)}
#touchPad .pad-main{border-width:3px;border-color:#ffffffa0;background:radial-gradient(circle at 50% 36%,#6a4bb0f0,#1a1030f0);box-shadow:0 5px 18px #000a,0 0 0 3px #ffffff14}
#touchPad .pad-main .padIcon{left:9%;top:9%;width:82%;height:82%}#touchPad .pad-main .padTime{font-size:20px}
#touchPad .pad-dodge{background:radial-gradient(circle at 50% 36%,#1f6272ea,#0a1d25ea)}
#touchPad .pad-buff{background:radial-gradient(circle at 50% 36%,#1d3a2cea,#0b1a12ea)}
#touchPad .pad-buff .padTime{display:none}
#touchPad .padSwitch{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);padding:1px 5px;border-radius:6px;background:#000000b0;font:800 9px/1.25 sans-serif;font-style:normal;color:#ffb4a0;pointer-events:none;white-space:nowrap}
#touchPad .padSwitch::after{content:'끔'}
#touchPad .pad-buff.on{border-color:#6fe3a2;box-shadow:0 0 12px #6fe3a2aa}
#touchPad .pad-buff.on .padSwitch{color:#b6ffd6}#touchPad .pad-buff.on .padSwitch::after{content:'자동'}
#touchPad .pad-buff:not(.on) .padIcon{opacity:.4;filter:grayscale(.7)}
#touchPad :is(.pad-edit,.pad-reset){height:24px;width:auto;padding:0 9px;border-radius:8px;border-width:1px;font:700 11px/1 sans-serif;white-space:nowrap;box-shadow:0 2px 8px #0008}
#touchPad .pad-edit{color:#dfe8ff;background:#10232bc8;border-color:#ffffff40}
#touchPad .pad-reset{color:#ffe1ad;background:#2a1f10e0;border-color:#ffd36a88}
/* v10.11.21f the wizard's 평타 switch: gold ring + '자동 공격' while it fires. */
#touchPad .pad-main.firing,#touchPad .pad-skill.firing{border-color:#ffd36a;box-shadow:0 0 0 3px #ffd36a66,0 0 18px #ffd36aaa}
#touchPad .pad-main.firing::after,#touchPad .pad-skill.firing::after{content:'자동 공격';position:absolute;left:50%;top:5px;z-index:3;transform:translateX(-50%);padding:1px 6px;border-radius:6px;background:#000000c0;font:800 10px/1.3 sans-serif;color:#ffe3a0;white-space:nowrap;pointer-events:none}
#touchPad.editing .padBtn:not(.pad-edit):not(.pad-reset){animation:padWiggle .5s ease-in-out infinite alternate;border-style:dashed;opacity:1}
#touchPad.editing::before{content:'버튼을 끌어서 옮기세요';position:absolute;right:0;bottom:312px;padding:4px 8px;border-radius:7px;background:#10232be8;font-size:12px;line-height:16px;color:#dfe8ff;white-space:nowrap}
/* v10.11.14 수동: which way the nearest off-screen enemy is (view-hint.js) — turn the camera there and the skills go */
#viewHint{position:absolute;top:30%;z-index:4;padding:4px 9px;border-radius:9px;background:#000000a0;border:1px solid #ffd36a66;font:800 15px/1 sans-serif;color:#ffd36a;text-shadow:0 1px 3px #000;pointer-events:none;animation:viewHintPulse .7s ease-in-out infinite alternate}
#viewHint[hidden]{display:none}
#viewHint.left{left:calc(env(safe-area-inset-left) + 10px)}#viewHint.right{right:calc(env(safe-area-inset-right) + 10px)}
@keyframes viewHintPulse{from{opacity:.55}to{opacity:1}}
/* v10.11.14 (user: "딜미터기도 작게 좌측에"): the DPS card on a phone is small at the left edge — no heading before a measurement
   (its button says it), tighter rows; the damage log moves up beside it; the boss meter is narrower */
body[data-controls=touch] #dpsPanel{width:min(150px,26vw);top:96px;padding:5px 6px;gap:3px;border-radius:10px}
body[data-controls=touch] #dpsPanel:not(:has(.dpsState,.dpsClock,.dpsResult)) .dpsHead{display:none}
body[data-controls=touch] #dpsPanel .dpsBtns button{min-height:26px;padding:3px 6px;font-size:10px}
body[data-controls=touch] #dpsPanel .dpsBest{font-size:9px}
body[data-controls=touch] #dpsPanel .dpsStats dt{font-size:8px}
body[data-controls=touch] #dpsPanel .dpsStats dd{font-size:10px}
body[data-controls=touch] #dmgLog{top:96px;left:calc(var(--safeL) + min(150px,26vw) + 6px)}
body[data-controls=touch] #bossMeter{width:132px}
@keyframes padWiggle{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
/* v10.11.14 휴대폰 창 가독성 (user: "핸드폰 ui 아이템 정보 스킬 펫 장착 인챈트 제작 전부 가독성부분수정해줘", "소지품 창고위로쏠려서
   아래가잘안보여"): a reading window lays the page out 440 px tall (phone-fit.js FIT_SHEET, ×0.78 instead of ×0.62), which also
   brings in the windows' own landscape-phone layouts (max-height:500px: the bag / stash column down to the bottom). On top of
   that the small print is raised — 10-11 px notes, grades, counts and hints to 12.5 px, the item lines, craft rows and skill
   point rows to 13.5 px (≈ 10 px on the phone) — and the worn tiles are flatter, so the picked item's card has more room. */
html.phoneFit body[data-controls=touch] :is(#gearSheet,#charInfoSheet,#craftSheet,#skillSheet,#probSheet,#rankSheet,#petSheet) :is(small,kbd,p.muted,.note,.infoHint,.spRule,.resetHint,.craftEmpty,.petSteps li,.gearGold){font-size:12.5px}
html.phoneFit body[data-controls=touch] :is(#gearSheet,#charInfoSheet,#craftSheet,#skillSheet,#probSheet,#rankSheet,#petSheet) :is(.itemBase,.itemOpts li,.itemSpecial,.itemSet li,.itemPair,.compare b,.compare li,.craftTab,.craftCost,.craftOddsList li,.craftOddsSum,.craftGroup,.spPct,.spVal,.skillPassive,.skillCard p,.resetCost,.resetOwn,.resetWhyLine,.resetLine>span,dl dt,dl dd,table th,table td,.petRole,.petHint,.petGold,.petOdds summary,.petOdds p){font-size:13.5px}
html.phoneFit body[data-controls=touch] #gearSheet :is(.craftLink,.paneMove,.stashTab,.autoSell b,.autoSell label){font-size:13px}
/* The ✕ stays top right whatever the header holds (a long gold / pity line wraps under the tabs instead of pushing ✕ down). */
html.phoneFit body[data-controls=touch] .gearSheet .gearTop{position:relative;padding-right:52px}
html.phoneFit body[data-controls=touch] .gearSheet .gearTop>.gearClose{position:absolute;top:0;right:0;margin:0}
html.phoneFit body[data-controls=touch] #craftSheet .bagGrid.craftCells{grid-template-columns:repeat(7,minmax(0,1fr))}
/* v10.11.16 10초 인트로 (splash.js; user: "핸드폰으로하면 처음시작 인트로 너무짧다 / Pc든 핸드폰이든 10초짜리로만들고 그동안 미리 로딩준비"):
   the credit alone (0.3-3 s), the title sharpening in (3.2 s), the subtitle (4.4 s), the tagline (5.8 s), signal rings pulsing behind,
   faint scan lines drifting; the boot load's bar at the bottom from 0.6 s, [건너뛰기] bottom right from 1.5 s; faded out over the
   last 0.7 s. Reduced motion: the same 10 s, all of it at once and still (the credit above the title). */
#splash{cursor:var(--game-cursor-default,default);overflow:hidden;transition:opacity .7s ease-in}
/* v10.11.20 (user: "인트로는 8초로줄이자"): every beat scaled to the 8 s intro (credit 0.8–2.5 s, title 2.5 s, subtitle 3.5 s, tagline 4.6 s). */
#splash::before{content:'';position:absolute;inset:-8% 0;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 4px);animation:splashScan 8s linear both;pointer-events:none}
.splashStage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.splashStage>*{grid-area:1/1}
.splashSignal{position:relative;width:min(64vmin,520px);aspect-ratio:1;pointer-events:none}
.splashSignal i{position:absolute;inset:0;border-radius:50%;border:2px solid #ff8fc466;box-shadow:0 0 24px #ff8fc422 inset;opacity:0;animation:splashPing 3s ease-out infinite}
.splashSignal i:nth-child(2){animation-delay:1s}.splashSignal i:nth-child(3){animation-delay:2s}
/* v10.11.21 (user: "인트로 글씨 조금더먼저보이게한다음 진행하자"): the words come sooner — credit 0.1–1.4 s, title 1.2 s, subtitle 2 s, tagline 2.7 s. */
.splashCredit{font-size:clamp(14px,1.7vw,22px);animation:splashCredit 8s linear both}
.splashTitle{animation:splashTitleIn 1.1s 1.2s cubic-bezier(.2,.7,.2,1) both}
.splashSub{animation:splashIn .7s 2s ease-out both}
.splashTag{margin:14px 0 0;font-size:clamp(14px,1.7vw,21px);letter-spacing:.26em;padding-left:.26em;color:#ece8ff;text-shadow:0 0 18px #8f7bff66;animation:splashIn .8s 2.7s ease-out both}
.splashLoad{position:absolute;left:0;right:0;margin:0 auto;bottom:max(26px,7vh);width:min(420px,68vw);display:grid;gap:8px;justify-items:center;animation:splashIn .6s .6s ease-out both}
.splashBar{width:100%;height:4px;border-radius:4px;background:#ffffff1c;overflow:hidden}
.splashBar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff5fa8,#8f7bff);box-shadow:0 0 10px #ff8fc488;transition:width .4s ease-out}
.splashLoadText{font-size:clamp(11px,1.1vw,13px);letter-spacing:.14em;color:#b7b1d8;font-variant-numeric:tabular-nums}
.splashSkip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,5vh);min-height:0;margin:0;padding:7px 15px;border-radius:999px;border:1px solid #ffffff38;background:#ffffff10;color:#dcd8f2;font-size:12px;letter-spacing:.06em;cursor:var(--game-cursor-pointer,pointer);animation:splashIn .5s 1.5s ease-out both}
.splashSkip:hover,.splashSkip:focus-visible{background:#ffffff22;border-color:#ffffff66}
#splash[data-motion=reduced]::before{animation:none}
#splash[data-motion=reduced] .splashStage{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}
#splash[data-motion=reduced] .splashSignal{display:none}
@media (prefers-reduced-motion:reduce){#splash::before{animation:none}}
@keyframes splashCredit{0%,1%{opacity:0;transform:translateY(10px)}5%,13%{opacity:1;transform:none}17%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes splashTitleIn{from{opacity:0;letter-spacing:.42em;filter:blur(10px)}to{opacity:1;letter-spacing:.06em;filter:none}}
@keyframes splashPing{0%{transform:scale(.22);opacity:0}14%{opacity:.85}100%{transform:scale(1.28);opacity:0}}
@keyframes splashScan{from{transform:translateY(0)}to{transform:translateY(4%)}}
/* v10.11.16 휴대폰 대기실 (user: "대기방조절해줘 ui · 핸드폰말하는거"): the 대기실 lays out on phone-fit.js FIT_SHEET like the reading windows
   (app.js: roomUi.inRoom and not in a fight), and its print is raised — the member cards (아이디 · 직업 · 전투력 · 계급 · tags were
   6-7 px on the phone), the chat, the clear rule, the header chips. */
html.phoneFit body[data-controls=touch] #waitingRoom .wrId{font-size:15px}
html.phoneFit body[data-controls=touch] #waitingRoom :is(.wrCard>.wrClass,.wrCp b){font-size:13px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrCard .wrRank svg{width:26px;height:26px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrCard .wrRank small{max-width:56px;font-size:11px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrTags i:not(.tag-first,.tag-locked){font-size:11px;padding:1px 5px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrTags i:is(.tag-first,.tag-locked){width:9px;height:9px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrCard.empty{font-size:13px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrLog{font-size:13.5px;line-height:1.5}
html.phoneFit body[data-controls=touch] #waitingRoom .wrRule{font-size:13px;padding:6px 10px}
html.phoneFit body[data-controls=touch] #waitingRoom :is(.wrChips i,.wrStage){font-size:13px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrChars img{width:40px;height:40px}
/* v10.11.17 (user: "던전결과창과 장착 아이템쪽에 선택한아이템쪽 글씨아이콘ui. 축소해서 한눈에최대한보이게해줘"): the result window in one look —
   the MVP a single strip, tight scoreboard rows (8 players), the buttons on one line (it scrolled: 701 px of content in 542 on a
   phone). */
/* v10.12 (user: "전투결과창도 좀작게 변경하고 …", "결과창 정비해줘"): smaller again — 560 px wide (was 720), no OPERATION REPORT pill, no MVP
   band (the table's MVP tag), tighter rows and buttons; it covered the middle of the field. */
#result{width:min(560px,calc(100% - 24px));padding:10px 14px 8px}
#result h2{font-size:20px;margin:0 0 2px}
#result #resultText{margin:0 0 2px;font-size:13px}
#result #unlockLine{margin:0 0 4px;font-size:12px}
#result #ranking{margin-bottom:6px}
#result .mvpCard{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;padding:6px 12px;margin:4px 0 6px}
#result .mvpCard>span{display:inline;font-size:11px}
#result .mvpCard>strong{display:inline;font-size:17px;margin:0}
#result .mvpCard p{margin:0;font-size:12px}
#result .scoreTable th{font-size:11px;padding:3px 6px}
#result .scoreTable td{font-size:12px;padding:3px 6px}
#result .scoreTable strong{font-size:12px}
#result .scoreTable :is(td,th,strong,em,small){line-height:1.35}
#result :is(#resultText,#unlockLine,.pityResult,.mvpCard p){line-height:1.4}
#result .pityResult{margin:4px 0 0;font-size:12px}
#result button{margin:2px;min-height:36px;padding:4px 12px;font-size:13px}
body[data-controls=touch] #result{max-height:calc(100dvh - 12px);padding:8px 12px;width:min(500px,calc(100% - 24px))}
/* v10.12: the clear banner while the loot lies there (clear-banner.js), and the fight-only HUD gone once the stage is cleared. */
.clearBanner{position:absolute;left:50%;top:13%;transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:2px;padding:9px 26px;border-radius:18px;background:linear-gradient(100deg,#ff4f9ae8,#7a5cffe8);box-shadow:0 10px 40px #0008;text-align:center;pointer-events:none;animation:clearIn .45s ease-out}
.clearBanner[hidden]{display:none}.clearBanner b{font:400 30px/1.1 var(--display);color:#fff;text-shadow:0 2px 10px #0006}.clearBanner small{font-size:13px;color:#fff;opacity:.95}
body[data-controls=touch] .clearBanner{top:88px;padding:6px 18px}body[data-controls=touch] .clearBanner b{font-size:20px}body[data-controls=touch] .clearBanner small{font-size:11px}
@keyframes clearIn{from{opacity:0;transform:translate(-50%,-10px) scale(.94)}to{opacity:1;transform:translateX(-50%)}}
body.cleared :is(#skillBar,#pcControls,#touchPad,#bossMeter,#buffBar,#chargeGauge,.operationHud,#prepareNotice,#dmgLog,#crosshair,#hitMarker,#targetHud){display:none!important}
/* v10.11.17 (user: "선택한아이템누르면 별도창뜨고 하는게 더좋을거같은데그래야넓게쓰지", "아이템선택하면 팝업창으로 보이게해줘"): the picked item
   is a popup over the 장비 & 소지품 window (gear-ui.js .gearPick.picked; ✕, a tap on the dim backdrop or Esc closes it) — the window
   itself is just 장착 | 소지품 · 창고, wider; nothing picked, no column for it. The card inside is compact: a smaller icon, tight lines,
   the options and the 장착하면 changes two a row, the buttons at its foot. */
#gearSheet .gearPick:not(.picked){display:none}
#gearSheet .gearGrid{grid-template-columns:minmax(260px,.62fr) minmax(0,2fr)}
#gearSheet .gearPickBack{position:absolute;inset:0;z-index:8;background:#07041266;border-radius:inherit;cursor:var(--game-cursor-pointer,pointer)}
#gearSheet .gearPick.picked{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,calc(100% - 24px));max-height:calc(100% - 24px);
 display:flex;flex-direction:column;overflow:hidden;padding:12px 14px;border:1px solid #a894ffaa;border-radius:16px;background:linear-gradient(160deg,#241c52fb,#150f2efb);box-shadow:0 18px 60px #000c}
#gearSheet .gearPick.picked>h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
#gearSheet .gearPick .pickClose{min-height:0;min-width:0;margin:0;padding:4px 12px;border-radius:9px;font-size:14px}
#gearSheet .gearPick.picked .gearDetail{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
/* Wide enough: the card on the left, 장착하면 and the buttons on the right — all of it in one look. */
@media (min-width:720px){
 #gearSheet .gearPick.picked{width:min(900px,calc(100% - 24px))}
 #gearSheet .gearPick.picked .gearDetail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px;align-content:start}
 #gearSheet .gearPick.picked .gearDetail>.itemCard{grid-row:1 / 3;margin:0}
 #gearSheet .gearPick.picked .gearDetail>:not(.itemCard){grid-column:2;align-self:start}
 #gearSheet .gearPick.picked .gearDetail>.itemActions{margin-top:10px;border-top:0;padding-top:0}}
#gearSheet .gearPick.picked .itemActions{position:static;min-height:0;margin-top:8px;padding-top:8px;border-top:1px solid #ffffff18;background:none;display:flex;flex-wrap:wrap;gap:6px}
#gearSheet .gearPick.picked .itemActions button{min-width:0;margin:0}
#gearSheet .gearPick .itemCard{padding:10px 12px}
#gearSheet .gearPick .itemHead{gap:10px}
#gearSheet .gearPick .itemCard :is(.itemBase,.itemOpts li,.itemSpecial,.itemSet li,.itemPair){line-height:1.3}
#gearSheet .gearPick .itemOpts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:1px}
#gearSheet .gearPick .compare ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:1px}
html.phoneFit body[data-controls=touch] #gearSheet .gearPick :is(.itemBase,.itemOpts li,.itemSpecial,.itemSet li,.itemPair,.compare b,.compare li){font-size:12.5px}
/* v10.11.17 운영자 window: since v10.13.1 its styles live in admin-ui.js (ADMIN_CSS, added once as <style id="adminStyle">). */
/* ===== v10.11.20 ===== */
/* 게임 컷신 (opening.js; user: "인트로다음컷신을 전투영상으로가능해?"): the battle clip full screen under the splash (z 300), letterboxed. */
#opening{position:fixed;inset:0;z-index:290;display:grid;place-items:center;overflow:hidden;background:#000;transition:opacity .45s ease-in}
#opening[hidden]{display:none}#opening.out{pointer-events:none}
/* v10.11.21 (user: "중간에 자꾸 로그인창보이는데 그거 안보이게해줘"): the clip fades to BLACK, never to what is under it (the login card showed
   through the fade before the intro); the intro then comes up opaque at once. */
#opening.out :is(.opVideo,.opCard,.opSkip,.opBar){opacity:0!important;transition:opacity .4s ease-in}
#opening .opVideo{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .35s ease-out}
#opening .opBar{position:absolute;left:0;right:0;height:7vh;background:#000;pointer-events:none}#opening .opTop{top:0}#opening .opBottom{bottom:0}
#opening .opSkip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(7vh + 12px);min-height:0;margin:0;padding:7px 15px;border-radius:999px;border:1px solid #ffffff4d;background:#0008;color:#e6e2f6;font-size:13px;letter-spacing:.06em;cursor:var(--game-cursor-pointer,pointer)}
#opening .opSkip:hover,#opening .opSkip:focus-visible{background:#ffffff22;border-color:#ffffffaa}#opening .opSkip[hidden]{display:none}
/* v10.11.20: the clip plays first, at page open — black with a small spinner until its first frame (.live); if the bundle never ran,
   the empty cover gives way after 8 s like the splash did. */
#opening .opWait{width:26px;height:26px;border:2px solid #ffffff2e;border-top-color:#ffffffcc;border-radius:50%;animation:opSpin .9s linear infinite}
@keyframes opSpin{to{transform:rotate(360deg)}}#opening:empty{animation:splashIdle .3s 8s forwards}
/* (user: "시작할때 재생버튼이보여;; 맨처음에 화면다른걸로 대처하던해줘") until the first frame the clip is invisible — no browser ▶ over a held
   autoplay — and a title card shows instead; the media controls are hidden everywhere. */
#opening .opVideo{opacity:0}#opening.live .opVideo{opacity:1}
#opening .opVideo::-webkit-media-controls,#opening .opVideo::-webkit-media-controls-start-playback-button,#opening .opVideo::-webkit-media-controls-overlay-play-button,#opening .opVideo::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none;opacity:0}
#opening .opCard{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:radial-gradient(ellipse at 50% 45%,#241a4a 0%,#0c0a1c 60%,#000 100%);pointer-events:none;transition:opacity .35s ease-out}
#opening .opCard b{font:clamp(34px,7vw,72px)/1 'Black Han Sans',Impact,sans-serif;letter-spacing:.06em;color:#eef3ff;text-shadow:0 0 24px #7a8cff88,0 0 2px #fff}
#opening .opCard small{font-size:clamp(12px,1.6vw,16px);letter-spacing:.5em;color:#b9c3e6;margin-bottom:8px}
#opening.live .opCard{opacity:0}
/* 로그인 집중 (user: "로그인창(핸드폰 pc 로그인창집중하도록 업데이트내역X )"): the login screen is the login card alone — its title on top;
   the slogan, the lead, the tags and the 기본 조작 panel are gone (the menu, the lobby and 설정 have the rest). */
body[data-account=out] #lobby>:is(.eyebrow,h1,.lead,.tags,.credits),body[data-account=out] #menuBackdrop .mbInfo{display:none!important}
.loginBrand{display:grid;gap:2px;margin:0 0 14px;text-align:center}.loginBrand small{font-size:12px;letter-spacing:.34em;padding-left:.34em;color:var(--accent,#8fe8ff)}
.loginBrand b{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.05;letter-spacing:.05em;color:#fff;text-shadow:0 0 24px #ff8fc44d,0 4px 16px #000a}
body[data-account=out] #lobby.panel{left:6%;top:50%;right:auto;bottom:auto;transform:translateY(-50%);width:min(440px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;display:block;padding:0;background:none;border:0;box-shadow:none}
body[data-account=out] #loginPanel{max-width:none;padding:22px 24px 16px;border-radius:18px;background:linear-gradient(160deg,#1d1446ee,#0c0820f2);border:1px solid #ffffff24;box-shadow:0 18px 50px #000b}
body[data-controls=touch][data-account=out] #lobby.panel{left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 24px));max-height:calc(100dvh - 60px)}
body[data-controls=touch][data-account=out] #loginPanel{grid-column:auto;grid-row:auto;padding:14px 18px 10px}
.loginStudio{margin:10px 0 0;text-align:center;font-size:11px;letter-spacing:.08em;color:#9d97c2}
body[data-controls=touch][data-account=out] .loginBrand{margin-bottom:8px}body[data-controls=touch][data-account=out] .loginBrand b{font-size:28px}
/* (its PC UI scale cap lives in the "v10.8 PC UI scale" block, like every scale rule) …and 앱으로 설치 as one short row of small buttons (it was three tall cards with notes). */
body[data-account=out] .downloadRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px}
body[data-account=out] .downloadRow::before{flex:1 1 100%;font-size:11px}body[data-account=out] .downloadRow>.desktopDownload{flex:1 1 0;min-width:0;padding:0;border:0;background:none;gap:3px}
body[data-account=out] #loginPanel label{margin-bottom:6px}body[data-account=out] #loginPanel input:not([type=checkbox]){min-height:44px;font-size:16px;padding:8px 12px}body[data-account=out] #loginPanel .row button,body[data-account=out] #loginPanel .guestBtn{min-height:44px;font-size:15px}
body[data-account=out] #loginPanel .muted{margin:4px 0;line-height:1.5}
body[data-account=out] .downloadRow .desktopDownloadNote{font-size:11px;line-height:1.35;color:#c3cbd6}/* peer review C: 9 px was too small on a phone */
body[data-account=out] .downloadRow .desktopDownloadBtn{flex-direction:row;gap:5px;min-height:42px;padding:6px;font-size:13px}body[data-account=out] .downloadRow .desktopDownloadBtn::before{width:18px;height:18px;flex:none}
/* 설정 (user: "옵션 환경설정 아이콘이 너무작은문제"): a gear with the word, bigger — on a phone 44 px tall (it was 32 px, 11 px text). */
#settingsBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px}#settingsBtn .gearIcon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
body[data-controls=desktop] #settingsBtn{min-width:96px;font-size:15px}body[data-controls=desktop] #settingsBtn .gearIcon{width:22px;height:22px}
body[data-controls=touch] #settingsBtn,body[data-controls=touch].playing #settingsBtn{min-width:76px;min-height:44px;padding:4px 12px;font-size:15px;font-weight:700;border-radius:12px}
/* v10.13.2 게임 종료 (quit-game.js): beside 설정, never in a battle; the first press arms it (red) */
#quitBtn{margin-left:8px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px;font-size:13px;font-weight:700;border-radius:12px;color:#ffd0d8;border-color:#ff6b8a66}
#quitBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}#quitBtn.armed{background:linear-gradient(100deg,#ff4f6a,#a8245a);color:#fff;border-color:#ff8fa3}
body.playing #quitBtn{display:none}body[data-controls=desktop] #quitBtn{min-height:48px;font-size:15px}
body[data-controls=touch] #quitBtn{min-height:44px;padding:4px 10px;font-size:14px}body[data-controls=touch] #quitBtn span{display:none}
body[data-controls=touch] #settingsBtn .gearIcon{width:22px;height:22px}
/* 로비 채팅 (lobby-chat.js): under 접속 중, the log fills the column. */
.onlineColumn:has(.lobbyChat:not([hidden])){display:flex;flex-direction:column;min-height:0}.onlineColumn:has(.lobbyChat:not([hidden])) #onlinePlayers{flex:none;max-height:170px}
.lobbyChat{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;margin-top:10px}.lobbyChat[hidden]{display:none}.lobbyChat h3{margin:0;font-size:14px}
.lcLog{flex:1;min-height:110px;max-height:320px;overflow:auto;overscroll-behavior:contain;padding:8px 10px;border:1px solid #a894ff33;border-radius:12px;background:#120d2ad0;font-size:12px;line-height:1.5}
.lcLog p{margin:0 0 3px;overflow-wrap:anywhere}.lcLog p b{margin-right:6px;color:#ffd6ec}.lcLog .lcHint{color:var(--muted)}
.lcForm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.lcForm input{min-width:0;min-height:38px;padding:5px 9px;border:1px solid #a894ff55;border-radius:10px;background:#0b0718;color:#fff;font-size:14px}.lcForm button{min-height:38px;padding:4px 12px}
/* v10.12.5 (user: "pc버전 로비버전 채팅창 크게해줘"): on PC the 접속 중 column is wider while the chat is there (the chat itself: v10.13.1
   below, its larger type in pc-hud.js PC_CHAT_CSS). */
@media (min-width:1000px){body[data-controls=desktop] .lobbyColumns:has(.lobbyChat:not([hidden])){grid-template-columns:minmax(0,1fr) 420px}
 body[data-controls=desktop] .onlineColumn:has(.lobbyChat:not([hidden])) #onlinePlayers{max-height:130px}}
/* v10.13.1 (user: "로비 밎 대기실채팅도 온라인방식으로해줘"): on a PC the lobby and waiting-room chats are the battle HUD's chat window
   (.pcChatBox: tabs 전체 / 대화 / 시스템, timed lines, the input row at its foot; the look is pc-hud.js PC_CHAT_CSS). In the lobby it takes
   the rest of the 접속 중 column, in the waiting room the column beside the seats; only its log scrolls. */
body[data-controls=desktop] #lobbyChat.pcChatBox{flex:1 1 auto;margin-top:10px}
body[data-controls=desktop] #lobbyChat.pcChatBox .pcLog{min-height:130px}
body[data-controls=desktop] #waitingRoom .wrChat.pcChatBox .pcLog{min-height:150px}
/* v10.13.1 PC 로비 (user: "로비 가 pc에서스크롤내리는현상있어 확인해봐"): the lobby window itself never scrolls. With a big UI scale, a short
   window or the operator's extra button (a second menu row) its content grew past the window's cap, and clicking the chat box then slid the whole
   window down under the header. Now the menu row keeps its place and the two columns take what is left: the room list, the players and the
   chat log scroll inside them instead. */
/* v10.13.2 (user: "대기실 pc에선 위아래좀더늘려서 창확보해도될거같은데 좌우랑", "로비도 겹칩이있어 좌우 아래폭이랑 다늘려줘"): on a PC the lobby
   and the waiting room take the window — up to 1760 px wide with 16 px left and right, and down to 16 px above the window's foot (at most
   1040 px tall). The % width and top + bottom resolve against the unzoomed window while px are zoomed, so nothing is divided by the PC zoom. The
   columns (the lobby) and the seats + chat (the waiting room) fill what the fixed rows leave; only the lists and the chat logs scroll. */
body[data-controls=desktop][data-account=in] #lobby.panel:has(>#onlineLobby:not([hidden]):is([data-rooms=lobby],[data-rooms=waiting])){bottom:16px;width:min(1760px,calc(100% - 32px));max-height:1040px;display:flex;flex-direction:column;overflow:hidden}
body[data-controls=desktop] #onlineLobby:is([data-rooms=lobby],[data-rooms=waiting]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body[data-controls=desktop] #onlineLobby:is([data-rooms=lobby],[data-rooms=waiting]) .accountHeader{flex:none}
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] #accountRank{flex:1 1 140px;min-width:0}/* the XP bar gives way first, so the menu stays one row */
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .lobbyColumns{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .lobbyColumns>:is(.roomsColumn,.onlineColumn){min-height:0;overflow:auto;overscroll-behavior:contain}
/* The room list runs to the column's foot; the chat keeps a few px clear of it (its rim and shadow are not cut by the column's edge). */
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .roomsColumn:has(>#roomLobby:not([hidden])){display:flex;flex-direction:column}
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] #roomLobby:not([hidden]){flex:1 1 auto;min-height:0}
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] #roomLobby .rlList{flex:1 1 auto;min-height:0;max-height:none}
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn{padding-bottom:6px}
/* The waiting room: the room line, the seats beside the chat, the clear rule, the buttons; the seats' two rows share the height. */
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom{flex:1 1 auto;min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrBody{grid-auto-rows:minmax(0,1fr)}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrGrid{grid-auto-rows:1fr;min-height:0;overflow:auto;overscroll-behavior:contain;container:wrseats / size}
/* v10.15.1 PC 대기실 초상화 (user: "pc버전도 캐릭 초상화보이고 그러면좋은데 글씨크기만커"): a seat is a party slot like the phone's. The class
   portrait (room-ui.js memberCardMarkup's .wrArt <img>, app.js's per-class art; an AI ally shows its class's) stands at the card's right, a
   square as tall as the card but at most 66% of its width (a near-square card: at the top right), fading into the card on its left and at its
   foot; an <img>, so its URL resolves against the page, not this stylesheet's assets/code/. 계급 sits at the top left, the tags
   (나 · 자리 비움 · 전투 중 …) at the top right, and the ID, a title / dungeon chip and 직업 | 전투력 at the foot, over the fade. The type is the
   PC HUD's (ID 15–18 px, the rest 11–14 px; it was 14–25 px in a mostly empty box). A card never gets shorter than what it shows (the rows
   scroll inside if they must); empty seats stay the dashed 빈 자리. */
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty){position:relative;overflow:hidden;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-content:end;min-height:auto;padding:34px 13px 10px;text-shadow:0 1px 2px #000d,0 0 8px #000a}
/* the art, 계급 and the tags are out of the grid (no grid-column: an absolute grid child with one is placed in that area, not the card) */
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>:not(.wrArt,.wrRank,.wrTags){grid-column:1 / -1;position:relative}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.empty{align-content:center;font-size:13px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrClass{grid-column:1}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrCp{grid-column:2;justify-self:end;white-space:nowrap}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank{position:absolute;top:8px;left:11px;max-width:calc(100% - 96px);font-size:13px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank svg{width:18px;height:18px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank small{color:#e6e0ff;font-size:11.5px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrTags{position:absolute;top:8px;right:9px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 96px);text-shadow:none}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTags i{padding:1px 7px;border-radius:999px;font-size:11px;white-space:nowrap}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTags i:not(.tag-me){background-color:#0b0718d9;box-shadow:inset 0 0 0 1px #ffffff2e}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrId{font-size:15px;line-height:1.3}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrClass{font-size:12px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp{color:#cfc8f2;font-size:11px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp b{font-size:13px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrArt{display:block;position:absolute;top:0;right:0;bottom:0;aspect-ratio:1;max-width:66%;overflow:hidden;pointer-events:none}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrArt img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;-webkit-mask:linear-gradient(90deg,transparent,#000 46%),linear-gradient(0deg,transparent,#000 24%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 46%),linear-gradient(0deg,transparent,#000 24%);mask-composite:intersect}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.away .wrArt img{filter:grayscale(.7)}
/* Taller seats (a big window: the seat area's height, in the room's CSS px) get a little more room and type — never the old 25 px names. */
@container wrseats (min-height:380px){
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty){padding:38px 15px 12px;row-gap:3px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank{top:10px;left:13px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank svg{width:20px;height:20px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank small{font-size:12px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrTags{top:10px;right:11px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrId{font-size:16px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrClass{font-size:13px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp{font-size:12px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp b{font-size:14px}}
@container wrseats (min-height:560px){
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty){padding:44px 17px 14px;row-gap:4px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank{top:12px;left:15px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank svg{width:24px;height:24px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrRank small{font-size:13px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard:not(.empty)>.wrTags{top:12px;right:13px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrId{font-size:18px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrClass{font-size:14px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp{font-size:13px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp b{font-size:15px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTags i{padding:2px 9px;font-size:12px}body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom :is(.wrDgTag,.wrTitleChip,.wrRaidLeft){font-size:12px}
 body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.empty{font-size:14px}}
/* The room line and the rule under the seats: the PC HUD's sizes (the title was the 24 px display face). */
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTitle h3{font-size:20px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom :is(.wrTitle .rmNo,.wrStage){font-size:12px}
body[data-controls=desktop] #onlineLobby[data-rooms=waiting] #waitingRoom .wrRule{padding:6px 12px;font-size:12px}
body[data-controls=touch] .onlineColumn:has(.lobbyChat:not([hidden])) #onlinePlayers{max-height:110px}body[data-controls=touch] .lcLog{min-height:60px;font-size:11px}body[data-controls=touch] .lcForm input{min-height:34px;font-size:13px}body[data-controls=touch] .lcForm button{min-height:34px;font-size:12px}
/* 대기방 압축 (user: "대기방에서 각종기능다들어가있는데 전투 필요한부분만 압축해서하고", "대기방 6명상한"): in a waiting room the account bar
   keeps the name, the rank and the XP (장비 · 스킬 are on the room's own row; 캐릭터 변경 · 정보 · 확률 · 랭킹 · 펫 · 로그아웃 wait in the lobby),
   and the six seats sit three by two. */
#onlineLobby[data-rooms=waiting] .accountHeader>button{display:none}
#onlineLobby[data-rooms=waiting] .accountHeader{padding-bottom:8px;gap:12px}
@media (min-width:641px){.wrGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The member card (user: "아이디 전투력 계급 합쳐져서보이는상황있는데 그거해결하고"): on a phone the rank, the tags, the ID and 직업 · 전투력
   each get their own place — they used to share cells and ran into each other. */
body[data-controls=touch] #waitingRoom .wrCard:not(.empty){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;grid-template-areas:"rank rank tags" "id id id" "cls cp cp";gap:1px 6px;align-content:center;padding:5px 9px}
body[data-controls=touch] #waitingRoom .wrCard .wrRank{grid-area:rank;flex-direction:row;justify-content:flex-start;gap:4px;min-width:0}
body[data-controls=touch] #waitingRoom .wrCard .wrRank small{display:block;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-controls=touch] #waitingRoom .wrCard .wrTags{grid-area:tags;justify-self:end;align-self:center;flex-wrap:nowrap}
body[data-controls=touch] #waitingRoom .wrCard .wrId{grid-area:id;padding-right:0}
body[data-controls=touch] #waitingRoom .wrCard>.wrClass{grid-area:cls;display:block}
body[data-controls=touch] #waitingRoom .wrCard>.wrCp{grid-area:cp;display:block;justify-self:start;font-size:11px;white-space:nowrap}
body[data-controls=touch] #waitingRoom .wrCard>.wrCp::before{content:'·';margin-right:5px;color:var(--muted)}
body[data-controls=touch] #waitingRoom .wrCard>.wrTitleChip{grid-column:1 / -1}
html.phoneFit body[data-controls=touch] #waitingRoom .wrCard .wrRank small{font-size:11px}html.phoneFit body[data-controls=touch] #waitingRoom .wrCard>.wrCp{font-size:12px}
/* 설정 → 조작 · 자동 전투 (auto-skill-settings.js controlsBlock; phones): the big button's skill, three sliders, the follow camera, the layout editor. */
.ctlBlock{display:grid;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff18}
.ctlBlock h3{margin:0;font-size:15px}.ctlBlock h3 small{margin-left:6px;color:var(--muted);font-weight:400}
.ctlMain{flex-wrap:wrap}.ctlMain button{min-height:40px}
.ctlSliders{display:grid;gap:6px}.ctlRow{display:grid;grid-template-columns:92px minmax(0,1fr) 48px;align-items:center;gap:8px;font-size:13px}.ctlRow input{width:100%;min-height:32px;margin:0}.ctlRow output{text-align:right;font-variant-numeric:tabular-nums;color:#dfe8ff}
.ctlActs{display:flex;gap:8px}.ctlActs button{flex:1;min-height:44px}
.ctlNote{color:var(--muted);font-size:11px;line-height:1.5}
/* 휴대폰 전투 ☰ 메뉴 (hud-menu.js; peer review A1): in a room on a touch screen the top buttons fold into one ☰ at the top right —
   자동/수동 stays, 음성 stays while it is on. */
#hudMenu{display:none}
body[data-controls=touch].playing #hud #hudMenu{display:block;position:absolute;top:4px;right:calc(var(--safeR) + 2px);z-index:9}
body[data-controls=touch].playing #hud .loadoutButtons,body[data-controls=touch].playing #hud #chatBtn,body[data-controls=touch].playing #hud #voiceBtn:not([aria-pressed=true]),body[data-controls=touch].playing #settingsBtn{display:none!important}
.hudMenuBtn{width:50px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;border-radius:12px;border:1.5px solid #ffe1ad80;background:#10232bea;-webkit-tap-highlight-color:transparent}
.hudMenuBtn i{display:block;width:22px;height:3px;border-radius:2px;background:#ffe1ad}
.hudMenuBtn[aria-expanded=true]{background:#ffe1ad}.hudMenuBtn[aria-expanded=true] i{background:#10232b}
.hudMenuPanel{position:absolute;top:50px;right:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 70px);overflow:auto;padding:8px;border-radius:14px;background:#0d1a20f4;border:1px solid #ffe1ad55;box-shadow:0 10px 30px #000a;pointer-events:auto;text-shadow:none}
.hudMenuPanel[hidden]{display:none}
.hudMenuPanel button{min-height:46px;padding:6px 12px;border-radius:10px;font-size:15px;font-weight:700;text-align:left;display:flex;align-items:center;gap:8px}.hudMenuPanel button .uiIcon{flex:none;color:#ffe1ad}
.hudMenuPanel button.on{color:#062012;background:#6fe3a2;border-color:#d4ffe6}
/* 휴대폰 HP (peer review A5: the HP readout sat squeezed beside the stick): a small portrait and an HP bar at the top left, under
   the stage line. PC keeps its portrait ring. */
.hpBar{display:none}
body[data-controls=touch].playing #hud .playerHud{left:calc(var(--safeL) - 4px);top:42px;bottom:auto;gap:6px}
body[data-controls=touch].playing #hud .playerHud .portrait{width:42px;height:42px}
body[data-controls=touch].playing #hud .playerHud .portrait img{inset:4px;width:34px;height:34px}
body[data-controls=touch].playing #hud .playerHud .portrait>b{bottom:-5px;min-width:28px;padding:0 3px;border-radius:4px;font-size:12px}
body[data-controls=touch].playing #hud .playerInfo{display:flex;flex-direction:column;gap:3px}
body[data-controls=touch].playing #hud .hpBar{display:block;order:-1;width:clamp(110px,18vw,170px);height:10px;border-radius:5px;background:#000a;border:1px solid #ffffff45;overflow:hidden}
#hpFill{display:block;height:100%;background:linear-gradient(90deg,#3fc47c,#9ff0b8);transform-origin:left center;transition:transform .2s ease-out}
.playerHud.danger #hpFill{background:linear-gradient(90deg,#d8473d,#f3766b)}
body[data-controls=touch].playing #hud #hpMax{font-size:11px;line-height:1}
/* 조작 안내 (touch-hud.js; peer review A8): three short steps side by side in big type. */
.touchGuide .tgItems{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.touchGuide .tgItems li{padding:8px 12px!important;font-size:15px;line-height:1.3!important;text-align:center}
.touchGuide .tgItems b{font-size:19px;margin-bottom:2px}
@media (max-width:520px){.touchGuide .tgItems{grid-template-columns:1fr!important}}
/* 휴대폰 이동 스틱 (peer review A6): it already appears where the left thumb lands; idle it is easier to see. */
body[data-controls=touch].playing #stick:not(.pressed){opacity:.8;border-color:#ffffff55;background:#101f2744}
#touchPad .padBtn{word-break:keep-all}
/* v10.11.21 휴대폰 달리기 (app.js touchRun): the stick glows while the forward hold runs */
body[data-controls=touch] #stick.run{border-color:#ffd166;box-shadow:0 0 0 3px #ffd16644,0 0 18px #ffd16688}body[data-controls=touch] #stick.run div{background:#ffd166cc;border-color:#fff3}
/* 휴대폰 로비 위쪽 버튼 (peer review C: 34 px, 10–11 px text): 42 px and 13 px, onto a second line when they do not fit. */
body[data-controls=touch] #onlineLobby:not([data-rooms=waiting]) .accountHeader{flex-wrap:wrap;row-gap:6px;column-gap:6px}
body[data-controls=touch] #onlineLobby:not([data-rooms=waiting]) .accountHeader>button{min-height:42px;padding:6px 11px;font-size:13px;border-radius:11px}
body[data-controls=touch] #onlineLobby .accountHeader>button kbd{display:none}
/* v10.11.22 아이템 마우스 올림 정보 (item-hover.js; user: "커서에 갔다 대기만하면 작은창으로 아이템정보만보이게해줘"): the item's card in a small
   window by the cursor, above every window; it never takes the mouse. */
#itemHover{position:fixed;z-index:400;width:min(300px,calc(100vw - 16px));pointer-events:none;filter:drop-shadow(0 10px 24px #000b)}
#itemHover[hidden]{display:none}#itemHover .itemCard{margin:0}
/* v10.11.21e: a reading window open on a phone (phone-fit.js html.phoneSheet) hides the lobby under it — laid out for the wider
   lobby fit, it stuck out of the window's narrower one and the whole page zoomed out / became draggable (user's screenshots). */
/* The 대기실 lives inside #lobby and lays out on the same narrower fit by design (v10.11.16): it stays. */
html.phoneSheet #lobby:not(:has(#onlineLobby[data-rooms=waiting])){display:none!important}
/* ===== v10.11.21 휴대폰 전용 로비 · 대기실 (user: "핸드폰은 핸드폰전용UI HUD 로비 대기실 다따로쓸거야", "타 핸드폰rpg처럼 … 핸드폰만",
   "로비대기실부터해서 지금기반으로 싹다 바꾸자 아이콘이랑"). Touch screens only; PC is untouched. The lobby is laid out on the phone
   fit (phone-fit.js: 1213×560 at ×0.70) and the waiting room on the sheet fit (969×440 at ×0.78), so sizes here are ~1.4× / ~1.3×
   what shows on the glass. Mobile RPG town: profile top left, chat card left, the key art in the middle, the room list card right,
   one labelled icon bar bottom left (phone-lobby.js) and the biggest button — 방 만들기 — bottom right. Party room: ‹ 나가기 top left,
   six portrait cards in one row, chat bottom left, class · 장비 · 스킬 · [전투 시작] bottom right. Icons: ui-icons.js masks (--ico-*). ===== */
/* shared: an icon painted through a mask in front of a button's text (set --i to a --ico-* variable) */
body[data-controls=touch] .phIco::before,body[data-controls=touch] #roomLobby .rlBar :is([data-act=join],[data-act=filter],[data-act=refresh],[data-act=training])::before,body[data-controls=touch] #waitingRoom :is([data-act=gear],[data-act=skills],[data-act=leave],[data-act=start],[data-act=brief])::before{content:'';flex:none;width:1.45em;height:1.45em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
body[data-controls=touch] #roomLobby .rlBar [data-act=join]{--i:var(--ico-enter)}body[data-controls=touch] #roomLobby .rlBar [data-act=filter]{--i:var(--ico-filter)}
body[data-controls=touch] #roomLobby .rlBar [data-act=refresh]{--i:var(--ico-refresh)}body[data-controls=touch] #roomLobby .rlBar [data-act=training]{--i:var(--ico-target)}
body[data-controls=touch] #waitingRoom [data-act=gear]{--i:var(--ico-bag)}body[data-controls=touch] #waitingRoom [data-act=skills]{--i:var(--ico-skill)}body[data-controls=touch] #waitingRoom [data-act=leave]{--i:var(--ico-back)}
body[data-controls=touch] #waitingRoom [data-act=start]{--i:var(--ico-sword)}body[data-controls=touch] #waitingRoom [data-act=brief]{--i:var(--ico-info)}
body[data-controls=touch] #roomLobby .rlIco{display:none}
/* the panel: no big card on a phone — the key art shows through, each part is its own card */
#phoneLobbyNav{display:none}
body[data-controls=touch][data-account=in] #lobby.panel:has(#onlineLobby:not([hidden]):is([data-rooms=lobby],[data-rooms=waiting])){left:var(--safeL);right:var(--safeR);top:44px;bottom:8px;width:auto;max-width:none;max-height:none;transform:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
body[data-controls=touch][data-account=in] #lobby.panel:has(#onlineLobby:not([hidden])[data-rooms=waiting]){top:0;left:0;right:0;bottom:0;padding:8px var(--safeR) 8px var(--safeL);background:linear-gradient(180deg,#140f2ee6,#0b0a1cf2)}
body[data-controls=touch][data-account=in]:has(#onlineLobby:not([hidden])[data-rooms=waiting]) header :is(.brand,.live){visibility:hidden}
/* --- 로비 --- */
body[data-controls=touch] #onlineLobby[data-rooms=lobby]{display:grid;height:100%;grid-template-columns:minmax(0,33%) minmax(0,1fr) minmax(0,47%);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head rooms" "chat . rooms" "nav nav nav";gap:12px 16px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .lobbyColumns{display:contents}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .accountHeader{grid-area:head;justify-self:start;align-self:start;display:flex;align-items:center;gap:14px;padding:10px 20px 10px 14px;border:1px solid #a894ff45;border-radius:18px;background:#120e2ccc;box-shadow:0 8px 24px #0006}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .accountHeader>button{display:none!important}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .accountHeader h2{font-size:24px;line-height:1.1}body[data-controls=touch] #onlineLobby[data-rooms=lobby] .accountHeader small{font-size:14px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #accountRank{flex:none;gap:10px}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #accountRank :is(b,small){font-size:15px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .xpTrack{width:220px;height:8px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] :is(.roomsColumn,.onlineColumn){min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:14px 16px;border:1px solid #a894ff40;border-radius:20px;background:#110d2ad9;box-shadow:0 10px 30px #0007}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .roomsColumn{grid-area:rooms}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .onlineColumn{grid-area:chat}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .onlineColumn>h3{margin:0 0 8px;font-size:17px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden])) #onlinePlayers{display:none}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #onlinePlayers{flex:1;min-height:0;overflow:auto}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #onlinePlayers b{font-size:16px;max-width:none}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #onlinePlayers small{font-size:13px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #lobbyChat{flex:1;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;background:none}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #lobbyChat h3{display:none}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #lobbyChat .lcLog{flex:1;min-height:0;max-height:none;font-size:17px;line-height:1.45}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #lobbyChat .lcForm{gap:8px;margin-top:8px}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #lobbyChat .lcForm :is(input,button){min-height:58px;font-size:18px}
/* room list card: toolbar of icon pills (create moved to the big button), then the rows */
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlBar{flex:none;display:flex;gap:8px;flex-wrap:nowrap}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlBar [data-act=create]{display:none}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlBar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:60px;padding:6px 16px;font-size:18px;border-radius:14px;white-space:nowrap}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlBar .rlGap{flex:1}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby :is(.rlChips,.rlReady){flex:none;font-size:15px;margin:0}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlList{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:8px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rmRow{min-height:78px;padding:10px 14px;border-radius:14px;gap:12px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rmRow :is(.rmName,.rmStage){font-size:20px}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rmRow :is(.rmMeta,.rmMine,.rmNo){font-size:14px}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #roomLobby .rlEmpty{font-size:18px;line-height:1.6;padding:24px 8px;text-align:center}
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #assetStatus{display:none}body[data-controls=touch] #onlineLobby[data-rooms=lobby] #retryAssets:not([hidden]){flex:none;order:-1;min-height:56px;font-size:17px}
/* bottom bar: labelled icons + the biggest button */
body[data-controls=touch] #onlineLobby[data-rooms=lobby] #phoneLobbyNav:not([hidden]){grid-area:nav;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.plMenu{display:flex;gap:8px;padding:8px;border:1px solid #a894ff3a;border-radius:22px;background:#0f0b26d9;box-shadow:0 10px 30px #0007}
.plBtn{width:84px;min-height:84px;margin:0;padding:8px 2px 6px;display:grid;justify-items:center;align-content:center;gap:5px;border-radius:16px;border:1px solid #ffffff1c;background:linear-gradient(180deg,#2a2160,#1a1440);color:#ffe7bd;font-size:15px;font-weight:800;letter-spacing:-.02em}
.plBtn .uiIcon{width:36px;height:36px}.plBtn span{color:#e9e4ff;white-space:nowrap}
.plBtn:active{transform:translateY(1px);filter:brightness(1.2)}.plBtn[hidden]{display:none}
.plGo{min-width:330px;min-height:96px;margin:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 28px;border-radius:24px;font-size:30px;box-shadow:0 12px 34px #ff4fa04d,0 0 0 2px #ffd1ec55 inset}
.plGo .uiIcon{width:40px;height:40px;stroke-width:2.6}.plGo span{display:grid;text-align:left;line-height:1.1}.plGo b{font-size:30px}.plGo small{font-size:15px;font-weight:600;opacity:.85;margin-top:3px}
.plGo[disabled]{filter:grayscale(.6) brightness(.8)}.plGo[hidden]{display:none}
/* --- 대기실 --- */
body[data-controls=touch] #onlineLobby[data-rooms=waiting]{height:100%;display:flex;flex-direction:column}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] .accountHeader{display:none}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"head head" "grid grid" "rule rule" "chat act";gap:8px 14px;margin:0;padding:0;border:0;background:none}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrBody{display:contents}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrHead{grid-area:head;display:flex;align-items:center;gap:12px;min-height:58px;padding:0 270px 0 150px;margin:0}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTitle{flex:1 1 auto;display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:nowrap;overflow:hidden}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrStage small{display:none}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChips{flex:none}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTitle h3{font-size:22px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom :is(.wrTitle .rmNo,.wrStage){font-size:16px;white-space:nowrap}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChips{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChips i{font-size:14px;padding:4px 10px;white-space:nowrap}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrBrief{position:absolute;right:124px/* left of the header's 설정 */;top:4px;min-height:52px;display:inline-flex;align-items:center;gap:6px;padding:6px 16px;font-size:17px;border-radius:14px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom [data-act=leave]{position:absolute;left:0;top:4px;min-height:52px;display:inline-flex;align-items:center;gap:6px;padding:6px 18px 6px 12px;font-size:18px;border-radius:14px}
/* six party slots in one row: the class portrait on top, rank, name, class · 전투력 */
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrGrid{grid-area:grid;min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:10px;align-items:stretch}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard{position:relative;min-height:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px 10px 10px;border-radius:16px;overflow:hidden;border:1px solid #ffffff26;background:linear-gradient(180deg,#2a2160,#15112f)}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.me{border-color:#ffd166;box-shadow:0 0 0 2px #ffd16655 inset}
.wrArt{display:none}/* PC: the card as before */
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrArt{display:block;position:absolute;inset:0 0 38% 0;overflow:hidden}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrArt img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard>:not(.wrArt):not(.wrTags){position:relative;grid-area:auto}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp::before{content:none}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrRank{display:flex;align-items:center;gap:4px;font-size:13px}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrRank svg{width:20px;height:20px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrId{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom :is(.wrClass,.wrCp){font-size:15px;white-space:nowrap}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCp b{font-size:17px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTags{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrTags i{font-size:12px;padding:2px 8px;border-radius:999px;background:#000a}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.empty{align-items:center;justify-content:center;gap:8px;background:#ffffff08;border:2px dashed #ffffff2e;color:#b8b2dc;font-size:16px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrCard.empty::before{content:'';width:40px;height:40px;background:currentColor;opacity:.7;-webkit-mask:var(--ico-plus) center/contain no-repeat;mask:var(--ico-plus) center/contain no-repeat}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrRule{grid-area:rule;margin:0;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cfc8f2}
/* bottom: chat left, class · 장비 · 스킬 · [전투 시작] right */
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChat{grid-area:chat;min-width:0;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrLog{flex:none;height:44px;min-height:0;max-height:44px;overflow:auto;padding:4px 10px;border-radius:12px;background:#0008;font-size:15px;line-height:1.35}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChatForm{display:flex;gap:6px}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChatForm :is(input,button){min-height:50px;font-size:17px}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChatForm input{flex:1;min-width:0}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChatForm button{flex:none;min-width:70px;padding:6px 12px;white-space:nowrap}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrActions{grid-area:act;display:flex;align-items:flex-end;gap:10px;margin:0;padding:0}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChars{display:flex;gap:6px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChars button{width:60px;min-height:94px;padding:4px;display:grid;justify-items:center;gap:2px;border-radius:14px;font-size:13px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChars img{width:48px;height:48px;border-radius:12px;object-fit:cover}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrActions>:is([data-act=gear],[data-act=skills]){width:74px;min-height:94px;padding:8px 4px;display:grid;justify-items:center;align-content:center;gap:6px;border-radius:16px;font-size:16px;font-weight:800}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrActions>:is([data-act=gear],[data-act=skills])::before{width:34px;height:34px}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrStart{min-width:250px;max-width:300px;min-height:94px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px;border-radius:22px;font-size:22px;font-weight:900;white-space:normal;line-height:1.15}
body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrStart::before{width:40px;height:40px}
/* v10.12 캐릭터 선택 · 생성 (character-screen.js): the account's six slots on a server with characters; the class slots stay for guest mode. */
#characterSelect[data-mode=chars]>:not(.charScreen),#characterSelect:not([data-mode=chars])>.charScreen{display:none}
.csAccount{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.csSlot{cursor:var(--game-cursor-pointer,pointer)}.csSlot.on{border-color:var(--pink);box-shadow:0 0 0 2px #ff4f9a66,0 12px 30px #ff4f9a44;transform:translateY(-3px)}
.csSlot strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csMeta{display:grid;gap:1px;margin-top:2px;font-size:11px;color:var(--muted);line-height:1.35}.csRank{display:flex;align-items:center;justify-content:center;gap:4px;color:#e9e4ff}.csRank svg{width:16px;height:16px}.csRank i{font-style:normal;font-size:11px}
.csTag{position:absolute;z-index:2;top:10px;right:10px;max-width:calc(100% - 50px);padding:2px 7px;border-radius:999px;background:#ffcf5bee;color:#2a1a00;font:700 10px/1.4 'Noto Sans KR',sans-serif;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.csTag.del{background:#ff4f6aee;color:#fff}
.csSlot.deleting .charArt img{filter:grayscale(1) brightness(.6)}.csSlot.deleting strong{color:#ff9aaa}
.csSlot.empty{border-style:dashed;border-color:#a894ff55;background:linear-gradient(170deg,#1d1640,#120d29)}.csSlot.empty .charArt{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#7a5cff33,transparent 70%),#140f2c}
.csSlot.empty .charArt b{font:400 54px/1 var(--display);color:#a894ffaa;transition:transform .15s,color .15s}.csSlot.empty:hover{border-color:var(--cyan)}.csSlot.empty:hover .charArt b{color:var(--cyan);transform:scale(1.15)}
.csHint{text-align:center;margin:14px 0 0;font-size:13px}
.csActions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:12px}.csActions button{min-width:130px}.csActions button.primary{min-width:220px;font-size:17px;font-weight:800}
button.dangerText{color:#ff9aaa;border-color:#ff6a8a55}button.danger{background:linear-gradient(100deg,#ff3d5e,#b0204a);color:#fff;border:0}
.csPanel{display:grid;gap:8px;max-width:460px;margin:12px auto 0;padding:14px 16px;border-radius:16px;background:#150f2ef2;border:1px solid #a894ff45}.csPanel.danger{border-color:#ff6a8a77}
.csPanel b{font-size:15px}.csPanel small{color:var(--muted);font-size:12px;line-height:1.5}.csPanel input,.ccCard input{min-height:44px;padding:0 12px;font-size:16px;border-radius:10px;border:1px solid #a894ff66;background:#0d0a20;color:#fff}
.csRow{display:flex;gap:8px;flex-wrap:wrap}.csRow button{flex:1;min-width:120px}.csErr{margin:0;color:#ff8fa3;font-size:13px;text-align:center}.csPanel .csErr,.ccCard .csErr{text-align:left}
/* The creation screen: full screen, the class's art behind, its tabs · the portrait / clip · what it does (then the nickname). */
.charCreate{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:clamp(84px,9vw,120px) minmax(0,1fr) minmax(300px,34vw);grid-template-rows:auto minmax(0,1fr);gap:14px 20px;padding:max(18px,env(safe-area-inset-top)) var(--safeR) var(--safeB) var(--safeL);background:#0b0818;color:#fff;overflow:hidden}
.charCreate[hidden]{display:none}
.ccBg{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#0b0818d9 0%,#0b081840 14%,#0b081800 42%,#0b081860 66%,#0b0818c8 100%),linear-gradient(0deg,#0b0818b0,#0b081800 30%),radial-gradient(ellipse at 38% 60%,color-mix(in srgb,var(--cc) 28%,transparent),transparent 60%),var(--ccbg) center/cover no-repeat,linear-gradient(160deg,#241a52,#0b0818);transition:background .3s}
.charCreate>:not(.ccBg){position:relative;z-index:1}
.ccHead{grid-column:1/-1}.ccHead h2{margin:4px 0 0;font:400 30px/1.1 var(--display);text-shadow:0 2px 12px #000}
.ccTabs{grid-row:2;display:flex;flex-direction:column;gap:10px;align-self:center}
.ccTab{display:grid;justify-items:center;gap:4px;padding:6px;min-height:0;border-radius:16px;background:#150f2ecc;border:2px solid #ffffff22}.ccTab img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}.ccTab span{font-size:13px;font-weight:700}
.ccTab.on{border-color:var(--cc);box-shadow:0 0 0 2px color-mix(in srgb,var(--cc) 45%,transparent),0 0 24px color-mix(in srgb,var(--cc) 50%,transparent)}.ccTab:not(.on) img{filter:saturate(.55) brightness(.75)}
.ccStage{grid-row:2;position:relative;display:grid;place-items:center;min-height:0}
.ccHero{max-width:100%;max-height:100%;height:100%;object-fit:contain;border-radius:24px;animation:ccIn .45s ease-out;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.ccClip{position:absolute;inset:4% 0 18%;width:100%;height:78%;object-fit:cover;border-radius:22px;border:1px solid #ffffff30;box-shadow:0 20px 60px #000b}
.ccHero.small{position:absolute;left:0;bottom:0;height:42%;max-width:40%;border-radius:18px;border:2px solid var(--cc)}
.ccSkill{position:absolute;right:4%;bottom:6%;display:grid;padding:10px 16px;border-radius:14px;background:#0b0818cc;border:1px solid color-mix(in srgb,var(--cc) 70%,transparent);animation:ccPulse 2.4s ease-in-out infinite}
.ccSkill small{font-size:11px;letter-spacing:.2em;color:var(--cc)}.ccSkill b{font:400 24px/1.2 var(--display)}
.ccSkills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.ccSkills button{min-height:34px;padding:4px 12px;border-radius:999px;font:400 16px/1.1 var(--display);background:#150f2ecc;border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);color:#e9e4ff}
.ccSkills button.on{background:color-mix(in srgb,var(--cc) 35%,#150f2e);border-color:var(--cc);color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--cc) 50%,transparent)}
.ccCard{grid-row:2;align-self:center;display:grid;gap:10px;padding:20px;border-radius:22px;background:#150f2ee8;border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 20px 60px #000a;max-height:100%;overflow:auto}
.ccCard .eyebrow{justify-self:start;background:color-mix(in srgb,var(--cc) 22%,#0b0818);border:1px solid var(--cc);color:#fff;text-shadow:none}.ccCard h2{margin:0;font:400 34px/1.1 var(--display)}.ccSum{margin:0;color:#e6e0ff;font-size:14px;line-height:1.5}
.ccCard ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}.ccCard li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:#d9d3f5}.ccCard li:before{content:'';position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--cc);transform:rotate(45deg)}
.ccCard small{color:var(--muted);font-size:12px;line-height:1.5}.ccCard .csRow button.primary{font-size:16px;font-weight:800}
@keyframes ccIn{from{opacity:0;transform:translateX(-18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ccPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cc) 0%,transparent)}50%{box-shadow:0 0 22px 2px color-mix(in srgb,var(--cc) 55%,transparent)}}
@media(max-width:760px){.charCreate{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.ccCard{grid-column:1/-1;grid-row:3}}
@media(orientation:landscape) and (max-height:600px){.charCreate{grid-template-columns:70px minmax(0,1fr) minmax(280px,40vw);gap:6px 12px;padding-top:10px}.ccHead h2{font-size:20px}.ccHead .eyebrow{display:none}
 .ccTabs{gap:6px}.ccTab{padding:3px;border-radius:12px}.ccTab span{font-size:11px}.ccCard{padding:12px 14px;gap:6px;border-radius:16px}.ccCard h2{font-size:24px}.ccSum{font-size:12px}.ccCard li{font-size:11.5px;line-height:1.4}
 .ccSkill{padding:6px 10px}.ccSkill b{font-size:18px}.ccCard input,.csPanel input{min-height:40px}
 body[data-controls=touch][data-account=select] .csMeta{font-size:9.5px}.csTag{top:6px;right:6px;font-size:9px}.csHint{margin-top:6px;font-size:11px}.csActions{margin-top:6px}.csActions button{min-height:40px}.csActions button.primary{min-width:180px;font-size:15px}
 .csPanel{margin-top:6px;padding:10px 12px;gap:6px}}
/* The waiting room's [캐릭터 변경] (a character's room) and its window of the account's characters. */
.wrCharPick span{display:inline!important;font-weight:700}body[data-controls=touch] #onlineLobby[data-rooms=waiting] #waitingRoom .wrChars .wrCharPick{width:auto;min-width:96px;padding:4px 8px}
.charPick{position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:16px;background:#07051299}.charPick[hidden]{display:none}
.cpBox{width:min(760px,100%);max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:12px;padding:18px;border-radius:22px;background:linear-gradient(160deg,#241a52f5,#150f2ef5);border:1px solid #a894ff55;box-shadow:0 24px 80px #000a}
.cpHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.cpHead b{display:block;font:400 24px/1.2 var(--display)}.cpHead small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5}
.cpList{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cpCard{position:relative;display:grid;justify-items:center;gap:3px;padding:8px 8px 10px;min-height:0;border-radius:16px;border:2px solid #a894ff40;background:linear-gradient(170deg,#2c2160,#171034);text-align:center}
.cpCard:not(:disabled):hover{border-color:var(--pink);transform:translateY(-2px)}.cpCard.on{border-color:var(--cyan)}.cpCard:disabled{opacity:1;cursor:var(--game-cursor-default,default)}.cpCard:disabled:not(.on){opacity:.5}
.cpArt{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#140f2c}.cpArt img{width:100%;height:100%;object-fit:cover}.cpCard b{font:400 17px/1.2 var(--display);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpCard small{font-size:11px;color:var(--cyan)}.cpCp{font-size:12px;color:#e9e4ff}.cpTag{position:absolute;top:12px;left:12px;padding:2px 8px;border-radius:999px;background:var(--cyan);color:#06202a;font:700 10px/1.4 'Noto Sans KR',sans-serif;font-style:normal}.cpTag.no{background:#ff6a8aee;color:#fff}
.cpNone,.cpBusy{margin:0;text-align:center;color:var(--muted);font-size:13px}
/* v10.12.1: 닉네임 변경 / 삭제 as a popup (character-screen.js dialog) */
.csDialog .csBox{width:min(440px,100%)}.csDialog .csPanel{margin:0;max-width:none;padding:0;border:0;background:none;gap:10px}.csDialog .csPanel b{font:400 22px/1.2 var(--display)}
@media(orientation:landscape) and (max-height:600px){.cpBox{padding:12px;gap:8px}.cpList{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.cpCard b{font-size:13px}.cpCard small,.cpCp{font-size:10px}.cpHead b{font-size:18px}.cpTag{top:6px;left:6px;font-size:9px}}
/* A character plays its own class: the class buttons (waiting room, briefing, prep panel) show only its own. */
body[data-chars="1"] :is(.wrChars,.brChars,#prepChars) button:not(.on){display:none}body[data-chars="1"] #prepPanel>p{display:none}
/* v10.12.1 튜토리얼 (tutorial.js): the lobby offer (z 29: under the windows, so a window opened from the keyboard stays on top), the coach
   card and the rings over the real controls (z 31: over a window, the gear step's pill must stay readable). Nothing blocks play: the
   layer lets touches and clicks through, only its buttons take them. The card sits under the boss bar in a fight (PC and phone) and
   at the bottom of the lobby (a phone: above 방 만들기, bottom right). */
.tutorial{position:fixed;inset:0;z-index:31;pointer-events:none;color:#f4f1ff;font-family:'Noto Sans KR',sans-serif}/* v10.12.5: the 자동 장착 step over its popup (z 36) — only its rings (the pill would cover the popup's buttons) */.tutorial.overPop{z-index:37}.tutorial.overPop .tutCard{visibility:hidden}
.tutorial[hidden],.tutorial [hidden],.tutOffer[hidden]{display:none!important}
.tutCard{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 178px);transform:translateX(-50%);width:min(500px,calc(100vw - 32px));box-sizing:border-box;padding:11px 16px 13px;border-radius:16px;background:linear-gradient(160deg,#261c58f0,#140e2cf2);border:1px solid #ffe1ad5c;box-shadow:0 12px 32px #000a;text-shadow:0 1px 2px #000;line-height:1.35;animation:tutIn .25s ease-out}
.tutCard button{pointer-events:auto;min-height:36px}
.tutHead{display:flex;align-items:center;gap:8px;min-height:28px;font-size:12px;color:#d6d0f5}
.tutTag{font:400 13px/1 var(--display);letter-spacing:.08em;color:#ffe1ad}
.tutCount{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.tutDots{display:flex;gap:4px;margin-right:auto}.tutDots i{width:7px;height:7px;border-radius:50%;background:#ffffff30}.tutDots i.on{background:#ffe1ad}.tutDots i.now{background:#ff8fc4;box-shadow:0 0 0 2px #ff8fc455}
.tutSkip{margin-left:auto;min-height:28px!important;padding:2px 11px;font-size:12px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff38;color:#e6e1ff;text-shadow:none}
.tutTitle{margin:6px 0 3px;font:400 22px/1.2 var(--display);color:#fff}
.tutText{margin:0;font-size:16px;font-weight:700;color:#fff;word-break:keep-all}
.tutCard kbd{display:inline-block;min-width:24px;margin:0 2px;padding:2px 7px;border:0;border-radius:7px;background:#fff;color:#1a1438;font:800 14px/1.25 Arial,'Noto Sans KR',sans-serif;text-align:center;box-shadow:0 3px 0 #a894ff;text-shadow:none;vertical-align:1px}
.tutName{padding:1px 8px;border-radius:8px;background:linear-gradient(100deg,var(--pink),var(--violet));color:#fff;white-space:nowrap}
.tutSub{margin:6px 0 0;font-size:13px;color:#d6d0f5;word-break:keep-all}.tutSub kbd{font-size:12px;min-width:20px;padding:1px 5px}
.tutNotice{margin:8px 0 2px;padding:6px 10px;border-radius:10px;background:#ff8fc42e;border:1px solid #ff8fc488;font-size:13px;font-weight:700;color:#ffe3f1}
.tutChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tutChip{display:inline-flex;align-items:center;gap:3px;padding:3px 10px 3px 4px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff2e;font-size:13px;font-weight:700;white-space:nowrap}
.tutChip kbd{font-size:12px;min-width:20px;padding:1px 5px;box-shadow:0 2px 0 #a894ff}
.tutFar{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--cyan)}
.tutProg{display:flex;align-items:center;gap:10px;margin-top:10px}.tutBar{flex:1;height:7px;border-radius:999px;background:#ffffff1c;overflow:hidden}.tutBar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--accent));transition:width .15s linear}
.tutMeter{flex:none;margin-left:auto;font-size:12px;color:#d6d0f5;font-variant-numeric:tabular-nums}
.tutActs{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:10px}.tutActs button{min-height:40px;padding:6px 18px;font-size:14px}
.tutGood{position:absolute;left:50%;top:-15px;transform:translateX(-50%);margin:0;padding:4px 14px;border-radius:999px;background:#7dffb0;color:#0b2a18;font-size:14px;font-weight:900;text-shadow:none;white-space:nowrap;box-shadow:0 4px 14px #0008;animation:tutPop .3s ease-out}
.tutorial[data-place=lobby] .tutCard{top:auto;bottom:calc(var(--safeB) + 22px)}
.tutorial[data-kind=pill] .tutCard{top:auto;bottom:calc(var(--safeB) + 12px);width:auto;max-width:calc(100vw - 32px);padding:6px 14px 8px}
.tutorial[data-kind=pill] .tutHead{display:none}
/* v10.12.2 스킬 설명 (tutorial.js 'skills'): a centred card, one row per skill — its icon, key / name, one line — scrolling if it must */
.tutorial[data-kind=info]{background:#05030ca6;pointer-events:auto;z-index:95/* over the map-name banner */}
.tutorial[data-kind=info] .tutCard{top:50%;left:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;pointer-events:auto}
.tutClips{display:flex;gap:10px;align-items:center;margin-top:8px}.tutClip{flex:none;width:min(300px,48%);aspect-ratio:16/9;border-radius:10px;border:1px solid #ffffff38;background:#000;object-fit:cover}
.tutClipTabs{display:flex;flex-wrap:wrap;gap:6px;align-content:center}.tutClipTabs button{pointer-events:auto;min-height:32px;padding:4px 12px;border-radius:999px;font-size:13px;background:#ffffff14;border:1px solid #ffffff38;color:#fff}.tutClipTabs button.on{background:#ff3d6e;border-color:#ff8aa6}.tutClipTabs small{flex-basis:100%;font-size:11px;color:#d6d0f5}
body[data-controls=touch] .tutClip{width:min(240px,40%)}
.tutRows{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:8px}.tutRow{display:flex;align-items:center;gap:9px;min-width:0}
.tutRow>img,.tutRow>i{flex:none;width:36px;height:36px;border-radius:9px;border:1px solid #ffffff38;background:#ffffff14}
.tutRow>i.tutMark{display:grid;place-items:center;width:auto;min-width:36px;padding:0 4px;box-sizing:border-box;font:900 17px/1 Arial,'Noto Sans KR',sans-serif;font-style:normal;color:#ffe1ad;white-space:nowrap}.tutRow>i.tutMark kbd{font-size:11px;min-width:16px;padding:1px 4px;margin:0 1px}
.tutRow b{display:block;font-size:14px;color:#fff}.tutRow b kbd{font-size:12px;min-width:20px;padding:1px 5px;margin:0 5px 0 0;box-shadow:0 2px 0 #a894ff}.tutRow small{display:block;font-size:12px;line-height:1.3;color:#d6d0f5;word-break:keep-all}
body[data-controls=touch] .tutorial[data-kind=info] .tutCard{left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 16px)}
@media (max-width:560px){.tutRows{grid-template-columns:1fr}}
.tutRing{position:absolute;pointer-events:none}.tutRing>i{position:absolute;inset:0;border:3px solid #ffe1ad;border-radius:14px;box-shadow:0 0 0 3px #ffe1ad33,0 0 18px #ffe1ad88;animation:tutPulse 1.2s ease-in-out infinite}
.tutRing.round>i{border-radius:50%}
.tutRingTag{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:#ffe1ad;color:#231b10;font-size:12px;font-weight:800;line-height:1.3;white-space:nowrap;box-shadow:0 2px 8px #0008}
.tutRing.below .tutRingTag{bottom:auto;top:calc(100% + 7px)}.tutRing.alignL .tutRingTag{left:0;transform:none}.tutRing.alignR .tutRingTag{left:auto;right:0;transform:none}
.tutSwipe{position:absolute;right:calc(var(--safeR) + 27%);top:57%;display:grid;justify-items:center;gap:6px;transform:translateY(-50%)}
.tutSwipe i{position:relative;width:132px;height:40px;border-radius:999px;border:2px dashed #ff8fc4c0;background:#ff8fc41c}
.tutSwipe i::after{content:'';position:absolute;top:50%;left:12px;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 0 12px #ff8fc4;animation:tutSwipe 1.6s ease-in-out infinite}
.tutSwipe span{padding:3px 10px;border-radius:999px;background:#ff8fc4;color:#2a0f1e;font-size:12px;font-weight:800;text-shadow:none}
@keyframes tutIn{from{opacity:0}}
@keyframes tutPop{from{opacity:0;transform:translate(-50%,5px) scale(.85)}}
@keyframes tutPulse{50%{box-shadow:0 0 0 7px #ffe1ad22,0 0 26px #ffe1adaa}}
@keyframes tutSwipe{0%,100%{transform:translateX(0)}50%{transform:translateX(84px)}}
.tutOffer{position:fixed;inset:0;z-index:29;display:grid;place-items:center;padding:16px;background:#05030fb3;animation:tutIn .2s ease-out}
.tutOfferCard{box-sizing:border-box;width:min(600px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px 26px 18px;border-radius:22px;background:linear-gradient(160deg,#2c2060,#140e2c);border:1px solid #ffe1ad66;box-shadow:0 24px 60px #000c;text-align:center;color:#f4f1ff}
.tutEyebrow{display:inline-block;padding:3px 12px;border-radius:999px;background:#ffe1ad;color:#231b10;font-size:12px;font-weight:800;letter-spacing:.04em}
.tutOfferCard h2{margin:10px 0 6px;font:400 28px/1.2 var(--display);color:#fff}
.tutOfferCard p{margin:0 0 6px;font-size:15px;color:#e6e1ff;word-break:keep-all}.tutOfferCard .tutOfferHow{color:var(--cyan);font-weight:700;font-size:14px}
.tutOfferSteps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 4px;margin:12px 0 16px}.tutOfferSteps span{padding:3px 9px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff2a;font-size:12px;font-weight:700;white-space:nowrap}.tutOfferSteps i{font-style:normal;color:#ffffff66}
.tutOfferBtns{display:flex;gap:10px;justify-content:center}.tutOfferBtns button{min-width:150px;min-height:50px;font-size:17px;font-weight:800}
.tutOfferNote{display:block;margin-top:12px;font-size:12px;color:#b7b1d8}
/* Phones: at the left under the HP bar in a fight (the middle stays clear: the target stands there on a phone's higher camera); above 방 만들기 in the lobby. Fitted pages (html.phoneFit: the lobby,
   and every screen inside the app) are drawn ~0.7×, so the words there are set bigger. */
body[data-controls=touch] .tutCard{left:calc(var(--safeL) - 4px);transform:none;top:calc(env(safe-area-inset-top) + 94px);width:min(360px,max(280px,calc(50vw - 64px)));padding:8px 11px 9px;border-radius:14px}
body[data-controls=touch] .tutTitle{margin:3px 0 2px;font-size:18px}body[data-controls=touch] .tutText{font-size:14px}body[data-controls=touch] .tutSub{margin-top:4px;font-size:12px}
body[data-controls=touch] .tutProg{margin-top:7px}body[data-controls=touch] .tutBar{height:6px}body[data-controls=touch] .tutActs{margin-top:7px}body[data-controls=touch] .tutActs button{min-height:40px}
body[data-controls=touch] .tutorial[data-place=lobby] .tutCard{left:auto;right:calc(var(--safeR) + 4px);transform:none;bottom:calc(var(--safeB) + 124px);width:min(430px,calc(100vw - 32px))}
body[data-controls=touch] .tutorial[data-kind=pill] .tutCard{left:50%;top:auto;transform:translateX(-50%);width:auto}
html.phoneFit body[data-controls=touch] .tutCard{width:min(480px,max(380px,calc(50vw - 90px)));top:calc(env(safe-area-inset-top) + 128px)}
html.phoneFit body[data-controls=touch] .tutorial[data-place=lobby] .tutCard{width:min(520px,calc(100vw - 40px));top:auto;bottom:calc(var(--safeB) + 132px)}
html.phoneFit body[data-controls=touch] .tutTitle{font-size:23px}html.phoneFit body[data-controls=touch] .tutText{font-size:18px}html.phoneFit body[data-controls=touch] .tutSub,html.phoneFit body[data-controls=touch] .tutChip{font-size:15px}
html.phoneFit body[data-controls=touch] .tutHead,html.phoneFit body[data-controls=touch] .tutSkip{font-size:14px}html.phoneFit body[data-controls=touch] .tutRingTag,html.phoneFit body[data-controls=touch] .tutSwipe span{font-size:15px}
html.phoneFit .tutOfferCard{width:min(720px,100%);padding:24px 30px 20px}html.phoneFit .tutOfferCard h2{font-size:36px}html.phoneFit .tutOfferCard p{font-size:19px}html.phoneFit .tutOfferCard .tutOfferHow{font-size:18px}html.phoneFit .tutEyebrow,html.phoneFit .tutOfferNote{font-size:15px}html.phoneFit .tutOfferSteps span{font-size:15px;padding:4px 11px}html.phoneFit .tutOfferBtns button{min-width:190px;min-height:62px;font-size:22px}
@media (prefers-reduced-motion:reduce){.tutCard,.tutGood,.tutOffer{animation:none}.tutRing>i,.tutSwipe i::after{animation:none}}
/* v10.13 나가기 (app.js exitBtn; user: "훈련장 스테이지 나가기버튼넣어주고"): a small leave button on the battle HUD — phone: left of the ☰ menu;
   PC: under the top-right menu buttons (the new PC HUD puts it left of the minimap, pc-hud.js). Armed (second tap) it turns red. */
#hud .exitBtn{position:absolute;top:72px;right:var(--safeR);min-height:34px;padding:0 14px;font-size:13px;font-weight:700;border-radius:9px;background:#1b262ce6;border:1px solid #ffffff40;color:#f1f4f2;pointer-events:auto;z-index:3}
#hud .exitBtn[hidden]{display:none}
body[data-controls=touch] #hud .exitBtn{top:calc(env(safe-area-inset-top,0px) + 4px);right:calc(var(--safeR) + 50px);min-height:30px;padding:0 10px;font-size:11px}
body:not(.playing) #hud .exitBtn{display:none}
#hud .exitBtn.armed{background:#7a1e1ef0;border-color:#ff8a7a;color:#fff}
/* ==== v10.13.2 notice-move: 획득 팝업 · 자동 판매 off the middle of the fight ======================================================
   (user: "자동판매뜨는 알람 다른곳으로옴겨줘 시야가려", "획득도 다른곳으롸"). The 획득 pop-up (gear-ui.js LootView) is a small card at
   the edge — PC: bottom right (새 배치: over the menu bar; 예전 배치: the free corner); phone: one slim strip on the top edge between
   남은 적 and 나가기 — with the item's name line only (no stats), up 3 s. A sold pickup has no pop-up: the sale is a line in the PC HUD's
   chat (시스템 tab) or, phones / 예전 배치, in the side 획득 feed (#lootLog .sale, loot-log.js), not the centre toast. !important: the
   ×1.3 UI-size rules above place the old centre card with high-specificity selectors. */
#lootPopup .itemCard>:not(.itemHead){display:none}
#lootPopup .itemHead :is(svg,img){flex:none;width:38px;height:38px}
#lootPopup .lootWho{margin:0 0 3px 2px;text-align:left;font-size:12px}
#lootPopup .lootRec{margin:0 0 3px 2px;font-size:11.5px}#lootPopup .lootRec small{font-size:inherit;font-weight:600;color:#bfe9c6}
#lootPopup .rolls{margin:3px 0 0 2px;text-align:left;font-size:11px}
@keyframes lootSide{from{opacity:0;transform:translateX(14px)}}
body[data-controls=desktop] #lootPopup{left:auto!important;top:auto!important;right:var(--safeR)!important;bottom:calc(var(--safeB) + 8px)!important;width:min(270px,calc(100vw - 32px))!important;max-height:none!important;transform:none;animation:lootSide .22s ease-out}
body[data-controls=desktop] #lootPopup{padding:6px 7px 7px;border-radius:12px;background:#0d0a1fdb;border:1px solid #ffffff24;box-shadow:0 6px 18px #0008}
body[data-controls=desktop] #lootPopup .itemCard{padding:6px 9px;border-radius:9px}
body[data-controls=desktop] #lootPopup .itemHead b{font-size:13.5px;line-height:1.25}
html.pcHud2 body[data-controls=desktop] #lootPopup{right:12px!important;bottom:96px!important}
body[data-controls=touch] #lootPopup{top:calc(env(safe-area-inset-top,0px) + 3px)!important;left:calc(50% + 60px)!important;right:calc(var(--safeR) + 110px)!important;width:auto!important;max-width:300px;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding:2px 7px 3px 4px;border-radius:9px;background:#100c24e0;border:1px solid #ffffff24;box-shadow:0 3px 10px #0007;transform:none;animation:lootSide .2s ease-out}
body[data-controls=touch] #lootPopup .lootWho{flex:none;margin:0;font-size:9px;line-height:1.3}
body[data-controls=touch] #lootPopup .lootRec{flex:none;margin:0;font-size:9px;line-height:1.3}body[data-controls=touch] #lootPopup .lootRec small,body[data-controls=touch] #lootPopup .rolls{display:none}
body[data-controls=touch] #lootPopup .itemCard{flex:1 1 100%;min-width:0;padding:0 0 0 5px;border:0;border-left:3px solid var(--grade);border-radius:0;background:none}
body[data-controls=touch] #lootPopup .itemHead{gap:5px}body[data-controls=touch] #lootPopup .itemHead :is(svg,img){width:21px;height:21px}
body[data-controls=touch] #lootPopup .itemHead>div{min-width:0}
body[data-controls=touch] #lootPopup .itemHead :is(b,small){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}body[data-controls=touch] #lootPopup .itemHead b{font-size:10.5px}body[data-controls=touch] #lootPopup .itemHead small{font-size:8.5px}
body[data-controls=touch]:has(#bidStack>.bidCard) #lootPopup{right:calc(var(--safeR) + 214px)!important}
#lootLog .llEntry.sale{border-left-color:#f3cf72;background:#1f1708d9}
#lootLog .llEntry.sale .llText b{color:#ffe08a}

/* v10.14.1 AI 동료 (ai-party-ui.js): the small "AI" badge (waiting-room card, the party list, the name tag), the [AI 동료] switch, the lobby row's +AI n */
.aiBadge{display:inline-block;flex:none;margin-right:4px;padding:0 4px;border-radius:4px;background:#5ad1ff;color:#06121c;font:800 9px/1.5 system-ui,sans-serif;font-style:normal;letter-spacing:.02em;vertical-align:1px}
.wrCard.ai{border-style:dashed;border-color:#5ad1ff66;background:#1a2342e8}
.wrAi.on{border-color:#5ad1ff;color:#bfefff;box-shadow:inset 0 0 0 1px #5ad1ff55}
.rmAi{font-size:10px;font-weight:700;color:#9fe4ff}
.playerLabel.aiLabel b::before{content:'AI';display:inline-block;margin-right:3px;padding:0 3px;border-radius:3px;background:#5ad1ff;color:#06121c;font-size:.75em;font-weight:800;vertical-align:1px;text-shadow:none}
body[data-controls=touch] .aiBadge{font-size:8px;padding:0 3px;margin-right:3px}
/* v10.15.1 자리 비움 AI (away-signal.js): a player whose body the server's AI holds while they are away — the party list badge and the name tag */
.awayBadge{display:inline-block;flex:none;margin-right:4px;padding:0 4px;border-radius:4px;background:#ffc861;color:#241800;font:800 9px/1.5 system-ui,sans-serif;font-style:normal;letter-spacing:.02em;vertical-align:1px;white-space:nowrap}
.playerLabel.awayLabel b::after{content:'자리 비움 · AI';display:inline-block;margin-left:4px;padding:0 3px;border-radius:3px;background:#ffc861;color:#241800;font-size:.72em;font-weight:800;vertical-align:1px;text-shadow:none;white-space:nowrap}
body[data-controls=touch] .awayBadge{font-size:8px;padding:0 3px;margin-right:3px}
/* ==== v10.15.1 PC 로비 3열 · 필터 창 =================================================================================== */
/* User 10/2: "ui안맞는부분 접속자 부분왼쪽으로 채팅창 옴겨주고 방만들기가 굳이 저렇게 넓게쓰일필요없잖아" — on a PC (a window 1000 px or wider) the
   lobby is three columns: the room list (47 %), the lobby chat (its full height), 접속 중 (its own full-height card, the chat window's look). The
   aside keeps its markup (h3, #onlinePlayers, #lobbyChat) and becomes a two-column grid, the chat first. Without the lobby chat (an older server)
   the two columns stay as they were. Every rule here is PC-only (body[data-controls=desktop]); a phone never matches any of it. */
@media (min-width:1000px){
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .lobbyColumns:has(#lobbyChat:not([hidden])){grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:24px}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden])){display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,1fr);grid-template-rows:auto minmax(0,1fr);gap:0 16px;overflow:hidden;padding-left:20px}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn>#lobbyChat:not([hidden]){grid-column:1;grid-row:1 / -1;margin:0;min-height:0}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden]))>h3{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;margin:0;padding:10px 14px 8px;font-size:15px;line-height:1.2;border:1px solid #ffffff1f;border-bottom-color:#ffffff14;border-radius:10px 10px 0 0;background:#0c1a22d9;text-shadow:0 1px 2px #000}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden]))>#onlinePlayers{grid-column:2;grid-row:2;min-height:0;max-height:none;margin:0;padding:0 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid #ffffff1f;border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(#0c1a22d9,#08121abf);box-shadow:0 6px 18px #0006}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden]))>#onlinePlayers li{gap:10px;padding:10px 0}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden]))>#onlinePlayers li:last-child{border-bottom:0}
 body[data-controls=desktop] #onlineLobby[data-rooms=lobby] .onlineColumn:has(#lobbyChat:not([hidden]))>#onlinePlayers :is(b,small){word-break:keep-all;overflow-wrap:anywhere}/* "스테이지 12" breaks between words, not inside one */
}
/* The room rows: in the list's fixed height, plain auto rows shrank to their 58 px minimum once the rows outgrew it (6 rooms at ×1.3) and cut
   the 입장 가능 line at each row's foot — each row is now as tall as what it shows, and the list scrolls. */
body[data-controls=desktop] #onlineLobby[data-rooms=lobby] #roomLobby .rlList{grid-auto-rows:max-content}
/* 필터 (user 10/2: "필터 도 내부 다듬어주고"): one tidy card — the 스테이지 구간 steppers in one row of equal 36 px buttons, the presets an even
   4 × 3 grid, the four conditions a 2 × 2 grid of toggles (the whole box is the label: a click anywhere flips it), less air; the markup and every
   behaviour are room-ui.js's as before. */
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter]{width:min(600px,100%)}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpHead{padding:14px 16px 6px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpBody{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;padding:4px 16px 12px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpBody>:not(.rpCheck){grid-column:1 / -1}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpField{grid-row:auto;gap:8px;margin-bottom:4px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpRange{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpRange>b{color:var(--muted);font-weight:400}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpStepper.small{grid-template-columns:36px 36px minmax(44px,1fr) 36px 36px;gap:4px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpStepper.small>:is(button,input){height:36px;min-height:36px;margin:0;border-radius:8px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpStepper.small>button{display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:0;font-size:12px;line-height:1}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpStepper.small>input{padding:0 4px;font-size:15px;font-variant-numeric:tabular-nums;text-align:center}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpPresets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpPresets button{min-width:0;min-height:32px;padding:4px 6px;border-radius:8px;font-size:12px;line-height:1.2;white-space:nowrap}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck{display:flex;align-items:center;gap:10px;min-height:0;margin:0;padding:9px 12px;border:1px solid #a894ff33;border-radius:10px;background:#ffffff08;font-size:13px;line-height:1.3;cursor:var(--game-cursor-pointer,pointer);-webkit-user-select:none;user-select:none;transition:border-color .12s,background-color .12s}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck:hover{border-color:#a894ff77;background-color:#ffffff12}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck:has(input:checked){border-color:#ff7ac0aa;background:linear-gradient(100deg,#ff4f9a24,#8a6cff24);color:#fff}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid #a894ff88;border-radius:6px;background:#120d2a;cursor:var(--game-cursor-pointer,pointer);transition:background-color .12s,border-color .12s}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck input:checked{border-color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/14px no-repeat,linear-gradient(135deg,var(--pink),var(--violet))}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCheck input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpCount{margin:2px 0 0;font-size:12px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpFoot{padding:10px 16px 14px}
body[data-controls=desktop] #roomPopup .rpCard[data-kind=filter] .rpFoot button{min-height:40px}
/* ==== end v10.15.1 PC 로비 3열 · 필터 창 ================================================================================ */
/* v10.15.4: native cursor pixels/hotspots never multiply by UI zoom. */
#mouseCursorRow{display:none}
@media (hover: hover) and (pointer: fine){
 body[data-controls="desktop"] #mouseCursorRow:not([hidden]){display:flex}
 body[data-controls="desktop"][data-mouse-cursor="game"]{
  --game-cursor-default:url("../../assets/images/ffc7321ea7ff6c9b6f0899c5.png") 4 3,default;
  --game-cursor-pointer:url("../../assets/images/961c25329a467bc2075c51f3.png") 13 3,pointer;
  --game-cursor-grabbing:url("../../assets/images/24baeef40c3e01231fe82e00.png") 16 16,grabbing;
  cursor:var(--game-cursor-default,default);
 }
 body[data-controls="desktop"][data-mouse-cursor="game"] :is(a[href],summary,select,input[type="checkbox"],input[type="radio"]){cursor:var(--game-cursor-pointer,pointer)}
 @supports (cursor:image-set(url("../../assets/images/ffc7321ea7ff6c9b6f0899c5.png") 1x,url("../../assets/images/df9cf82b2d4016219299bf38.png") 2x) 4 3,default){
  body[data-controls="desktop"][data-mouse-cursor="game"]{
   --game-cursor-default:image-set(url("../../assets/images/ffc7321ea7ff6c9b6f0899c5.png") 1x,url("../../assets/images/df9cf82b2d4016219299bf38.png") 2x) 4 3,url("../../assets/images/ffc7321ea7ff6c9b6f0899c5.png") 4 3,default;
   --game-cursor-pointer:image-set(url("../../assets/images/961c25329a467bc2075c51f3.png") 1x,url("../../assets/images/68dc0e7aef55ee1db5d27dde.png") 2x) 13 3,url("../../assets/images/961c25329a467bc2075c51f3.png") 13 3,pointer;
   --game-cursor-grabbing:image-set(url("../../assets/images/24baeef40c3e01231fe82e00.png") 1x,url("../../assets/images/06999d35ef081f99d6b61f53.png") 2x) 16 16,url("../../assets/images/24baeef40c3e01231fe82e00.png") 16 16,grabbing;
  }
 }
}
/* "자동 등반 · 자동 반복": shared controls; phone fitting stays in its existing scope. */
 .autoProgressControls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0;font-size:13px}.autoProgressControls button{margin:0;padding:7px 12px}html.phoneFit .autoProgressControls,body[data-controls=touch] .autoProgressControls{font-size:18px}
/* v10.15.4: shared PC / 70% phone monster level and host controls. */
.monsterLevel{display:inline-flex!important;align-items:center;gap:5px;border:1px solid currentColor;border-radius:8px;padding:4px 8px;font-size:15px!important;font-weight:800;line-height:1.2;background:#111c28;white-space:nowrap}.monsterLevel strong{font-size:23px!important}.monsterLevel em{font-style:normal;font-size:11px}.monsterLevel.easy{color:#87efab!important}.monsterLevel.normal{color:#ffe077!important}.monsterLevel.hard{color:#ff938b!important}

html.phoneFit .autoProgressControls select,body[data-controls=touch] .autoProgressControls select{min-height:44px}
.autoProgressSetting{white-space:nowrap}.autoProgressSetting select{min-width:0;flex:1;width:auto}html.phoneFit .autoProgressSetting select,body[data-controls=touch] .autoProgressSetting select{min-height:44px}

body[data-controls=desktop] .wrDungeonControls{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}body[data-controls=desktop] .wrDungeonControls button,body[data-controls=desktop] .wrRaidStep button{min-width:44px;min-height:40px}body[data-controls=desktop] .wrDungeonControls button:disabled{opacity:.5}body[data-controls=desktop] .rmMeta{flex-wrap:wrap}

/* "등반 반복도 절전옆에있어야지": one persistent HUD control, within each platform's existing UI scale. */
#hud #autoProgressBtn{white-space:nowrap;min-width:118px;touch-action:manipulation}
html.phHud body[data-controls=touch].playing #hud .commsButtons #autoProgressBtn{order:4;display:block;pointer-events:auto;height:calc(48px * var(--phk,1));width:auto;padding:0 calc(12px * var(--phk,1));min-height:0;min-width:0;border-radius:calc(24px * var(--phk,1));background:#0b1820ee;border:1.5px solid #9fe0ff66;color:#c3d1d3;font-size:calc(14.5px * var(--phk,1))}
html.phHud body[data-controls=touch].playing #hud .commsButtons #autoProgressBtn[aria-pressed=true]{background:#224230e8;border-color:#8bc89c;color:#acf1bf}
/* "핸드폰에서 딜미터기 너무커졌어 다시줄여": DPS moves to the row detail; damage and threat stay visible. */
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhRow>span:nth-child(4){display:none}
/* Keep boss bars below the taller phone chips, including the narrow 800×360 fit. */
html.phoneFit.phHud body[data-controls=touch].playing #bossBar,html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhBoss{top:56px}
html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhCast{top:90px}

html.phoneFit.phHud body[data-controls=touch].playing #raidHud .rhPlayer:has(.me){position:sticky;bottom:0;background:#17132b;z-index:1}

/* m10.15.5: "폰크기로 오늘추가한거 재확인". Fixed 800px fit; divide viewport caps by the reading zoom. */
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox:is(.itemOverview,.itemActionBox){max-height:calc((100dvh - 24px) / var(--prk));min-height:0}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionOverlay{min-height:0;overflow:hidden}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.itemActionContent,.itemOverviewGrid){min-height:0;flex:1}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.itemHead b,.itemHead small,.itemOpts li,.itemEquipCompareRows>div){line-height:1.6}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.enhRec small,.enhRec p,.enhRec b,.enhRec span,.enhStats th,.enhStats td,.enhSteps th,.enhSteps td,.enhResult small,.itemEnh){font-size:24px;line-height:1.5}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#skillSheet,#autoSkillSheet,#updateNotes,.cwAttend) :is(p,small,li,label,span,b,em,strong,kbd,td,th,button,select,input){font-size:20px!important;line-height:1.5}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#skillSheet,#autoSkillSheet,#updateNotes,.cwAttend) :is(button,select,input:not([type=checkbox]):not([type=range])){min-height:64px;min-width:64px}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#skillSheet,#autoSkillSheet,#updateNotes,.cwAttend) :is(h2,h3,h4){line-height:1.5}
html.phoneFit body[data-controls=touch] #updateNotes .unBody{grid-template-columns:210px minmax(0,1fr)}
html.phoneFit body[data-controls=touch] #updateNotes .unList button{flex-shrink:0;padding:8px 12px}
html.phoneFit body[data-controls=touch] #updateNotes .unNote{font-size:20px;line-height:1.6}
html.phoneFit body[data-controls=touch] .cwAttend .acCell{min-height:92px;padding-top:30px}
html.phoneFit body[data-controls=touch] .cwAttend .acCell b{white-space:normal;text-align:center;overflow:visible}
html.phoneFit body[data-controls=touch] .cwAttend .acFoot{flex-shrink:0;flex-wrap:wrap}
html.phoneFit body[data-controls=touch] #skillSheet .spRow{flex-wrap:wrap;gap:8px}
html.phoneFit body[data-controls=touch] #autoSkillSheet .autoRows{grid-template-columns:repeat(3,minmax(0,1fr))}
html.phoneFit body[data-controls=touch] #autoSkillSheet .autoRow{min-height:72px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox{max-height:calc((100dvh - 24px) / var(--prk))!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.itemHead b,.itemHead small,.itemOpts li,.itemEquipCompareRows>div){line-height:1.6!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .enhN{font-size:20px!important;line-height:1.5}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .enhRec :is(small,p,b,span){font-size:24px!important;line-height:1.5}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#skillSheet,#autoSkillSheet,#updateNotes,.cwAttend) :is(h2,h3,h4,.acTotal){font-size:22px!important;line-height:1.5!important}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#autoSkillSheet) output{min-width:64px;width:auto;flex-shrink:0}
html.phoneFit body[data-controls=touch] #settingsMenu #settingsClose{min-height:64px!important}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#autoSkillSheet) input[type=range]{min-height:64px}
html.phoneFit body[data-controls=touch] :is(#settingsMenu,#autoSkillSheet) input[type=checkbox]{min-width:32px;min-height:32px}
html.phoneFit body[data-controls=touch] .cwAttend .acLabel{width:160px;min-width:160px;white-space:normal;overflow-wrap:anywhere}

html.phoneFit body[data-controls=touch] #craftSheet.craftPop .enhCost :is(b,small){line-height:1.6!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent :is(.itemActions,.enhGo){position:static!important}
html.phoneFit body[data-controls=touch] .cwAttend .acRow{grid-template-columns:160px minmax(0,1fr)}
html.phoneFit body[data-controls=touch] #settingsMenu:not([hidden]) .volumeRow{grid-template-columns:100px minmax(80px,1fr) 64px;gap:12px}
html.phoneFit body[data-controls=touch] #settingsMenu:not([hidden]){padding-top:80px}

html.phoneFit body[data-controls=touch] .cwAttend .acRow{grid-template-columns:160px minmax(0,1fr)!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.resetHint,.resetLine span,.resetLine small,.craftCur,.craftPopOdds>.muted){font-size:24px!important;line-height:1.6}
html.phoneFit body[data-controls=touch] #skillSheet .skillHead kbd{white-space:normal;overflow-wrap:anywhere;max-width:100%}
html.phoneFit body[data-controls=touch] #skillSheet .skillCard{grid-template-columns:140px minmax(0,1fr)}

html.phoneFit body[data-controls=touch].playing #hud :is(.stageLabel,#roundClock,.remainingTitle,.phcChip span,#powerSaveBtn,#exitBtn,#phAutoBtn span,#fallCharges,.phHpText,.icCount,.icCount b){font-size:calc(16px * var(--phk))!important;line-height:1.5}
html.phoneFit body[data-controls=touch].playing #hud :is(.phcChip,#huntToggle,#powerSaveBtn,.hudMenuBtn,#exitBtn,#phAutoBtn){min-height:calc(53px * var(--phk))!important}
html.phoneFit body[data-controls=touch].playing #hud .monsterLevel :is(span,strong){font-size:calc(16px * var(--phk))!important}
html.phoneFit body[data-controls=touch].playing #autoProgressHud{font-size:25px;top:96px;line-height:1.5}
html.phoneFit body[data-controls=touch].playing #toast{top:155px;font-size:25px;line-height:1.5;max-width:calc(100vw - 32px)}
html.phoneFit body[data-controls=touch].playing #touchHint{top:100px;font-size:16px;max-width:calc(100vw / var(--phk) - 32px)}
html.phoneFit body[data-controls=touch].playing #prepare :is(small,span){font-size:25px;line-height:1.5}
html.phoneFit body[data-controls=touch].playing .playerLabel :is(small,b){font-size:25px;line-height:1.6}
html.phoneFit body[data-controls=touch] #result :is(p,small,span,b,em,td,th,label,button,select){font-size:16px!important;line-height:1.6}
html.phoneFit body[data-controls=touch] #result :is(button,select){min-height:54px;min-width:54px}
html.phoneFit body[data-controls=touch] #result{width:min(1080px,calc((100vw - 24px) / var(--phk)));overflow:auto}

html.phoneFit body[data-controls=touch].playing #hud .remainingTitle{font-size:calc(16px * var(--phk))!important;line-height:1.3!important;white-space:nowrap;width:auto}
html.phoneFit body[data-controls=touch].playing #touchHint{top:110px!important;font-size:16px!important;line-height:1.5}
html.phoneFit body[data-controls=touch].playing #preparePanel :is(small,span){font-size:25px!important;line-height:1.6}
html.phoneFit body[data-controls=touch].playing .playerLabel :is(small,b){font-size:25px!important;line-height:1.6!important}
html.phoneFit body[data-controls=touch] #result strong{font-size:16px!important;line-height:1.6}
html.phoneFit body[data-controls=touch].playing #prepareNotice :is(small,span){font-size:25px!important;line-height:1.6!important}

html.phoneFit body[data-controls=touch].playing #hud .remainingTitle{min-width:calc(104px * var(--phk))!important}
html.phoneFit body[data-controls=touch].playing #toast{top:calc(160px * var(--phk))!important}
html.phoneFit body[data-controls=touch].playing #hud .remainingTitle{font-size:16px!important;min-width:140px!important}
html.phoneFit body[data-controls=touch].playing #hud #party{top:calc(88px * var(--phk))!important;width:calc(220px * var(--phk))}
html.phoneFit body[data-controls=touch].playing #hud #party :is(.partyCount,em,b){font-size:var(--party-font,calc(16px * var(--phk)))!important;line-height:var(--party-line,1.5)}
html.phoneFit body[data-controls=touch].playing :is(#unlockChip,#bossBar small,#bossBar b,#bossBar span){font-size:16px!important;line-height:1.5}
html.phoneFit body[data-controls=touch].playing :is(#chargeSkill,#chargeStage,#buffBar b,#buffBar span){font-size:calc(16px * var(--phk))!important}
html.phoneFit body[data-controls=touch].playing #lootPopup{left:auto!important;right:calc(12px * var(--vvk))!important;top:calc(84px * var(--vvk))!important;width:calc(270px * var(--vvk))!important;max-width:38vw!important;gap:8px;padding:8px}
html.phoneFit body[data-controls=touch].playing #lootPopup :is(.lootWho,.lootRec,.itemHead b,.itemHead small){font-size:25px!important;line-height:1.6}

/* v10.15.5 monster display: "pc도 이부분들 레벨 부분 너무이상하다". Match wrChips / rmMeta, one compact pill per context. */
body .monsterLevel.monsterLevel{display:inline-flex;width:max-content;max-width:100%;align-self:flex-start;align-items:baseline;gap:.25em;padding:2px 8px;border:0;border-radius:999px;background:#ffffff14;color:inherit;font:600 var(--monster-font,13px)/1.5 'Noto Sans KR',Arial,sans-serif!important;letter-spacing:normal;white-space:nowrap;vertical-align:baseline;flex-wrap:nowrap}
html body .monsterLevel.monsterLevel> :is(span,strong,em){display:inline;font:inherit!important;line-height:inherit!important;letter-spacing:inherit;margin:0;padding:0;white-space:nowrap}
body .monsterLevel.easy em{color:#87efab!important}body .monsterLevel.normal em{color:#ffe077!important}body .monsterLevel.hard em{color:#ff938b!important}
body[data-controls=desktop] #waitingRoom .wrHead{align-items:center;gap:8px 14px}
body[data-controls=desktop] #waitingRoom .wrTitle{flex:1 1 100%;align-items:baseline;overflow:visible;flex-wrap:wrap!important}
body[data-controls=desktop] #waitingRoom .wrStage{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;white-space:normal;font:13px/1.5 'Noto Sans KR',Arial,sans-serif;border-left:1px solid #ffffff30;padding-left:12px}
body[data-controls=desktop] #waitingRoom .wrChips{flex-wrap:wrap;overflow:visible;align-items:center}
body[data-controls=desktop] #waitingRoom :is(.wrDungeonControls,.wrRaidStep){display:flex;flex:1 0 100%;flex-wrap:wrap;gap:6px;margin:0;order:3}
body[data-controls=desktop] #waitingRoom .wrBrief{margin-left:auto}
body[data-controls=desktop] #waitingRoom .wrRaidStep button{min-height:40px;padding:8px 14px;margin:0;font-size:13px;border-radius:8px}
body[data-controls=desktop] #briefing .monsterLevel{margin-right:8px;--monster-font:12px}
#hud .monsterLevel{--monster-font:12px}#result .monsterLevel{--monster-font:13px}
html.phoneFit body[data-controls=touch] .monsterLevel{--monster-font:25px}

html.phoneFit body[data-controls=touch] #result .monsterLevel{--monster-font:16px}
html.phoneFit body[data-controls=touch].playing #hud .monsterLevel{--monster-font:calc(16px * var(--phk))}

html.pcHud2 body[data-controls=desktop] #hud #pcTracker .monsterLevel.monsterLevel>strong{font:inherit!important;line-height:inherit!important}

html.phoneFit body[data-controls=touch] #dungeonHud .dhClear{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 160px);overflow:auto;white-space:normal;gap:8px;font-size:25px}
html.phoneFit body[data-controls=touch] #dungeonHud .dhClear :is(b,small,em,.dhTime,.dhGot,.dhDmg,button){font-size:25px;line-height:1.5}
html.phoneFit body[data-controls=touch] #dungeonHud .dhClear .monsterLevel{align-self:center}
html.phoneFit body[data-controls=touch] #dungeonHud .dhClear button{min-height:82px;min-width:82px}

/* m10.15.6: "원상복구". Keep the m10.15.3 dimensions; new controls share the existing head row. */
html.phoneFit body[data-controls=touch] :is(#waitingRoom,#roomPopup,#roomLobby) .monsterLevel{--monster-font:13px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrStage .monsterLevel{--monster-font:13px}
html.phoneFit body[data-controls=touch] #waitingRoom :is(.wrDungeonControls,.wrRaidStep){display:inline-flex;flex:none;align-items:center;flex-wrap:nowrap;gap:4px;margin:0}
html.phoneFit body[data-controls=touch] #waitingRoom :is(.wrDungeonControls,.wrRaidStep) button{min-width:28px;min-height:28px;padding:2px 6px;border-radius:999px;font-size:0;line-height:1.5;white-space:nowrap}
html.phoneFit body[data-controls=touch] #waitingRoom :is(.wrDungeonControls,.wrRaidStep) button::after{content:attr(data-phone-label);font-size:13px}
html.phoneFit body[data-controls=touch] #roomPopup :is(.rpDgStage,.rpRaid){grid-template-columns:minmax(0,1fr) auto;column-gap:6px}
html.phoneFit body[data-controls=touch] #roomPopup :is(.rpDgStage,.rpRaid)>:is(span,.rpStepper){grid-column:1 / -1}
html.phoneFit body[data-controls=touch] #roomPopup :is(.rpDgStage,.rpRaid)>.monsterLevel{grid-column:2;grid-row:3}
html.phoneFit body[data-controls=touch] #roomPopup :is(.rpDgStage,.rpRaid)>small{grid-column:1;grid-row:3}
html.phoneFit body[data-controls=touch] #roomPopup .rpRaid>small:last-child{grid-column:1 / -1;grid-row:4}
html.phoneFit body[data-controls=touch] #briefing .monsterLevel{--monster-font:12px}

/* The raid arrows already existed in m10.15.3: retain their 24px / 11px values. */
.wrRaidPhone{display:none}
html.phoneFit body[data-controls=touch] #waitingRoom .wrRaidStep button{min-height:24px;min-width:0;padding:0 6px;margin-left:4px;font-size:11px;line-height:normal;border-radius:8px}
html.phoneFit body[data-controls=touch] #waitingRoom .wrRaidStep button::after{content:none}
html.phoneFit body[data-controls=touch] #waitingRoom .wrRaidFull{display:none}
html.phoneFit body[data-controls=touch] #waitingRoom .wrRaidPhone{display:inline}
/* v10.15.6: match item-hover and the phone's 70% pinned card. */
html #craftSheet.craftPop .craftPopBox.itemActionBox{width:min(300px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;padding:10px 12px!important;gap:6px!important;zoom:1!important}
html #craftSheet.craftPop{zoom:1!important;transform:none!important;inset:0!important;width:auto!important;height:auto!important;max-height:none!important;max-width:none!important}
html #craftSheet.craftPop .itemActionContent{display:flex!important;flex-direction:column;gap:6px;font-size:12px;overflow:auto}
html #craftSheet.craftPop .itemActionName{display:flex;align-items:center;gap:6px;padding:0;margin:0 0 6px;border:0;background:none;font-size:14px}
html #craftSheet.craftPop .itemActionName svg{width:28px;height:28px;flex:none}
html #craftSheet.craftPop .craftPopHead b{font-size:14px}
html #craftSheet.craftPop .craftPopHead button{min-height:28px;min-width:28px;padding:2px}
html #craftSheet.craftPop .craftSec{padding:0;border:0;background:none;gap:5px}
html #craftSheet.craftPop :is(.craftCur,.craftCost,.craftHint,.resetCost,.resetOwn,.resetWarn,.enhRecMain,.enhRec small,.craftWhy,.resetHint){margin:3px 0;font-size:12px!important;line-height:1.45;padding:0}
html #craftSheet.craftPop .itemActions{margin:4px 0 0;display:flex}
html #craftSheet.craftPop .itemActions button{flex:1;min-height:36px;font-size:12px;padding:5px 8px}
html #craftSheet.craftPop .itemConfirmBtns{margin-top:6px;gap:4px}
html #craftSheet.craftPop .itemActionContent button{min-height:28px;font-size:12px}
html #craftSheet.craftPop .compactChance{font-size:10px;color:#ffd36a}
html #craftSheet.craftPop .enhResult{padding:5px 7px;margin:3px 0;border-radius:8px}
html #craftSheet.craftPop .enhResult b{font-size:18px}
html #craftSheet.craftPop .resetLines{max-height:100px;overflow:auto;gap:3px}
html #craftSheet.craftPop .resetLine{padding:4px 6px;min-height:28px;font-size:12px}
html #craftSheet.craftPop .resetLine small{font-size:10px}
html #craftSheet.craftPop .resetLine.off,html #craftSheet.craftPop .resetHint{display:none}
html #craftSheet.craftPop .resetBtns{margin:4px 0;gap:4px}
html #craftSheet.craftPop .resetBtns .go{min-height:36px}
html #craftSheet.craftPop .compactResetOdds{max-height:110px;overflow:auto;border-top:1px solid #ffffff22;padding-top:5px;flex:none}
html #craftSheet.craftPop .compactResetOdds h3{font-size:11px;margin:0 0 4px}
html #craftSheet.craftPop .compactResetOdds h3 small,html #craftSheet.craftPop .craftOddsCur{display:none}
html #craftSheet.craftPop .craftOdd{font-size:11px;padding:3px 5px;gap:2px 4px}
html #craftSheet.craftPop .craftOdd small{font-size:10px!important}
html #craftSheet.craftPop .compactOddsButton{align-self:center;min-height:28px;font-size:11px;padding:3px 16px;background:none;border:0;color:#c9b6ff;text-decoration:underline}
.compactOddsPopup{position:absolute;inset:0;z-index:12;padding:10px 12px;background:var(--panel);display:flex;flex-direction:column;border-radius:14px;gap:6px}
.compactOddsBody{overflow:auto;min-height:0;font-size:11px}.compactOddsBody h3{font-size:12px;margin:0 0 6px}.compactOddsBody h3 small{display:none}.compactOddsBody .enhSteps{font-size:10px}.compactOddsBody .enhSteps :is(td,th){padding:4px 2px;font-size:10px!important}.compactOddsBody .craftHint{font-size:10px!important}.compactOddsBody .craftOddsList{max-height:none}
.itemGauge{position:absolute;inset:0;z-index:10;border:0;border-radius:14px;background:#100d22ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;color:#e7dbff;cursor:pointer}
.itemGaugeTrack{height:12px;width:100%;border-radius:8px;overflow:hidden;background:#ffffff18;border:1px solid #c9a8ff66}
.itemGaugeTrack i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8f7cd6,#e7dbff);transform-origin:left;animation:itemGaugeFill var(--remaining) linear both;box-shadow:0 0 12px #c9a8ff}
.itemGauge small{font-size:10px;color:var(--muted)}@keyframes itemGaugeFill{from{width:var(--from)}to{width:100%}}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox{width:min(240px,calc(100vw - 16px))!important;max-height:calc(100dvh - 16px)!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent{font-size:10px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionName{font-size:11px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop :is(.craftCur,.craftCost,.craftHint,.resetCost,.resetOwn,.resetWarn,.enhRecMain,.enhRec small,.craftWhy,.resetLine){font-size:10px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActions button,html.phoneFit body[data-controls=touch] #craftSheet.craftPop .resetBtns .go{min-height:38px;font-size:10px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .compactResetOdds{max-height:86px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftOdd{font-size:10px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopHead b{font-size:11px}
html .infuseLayer>.infuseBox,html .resetLayer>.resetBox,html .revertLayer>.revertBox{width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:10px 12px;font-size:12px;zoom:1!important;border:1px solid #8f7cd6aa;background:var(--panel)}
html :is(.infuseBox,.revertBox,.resetBox) :is(h3){font-size:14px}
html :is(.infuseBox,.revertBox,.resetBox) svg{width:28px;height:28px}
html :is(.infuseBox,.revertBox,.resetBox) button{min-height:36px;font-size:12px}
html .infuseTarget{min-height:38px;padding:4px 6px}.infuseList{max-height:150px;overflow:auto}
html .infuseWarn{font-size:11px;padding:5px 6px;margin:4px 0}
html.phoneFit body[data-controls=touch] :is(.infuseLayer,.revertLayer,.resetLayer){zoom:1!important}
html.phoneFit body[data-controls=touch] :is(.infuseBox,.revertBox,.resetBox){width:min(240px,calc(100vw - 16px));font-size:10px}
html.phoneFit body[data-controls=touch] :is(.infuseBox,.revertBox,.resetBox) button{min-height:38px;font-size:10px}
html #craftSheet.craftPop .itemActionContent{min-height:0!important;flex:0 1 auto!important}
html #craftSheet.craftPop .itemActionName b{font-size:14px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionName b{font-size:11px!important}
html #craftSheet.craftPop .itemActionContent .itemActions button{min-height:36px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent .itemActions button{min-height:38px!important}
html #craftSheet.craftPop .itemActionName .enhN{display:none}
html #craftSheet.craftPop .craftCost{font-size:10px!important;background:none;border:0;padding:0;line-height:1.45}
html #craftSheet.craftPop .compactResetOdds .craftOddsSum{font-size:10px}
html #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox{zoom:var(--compact-zoom,1)!important;max-height:calc(var(--compact-height,100dvh) - 24px)!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox{width:min(240px,calc(var(--compact-width,100vw) - 16px))!important;max-height:calc(var(--compact-height,100dvh) - 16px)!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox :is(.craftCur,.craftCost,.craftHint,.resetCost,.resetOwn,.resetWarn,.enhRecMain,.enhRec small,.craftWhy,.resetLine,.resetLine span,.resetLine small){font-size:10px!important;line-height:1.45!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .craftPopHead button{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;font-size:14px!important;padding:2px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .compactResetOdds :is(.craftOdd,.craftOdd span,.craftOdd b,.craftOdd small){font-size:10px!important;line-height:1.45!important}
html :is(.infuseLayer,.resetLayer)>.infuseBox,html .resetLayer>.resetBox{zoom:var(--compact-zoom,1)!important;max-height:calc(var(--compact-height,100dvh) - 24px)!important}
html.phoneFit body[data-controls=touch] .resetLayer>.resetBox,html.phoneFit body[data-controls=touch] .infuseLayer>.infuseBox{zoom:var(--compact-zoom,1)!important;max-height:calc(var(--compact-height,100dvh) - 16px)!important}
html.phoneFit body[data-controls=touch] :is(.resetBox,.infuseBox) :is(h3){font-size:11px!important}
html.phoneFit body[data-controls=touch] :is(.resetBox,.infuseBox) :is(small,.resetWarn,.infuseWarn,.infuseHint,.resetHint){font-size:10px!important;line-height:1.45!important}
html #craftSheet.craftPop .itemActionBox .craftPopHead{min-height:28px!important;padding:0 0 4px!important}
html #craftSheet.craftPop .itemActionContent>.craftPopWork{flex:none!important;overflow:visible!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .resetLines{max-height:60px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactResetOdds{max-height:60px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .craftSec{gap:3px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactChance{font-size:10px!important}
html #craftSheet.craftPop .itemActionBox .compactOddsPopup{background:#161028;overflow:hidden}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td){font-size:10px!important;line-height:1.4!important;padding:4px 2px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps{table-layout:auto;width:100%;font-size:10px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .craftOddsSum{font-size:10px!important}
.itemFx.fail{color:#ff9f9f;border-color:#ff9f9f;background:#311018ed}
.itemFx.success{box-shadow:inset 0 0 40px color-mix(in srgb,var(--grade,#aee7ff) 35%,transparent),0 0 22px color-mix(in srgb,var(--grade,#aee7ff) 45%,transparent)}
html #craftSheet.craftPop .itemActionBox .craftPopWork{gap:4px!important}
html #craftSheet.craftPop .itemActionBox :is(.craftHint,.craftCur,.craftCost){margin:2px 0!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .resetLines{max-height:44px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactResetOdds{max-height:48px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .resetBtns{margin:2px 0!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps{width:100%!important;table-layout:fixed!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td){font-size:9px!important;padding:4px 1px!important;line-height:1.4!important;display:table-cell!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps td b{font-size:9px!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps th:nth-child(3):after{content:none!important;display:none!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(1){width:12%}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(2){width:17%}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(3),html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(4){width:11%}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(5){width:29%}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td):nth-child(6){width:20%}
html #craftSheet.craftPop .itemActionBox .itemFx{padding:12px;font-size:20px;overflow:hidden}
html #craftSheet.craftPop .itemActionBox .itemFx b{font-size:20px!important;line-height:1.45!important}
html #craftSheet.craftPop .itemActionBox .itemFx small{font-size:10px!important}

/* v10.15.7: existing room confirmation card, within PC UI scale. */
#battleMenu{z-index:126}#battleMenu .rpCard{width:min(380px,100%)}#battleMenu .rpBody{padding-bottom:18px}#battleMenu button{min-height:44px;font-size:14px;margin:0}
/* v10.15.7: "변경전후 / 성공은 3초알림으로 / 확률부분 문제". Same body size as item-hover / itemPinnedCard. */
.craftChange{display:grid;gap:5px;margin:4px 0;font-size:12px;line-height:1.45}
.craftChangeRow{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:8px;align-items:start}
.craftChangeLabel{color:var(--muted);white-space:nowrap}.changeValue{color:#9ff0a8}
html #craftSheet.craftPop .itemActionBox .craftChange{font-size:12px;line-height:1.45}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOddsList{display:grid;grid-template-columns:1fr;gap:0;overflow:visible;max-height:none}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd{display:grid;grid-template-columns:minmax(0,1fr) auto 4em;align-items:baseline;gap:6px;padding:5px 0;background:none;border-bottom:1px solid #ffffff14}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd :is(span,b,small,em){font-size:12px!important;line-height:1.45!important;grid-column:auto}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd .n{overflow-wrap:anywhere}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd small{white-space:nowrap;color:var(--muted)}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd b{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd:after{display:none}
html #craftSheet.craftPop .itemActionBox .compactOddsBody{overscroll-behavior:contain;scrollbar-gutter:stable}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td,td b){font-size:12px!important;line-height:1.45!important;padding:5px 2px!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps{table-layout:auto!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td){width:auto!important}
html #craftSheet.craftPop .itemActionBox .compactOddsBody h3{font-size:12px}
html #craftSheet.craftPop .itemActionBox .itemActionContent{overflow:auto!important;overscroll-behavior:contain}
.itemResultToast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:450;max-width:calc(100vw - 24px);padding:12px 21px;border-radius:999px;background:#161028e8;backdrop-filter:blur(4px);border:1px solid var(--grade);color:#9ff0a8;font-size:16px;line-height:1.45;text-align:center;pointer-events:none;box-shadow:0 8px 32px #000b,0 0 14px #0008}
.itemResultToast.fail{color:#ff9f9f}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .craftChange{font-size:10px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd :is(span,b,small,em){font-size:10px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactOddsBody .enhSteps :is(th,td,td b){font-size:10px!important;padding:4px 1px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactOddsBody h3{font-size:11px}
html.phoneFit .itemResultToast{zoom:var(--compact-zoom,1);font-size:13px;top:50%}
html #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd{font-size:12px!important;padding:5px 0!important;border-radius:0;grid-template-columns:minmax(0,1fr) auto 4em!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox :is(.compactOddsBody,.compactResetOdds) .craftOdd{font-size:10px!important}
html #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has(.compactOddsPopup){width:min(520px,calc(var(--compact-width,100vw) - 24px))!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has(.compactOddsPopup){width:min(420px,calc(var(--compact-width,100vw) - 24px))!important}
html.phoneFit body[data-controls=touch] .infuseBox .craftChange,html.phoneFit body[data-controls=touch] .resetBox .craftChange{font-size:10px}
html #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has(.compactOddsPopup){height:min(480px,calc(var(--compact-height,100dvh) - 24px))}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has(.compactOddsPopup){height:min(340px,calc(var(--compact-height,100dvh) - 24px))}
/* v10.15.7: reference layout with the existing dark item card palette. */
html #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox{width:min(480px,calc(var(--compact-width,100vw) - 24px))!important;container-type:inline-size}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox{width:min(420px,calc(var(--compact-width,100vw) - 24px))!important}
html #craftSheet.craftPop .itemActionBox .compactOddsButton{position:static!important;margin:0 4px 0 auto!important;width:auto!important;height:auto!important;min-width:0!important;padding:3px 8px!important;font-size:12px!important;flex:none}
html #craftSheet.craftPop .itemActionBox .compactOddsButton+button{margin-left:0}
html #craftSheet.craftPop .itemActionName{display:flex!important;flex-direction:column;align-items:center;text-align:center;border:0;background:none;margin:0!important;padding:2px!important;gap:4px}
html #craftSheet.craftPop .itemActionContent[data-action=enhance] .itemActionName svg{width:40px;height:40px}
html #craftSheet.craftPop .itemActionBox .enhFailure{margin:0 0 7px;padding:0;background:none;border:0;font-size:10px;line-height:1.45;color:#ff9f9f;text-align:center}
.enhCompare{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;line-height:1.45;font-variant-numeric:tabular-nums}
.enhCompare th,.enhCompare td{padding:7px 4px;border-bottom:1px solid #ffffff14;text-align:center}
.enhCompare th{font-weight:500;color:var(--muted)}.enhCompare thead th{color:#e7dbff}.enhCompare th:first-child{width:38%;text-align:left}.enhCompare th:nth-child(3){width:5%}.enhCompare .enhArrow,.enhCompare .changeValue{color:#e5acff;font-weight:700}
.craftChange{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0;font-size:12px;line-height:1.45}
.craftChangeRow.itemCard{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span var(--compare-rows);gap:0;padding:8px;background:#ffffff06;border:1px solid #8f7cd644;border-radius:8px;box-shadow:none;min-width:0;font:inherit}
.craftChangeRow .craftChangeLabel{font-weight:700;color:#d9c7ef;border-bottom:1px solid #ffffff14;padding-bottom:5px;margin-bottom:3px}
.compareOption{padding:5px 0;border-bottom:1px solid #ffffff0d;overflow-wrap:anywhere;align-content:center}.craftChangeRow .changeValue{color:#e5acff;font-weight:600}
.compareItemHead{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 6px;padding:5px 0;align-content:start;color:var(--grade)}.compareItemHead>svg{grid-row:span 2;width:28px;height:28px}.compareItemHead>b{font-size:inherit!important;overflow-wrap:anywhere}.compareItemHead>small{font-size:10px!important;color:var(--muted)}.compareItemHead>.enhN{display:none}
html .infuseLayer>.infuseBox,html .resetLayer>.resetBox{width:min(480px,calc(var(--compact-width,100vw) - 24px));container-type:inline-size}
html.phoneFit body[data-controls=touch] :is(.infuseLayer>.infuseBox,.resetLayer>.resetBox){width:min(420px,calc(var(--compact-width,100vw) - 24px))!important}
html.phoneFit body[data-controls=touch] .enhCompare{font-size:10px}.enhGo button.primary{background:linear-gradient(110deg,#8c427e,#63499a);border-color:#c59be3}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactOddsButton{width:auto!important;font-size:10px!important;padding:3px 6px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactResetOdds{max-height:100px}
@container (max-width:310px){.craftChange{grid-template-columns:minmax(0,1fr)}.craftChangeRow.itemCard{grid-template-rows:none;grid-row:auto}}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=enhance] .enhFailure{font-size:10px!important;line-height:1.45!important;padding:0!important;margin:0 0 6px!important;white-space:nowrap}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .craftPopHead button.compactOddsButton{width:auto!important;height:auto!important;min-width:0!important;white-space:nowrap;font-size:10px!important;padding:3px 6px!important}
/* Keep reset odds visible together with the two cards on short landscape phones. */
/* v10.15.8: reset list height is set by the internal layout below. */
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=reset] .craftChangeRow.itemCard{padding:5px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=reset] .compareItemHead{padding:2px 0}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=reset] .compareOption{padding:3px 0}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=reset] .resetBtns button{min-height:28px!important;padding:4px!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionBox .compactResetOdds{flex:none!important;min-height:54px;max-height:76px!important}
html #craftSheet.craftPop .itemActionBox .enhFailure{font-size:10px!important;line-height:1.45!important;padding:0!important;margin:0 0 6px!important}


/* v10.15.8: use the existing resetLine/compare card palette; user: "옵션재설정 다른옵션변경을못한다". */
html #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has([data-action=reset]){width:min(760px,calc(var(--compact-width,100vw) - 24px))!important}
html #craftSheet.craftPop .itemActionBox .itemActionContent[data-action=reset]{overflow:hidden!important;flex:1 1 auto!important;min-height:0}
html #craftSheet.craftPop .itemActionContent[data-action=reset]>.craftPopWork{flex:1 1 auto!important;min-height:0;overflow:hidden!important;display:flex;max-height:none}
.resetLayout{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(0,1.15fr);gap:12px;min-height:0;width:100%}
html #craftSheet.craftPop .itemActionContent[data-action=reset]>.craftPopWork>.craftSec{width:100%;min-width:0;min-height:0}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLines{display:grid;grid-auto-rows:max-content;align-content:start;gap:4px;min-height:0;max-height:none!important;overflow:auto;overscroll-behavior:contain;padding:1px 3px 1px 1px}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLine{flex-wrap:wrap;gap:1px 6px;min-height:36px}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLine.off{display:flex;opacity:.5}
.resetDetail{min-width:0;min-height:0;display:flex;flex-direction:column;gap:3px;overflow:auto;overscroll-behavior:contain}
.resetDetail .craftChange{flex:none}.resetDetail .resetBtns{flex:none;position:sticky;bottom:0;background:var(--panel)}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .compactResetOdds{display:flex;flex-direction:column;flex:none!important;min-height:86px;height:110px;max-height:110px!important;overflow:hidden;overscroll-behavior:contain}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .compactResetOdds h3{flex:none}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .compactResetOdds .craftOddsList{min-height:0;overflow:auto;overscroll-behavior:contain;flex:1 1 auto}
html #craftSheet.craftPop .itemActionContent[data-action=reset] .compactResetOdds .craftOddsSum{flex:none;margin-top:3px;padding-top:3px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .craftPopBox.itemActionBox.itemActionBox:has([data-action=reset]){width:min(680px,calc(var(--compact-width,100vw) - 24px))!important}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLayout{grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:8px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLine{min-height:26px;padding:2px 6px}
html.phoneFit body[data-controls=touch] #craftSheet.craftPop .itemActionContent[data-action=reset] .compactResetOdds{min-height:86px;height:86px;max-height:86px!important}
@media(max-width:540px) and (orientation:portrait){html #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLayout{grid-template-columns:minmax(0,1fr)}html #craftSheet.craftPop .itemActionContent[data-action=reset] .resetLines{max-height:180px!important}.resetDetail{overflow:visible}html #craftSheet.craftPop .itemActionContent[data-action=reset]>.craftPopWork{overflow:auto!important;display:block}}

/* Google entry follows the existing login / settings / rpCard controls. */
#googleStart{width:100%;margin:8px 0}#legacyLogin summary{cursor:pointer;font-size:12px;color:var(--muted,#b7b3a9);padding:8px 0}#legacyLogin[open] summary{margin-bottom:8px}#googleAccountSection{border-top:1px solid #ffffff18;padding-top:10px;margin-top:10px}#googleAccountSection p{font-size:12px}#googleAccountSection button{width:100%}#signup,#signupSheet{display:none!important}#googleLinkSheet{z-index:160}

#legacyLogin:not([open])~#usernameHelp{display:none}#googleStart{min-height:44px;font-size:15px}

/* The account section must stay inside the phone settings window after its existing reading zoom. */
#googleAccountSection{break-inside:avoid}html.phoneFit body[data-controls=touch] #settingsMenu:not([hidden]){max-height:calc((100dvh - 20px) / var(--prk,1))!important}

html.phoneFit body[data-controls=touch] #settingsMenu:not([hidden]){width:min(980px,calc((100vw - 24px) / var(--prk,1)))!important;column-width:280px}
html.phoneFit body[data-controls=touch] #settingsMenu:not([hidden])>#deleteAccountBtn{column-span:all}
/* v10.15.8: "팝업창 뜨면 … 뒷화면 보이게" — retain hit layers and the existing purple panel style. */
html #craftSheet.craftPop .craftPopBox.itemActionBox,html .infuseLayer>.infuseBox,html .resetLayer>.resetBox{border-color:#a28ce4cc;box-shadow:0 12px 28px #0009,0 0 0 1px #c9a8ff26}
html #craftSheet.craftPop .compactOddsPopup{border:1px solid #a28ce4cc;box-shadow:0 6px 18px #0006}
/* 냉하리 키우기 title art (public/idle-art/title.webp, 5:3, the wizard on the right third; the phone build serves it under menu-art/login-keyart.webp): on a wide phone the cover crop keeps her head and the staff crystal */
body.idleMode #menuBackdrop.hasArt .mbArt{background-position:50% 18%}