:root {
    font-variant-numeric: lining-nums;
    --ink: #eef4fb;
    --ink-dim: rgba(238, 244, 251, 0.72);
    --glass: rgba(9, 20, 37, 0.58);
    --glass-strong: rgba(8, 17, 32, 0.9);
    --line: rgba(170, 205, 245, 0.22);
    --gold: #ffd36b;
    --aurora: #7dffc0;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin: 0; height: 100%; overflow: hidden; background: #070d18; color: var(--ink);
    font-family: var(--sans); touch-action: none; overscroll-behavior: none;
    user-select: none; -webkit-user-select: none;
}
#app canvas { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#ov-storm { background: radial-gradient(ellipse at center, rgba(235,242,250,0.08), rgba(215,228,242,0.65)); }
#ov-frost {
    background-size: cover; background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 42%, #000 88%);
    mask-image: radial-gradient(ellipse at center, transparent 42%, #000 88%);
}
#ov-hurt { background: radial-gradient(ellipse at center, transparent 40%, rgba(170,15,15,0.7)); transition: opacity .25s; }

/* ---------- HUD ---------- */
#hud {
    position: fixed; top: calc(env(safe-area-inset-top) + 10px);
    left: calc(env(safe-area-inset-left) + 10px); right: calc(env(safe-area-inset-right) + 10px);
    pointer-events: none; display: flex; justify-content: space-between; align-items: flex-start;
    text-shadow: 0 1px 3px rgba(0,0,0,.65); animation: fadeIn .9s ease-out both;
}
@keyframes hudIn { from { opacity: 0; transform: translateY(-8px); } }
#left { animation: hudIn .9s ease-out both; display: flex; flex-direction: column; gap: 5px; max-width: 58vw; }
.stat { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.stat .ico { width: 20px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.bar {
    position: relative; width: 116px; height: 8px; background: rgba(4,10,20,.55); border-radius: 6px;
    overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.3);
}
.bar i, .bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; }
.bar i { transition: width .25s ease-out; }
.bar b { background: rgba(255,255,255,.55); transition: width .9s ease-in .35s; }
.bar i::after {
    content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 6px 6px 0 0;
    background: linear-gradient(rgba(255,255,255,.35), transparent);
}
#st-health .bar i { background: linear-gradient(90deg, #a92d24, #ff6b5a); }
#st-warm .bar i { background: linear-gradient(90deg, #ff7a22, #ffd36b); }
#st-food .bar i { background: linear-gradient(90deg, #5f8f3a, #c6e38a); }
#st-dog .bar { width: 70px; }
#st-dog .bar i { background: linear-gradient(90deg, #6f87a6, #d8e6f5); }
#dog-mood { font-size: 11px; color: var(--ink-dim); font-style: italic; }
.stat.low .bar { animation: pulse .8s infinite; }
.stat.low .ico { animation: shiver .25s infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px #ff6b5a, 0 0 12px #ff6b5a; } }
@keyframes shiver { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }

#objective {
    margin-top: 5px; font-size: 12.5px; background: var(--glass); padding: 7px 11px 7px 12px;
    border-radius: 10px; line-height: 1.35; border: 1px solid var(--line); border-left: 3px solid var(--gold);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .4s;
}
#objective.flash { animation: objFlash 1.2s ease-out; }
@keyframes objFlash { 0% { background: rgba(255,211,107,.45); } }
#inv-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.chip {
    background: var(--glass); padding: 2px 8px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.chip.bump { animation: bump .45s ease-out; }
@keyframes bump { 30% { transform: scale(1.25); background: rgba(255,211,107,.4); } }

#compass {
    position: fixed; top: calc(env(safe-area-inset-top) + 10px); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 3px; color: var(--ink-dim);
}
#arrow {
    width: 38px; height: 38px; border-radius: 50%; background: var(--glass); display: grid;
    place-items: center; color: var(--gold); font-size: 17px; border: 1px solid rgba(255,211,107,.45);
    box-shadow: 0 0 18px rgba(255,211,107,.18); transition: transform .3s ease-out;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#info { text-align: right; font-size: 13px; line-height: 1.5; }
#day { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .5px; }

/* ---------- Beskeder ---------- */
#toast {
    position: fixed; top: 27%; left: 50%; transform: translate(-50%, -8px); background: var(--glass-strong);
    padding: 10px 18px; border-radius: 14px; font-size: 14.5px; opacity: 0; pointer-events: none;
    text-align: center; max-width: 88vw; border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.35);
    transition: opacity .35s, transform .35s cubic-bezier(.2,.9,.3,1.3);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#daycard {
    position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center;
    pointer-events: none; opacity: 0; text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
#daycard.show { animation: dayCard 3.6s ease-in-out both; }
@keyframes dayCard {
    0% { opacity: 0; letter-spacing: 14px; filter: blur(6px); }
    25%, 70% { opacity: 1; letter-spacing: 6px; filter: blur(0); }
    100% { opacity: 0; letter-spacing: 4px; filter: blur(3px); }
}
.dc-top { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--ink-dim); }
.dc-main { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: clamp(40px, 10vw, 76px); font-weight: 600; letter-spacing: 6px; }
.dc-sub { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-dim); }

#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.ft {
    position: absolute; left: 0; top: 0; font-weight: 700; font-size: 14px; white-space: nowrap;
    text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); will-change: transform, opacity;
}
.ft.emote { font-size: 21px; }

/* ---------- Styring ---------- */
#joy {
    position: fixed; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3); background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,.03));
    pointer-events: none; display: none;
}
#joy.ghost { display: block; opacity: .3; }
#joy.on { display: block; opacity: 1; }
#joy-knob {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 50%; background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

#buttons {
    position: fixed; right: calc(env(safe-area-inset-right) + 14px); bottom: calc(env(safe-area-inset-bottom) + 16px);
    width: 190px; height: 200px; pointer-events: none; animation: fadeIn .9s .2s ease-out both;
}
.round {
    position: absolute; pointer-events: auto; border-radius: 50%; border: 1px solid rgba(200,225,255,.3);
    background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
    width: 58px; height: 58px; font-size: 22px; padding: 0; touch-action: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .12s, background .2s, opacity .3s;
}
.round small { font-size: 10px; color: var(--ink-dim); margin-top: -2px; }
.round:active, .round.pressed { transform: scale(.9); background: rgba(40,70,110,.75); }
.round.big { width: 96px; height: 96px; right: 0; bottom: 0; font-size: 30px; border-color: rgba(255,211,107,.6); }
.round.big::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,211,107,.6);
    animation: ring 1.8s ease-out infinite; pointer-events: none;
}
@keyframes ring { 0% { transform: scale(.95); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.round.big .lbl { font-size: 10.5px; max-width: 86px; text-align: center; line-height: 1.1; margin-top: 2px; font-weight: 600; }
.round.big .ic { transition: transform .25s cubic-bezier(.2,.9,.3,1.5); }
.round.big.swap .ic { transform: scale(1.3); }
.round.big.disabled { opacity: .5; border-color: rgba(200,225,255,.22); }
.round.big.disabled::after { display: none; }
#btn-craft { right: 106px; bottom: 4px; }
#btn-inv { right: 18px; bottom: 108px; }
#btn-eat { right: 98px; bottom: 82px; }
#small-btns {
    position: fixed; top: calc(env(safe-area-inset-top) + 76px); right: calc(env(safe-area-inset-right) + 10px);
    display: flex; gap: 6px; pointer-events: none;
}
.round.tiny { position: static; width: 38px; height: 38px; font-size: 16px; }

/* ---------- Paneler ---------- */
#backdrop {
    position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(4,10,20,.35), rgba(4,10,20,.7));
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .3s ease-out both;
}
@keyframes fadeIn { from { opacity: 0; } }
.panel {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 520px);
    max-height: 82vh; overflow: auto; background: linear-gradient(180deg, rgba(14,28,50,.96), rgba(8,17,32,.96));
    border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); touch-action: pan-y;
    animation: panelIn .32s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.phead { display: flex; align-items: center; justify-content: space-between; }
.phead h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: .5px; }
.close { background: none; border: none; font-size: 22px; cursor: pointer; padding: 4px 8px; opacity: .7; }
.close:hover { opacity: 1; }
.recipe, .invrow {
    display: flex; gap: 10px; align-items: center; padding: 10px 11px; border-radius: 13px;
    background: rgba(255,255,255,.045); margin-bottom: 7px; border: 1px solid transparent;
    transition: background .2s, border-color .2s; animation: rowIn .35s ease-out both;
}
.recipe:nth-child(2), .invrow:nth-child(2) { animation-delay: .03s; }
.recipe:nth-child(3), .invrow:nth-child(3) { animation-delay: .06s; }
.recipe:nth-child(4), .invrow:nth-child(4) { animation-delay: .09s; }
.recipe:nth-child(5), .invrow:nth-child(5) { animation-delay: .12s; }
.recipe:nth-child(6), .invrow:nth-child(6) { animation-delay: .15s; }
.recipe:nth-child(7), .invrow:nth-child(7) { animation-delay: .18s; }
.recipe:nth-child(8), .invrow:nth-child(8) { animation-delay: .21s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.recipe.ready { border-color: rgba(255,211,107,.35); background: rgba(255,211,107,.06); }
.recipe .ic, .invrow .ic { font-size: 26px; width: 34px; text-align: center; }
.recipe .txt { flex: 1; min-width: 0; }
.recipe .nm { font-weight: 700; }
.recipe .ds { font-size: 12px; color: var(--ink-dim); }
.recipe .cost { font-size: 12.5px; margin-top: 3px; }
.cost .miss { color: #ff8a7a; }
.recipe.done { opacity: .45; }
.invrow .nm { flex: 1; }
.btn {
    border: 1px solid rgba(255,211,107,.6); background: rgba(255,211,107,.12); border-radius: 10px;
    padding: 8px 13px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .2s, transform .1s;
}
.btn:hover:not(:disabled) { background: rgba(255,211,107,.25); }
.btn:active:not(:disabled) { transform: scale(.95); }
.btn:disabled { opacity: .35; cursor: default; }
.gear { font-size: 13px; color: var(--ink-dim); margin-top: 10px; line-height: 1.6; }
#panel-journal { text-align: center; padding: 22px 24px; }
#panel-journal .phead { justify-content: center; }
#j-text { font-family: var(--serif); font-size: 21px; line-height: 1.5; font-style: italic; margin: 6px 0 14px; }
.primary {
    border: 1px solid rgba(125,255,192,.55); background: linear-gradient(90deg, rgba(60,200,140,.22), rgba(140,120,255,.22));
    border-radius: 14px; padding: 12px 28px; font-size: 16px; font-weight: 700; letter-spacing: .5px; cursor: pointer;
    margin-top: 8px; box-shadow: 0 8px 30px rgba(60,200,140,.15); transition: transform .15s, box-shadow .3s;
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(60,200,140,.3); }
.primary:active { transform: scale(.97); }

/* ---------- Titel- og slutskærm ---------- */
.screen {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 24px; background: linear-gradient(180deg, rgba(4,9,20,.7), rgba(4,9,20,.15) 55%, rgba(4,9,20,.7));
    overflow: auto; touch-action: pan-y; animation: fadeIn 1.4s ease-out both;
}
.screen.leaving { animation: fadeOut .8s ease-in both; }
@keyframes fadeOut { to { opacity: 0; } }
.title-wrap { max-width: 620px; }
.title-wrap > * { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.title-wrap > :nth-child(2) { animation-delay: .15s; }
.title-wrap > :nth-child(3) { animation-delay: .3s; }
.title-wrap > :nth-child(4) { animation-delay: .45s; }
.title-wrap > :nth-child(5) { animation-delay: .6s; }
.title-wrap > :nth-child(6) { animation-delay: .75s; }
.title-wrap > :nth-child(7) { animation-delay: .9s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.kicker { font-size: 12px; letter-spacing: 6px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.screen h1 {
    font-family: var(--serif); font-size: clamp(44px, 11vw, 84px); letter-spacing: 3px; margin: 0; font-weight: 600;
    line-height: 1.05; background: linear-gradient(90deg, #7dffc0, #9fd8ff, #d8a0ff, #7dffc0);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 22px rgba(125,255,192,.3)); animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both, aurora 12s linear infinite;
}
@keyframes aurora { to { background-position: 300% 0; } }
.sub { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-dim); margin: 4px 0 16px; }
.intro { line-height: 1.6; font-size: 15px; }
.controls { font-size: 13px; color: var(--ink-dim); margin: 12px 0; line-height: 1.7; }
.note { font-size: 11.5px; opacity: .55; margin-top: 18px; line-height: 1.5; }

@media (max-height: 520px) {
    .intro { font-size: 13px; }
    .screen h1 { font-size: 38px; }
    #objective { font-size: 11px; }
    .dc-main { font-size: 40px; }
}
@media (pointer: coarse) { .c-keys { display: none; } }
@media (pointer: fine) { .c-touch { display: none; } }
@media (max-width: 420px) {
    .bar { width: 92px; }
    #st-dog .bar { width: 56px; }
    #compass { top: calc(env(safe-area-inset-top) + 118px); left: auto; right: calc(env(safe-area-inset-right) + 12px); transform: none; }
}

/* ---------- SVG-ikoner ---------- */
svg { display: block; fill: currentColor; }
.stat .ico svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
#st-health .ico { color: #ff6b5a; }
#st-warm .ico { color: #ffb347; }
#st-food .ico { color: #9fd0e8; }
#st-dog .ico { color: #d8e6f5; }
.round .ic.svg svg { width: 26px; height: 26px; color: #f3ead9; }
.round.tiny svg { width: 19px; height: 19px; color: var(--ink); }
#btn-sound .mute { display: none; }
#btn-sound.muted .wave { display: none; }
#btn-sound.muted .mute { display: inline; }
#btn-fx.off { opacity: .5; }
.primary:disabled { opacity: .5; cursor: progress; }