.tg-page {
    display: grid;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
}

.tg-page-head {
    position: relative;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: 26px;
    color: #f8f1dd;
    background:
        radial-gradient(circle at top right, rgba(255, 227, 161, .26), transparent 24%),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 22%),
        linear-gradient(135deg, #2e5c5d 0%, #224041 42%, #17292a 100%);
    box-shadow: 0 22px 48px rgba(20, 28, 24, .22);
}

.tg-page-head::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.08), transparent 34%),
        repeating-linear-gradient(145deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 10px, transparent 10px, transparent 24px);
    pointer-events: none;
}

.tg-page-head > * {
    position: relative;
    z-index: 1;
}

.tg-page-head h2 {
    margin: 4px 0 8px;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.04;
    font-family: Georgia, "Palatino Linotype", serif;
}

.tg-page-head p {
    margin: 0;
    max-width: 880px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(248, 241, 221, .86);
}

.tg-page-kicker {
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(248, 241, 221, .72);
}

.tg-shell {
    --tg-paper: #f7efdc;
    --tg-ink: #1d2b1f;
    --tg-accent: #c5672f;
    --tg-green: #4b8f4a;
    --tg-blue: #3c7ca8;
    --tg-red: #b4473f;
    --tg-gold: #ce9d2a;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.76), transparent 18%),
        radial-gradient(circle at 88% 10%, rgba(255,216,145,.38), transparent 24%),
        radial-gradient(circle at 82% 82%, rgba(108, 157, 104, .12), transparent 22%),
        linear-gradient(135deg, #f7edd0 0%, #e8cc90 38%, #ca9758 100%);
    border: 2px solid #7f6732;
    border-radius: 24px;
    padding: 20px;
    box-shadow:
        0 28px 70px rgba(69, 45, 16, .24),
        inset 0 1px 0 rgba(255,255,255,.5);
    color: var(--tg-ink);
    position: relative;
    overflow: hidden;
}

.tg-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.16), transparent 36%),
        repeating-linear-gradient(
            135deg,
            rgba(127,103,50,.05) 0,
            rgba(127,103,50,.05) 8px,
            transparent 8px,
            transparent 22px
        );
    pointer-events: none;
}

.tg-shell::after {
    content: "";
    position: absolute;
    inset: auto -6% -30% auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 175, .24), rgba(255, 230, 175, 0));
    pointer-events: none;
}

.tg-head,
.tg-overview,
.tg-layout,
.tg-panel,
.tg-story {
    position: relative;
    z-index: 1;
}

.tg-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.tg-head h3 {
    margin: 0;
    font-size: 28px;
    font-family: Georgia, "Palatino Linotype", serif;
}

.tg-head-copy {
    margin-top: 6px;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(29, 43, 31, .72);
}

.tg-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
    opacity: .7;
    margin-bottom: 4px;
}

.tg-badge {
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.55);
    box-shadow: 0 8px 18px rgba(61, 42, 20, .12);
}

.tg-badge.dead {
    background: rgba(180, 71, 63, .15);
    color: #73241f;
}

.tg-story {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 15px 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 225, 166, .22), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,245,223,.34));
    border: 1px solid rgba(103, 74, 32, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    backdrop-filter: blur(8px);
}

.tg-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .95fr) minmax(280px, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

.tg-overview > * {
    min-width: 0;
}

.tg-story-copy {
    display: grid;
    gap: 4px;
}

.tg-story-copy strong {
    font-size: 15px;
}

.tg-story-copy span {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(29, 43, 31, .72);
}

.tg-story-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.tg-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(103, 74, 32, .12);
    font-size: 12px;
    font-weight: 700;
    color: rgba(39, 28, 16, .82);
    box-shadow: 0 8px 18px rgba(80, 53, 22, .08);
}

.tg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 380px);
    gap: 20px;
    align-items: start;
}

.tg-stage {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18)),
        radial-gradient(circle at top, rgba(255,255,255,.26), transparent 60%),
        linear-gradient(135deg, rgba(255,232,184,.16), rgba(106,146,101,.08));
    border: 2px solid rgba(90,62,17,.35);
    border-radius: 20px;
    padding: 12px;
    min-height: 444px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        0 16px 32px rgba(83, 53, 20, .14);
}

.tg-stage::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%, transparent 82%, rgba(84, 55, 22, .07)),
        linear-gradient(90deg, rgba(255,255,255,.05), transparent 18%, transparent 82%, rgba(84, 55, 22, .06));
    pointer-events: none;
}

.tg-stage::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
}

.tg-stage canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    display: block;
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 8%, rgba(255,255,255,.3), transparent 22%),
        linear-gradient(180deg, #f8eac4 0%, #ddb66d 58%, #b68043 100%);
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,.3),
        0 22px 34px rgba(62, 39, 13, .18);
}

.tg-overlay {
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    background: rgba(38, 26, 12, .16);
    border-radius: 14px;
}

.tg-overlay-card {
    background: rgba(247, 239, 220, .96);
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    min-width: 240px;
    border: 1px solid rgba(90,62,17,.2);
}

.tg-overlay-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.tg-overlay-text {
    margin-bottom: 14px;
}

.tg-panel {
    display: grid;
    gap: 16px;
    align-content: start;
}

.tg-name-row,
.tg-stats,
.tg-meta,
.tg-actions,
.tg-insight {
    background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.38));
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(90,62,17,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.tg-name-row {
    display: grid;
    gap: 10px;
}

.tg-name-row .rz-textbox {
    width: 100%;
}

.tg-name-row label {
    font-size: 13px;
    opacity: .8;
}

.tg-stats {
    display: grid;
    gap: 10px;
}

.tg-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 4px;
}

.tg-progress {
    height: 12px;
    border-radius: 999px;
    background: rgba(53, 39, 17, .12);
    overflow: hidden;
}

.tg-progress-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .24s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.tg-progress-fill.hunger { background: linear-gradient(90deg, #d88134, #f1b74e); }
.tg-progress-fill.energy { background: linear-gradient(90deg, #4479b5, #6dc0f2); }
.tg-progress-fill.happiness { background: linear-gradient(90deg, #468a47, #77c35f); }
.tg-progress-fill.cleanliness { background: linear-gradient(90deg, #7f6fda, #ab8bff); }
.tg-progress-fill.health { background: linear-gradient(90deg, #a93b3b, #ee6a52); }

.tg-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.tg-meta div {
    display: grid;
    gap: 2px;
}

.tg-meta strong {
    word-break: break-word;
}

.tg-meta span {
    font-size: 12px;
    opacity: .7;
}

.tg-insight {
    display: grid;
    gap: 6px;
    background:
        radial-gradient(circle at top right, rgba(255, 218, 142, .24), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,248,232,.34));
}

.tg-insight-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgba(49, 35, 18, .62);
}

.tg-insight-text {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(31, 22, 14, .88);
}

.tg-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tg-actions .rz-button,
.tg-name-row .rz-button {
    border-radius: 14px;
}

.tg-actions .rz-button {
    min-height: 44px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(80, 53, 22, .08);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.tg-actions .rz-button:hover,
.tg-name-row .rz-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(80, 53, 22, .14);
    filter: saturate(1.04);
}

.tg-sleep-note {
    background: linear-gradient(135deg, rgba(58,95,152,.2), rgba(30,45,78,.34));
    color: #132341;
    border: 1px solid rgba(46,77,120,.22);
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}

@media (max-width: 1180px) and (min-width: 961px) {
    .tg-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tg-insight {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .tg-story {
        flex-direction: column;
        align-items: stretch;
    }

    .tg-story-chips {
        justify-content: flex-start;
    }

    .tg-layout {
        grid-template-columns: 1fr;
    }

    .tg-overview {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tg-stage {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .tg-page-head {
        padding: 22px 18px;
    }

    .tg-actions,
    .tg-meta {
        grid-template-columns: 1fr;
    }

    .tg-overview {
        gap: 12px;
    }

    .tg-shell {
        padding: 16px;
    }
}