:root{color-scheme:dark;--ink:#101b1d;--gold:#d6b878;--muted:#91a6a3}*{box-sizing:border-box}body{margin:0;background:#091315;color:#e4ece7;font:16px system-ui,sans-serif}header{max-width:1500px;margin:auto;padding:23px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #293638}.brand{display:flex;gap:15px;align-items:center}.seal{background:#994c3c;border:1px solid #c97e61;padding:4px 9px;font:30px 'Noto Serif SC',serif}.brand h1{margin:0;font:600 26px 'Noto Serif SC',serif;letter-spacing:6px}.brand small{font-size:12px;letter-spacing:3px;color:var(--muted)}.top{display:flex;align-items:center;gap:16px;color:var(--gold);font-size:14px}button{font:inherit;color:inherit;background:#1a2b2d;border:1px solid #3d5150;padding:10px 15px;cursor:pointer;border-radius:4px}button:hover{background:#2d4140;border-color:var(--gold)}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}main{max-width:1500px;margin:24px auto 0;padding:0 30px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px}.arena{position:relative;overflow:hidden;min-height:650px;border:1px solid #3c5150;background:#172a2c;border-radius:5px}#game{width:100%;height:100%;position:absolute;display:block;touch-action:none}.hud{position:absolute;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 5px #000}.hud span,.hud b{font-size:13px}.bar{width:190px;height:7px;background:#472e2a;margin:7px 0;box-shadow:0 0 0 1px #263b3b}.bar i{display:block;width:100%;height:100%;background:#ce6d58}.clock{text-align:right}.clock small{display:block;font-size:12px;color:#b7c7c0}.clock strong{font-size:27px;font-weight:500;font-variant-numeric:tabular-nums}.place{position:absolute;bottom:22px;left:24px;font-family:'Noto Serif SC',serif;letter-spacing:4px;color:#b6c6bd;font-size:14px}.place span{color:var(--gold)}aside{display:flex;flex-direction:column;gap:16px}.panel{background:#101e20;border:1px solid #293b3c;border-radius:5px;padding:18px}.panel h2{font:600 17px 'Noto Serif SC',serif;letter-spacing:2px;margin:0 0 15px}.section-title{display:flex;justify-content:space-between}.section-title span{font-size:13px;color:var(--muted)}#bag{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.slot{height:52px;border:1px solid #304446;background:#142629;display:flex;align-items:center;justify-content:center;font-size:23px;position:relative}.slot small{position:absolute;bottom:2px;right:3px;font-size:10px;color:var(--gold)}.slot.empty{color:#344c4e;font-size:20px}.total{display:flex;justify-content:space-between;padding:17px 0;font-size:14px}.total b{color:var(--gold)}#heal{width:100%;font-size:14px;display:flex;align-items:center;justify-content:space-between}.objective{font-size:14px;line-height:1.8;color:#c8d7d2}.note{font-size:12px;line-height:1.7;color:var(--muted)}.green{color:#89d4b2}.gold{color:var(--gold)}#map{width:100%;height:auto;background:#0c191b;border:1px solid #344a49}.legend{display:flex;gap:15px;font-size:11px;margin-top:9px}.controls p{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:4px}kbd{font:11px system-ui;color:#b8c7c3;border:1px solid #3a4a48;padding:2px 4px;border-radius:3px;white-space:nowrap}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07141899;backdrop-filter:blur(4px)}.overlay.hidden{display:none}.modal{width:min(440px,90%);text-align:center;padding:35px 25px;background:linear-gradient(145deg,#193235f5,#101d20fa);border:1px solid #72816c;box-shadow:0 20px 90px #0008}.modal>small{color:var(--gold);letter-spacing:3px;font-size:13px}.modal h2{font:600 40px 'Noto Serif SC',serif;letter-spacing:6px;margin:24px 0}.modal p{font-size:14px;line-height:2;color:#b9cac3}.rules{display:flex;justify-content:center;gap:16px;font-size:12px;color:var(--gold);margin:25px 0}.primary{background:#d6b878;color:#162322;border:0;width:100%;font-weight:600;padding:16px;letter-spacing:3px}.primary:hover{background:#edcf91}.primary span{float:right}.modal .muted{display:block;font:12px/1.8 system-ui;color:var(--muted);letter-spacing:0;margin-top:15px}#hint{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);white-space:nowrap;font-size:14px;background:#0b191ddd;color:#e2cc9d;padding:10px 17px;display:none;border:1px solid #7b775d}#toast{position:absolute;top:105px;left:50%;transform:translateX(-50%);background:#13272ce8;border:1px solid #6b7868;padding:10px 20px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}footer{max-width:1500px;margin:18px auto;padding:0 30px;color:#79918d;font-size:12px;display:flex;justify-content:space-between}#touch{display:none}@media(max-width:1000px){main{padding:0 14px;grid-template-columns:minmax(0,1fr) 240px;gap:12px}.arena{min-height:650px}.panel{padding:12px}header{padding:17px}.top{gap:8px}.top button{padding:8px}}@media(max-width:720px){header{padding:12px}.brand h1{font-size:20px}.brand small{letter-spacing:0}.top #bank{display:none}.top button{font-size:12px}main{display:block;margin-top:12px}.arena{min-height:65vh}aside{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}.controls{grid-column:1/-1}.modal h2{font-size:30px}.place{font-size:12px}.hud{left:14px;right:14px}.bar{width:140px}footer span{display:none}#touch{display:flex;position:sticky;bottom:0;z-index:5;justify-content:space-between;padding:10px;background:#091315e8;touch-action:none}#touch button{min-width:44px;min-height:44px;margin:2px}.dpad{display:flex}.panel h2{font-size:15px}.legend{font-size:10px;gap:6px}}
[hidden]{display:none!important}input{width:100%;min-width:0;background:#0c1b1e;border:1px solid #45605c;border-radius:4px;color:#e4ece7;padding:10px;font:14px system-ui}input:focus{outline:2px solid #d6b878}#coop-entry{display:grid;gap:10px;text-align:left;margin-top:16px}#coop-entry label{font-size:14px;color:#b9cac3;display:grid;gap:6px}#coop-entry>button{background:#28514b;color:#cfe4da}#coop-entry .join-row{display:flex;gap:8px}#entry-error{margin:0;font-size:13px;line-height:1.5;color:#efb399}.modal{max-height:calc(100% - 30px);overflow:auto}.modal h2{margin:15px 0;font-size:34px}.modal .rules{margin:15px 0}.room-line{display:flex;justify-content:space-between;align-items:center;font-size:13px}.room-line b{letter-spacing:1px;color:#d6b878}.room-line button{font-size:12px;padding:5px 8px}.mate{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 0;border-bottom:1px solid #304340;font-size:14px}.mate span:last-child{color:#a1bdba;font-size:12px}#connection{font-size:12px;line-height:1.6;color:#a5c1b8}#leave-room{width:100%;font-size:13px;padding:7px}#lobby-roster{margin:15px 0;text-align:left}.primary:disabled{opacity:.45;cursor:default}#team-panel{border-color:#54766e}body.in-room .arena{min-height:720px}@media(max-width:720px){body.in-room .arena{min-height:70vh}#team-panel{grid-column:1/-1}.modal{padding:20px}.modal h2{font-size:27px}.modal p{font-size:13px}.modal .rules{gap:10px}}

.music-level{display:flex;align-items:center;gap:6px;font-size:12px;color:#acc1ba}.music-level input{width:70px;padding:0;accent-color:#d6b878}.top{flex-wrap:wrap;justify-content:flex-end}@media(max-width:720px){header{gap:8px}.top{max-width:220px;gap:5px}.music-level input{width:50px}.brand{flex-shrink:0}}

#camp label{font-size:14px}#map-select{width:100%;padding:10px;margin-top:8px;background:#162d30;color:#e4ece7;font-size:14px;border:1px solid #60766b}.shop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;border-top:1px solid #31443f;font-size:14px}.shop-row small{display:block;color:#94afa4;font-size:12px;margin-top:4px}.shop-row button{font-size:13px;white-space:nowrap;padding:8px}.shop-row button:disabled{opacity:.4;cursor:default}#unlock-map{width:100%;margin-bottom:16px}#camp h2{margin-top:14px}#camp h2:first-child{margin-top:0}@media(max-width:720px){#camp{grid-column:1/-1}#touch{position:fixed;left:0;right:0;bottom:0;padding-bottom:max(10px,env(safe-area-inset-bottom))}body{padding-bottom:100px}.arena{min-height:65vh}}

.modal{width:min(850px,96%);padding:20px}.modal h2{font-size:28px;margin:10px 0}.modal>p{margin:8px 0}.modal #camp{text-align:left;padding:14px;margin:12px 0;background:#0d2025;border-color:#4a6763}.modal #camp>.section-title{display:none}#map-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.map-card{padding:10px;text-align:left;border:2px solid #425755;background:#163136;color:#eaf1e8;min-width:0}.map-card.selected{border-color:#f0cf86;box-shadow:0 0 0 1px #f0cf8644}.map-card strong{font:600 18px serif;display:block;margin-bottom:8px}.map-card canvas{width:100%;height:auto;display:block;margin:5px 0;border:1px solid #708782}.map-card span,.map-card small{display:block;font-size:12px;line-height:1.8}.map-theme-1{background:#3c2726}.map-theme-2{background:#252b43}#shop-details>summary{padding:12px;background:#283c38;font-size:16px;cursor:pointer;color:#e7ca86}#shop-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}#start{position:sticky;bottom:0;z-index:3}.modal .muted{margin-top:8px}.modal .rules{margin:8px 0}.modal #coop-entry{margin-top:8px}#back-camp{border-color:#a99059;color:#e6cb96}@media(max-width:720px){#map-cards{grid-template-columns:1fr}.map-card{display:grid;grid-template-columns:92px 1fr;column-gap:12px;padding:8px}.map-card canvas{grid-column:1;grid-row:1/4;margin:0}.map-card strong,.map-card span,.map-card small{grid-column:2;margin:0}.map-card strong{font-size:17px}#shop-list{grid-template-columns:1fr}.modal{max-height:calc(100% - 16px);padding:12px}.modal h2{font-size:23px}.modal #camp{padding:8px}.arena{min-height:76vh}}

#sword-style{width:100%;padding:10px;margin-top:6px;background:#163036;color:#eddfc0;border:1px solid #738071;font-size:15px}#sword-style:disabled{opacity:.6}

/* 2.5D battlefield framing and mobile controls */
.arena{box-shadow:0 24px 70px #0008,inset 0 0 0 1px #b8d7c010;background:radial-gradient(circle at 50% 30%,#284447,#102225 72%)}
.hud,.place,#hint,#toast,.overlay{z-index:2}
.hud>div{padding:8px 10px;background:linear-gradient(135deg,#071417c7,#14282b80);border:1px solid #b8d7c016;box-shadow:0 8px 26px #0004;backdrop-filter:blur(5px)}
.bar{overflow:hidden;border-radius:99px}.bar i{background:linear-gradient(90deg,#a8473e,#e17b61 70%,#f0a47e);box-shadow:0 0 14px #d26858}
.place{padding:7px 11px;background:#071417a3;border-left:2px solid #d6b878;box-shadow:0 8px 30px #0005;backdrop-filter:blur(4px)}
#toast{border-left:3px solid #d6b878;box-shadow:0 12px 35px #0008}
#touch{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

@media (max-width:900px), (pointer:coarse){
  #touch{display:flex;position:fixed;z-index:12;left:0;right:0;bottom:0;height:190px;align-items:flex-end;justify-content:space-between;padding:12px max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:none;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;touch-action:none}
  body.game-live #touch{opacity:1;transform:none}
  #touch>*{pointer-events:auto}
  .joystick-zone{width:142px;height:158px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;color:#bed0c9b8;font-size:10px;letter-spacing:3px;text-indent:3px;touch-action:none}
  .joystick-ring{position:relative;width:132px;height:132px;border-radius:50%;border:1px solid #bcd8cc55;background:radial-gradient(circle,#234a4855 0 28%,#0b1c20b8 30% 57%,#8daea515 59% 64%,#071316c7 66%);box-shadow:inset 0 0 28px #9dd5c51a,0 10px 32px #0009;backdrop-filter:blur(5px)}
  .joystick-ring::before,.joystick-ring::after{content:"";position:absolute;left:50%;top:50%;background:#c7ded32c;transform:translate(-50%,-50%)}
  .joystick-ring::before{width:70%;height:1px}.joystick-ring::after{width:1px;height:70%}
  .joystick-stick{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 28%,#d9eee3,#79a9a0 38%,#315b58 72%);border:2px solid #d6eee299;box-shadow:0 7px 18px #000a,0 0 22px #9ee3cc40;will-change:transform}
  .joystick-zone.active .joystick-ring{border-color:#d7f0e09e;box-shadow:inset 0 0 35px #9ee3ca33,0 10px 35px #0009}
  .touch-actions{position:relative;width:178px;height:168px;touch-action:none}
  .touch-action{position:absolute;width:58px;height:58px;min-width:0!important;min-height:0!important;margin:0!important;padding:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#e8f2ea;background:linear-gradient(145deg,#315753d9,#13282be6);border:1px solid #b5d7ca73;box-shadow:inset 0 1px 7px #d5fff229,0 7px 20px #0009;text-shadow:0 2px 4px #000;backdrop-filter:blur(5px);touch-action:none}
  .touch-action b{font:600 22px 'Noto Serif SC',serif;line-height:1}.touch-action small{font-size:8px;opacity:.7;margin-top:3px;letter-spacing:1px}
  .touch-action:active,.touch-action.active{transform:scale(.92);filter:brightness(1.35);box-shadow:inset 0 3px 12px #0007,0 0 24px #a8ddc766}
  .attack-action{right:0;bottom:0;width:78px;height:78px;background:radial-gradient(circle at 34% 25%,#cbded5,#5b827a 40%,#213f3e 75%);border-color:#e4f4e2b8}.attack-action b{font-size:30px;color:#fff}
  .dash-action{right:84px;bottom:8px;background:linear-gradient(145deg,#58727ed9,#202d3be8);border-color:#b9d8e38a}
  .loot-action{right:4px;bottom:86px;background:linear-gradient(145deg,#836d44df,#342f25ea);border-color:#ead2928a}
  .heal-action{right:76px;bottom:91px;width:52px;height:52px;background:linear-gradient(145deg,#49715bd9,#1b3025ea);border-color:#9bd8ad82}
  body:not(.game-live) #touch{pointer-events:none}
  body.game-live{overflow:hidden;padding:0;overscroll-behavior:none}
  body.game-live header{position:fixed;z-index:9;left:0;right:0;top:0;max-width:none;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));border:0;background:none;pointer-events:none}
  body.game-live header .brand,body.game-live #bank,body.game-live #music-toggle,body.game-live .music-level,body.game-live #sound{display:none}
  body.game-live header .top{max-width:none;margin-left:auto;flex-wrap:nowrap;pointer-events:auto}
  body.game-live header button{font-size:11px;padding:7px 9px;background:#071417b5;border-color:#94aa9d55;backdrop-filter:blur(5px)}
  body.game-live main{display:block;width:100%;height:100dvh;max-width:none;margin:0;padding:0}
  body.game-live .arena,body.in-room.game-live .arena{width:100%;height:100dvh;min-height:100dvh;border:0;border-radius:0}
  body.game-live aside,body.game-live footer{display:none}
  body.game-live .hud{top:max(13px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
  body.game-live .hud>div{padding:6px 8px}.bar{width:132px}.clock strong{font-size:23px}
  body.game-live .place{left:max(12px,env(safe-area-inset-left));bottom:calc(176px + env(safe-area-inset-bottom));font-size:11px}
  body.game-live #hint{bottom:calc(185px + env(safe-area-inset-bottom));max-width:72vw;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:8px 11px}
  body.game-live #toast{top:78px;max-width:82vw;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:8px 12px}
}

@media (max-width:430px){
  .joystick-zone{width:124px}.joystick-ring{width:116px;height:116px}.joystick-stick{width:52px;height:52px}
  .touch-actions{width:164px;transform:scale(.92);transform-origin:right bottom}
  #touch{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
}

@media (max-height:520px) and (pointer:coarse){
  #touch{height:145px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.joystick-zone{height:135px;transform:scale(.82);transform-origin:left bottom}.touch-actions{height:150px;transform:scale(.8);transform-origin:right bottom}
  body.game-live .place{display:none}body.game-live #hint{bottom:125px}
}

/* Newcomer map and step-by-step guidance */
#map-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.map-theme-3{background:#344337}
#tutorial-guide{position:absolute;z-index:4;top:76px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(700px,72%);padding:10px 16px;border:1px solid #e8cf8a99;border-left:4px solid #f0ce78;border-radius:5px;background:linear-gradient(100deg,#111e1ee8,#28382fe8);box-shadow:0 10px 32px #0009;color:#f3e6bd;font-size:14px;line-height:1.45;text-align:center;text-shadow:0 1px 3px #000;pointer-events:none;backdrop-filter:blur(7px)}
body:not(.game-live) #tutorial-guide{display:none}
@media(max-width:1100px){#map-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){#map-cards{grid-template-columns:1fr}body.game-live #tutorial-guide{position:fixed;top:max(74px,calc(env(safe-area-inset-top) + 58px));max-width:86vw;padding:8px 12px;font-size:13px}body.game-live #toast{top:max(126px,calc(env(safe-area-inset-top) + 108px))}}
@media(max-height:520px) and (pointer:coarse){body.game-live #tutorial-guide{top:max(54px,calc(env(safe-area-inset-top) + 43px));max-width:72vw;padding:6px 10px;font-size:12px}body.game-live #toast{top:max(98px,calc(env(safe-area-inset-top) + 82px))}}

/* Five stages stay in the same order in every layout. */
#map-cards{grid-template-columns:repeat(5,minmax(0,1fr));direction:ltr}
.map-card{display:flex;flex-direction:column;gap:2px}
.map-card .map-index{display:block;font:11px/1.5 system-ui;letter-spacing:1px;color:#c9b983;font-style:normal}
.map-card strong{font-size:17px}.map-card canvas{margin:3px 0}.map-card small{margin-top:auto}
.map-theme-3{order:-1;background:linear-gradient(145deg,#3f5340,#25382e)}
.map-theme-4{background:linear-gradient(145deg,#423044,#211b2c);border-color:#87627f}
.map-theme-4 .map-index,.map-theme-4 small{color:#f0c6b2}
#raid-hud{position:absolute;z-index:2;top:79px;left:50%;transform:translateX(-50%);width:min(580px,calc(100% - 24px));display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;padding:10px 13px;background:#14101dea;border:1px solid #775a7a;box-shadow:0 5px 25px #0007;pointer-events:none;border-radius:5px}
#raid-hud[hidden]{display:none}.raid-boss span{display:block;font-size:12px;line-height:1.7;color:#e6cdf5}.raid-boss.warden span{color:#f3cfab}
.raid-bar{height:6px;background:#05080f;border-radius:2px;overflow:hidden}.raid-bar i{display:block;height:100%;background:linear-gradient(90deg,#8652b2,#ddaff7)}.warden .raid-bar i{background:linear-gradient(90deg,#a65243,#efb87a)}
.raid-hint{grid-column:1/-1;font-size:12px;line-height:1.55;color:#e1d4c0;text-align:center}#raid-hud[data-warning="true"]{border-color:#ed9dbe;background:#401d35ee}
body:has(#raid-hud:not([hidden])) #toast{top:175px;max-width:90%;white-space:normal;text-align:center}
@media(max-width:1100px){#map-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){#map-cards{grid-template-columns:1fr}.map-card{display:grid;grid-template-columns:100px 1fr;gap:0 12px}.map-card canvas{grid-column:1;grid-row:1/5;align-self:center}.map-card strong,.map-card span,.map-card small,.map-card .map-index{grid-column:2;margin:0}.map-card strong{font-size:17px}.map-card .map-index{font-size:10px}#raid-hud{top:70px;padding:7px 9px;gap:5px 10px}.raid-boss span{font-size:11px}.raid-hint{font-size:11px}body.game-live #raid-hud{position:fixed;top:max(76px,calc(env(safe-area-inset-top) + 60px));width:calc(100% - 26px);max-width:550px}body.game-live:has(#raid-hud:not([hidden])) #toast{top:max(170px,calc(env(safe-area-inset-top) + 154px))}}
@media(max-height:500px) and (pointer:coarse){body.game-live #raid-hud{top:8px;left:auto;right:8px;transform:none;width:43%;max-width:400px;padding:5px 8px}.raid-boss span,.raid-hint{font-size:10px}body.game-live:has(#raid-hud:not([hidden])) #toast{top:94px}}