.gl-root {
    --gl-teal: #3ed8c8;
    --gl-teal-deep: #187f84;
    --gl-gold: #f1b94f;
    --gl-coral: #ef7059;
    --gl-ink: #edfdf8;
    --gl-panel: rgba(8, 25, 31, .86);
    width: min(100%, 1040px);
    margin: 0 auto;
    color: var(--gl-ink);
    font-family: var(--font-body, "Zen Maru Gothic", sans-serif);
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: contain;
}
.gl-root *, .gl-root *::before, .gl-root *::after { box-sizing: border-box; }
.gl-root button { font: inherit; }
.gl-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(130, 222, 206, .28);
    border-radius: 18px;
    background: #071d26;
    box-shadow: 0 26px 70px -36px rgba(9, 46, 48, .78), inset 0 0 0 1px rgba(255,255,255,.04);
}
.gl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    outline: none;
    touch-action: none;
}
.gl-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gl-gold); }
.gl-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.gl-overlay[hidden], .gl-hud[hidden], .gl-boss-hud[hidden], .gl-combo[hidden],
.gl-weapon[hidden], .gl-message[hidden], .gl-skip-hint[hidden] { display: none !important; }

/* Start / story presentation */
.gl-start { place-items: stretch; background: #081c24; }
.gl-keyart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gl-start-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 16, 23, .96) 0%, rgba(3, 16, 23, .82) 32%, rgba(3, 16, 23, .1) 67%, rgba(3, 16, 23, .32) 100%),
        linear-gradient(0deg, rgba(3, 16, 23, .76), transparent 42%);
}
.gl-start-content {
    position: relative;
    z-index: 2;
    width: min(51%, 500px);
    align-self: center;
    padding: clamp(24px, 5vw, 58px);
    text-shadow: 0 3px 18px rgba(0,0,0,.8);
}
.gl-eyebrow {
    margin: 0 0 8px;
    color: #9bf3df;
    font: 800 clamp(.58rem, 1.15vw, .76rem) / 1.2 var(--font-score, monospace);
    letter-spacing: .19em;
}
.gl-start h2 {
    margin: 0;
    color: #fffaf0;
    font: 900 clamp(1.8rem, 5vw, 4rem) / 1.02 var(--font-display, sans-serif);
    letter-spacing: -.05em;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.gl-start h2 span { color: var(--gl-gold); }
.gl-subtitle { max-width: 29rem; margin: 13px 0 18px; color: #e6f5ee; font-size: clamp(.75rem, 1.45vw, 1rem); line-height: 1.65; font-weight: 700; }
.gl-feature-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.gl-feature-list span {
    padding: 5px 9px;
    border: 1px solid rgba(112, 230, 210, .35);
    border-radius: 99px;
    background: rgba(4, 27, 32, .72);
    color: #bff8ec;
    font: 700 clamp(.5rem, .95vw, .66rem) / 1 var(--font-score, monospace);
    letter-spacing: .1em;
}
.gl-primary, .gl-secondary {
    min-width: 190px;
    min-height: 50px;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 900;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.gl-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 10px 20px;
    color: #09282c;
    background: linear-gradient(135deg, #ffdf7d, var(--gl-gold) 58%, #e5903e);
    box-shadow: 0 10px 28px rgba(241, 185, 79, .3), inset 0 1px rgba(255,255,255,.7);
}
.gl-primary b, .gl-primary small { display: block; }
.gl-primary small { font: 700 .58rem/1 var(--font-score, monospace); letter-spacing: .08em; }
.gl-secondary { color: #d6f5ec; background: rgba(34, 75, 78, .65); border: 1px solid rgba(113, 221, 204, .25); }
.gl-primary:hover, .gl-secondary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gl-primary:active, .gl-secondary:active { transform: translateY(1px) scale(.985); }
.gl-login-note { min-height: 1.2em; margin: 11px 0 0; color: rgba(229, 246, 239, .82); font-size: clamp(.58rem, 1vw, .72rem); }

/* HUD */
.gl-hud {
    position: absolute;
    z-index: 8;
    inset: 13px 14px auto;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(110px, 1fr);
    gap: 14px;
    align-items: start;
    pointer-events: none;
}
.gl-player-status { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gl-portrait {
    position: relative;
    width: clamp(38px, 5.5vw, 54px);
    aspect-ratio: 1;
    flex: none;
    border: 2px solid rgba(255, 222, 128, .78);
    border-radius: 15px 5px 15px 5px;
    overflow: hidden;
    background: radial-gradient(circle at 66% 24%, #84f0de 0, #267c7e 38%, #0b3038 78%);
    box-shadow: 0 4px 14px rgba(0,0,0,.38);
}
.gl-portrait::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 12px rgba(6, 22, 28, .58), inset 0 0 0 1px rgba(255,255,255,.1); }
.gl-portrait img {
    position: absolute;
    top: -13%;
    left: -53%;
    width: 835%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
    pointer-events: none;
}
.gl-bars { width: min(30vw, 300px); min-width: 150px; padding: 8px 10px; border: 1px solid rgba(164, 234, 217, .2); border-radius: 10px; background: linear-gradient(90deg, rgba(4,20,27,.9), rgba(4,20,27,.64)); box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.gl-bar-row { display: grid; grid-template-columns: 37px minmax(80px, 1fr) 27px; align-items: center; gap: 6px; color: #d9f3eb; font: 700 clamp(.52rem, .85vw, .65rem)/1 var(--font-score, monospace); }
.gl-bar-row + .gl-bar-row { margin-top: 5px; }
.gl-bar-row b { text-align: right; }
.gl-bar { height: clamp(7px, 1.2vw, 11px); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(0,0,0,.42); }
.gl-bar i { display: block; width: 100%; height: 100%; transform-origin: left center; transition: transform .18s ease; }
.gl-health i { background: linear-gradient(90deg, #42d391, #c9ed61); box-shadow: 0 0 12px rgba(92, 226, 144, .5); }
.gl-energy i { background: linear-gradient(90deg, #28a8c4, #66f4e0); box-shadow: 0 0 12px rgba(74, 228, 218, .56); }
.gl-score-status { justify-self: center; min-width: 130px; padding: 8px 15px; text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; background: rgba(4, 20, 27, .74); box-shadow: 0 5px 18px rgba(0,0,0,.25); }
.gl-score-status span, .gl-score-status small { display: block; color: #b8ded7; font: 700 clamp(.5rem, .85vw, .62rem)/1.2 var(--font-score, monospace); letter-spacing: .1em; }
.gl-score-status strong { display: block; margin: 1px 0 2px; color: #fff5c7; font: 900 clamp(1rem, 2.25vw, 1.55rem)/1 var(--font-score, monospace); }
.gl-hud-actions { justify-self: end; display: flex; gap: 6px; pointer-events: auto; }
.gl-hud-actions button {
    width: clamp(34px, 4vw, 42px); height: clamp(34px, 4vw, 42px); border: 1px solid rgba(255,255,255,.2); border-radius: 11px;
    color: #e9fff9; background: rgba(4,20,27,.76); cursor: pointer; font-weight: 900;
}
.gl-hud-actions button:hover { background: rgba(30, 103, 101, .9); }
.gl-boss-hud { position: absolute; z-index: 9; top: 82px; left: 50%; width: min(56%, 500px); transform: translateX(-50%); padding: 7px 12px; border: 1px solid rgba(92,239,220,.28); border-radius: 10px; background: rgba(3,18,24,.82); text-align: center; }
.gl-boss-hud span { display: block; margin-bottom: 4px; color: #d9fff5; font-size: clamp(.58rem, 1.2vw, .78rem); font-weight: 900; letter-spacing: .08em; }
.gl-boss-hud div { height: 9px; overflow: hidden; border-radius: 99px; background: #13262d; }
.gl-boss-hud i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg,#1fd0c0,#efd25d,#ee685b); transition: transform .2s; }
.gl-combo { position: absolute; z-index: 9; right: 4.5%; top: 27%; display: flex; align-items: flex-end; gap: 5px; transform: rotate(-5deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.gl-combo strong { color: #fff08d; font: 900 clamp(2rem, 6vw, 4.6rem)/.8 var(--font-score, monospace); -webkit-text-stroke: 1px #8c4c27; }
.gl-combo span { color: #fff; font: 900 clamp(.5rem, 1.2vw, .8rem)/1 var(--font-score, monospace); letter-spacing: .1em; }
.gl-combo.is-popping { animation: gl-pop .18s ease-out; }
.gl-weapon { position: absolute; z-index: 9; left: 3%; bottom: 7%; padding: 7px 11px; border: 1px solid rgba(255,213,111,.38); border-radius: 9px; background: rgba(5,22,27,.78); font: 700 clamp(.55rem, 1vw, .72rem)/1 var(--font-score, monospace); }
.gl-weapon i { display: block; height: 4px; margin-top: 5px; border-radius: 5px; background: repeating-linear-gradient(90deg,var(--gl-gold) 0 16px,transparent 16px 20px); }
.gl-message { position: absolute; z-index: 12; left: 50%; top: 43%; transform: translate(-50%,-50%); color: #fffbea; font: 900 clamp(1.2rem,4vw,3rem)/1 var(--font-display,sans-serif); letter-spacing: .04em; text-align: center; text-shadow: 0 4px 0 #12363b, 0 8px 24px rgba(0,0,0,.72); white-space: nowrap; }
.gl-message.is-warning { color: #ffbd69; animation: gl-warning .65s ease-in-out 2; }
.gl-skip-hint { position:absolute; z-index:22; right:16px; bottom:13px; padding:5px 9px; color:rgba(255,255,255,.72); background:rgba(0,0,0,.42); border-radius:7px; font-size:.62rem; }

/* Interstitial and menus */
.gl-briefing { background: radial-gradient(circle at 50% 40%, rgba(35, 138, 136, .34), transparent 42%), rgba(2,15,21,.9); }
.gl-brief-card, .gl-menu-card { width: min(86%, 510px); padding: clamp(24px, 5vw, 46px); text-align: center; border: 1px solid rgba(117,224,208,.26); border-radius: 20px; background: linear-gradient(145deg,rgba(8,36,42,.96),rgba(3,17,24,.96)); box-shadow: 0 25px 65px rgba(0,0,0,.46); }
.gl-brief-card h2, .gl-menu-card h2 { margin: 0 0 10px; color:#fff4cc; font:900 clamp(1.45rem,4vw,2.6rem)/1.2 var(--font-display,sans-serif); }
.gl-brief-card > p:not(.gl-eyebrow) { color:#c7e8de; }
.gl-stage-route { display:flex; justify-content:center; gap:12px; margin-top:22px; }
.gl-stage-route i { width:48px; height:5px; border-radius:99px; background:rgba(255,255,255,.18); }
.gl-stage-route i.is-current { background:var(--gl-gold); box-shadow:0 0 14px rgba(241,185,79,.5); }
.gl-paused { background:rgba(2,13,18,.78); backdrop-filter:blur(5px); }
.gl-menu-card { display:flex; flex-direction:column; align-items:center; gap:12px; }
.gl-result { padding:16px; background:radial-gradient(circle at 50% 35%,rgba(58,200,180,.24),transparent 44%),rgba(2,13,18,.9); backdrop-filter:blur(4px); }
.gl-result-card { position:relative; width:min(92%,660px); display:grid; grid-template-columns:130px 1fr; gap:18px 24px; align-items:center; padding:clamp(22px,4vw,42px); border:1px solid rgba(124,229,210,.28); border-radius:24px; background:linear-gradient(145deg,rgba(9,41,46,.97),rgba(4,18,27,.98)); box-shadow:0 28px 80px rgba(0,0,0,.48); }
.gl-grade { color:#ffe285; font:900 clamp(4.8rem,13vw,8rem)/.8 var(--font-score,monospace); text-align:center; text-shadow:0 5px 0 #9b5f32,0 0 28px rgba(255,214,100,.34); transform:rotate(-5deg); }
.gl-result-card h2 { margin:0; color:#f6fff9; font:900 clamp(1.2rem,3vw,2rem)/1.3 var(--font-display,sans-serif); }
.gl-result-score { margin-top:12px; }
.gl-result-score span { display:block; color:#9dcfc4; font:.62rem/1 var(--font-score,monospace); letter-spacing:.12em; }
.gl-result-score strong { display:block; color:#fff0a6; font:900 clamp(1.9rem,5vw,3rem)/1.1 var(--font-score,monospace); }
.gl-result-stats { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; }
.gl-result-stats div { padding:10px 8px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.04); text-align:center; }
.gl-result-stats dt { color:#8fc4ba; font-size:.62rem; }
.gl-result-stats dd { margin:3px 0 0; color:#fff; font:800 .9rem/1 var(--font-score,monospace); }
.gl-save { grid-column:1/-1; margin:0; padding:8px 11px; border-radius:9px; background:rgba(52,167,145,.16); color:#bff4e8; text-align:center; font-size:.75rem; }
.gl-save.is-error { background:rgba(217,87,75,.15); color:#ffc2b9; }
.gl-save.is-best { background:rgba(241,185,79,.16); color:#ffe59b; }
.gl-result-card > .gl-primary { grid-column:1/-1; justify-self:center; }

/* Touch controls */
.gl-touch { display:none; min-height:174px; grid-template-columns:minmax(130px,1fr) minmax(210px,1.25fr); align-items:center; gap:12px; padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); background:linear-gradient(180deg,#0d343a,#071e27); border-radius:0 0 17px 17px; touch-action:none; }
.gl-stick-zone { position:relative; height:142px; display:grid; place-items:center; touch-action:none; }
.gl-stick-zone > span { position:absolute; bottom:0; color:rgba(181,232,221,.55); font:.55rem/1 var(--font-score,monospace); letter-spacing:.14em; }
.gl-stick-base { position:relative; width:116px; height:116px; border:1px solid rgba(135,225,209,.25); border-radius:50%; background:radial-gradient(circle,rgba(62,216,200,.12),rgba(2,19,25,.56) 64%); box-shadow:inset 0 0 28px rgba(0,0,0,.4); }
.gl-stick-base::before,.gl-stick-base::after { content:''; position:absolute; left:50%; top:50%; background:rgba(176,231,220,.12); transform:translate(-50%,-50%); }
.gl-stick-base::before { width:76%; height:1px; }.gl-stick-base::after { width:1px; height:76%; }
.gl-stick-base i { position:absolute; left:50%; top:50%; width:54px; height:54px; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:linear-gradient(145deg,#348d8d,#17525e); box-shadow:0 6px 16px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.22); transform:translate(-50%,-50%); }
.gl-touch-actions { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:7px; }
.gl-touch-actions button { min-width:0; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#effffb; background:linear-gradient(145deg,#2c686d,#10353e); box-shadow:0 5px 12px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.18); touch-action:none; }
.gl-touch-actions button span { font:900 1.05rem/1 var(--font-score,monospace); }
.gl-touch-actions button b { font-size:.5rem; white-space:nowrap; }
.gl-touch-actions button.is-pressed { transform:scale(.91); filter:brightness(1.28); }
.gl-touch-light { height:82px!important; background:linear-gradient(145deg,#e6ae4d,#a35a32)!important; }
.gl-touch-heavy { background:linear-gradient(145deg,#d96f5c,#8d3942)!important; }
.gl-touch-dodge { background:linear-gradient(145deg,#538caf,#34496f)!important; }
.gl-touch-special { background:linear-gradient(145deg,#3fcbbb,#176c76)!important; }
.gl-mobile-guide { display:none; margin:7px 8px 0; color:#667d76; font-size:.66rem; text-align:center; }

.gl-root.is-focus { position:fixed; z-index:10000; inset:0; width:100%; max-width:none; display:grid; grid-template-rows:minmax(0,1fr) auto; align-content:center; padding:env(safe-area-inset-top) 0 0; background:#04141a; }
.gl-root.is-focus .gl-viewport { width:min(100%,calc((100svh - 182px) * 16 / 9)); max-height:calc(100svh - 182px); margin:auto; border:0; border-radius:0; }
.gl-root.is-focus .gl-touch { display:grid; width:100%; border-radius:0; }
.gl-root.is-focus .gl-mobile-guide { display:none; }
body.gl-focus-open { overflow:hidden; }

@keyframes gl-pop { 0%{transform:rotate(-5deg) scale(.72)} 70%{transform:rotate(-5deg) scale(1.18)} 100%{transform:rotate(-5deg) scale(1)} }
@keyframes gl-warning { 0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} }

@media (hover:none), (pointer:coarse), (max-width:900px) {
    .gl-touch { display:grid; }
    .gl-mobile-guide { display:block; }
    .gl-viewport { border-radius:0; }
    .gl-root { width:100%; max-width:none; }
}
@media (max-width:700px) {
    .gl-hud { inset:7px 7px auto; grid-template-columns:minmax(155px,1fr) auto; gap:6px; }
    .gl-score-status { display:none; }
    .gl-hud-actions { grid-column:2; }
    .gl-bars { width:min(48vw,240px); padding:6px 7px; }
    .gl-portrait { width:38px; }
    .gl-boss-hud { top:56px; width:72%; }
    .gl-start-content { width:66%; padding:22px; }
    .gl-subtitle { margin:8px 0 11px; line-height:1.4; }
    .gl-feature-list { margin-bottom:12px; }
    .gl-primary { min-width:155px; min-height:44px; }
    .gl-result-card { grid-template-columns:84px 1fr; gap:12px; padding:18px; }
    .gl-result-stats { grid-template-columns:1fr 1fr; }
    .gl-grade { font-size:4rem; }
}
@media (max-width:520px) {
    .gl-start-shade { background:linear-gradient(90deg,rgba(3,16,23,.94),rgba(3,16,23,.55) 70%,rgba(3,16,23,.28)),linear-gradient(0deg,rgba(3,16,23,.7),transparent); }
    .gl-start-content { width:76%; padding:16px; }
    .gl-start h2 { font-size:1.7rem; }
    .gl-subtitle { font-size:.66rem; }
    .gl-feature-list span:nth-child(3),.gl-feature-list span:nth-child(4) { display:none; }
    .gl-login-note { display:none; }
    .gl-touch { min-height:158px; grid-template-columns:122px 1fr; padding:8px 8px max(8px,env(safe-area-inset-bottom)); }
    .gl-stick-zone { height:130px; }.gl-stick-base{width:106px;height:106px;}
    .gl-touch-actions { gap:4px; }.gl-touch-actions button{height:61px;}.gl-touch-light{height:72px!important;}
    .gl-touch-actions button b { font-size:.43rem; }
    .gl-message { font-size:1.3rem; }
}
@media (max-width:420px) {
    .gl-touch { min-height:142px; grid-template-columns:104px minmax(0,1fr); gap:6px; padding:6px 6px max(7px,env(safe-area-inset-bottom)); }
    .gl-stick-zone { height:116px; }.gl-stick-base{width:94px;height:94px;}.gl-stick-base i{width:46px;height:46px;}
    .gl-touch-actions { gap:3px; }
    .gl-touch-actions button { height:54px; padding:1px; }
    .gl-touch-light { height:63px!important; }
    .gl-touch-actions button span { font-size:.92rem; }
    .gl-touch-actions button b { max-width:100%; overflow:hidden; font-size:.38rem; text-overflow:clip; }
    .gl-mobile-guide { margin-top:6px; padding:0 5px; font-size:.58rem; line-height:1.45; }
}
@media (max-height:520px) and (orientation:landscape) {
    .gl-root:not(.is-focus) { max-width:calc(100svh * 16 / 9); }
    .gl-root.is-focus { grid-template-columns:minmax(0,1fr) minmax(260px,34vw); grid-template-rows:1fr; }
    .gl-root.is-focus .gl-viewport { width:100%; max-height:100svh; }
    .gl-root.is-focus .gl-touch { height:100svh; min-height:0; grid-template-columns:1fr; grid-template-rows:1fr 1fr; padding:5px max(8px,env(safe-area-inset-right)) 5px 8px; }
    .gl-root.is-focus .gl-stick-zone { height:auto; }.gl-root.is-focus .gl-stick-base{width:100px;height:100px;}
    .gl-root.is-focus .gl-touch-actions { align-items:center; }
}
@media (prefers-reduced-motion:reduce) {
    .gl-root *, .gl-root *::before, .gl-root *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}