body.play-page {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at top left, rgba(217, 163, 74, 0.16), transparent 32%),
                radial-gradient(circle at bottom right, rgba(30, 135, 240, 0.14), transparent 26%),
                linear-gradient(180deg, #111827 0%, #0f172a 52%, #020617 100%);
            color: #f8fafc;
        }

        .play-shell {
            max-width: 1440px;
            margin: 0 auto;
            padding: 24px;
        }

        .play-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
        }

        .play-topbar__meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            color: rgba(248, 250, 252, 0.76);
        }

        .play-topbar__badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(248, 250, 252, 0.12);
            color: #f8fafc;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .play-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: 20px;
        }

        .play-stage,
        .play-panel {
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            background: rgba(15, 23, 42, 0.86);
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.36);
            backdrop-filter: blur(18px);
        }

        .play-stage {
            position: relative;
            overflow: hidden;
            min-height: 720px;
        }

        .play-stage__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding: 24px 28px 0 28px;
        }

        .play-stage__title {
            margin: 0;
            font-size: 32px;
            line-height: 1.2;
            color: #fff;
        }

        .play-stage__subtitle {
            margin-top: 10px;
            color: rgba(248, 250, 252, 0.68);
            font-size: 14px;
            line-height: 1.8;
        }

        .play-stage__viewport {
            position: relative;
            min-height: 600px;
            margin: 24px;
            border-radius: 24px;
            overflow: hidden;
            background:
                linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.96));
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .play-stage__footer {
            display: grid;
            grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
            gap: 14px;
            margin: 0 24px 24px;
            align-items: stretch;
        }

        .play-stage__save-card {
            padding: 18px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .play-stage__viewport::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.04), transparent 28%),
                radial-gradient(circle at top, rgba(217,163,74,0.16), transparent 34%);
            pointer-events: none;
            z-index: 1;
        }

        .play-canvas {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            min-height: 600px;
        }

        .play-status {
            position: absolute;
            inset: 0;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
        }

        .play-status__card {
            width: min(560px, 100%);
            padding: 28px;
            border-radius: 24px;
            background: rgba(2, 6, 23, 0.76);
            border: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
        }

        .play-status__eyebrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(30, 135, 240, 0.12);
            color: #7dd3fc;
            font-size: 12px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .play-status__title {
            margin: 16px 0 10px;
            font-size: 28px;
            color: #fff;
        }

        .play-status__desc {
            margin: 0;
            color: rgba(248, 250, 252, 0.72);
            font-size: 15px;
            line-height: 1.9;
        }

        .play-status__actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 20px;
        }

        .play-panel {
            padding: 24px;
        }

        .play-panel__cover {
            width: 100%;
            height: 220px;
            border-radius: 22px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.04);
        }

        .play-panel__title {
            margin: 18px 0 6px;
            font-size: 26px;
            color: #fff;
        }

        .play-panel__desc {
            margin: 0;
            color: rgba(248, 250, 252, 0.68);
            font-size: 14px;
            line-height: 1.9;
        }

        .play-panel__list {
            list-style: none;
            padding: 0;
            margin: 22px 0 0;
            display: grid;
            gap: 14px;
        }

        .play-panel__item {
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .play-panel__label {
            display: block;
            font-size: 12px;
            color: rgba(248, 250, 252, 0.46);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }

        .play-panel__value {
            color: #fff;
            font-size: 14px;
            line-height: 1.7;
            word-break: break-word;
        }

        .play-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px;
        }

        .play-actions .uk-button {
            border-radius: 999px;
            padding-inline: 20px;
            color: #fff;
        }

        .play-actions .uk-button-default {
            border-color: rgba(255, 255, 255, 0.42);
            background: rgba(255, 255, 255, 0.06);
        }

        .play-actions .uk-button-primary {
            border-color: rgba(14, 165, 233, 0.64);
            background: rgba(14, 165, 233, 0.78);
        }

        .play-actions .uk-button:hover,
        .play-actions .uk-button:focus,
        .play-actions .uk-button:active {
            color: #fff;
        }

        .play-actions .uk-button-default:hover,
        .play-actions .uk-button-default:focus {
            border-color: rgba(255, 255, 255, 0.68);
            background: rgba(255, 255, 255, 0.14);
        }

        .play-actions .uk-button-primary:hover,
        .play-actions .uk-button-primary:focus {
            border-color: rgba(56, 189, 248, 0.82);
            background: rgba(2, 132, 199, 0.9);
        }

        .play-help {
            margin-top: 24px;
            padding: 18px;
            border-radius: 20px;
            background: rgba(14, 165, 233, 0.08);
            border: 1px solid rgba(125, 211, 252, 0.18);
            color: rgba(248, 250, 252, 0.76);
            font-size: 13px;
            line-height: 1.8;
        }

        .play-stage__footer .play-help {
            margin-top: 0;
        }

        .play-save {
            margin-top: 14px;
            display: grid;
            gap: 12px;
        }

        .play-save__row {
            display: grid;
            grid-template-columns: minmax(96px, 1fr) 58px 58px;
            gap: 8px;
            align-items: center;
        }

        .play-save__select {
            width: 100%;
            min-width: 0;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.16);
            background: rgba(15, 23, 42, .72);
            color: #fff;
            padding: 8px 12px;
        }

        .play-save .uk-button {
            border-radius: 999px;
            min-width: 0;
            padding: 0 12px;
            line-height: 38px;
            white-space: nowrap;
        }

        .play-save .uk-button-default {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.34);
            background: rgba(255, 255, 255, 0.06);
        }

        .play-save .uk-button-default:hover,
        .play-save .uk-button-default:focus {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.52);
            background: rgba(255, 255, 255, 0.12);
        }

        .play-save__hint {
            color: rgba(248, 250, 252, 0.58);
            font-size: 12px;
            line-height: 1.7;
        }

        .is-hidden {
            display: none !important;
        }

        @media (max-width: 1100px) {
            .play-grid {
                grid-template-columns: 1fr;
            }

            .play-stage__footer {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .play-shell {
                padding: 16px;
            }

            .play-stage {
                min-height: 560px;
            }

            .play-stage__header,
            .play-stage__viewport,
            .play-panel {
                padding-left: 18px;
                padding-right: 18px;
            }

            .play-stage__viewport {
                margin: 18px;
                min-height: 420px;
            }

            .play-stage__footer {
                margin: 0 18px 18px;
            }

            .play-canvas {
                min-height: 420px;
            }

            .play-stage__title {
                font-size: 26px;
            }
        }