/* Native, readable previews (like this one) rather than the scaled iframe used by internal pages. */
.g-preview.is-native {
    container: native-preview / inline-size;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--g-blue-rgb), 0.3) transparent;
}
.g-preview.is-cancel { scrollbar-color: rgba(255, 222, 23, 0.3) transparent; }
.g-preview-screen.is-native {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.g-preview-screen.is-native::before,
.g-preview-screen.is-native::after { display: none; }
.g-preview-screen.is-cancel { background: radial-gradient(ellipse at 50% 0, rgba(255, 222, 23, 0.07), transparent 65%); }
.g-cancel-preview {
    --cancel-gold: #ffde17;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(12px, 2.5cqi, 24px);
    font-family: var(--g-mono);
    color: var(--g-text);
}
.g-cancel-intro { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g-cancel-intro > img { flex: none; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 222, 23, 0.25)); }
.g-cancel-intro h2 { margin: 0 0 4px; font: 600 clamp(16px, 3.3cqi, 23px)/1.2 var(--g-mono); color: var(--cancel-gold); letter-spacing: 0.02em; }
.g-cancel-intro p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--g-muted); }
/* Reigning king of the hill: their run's share card, framed in gold */
.g-cancel-king:empty { display: none; }
.g-cancel-throne { margin: 0 0 18px; }
.g-cancel-throne-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; font: 500 10px/1.5 var(--g-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cancel-gold); }
.g-cancel-throne-head span:last-child { margin-left: auto; color: var(--g-dim); letter-spacing: 0.04em; }
.g-cancel-crown { font-size: 15px; line-height: 1; text-shadow: 0 0 10px rgba(255, 222, 23, 0.6); }
.g-cancel-card {
    display: block;
    border: 1px solid rgba(255, 222, 23, 0.55);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(255, 222, 23, 0.07), 0 0 26px rgba(255, 222, 23, 0.16);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.g-cancel-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; background: #0b1116; }
.g-cancel-card:hover,
.g-cancel-card:focus-visible { border-color: var(--cancel-gold); box-shadow: 0 0 0 3px rgba(255, 222, 23, 0.12), 0 0 34px rgba(255, 222, 23, 0.28); transform: translateY(-2px); }
.g-cancel-throne-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.g-cancel-throne-who { display: flex; flex-direction: column; min-width: 0; }
.g-cancel-throne-who strong { font-size: 14px; font-weight: 600; color: var(--cancel-gold); }
.g-cancel-throne-who span { font-size: 10px; color: var(--g-muted); }
.g-cancel-throne-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; flex: 1 1 160px; font-size: 10px; color: var(--g-dim); }
.g-cancel-throne-stats b { font-weight: 500; color: var(--g-text); }
.g-cancel-challenge { flex: none; height: auto; text-decoration: none; padding: 8px 11px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--cancel-gold); border-color: rgba(255, 222, 23, 0.5); background: rgba(255, 222, 23, 0.06); }
.g-cancel-challenge:hover,
.g-cancel-challenge:focus-visible { border-color: var(--cancel-gold); background: rgba(255, 222, 23, 0.14); box-shadow: 0 0 16px rgba(255, 222, 23, 0.12); }
.g-cancel-throne.is-vacant { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed rgba(255, 222, 23, 0.4); border-radius: 8px; }
.g-cancel-throne.is-vacant .g-cancel-crown { font-size: 26px; color: var(--cancel-gold); }
.g-cancel-throne.is-vacant strong { color: var(--cancel-gold); font-weight: 500; }
.g-cancel-throne.is-vacant p { margin: 2px 0 0; font-size: 10px; color: var(--g-muted); }
.g-cancel-hall { min-width: 0; }
.g-cancel-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--g-border); }
.g-cancel-month h3 { margin: 0; font: 500 10px/1.5 var(--g-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-muted); }
.g-cancel-month h3 span { display: inline-block; margin-left: 8px; color: var(--g-text); letter-spacing: 0.03em; }
.g-cancel-live { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: 0.12em; color: var(--g-green); }
.g-cancel-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.g-cancel-calendar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-top: 8px; }
.g-cancel-weekday { padding-bottom: 3px; font-size: 9px; line-height: 1.4; text-align: center; text-transform: uppercase; color: var(--g-muted); }
.g-cancel-weekday:last-of-type { color: var(--cancel-gold); }
.g-cancel-cell {
    position: relative;
    display: block;
    height: clamp(34px, 7.5cqi, 64px);
    min-width: 0;
    padding: 0;
    border: 1px solid var(--g-border);
    border-radius: 5px;
    background: rgba(139, 233, 253, 0.035);
    color: var(--g-text);
    font-family: var(--g-mono);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    container-type: size;
}
.g-cancel-cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.65)); pointer-events: none; }
/* Portraits are sized off the cell's larger side and centred on the face, so non-square cells crop evenly
   instead of sliding (top % follows the cell's height, width % its width). Share card face ≈ (250, 276) of 1200x630. */
.g-cancel-cell > img { position: absolute; width: max(375cqw, 375cqh); max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-20.83%, -43.8%); }
.g-cancel-initial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: var(--g-blue); }
/* A past king rebuilt from trait layers (js/cancel-preview.js): the 600x750 character, framed on the face */
.g-cancel-look { position: absolute; left: 50%; top: 50%; width: max(156cqw, 156cqh); aspect-ratio: 600 / 750; transform: translate(-50%, -46.15%); overflow: hidden; }
.g-cancel-look img { position: absolute; max-width: none; }
.g-cancel-cell.is-fell .g-cancel-look { filter: grayscale(0.65); opacity: 0.65; }
.g-cancel-cell em { position: absolute; right: 4px; bottom: 2px; z-index: 1; font: 500 10px/1.2 var(--g-mono); text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.g-cancel-cell.is-king { border-color: rgba(255, 222, 23, 0.35); }
.g-cancel-cell.is-king em { color: var(--cancel-gold); font-size: 17px; bottom: 0; }
.g-cancel-cell.is-fell > img { filter: grayscale(0.65); opacity: 0.65; }
.g-cancel-cell s { position: absolute; inset: 0; display: grid; place-items: center; color: #ff5555; font-size: 28px; line-height: 1; text-decoration: none; text-shadow: 0 0 5px #000; z-index: 1; }
.g-cancel-cell.is-today { border-color: var(--g-green); }
.g-cancel-cell.is-empty { background: rgba(139, 233, 253, 0.02); color: var(--g-dim); }
.g-cancel-cell.is-out { visibility: hidden; }
.g-cancel-cell:disabled { opacity: 0.3; cursor: default; }
.g-cancel-cell:not(:disabled):hover,
.g-cancel-cell[aria-pressed="true"] { border-color: var(--cancel-gold); box-shadow: inset 0 0 0 1px var(--cancel-gold); }
.g-cancel-cell:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 1px; }
.g-cancel-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 8px 0; color: var(--g-dim); font-size: 9px; }
.g-cancel-legend span:nth-child(2) { color: #c4af43; }
.g-cancel-detail { min-height: 32px; margin: 0; padding: 8px 0; color: var(--g-muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.g-cancel-detail span { color: var(--g-dim); margin-right: 5px; }
.g-cancel-detail strong { color: var(--g-blue); font-weight: 500; }
.g-cancel-invite { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; border-top: 1px solid var(--g-border); padding-top: 12px; margin-top: 4px; }
.g-cancel-invite p { flex: 1 1 140px; margin: 0; color: var(--g-muted); font-size: 10px; line-height: 1.6; }
.g-cancel-invite .g-cancel-play { flex: none; height: auto; padding: 9px 12px; font-size: 11px; color: var(--cancel-gold); border-color: rgba(255, 222, 23, 0.5); background: rgba(255, 222, 23, 0.06); letter-spacing: 0.08em; }
.g-cancel-invite .g-cancel-play:hover,
.g-cancel-invite .g-cancel-play:focus-visible { border-color: var(--cancel-gold); background: rgba(255, 222, 23, 0.14); box-shadow: 0 0 16px rgba(255, 222, 23, 0.12); }
.g-cancel-message { margin: 28px 0; color: var(--g-muted); font-size: 12px; line-height: 1.7; }
.g-cancel-retry { margin-bottom: 16px; }
@media (max-width: 899px) {
    .g-preview.is-native { height: auto; min-height: 0; }
}
/* Wide panes: king beside the calendar, so the whole board shows without scrolling */
@container native-preview (min-width: 820px) {
    .g-cancel-preview {
        max-width: 1100px;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        grid-template-areas: "intro intro" "king hall" "invite invite";
        column-gap: clamp(16px, 2.5cqi, 28px);
        align-items: start;
    }
    .g-cancel-intro { grid-area: intro; }
    .g-cancel-king { grid-area: king; }
    .g-cancel-hall { grid-area: hall; }
    .g-cancel-invite { grid-area: invite; }
    .g-cancel-king:empty + .g-cancel-hall { grid-column: 1 / -1; }
    .g-cancel-throne { margin-bottom: 8px; }
    .g-cancel-cell { height: clamp(30px, 4.2cqi, 54px); }
}
@container native-preview (max-width: 360px) {
    .g-cancel-intro { gap: 8px; margin-bottom: 12px; }
    .g-cancel-intro > img { width: 42px; height: 42px; }
    .g-cancel-month h3 span { display: block; margin-left: 0; }
    .g-cancel-invite .g-cancel-play,
    .g-cancel-challenge { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .g-cancel-card { transition: none; }
    .g-cancel-card:hover { transform: none; }
}