:root {
  --ink: #e6f6ff;
  --muted: #8aa7ba;
  --line: rgba(133, 219, 255, .26);
  --aqua: #67ebff;
  --aqua-soft: rgba(103, 235, 255, .18);
  --blue: #2675ff;
  --hot: #ff5f78;
  --panel: rgba(4, 11, 22, .76);
  --panel-deep: rgba(2, 7, 14, .91);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; background: #03070f; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
#game-shell, #game-canvas { width: 100%; height: 100%; display: block; }
#game-canvas { position: fixed; inset: 0; cursor: crosshair; }
#post-vignette { position: fixed; pointer-events: none; z-index: 2; inset: 0; background: radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .72) 132%); }
#damage-overlay { position: fixed; pointer-events: none; z-index: 7; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 37%, rgba(255, 19, 49, .04) 51%, rgba(255, 26, 50, .64) 128%); transition: opacity .12s linear; mix-blend-mode: screen; }
.hidden { display: none !important; }

#hud { position: fixed; z-index: 5; pointer-events: none; top: 18px; left: 18px; right: 18px; display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); align-items: start; gap: 16px; }
.hud-module { border: 1px solid var(--line); background: linear-gradient(90deg, rgba(5, 14, 27, .84), rgba(5, 14, 27, .27)); box-shadow: 0 0 18px rgba(80, 229, 255, .06) inset, 0 0 12px rgba(0, 0, 0, .2); backdrop-filter: blur(4px); padding: 9px 12px; min-height: 64px; }
.module-label, .eyebrow, .difficulty-label { color: rgba(204, 239, 255, .57); letter-spacing: .18em; font-weight: 750; font-size: 9px; }
.identity-module { width: min(100%, 262px); clip-path: polygon(0 0, 96% 0, 100% 17%, 100% 100%, 0 100%); }
.identity-title { font-size: 22px; line-height: 1; letter-spacing: .045em; font-weight: 900; margin-top: 3px; font-style: italic; }
.identity-title strong { color: var(--aqua); font-weight: 900; }
.identity-sub { color: rgba(218, 245, 255, .55); font-size: 8px; letter-spacing: .14em; margin-top: 6px; }
.objective-module { min-width: 252px; text-align: center; clip-path: polygon(4% 0, 96% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); }
#objective-text { font-size: 12px; font-weight: 800; letter-spacing: .06em; margin: 5px 0 7px; }
.objective-readout { display: flex; justify-content: center; gap: 16px; color: rgba(219, 245, 255, .59); font-size: 9px; letter-spacing: .1em; }
.objective-readout strong { color: var(--aqua); margin-left: 4px; }
.score-module { width: min(100%, 226px); justify-self: end; text-align: right; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 17%); }
#score-value { color: var(--aqua); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 25px; line-height: 1.05; margin-top: 3px; font-weight: 800; text-shadow: 0 0 16px rgba(103, 235, 255, .55); }
.score-bottom { display:flex; justify-content: flex-end; gap: 10px; margin-top: 4px; font-size: 9px; letter-spacing: .1em; color: rgba(226, 246, 255, .58); }
.score-bottom strong { color: #ffd28b; margin-left: 3px; }
#difficulty-readout { color: #b399ff; }

#combat-panel { position: fixed; z-index: 5; pointer-events: none; bottom: 20px; left: 18px; width: 274px; padding: 11px 13px; border-left: 2px solid var(--aqua); border-top: 1px solid rgba(107, 235, 255, .23); background: linear-gradient(90deg, rgba(5, 14, 27, .86), rgba(5, 14, 27, .1)); }
.vital-row { display: flex; justify-content: space-between; align-items: center; color: rgba(221, 247, 255, .68); font-size: 9px; letter-spacing: .12em; margin: 0 0 5px; }
.vital-row strong { color: var(--aqua); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.meter { position: relative; height: 7px; background: rgba(0, 0, 0, .46); border: 1px solid rgba(118, 237, 255, .22); overflow: hidden; margin-bottom: 10px; }
.meter-fill { height:100%; width:100%; transition: width .12s linear; box-shadow: 0 0 11px rgba(104, 240, 255, .84); }
.health-fill { background: linear-gradient(90deg, #ff5670, #ffb06e 42%, #78edff 78%); }
.ammo-fill { background: linear-gradient(90deg, #355eff, #5cf0ff); }
.aux-readout { display:flex; justify-content:space-between; color: rgba(216, 244, 255, .43); font-size: 8px; letter-spacing:.08em; }
#status-text { color: rgba(154, 247, 255, .85); }
#environment-readout { color: rgba(185, 224, 255, .58); text-align:right; }
#combat-panel.day-mode { border-left-color: #ffd293; border-top-color: rgba(255, 210, 147, .36); background: linear-gradient(90deg, rgba(22, 31, 39, .86), rgba(8, 18, 28, .11)); }
#combat-panel.day-mode #status-text, #combat-panel.day-mode #environment-readout { color: #ffe0a8; }

#crosshair { display:none; pointer-events:none; position:fixed; z-index:6; width:48px; height:48px; left:50%; top:50%; transform:translate(-50%, -50%); filter: drop-shadow(0 0 7px rgba(86, 237, 255, .8)); transition: transform .08s ease; }
#crosshair .cross-dot { position:absolute; left:50%; top:50%; width:4px; height:4px; transform:translate(-50%, -50%); border-radius:50%; background:#cfffff; box-shadow:0 0 8px #7cefff; }
#crosshair i, #crosshair b, #crosshair em, #crosshair::after { position:absolute; content:""; display:block; background:var(--aqua); box-shadow:0 0 8px var(--aqua); }
#crosshair i { width:1px; height:12px; top:3px; left:50%; transform:translateX(-50%); }
#crosshair b { width:1px; height:12px; bottom:3px; left:50%; transform:translateX(-50%); }
#crosshair em { width:12px; height:1px; left:3px; top:50%; transform:translateY(-50%); }
#crosshair::after { width:12px; height:1px; right:3px; top:50%; transform:translateY(-50%); }
#crosshair.kick { transform: translate(-50%, -50%) scale(1.16); }
#crosshair.alert i, #crosshair.alert b, #crosshair.alert em, #crosshair.alert::after, #crosshair.alert .cross-dot { background:#ff9a9a; }
#hit-marker { pointer-events:none; display:none; z-index:7; position:fixed; width:35px; height:35px; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0; transition:opacity .05s linear; }
#hit-marker span { position:absolute; top:50%; left:50%; width:1px; height:20px; background:#fff; box-shadow:0 0 8px #fff; }
#hit-marker span:first-child { transform:translate(-50%, -50%) rotate(45deg); }
#hit-marker span:last-child { transform:translate(-50%, -50%) rotate(-45deg); }
#hit-marker.show { opacity:1; }
#prompt { position:fixed; z-index:7; left:50%; bottom:112px; transform:translateX(-50%); color:#e9fbff; background:rgba(4, 12, 25, .78); border:1px solid rgba(118, 236, 255, .38); padding:9px 13px; font-size:10px; font-weight:800; letter-spacing:.15em; box-shadow:0 0 18px rgba(92, 229, 255, .13) inset; }
#toast { pointer-events:none; position:fixed; z-index:9; left:50%; top:72%; transform:translate(-50%, 10px); opacity:0; color:var(--aqua); background:rgba(3, 12, 24, .88); padding:9px 14px; border:1px solid rgba(102, 236, 255, .4); font-size:10px; font-weight:800; letter-spacing:.14em; transition:opacity .16s ease, transform .16s ease; box-shadow:0 0 18px rgba(88, 229, 255, .13) inset; }
#toast.show { opacity:1; transform:translate(-50%, 0); }

.screen-card { position:fixed; z-index:10; left:50%; top:50%; width:min(92vw, 550px); transform:translate(-50%, -50%); padding:31px 34px 25px; background: linear-gradient(146deg, rgba(9, 21, 38, .97), rgba(2, 6, 14, .96)); border:1px solid rgba(111, 229, 255, .39); box-shadow: 0 0 0 1px rgba(8, 20, 34, .94), 0 26px 70px rgba(0, 0, 0, .67), 0 0 35px rgba(54, 207, 255, .08) inset; overflow:hidden; }
.screen-card::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background:linear-gradient(90deg, transparent 49.7%, rgba(107, 238, 255, .16) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(107, 238, 255, .1) 50%, transparent 50.3%); background-size: 80px 80px; mask-image:linear-gradient(to bottom, black, transparent 72%); }
.corner-line { position:absolute; width:62px; height:62px; pointer-events:none; border-color:var(--aqua); opacity:.78; }
.top-left { left:8px; top:8px; border-top:2px solid; border-left:2px solid; }.top-right { right:8px; top:8px; border-top:2px solid; border-right:2px solid; }.bottom-left { left:8px; bottom:8px; border-bottom:2px solid; border-left:2px solid; }.bottom-right { right:8px; bottom:8px; border-bottom:2px solid; border-right:2px solid; }
.screen-card > * { position:relative; }
.title-block { display:flex; align-items:flex-end; gap:16px; margin:7px 0 10px; }
h1 { font-size:75px; line-height:.78; margin:0; letter-spacing:-.065em; font-style:italic; font-weight:950; text-shadow:0 0 24px rgba(100, 228, 255, .1); }
h1 span { color:var(--aqua); }
.title-number { color:rgba(217, 248, 255, .34); font-size:50px; line-height:1; font-weight:250; letter-spacing:-.08em; }
.pitch { color:#b2cddc; font-size:13px; line-height:1.6; margin:15px 0 21px; max-width:450px; }
.difficulty-label { margin-bottom:8px; }
.difficulty-buttons { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:18px; }
.difficulty { min-height:54px; border:1px solid rgba(125, 220, 248, .22); background:rgba(4, 12, 24, .54); color:#adccda; cursor:pointer; transition:.16s ease; padding:7px 3px; }
.difficulty span { display:block; font-size:11px; font-weight:850; letter-spacing:.08em; }.difficulty small { display:block; margin-top:5px; color:rgba(200, 237, 250, .43); font-size:8px; letter-spacing:.13em; }.difficulty:hover, .difficulty.active { border-color:var(--aqua); color:#e9feff; background:linear-gradient(135deg, rgba(55, 176, 217, .22), rgba(59, 84, 183, .18)); box-shadow:0 0 14px rgba(94, 230, 255, .11) inset, 0 0 12px rgba(86, 225, 255, .1); }.difficulty.active { color:var(--aqua); }
.operation-label { color:rgba(204, 239, 255, .57); letter-spacing:.18em; font-weight:750; font-size:9px; margin:0 0 8px; }
.operation-buttons { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:20px; }
.operation { min-height:52px; border:1px solid rgba(125, 220, 248, .22); background:rgba(4, 12, 24, .54); color:#adccda; cursor:pointer; transition:.16s ease; padding:7px 6px; text-align:left; }
.operation span { display:block; font-size:10px; font-weight:850; letter-spacing:.10em; }.operation small { display:block; margin-top:6px; color:rgba(200, 237, 250, .43); font-size:7px; letter-spacing:.11em; }.operation:hover, .operation.active { border-color:var(--aqua); color:#e9feff; background:linear-gradient(135deg, rgba(55, 176, 217, .22), rgba(59, 84, 183, .18)); box-shadow:0 0 14px rgba(94, 230, 255, .11) inset, 0 0 12px rgba(86, 225, 255, .1); }.operation.active { color:var(--aqua); }.operation[data-operation="day"].active { border-color:#ffd293; color:#ffe0a8; background:linear-gradient(135deg, rgba(243, 168, 83, .18), rgba(116, 170, 235, .17)); box-shadow:0 0 14px rgba(255, 204, 137, .10) inset, 0 0 12px rgba(255, 204, 137, .08); }
.primary-button, .secondary-button { width:100%; position:relative; overflow:hidden; cursor:pointer; font-size:11px; font-weight:900; letter-spacing:.13em; transition:.18s ease; padding:14px 17px; }
.primary-button { border:1px solid var(--aqua); background:linear-gradient(90deg, rgba(32, 160, 199, .32), rgba(38, 78, 193, .34)); color:#f1ffff; box-shadow:0 0 19px rgba(73, 226, 255, .15) inset, 0 0 18px rgba(74, 221, 255, .08); }.primary-button::before { content:""; position:absolute; top:0; bottom:0; width:20%; left:-28%; transform:skewX(-20deg); background:rgba(255,255,255,.3); transition:.35s ease; }.primary-button:hover { transform:translateY(-1px); background:linear-gradient(90deg, rgba(38, 207, 237, .43), rgba(56, 104, 230, .42)); box-shadow:0 0 24px rgba(86, 231, 255, .32); }.primary-button:hover::before { left:113%; }.primary-button span, .secondary-button span { position:relative; }.primary-button kbd, .secondary-button kbd { position:absolute; right:13px; top:50%; transform:translateY(-50%); }
.secondary-button { border:1px solid rgba(158, 202, 220, .34); background:rgba(5, 13, 24, .52); color:#c9e1ea; box-shadow:0 0 16px rgba(13, 43, 62, .16) inset; }.secondary-button:hover { transform:translateY(-1px); border-color:rgba(255, 195, 143, .78); color:#ffe0b8; background:rgba(65, 39, 23, .42); box-shadow:0 0 18px rgba(255, 176, 111, .10) inset; }
.pause-actions { display:grid; gap:9px; }
kbd { display:inline-block; color:var(--aqua); border:1px solid rgba(139, 237, 255, .43); background:rgba(255,255,255,.05); padding:2px 4px; border-radius:2px; font-size:9px; line-height:1; letter-spacing:.08em; }
.controls-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; margin:18px 0 13px; }.controls-grid div { min-height:42px; padding:6px 2px; border:1px solid rgba(124, 219, 245, .12); background:rgba(0,0,0,.13); text-align:center; }.controls-grid kbd { font-size:7px; }.controls-grid span { display:block; margin-top:6px; color:rgba(203, 239, 252, .47); font-size:7px; letter-spacing:.07em; }
.fine-print { color:rgba(199, 236, 249, .37); text-align:center; font-size:8px; line-height:1.45; letter-spacing:.06em; }
.compact { width:min(90vw, 390px); text-align:center; padding:31px 31px 26px; }.compact h2 { margin:8px 0 9px; font-size:30px; font-style:italic; letter-spacing:-.04em; }.compact p { color:#aec8d6; line-height:1.55; font-size:13px; margin:0 0 18px; }.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(119, 225, 255, .17); margin:18px 0; }.result-grid div { background:rgba(4, 12, 24, .75); padding:12px 5px; }.result-grid span { display:block; color:rgba(205, 243, 255, .52); font-size:8px; letter-spacing:.14em; }.result-grid strong { display:block; margin-top:4px; color:var(--aqua); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:25px; }
#footer-note { position:fixed; z-index:4; right:18px; bottom:17px; pointer-events:none; color:rgba(204, 241, 255, .35); font-size:8px; letter-spacing:.13em; }

@media (max-width: 760px) {
  #hud { top:8px; left:8px; right:8px; gap:6px; grid-template-columns:1fr 1fr; }.objective-module { display:none; }.identity-module { width:auto; }.score-module { width:auto; }.hud-module { padding:7px 8px; min-height:53px; }.identity-title {font-size:16px}.identity-sub{font-size:6px}.module-label{font-size:7px}#score-value{font-size:20px}.score-bottom{font-size:7px}.score-bottom{gap:5px}
  #combat-panel { left:8px; bottom:13px; width:226px; padding:8px; }.aux-readout span:last-child{display:none}.vital-row{font-size:7px}.vital-row strong{font-size:9px}.meter{height:5px;margin-bottom:7px}
  .screen-card { padding:25px 19px 20px; }.screen-card .eyebrow { font-size:8px; } h1 {font-size:59px}.title-number{font-size:38px}.pitch{font-size:12px;margin:12px 0 18px}.controls-grid{grid-template-columns:repeat(3,1fr);}.operation-buttons{grid-template-columns:1fr 1fr;}.fine-print{font-size:7px}.difficulty{min-height:48px}.difficulty span{font-size:9px}.difficulty small{font-size:6px}
  #footer-note{display:none}
}