@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');

#crosshair,
#tip,
#quote,
#mission {
    pointer-events: none
}

:root {
    color-scheme: dark;
    --cream: #eee5cc;
    --gold: #cfa963;
    --red: #ea5944
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #101614;
    color: var(--cream);
    font-family: Barlow, Arial, sans-serif;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-image: radial-gradient(ellipse at top, #24372f, transparent 65%)
}

#game-shell {
    width: min(1200px, 96vw);
    margin: 24px auto
}

header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #4a5144;
    font-size: 11px;
    letter-spacing: 2px
}

header .brand {
    color: var(--cream);
    font-size: 21px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 1px
}

header b {
    color: var(--gold);
    padding: 0 12px
}

button {
    cursor: pointer;
    font: 700 13px Barlow, Arial, sans-serif;
    letter-spacing: 1.5px;
    border: 1px solid #636858;
    background: none;
    color: var(--cream);
    padding: 12px 18px
}

button:hover {
    background: #e7c27c;
    color: #17251e
}

#viewport {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #24332c;
    border: 1px solid #72715b
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated
}

#overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 23, 19, .96), rgba(10, 23, 19, .82) 42%, rgba(10, 23, 19, .08));
    display: flex;
    align-items: center
}

.menu {
    padding: 4% 6%;
    width: 75%
}

.eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 20px
}

h1 {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(45px, 8vw, 108px);
    line-height: .8;
    letter-spacing: -2px;
    margin: 0;
    font-weight: 900;
    text-shadow: 4px 4px #162922
}

h1>span {
    display: block;
    color: var(--red)
}

h1 .star {
    font-size: .65em;
    margin-left: 18px;
    color: var(--gold)
}

.subtitle {
    letter-spacing: 6px;
    font-size: 13px;
    font-weight: bold;
    margin: 22px 0
}

.menu p {
    font-size: 14px;
    line-height: 1.7;
    color: #c0c4b5
}

.menu #start {
    background: var(--red);
    color: #101e19;
    border: 0;
    padding: 18px 24px;
    margin-top: 12px;
    min-width: 270px;
    text-align: left
}

.menu #start span {
    float: right
}

.menu-meta {
    font-size: 9px;
    letter-spacing: 1px;
    border-top: 1px solid #596253;
    margin-top: 28px;
    padding-top: 15px;
    max-width: 400px
}

.menu-meta span {
    float: right;
    color: var(--gold)
}

.menu .advisory {
    font-size: 10px;
    color: #828e80
}

#hud {
    display: flex;
    min-height: 112px;
    background: #1b2924;
    border: 1px solid #626951;
    border-top: 0;
    padding: 17px 28px;
    gap: 30px;
    align-items: center
}

.stat {
    flex: 1
}

.stat small {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #a9b09c
}

.stat strong {
    display: block;
    font: 700 42px 'Barlow Condensed', Impact, sans-serif;
    line-height: 1.25
}

.stat em {
    font: 600 11px Barlow, Arial;
    margin-left: 8px;
    color: #9ca695
}

.stat.ammo {
    flex: 1.6
}

.meter {
    height: 3px;
    background: #3a4538
}

.meter i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--red)
}

.blue .meter i {
    background: #83b3b9;
    width: 0
}

.portrait {
    text-align: center;
    position: relative;
    width: 68px;
    height: 76px;
    border: 1px solid #65745b;
    background: #3e5346
}

.portrait img {
    height: 66px;
    image-rendering: pixelated
}

.portrait span {
    position: absolute;
    bottom: -6px;
    left: 7px;
    right: 7px;
    font-size: 9px;
    letter-spacing: 2px;
    background: #c7b67f;
    color: #18251e;
    font-weight: bold
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 0;
    font-size: 9px;
    color: #969f8d;
    letter-spacing: 1px
}

kbd {
    font: 10px Arial;
    color: #d1d4bf;
    border: 1px solid #465244;
    padding: 4px;
    margin-right: 5px
}

#mission {
    position: absolute;
    top: 20px;
    left: 22px;
    text-shadow: 1px 2px #000;
    display: none
}

#mission small {
    display: block;
    color: #d4b875;
    letter-spacing: 2px;
    font-size: 9px
}

#objective {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 7px
}

#crosshair {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 24px monospace;
    color: #f3edc4
}

#tip {
    position: absolute;
    left: 0;
    right: 0;
    top: 63%;
    text-align: center;
    color: #ffe29a;
    font-size: 13px;
    text-shadow: 1px 2px #000
}

#quote {
    position: absolute;
    bottom: 24px;
    left: 10%;
    right: 10%;
    text-align: center;
    font: 800 21px 'Barlow Condensed', Impact, sans-serif;
    color: #fff2ca;
    text-shadow: 2px 2px #000
}

#damage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 100px #f22;
    opacity: 0
}

#pause {
    position: absolute;
    inset: 0;
    background: #102019e8;
    text-align: center;
    padding-top: 15%
}

#pause h2 {
    font: 60px Impact;
    margin: 0
}

#pause[hidden] {
    display: none
}

@media(max-width:700px) {
    header>span {
        display: none
    }

    #hud {
        gap: 12px;
        padding: 12px
    }

    .stat strong {
        font-size: 28px
    }

    .stat small {
        font-size: 8px
    }

    .portrait {
        display: none
    }

    footer {
        flex-wrap: wrap
    }

    .menu {
        width: 95%
    }

    .eyebrow,
    .menu-meta,
    .advisory {
        display: none
    }

    .subtitle {
        margin: 12px 0;
        font-size: 10px
    }

    .menu p {
        font-size: 11px
    }

    .menu #start {
        padding: 12px;
        margin: 0
    }

    #quote {
        font-size: 16px
    }
}

/* Mobile game surface and independent multi-touch controls. */
#touch-controls[hidden],
#rotate-hint[hidden] {
    display: none
}

#touch-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

#touch-controls>* {
    pointer-events: auto;
    touch-action: none
}

#move-pad {
    position: absolute;
    left: max(20px, env(safe-area-inset-left));
    bottom: 20px;
    width: 116px;
    height: 116px;
    border: 2px solid #eee5cc66;
    border-radius: 50%;
    background: #14282066;
    display: grid;
    place-items: center
}

#move-stick {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eee5cc66;
    border: 1px solid #eee5cc
}

#move-pad small {
    position: absolute;
    bottom: 8px;
    font-size: 9px;
    pointer-events: none
}

#look-pad {
    position: absolute;
    left: 40%;
    right: 0;
    top: 55px;
    bottom: 0;
    background: transparent
}

#look-pad small {
    position: absolute;
    top: 12px;
    right: 30px;
    color: #eee5cc66;
    font-size: 9px;
    pointer-events: none
}

#touch-controls button {
    position: absolute;
    background: #152c24b3;
    border: 1px solid #f1d29a99;
    border-radius: 12px;
    min-width: 52px;
    min-height: 48px;
    padding: 10px;
    font-size: 11px
}

#touch-controls #touch-fire {
    right: max(24px, env(safe-area-inset-right));
    bottom: 22px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #aa443ac9
}

#touch-use {
    right: 115px;
    bottom: 30px
}

#touch-weapon {
    right: 24px;
    bottom: 110px
}

#touch-pause {
    left: 48%;
    top: 8px
}

#rotate-hint {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #102019f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px
}

#pause,
#overlay {
    z-index: 5
}

.touch-device #viewport {
    touch-action: none
}

.touch-device footer {
    display: none
}

.touch-device #game-shell {
    width: 100%;
    margin: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right)
}

.touch-device header {
    height: 40px;
    padding: 0 12px
}

.touch-device header>span {
    display: none
}

.touch-device header button {
    padding: 8px
}

.touch-device #hud {
    min-height: 56px;
    height: 56px;
    padding: 5px 14px;
    gap: 15px
}

.touch-device .portrait {
    display: none
}

.touch-device .stat strong {
    font-size: 25px
}

.touch-device .stat small {
    font-size: 8px
}

.touch-device .stat em {
    font-size: 9px
}

.touch-device #quote {
    bottom: 9px;
    left: 23%;
    right: 23%;
    font-size: 16px
}

.touch-device #mission {
    top: 10px;
    left: 12px
}

.touch-device #objective {
    font-size: 11px
}

.touch-device #tip {
    top: 57%;
    font-size: 11px
}

@media(orientation:landscape) {
    .touch-device #game-shell {
        height: 100dvh;
        display: flex;
        flex-direction: column
    }

    .touch-device header,
    .touch-device #hud {
        flex-shrink: 0
    }

    .touch-device #viewport {
        flex: 1;
        min-height: 0;
        aspect-ratio: auto
    }

    .touch-device .menu {
        padding: 12px 5%
    }

    .touch-device h1 {
        font-size: clamp(40px, 13vh, 76px)
    }

    .touch-device .menu-meta,
    .touch-device .eyebrow,
    .touch-device .advisory {
        display: none
    }

    .touch-device .subtitle {
        margin: 10px 0
    }

    .touch-device .menu p {
        font-size: 11px;
        margin: 6px 0
    }

    .touch-device .menu #start {
        padding: 12px;
        margin: 4px 0
    }

    .touch-device #pause {
        padding-top: 7%
    }
}

@media(orientation:portrait) {
    .touch-device #viewport {
        height: 70dvh;
        aspect-ratio: auto
    }
}
/* Scorecards and illustrated scenes remain usable on small landscape screens. */
#score-strip{display:flex;justify-content:space-between;gap:16px;padding:8px 18px;background:#112a2d;color:#a8bbb6;font:12px monospace;flex-shrink:0}
#score-strip b{color:#f6dc94;margin-left:8px}
#intermission{position:absolute;inset:0;z-index:50;background:#101e29;overflow:auto;color:#f7f2e5;isolation:isolate}
#intermission[hidden],#intermission [hidden]{display:none!important}
#scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#intermission::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,15,23,.97),rgba(5,15,23,.25));z-index:-1;pointer-events:none}
.intermission-content{min-height:100%;box-sizing:border-box;padding:clamp(16px,4vw,44px);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
#intermission-label{color:#8feaf1;letter-spacing:3px;font:11px monospace}
#intermission-title{font-size:clamp(20px,3vw,34px);margin:10px 0;line-height:1.15}
#scene-text{max-width:650px;font-size:clamp(14px,2vw,19px);line-height:1.55;text-shadow:0 2px 8px #000}
#stage-stats{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 20px}
#stage-stats div{padding:12px;background:#16313be8;border:1px solid #45616a}
#stage-stats dt{font:11px monospace;color:#aac7cd;margin-bottom:8px}
#stage-stats dd{font:bold clamp(16px,2.5vw,26px) monospace;margin:0;color:#ffe2a0}
.intermission-actions{display:flex;gap:12px;flex-wrap:wrap}
.intermission-actions button{padding:12px 20px;cursor:pointer}
#intermission-skip{background:#233d49;color:#e4eff1;border:1px solid #648089}
.intermission-actions button:focus-visible{outline:3px solid #70efff;outline-offset:3px}
@media(max-width:600px){#stage-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px){.intermission-content{padding:14px 20px}#stage-stats{gap:6px;margin:8px 0}#stage-stats div{padding:6px}#stage-stats dt{margin-bottom:3px}#intermission-title{font-size:20px;margin:5px 0}#scene-text{margin:8px 0}.intermission-actions button{padding:8px 14px}}

#boss-hud {
    position: absolute;
    bottom: 24%;
    left: 25%;
    width: 50%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#boss-hud[hidden] {
    display: none !important;
}

.boss-row {
    padding: 7px 10px;
    background: #190d22d9;
    color: #ffd5db;
    font: 12px monospace;
    border: 1px solid #da657c;
}

.boss-row.miniboss {
    padding: 4px 8px;
    color: #ffe6ae;
    border-color: #b58d45;
    font-size: 10px;
}

.boss-health {
    float: right;
}

.boss-track {
    height: 7px;
    background: #3f2539;
    margin-top: 5px;
}

.boss-track i {
    display: block;
    height: 100%;
    background: #ee5f7c;
}

.miniboss .boss-track {
    height: 4px;
}

.miniboss .boss-track i {
    background: #e5ad4a;
}

@media (max-width: 600px) {
    #boss-hud {
        left: 15%;
        width: 70%;
    }

    .boss-row {
        font-size: 9px;
        padding: 4px 6px;
    }
}