/* =========================================================
   SQUAD RUNNER - Styles
   Made for Shivanya's Game World
   Every section has a comment so it is easy to follow!
   ========================================================= */

/* Fun fonts from Google */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap');

/* ===== Colours we reuse everywhere =====
   Changing a colour here changes it on the whole page. */
:root {
    --army-blue: #4d7cf3;
    --army-dark: #16213e;
    --accent-gold: #ffd54f;
    --accent-green: #5ddc6f;
    --accent-red: #ff5b57;
    --text-light: #ffffff;
    --panel: rgba(10, 16, 32, 0.85);
}

/* ===== Base reset - clears the browser's default spacing ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Makes the Material Symbols icons look solid instead of outlined */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== Page background - a foggy battlefield sky ===== */
body {
    font-family: 'Nunito', sans-serif;
    min-height: 100vh;
    background: linear-gradient(180deg, #0b1220 0%, #16213e 55%, #1d2b4a 100%);
    display: flex;
    justify-content: center;
    padding: 10px;
    color: var(--text-light);
}

/* ===== The box that holds the whole game ===== */
.game-container {
    max-width: 920px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ===== Header at the top ===== */
header {
    text-align: center;
    width: 100%;
}

/* The link that goes back to the games list */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95em;
    margin-bottom: 6px;
    transition: opacity 0.2s;
}

.back-button:hover { opacity: 0.75; }

h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 1.9em;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

h1 .material-symbols-rounded { font-size: 34px; }

.subtitle {
    font-size: 0.95em;
    opacity: 0.8;
    margin-top: 2px;
}

/* ===== HUD - the little info boxes above the game ===== */
.hud {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.hud-box {
    background: var(--panel);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--text-light);
}

.hud-box .material-symbols-rounded { font-size: 20px; }

.hud-label {
    opacity: 0.65;
    font-weight: 700;
}

.hud-value {
    font-family: 'Fredoka One', cursive;
    font-size: 1.15em;
}

/* Give each HUD box its own colour so they are easy to tell apart */
.hud-box.squad  { border-color: rgba(77, 124, 243, 0.7); }
.hud-box.squad  .material-symbols-rounded { color: var(--army-blue); }
.hud-box.weapon { border-color: rgba(255, 213, 79, 0.7); }
.hud-box.weapon .material-symbols-rounded { color: var(--accent-gold); }
.hud-box.stage  { border-color: rgba(93, 220, 111, 0.7); }
.hud-box.stage  .material-symbols-rounded { color: var(--accent-green); }
.hud-box.coins  { border-color: rgba(255, 183, 77, 0.7); }
.hud-box.coins  .material-symbols-rounded { color: #ffb74d; }

/* The sound on/off button */
.sound-toggle {
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}

.sound-toggle:hover { border-color: rgba(255, 255, 255, 0.4); }

/* When the squad count jumps up we make the number pop */
.hud-value.pop {
    animation: popNumber 0.35s ease-out;
}

@keyframes popNumber {
    0%   { transform: scale(1);   color: var(--text-light); }
    40%  { transform: scale(1.6); color: var(--accent-green); }
    100% { transform: scale(1);   color: var(--text-light); }
}

/* ===== Progress bar showing how far we are through the stage ===== */
.progress-track {
    width: 100%;
    max-width: 900px;
    height: 14px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--army-blue), var(--accent-green));
    transition: width 0.15s linear;
}

.progress-flag {
    position: absolute;
    right: 2px;
    top: -5px;
    font-size: 18px;
    color: var(--accent-gold);
}

/* ===== The game screen area ===== */
main {
    position: relative;
    width: 100%;
    max-width: 900px;
}

canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    background: #9fb6c9;
    border: 3px solid rgba(255, 255, 255, 0.15);
    touch-action: none;      /* stops the phone from scrolling while you steer */
    cursor: pointer;
}

/* ===== Overlays - the screens that pop up on top of the game ===== */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 11, 24, 0.9);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    gap: 10px;
}

.overlay.hidden { display: none; }

.overlay h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 2em;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    gap: 10px;
}

.overlay p {
    max-width: 520px;
    opacity: 0.9;
    line-height: 1.45;
}

.title-icon { font-size: 38px; }
.title-icon.good { color: var(--accent-green); }
.title-icon.bad  { color: var(--accent-red); }

/* The little "how to play" list on the start screen */
.how-to {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 16px;
}

.how-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92em;
}

.how-row .material-symbols-rounded { font-size: 22px; opacity: 0.9; }
.how-row .good { color: var(--accent-green); }
.how-row .bad  { color: var(--accent-red); }

.controls-hint {
    font-size: 0.85em;
    opacity: 0.7;
    max-width: 560px;
}

/* ===== Buttons ===== */
.difficulty-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.difficulty-btn,
.play-button {
    font-family: 'Fredoka One', cursive;
    font-size: 1.05em;
    padding: 10px 22px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    color: #10203a;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: transform 0.15s, filter 0.15s;
}

.difficulty-btn:hover,
.play-button:hover {
    transform: scale(1.06);
    filter: brightness(1.1);
}

.difficulty-btn.easy   { background: var(--accent-green); }
.difficulty-btn.medium { background: var(--accent-gold); }
.difficulty-btn.hard   { background: var(--accent-red); color: #fff; }

.play-button { background: var(--accent-gold); }

/* Row of reward icons on the stage clear screen */
.reward-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 96px;
}

.reward .material-symbols-rounded { font-size: 26px; color: var(--accent-gold); }
.reward .reward-value { font-family: 'Fredoka One', cursive; font-size: 1.3em; }
.reward .reward-name  { font-size: 0.78em; opacity: 0.7; }

.best-line {
    font-size: 0.85em;
    opacity: 0.65;
}

/* ===== Big flashing message in the middle of the action ===== */
.flash {
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Fredoka One', cursive;
    font-size: 2.6em;
    color: var(--accent-gold);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
    pointer-events: none;
    animation: flashIn 0.9s ease-out;
}

.flash.hidden { display: none; }

@keyframes flashIn {
    0%   { transform: scale(0.4); opacity: 0; }
    25%  { transform: scale(1.15); opacity: 1; }
    70%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* ===== Instructions and footer ===== */
.instructions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    opacity: 0.7;
    text-align: center;
}

.instructions .material-symbols-rounded { font-size: 18px; }

footer {
    padding-bottom: 8px;
}

.created-by {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--accent-gold);
    font-size: 0.9em;
}

.created-by .material-symbols-rounded { font-size: 18px; color: var(--accent-red); }

/* ===== Small screens (phones) - shrink the text a bit ===== */
@media (max-width: 620px) {
    h1 { font-size: 1.4em; }
    h1 .material-symbols-rounded { font-size: 26px; }
    .overlay h2 { font-size: 1.4em; }
    .flash { font-size: 1.7em; }
    .hud-box { padding: 5px 9px; font-size: 0.8em; }
    .how-row { font-size: 0.8em; }
}

/* =========================================================
   WEAPON RAIL - the ladder of guns you can unlock
   Instead of just printing the weapon's name, we show all five
   so you can see how far you have come and what is still ahead.
   ========================================================= */
.weapon-rail {
    width: 100%;
    max-width: 900px;
    display: flex;
    gap: 5px;
}

.weapon-step {
    flex: 1;
    text-align: center;
    padding: 5px 2px 6px;
    border-radius: 9px;
    background: rgba(10, 16, 32, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.10);
    font-size: 0.72em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.25s;
}

/* Guns you have already passed */
.weapon-step.done {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(93, 220, 111, 0.35);
}

/* The gun you are holding right now */
.weapon-step.active {
    color: #10203a;
    background: var(--accent-gold);
    border-color: #fff3c4;
    transform: scale(1.06);
}

.weapon-step .step-dps {
    display: block;
    font-family: 'Fredoka One', cursive;
    font-size: 1.15em;
    line-height: 1.15;
}

/* A quick flash when you pick a new weapon up */
@keyframes weaponPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); }
    100% { transform: scale(1.06); }
}
.weapon-step.just-got { animation: weaponPop 0.45s ease-out; }

/* =========================================================
   THREAT PANEL - your firepower against the boss's
   ========================================================= */
.threat-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    width: min(430px, 82%);
    background: rgba(6, 11, 24, 0.82);
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.threat-panel.hidden { display: none; }

.threat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78em;
    font-weight: 700;
}

.threat-name { width: 76px; opacity: 0.75; }

.threat-bar {
    flex: 1;
    height: 11px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
}

.threat-bar i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent-green);
    transition: width 0.2s linear;
}

.threat-bar.need i { background: var(--accent-red); }

.threat-num {
    width: 52px;
    text-align: right;
    font-family: 'Fredoka One', cursive;
}

.threat-verdict {
    text-align: center;
    font-family: 'Fredoka One', cursive;
    font-size: 0.92em;
    padding-top: 2px;
}

.threat-verdict.win  { color: var(--accent-green); }
.threat-verdict.lose { color: var(--accent-red); }

@media (max-width: 620px) {
    .weapon-step { font-size: 0.6em; padding: 4px 1px 5px; }
    .threat-row { font-size: 0.7em; }
    .threat-name { width: 60px; }
}

/* A little note shown while the 3D world downloads */
.loading-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 11, 24, 0.92);
    border-radius: 14px;
    font-family: 'Fredoka One', cursive;
    color: var(--accent-gold);
    font-size: 1.2em;
}

/* ===== 3D canvas sits behind; the 2D canvas on top only catches input ===== */
#game-canvas-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    background: #c9d8e6;
}

canvas.input-only {
    position: relative;
    background: transparent !important;
    border-color: transparent !important;
}

/* =========================================================================
   FULL SCREEN LAYOUT
   The game fills the whole browser window, and all the readouts move to a
   column down the LEFT so nothing covers the road ahead.
   ========================================================================= */
body.fullscreen-game {
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

body.fullscreen-game .game-container {
    position: fixed;
    inset: 0;
    max-width: none;
    gap: 0;
    display: block;
}

/* The 3D world fills everything */
body.fullscreen-game main {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
}

body.fullscreen-game #game-canvas-3d,
body.fullscreen-game #game-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}

/* ---- title bar floats over the top ---- */
body.fullscreen-game header {
    position: absolute;
    top: 10px; left: 0; right: 0;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
body.fullscreen-game header h1 { font-size: 1.25em; }
body.fullscreen-game header h1 .material-symbols-rounded { font-size: 22px; }
body.fullscreen-game header .subtitle { display: none; }
body.fullscreen-game .back-button {
    pointer-events: auto;
    position: absolute;
    left: 14px; top: 2px;
    margin: 0;
}

/* ---- readouts stack down the left-hand side ---- */
body.fullscreen-game .hud {
    position: absolute;
    left: 14px;
    top: 58px;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 5;
}

/* The sound button is a square, not a full-width row like the readouts */
body.fullscreen-game .hud-box.sound-toggle {
    min-width: 0;
    width: 40px;
    justify-content: center;
}

body.fullscreen-game .hud-box {
    min-width: 168px;
    justify-content: flex-start;
    backdrop-filter: blur(3px);
}

body.fullscreen-game .hud-label { flex: 1; }

/* ---- weapon ladder runs down the left, under the readouts ---- */
body.fullscreen-game .weapon-rail {
    position: absolute;
    left: 14px;
    top: 300px;
    width: 168px;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

body.fullscreen-game .weapon-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    text-align: left;
}

body.fullscreen-game .weapon-step .step-dps { display: inline; font-size: 1em; }

/* ---- stage progress: a slim bar pinned to the very top ---- */
body.fullscreen-game .progress-track {
    position: absolute;
    top: 0; left: 0;
    max-width: none;
    width: 100%;
    height: 7px;
    border: none;
    border-radius: 0;
    z-index: 6;
}
body.fullscreen-game .progress-flag { display: none; }

/* ---- boss threat panel goes top-right, out of the way ---- */
body.fullscreen-game .threat-panel {
    left: auto;
    right: 16px;
    top: 58px;
    transform: none;
    width: 300px;
    z-index: 5;
}

/* ---- hints and credit tuck into the bottom corners ---- */
body.fullscreen-game .instructions {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

body.fullscreen-game footer {
    position: absolute;
    bottom: 8px; right: 14px;
    padding: 0;
    z-index: 5;
}

body.fullscreen-game .overlay { border-radius: 0; }

/* On a phone the side column would eat the screen, so shrink it */
@media (max-width: 700px) {
    body.fullscreen-game .hud-box { min-width: 124px; font-size: 0.72em; padding: 4px 8px; }
    body.fullscreen-game .weapon-rail { width: 124px; top: 252px; }
    body.fullscreen-game .threat-panel { width: 190px; }
    body.fullscreen-game .instructions { display: none; }
}

/* Floating damage numbers drawn as HTML on top of the 3D world */
.popup-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 4;
}

.dmg-popup {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Fredoka One', cursive;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    display: none;
}