:root{color-scheme:dark;--ink:#e9ede7;--lime:#d1f464;--muted:#98a5a0}*{box-sizing:border-box}body{margin:0;background:#16242a;color:var(--ink);font:14px/1.6 "Segoe UI",Tahoma,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}#scene,#vignette,#hurt{position:fixed;inset:0;width:100%;height:100%}#vignette{pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#07141780)}#hurt{pointer-events:none;box-shadow:inset 0 0 150px #ff3939;opacity:0}header{position:absolute;top:28px;left:36px;right:36px;display:flex;align-items:center;gap:35px;z-index:4;pointer-events:none}.brand{display:flex;gap:12px;align-items:center;font-size:37px;line-height:1;font-weight:950;color:var(--lime);text-decoration:none}.brand span{font-size:10px;line-height:1.3;letter-spacing:2px;color:white}.location{font-size:10px;letter-spacing:2px;color:#c9d4d2}.location b{color:var(--lime);margin:0 7px}.location small{display:block;color:#8caaa5;letter-spacing:1px}.build{margin-left:auto;font-size:10px;letter-spacing:2px}.build i{font-style:normal;border:1px solid #8d9d8f;padding:5px 7px;margin-left:12px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:110px 7vw 45px;background:linear-gradient(90deg,#101e27f5,#101e27be 52%,#101e2740);gap:40px}.intro{max-width:740px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--lime)}h1{font-size:clamp(60px,7.6vw,112px);line-height:.91;letter-spacing:-5px;font-weight:950;margin:26px 0}h1 em{font-style:normal;color:var(--lime)}.thai{font-size:23px;font-weight:600;margin:25px 0 8px}.description{color:#b2c0bf;font-size:14px}.mode{display:flex;gap:12px;margin:30px 0 18px}button{border:1px solid #687575;background:#22343de8;color:white;padding:15px 22px;text-align:left;transition:background .15s,transform .15s}button:hover{background:#3c5156;transform:translateY(-2px)}button.primary{background:var(--lime);color:#18291d;border-color:var(--lime);font-weight:700}button.primary:hover{background:#e2ff91}.mode button{min-width:185px}.mode span{display:block;font-size:10px;letter-spacing:2px;opacity:.65}.hint{font-size:11px;color:#c1cbca}.note{margin-top:32px;font-size:10px;color:#829594}.brief{width:290px;flex-shrink:0;background:#10232bc9;border:1px solid #7e989347;padding:25px}.chain{display:flex;gap:17px;border-bottom:1px solid #84958e30;padding:22px 0}.chain b{color:var(--lime);font-size:22px;font-weight:300}.chain span{font-size:9px;letter-spacing:1px}.chain small{display:block;color:#b3c0bb;font-size:12px;letter-spacing:0;margin-top:5px}.blueprint{margin-top:24px}.blueprint img{width:100%;filter:invert(1);mix-blend-mode:screen;opacity:.55}.blueprint span{display:block;font-size:8px;letter-spacing:1px;color:#a5b4ae;margin-top:10px}[hidden]{display:none!important}#status{position:absolute;top:115px;left:36px;display:flex;align-items:center;gap:10px;font-size:11px}.dot{width:7px;height:7px;background:var(--lime);border-radius:50%}#phase{letter-spacing:2px}#objective{color:#d0d6cf;margin-left:10px}.rightHud{position:absolute;right:36px;top:110px}.remaining{text-align:right}.remaining span{display:block;font-size:9px;letter-spacing:2px}.remaining b{font-size:56px;line-height:1.2;font-weight:300}#map{margin-top:18px;background:#0e202bd6;border:1px solid #98b3ab50;width:190px;height:152px}.mapkey{font-size:7px;color:var(--lime);display:flex;gap:8px}.mapkey span{color:#b7cccd}.mapkey em{color:#ff825e;font-style:normal}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:#ffffffb0}#target{position:absolute;left:50%;top:55%;transform:translateX(-50%);text-align:center;font-size:11px;text-shadow:0 2px 3px black}#prompt{position:absolute;bottom:185px;width:100%;text-align:center;color:var(--lime);font-size:14px}#toast{position:absolute;top:23%;width:100%;text-align:center;color:var(--lime);font-weight:700;font-size:20px;text-shadow:0 2px 10px #000}#feed{position:absolute;left:36px;bottom:145px;font-size:11px;max-width:450px;color:#d2dcda}#feed div{padding:4px 9px;border-left:2px solid #d1f46480;background:#10212b95;margin:4px 0}footer{position:absolute;bottom:30px;left:36px;right:36px;display:flex;align-items:end;gap:45px}.health{width:230px}.health label{font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between}.health b{font-size:25px;line-height:1}.bar{height:6px;background:#ffffff30;margin-top:14px}.bar i{display:block;height:100%;width:100%;background:var(--lime);transition:width .1s}.weapon{display:flex;flex-direction:column}.weapon span{font-size:9px;letter-spacing:2px;color:#a5b4b4}.weapon b{font-size:20px}.weapon small{font-size:10px;color:var(--lime)}.controls{margin-left:auto;text-align:right;font-size:11px;color:#d1d9d5}.modal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#08161dd9;backdrop-filter:blur(9px)}.modal section{width:min(480px,90vw);padding:40px;border:1px solid #81988b55;background:#192b32}.modal h2{font-size:43px;line-height:1.1;margin:20px 0}.modal p{color:#bbcbc5}.modal button{display:block;width:100%;margin-top:12px}#debug{position:absolute;left:36px;top:155px;background:#0b172ce8;border:1px solid #6c9486;padding:15px;font:11px/1.6 monospace;max-height:50vh;overflow:auto;min-width:330px}@media(max-width:900px){.brief{display:none}.overlay{padding-left:6vw}h1{font-size:80px}.build{display:none}.rightHud{right:20px}header{left:20px}#objective{max-width:260px}.controls{display:none}}@media(max-height:650px){.overlay{padding-top:90px}h1{font-size:65px;margin:15px 0}.thai{margin-top:15px}.mode{margin:16px 0}.note{margin-top:15px}.brief{padding:16px}.chain{padding:12px 0}.blueprint{margin-top:12px}}


.start-room{display:flex;align-items:center;gap:12px;font-size:12px;margin-top:20px;color:#c3d7d4}.start-room select{max-width:280px;background:#182a2c;color:#edf4e9;border:1px solid #617572;padding:8px;border-radius:3px}.tourButton{background:transparent!important;border:0!important;padding:8px 0!important;color:#d1f464!important;font-size:12px!important}#tourUI{position:absolute;bottom:35px;left:35px;padding:20px;background:#14282bea;color:#edf4e9;z-index:5}#tourUI p{font-size:12px}#tourUI button{padding:10px 25px;background:#d1f464;border:0;cursor:pointer}
#berserkOverlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(235,25,25,0.45) 85%,rgba(180,0,0,0.85));box-shadow:inset 0 0 120px #ff1a1a;opacity:0;transition:opacity .2s;z-index:1}
.berserkBarContainer{width:210px}
.berserkBarContainer label{font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between;color:#ff8585}
.berserkBarContainer b{font-size:22px;line-height:1;color:#ff4d4d}
#berserkbar{display:block;height:100%;width:0%;background:linear-gradient(90deg,#ff5252,#ff1744);transition:width .1s;box-shadow:0 0 8px rgba(255,23,68,0.5)}
#berserkbar.ready{background:linear-gradient(90deg,#ff9100,#ff1744);box-shadow:0 0 16px #ff5252;animation:berserkPulse .8s infinite alternate}
#berserkbar.active{background:linear-gradient(90deg,#ff1744,#ffea00);box-shadow:0 0 20px #ff1744;animation:berserkPulse .4s infinite alternate}
@keyframes berserkPulse{0%{filter:brightness(1)}100%{filter:brightness(1.5)}}
#specialPrompt{position:absolute;bottom:225px;width:100%;text-align:center;color:#ff5252;font-size:16px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 8px #000,0 0 12px #ff1744}
#combo{position:absolute;right:36px;top:295px;font-size:22px;font-weight:900;color:#ff4141;text-shadow:0 2px 10px rgba(0,0,0,0.9),0 0 15px rgba(255,40,40,0.7);letter-spacing:1px;text-align:right}


button.bossButton{background:#2a1828;color:#ffd6e0;border-color:#b84368;font-weight:700}button.bossButton:hover{background:#4a2238;border-color:#ff7597;transform:translateY(-2px)}

#bossBanner{position:absolute;top:18%;left:50%;transform:translateX(-50%);padding:12px 32px;background:linear-gradient(90deg,rgba(40,15,25,0.92),rgba(80,25,45,0.96),rgba(40,15,25,0.92));border:2px solid #ff426e;border-radius:4px;color:#fff;font-weight:900;font-size:22px;letter-spacing:3px;text-shadow:0 0 15px #ff2555;box-shadow:0 0 30px rgba(255,30,80,0.6);animation:bossPulse 1.2s infinite alternate;pointer-events:none;z-index:4}
@keyframes bossPulse{0%{transform:translateX(-50%) scale(1);filter:brightness(1)}100%{transform:translateX(-50%) scale(1.04);filter:brightness(1.25)}}
#bossDialogue{position:absolute;bottom:155px;left:50%;transform:translateX(-50%);min-width:380px;max-width:650px;padding:14px 24px;background:rgba(18,24,32,0.92);border:1px solid #ffd700;border-left:5px solid #ff426e;border-radius:4px;box-shadow:0 8px 32px rgba(0,0,0,0.8),0 0 16px rgba(255,215,0,0.3);backdrop-filter:blur(8px);pointer-events:none;z-index:4;animation:slideUp .25s ease-out;transition:opacity .4s}
@keyframes slideUp{from{transform:translate(-50%,15px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.bossSpeaker{font-size:12px;font-weight:800;letter-spacing:1px;color:#ffd700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bossSpeaker::before{content:"👑";font-size:14px}
.bossText{font-size:15px;color:#f0f4f8;font-weight:600;line-height:1.4}

#shoutOverlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.brawlBubble{
 position:absolute;
 background:#fffffffa;
 color:#14171a;
 font-weight:800;
 font-size:12px;
 padding:4px 10px;
 border-radius:12px;
 border:2px solid #222e35;
 box-shadow:0 3px 12px rgba(0,0,0,0.6);
 white-space:nowrap;
 pointer-events:none;
 transform:translate(-50%,-100%);
 animation:popBubble .2s cubic-bezier(.175,.885,.32,1.275);
}
.brawlBubble::after{
 content:"";
 position:absolute;
 bottom:-7px;
 left:50%;
 transform:translateX(-50%);
 border-width:7px 5px 0;
 border-style:solid;
 border-color:#222e35 transparent transparent;
}
.brawlBubble.femaleBubble{
 background:#fff0f6fa;
 border-color:#b8235a;
 color:#201018;
}
.brawlBubble.femaleBubble::after{
 border-color:#b8235a transparent transparent;
}
@keyframes popBubble{
 0%{transform:translate(-50%,-65%) scale(0.6);opacity:0}
 100%{transform:translate(-50%,-100%) scale(1);opacity:1}
}

/* Audio Settings & Music Controls */
.audio-ctrl-group{display:flex;align-items:center;gap:6px;margin-left:24px;background:#122129d9;border:1px solid #4a625f;border-radius:4px;padding:3px 9px;pointer-events:auto;font-size:11px}
.ctrl-title{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#8ea7a3}
.audio-icon-btn,.audio-step-btn,.menu-audio-btn{background:#1b323c;color:#eef4ee;border:1px solid #57736f;border-radius:3px;cursor:pointer;font-size:12px;font-weight:700;padding:4px 8px;line-height:1;transition:background .15s,border-color .15s,transform .1s}
.audio-icon-btn:hover,.audio-step-btn:hover,.menu-audio-btn:hover{background:#2d4c59;border-color:var(--lime);transform:translateY(-1px)}
.audio-icon-btn.muted,.menu-audio-btn.muted{background:#3a1d28;border-color:#d4380d;color:#ff9c6e}
.vol-indicator{font-family:monospace;font-weight:700;font-size:12px;color:var(--lime);min-width:34px;text-align:center}
.vol-slider{-webkit-appearance:none;width:80px;height:5px;border-radius:3px;background:#263c45;outline:none;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--lime);cursor:pointer;box-shadow:0 0 6px rgba(209,244,100,0.6)}
.menu-audio-group{display:flex;align-items:center;gap:10px;margin:16px 0 10px;padding:9px 14px;background:#10222ae0;border:1px solid #4a625f;border-radius:4px;font-size:12px}
.ctrl-label{font-weight:600;color:#c3d7d4}
.pause-audio-group{margin:16px 0 12px;padding:10px 14px;background:#122129e6;border:1px solid #486460;border-radius:4px;text-align:left}
.pause-audio-group .audio-row{display:flex;align-items:center;gap:8px;margin-top:8px}

/* Boss & Player Dialogue and Bubbles */
.brawlBubble.bossBubble{
 background:#fffbe6fa;
 border-color:#d48806;
 color:#531dab;
 box-shadow:0 3px 14px rgba(255,215,0,0.6);
}
.brawlBubble.bossBubble::after{
 border-color:#d48806 transparent transparent;
}
.brawlBubble.playerBubble{
 background:rgba(19,194,194,0.96);
 border:2px solid #d1f464;
 color:#042024;
 font-weight:800;
 box-shadow:0 4px 18px rgba(209,244,100,0.65);
}
.brawlBubble.playerBubble::after{
 border-color:#d1f464 transparent transparent;
}
#playerDialogue{
 position:absolute;
 bottom:95px;
 left:50%;
 transform:translateX(-50%);
 min-width:320px;
 max-width:580px;
 padding:10px 20px;
 background:rgba(12,28,32,0.94);
 border:1px solid #13c2c2;
 border-left:5px solid var(--lime);
 border-radius:4px;
 box-shadow:0 6px 24px rgba(0,0,0,0.7),0 0 14px rgba(209,244,100,0.25);
 backdrop-filter:blur(6px);
 pointer-events:none;
 z-index:4;
 animation:slideUp .2s ease-out;
 transition:opacity .35s;
}
.playerSpeaker{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--lime);margin-bottom:2px}
.playerText{font-size:14px;color:#e6fffb;font-weight:700;line-height:1.35}

/* Mode buttons: Dream & Grade */
.mode{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 16px}
button.dreamButton{background:linear-gradient(135deg,#1f1338,#381756);color:#e8d5ff;border-color:#9d65ff;font-weight:700}
button.dreamButton:hover{background:linear-gradient(135deg,#2e1b52,#50207d);border-color:#c49eff;transform:translateY(-2px);box-shadow:0 4px 18px rgba(157,101,255,0.4)}
button.gradeButton{background:linear-gradient(135deg,#2a1f06,#4a3508);color:#fff2b8;border-color:#f5b700;font-weight:700}
button.gradeButton:hover{background:linear-gradient(135deg,#3d2c08,#6b4c0b);border-color:#ffd447;transform:translateY(-2px);box-shadow:0 4px 18px rgba(245,183,0,0.4)}

/* Score and Grade HUD */
.score-hud{margin-bottom:10px;text-align:right;background:rgba(14,32,43,0.78);border:1px solid rgba(152,179,171,0.3);border-radius:4px;padding:8px 12px;backdrop-filter:blur(4px);min-width:180px}
.score-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.score-row span{font-size:9px;letter-spacing:2px;color:#a5b4b4}
.score-row b{font-size:24px;font-weight:900;color:var(--lime);letter-spacing:1px}
.grade-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;border-top:1px solid rgba(255,255,255,0.1);padding-top:4px}
.grade-row span{font-size:9px;letter-spacing:1px;color:#cbd5d1}
.grade-badge{font-size:18px;font-weight:900;padding:1px 8px;border-radius:4px;background:rgba(0,0,0,0.4);border:1px solid #ffd700;color:#ffd700}
.grade-row small{font-size:10px;color:#a2b5b0}

/* End Badge Container */
.end-badge-container{margin:18px 0;text-align:center}
.end-grade-badge{font-size:56px;line-height:1;font-weight:950;padding:6px 24px;border-radius:8px;border:3px solid #ffd700;color:#ffd700;display:inline-block;background:rgba(0,0,0,0.45);text-shadow:0 0 15px rgba(255,215,0,0.5)}
.end-grade-label{font-size:16px;font-weight:700;margin-top:8px;letter-spacing:1px;color:#ffd700}