:root{font-family:Arial,Helvetica,sans-serif;color:#e8f2f4;background:#080c15;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;letter-spacing:.12em;font-size:11px;font-weight:700;padding:16px}button:hover{color:#b4ff58}button:focus-visible{outline:2px solid #b4ff58;outline-offset:5px}button:disabled{opacity:.3;cursor:default}canvas{display:block}#canvas-container{position:fixed;inset:0}#vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 60% 45%,transparent 35%,#030710a6)}#flash{position:fixed;inset:0;background:#ff4664;opacity:0;pointer-events:none;z-index:10}header,footer{position:fixed;left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between;z-index:5}header{top:25px;border-bottom:1px solid #abc5d221;padding-bottom:20px}.wordmark{text-decoration:none;color:white;font-weight:900;font-size:25px;letter-spacing:-3px}.wordmark span{color:#b4ff58}.system{font-size:10px;letter-spacing:.2em;display:flex;gap:20px;align-items:center}.system span{color:#8295a6}i.live,.live,header i,footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b4ff58;box-shadow:0 0 12px #b4ff5880}.small{border:1px solid #8395a63d;padding:10px 14px}footer{bottom:24px;font-size:9px;letter-spacing:.15em;color:#718296}.screen{position:fixed;inset:0;z-index:3}.screen[hidden],[hidden]{display:none!important}#start-screen{display:flex;align-items:center;pointer-events:none}.intro{margin-left:8%;pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:.23em;color:#b4ff58}.eyebrow .live{margin-right:10px}h1{font-size:clamp(54px,6.6vw,108px);line-height:.88;letter-spacing:-.07em;margin:30px 0 25px;font-weight:900;position:relative}h1 span{-webkit-text-stroke:1px #a2b1bf;color:transparent}h1 sup{font-size:16px;vertical-align:top;letter-spacing:0;margin-left:12px}p{font-size:14px;line-height:1.8;color:#90a3b5}.intro p{margin-bottom:32px}.primary{background:#b4ff58;color:#132008;padding:20px 23px;display:flex;align-items:center;justify-content:space-between;gap:45px;min-width:270px;box-shadow:0 0 35px #b4ff5812}.primary:hover{background:#caff8b;color:#132008}.primary span{font-size:20px}.menu-links{display:flex;margin:12px -16px}.menu-links button{font-size:9px;color:#9aabb9}.records{border-top:1px solid #8294a130;padding-top:20px;display:flex;gap:30px;margin-top:14px;font-size:10px;color:#748a9c;letter-spacing:.1em}.records b{display:block;color:#e7eff3;font-size:18px;margin-top:8px}.sector-tag{position:absolute;bottom:17%;right:8%;text-align:right;display:grid;gap:10px;font-size:10px;letter-spacing:.2em;color:#8c9caa}.sector-tag span{font-size:20px;color:#d2dde5}.sector-tag div{font-size:8px;color:#b4ff58}.modal{display:flex;justify-content:center;align-items:center;background:#040911be;backdrop-filter:blur(12px);z-index:8}.panel{padding:40px;background:#0d1622ee;border:1px solid #8fadc32b;width:min(470px,92vw);max-height:85vh;overflow:auto;box-shadow:0 30px 100px #0008}.panel.wide{width:min(980px,94vw)}h2{font-size:36px;letter-spacing:-.045em;margin:17px 0}.panel .primary{width:100%;margin-top:20px}.panel>button:not(.primary){margin-top:10px;width:100%}label{display:flex;align-items:center;justify-content:space-between;margin:22px 0;color:#a6b8c6;font-size:13px}input{accent-color:#b4ff58}dl{font-size:12px;line-height:1.7}dt{color:#b4ff58;margin-top:12px}dd{margin:0;color:#acb8c6}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}.card{text-align:left;border:1px solid #3b4e60;background:linear-gradient(135deg,#1b2b3b,#101923);padding:25px;min-height:240px;display:flex;flex-direction:column;letter-spacing:0;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-5px);border-color:#b4ff58}.card .icon{font-size:32px;color:#b4ff58;margin-bottom:30px}.card h3{font-size:19px;margin:0 0 12px}.card p{font-size:12px;margin:0}.card small{margin-top:auto;padding-top:25px;color:#b4ff58;letter-spacing:.15em}#hud-container{position:fixed;inset:110px 4% 65px;pointer-events:none}.hud-left,.hud-right{position:absolute;display:grid;gap:5px}.hud-right{right:0;text-align:right}small{font-size:10px;letter-spacing:.17em;color:#8fa5b9}.hud-left strong{font-size:56px;font-weight:300}.hud-right strong{font-size:30px;letter-spacing:.06em}.hud-left>span{font-size:10px;letter-spacing:.15em;color:#b4ff58}#hearts{font-size:26px;color:#b4ff58;letter-spacing:6px}.bottom-hud{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:end;gap:35px}.bottom-hud>div{display:grid;gap:12px}.bottom-hud b{font-size:12px}.meter{width:170px;height:3px;background:#314050}.meter i{display:block;width:100%;height:100%;background:#b4ff58}#dash-label{color:#b4ff58;margin-left:30px;font-size:9px}#active-perks{display:flex;flex:1;flex-wrap:wrap;justify-content:flex-end;gap:6px}#active-perks span{padding:8px 10px;border:1px solid #41515a;font-size:10px;background:#0a1323aa}#dim-alert{position:fixed;top:24%;width:100%;text-align:center;color:#b4ff58;font-size:23px;letter-spacing:.18em;pointer-events:none;z-index:6;opacity:0;transition:opacity .2s}#context-hint{position:fixed;bottom:21%;width:100%;text-align:center;font-size:14px;color:#b4ff58;pointer-events:none}#results{font-size:18px;line-height:2;color:#aabcca}#touch-controls{position:fixed;inset:0;pointer-events:none;z-index:6}#stick{position:absolute;bottom:90px;left:30px;width:120px;height:120px;border:1px solid #b4ff5866;border-radius:50%;background:#18253588;pointer-events:auto;touch-action:none}#stick i{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#b4ff5888}#touch-controls button{position:absolute;bottom:105px;right:25px;border:1px solid #b4ff5888;border-radius:50%;width:80px;height:80px;background:#102536bb;pointer-events:auto;touch-action:none}#touch-controls #touch-dash{right:120px;bottom:70px;width:65px;height:65px}@media(max-width:700px){header{top:15px}.system{font-size:8px;gap:8px}.system span{display:none}footer{bottom:15px}footer>span:first-child,footer>span:last-child{display:none}footer{justify-content:center}.intro{margin-left:7%}h1{font-size:14vw}.sector-tag{display:none}.cards{grid-template-columns:1fr;gap:8px;margin-top:15px}.card{min-height:120px;padding:16px}.card .icon{display:none}.card small{padding-top:12px}.panel{padding:25px}.panel h2{font-size:28px}.hud-left strong{font-size:35px}.hud-right strong{font-size:24px}.bottom-hud{gap:15px}.meter{width:110px}#active-perks span{font-size:8px;padding:5px}.records{gap:20px}#hud-container{top:95px}.intro p{font-size:13px}.primary{min-width:245px}}
#checkpoint-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:55vh;overflow-y:auto;padding-right:8px;gap:12px}
#checkpoint-cards .card{min-height:160px;padding:18px}
#checkpoint-cards .card h3{font-size:17px;color:#b4ff58}
.gp-focus,button.gp-focus,.card.gp-focus,a.gp-focus,input.gp-focus{outline:3px solid #b4ff58!important;outline-offset:4px!important;box-shadow:0 0 0 2px rgba(180,255,88,0.4),0 0 24px rgba(180,255,88,0.85)!important;border-color:#b4ff58!important;color:#ffffff!important;transform:translateY(-3px) scale(1.025)!important;transition:transform .12s ease,box-shadow .12s ease!important}
button.primary.gp-focus{background:#caff8b!important;color:#101c05!important;box-shadow:0 0 0 3px #ffffff,0 0 30px rgba(180,255,88,0.95)!important}

/* Mobile & Touch Controls responsiveness */
@media (max-width: 900px) {
  #touch-controls #stick {
    bottom: max(25px, env(safe-area-inset-bottom, 25px));
    left: max(20px, env(safe-area-inset-left, 20px));
    width: 110px;
    height: 110px;
  }
  #stick i {
    left: 35px;
    top: 35px;
    width: 40px;
    height: 40px;
  }
  #touch-controls button#touch-fire {
    bottom: max(35px, env(safe-area-inset-bottom, 35px));
    right: max(20px, env(safe-area-inset-right, 20px));
    width: 74px;
    height: 74px;
    font-size: 11px;
  }
  #touch-controls #touch-dash {
    bottom: max(30px, env(safe-area-inset-bottom, 30px));
    right: max(105px, calc(env(safe-area-inset-right, 20px) + 85px));
    width: 60px;
    height: 60px;
    font-size: 10px;
  }
}

/* Portrait (e.g. 9:16) specific adjustments */
@media (orientation: portrait) {
  #hud-container {
    top: 75px;
    bottom: 145px;
    left: 3%;
    right: 3%;
  }
  .hud-left strong {
    font-size: 32px;
  }
  .hud-right strong {
    font-size: 22px;
  }
  .bottom-hud {
    bottom: 0;
  }
}

/* Landscape on Mobile / Small screens (16:9) */
@media (orientation: landscape) and (max-height: 520px) {
  header {
    top: 8px;
    padding-bottom: 8px;
  }
  footer {
    display: none;
  }
  #hud-container {
    top: 55px;
    bottom: 25px;
  }
  #touch-controls #stick {
    bottom: 15px;
    left: 20px;
    width: 95px;
    height: 95px;
  }
  #stick i {
    left: 30px;
    top: 30px;
    width: 35px;
    height: 35px;
  }
  #touch-controls button#touch-fire {
    bottom: 15px;
    right: 20px;
    width: 68px;
    height: 68px;
  }
  #touch-controls #touch-dash {
    bottom: 15px;
    right: 98px;
    width: 54px;
    height: 54px;
  }
}