/* Main page styles */
:root {
    --bg: #0b132b;
    --ink: #e6ecff;
    --card: #151c3b;
    --border: #2a3566;
}

/* Base styles */
html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica,
        Arial, sans-serif;
}

/* Page layout */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header styles */
header {
    padding: 24px 16px;
    text-align: center;
}

header h1 {
    margin: 0 0 0.25rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

header p {
    margin: 0.25rem auto 0;
    opacity: 0.88;
    max-width: 65ch;
}

/* Slot area layout */
.slot-area {
    margin-top: auto;
    display: flex;
    justify-content: center;
    padding: 24px 16px 40px;
}

.slot-card {
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Responsive scaling */
.scale-viewport {
    position: relative;
    width: clamp(280px, 92vw, 1100px);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.machine {
    transform-origin: top center;
    display: inline-block;
}

/* Utility classes */
.tag {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.85rem;
    opacity: 0.9;
}

.click-hint {
    opacity: 0.8;
}