/* Veltrion Web Platform Phase 26A - Safe UX QA Tuning
   Purpose: safe-only visual/overflow/accessibility tuning. No backend logic. */

:root {
    --v26a-safe-gutter: clamp(14px, 2vw, 28px);
    --v26a-card-min: 0;
    --v26a-focus: rgba(230, 184, 96, 0.72);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

.veltrion-web,
.vt-web,
.vt-page,
.vt-main,
.portal-page,
.portal-frame,
.portal-content-hub,
.portal-competition-hub,
.vt-section,
.vt-panel,
.vt-card,
[class*="portal-"],
[class*="ranking"],
[class*="content"],
[class*="mission"],
[class*="season"],
[class*="shop"] {
    min-width: 0;
}

.vt-container,
.portal-container,
.portal-shell,
.portal-frame__inner,
.portal-content-hub,
.portal-competition-hub,
.web-section,
.web-section-inner {
    width: min(100% - calc(var(--v26a-safe-gutter) * 2), 1440px);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.portal-layout,
.portal-frame__grid,
.portal-grid,
.portal-content-grid,
.portal-ranking-grid,
.portal-class-grid,
.portal-card-grid,
.vt-grid,
[class*="grid"] {
    min-width: 0;
}

.portal-card,
.portal-panel,
.portal-box,
.portal-tile,
.ranking-card,
.class-card,
.content-card,
.event-card,
.notice-card,
.shop-card,
.mission-card,
.pass-card,
.vt-card {
    overflow-wrap: anywhere;
    word-break: keep-all;
    min-width: 0;
}

.portal-card a,
.portal-panel a,
.notice-card a,
.event-card a,
.ranking-card a,
.vt-card a {
    overflow-wrap: anywhere;
}

.portal-section-title,
.portal-title,
.portal-headline,
h1, h2, h3, h4 {
    text-wrap: balance;
}

p, li, dd, td, th, .portal-text, .portal-desc, .portal-summary {
    line-height: 1.62;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.v26a-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.v26a-table-wrap > table {
    min-width: 680px;
}

button,
a,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--v26a-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(230, 184, 96, 0.16);
}

.v26a-empty-state {
    border: 1px solid rgba(230, 184, 96, 0.18);
    background: linear-gradient(135deg, rgba(20, 16, 14, 0.76), rgba(42, 29, 25, 0.48));
    color: rgba(244, 231, 210, 0.72);
    padding: 18px;
    border-radius: 18px;
}

.v26a-soft-hidden {
    display: none !important;
}

.v26a-overflow-mark {
    outline: 2px dashed rgba(255, 80, 80, 0.72) !important;
    outline-offset: 2px;
}

.v26a-qa-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99998;
    border: 1px solid rgba(230, 184, 96, 0.32);
    border-radius: 999px;
    background: rgba(16, 12, 10, 0.86);
    color: rgba(255, 236, 196, 0.92);
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.v26a-qa-panel {
    position: fixed;
    right: 18px;
    bottom: 64px;
    z-index: 99999;
    width: min(360px, calc(100vw - 28px));
    max-height: min(70vh, 560px);
    overflow: auto;
    border: 1px solid rgba(230, 184, 96, 0.24);
    border-radius: 18px;
    background: rgba(12, 9, 8, 0.94);
    color: rgba(255, 244, 224, 0.92);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.52);
    padding: 16px;
    backdrop-filter: blur(18px);
    display: none;
}

.v26a-qa-panel.is-open {
    display: block;
}

.v26a-qa-panel h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.v26a-qa-panel dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    margin: 0;
    font-size: 12px;
}

.v26a-qa-panel dt {
    color: rgba(255, 236, 196, 0.62);
}

.v26a-qa-panel dd {
    margin: 0;
    color: rgba(255, 248, 234, 0.94);
    font-variant-numeric: tabular-nums;
}

.v26a-qa-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.v26a-qa-actions button {
    border: 1px solid rgba(230, 184, 96, 0.22);
    background: rgba(230, 184, 96, 0.08);
    color: rgba(255, 236, 196, 0.9);
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
}

@media (max-width: 1024px) {
    .vt-container,
    .portal-container,
    .portal-shell,
    .portal-frame__inner,
    .portal-content-hub,
    .portal-competition-hub,
    .web-section,
    .web-section-inner {
        width: min(100% - 28px, 100%);
    }

    .portal-frame__grid,
    .portal-layout,
    .portal-content-grid,
    .portal-ranking-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    :root {
        --v26a-safe-gutter: 12px;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .portal-header,
    .site-header,
    .web-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .portal-nav,
    .site-nav,
    .web-nav,
    .header-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .portal-nav::-webkit-scrollbar,
    .site-nav::-webkit-scrollbar,
    .web-nav::-webkit-scrollbar,
    .header-nav::-webkit-scrollbar {
        display: none;
    }

    .portal-title,
    .portal-headline,
    h1 {
        font-size: clamp(28px, 9vw, 46px) !important;
        line-height: 1.05 !important;
    }

    .portal-section-title,
    h2 {
        font-size: clamp(22px, 6.4vw, 32px) !important;
    }

    .portal-actions,
    .hero-actions,
    .cta-actions,
    .button-row {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .portal-actions a,
    .hero-actions a,
    .cta-actions a,
    .button-row a,
    .portal-actions button,
    .hero-actions button,
    .cta-actions button,
    .button-row button {
        min-height: 44px;
        justify-content: center;
        width: 100%;
    }

    .portal-card,
    .portal-panel,
    .portal-box,
    .portal-tile,
    .ranking-card,
    .class-card,
    .content-card,
    .event-card,
    .notice-card,
    .shop-card,
    .mission-card,
    .pass-card,
    .vt-card {
        border-radius: 18px !important;
    }

    .v26a-qa-toggle {
        right: 12px;
        bottom: 12px;
    }

    .v26a-qa-panel {
        right: 12px;
        bottom: 56px;
    }
}

@media (max-width: 420px) {
    .portal-card,
    .portal-panel,
    .portal-box,
    .portal-tile,
    .ranking-card,
    .class-card,
    .content-card,
    .event-card,
    .notice-card,
    .shop-card,
    .mission-card,
    .pass-card,
    .vt-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .portal-meta,
    .ranking-meta,
    .content-meta,
    .card-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}