:root {
    --stat-color: gold;
    --bg-image: url("../../img/background-cavern1.png");
}

html {
    margin: 0px;
}

body {
    background: #111;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    height: 100vh;
}

/* Background layer (blur + dim + tiny zoom = depth) */
body::before {
    content: "";
    position: fixed;
    inset: -20px; /* avoid blur edges */
    background-image: var(--bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(2px) brightness(0.75) saturate(0.85);
    transform: scale(1.05);
    z-index: -2;
}

/* Vignette / focus layer */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 40%,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.85) 100%
    );
    z-index: -1;
}

/* Stage container */
.dragon-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    margin-top: 10px;
    transform: translateY(6px);
}

/* Soft round “backplate” behind the dragon */
.dragon-stage::before {
    content: "";
    position: absolute;
    width: min(380px, 90vw);
    height: min(260px, 55vw);
    border-radius: 999px;
    top: 20px;
    z-index: 0;
    background: radial-gradient(
        circle at 50% 45%,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(0, 0, 0, 0) 70%
    );
}

/* Ground shadow under feet (instantly “not floating”) */
.dragon-stage::after {
    content: "";
    position: absolute;
    width: min(260px, 70vw);
    height: 70px;
    bottom: 10px;
    border-radius: 50%;
    z-index: 0;
    background: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 70%
    );
    filter: blur(10px);
    transform: translateY(18px);
}

/* Make the sprite feel separated from the bg */
.dragon-stage .dragon-sprite {
    position: relative;
    z-index: 1;
    width: 62%; /* tweak smaller/bigger */
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.25))
        drop-shadow(0 22px 18px rgba(0, 0, 0, 0.55));
}

.bound {
    padding: none;
    width: 100%;
}

.dragon {
    margin-top: -150px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    vertical-align: middle;
}

.dragon-sprite {
    --tint: 210deg;
}

.dragon-sprite #body {
    /* turn gray into color, keep luminance */
    filter: grayscale(1) /* ensure neutral */ sepia(1) /* add chroma */
        saturate(300%) hue-rotate(-15deg) brightness(0.9) contrast(1.1);
}
/*
    Brightness: 0.7 - 1.1
    Contrast: 1.1 - 1.6
    Saturate: 150 - 300
/*
/*
    Red: -45, -60
    Green: 25 - 100
    Blue: 140 - 190
    Gold: -5 - 10
    Yellow: 12 - 20
    Violet: -110 - 70
    Purple: -115 - -150
    Black: sepia(0), bright(0.7 - 0.9), contrast(1.6 - 1.9)
    White: sepia(0), bright(1.4 - 1.8), contrast(0.9 - 1.6)
    Orange: -35 - -10
*/
.dragon-sprite #accents {
    /* turn gray into color, keep luminance */
    filter: grayscale(1) /* ensure neutral */ sepia(0) /* add chroma */
        saturate(300%) hue-rotate(5deg) brightness(1.5) contrast(1.6);
}

.dragon-sprite #hair {
    /* turn gray into color, keep luminance */
    filter: grayscale(1) /* ensure neutral */ sepia(0) /* add chroma */
        saturate(300%) hue-rotate(5deg) brightness(1.5) contrast(1.6);
}

.dragon-sprite #eyes {
    /* turn gray into color, keep luminance */
    filter: grayscale(1) /* ensure neutral */ sepia(1) /* add chroma */
        saturate(300%) hue-rotate(150deg) brightness(0.95) contrast(1.3);
}


/* ---- dragon idle: breathing + slight sway + blink ----
   Runs on the static sprite. The positioning <g> keeps its translate/scale;
   these inner groups each own one transform so they compose cleanly. */
.d-sway, .d-breathe, #eyes { transform-box: fill-box; }
.d-sway    { transform-origin: 50% 100%; animation: dsway 7s ease-in-out infinite; }
.d-breathe { transform-origin: 50% 100%; animation: dbreathe 4s ease-in-out infinite; }
#eyes      { transform-origin: 50% 50%; transition: transform 70ms linear; }
.blink #eyes { transform: scaleY(0.08); }
@keyframes dbreathe { 0%,100% { transform: scaleY(1); }        50% { transform: scaleY(1.03); } }
@keyframes dsway    { 0%,100% { transform: rotate(-0.6deg); }  50% { transform: rotate(0.6deg); } }
@media (prefers-reduced-motion: reduce) { .d-sway, .d-breathe { animation: none; } }

.canvas {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    display: block;
    isolation: isolate; /* Keeps blending contained */
    --hue: 0;
    --sat: 30%;
    --light: 50%;
}

.canvas img {
    margin: auto;
    display: block;
    width: 75%;
    filter: grayscale(1) contrast(1.3) brightness(1.1);
}

/* main grayscale dragon tinted via blend mode */
.canvas .main {
    mix-blend-mode: overlay;
}

/* duplicate dragon providing the color “fill” only behind opaque pixels */
.canvas .duplicate {
    position: absolute;
    opacity: 0.6;
    inset: 0;
    z-index: -1;
    filter: drop-shadow(0 5000px 0 hsl(var(--hue), var(--sat), var(--light)));
    transform: translateY(-5000px);
}

.canvas .eyes {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.canvas .accent {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.canvas .hair {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.canvas .outline {
    position: absolute;
    inset: 0;
    z-index: 2;
}

input {
    margin: 5px auto 5px auto;
    padding: 10px;
    display: block;
    background-color: #333;
    border-width: 0px;
    border-radius: 10px;
    color: white;
    width: 150px;
}

input.chatbar {
    width: 100%;
}

input[type="text"]:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: #555;
}

input[type="submit"]:hover {
    cursor: pointer;
    background-color: #555;
}

.inactive-box {
    background:rgba(0,0,0,0.4);
    margin: 0px;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-flow: row wrap;
    gap: 5px;
    z-index: 999;
}

.inactive-box>p {
    color: white;
}

.inactive-box>p.dead-text {
    color: white;
    font-size:29px;
    padding: 15px;
}

.inactive-box>button {
    padding: 25px 75px;
}

.spinner {
  width: 12px;
  height: 12px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right:10px;
  margin-top:-2px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.warning {
    background: rgba(255, 0, 0, 0.4);
    border: 1px solid rgba(255, 0, 0, 0.6);
    display: none;
    border-radius: 5px;
    color: white;
    width: 75%;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

.success {
    background: rgba(0, 255, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.6);
    display: none;
    border-radius: 5px;
    color: white;
    width: 75%;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

#dragon-name {
    font-family: "Press Start 2P", monospace;
    font-size: 25px;
    color: white;
    margin: 0px;
}

#dragon-activity {
    font-family: "Press Start 2P", monospace;
    font-size: 12px;
    color: gray;
    margin: 0px;
    margin-top:5px;
    margin-bottom: 25px;
    font-style:italic;
    font-weight:100;
    text-transform: capitalize;
}

.dragon-menu {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.stats {
    display: none;
    text-align: center;
    margin: auto;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 20px 20px 0 0;
    padding: 15px;
    padding: 25px;
}

.stat-holder {
    display: inline-block;
    height: 25px;
    width: 45%;
    margin: auto;
}

/* Outer bar with background tint */
.stat-bar-outer {
    position: relative;
    height: 5px;
    width: 75%;
    margin: auto;
    margin-top: 10px;
    background-color: var(--stat-color);
    overflow: hidden;
}

/* This adds your transparent overlay only on the outer bar */
.stat-bar-outer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.6; /* adjust for darkness */
    z-index: 0;
}

/* Inner fill layer */
.stat-bar-inner {
    position: relative;
    background-color: var(--stat-color);
    height: 100%;
    width: var(--fill, 0%);
    z-index: 1;
    transition: width 0.3s ease-in-out;
}

#bar-health {
    --stat-color: rgb(255, 80, 80);
}
#bar-hunger {
    --stat-color: rgb(255, 196, 0);
}
#bar-energy {
    --stat-color: rgb(80, 255, 100);
}
#bar-bond {
    --stat-color: rgb(150, 90, 255);
}

.ingame-menu {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    gap: 5px;
}

button {
    font-family: "Press Start 2P", monospace;
    background: linear-gradient(#b27230 0%, #8b4f20 100%);
    border: 3px solid #3a1d00;
    border-radius: 8px;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
    padding: 8px 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 0 #2a0d00;
    transition: transform 0.1s;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 0 rgba(0, 0, 0, 0.4);
}

.menu-button:not(:disabled):hover {
    filter: brightness(0.9);
    transform: translateY(1px);
    cursor: pointer;
}

.menu-button:disabled {
    background: linear-gradient(
        to bottom,
        rgb(150, 150, 150) 0%,
        rgb(50, 50, 50) 0%
    ) !important;
    border: 2px solid rgb(20, 20, 20) !important;
    color: gray !important;
}

.menu-button.red {
    background: linear-gradient(
        to bottom,
        rgb(255, 110, 110) 0%,
        rgb(200, 40, 40) 100%
    );
    border: 2px solid rgb(120, 20, 20);
}

.menu-button.gold {
    background: linear-gradient(#ffd866, #a76b00);
    border: 2px solid rgb(90, 50, 0);
}

.menu-button.green {
    background: linear-gradient(
        to bottom,
        rgb(140, 255, 160) 0%,
        rgb(40, 150, 60) 100%
    );
    border: 2px solid rgb(20, 70, 25);
}

.menu-button.purple {
    background: linear-gradient(
        to bottom,
        rgb(190, 140, 255) 0%,
        rgb(80, 30, 160) 100%
    );
    border: 2px solid rgb(40, 15, 90);
}

.speech-box {
    /*display: inline-block;*/
    background: #1b1b1b; /* dark base */
    color: #fff;
    font-family: "Press Start 2P", monospace; /* optional pixel font */
    font-size: 10px;
    line-height: 1.5;
    padding: 12px 16px;
    border: 4px solid #ffffff; /* white pixel edge */
    box-shadow:
        0 0 0 2px #000000,
        /* black outline */ inset 0 0 0 2px #7a7a7a; /* inner border for depth */
    image-rendering: pixelated;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

#hatch-form { display: flex; flex-direction: column; gap: 16px; width: 80%; margin: auto; }
.colour-row { display: flex; flex-direction: column; gap: 8px; }
.colour-label { font-family: "Press Start 2P", monospace; font-size: 11px; color: #fff; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }   /* hide the real radio */
.swatch span {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
  border: 3px solid transparent; transition: transform .08s;
}
.swatch:hover span { transform: scale(1.1); }
.swatch input:checked + span {
  border-color: #ffd45e;                          /* gold ring when selected */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 0 2px #fff;
  transform: scale(1.08);
}

.lair-info {
    display: none;
    position:absolute;
    width: 100%;
    top: 25px;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.lair-screen {
    display: none;
    position: absolute;
    top: 50px;
    z-index: 300;
    width: 90%;
    height: 90vh;
    background-color:rgba(34,46,57,1);
    border: 1px solid rgb(18, 25, 31);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    flex-direction: column;      /* stack title, then the list */
    justify-content: flex-start;
    text-align: center;
    font-family: "Press Start 2P", monospace;
    font-weight: 10;
    font-size: 12px;
    color: #fff;
}

.lair-screen>h1 {
    color: #fff;
    font-family: "Press Start 2P", monospace;
    font-size: 20px;
    margin-top: 35px;
}

.lair-item-items {
    display: table;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.lair-items { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.lair-item {
    margin-left: 10px;
    margin-right: 10px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: rgba(0,0,0,.35); border-radius: 8px;
}
.lair-item .qty { color: #e0b23a; font-variant-numeric: tabular-nums; }