/* ============================================
   FULLSCREEN OVERRIDES
   ============================================
   Applied when a tool section enters fullscreen
   via the Fullscreen API OR CSS pseudo-fullscreen
   (iOS fallback — position:fixed).
   ============================================ */

/* ─── Real Fullscreen ─────────────────────────────────────────────────────── */

.tool-panel:fullscreen {
    background: var(--nb-bg-root);
    display: flex;
    flex-direction: column;
    padding: var(--nb-space-xl);
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* Hide settings, action row, and tab nav in fullscreen */
.tool-panel:fullscreen .tool-settings,
.tool-panel:fullscreen .panel-header,
.tool-panel:fullscreen .action-row,
.tool-panel:fullscreen .trust-microcopy {
    display: none;
}

/* tool-layout becomes transparent so tool-primary is a direct flex child of the panel */
.tool-panel:fullscreen .tool-layout {
    display: contents;
}

/* Primary column fills the screen */
.tool-panel:fullscreen .tool-primary {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    gap: 0;
}

/* Display area fills within primary */
.tool-panel:fullscreen .tool-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ─── Pseudo-fullscreen (iOS / unsupported browsers) ─────────────────────── */

.pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990;
    background: var(--nb-bg-root) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: var(--nb-space-xl) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.pseudo-fullscreen .tool-settings,
.pseudo-fullscreen .panel-header,
.pseudo-fullscreen .action-row,
.pseudo-fullscreen .trust-microcopy {
    display: none !important;
}

.pseudo-fullscreen .tool-layout {
    display: contents;
}

.pseudo-fullscreen .tool-primary {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    gap: 0;
}

.pseudo-fullscreen .tool-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Prevent body scroll when pseudo-fullscreen is active */
body.has-pseudo-fullscreen {
    overflow: hidden;
}

/* ─── Fullscreen Overlay ─────────────────────────────────────────────────── */
/* Always-visible bottom bar: action button + exit button.                    */
/* Designed for event use: projectors, screen share, raffle draws.            */

.fullscreen-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--nb-space-md) var(--nb-space-xl) var(--nb-space-lg);
    background: linear-gradient(transparent, rgba(14, 20, 36, 0.92));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Always visible inside real or pseudo fullscreen */
.tool-panel:fullscreen .fullscreen-overlay,
.pseudo-fullscreen .fullscreen-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Action + Exit buttons row */
.fs-overlay-actions {
    display: flex;
    gap: var(--nb-space-md);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Primary action button (Roll / Spin / Draw / Generate) */
.fs-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-xs);
    padding: var(--nb-space-sm) var(--nb-space-xl);
    background: var(--nb-accent-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--nb-radius-md);
    font-size: 1.125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    min-height: 52px;
    min-width: 140px;
    transition: background var(--nb-transition-fast), transform var(--nb-transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.fs-action-btn:hover  { background: var(--nb-accent-hover); }
.fs-action-btn:active { transform: scale(0.96); }
.fs-action-btn svg    { width: 20px; height: 20px; flex-shrink: 0; }

/* Exit fullscreen button */
.fs-exit-btn {
    display: flex;
    align-items: center;
    gap: var(--nb-space-xs);
    padding: var(--nb-space-sm) var(--nb-space-md);
    background: var(--nb-bg-layer-2);
    border: 1px solid var(--nb-border-subtle);
    border-radius: var(--nb-radius-md);
    color: var(--nb-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: all var(--nb-transition-fast);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.fs-exit-btn:hover {
    color: var(--nb-text-primary);
    border-color: var(--nb-accent-border-soft);
    background: var(--nb-bg-layer-1);
}

.fs-exit-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Hint text */
.fullscreen-hint {
    font-size: 0.6875rem;
    color: var(--nb-text-muted);
    letter-spacing: 0.02em;
    opacity: 0.8;
    text-align: center;
}

/* ─── Tool-specific fullscreen scaling ───────────────────────────────────── */

.tool-panel:fullscreen .dice-arena,
.pseudo-fullscreen .dice-arena {
    max-width: 90vw;
    max-height: 55vh;
}

.tool-panel:fullscreen .wheel-canvas-wrapper,
.pseudo-fullscreen .wheel-canvas-wrapper {
    max-width: min(65vw, 65vh);
    max-height: min(65vw, 65vh);
}

.tool-panel:fullscreen .lucky-reveal,
.pseudo-fullscreen .lucky-reveal {
    font-size: clamp(3rem, 12vw, 8rem);
}

.tool-panel:fullscreen .cards-hand,
.pseudo-fullscreen .cards-hand {
    max-width: 90vw;
}

/* Vendor prefix fallbacks */
.tool-panel:-webkit-full-screen { background: var(--nb-bg-root); }
.tool-panel:-moz-full-screen    { background: var(--nb-bg-root); }
.tool-panel:-ms-fullscreen      { background: var(--nb-bg-root); }