*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#04020e}
canvas{display:block;width:100vw;height:100vh;cursor:crosshair}
.hud{position:fixed;bottom:14px;right:14px;z-index:10;pointer-events:none;display:grid;grid-template-columns:repeat(5,auto);gap:5px;padding:7px;border-radius:12px;background:rgba(7,12,28,0.35);border:1px solid rgba(108,232,255,0.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:"Segoe UI",system-ui,sans-serif;color:rgba(200,220,240,0.72)}
.hud-item{padding:3px 6px;border-radius:6px;background:rgba(5,11,20,0.25);border:1px solid rgba(108,232,255,0.04);min-width:52px}
.hud-item .tag{color:rgba(108,232,255,0.72);font-size:0.38rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase}
.hud-item--stability{border-color:rgba(255,170,120,0.14)}
.hud-item--stability .tag{color:rgba(255,180,135,0.8)}
.hud-item--evolution{border-color:rgba(127,240,197,0.1)}
.hud-item--evolution .tag{color:rgba(127,240,197,0.8)}
.hud-item--beacons{border-color:rgba(200,160,255,0.1)}
.hud-item--beacons .tag{color:rgba(200,160,255,0.8)}
.hud-item--resonance{border-color:rgba(118,204,255,0.14)}
.hud-item--resonance .tag{color:rgba(118,204,255,0.82)}
.hud-item--score{border-color:rgba(255,217,122,0.14)}
.hud-item--score .tag{color:rgba(255,225,144,0.84)}
.hud-item--momentum{border-color:rgba(255,133,188,0.14)}
.hud-item--momentum .tag{color:rgba(255,168,206,0.84)}
.hud-value{color:rgba(240,247,255,0.9);font-size:0.58rem;font-weight:700}
.brand{position:fixed;top:14px;left:14px;z-index:10;pointer-events:none;font-family:Georgia,serif}
.brand h1{font-size:clamp(0.8rem,1.1vw,1.1rem);font-weight:700;color:rgba(235,245,255,0.85);text-shadow:0 0 12px rgba(108,180,255,0.2)}
.brand p{font-size:0.48rem;color:rgba(180,210,240,0.4);margin-top:2px}
.brand .brand-mark{font-size:clamp(0.8rem,1.1vw,1.1rem);font-weight:700;color:rgba(235,245,255,0.85);text-shadow:0 0 12px rgba(108,180,255,0.2)}
.brand .brand-copy{font-size:0.48rem;color:rgba(180,210,240,0.4);margin-top:2px}
.brand .brand-user{font-size:0.5rem;color:rgba(180,220,255,0.6);margin-top:4px}
.brand .brand-logout{color:rgba(255,160,120,0.7);margin-left:6px;text-decoration:none;font-size:0.45rem}
.brand .brand-logout:hover{color:rgba(255,180,140,1)}
.ui-hidden{opacity:0;transition:opacity 1s}
.directive{position:fixed;top:54px;left:14px;z-index:10;max-width:min(340px,calc(100vw - 28px));padding:10px 12px;border-radius:16px;background:rgba(6,12,24,0.32);border:1px solid rgba(255,155,92,0.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Segoe UI",system-ui,sans-serif;color:rgba(236,242,255,0.9);opacity:0;transform:translateY(-8px);transition:opacity 1s,transform 1s}
.directive.show{opacity:1;transform:translateY(0)}
.directive-kicker{font-size:0.42rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,179,123,0.76)}
.directive-title{margin-top:5px;font-size:0.92rem;font-weight:700;line-height:1.1}
.directive-body{margin-top:6px;font-size:0.64rem;line-height:1.38;color:rgba(204,221,246,0.74)}
.directive-meta{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.directive-chip{padding:4px 8px;border-radius:999px;font-size:0.48rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);color:rgba(210,224,248,0.7)}
.archive{position:fixed;top:54px;right:14px;z-index:10;width:min(268px,calc(100vw - 28px));padding:10px 12px;border-radius:16px;background:rgba(6,12,24,0.32);border:1px solid rgba(136,214,255,0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Segoe UI",system-ui,sans-serif;color:rgba(236,242,255,0.9);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity 0.8s,transform 0.8s}
.archive.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.archive-kicker{font-size:0.42rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:rgba(145,220,255,0.76)}
.archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.archive-stat{padding:7px 8px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04)}
.archive-label{display:block;font-size:0.42rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(182,207,234,0.55)}
.archive-value{display:block;margin-top:3px;font-size:0.82rem;font-weight:800;color:rgba(242,247,255,0.95)}
.archive-history,.archive-run,.archive-modifiers{margin-top:8px;font-size:0.56rem;line-height:1.42;color:rgba(199,217,241,0.68)}
.archive-run,.archive-modifiers{margin-top:6px}
.leaderboard{position:fixed;bottom:80px;right:14px;z-index:10;width:min(268px,calc(100vw - 28px));padding:10px 12px;border-radius:16px;background:rgba(6,12,24,0.32);border:1px solid rgba(255,200,100,0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Segoe UI",system-ui,sans-serif;color:rgba(236,242,255,0.9);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity 0.8s,transform 0.8s}
.leaderboard.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.leaderboard-kicker{font-size:0.42rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,210,130,0.76)}
.leaderboard-tabs{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.lb-tab{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:999px;padding:3px 8px;font-size:0.44rem;font-weight:700;color:rgba(200,216,240,0.6);cursor:pointer;transition:border-color 0.2s,color 0.2s}
.lb-tab:hover{border-color:rgba(255,210,130,0.3);color:rgba(255,230,180,0.85)}
.lb-tab.active{border-color:rgba(255,200,100,0.35);color:rgba(255,230,180,0.95);background:rgba(255,200,100,0.08)}
.leaderboard-list{margin-top:8px;font-size:0.54rem;line-height:1.5;color:rgba(199,217,241,0.75)}
.lb-row{display:flex;gap:6px;padding:2px 0;align-items:baseline}
.lb-rank{font-weight:800;color:rgba(255,210,130,0.8);min-width:24px}
.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-metric{font-weight:700;color:rgba(200,230,255,0.9)}
.nav-links{position:fixed;top:14px;right:14px;z-index:10;display:flex;gap:5px}
.nav-links a{color:rgba(220,240,255,0.7);text-decoration:none;font-size:0.58rem;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:rgba(6,12,24,0.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color 0.2s,background 0.2s}
.nav-links a:hover{border-color:rgba(108,232,255,0.3);background:rgba(108,232,255,0.06)}
.hint{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;font-family:"Segoe UI",system-ui,sans-serif;font-size:0.6rem;color:rgba(200,220,240,0.5);text-align:center;padding:4px 12px;border-radius:999px;background:rgba(7,14,28,0.3);border:1px solid rgba(108,232,255,0.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity 1.5s}
.hint.hide{opacity:0}
.reflection{position:fixed;bottom:14px;left:14px;z-index:10;pointer-events:none;max-width:min(260px,38vw);padding:8px 10px;border-radius:12px;background:rgba(7,14,28,0.3);border:1px solid rgba(127,240,197,0.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:Georgia,serif;transition:opacity 0.8s}
.reflection-kicker{font-size:0.42rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:rgba(127,240,197,0.7);font-family:"Segoe UI",system-ui,sans-serif}
.reflection-text{font-size:clamp(0.6rem,0.2vw+0.56rem,0.74rem);line-height:1.22;color:rgba(238,246,255,0.88);margin-top:3px}
.event-toast{position:fixed;left:50%;bottom:112px;transform:translate(-50%,10px);z-index:20;min-width:min(360px,calc(100vw - 28px));max-width:min(460px,calc(100vw - 28px));padding:10px 14px;border-radius:999px;background:rgba(255,137,80,0.14);border:1px solid rgba(255,170,120,0.18);font-family:"Segoe UI",system-ui,sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-align:center;color:rgba(255,232,215,0.92);opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity 0.35s,transform 0.35s}
.event-toast.show{opacity:1;transform:translate(-50%,0)}
.ability-dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);z-index:25;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity 0.6s,transform 0.6s}
.ability-dock.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ability-row{display:flex;gap:10px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.ability-card{display:flex;flex-direction:column;align-items:center;gap:6px}
.ability-button{min-width:min(240px,calc(100vw - 28px));padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.09);background:rgba(8,14,28,0.8);color:rgba(240,247,255,0.94);cursor:pointer;font-family:"Segoe UI",system-ui,sans-serif;display:flex;justify-content:space-between;gap:12px;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ability-button[data-state="ready"]{border-color:rgba(255,215,142,0.36);box-shadow:0 0 0 1px rgba(255,215,142,0.08) inset}
.ability-button[data-state="active"],.ability-button[data-state="armed"]{border-color:rgba(123,231,255,0.42);background:rgba(10,25,42,0.88)}
.ability-button[data-state="cooldown"]{opacity:0.72}
.ability-button:disabled{cursor:default}
.ability-name{font-size:0.64rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase}
.ability-state{font-size:0.62rem;font-weight:700;color:rgba(255,225,164,0.92)}
.ability-copy{font-family:"Segoe UI",system-ui,sans-serif;font-size:0.54rem;color:rgba(203,219,241,0.66);background:rgba(6,12,24,0.34);padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.05)}
.start-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 42%,rgba(40,60,120,0.16),transparent 30%),linear-gradient(180deg,rgba(6,4,26,0.97),rgba(4,2,14,0.95));transition:opacity 1.5s ease-out;cursor:pointer}
.start-screen.hiding{opacity:0;pointer-events:none}
.start-screen.hidden{display:none}
.start-title{font-family:Georgia,serif;font-size:clamp(1.5rem,3.8vw,3rem);color:rgba(140,200,255,0.92);text-shadow:0 0 30px rgba(80,160,255,0.3),0 0 60px rgba(60,120,220,0.15);letter-spacing:0.06em;margin-bottom:0.5rem;opacity:0;animation:fadeInUp 2s 0.5s forwards}
.start-sub{font-family:Georgia,serif;font-size:clamp(0.65rem,1.3vw,0.95rem);color:rgba(200,220,240,0.48);letter-spacing:0.1em;margin-bottom:2.5rem;text-align:center;max-width:460px;line-height:1.4;opacity:0;animation:fadeInUp 1.5s 1.8s forwards}
.start-prompt{font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(0.5rem,0.9vw,0.7rem);color:rgba(200,220,240,0.32);letter-spacing:0.08em;opacity:0;animation:fadeInUp 1s 3s forwards,pulse 2s 4s infinite}
.end-screen{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.45s;background:radial-gradient(circle at 50% 38%,rgba(108,180,255,0.18),transparent 26%),rgba(4,2,14,0.76)}
.end-screen.show{opacity:1;pointer-events:auto}
.end-card{width:min(560px,calc(100vw - 32px));padding:22px 22px 20px;border-radius:24px;background:linear-gradient(180deg,rgba(8,12,28,0.92),rgba(7,11,22,0.86));border:1px solid rgba(255,255,255,0.08);box-shadow:0 18px 80px rgba(0,0,0,0.35);text-align:center;font-family:"Segoe UI",system-ui,sans-serif}
.end-kicker{font-size:0.5rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:rgba(150,210,255,0.7)}
.end-title{margin-top:8px;font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;color:rgba(241,247,255,0.96)}
.end-body{margin-top:10px;font-size:0.74rem;line-height:1.48;color:rgba(203,219,241,0.78)}
.end-stats{margin-top:14px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.end-pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);font-size:0.56rem;color:rgba(224,233,248,0.86)}
.end-history{margin-top:12px;font-size:0.6rem;line-height:1.44;color:rgba(198,216,240,0.68)}
.end-button{margin-top:18px;padding:10px 16px;border:none;border-radius:999px;cursor:pointer;background:linear-gradient(135deg,rgba(124,214,255,0.96),rgba(255,171,120,0.96));color:#08111b;font-size:0.72rem;font-weight:800;letter-spacing:0.04em}
.end-button:hover{filter:brightness(1.04)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:0.32}50%{opacity:0.65}}
@media (max-width:720px){
  .nav-links{top:auto;bottom:14px;left:14px;right:auto}
  .directive{top:72px;left:12px;right:12px;max-width:none}
  .archive{top:210px;left:12px;right:12px;width:auto}
  .reflection{left:12px;right:12px;bottom:128px;max-width:none}
  .event-toast{bottom:176px}
  .hud{left:12px;right:12px;bottom:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hud-item{min-width:0}
  .brand{top:12px;left:12px}
  .hint{top:auto;bottom:228px;left:12px;right:12px;transform:none}
  .ability-dock{bottom:158px}
  .ability-row{width:calc(100vw - 24px)}
  .ability-card,.ability-button{width:100%}
}