/* ═══════════════════════════════════════════════════════════════
   MYDOG WEB – Opening- und Tür-Overlay (Thema „Creme & Holz“)
   Farb-Tokens nach Weltbuch 11.9, Maße in px ≈ dp.
   ═══════════════════════════════════════════════════════════════ */


:root {
    --paper: #FBF3E4;
    --plaster: #F2E3C9;
    --oat: #FFFAF0;
    --milk: #FFFDF8;
    --linen: #D9C2A0;
    --linen-deep: #BFA57F;
    --blend: #F7EBD3;
    --oak: #B97A4A;
    --dark-wood: #6E4630;
    --socket: #5A3A26;
    --cocoa: #3E2A1E;
    --latte: #7A5F4B;
    --oat-grey: #B8A794;
    --amber: #F59E0B;
    --amber-deep: #C77A06;
    --amber-light: #FCD58A;
    --brass: #E9B949;
    --brass-deep: #B8862F;
    --coral: #F07E62;
    --shade: 74, 52, 66;
    --night: #1B2246;
    --book-paper: #F4ECD8;
    --dove: #436E99;
    --honey: #FDE68A;

    /* eine feste Schriftfamilie für das ganze Spiel – Titel, Text, Beschriftungen und Schilder unterscheiden sich nur in der Stärke */
    --f-main: "Nunito", "Segoe UI", "Helvetica Neue", Roboto, system-ui, -apple-system, sans-serif;
    --f-title: var(--f-main);
    --f-text: var(--f-main);
    --f-label: var(--f-main);

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --shadow: 0 8px 24px rgba(var(--shade), 0.18), 0 2px 4px rgba(var(--shade), 0.25);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f26; }
body {
    font-family: var(--f-text);
    color: var(--cocoa);
    overscroll-behavior: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-touch-callout: none; }

#fade {
    position: fixed; inset: 0; pointer-events: none; opacity: 0;
    background: var(--blend);
    transition: opacity 0.3s ease;
    z-index: 40;
}

/* ── Titelkarte ─────────────────────────────────────────────── */
#title-card {
    position: fixed; inset: 0; z-index: 30;
    display: grid; place-items: center;
    background: var(--book-paper);
    cursor: pointer;
    transition: opacity 0.6s ease;
}
#title-card.out { opacity: 0; pointer-events: none; }
.title-inner { text-align: center; padding: 24px 16px; color: var(--night); }
#title-card h1 {
    font-family: var(--f-title); font-weight: 600;
    font-size: clamp(20px, 5.4vw, 44px); letter-spacing: 0.04em; line-height: 1.15;
    margin: 0 0 6px;
}
#title-card .brand { font-family: var(--f-title); font-weight: 600; font-size: clamp(16px, 3.6vw, 24px); letter-spacing: 0.3em; margin: 0; opacity: 0.85; }
#title-card .stamp { width: 74px; height: 74px; margin: 26px auto 18px; display: block; fill: var(--amber); transform: rotate(-12deg); animation: stamp 0.5s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
#title-card .hint { font-family: var(--f-label); font-size: 13px; color: var(--latte); margin: 0; animation: breathe 3s ease-in-out infinite; }
#title-card .hint.wait { visibility: hidden; }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.7); } to { opacity: 0.92; transform: rotate(-12deg) scale(1); } }
@keyframes breathe { 50% { opacity: 0.55; } }

/* ── Kissen-Knopf & Knöpfe ──────────────────────────────────── */
.cushion, .btn {
    font-family: var(--f-title); font-weight: 500; font-size: 18px;
    color: var(--cocoa);
    background: var(--oat);
    border: 2px solid var(--linen);
    border-radius: 16px;
    min-height: 48px; padding: 0 18px;
    box-shadow: 0 4px 0 var(--linen-deep), var(--shadow);
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.cushion:active, .btn:active { transform: translateY(3px) scale(0.96); box-shadow: 0 1px 0 var(--linen-deep), var(--shadow); }
.btn.primary { background: var(--amber); border-color: var(--amber-deep); box-shadow: 0 4px 0 var(--amber-deep), var(--shadow); }
.btn.primary:active { box-shadow: 0 1px 0 var(--amber-deep), var(--shadow); }
:focus-visible { outline: 3px solid var(--amber-light); outline-offset: 3px; }

#skip {
    position: fixed; z-index: 25;
    top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r));
    opacity: 0; transition: opacity 0.4s ease;
}
#skip.show { opacity: 1; }

/* ── Erzähler: Papierstreifen am unteren Rand ───────────────── */
#narration {
    position: fixed; z-index: 20; left: 50%;
    bottom: calc(22px + var(--safe-b));
    transform: translateX(-50%);
    width: min(680px, calc(100% - 32px));
    pointer-events: none;
}
#narration p {
    margin: 0;
    padding: 14px 22px 16px;
    background: var(--book-paper);
    color: var(--night);
    font-family: var(--f-text); font-weight: 600; font-size: clamp(15px, 4.3vw, 18px); line-height: 1.4; text-align: center;
    box-shadow: var(--shadow);
    clip-path: polygon(0 6%, 4% 0, 12% 5%, 22% 1%, 33% 6%, 45% 2%, 57% 5%, 69% 0, 80% 5%, 91% 1%, 100% 5%, 99% 95%, 90% 100%, 78% 96%, 66% 100%, 54% 95%, 42% 99%, 30% 95%, 18% 100%, 8% 96%, 0 100%);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
#narration p.show { opacity: 1; transform: none; }
/* Flüstern sieht aus wie jede andere Zeile: gleiche Schrift, gleiche Stärke (einheitlicher Stil) */

/* ── Tür-Overlay ────────────────────────────────────────────── */
#knock-area {
    position: fixed; inset: 0; z-index: 5;
    background: transparent; border: 0; padding: 0; margin: 0;
    cursor: pointer;
}
#door-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity 0.8s ease; }
#door-ui.out { opacity: 0; }

#bubble {
    position: absolute; left: 0; top: 0;
    min-width: 180px; height: 64px; padding: 0 22px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #FFFFFF;
    border: 3px solid var(--linen);
    border-radius: 50%;
    font-family: var(--f-title); font-weight: 600; font-size: 24px; color: var(--dove);
    white-space: nowrap;
    box-shadow: var(--shadow);
    will-change: transform;
}
#bubble::after, #bubble::before {
    content: ""; position: absolute; right: 26px; bottom: -17px;
    border-style: solid; border-width: 18px 0 0 18px;
    border-color: var(--linen) transparent transparent transparent;
    transform: skewX(-22deg);
}
#bubble::after { right: 29px; bottom: -11px; border-width: 13px 0 0 13px; border-color: #FFFFFF transparent transparent transparent; }
#bubble.floating { animation: float 2.4s ease-in-out infinite; }
#bubble.wiggle { animation: wiggle 0.6s ease; }
@keyframes float { 50% { translate: 0 -4px; } }
@keyframes wiggle { 20% { rotate: -6deg; } 45% { rotate: 5deg; } 70% { rotate: -3deg; } 100% { rotate: 0deg; } }
#bubble .paws { display: none; gap: 7px; }
#bubble.waiting .txt { display: none; }
#bubble.waiting .paws { display: inline-flex; }
#bubble .paws i {
    width: 13px; height: 13px; display: block;
    background: var(--dove);
    border-radius: 50% 50% 45% 45%;
    animation: hop 0.9s ease-in-out infinite;
}
#bubble .paws i:nth-child(2) { animation-delay: 0.15s; }
#bubble .paws i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 30% { transform: translateY(-7px); } 60% { transform: none; } }

#loading {
    position: fixed; inset: 0; z-index: 42;
    display: grid; place-content: center; justify-items: center; gap: 12px;
    background: var(--blend);
    font-family: var(--f-text); font-weight: 600; font-size: 16px; color: var(--cocoa);
}
/* Fortschritt als Knochen: Balken mit runden Enden-Knubbeln */
#loading .bone { position: relative; width: 220px; height: 18px; }
#loading .bone::before, #loading .bone::after {
    content: ""; position: absolute; top: -7px; width: 16px; height: 32px;
    border-radius: 8px; background: var(--amber); box-shadow: 0 2px 0 var(--amber-deep);
}
#loading .bone::before { left: -8px; }
#loading .bone::after { right: -8px; background: var(--paper); border: 2px solid var(--amber-deep); }
#loading .fill {
    height: 100%; border-radius: 9px;
    background: linear-gradient(90deg, var(--amber) var(--p, 0%), var(--paper) var(--p, 0%));
    border: 2px solid var(--amber-deep);
}

.zettel {
    position: absolute; left: 50%; top: calc(18% + var(--safe-t));
    width: 280px; max-width: calc(100% - 32px);
    transform: translateX(-50%) rotate(-2deg);
    padding: 22px 18px 16px;
    background: var(--oat);
    font-family: var(--f-text); font-size: 16px; line-height: 1.4; color: var(--cocoa);
    box-shadow: var(--shadow);
    animation: pin 0.24s ease-out;
}
.zettel::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
    border-radius: 50%; background: var(--amber); box-shadow: 0 2px 0 var(--amber-deep);
}
@keyframes pin { from { opacity: 0; transform: translateX(-50%) rotate(-6deg) translateY(-10px); } }

#door-line {
    position: absolute; left: 16px; right: 16px; margin: 0;
    bottom: calc(56px + var(--safe-b));
    text-align: center;
    font-family: var(--f-text); font-weight: 600; font-size: 16px; color: var(--honey);
    text-shadow: 0 2px 6px rgba(var(--shade), 0.4), 0 0 2px rgba(var(--shade), 0.6);
}

#gear {
    position: fixed; z-index: 26;
    top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r));
    width: 48px; height: 48px; padding: 10px;
    border: 2px solid var(--dark-wood); border-radius: 16px;
    background: var(--oak);
    box-shadow: 0 4px 0 var(--socket), var(--shadow);
    cursor: pointer;
}
#gear svg { width: 100%; height: 100%; fill: var(--paper); }
#gear:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--socket); }

#version {
    position: fixed; z-index: 26;
    left: calc(10px + var(--safe-l)); bottom: calc(6px + var(--safe-b));
    font-family: var(--f-label); font-size: 11px; color: var(--oat-grey);
    pointer-events: none;
}

/* ── Kissen-Karten ──────────────────────────────────────────── */
.cushion-card {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--linen);
    border-radius: 24px;
    padding: 22px 22px 20px;
    box-shadow: var(--shadow);
}
.cushion-card::before {
    content: ""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none;
    border: 1.5px dashed rgba(191, 165, 127, 0.7);
}
.cushion-card h2 { font-family: var(--f-title); font-weight: 600; font-size: 22px; margin: 4px 4px 14px; }
.cushion-card .actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }

#settings {
    position: fixed; z-index: 35; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 32px));
    max-height: calc(100% - 24px - var(--safe-t) - var(--safe-b)); overflow: auto;
    animation: sheet 0.28s ease-out;
}
@keyframes sheet { from { opacity: 0; transform: translate(-50%, -46%); } }
#settings .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid rgba(191, 165, 127, 0.35); }
#settings .label { font-weight: 600; font-size: 16px; }
#settings input[type="range"] { width: 46%; accent-color: var(--amber); }
#settings input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--amber); }
#settings select { font: inherit; font-size: 15px; min-height: 40px; border-radius: 12px; border: 2px solid var(--linen); background: var(--oat); color: var(--cocoa); padding: 0 8px; }

#berni-tip {
    position: fixed; z-index: 22; left: 50%;
    bottom: calc(92px + var(--safe-b));
    transform: translateX(-50%);
    width: min(420px, calc(100% - 32px));
    display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: start;
    animation: card-in 0.28s ease-out;
}
@keyframes card-in { from { opacity: 0; transform: translate(-50%, 14px); } }
#berni-tip .medal svg { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--brass); box-shadow: 0 2px 0 var(--brass-deep); }
#berni-tip .text { margin: 2px 0 0; font-size: clamp(15px, 4.2vw, 17px); line-height: 1.4; }
#berni-tip .text b { font-family: var(--f-title); font-weight: 600; }
#berni-tip .btn { grid-column: 1 / -1; justify-self: end; margin-top: 8px; }
/* Querformat: Karte in die Ecke, damit Berni im Torbogen sichtbar bleibt */
@media (min-aspect-ratio: 1/1) {
    #berni-tip { left: auto; right: calc(16px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); transform: none; width: min(380px, 40vw); animation: none; }
}

#coin-badge {
    position: fixed; z-index: 21; left: 50%;
    bottom: calc(18px + var(--safe-b));
    transform-origin: 50% -10px;
    translate: -50% 0;
    animation: swing-in 1.4s ease-out;
}
#coin-badge .hook { display: block; width: 10px; height: 10px; margin: 0 auto -3px; border: 3px solid var(--brass-deep); border-bottom: 0; border-radius: 8px 8px 0 0; }
#coin-badge .tag {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px 6px 10px;
    background: linear-gradient(var(--brass), #dcaa3c);
    border: 2px solid var(--brass-deep);
    border-radius: 14px;
    font-family: var(--f-title); font-weight: 600; font-size: 17px; color: var(--cocoa);
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow);
}
#coin-badge svg { width: 20px; height: 20px; }
@keyframes swing-in { 0% { opacity: 0; rotate: 28deg; } 25% { opacity: 1; rotate: -16deg; } 50% { rotate: 9deg; } 75% { rotate: -4deg; } 100% { rotate: 0deg; } }

#end-card {
    position: fixed; inset: 0; z-index: 45;
    display: grid; place-items: center; padding: 16px;
    background: var(--blend);
    animation: fade-in 0.5s ease;
}
#end-card .cushion-card { width: min(420px, 100%); max-height: 100%; overflow: auto; }
#end-card p { font-size: 17px; line-height: 1.45; margin: 0 4px; }
@keyframes fade-in { from { opacity: 0; } }

.fallback {
    position: fixed; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px;
    background: var(--book-paper); color: var(--night);
    font-family: var(--f-text); font-size: 18px; text-align: center;
}

/* ── Wurf-Vorschau (#zucht) ─────────────────────────────────── */
#litter-card {
    position: fixed; z-index: 22; left: 50%; bottom: calc(12px + var(--safe-b));
    transform: translateX(-50%);
    width: min(440px, calc(100% - 24px));
    max-height: 46vh; overflow: auto;
    padding: 16px 18px 14px;
}
#litter-card h2 { margin: 2px 4px 4px; font-size: 19px; }
#litter-card .parents { margin: 0 4px 6px; font-weight: 700; font-size: 15px; color: var(--latte); }
#litter-card .pups { margin: 0; padding: 0 4px 0 24px; font-size: 14px; line-height: 1.45; }
#litter-card .actions { margin-top: 10px; }
@media (min-aspect-ratio: 1/1) {
    #litter-card { left: auto; right: calc(16px + var(--safe-r)); transform: none; width: min(380px, 42vw); max-height: calc(100% - 32px); }
}

/* ── Handy: schmale Hochformate und flache Querformate ─────── */
@media (max-width: 380px) {
    #bubble { min-width: 150px; height: 56px; padding: 0 16px; font-size: 20px; }
    #berni-tip { grid-template-columns: 44px 1fr; gap: 6px 10px; padding: 16px 16px 14px; }
    #berni-tip .medal svg { width: 44px; height: 44px; }
    .cushion, .btn { font-size: 16px; padding: 0 14px; }
    #title-card .stamp { width: 62px; height: 62px; }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
    #narration { width: min(560px, calc(100% - 140px)); bottom: calc(10px + var(--safe-b)); }
    #narration p { padding: 10px 18px 12px; font-size: 15px; }
    #berni-tip { bottom: calc(12px + var(--safe-b)); padding: 14px 16px 12px; }
    #berni-tip .text { font-size: 15px; }
    #berni-tip .btn { margin-top: 4px; min-height: 44px; }
    #door-line { bottom: calc(14px + var(--safe-b)); font-size: 14px; }
    #coin-badge { left: calc(16px + var(--safe-l)); translate: 0 0; }
    .zettel { top: calc(10% + var(--safe-t)); }
    #title-card .stamp { width: 52px; height: 52px; margin: 14px auto 10px; }
}

/* ── Hunde-Ausstellung (#showroom) ──────────────────────────── */
.sr-top {
    position: fixed; z-index: 24; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t));
    display: flex; align-items: center; gap: 8px;
}
.sr-nav, .sr-sex button {
    width: 44px; height: 44px; flex: none; border-radius: 14px; border: 2px solid var(--linen);
    background: var(--oat); color: var(--cocoa); font: 600 24px/1 var(--f-title); box-shadow: 0 3px 0 var(--linen-deep); cursor: pointer;
}
.sr-title { flex: 1; min-width: 0; text-align: center; background: rgba(251, 243, 228, 0.92); border-radius: 14px; padding: 4px 10px; box-shadow: var(--shadow); }
.sr-title b { display: block; font: 600 clamp(15px, 4.4vw, 19px)/1.2 var(--f-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-title small { display: block; font-size: 12px; color: var(--latte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sex { display: flex; gap: 4px; }
.sr-sex button { width: 40px; font-size: 20px; }
.sr-sex button.on { background: var(--amber); border-color: var(--amber-deep); box-shadow: 0 3px 0 var(--amber-deep); }
.sr-panel {
    position: fixed; z-index: 23; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%);
    width: min(460px, calc(100% - 20px)); max-height: 46vh; overflow: auto; padding: 12px 14px 14px;
}
.sr-panel::before { display: none; }
.sr-tabs { display: flex; gap: 4px; margin-bottom: 10px; position: sticky; top: -12px; background: var(--paper); padding-top: 2px; z-index: 1; }
.sr-tabs button { flex: 1; min-height: 40px; border-radius: 12px; border: 2px solid var(--linen); background: var(--oat); font: 600 15px var(--f-title); color: var(--cocoa); cursor: pointer; }
.sr-tabs button.on { background: var(--oak); border-color: var(--dark-wood); color: var(--paper); }
.sr-stat { display: grid; grid-template-columns: 112px 1fr 28px; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0; }
.sr-stat i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--amber) var(--v), rgba(191, 165, 127, 0.3) var(--v)); }
.sr-stat em { font-style: normal; font-weight: 700; text-align: right; }
.sr-facts { font-size: 14px; line-height: 1.5; margin: 10px 2px 6px; }
.sr-note { font-size: 13px; line-height: 1.45; color: var(--latte); margin: 6px 2px 0; }
.sr-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.sr-chip { min-height: 38px; padding: 0 12px; border-radius: 19px; border: 2px solid var(--linen); background: var(--oat); color: var(--cocoa); font: 600 14px var(--f-text); cursor: pointer; }
.sr-chip.on { background: var(--amber-light); border-color: var(--amber); }
.sr-slider { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 2px 0; }
.sr-slider input { width: 100%; accent-color: var(--amber); }
.sr-slider em { font-style: normal; font-size: 12px; text-align: right; color: var(--latte); }
.sr-select { width: 100%; min-height: 42px; border-radius: 12px; border: 2px solid var(--linen); background: var(--oat); font: 600 15px var(--f-text); color: var(--cocoa); padding: 0 8px; }
.sr-pups { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.45; }
.sr-out { width: 100%; min-height: 60px; font: 12px monospace; border-radius: 10px; border: 1px solid var(--linen); }
@media (min-aspect-ratio: 1/1) {
    .sr-top { right: auto; width: min(520px, calc(100% - 420px)); }
    .sr-panel { left: auto; right: calc(12px + var(--safe-r)); top: calc(10px + var(--safe-t)); bottom: calc(10px + var(--safe-b)); transform: none; width: min(380px, 42vw); max-height: none; }
}

/* Reduzierte Bewegung: nichts atmet oder pendelt */
body.rm #bubble.floating, body.rm #title-card .hint, body.rm #bubble .paws i { animation: none; }
body.rm #coin-badge { animation: fade-in 0.25s ease; }
#title-card .hint.load { animation: none; opacity: 0.8; }