/* deep-context.css - the dive. Dark on purpose: the page around it is the light
   playground shell, the window you are descending into is not.

   Two custom properties are written from JS every frame, both on .dc-dive:
     --dc-depth-t  0..1, how full the window is. Drives water darkness, the fade
                   of the light rays and the closing vignette. Nothing else needs
                   to know the depth.
     --dc-x        0..1, where the diver is across the column.
     --dc-tilt     the diver's lean, derived from how hard you are steering.
   Object width is set inline from the object's own hitbox half-width, so the
   art can never lie about what it will actually collide with. */

.dc-root {
    --dc-bg: #06111A;
    --dc-deep: #030A11;
    --dc-surface: #0E1E2B;
    --dc-line: #1C3346;
    --dc-text: #DCE9F2;
    --dc-muted: #7E97AB;
    --dc-cyan: #6FD3E0;
    --dc-good: #47D18F;
    --dc-warn: #F0B35B;
    --dc-bad: #FF7C7C;
    --dc-violet: #9E86F7;

    max-width: 780px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    color: var(--dc-text);
    font-family: var(--fb, 'Inter', system-ui, sans-serif);
}

.dc-screen { display: none; }
.dc-screen.on { display: flex; flex-direction: column; gap: 1rem; }

/* The sprite sheet is markup, not picture. Keep it out of the layout entirely. */
.dc-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------- panels ----- */

.dc-card-panel {
    background: linear-gradient(180deg, var(--dc-surface) 0%, var(--dc-bg) 100%);
    border: 1px solid var(--dc-line);
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
}

.dc-kicker {
    margin: 0 0 .35rem;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-cyan);
}

.dc-title {
    margin: 0 0 .6rem;
    font-family: var(--fh, inherit);
    font-size: clamp(2rem, 7vw, 2.9rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.dc-title span { color: var(--dc-cyan); }

.dc-tagline {
    margin: 0 0 1.25rem;
    color: var(--dc-muted);
    font-size: .95rem;
    line-height: 1.6;
    max-width: 52ch;
}

.dc-rules {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.dc-rules li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .75rem;
    align-items: baseline;
    padding: .6rem .75rem;
    background: rgba(111, 211, 224, .05);
    border: 1px solid var(--dc-line);
    border-radius: 10px;
}
.dc-rules b {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-cyan);
}
.dc-rules span { color: var(--dc-muted); font-size: .85rem; line-height: 1.5; }

.dc-warn-line {
    margin: 0 0 1.4rem;
    padding: .7rem .85rem;
    border-left: 3px solid var(--dc-bad);
    background: rgba(255, 124, 124, .07);
    border-radius: 0 8px 8px 0;
    color: #FFC6C6;
    font-size: .85rem;
    line-height: 1.55;
}

.dc-byline {
    margin: 1rem 0 0;
    color: var(--dc-muted);
    font-size: .72rem;
}

/* ---------------------------------------------------------- buttons ---- */

.dc-btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1.6rem;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.dc-btn-primary { background: var(--dc-cyan); color: #04121A; }
.dc-btn-primary:hover { background: #8CE0EB; }
.dc-btn-ghost {
    background: transparent;
    color: var(--dc-muted);
    border: 1px solid var(--dc-line);
}
.dc-btn-ghost:hover { color: var(--dc-text); }

.dc-btn-surface {
    width: 100%;
    background: transparent;
    border: 1px solid var(--dc-cyan);
    color: var(--dc-cyan);
    letter-spacing: .08em;
    font-size: .78rem;
}
.dc-btn-surface:hover { background: rgba(111, 211, 224, .12); }

/* ---------------------------------------------------------- hud -------- */

.dc-hud {
    display: grid;
    gap: .6rem;
    padding: .85rem 1rem;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 14px;
}

.dc-meter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .35rem;
}
.dc-meter-name {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-muted);
}
.dc-meter-val { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.dc-meter {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: #0A1822;
    border: 1px solid var(--dc-line);
    overflow: hidden;
}
/* the reserve slice sits at the LEFT of the bar: it is the signal you must not
   spend, because it is what getting home costs. */
.dc-meter-reserve {
    position: absolute;
    inset: 0 auto 0 0;
    background: repeating-linear-gradient(45deg, rgba(240,179,91,.35) 0 5px, rgba(240,179,91,.12) 5px 10px);
    z-index: 1;
}
.dc-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #3FA9C9, var(--dc-cyan));
    z-index: 2;
    mix-blend-mode: screen;
    transition: width .1s linear;
}
.dc-meter-fill.low { background: linear-gradient(90deg, #C9553F, var(--dc-bad)); }

.dc-meter-note { color: var(--dc-muted); font-size: .68rem; }

.dc-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.dc-chip {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .55rem;
    border-radius: 999px;
}
.dc-chip[hidden] { display: none; }
.dc-chip-rot { background: rgba(240, 179, 91, .16); color: var(--dc-warn); }
.dc-chip-poison { background: rgba(158, 134, 247, .18); color: var(--dc-violet); }

/* ========================================================== the ocean === */

.dc-dive {
    --dc-depth-t: 0;
    --dc-x: .5;
    --dc-tilt: 0deg;

    position: relative;
    height: min(64vh, 540px);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--dc-line);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
}

/* --- 1. water. Shallow gradient with a black sheet drawn over it, opacity
       tied to how full the window is. No colour maths, works everywhere. --- */
.dc-water {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #47AECE 0%, #2A87AC 22%, #15607F 55%, #0B3E56 100%);
    z-index: 0;
}
.dc-water::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #02090F;
    opacity: var(--dc-depth-t);
}

/* --- 2. sunlight from above, gone by the time the window is full --- */
.dc-rays {
    position: absolute;
    inset: -20% 0 auto 0;
    height: 90%;
    z-index: 1;
    pointer-events: none;
    opacity: calc(.9 - var(--dc-depth-t) * .9);
}
.dc-rays i {
    position: absolute;
    top: 0;
    width: 16%;
    height: 100%;
    background: linear-gradient(180deg, rgba(214, 245, 255, .38), rgba(214, 245, 255, 0) 78%);
    transform-origin: 50% 0;
    animation: dc-sway 9s ease-in-out infinite alternate;
}
.dc-rays i:nth-child(1) { left: 14%; animation-duration: 11s; }
.dc-rays i:nth-child(2) { left: 44%; width: 22%; animation-delay: -3s; }
.dc-rays i:nth-child(3) { left: 74%; animation-duration: 13s; animation-delay: -6s; }
@keyframes dc-sway {
    from { transform: skewX(-9deg) scaleY(.92); }
    to   { transform: skewX(6deg) scaleY(1.06); }
}

/* --- 3/4. parallax rock. repeat-y makes them infinite; JS only nudges
       background-position, so there is nothing to spawn or cull. --- */
.dc-far, .dc-mid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-y;
    background-position: 0 0;
}
.dc-far {
    background-image:
        radial-gradient(70px 150px at 6% 100%, #10475F 0 62%, transparent 63%),
        radial-gradient(95px 190px at 94% 100%, #10475F 0 62%, transparent 63%),
        radial-gradient(45px 100px at 26% 100%, #0E3D53 0 62%, transparent 63%);
    background-size: 100% 460px;
    opacity: .55;
    filter: blur(1px);
}
.dc-mid {
    background-image:
        radial-gradient(60px 130px at 2% 100%, #0A3145 0 64%, transparent 65%),
        radial-gradient(75px 155px at 99% 100%, #0A3145 0 64%, transparent 65%);
    background-size: 100% 330px;
    opacity: .8;
}

/* --- 5. the boat you left. Scrolls 1:1 with the world, so it recedes. --- */
.dc-surface {
    position: absolute;
    left: 0; right: 0;
    top: 38%;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
}
.dc-boat {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 190px;
    margin-left: -95px;
    animation: dc-bob 4.5s ease-in-out infinite alternate;
}
@keyframes dc-bob {
    from { transform: translateY(-3px) rotate(-1.6deg); }
    to   { transform: translateY(3px) rotate(1.6deg); }
}
.dc-waveline {
    position: absolute;
    left: -10%; right: -10%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #CFEFF9, transparent);
    box-shadow: 0 6px 24px rgba(207, 239, 249, .45);
}

/* --- 6. the world: artifacts, hazards, vents, scenery --- */
.dc-world {
    position: absolute;
    left: 0; right: 0;
    top: 38%;
    will-change: transform;
    z-index: 4;
}

/* everything in the world shares this: centred on its own (x, depth) */
.dc-card, .dc-haz, .dc-vent, .dc-decor {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
}

.dc-art { display: block; width: 100%; height: auto; overflow: visible; }

/* Labels are hidden until the thing is close enough to matter, then they get to
   overflow their lane. Only one or two are ever near at once, so the column
   stays readable instead of three columns of shouting text. */
.dc-card-body, .dc-haz-label {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 168px;
    margin-left: -84px;
    opacity: 0;
    transition: opacity .2s ease;
}
.near > .dc-card-body, .near > .dc-haz-label { opacity: 1; }

.dc-card .dc-art, .dc-vent .dc-art, .dc-haz .dc-art {
    transition: transform .2s ease, filter .2s ease;
    filter: brightness(.72) saturate(.75);
}
.near > .dc-art { filter: none; transform: scale(1.08); }

.dc-card-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(2, 12, 20, .95);
}
.dc-card-cost {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: .15rem;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 4px rgba(2, 12, 20, .95);
}
.dc-tok { color: #B9CEDD; }
.dc-sig.pos { color: var(--dc-good); }
.dc-sig.neg { color: var(--dc-bad); }

.dc-clean.near .dc-art { filter: drop-shadow(0 0 10px rgba(111, 211, 224, .8)); }
.dc-bloat.near .dc-art { filter: drop-shadow(0 0 8px rgba(240, 179, 91, .6)); }
.dc-trap.near  .dc-art { filter: drop-shadow(0 0 8px rgba(158, 134, 247, .6)); }

/* --- hazards. They drift, so they read as alive rather than as obstacles. --- */
.dc-haz .dc-art { animation: dc-drift 5s ease-in-out infinite alternate; }
@keyframes dc-drift {
    from { transform: translateX(-6px) rotate(-3deg); }
    to   { transform: translateX(6px) rotate(3deg); }
}
.dc-haz-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--dc-bad);
    text-shadow: 0 1px 4px rgba(2, 12, 20, .95);
}
/* the two deepest failure modes never announce themselves - that is the lesson */
.dc-haz-quiet .dc-haz-label { display: none; }

/* --- compaction vent --- */
.dc-vent .dc-art { animation: dc-drift 3.4s ease-in-out infinite alternate; }
.dc-vent .dc-card-label { color: var(--dc-warn); font-size: .66rem; letter-spacing: .1em; }
.dc-vent .dc-card-cost { color: var(--dc-muted); font-weight: 500; }

/* --- scenery. Never collides, never labelled, just there. --- */
.dc-decor {
    width: 92px;
    opacity: .55;
    z-index: -1;
}
.dc-decor.far { width: 150px; opacity: .3; filter: blur(1.5px); }

/* --- 7. the diver --- */
.dc-diver {
    position: absolute;
    top: 38%;
    left: calc(var(--dc-x) * 100%);
    width: 15%;
    max-width: 78px;
    transform: translate(-50%, -50%) rotate(var(--dc-tilt));
    transition: transform .08s linear;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}
.dc-diver-svg { display: block; width: 100%; height: auto; overflow: visible; }

.dc-fin { transform-box: fill-box; transform-origin: 50% 0; }
.dc-dive.diving .dc-fin-l { animation: dc-kick .42s ease-in-out infinite alternate; }
.dc-dive.diving .dc-fin-r { animation: dc-kick .42s ease-in-out infinite alternate-reverse; }
@keyframes dc-kick {
    from { transform: rotate(-16deg); }
    to   { transform: rotate(18deg); }
}
.dc-hose { animation: dc-hose-sway 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes dc-hose-sway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(5deg); }
}

/* bubbles out of the helmet, only while actually breathing hard (diving) */
.dc-diver-bubbles { position: absolute; left: 62%; top: 6%; width: 20%; height: 60px; }
.dc-diver-bubbles i {
    position: absolute;
    bottom: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(226, 248, 255, .85);
    opacity: 0;
}
.dc-dive.diving .dc-diver-bubbles i { animation: dc-rise 1.5s linear infinite; }
.dc-diver-bubbles i:nth-child(2) { left: 8px; animation-delay: -.5s; }
.dc-diver-bubbles i:nth-child(3) { left: -6px; width: 4px; height: 4px; animation-delay: -1s; }

/* --- 8. ambient bubbles, pure CSS, no particle system --- */
.dc-bubbles { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dc-bubbles i {
    position: absolute;
    bottom: -20px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(214, 245, 255, .45);
    background: rgba(214, 245, 255, .06);
    animation: dc-rise 9s linear infinite;
}
.dc-bubbles i:nth-child(1) { left: 12%; animation-duration: 8s; }
.dc-bubbles i:nth-child(2) { left: 27%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: -3s; }
.dc-bubbles i:nth-child(3) { left: 48%; width: 14px; height: 14px; animation-duration: 13s; animation-delay: -6s; }
.dc-bubbles i:nth-child(4) { left: 66%; width: 7px; height: 7px; animation-duration: 10s; animation-delay: -1s; }
.dc-bubbles i:nth-child(5) { left: 83%; animation-duration: 12s; animation-delay: -8s; }
.dc-bubbles i:nth-child(6) { left: 92%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: -4s; }
@keyframes dc-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    12%  { opacity: .9; }
    100% { transform: translateY(-560px) translateX(14px); opacity: 0; }
}

/* --- the deep closing in --- */
.dc-gloom {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 38%, transparent 18%, #01070C 100%);
    opacity: calc(var(--dc-depth-t) * .85);
}

/* Past the rot line the water itself goes wrong. Until now this threshold was a
   number in the HUD and nothing else; it is the thing the game is about. */
.dc-dive.rot::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background: radial-gradient(140% 100% at 50% 70%, rgba(93, 122, 61, .22), rgba(60, 40, 20, .3));
    mix-blend-mode: overlay;
    animation: dc-murk 5s ease-in-out infinite alternate;
}
@keyframes dc-murk { from { opacity: .55; } to { opacity: 1; } }

.dc-dive.diving { box-shadow: inset 0 -50px 70px -30px rgba(111, 211, 224, .3); }
.dc-dive.ascending { box-shadow: inset 0 50px 70px -30px rgba(71, 209, 143, .4); }

/* --- readouts inside the water, dive-computer style --- */
.dc-rail {
    position: absolute;
    left: .85rem;
    top: .7rem;
    z-index: 9;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(2, 10, 16, .9);
}
.dc-rail b {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #EAF6FC;
}
.dc-rail span {
    display: block;
    margin-bottom: .7rem;
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(219, 238, 248, .72);
}
.dc-rail-find { font-size: 1.25rem !important; color: var(--dc-good) !important; }

/* ---------------------------------------------------------- toast ------ */

.dc-toast {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%) translateY(-6px);
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    background: rgba(6, 17, 26, .92);
    border: 1px solid var(--dc-line);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 10;
}
.dc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.dc-toast.good { color: var(--dc-good); border-color: rgba(71, 209, 143, .5); }
.dc-toast.bad { color: var(--dc-bad); border-color: rgba(255, 124, 124, .5); }
.dc-toast.warn { color: var(--dc-warn); border-color: rgba(240, 179, 91, .5); }

.dc-hint {
    position: absolute;
    left: 0; right: 0;
    bottom: .6rem;
    margin: 0;
    text-align: center;
    font-size: .68rem;
    color: rgba(219, 238, 248, .8);
    text-shadow: 0 1px 5px rgba(2, 10, 16, .9);
    pointer-events: none;
    z-index: 10;
}

/* ---------------------------------------------------------- report ----- */

.dc-end-panel { text-align: center; }

.dc-score-ring { margin: .5rem 0 .4rem; }
.dc-score-ring b {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dc-cyan);
    font-variant-numeric: tabular-nums;
}
.dc-score-ring span { color: var(--dc-muted); font-size: .9rem; margin-left: .2rem; }

.dc-verdict {
    margin: 0 auto 1.25rem;
    max-width: 46ch;
    color: var(--dc-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.dc-report { text-align: left; }

.dc-rep-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.dc-rep-stat {
    padding: .6rem .5rem;
    background: rgba(111, 211, 224, .05);
    border: 1px solid var(--dc-line);
    border-radius: 10px;
    text-align: center;
}
.dc-rep-stat b { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-rep-stat span { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-muted); }

.dc-rep-sub {
    margin: 0 0 .5rem;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-cyan);
}

.dc-incs { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.dc-inc {
    padding: .65rem .8rem;
    border-left: 3px solid var(--dc-bad);
    background: rgba(255, 124, 124, .06);
    border-radius: 0 8px 8px 0;
}
.dc-inc.silent { border-left-color: var(--dc-violet); background: rgba(158, 134, 247, .07); }
.dc-inc.clean { border-left-color: var(--dc-good); background: rgba(71, 209, 143, .07); color: var(--dc-muted); font-size: .85rem; }
.dc-inc-term { display: block; font-weight: 700; font-size: .85rem; }
.dc-inc-term em { font-style: normal; font-weight: 500; color: var(--dc-violet); font-size: .72rem; }
.dc-inc-note { display: block; margin: .2rem 0; color: var(--dc-muted); font-size: .8rem; line-height: 1.5; }
.dc-inc-cost { display: block; font-size: .68rem; color: var(--dc-warn); font-variant-numeric: tabular-nums; }

.dc-dead { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .3rem; }
.dc-dead li {
    font-size: .8rem;
    color: var(--dc-muted);
    padding: .35rem .6rem;
    border: 1px dashed var(--dc-line);
    border-radius: 8px;
    text-decoration: line-through;
}
.dc-dead em { font-style: normal; text-decoration: none; color: var(--dc-violet); font-size: .7rem; }

.dc-lb { margin-bottom: 1rem; }

.dc-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ---------------------------------------------------------- small ------ */

@media (max-width: 520px) {
    .dc-rules li { grid-template-columns: 1fr; gap: .15rem; }
    .dc-rep-stats { grid-template-columns: 1fr; }
    .dc-dive { height: min(62vh, 480px); }
    .dc-card-body, .dc-haz-label { width: 140px; margin-left: -70px; }
    .dc-card-label { font-size: .66rem; }
    .dc-boat { width: 140px; margin-left: -70px; }
    .dc-rail b { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-rays i, .dc-bubbles i, .dc-diver-bubbles i, .dc-boat,
    .dc-haz .dc-art, .dc-vent .dc-art, .dc-hose,
    .dc-dive.diving .dc-fin-l, .dc-dive.diving .dc-fin-r,
    .dc-dive.rot::after { animation: none; }
    .dc-card-body, .dc-haz-label, .dc-toast, .dc-meter-fill, .dc-diver { transition: none; }
}