/* Copyright (c) 2004-2026 Guthrie Adams. All rights reserved. */
.arcade-hero { margin: 0 0 24px; }
.hero-stage {
    position: relative;
    aspect-ratio: 4064 / 2144;
    overflow: hidden;
    background: #0b0b0d;
    border: 1px solid #36363a;
    border-radius: 8px;
    isolation: isolate;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 900ms;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide > a:not(.hero-tile), .hero-slide > a:not(.hero-tile) > img {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-slide > a:not(.hero-tile) > img { object-fit: contain; }
/* Real screenshots pinned to a deliberately untidy drafting table. */
.hero-collage {
    background-color: #1d3031;
    background-image: linear-gradient(#a3cfbb0d 1px, transparent 1px), linear-gradient(90deg,#a3cfbb0d 1px,transparent 1px), radial-gradient(ellipse at 20% 30%,#42615a77,transparent 70%);
    background-size: 24px 24px,24px 24px,100% 100%;
    container-type: inline-size;
}
.hero-tile {
    position: absolute;
    display: block;
    width: 43%;
    padding: .8% .8% 3.2%;
    background: #eee9da;
    color: #282822;
    box-shadow: 2px 8px 12px #0008;
    text-decoration: none;
    transform: rotate(var(--tilt));
    transition: transform 180ms ease;
}
.hero-tile::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 26%; height: 7%; left: 34%; top: -3%;
    background: #d9c38fbf;
    transform: rotate(-5deg);
    clip-path: polygon(2% 0,98% 3%,100% 94%,0 100%);
}
.hero-tile:nth-of-type(1) { left: 5%; top: 13%; --tilt: -8deg; z-index: 2; width: 46%; }
.hero-tile:nth-of-type(2) { left: 55%; top: 7%; --tilt: 9deg; z-index: 1; width: 38%; }
.hero-tile:nth-of-type(3) { left: 8%; top: 61%; --tilt: 5deg; z-index: 3; width: 28%; }
.hero-tile:nth-of-type(4) { left: 45%; top: 47%; --tilt: -6deg; z-index: 4; width: 42%; }
.hero-tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-tile span {
    position: absolute; left: 4%; bottom: 3%;
    font: 600 clamp(8px,1.8cqw,20px) 'Chalkboard SE','Comic Sans MS',cursive;
}
.hero-tile:hover, .hero-tile:focus-visible { transform: rotate(0) scale(1.04); z-index: 6; }
.hero-doodle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: #eac76f; }
.hero-doodle path, .hero-doodle circle, .hero-doodle ellipse { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-doodle text { fill: currentColor; font: 17px 'Chalkboard SE','Comic Sans MS',cursive; }
.hero-note { position: absolute; z-index: 5; background: #f2d46d; color: #30291d; padding: 1% 1.5%; box-shadow: 2px 3px 5px #0005; transform: rotate(-7deg); font: 600 clamp(8px,1.7cqw,18px)/1.2 'Chalkboard SE','Comic Sans MS',cursive; }
.hero-note.note-top { top: 2%; left: 30%; }
.hero-note.note-bottom { bottom: 3%; left: 40%; transform: rotate(5deg); }
.hero-collage.experiments { background-color: #302939; }
.hero-collage.experiments .hero-tile:nth-of-type(1) { top: 12%; left: 7%; --tilt: 6deg; width: 44%; }
.hero-collage.experiments .hero-tile:nth-of-type(2) { top: 12%; left: 63%; --tilt: -9deg; width: 29%; }
.hero-collage.experiments .hero-tile:nth-of-type(3) { top: 49%; left: 18%; --tilt: -5deg; width: 38%; }
.hero-collage.experiments .hero-tile:nth-of-type(4) { top: 53%; left: 62%; --tilt: 7deg; width: 31%; }
.editor-desk, .editor-blueprint { container-type: inline-size; background: #35322c; }
.editor-desk { background-image: repeating-linear-gradient(3deg,#ffffff03 0 1px,transparent 1px 8px),radial-gradient(ellipse at 30% 20%,#77634b70,transparent 75%); }
.desk-heading, .blueprint-heading { position: absolute; top: 4%; left: 4%; color: #f4dfab; font: 700 2.2cqw/1.1 monospace; letter-spacing: .1em; }
.desk-heading small, .blueprint-heading small { display: block; margin-top: .6em; font-size: 1.1cqw; letter-spacing: .08em; font-weight: 400; }
.hero-slide > a.editor-photo { position: absolute; display: block; height: auto; padding: .8% .8% 3.2%; background: #eee8da; box-shadow: 3px 10px 18px #0009; color: #282822; text-decoration: none; transform: rotate(var(--tilt)); }
.hero-slide > a.editor-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.editor-photo span { position: absolute; left: 4%; bottom: 3%; font: 600 1.5cqw 'Chalkboard SE','Comic Sans MS',cursive; }
.hero-slide > a.play-photo { width: 59%; left: 4%; top: 24%; --tilt: -5deg; z-index: 2; }
.hero-slide > a.hierarchy-photo { width: 36%; left: 58%; top: 9%; --tilt: 8deg; z-index: 1; }
.hero-slide > a.pickup-photo { width: 33%; left: 63%; top: 51%; --tilt: -7deg; z-index: 3; }
.hero-slide > a.hierarchy-photo > img { aspect-ratio: 1.65; object-position: right; }
.hero-slide > a.pickup-photo > img { aspect-ratio: 1.75; }
.desk-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; color: #edcf83; }
.desk-marks path, .desk-marks circle { stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.desk-marks text { fill: currentColor; font: 16px 'Chalkboard SE','Comic Sans MS',cursive; }
.editor-blueprint { background-color: #10354e; background-image: linear-gradient(#9cdbff18 1px,transparent 1px),linear-gradient(90deg,#9cdbff18 1px,transparent 1px); background-size: 20px 20px; }
.blueprint-heading { color: #d5edff; z-index: 3; }
.hero-slide > a.blueprint-sheet { position: absolute; width: 80%; height: 76%; left: 3%; top: 17%; transform: rotate(-3deg); border: 1px solid #c0eaff77; box-shadow: 4px 8px 15px #0006; overflow: hidden; background: #17608b; }
.hero-slide > a.blueprint-sheet > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.6) brightness(1.3); mix-blend-mode: screen; opacity: .8; }
.hero-slide > a.creature-photo { width: 41%; left: 55%; top: 37%; --tilt: 7deg; z-index: 3; }
.hero-slide > a.creature-photo > img { aspect-ratio: 1.45; object-fit: cover; object-position: 35% 40%; }
.editor-blueprint .desk-marks { color: #d5edff; }
.hero-controls { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.hero-caption { margin: 0; color: #aaa; font-size: 13px; line-height: 1.5; flex: 1; }
.hero-navigation { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.hero-navigation button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #bbb;
    font: inherit;
    cursor: pointer;
}
.hero-navigation button:hover { background: #303034; color: white; }
.hero-navigation button:focus-visible, .hero-tile:focus-visible { outline: 2px solid #ef7777; outline-offset: -2px; }
.hero-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #65656b; }
.hero-dot[aria-current="true"]::after { background: #ffbf45; box-shadow: 0 0 8px #ed5b3666; }
@media (max-width: 580px) {
    .hero-controls { flex-wrap: wrap; gap: 5px; }
    .hero-caption { flex-basis: 100%; min-height: 3em; }
    .hero-navigation { margin-left: auto; }

}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }