@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#163b48;background:#b9e4ed}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{cursor:pointer;border:0;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid #00b8ad;outline-offset:4px}
input{touch-action:manipulation;user-select:text;-webkit-user-select:text}
#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}
.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(230,246,244,.97),rgba(230,246,244,.65) 29%,transparent 58%)}
header{position:fixed;top:24px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:15}
.brand{text-decoration:none;color:#173d48;display:flex;gap:9px;align-items:center;font:900 23px/.88 'Outfit',sans-serif;letter-spacing:-1px}
.brand:first-letter{font-size:40px}
.top-label{font-size:10px;font-weight:700;letter-spacing:2.4px}
.header-actions{display:flex;gap:8px;align-items:center}
.icon{border:1px solid #ffffff80;background:#ffffff70;border-radius:30px;padding:10px 16px;color:#244c59;font-size:12px;font-weight:700;transition:background .15s,transform .15s}
.icon:active{background:#ffffffaa;transform:scale(0.96)}
#landing{position:fixed;top:18%;left:7%;width:380px;z-index:10}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:9px}
.eyebrow span,.dot{width:6px;height:6px;border-radius:50%;background:#05a397;display:inline-block}
h1{font:800 clamp(44px,5vw,76px)/1.02 'Outfit',sans-serif;letter-spacing:-3px;margin:16px 0}
h1 em{font-style:normal;color:#098e8b}
.intro{font-size:14px;line-height:1.7;color:#5c7d84;margin-bottom:22px}
.play-card{width:330px;padding:20px;background:#ffffffc9;border:1px solid white;border-radius:18px;box-shadow:0 15px 40px #22576812;backdrop-filter:blur(12px)}
label{display:block;font-size:9px;letter-spacing:1.5px;font-weight:700;margin-bottom:8px}
input{width:100%;border:1px solid #d9e8e7;background:#f5f9f8;padding:10px 12px;border-radius:7px;color:#234b53;font-size:13px}
.primary{width:100%;background:#143f49;color:white;padding:15px 20px;border-radius:9px;margin-top:12px;text-align:left;font-weight:700;box-shadow:0 5px 0 #0b3038;transition:transform .2s}
.primary:hover{background:#087f80;transform:translateY(-2px)}
.primary span{float:right}
.join-row{display:flex;margin-top:15px;gap:8px}
.join-row input{width:45%;font-size:10px;letter-spacing:1px}
.join-row button{background:transparent;font-size:11px;font-weight:700;color:#315b63}
.card-foot{display:flex;gap:8px;align-items:center;font-size:9px;color:#789093;margin-top:16px}
.card-foot i{font-style:normal}
#error{font-size:11px;color:#c14b3d;margin:8px 0 0}
.landing-controls{display:flex;gap:20px;margin-top:22px;font-size:10px;font-weight:700}
.landing-controls small{display:block;color:#849b9f;font-weight:400;margin-top:5px}
#scene-note{position:fixed;right:6%;bottom:12%;border-left:2px solid #ffffff8f;padding-left:18px}
#scene-note span{font-size:9px;letter-spacing:2px}
#scene-note h3{font:500 23px/1.2 'Outfit';margin:12px 0}
#scene-note p{font-size:11px;color:#527681}
footer{position:fixed;bottom:24px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:700}
footer b{margin-left:15px;color:#098e8b}
.hidden{display:none!important}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:30px;width:440px;max-width:92vw;max-height:86vh;overflow-y:auto;background:#f4fbf6f2;backdrop-filter:blur(20px);border:1px solid white;border-radius:24px;box-shadow:0 25px 100px #153b4a40;z-index:20}
.modal h2{font:700 32px 'Outfit';letter-spacing:-1px;margin:12px 0}
.modal p{font-size:12px;line-height:1.6;color:#69858b}
.room-code{width:100%;padding:14px;background:#e0efeb;color:#127a79;border:1px dashed #89b8ae;font-size:28px;letter-spacing:8px;border-radius:10px}
.roster-row,.score-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;border-bottom:1px solid #25556415}
.player-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px}
.muted{font-size:10px!important;text-align:center}
.hud-top{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.stat{min-width:140px;padding:11px 18px;background:#143d49e8;border:1px solid #ffffff30;border-radius:13px;color:white}
.stat small{display:block;font-size:8px;letter-spacing:1.5px;color:#a1c7d0;margin-bottom:4px}
.stat strong{font:600 18px 'Outfit'}
.clock{text-align:center}
#scores{position:fixed;left:24px;top:125px;background:#f6fffae0;backdrop-filter:blur(10px);padding:10px 16px;border-radius:14px;width:185px;z-index:8}
#feed{position:fixed;right:24px;top:125px;max-width:250px;font-size:11px;color:#254d5a;z-index:8}
#feed p{padding:8px 12px;border-radius:8px;background:#ffffffc4;margin:5px 0}
.health{position:fixed;bottom:65px;left:26px;width:180px;font-size:9px;font-weight:700;letter-spacing:1px;z-index:8}
.health div{height:7px;background:#133f4960;margin-top:8px;border-radius:10px;overflow:hidden}
.health i{display:block;height:100%;background:#19b5a1;width:100%;transition:width .2s}
#hint{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#173c49e8;border:1px solid #ffffff40;color:white;border-radius:30px;padding:11px 22px;font-size:12px;white-space:nowrap;z-index:10}
.game-controls{position:fixed;bottom:24px;width:100%;text-align:center;font-size:10px;color:#3f6670;z-index:8}
.game-controls b{font-size:8px;margin-left:4px}
.secondary{width:100%;padding:12px;margin-top:12px;background:transparent;color:#3b6b71}
body.playing .vignette{background:radial-gradient(ellipse,transparent 60%,#549bbb30)}
body.playing .top-label{display:none}
.team-picker{display:flex;gap:8px;margin:14px 0}
.team-picker button{flex:1;padding:12px;border-radius:8px;background:#d8eef9;color:#1776a3;font-size:12px;font-weight:700}
.team-picker button:last-child{background:#fce4dc;color:#bc5947}
#bases{position:fixed;left:24px;top:125px;width:200px;display:grid;gap:8px;z-index:8}
.base-status{padding:12px 14px;background:#f6fffaec;border-radius:12px;box-shadow:0 8px 25px #1a465516;border-left:3px solid #27aaff}
.base-status.red{border-color:#ff665e}
.base-status small{font-size:8px;letter-spacing:1px;font-weight:700}
.base-status strong{display:block;font:600 24px Outfit;margin:5px 0}
.base-status strong span{font:500 9px 'DM Sans';color:#718991}
.base-meter{height:6px;background:#c6dee4;border-radius:6px;overflow:hidden}
.base-meter i{display:block;height:100%;background:#27aaff;transition:width .2s}
.red .base-meter i{background:#ff665e}
.base-status p{font-size:9px;margin:6px 0 0;color:#56737d}
.base-status p b{float:right}
#scores{top:395px;width:200px}
button:disabled{cursor:default;opacity:.55}
.treasury{font:700 24px Outfit;color:#117e8c;margin:16px 0 8px}
.upgrades{display:flex;gap:5px}
.upgrades button{flex:1;border:1px solid #afd5cf;background:#e4f2e9;color:#205c60;padding:10px 4px;font-size:10px;border-radius:8px}
.upgrade-info{font-size:10px;color:#52747a;line-height:1.5;margin-top:8px}
#match-terms{font-weight:700;font-size:10px}
#notice{position:fixed;bottom:100px;right:24px;font-size:11px;color:#9f4535;max-width:360px;background:#fff9e8eb;border-radius:8px;padding:6px 12px;z-index:30}
#notice:empty{display:none}
#battle-wallet{position:fixed;top:95px;left:50%;transform:translateX(-50%);background:#183e4be6;color:#a6f5e1;padding:8px 16px;border-radius:20px;font:600 12px Outfit;z-index:10}
#cannon-panel{position:fixed;right:24px;bottom:75px;width:290px;z-index:20;background:#f0fbf4f5;padding:18px;border:1px solid white;border-radius:18px;box-shadow:0 12px 50px #173d4940}
#cannon-panel h3{font:600 22px Outfit;margin:8px 0}
#cannon-panel p{font-size:10px;line-height:1.5;color:#537780}
#cannon-panel input{padding:0;margin-bottom:10px;accent-color:#168c8b}
#lobby{width:470px}
#roster .roster-row{padding:5px 0}
#payout{background:#dff2e6;padding:12px;border-radius:9px;color:#246349}
.ai-badge{display:inline-block;padding:2px 6px;border-radius:6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#e0f5f0;color:#0e7b75;border:1px solid #9fd8ce;margin-left:4px;vertical-align:middle}
.jev-status{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;font-size:9px;font-weight:800;letter-spacing:1px;background:#143f49;color:#38f2d0;border:1px solid #2ae0be66;margin-left:8px}
.crosshair{position:fixed;top:50%;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;z-index:30}
.crosshair::before{content:'';position:absolute;inset:7px;background:#ffffff;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.8)}
.crosshair::after{content:'';position:absolute;inset:1px;border:1.5px solid rgba(255,255,255,0.4);border-radius:50%}
.crosshair.cannon-active{width:46px;height:46px}
.crosshair.cannon-active::before{inset:20px;background:#28ecd0;box-shadow:0 0 10px #28ecd0,0 0 2px #fff}
.crosshair.cannon-active::after{inset:0;border:2px solid #28ecd0bb;border-radius:50%;box-shadow:0 0 12px #28ecd055}
.cannon-prompt-banner{position:fixed;right:26px;bottom:35px;background:#143f49f5;border:2px solid #28ecd0;border-radius:16px;padding:12px 20px;display:flex;align-items:center;gap:14px;color:white;box-shadow:0 12px 35px rgba(0,0,0,0.4),0 0 24px #28ecd040;z-index:25;pointer-events:none;animation:cannonPulseBottom 1.8s infinite alternate}
@keyframes cannonPulseBottom{0%{transform:scale(1)}100%{transform:scale(1.03)}}
.cannon-prompt-banner .cannon-icon{font-size:24px;color:#28ecd0;display:flex;align-items:center;justify-content:center}
.cannon-prompt-banner strong{display:block;font:800 14px 'Outfit',sans-serif;letter-spacing:1px;color:#38f2d0}
.cannon-prompt-banner small{display:block;font-size:11px;color:#b8e4ed;margin-top:2px}
.cannon-prompt-banner small b{background:#ffffff2b;padding:2px 8px;border-radius:6px;color:#fff;border:1px solid #ffffff40;display:inline-block;font-weight:700}
.cannon-hud{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);text-align:center;color:white;pointer-events:none;z-index:25}
.cannon-hud .cannon-prompt{font:800 13px 'Outfit',sans-serif;letter-spacing:2px;color:#39f1d0;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
#cannon-hud-status{font:700 18px 'Outfit',sans-serif;letter-spacing:1px;margin:4px 0;text-shadow:0 2px 10px rgba(0,0,0,0.9)}
#cannon-hud-sub{font-size:11px;color:#d0edf4;text-shadow:0 1px 6px rgba(0,0,0,0.8)}
.open-lobbies{margin-top:12px;border-top:1px dashed #d1e2e1;padding-top:10px}
.open-lobbies-title{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#186872;margin-bottom:6px}
.lobby-chips{display:flex;flex-direction:column;gap:6px}
.lobby-chip{width:100%;background:#eaf6f4;border:1px solid #9cd5cc;color:#155963;padding:8px 12px;border-radius:8px;font-size:11px;font-weight:600;display:flex;justify-content:space-between;align-items:center;transition:background .15s}
.lobby-chip:hover{background:#d2eee9;cursor:pointer}
.lobby-chip b{color:#097977;letter-spacing:1px}
.lobby-chip span{color:#097977;font-weight:700}

/* Rotate Device Overlay for Portrait Phone */
.rotate-prompt{display:none;position:fixed;inset:0;background:rgba(14,38,48,0.96);backdrop-filter:blur(16px);z-index:99999;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:white}
@media (max-width:900px) and (orientation:portrait){.rotate-prompt{display:flex}}
.rotate-phone-anim{width:80px;height:80px;margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.phone-icon{width:40px;height:70px;border:3px solid #28ecd0;border-radius:8px;position:relative;animation:rotatePhone 2.2s infinite ease-in-out;box-shadow:0 0 20px #28ecd066}
.phone-icon::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;background:#28ecd0;border-radius:50%}
@keyframes rotatePhone{0%{transform:rotate(0deg)}40%{transform:rotate(-90deg)}70%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}
.rotate-prompt h2{font:800 22px 'Outfit',sans-serif;letter-spacing:2px;color:#28ecd0;margin:0 0 8px}
.rotate-prompt p{font-size:13px;color:#d1edf5;max-width:260px;line-height:1.5;margin:0}

/* Mobile On-Screen Controls */
.mobile-controls{display:none;position:fixed;inset:0;pointer-events:none;z-index:35}
@media (max-width:1024px), (pointer:coarse){body.playing .mobile-controls{display:block}}
.joystick-zone{position:absolute;left:20px;bottom:20px;width:150px;height:150px;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center}
.joystick-base{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(20,63,73,0.45) 0%,rgba(11,40,48,0.75) 100%);border:2px solid rgba(40,236,208,0.35);box-shadow:0 0 20px rgba(0,0,0,0.4),inset 0 0 15px rgba(40,236,208,0.15);position:relative;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.joystick-knob{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#46f5dc,#098e8b);border:2px solid #ffffffaa;box-shadow:0 4px 15px rgba(0,0,0,0.5),0 0 12px rgba(40,236,208,0.6);position:absolute;transform:translate(0px,0px);will-change:transform;pointer-events:none}
.action-cluster{position:absolute;right:15px;bottom:15px;width:210px;height:200px;pointer-events:auto}
.m-btn{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .08s ease,filter .08s ease;box-shadow:0 6px 16px rgba(0,0,0,0.45)}
.m-btn:active{transform:scale(0.92);filter:brightness(1.25)}
.m-btn small{font-size:7px;font-weight:800;letter-spacing:.5px;margin-top:1px;text-transform:uppercase}
.btn-attack{right:12px;bottom:12px;width:76px;height:76px;font-size:26px;background:linear-gradient(135deg,#134f5c,#077977);border:2.5px solid #38f2d0;color:#ffffff;box-shadow:0 0 20px rgba(40,236,208,0.4),0 6px 20px rgba(0,0,0,0.5)}
.btn-jump{right:102px;bottom:12px;width:52px;height:52px;font-size:18px;background:#143f49dd;border:1.5px solid #66d9e8;color:white}
.btn-block{right:12px;bottom:102px;width:52px;height:52px;font-size:18px;background:#143f49dd;border:1.5px solid #ffd43b;color:white}
.btn-interact{right:84px;bottom:80px;width:52px;height:52px;font-size:18px;background:#143f49dd;border:1.5px solid #69db7c;color:white}
.btn-cannon{right:144px;bottom:76px;width:48px;height:48px;font-size:16px;background:#143f49dd;border:1.5px solid #ff922b;color:white}
.mobile-cannon-controls{position:absolute;inset:0;pointer-events:none;z-index:50}
.m-cannon-btn{position:absolute;pointer-events:auto;touch-action:none;border:0;border-radius:14px;font-family:'Outfit',sans-serif;font-weight:800;cursor:pointer;transition:transform .1s}
.m-cannon-btn:active{transform:scale(0.95)}
.btn-fire{bottom:25px;right:25px;padding:16px 26px;font-size:15px;letter-spacing:1px;background:linear-gradient(135deg,#ff6b6b,#e03131);color:white;box-shadow:0 0 25px rgba(255,107,107,0.6),0 8px 20px rgba(0,0,0,0.5);border:2px solid #ffc9c9}
.btn-exit{top:20px;right:20px;padding:10px 18px;font-size:12px;letter-spacing:1px;background:#143f49ea;color:#d1edf5;border:1.5px solid #ffffff40;box-shadow:0 4px 15px rgba(0,0,0,0.4)}

@media(max-width:700px){
  .top-label,#scene-note,footer{display:none}
  header{top:16px}
  .brand{font-size:17px}
  #landing{left:5%;top:14%;width:90%}
  .vignette{background:linear-gradient(90deg,#e6f6f4f0,#e6f6f499,transparent)}
  h1{font-size:42px}
  .hud-top{top:70px;width:94%;gap:5px}
  .stat{min-width:0;flex:1;padding:8px}
  .stat strong{font-size:15px}
  #scores{display:none}
  #feed{display:none}
  #hint{bottom:120px;font-size:10px;padding:8px 14px}
  .health{bottom:100px;left:15px}
  .game-controls{display:none}
  .play-card{max-width:100%}
  #battle-wallet{top:125px;font-size:10px;padding:4px 10px}
  #bases{top:150px;left:8px;width:120px;gap:5px}
  .base-status{padding:8px}
  .base-status strong{font-size:18px}
  .base-status strong span{font-size:7px}
  .base-status small{font-size:7px}
  .base-status p{font-size:7px}
}

@media(max-height:540px){
  .modal{top:50%;padding:16px 20px;max-height:94vh;border-radius:16px}
  .modal h2{font-size:22px;margin:6px 0}
  .room-code{padding:8px;font-size:20px;letter-spacing:5px}
  .team-picker{margin:8px 0}
  .treasury{font-size:18px;margin:8px 0 6px}
  .upgrades button{padding:6px 4px;font-size:9px}
  .primary{padding:10px 14px;margin-top:8px}
  .hud-top{top:14px;gap:6px}
  .stat{padding:6px 12px;min-width:0}
  .stat small{font-size:7px}
  .stat strong{font-size:14px}
  #bases{top:60px;left:10px;width:115px;gap:4px}
  .base-status{padding:5px 8px}
  .base-status strong{font-size:15px;margin:2px 0}
  .health{bottom:12px;left:175px;width:130px}
  #hint{bottom:45px;font-size:11px;padding:5px 12px}
  .joystick-zone{left:10px;bottom:10px;width:130px;height:130px}
  .joystick-base{width:110px;height:110px}
  .joystick-knob{width:44px;height:44px}
  .action-cluster{right:10px;bottom:10px;width:180px;height:170px}
  .btn-attack{width:64px;height:64px;font-size:22px;right:8px;bottom:8px}
  .btn-jump{width:44px;height:44px;font-size:15px;right:80px;bottom:8px}
  .btn-block{width:44px;height:44px;font-size:15px;right:8px;bottom:80px}
  .btn-interact{width:44px;height:44px;font-size:15px;right:66px;bottom:64px}
  .btn-cannon{width:40px;height:40px;font-size:14px;right:116px;bottom:60px}
  .cannon-prompt-banner{right:10px;bottom:15px;padding:8px 12px}
}