/* Diorama-Easter-Egg: Vollbild-Canvas, Overlays im hellen Retro-Look
   (harte Kanten, Versatz-Schatten statt weicher Glows). */

html,
body
{
    margin:      0;
    height:      100%;
    overflow:    hidden;
    background:  #1a1a2e;
    color:       #1f2937;
    font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
}

#diorama
{
    display:      block;
    width:        100vw;
    height:       100vh;
    touch-action: none;
    cursor:       grab;
}

#diorama:active  { cursor: grabbing; }
#diorama.hovering { cursor: pointer; }
#diorama.pixelated { image-rendering: pixelated; }

body.no-webgl #diorama,
body.no-webgl .d-header,
body.no-webgl .d-nav,
body.no-webgl .d-hint,
body.no-webgl .d-eggs
{
    display: none;
}

.d-panel,
.d-header,
.d-card,
.d-toast,
.d-nav button,
.d-back,
.d-eggs
{
    background:  #fdfcf8;
    border:      2px solid #1f2937;
    box-shadow:  4px 4px 0 #1f2937;
}

.d-back,
.d-eggs
{
    position:        fixed;
    top:             1rem;
    margin:          0;
    padding:         0.3rem 0.6rem;
    font-size:       0.8rem;
    color:           inherit;
    text-decoration: none;
}

.d-back  { left: 1rem; }
.d-back:hover,
.d-back:focus-visible { background: #fde68a; }

.d-eggs
{
    right:       1rem;
    font-family: inherit;
    cursor:      pointer;
}

.d-eggs:hover,
.d-eggs:focus-visible { background: #fde68a; }
.d-eggs.all { background: #fde68a; }

.d-header
{
    position:   fixed;
    top:        1rem;
    left:       50%;
    transform:  translateX(-50%);
    padding:    0.5rem 1rem;
    text-align: center;
    max-width:  calc(100vw - 16rem);
}

.d-header h1
{
    margin:    0;
    font-size: 1.1rem;
}

.d-index,
.d-sub
{
    margin:    0;
    font-size: 0.75rem;
    color:     #6b7280;
}

.d-nav
{
    position:    fixed;
    bottom:      3rem;
    left:        50%;
    transform:   translateX(-50%);
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.d-nav > button
{
    width:     2.5rem;
    height:    2.5rem;
    font-size: 1.5rem;
    font-family: inherit;
    cursor:    pointer;
    color:     inherit;
}

.d-nav > button:hover,
.d-nav > button:focus-visible { background: #fde68a; }
.d-nav > button:active        { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1f2937; }

.d-dots
{
    display: flex;
    gap:     0.4rem;
}

.d-dots button
{
    width:      0.7rem;
    height:     0.7rem;
    padding:    0;
    border:     2px solid #fdfcf8;
    background: transparent;
    cursor:     pointer;
    transform:  rotate(45deg);
}

.d-dots button[aria-current="true"] { background: #fde68a; border-color: #fde68a; }

.d-card
{
    position:   fixed;
    top:        0;
    left:       0;
    width:      min(22rem, calc(100vw - 1rem));
    max-height: 45vh;
    overflow-y: auto;
    padding:    0.9rem 1rem;
    box-sizing: border-box;
    font-size:  0.85rem;
    line-height: 1.5;
}

/* Zeiger von der Karte zum Objekt, eigenes Element (die Karte scrollt und würde ihn abschneiden). */
.d-tail
{
    position:       fixed;
    top:            0;
    left:           0;
    width:          14px;
    height:         14px;
    background:     #fdfcf8;
    border:         2px solid #1f2937;
    border-top:     0;
    border-left:    0;
    transform:      translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
    z-index:        1;
}

/* Zeigerrichtung: rotiertes Quadrat, die beiden umrandeten Kanten bilden die Spitze. */
.d-tail[data-side="below"] { border: 2px solid #1f2937; border-right: 0; border-bottom: 0; }
.d-tail[data-side="right"] { border: 2px solid #1f2937; border-top: 0; border-right: 0; }
.d-tail[data-side="left"]  { border: 2px solid #1f2937; border-bottom: 0; border-left: 0; }

.d-card.behind,
.d-tail.behind { visibility: hidden; }

.d-card h2
{
    margin:        0 1.5rem 0.4rem 0;
    font-size:     1rem;
}

.d-card p { margin: 0 0 0.6rem; }

.d-card a
{
    color:       #0f766e;
    font-weight: bold;
}

.d-card-close
{
    position:   absolute;
    top:        0.3rem;
    right:      0.5rem;
    border:     0;
    background: none;
    font-size:  1.3rem;
    cursor:     pointer;
    color:      inherit;
}

.d-card .d-card-egg
{
    display:     inline-block;
    margin:      0 0 0.5rem;
    padding:     0.1rem 0.4rem;
    background:  #fde68a;
    font-size:   0.75rem;
    font-weight: bold;
}

.d-toast
{
    position:   fixed;
    top:        6.5rem;
    left:       50%;
    transform:  translateX(-50%);
    margin:     0;
    padding:    0.6rem 1.2rem;
    font-size:  1.2rem;
    font-weight: bold;
    background: #fde68a;
}

.d-hint
{
    position:       fixed;
    bottom:         0.75rem;
    left:           50%;
    transform:      translateX(-50%);
    margin:         0;
    width:          calc(100vw - 2rem);
    text-align:     center;
    font-size:      0.75rem;
    color:          #e5e7eb;
    opacity:        0.55;
    pointer-events: none;
}

.diorama-fallback
{
    position:   fixed;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    margin:     0;
    color:      #e5e7eb;
    text-align: center;
}

.d-intro
{
    position:        fixed;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
    background:      rgba(10, 10, 20, 0.55);
    z-index:         10;
}

.d-intro-box
{
    width:       min(30rem, 100%);
    max-height:  85vh;
    overflow-y:  auto;
    padding:     1.2rem 1.4rem;
    box-sizing:  border-box;
    background:  #fdfcf8;
    border:      2px solid #1f2937;
    box-shadow:  6px 6px 0 #1f2937;
    font-size:   0.9rem;
    line-height: 1.55;
}

.d-intro-box h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.d-intro-box p  { margin: 0 0 0.7rem; }
.d-intro-box .d-card-egg
{
    display:     inline-block;
    padding:     0.1rem 0.4rem;
    background:  #fde68a;
    font-size:   0.75rem;
    font-weight: bold;
}

.d-intro-start
{
    margin-top:  0.3rem;
    padding:     0.45rem 1.1rem;
    font-family: inherit;
    font-size:   0.9rem;
    font-weight: bold;
    background:  #fde68a;
    border:      2px solid #1f2937;
    box-shadow:  3px 3px 0 #1f2937;
    cursor:      pointer;
}

.d-intro-start:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1f2937; }

[hidden] { display: none !important; }

@media (max-width: 640px)
{
    .d-header  { top: 3.6rem; max-width: calc(100vw - 2rem); }
    .d-toast   { top: 10rem; }
}