/* Feedback modal — Moonfall structured survey, glassmorphism + dopamine */

:root {
    --fb-emoji-stack: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
        "Android Emoji", "EmojiOne Color", "Twemoji Mozilla", sans-serif;
}

/* Feedback is lobby chrome and has no business floating over a battle. It used
   to be hidden for free by living inside #user-controls, which the game view
   hides wholesale — but the control is reparented between the top bar, the
   utility rail and the fixed lobby cluster depending on layout, and the fixed
   cluster survives the view swap. Key the rule off the battle marker so it
   holds in every one of those homes. An open modal closes with the lobby. */
body.game-active #feedback-link {
    display: none !important;
}

/* The modal too, spelled with the same predicate feedback.js `open()` uses:
   if the two layers disagree the stricter one silently wins, and a JS-only
   relaxation would ship an invisible modal — open, holding the lobby-surface
   lock, swallowing Escape, showing nothing. The result screen is no exception
   any more; its "Share feedback" button was retired to thin the button row. */
body.game-active .feedback-modal {
    display: none !important;
}

/* Moon Fuse / Moon Foundry, same reasoning as the battle rule above and the
   same strength. The class-based `body.foundry-surface-active .feedback-link`
   further down is outranked once the control is reparented into the fixed
   lobby cluster, whose own rules are both later in the cascade and equally
   specific — measured live in Chromium AND WebKit with the body class present
   and the button still computing `display: flex`. Keying off the id makes the
   hide hold in every home the control is moved to. */
body.foundry-surface-active #feedback-link {
    display: none !important;
}

/* Feedback paints LEFT of Language, which sits left of the mute control:
   "feedback button should be to the left of the language and mute buttons, not
   in their middle". The cluster is a flex row whose DOM order is
   language-then-feedback, so this is an `order` change, not a reorder — moving
   the node instead pushed Feedback 232px further RIGHT (measured at 1400x640)
   and broke the DOM contract the lobby specs pin. Id-based because the
   class-level rule loses the cascade to the later-loading mobile sheet. */
#lobby-language-cluster #feedback-link {
    order: -1;
}

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top, rgba(125, 85, 165, 0.32) 0%, rgba(0, 0, 0, 0.88) 70%),
        rgba(8, 4, 16, 0.88);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    padding: 2vmin;
    animation: feedbackOverlayFadeIn 0.25s ease-out;
}

@keyframes feedbackOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feedback-content {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at top right, rgba(110, 60, 165, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(110, 60, 165, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(36, 22, 58, 0.96) 0%, rgba(18, 10, 32, 0.97) 100%);
    border: 0.18vmin solid rgba(238, 219, 241, 0.38);
    border-radius: 1.6vmin;
    width: 96vw;
    /* dvh: svh is pinned to the bars-showing page box, so this modal shrank
       away from the bottom edge the moment a phone hid its URL bar. */
    height: 96dvh;
    max-width: none;
    max-height: none;
    overflow: hidden;
    color: #eedbf1;
    box-shadow:
        0 0 0 0.12vmin rgba(185, 154, 220, 0.2) inset,
        0 1.6vmin 4vmin rgba(0, 0, 0, 0.7),
        0 0 5vmin rgba(185, 154, 220, 0.22);
    animation: feedbackContentPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.55vmin;
}

.feedback-body::-webkit-scrollbar { width: 0.8vmin; }
.feedback-body::-webkit-scrollbar-thumb {
    background: rgba(185, 154, 220, 0.45);
    border-radius: 999px;
}
.feedback-body::-webkit-scrollbar-track { background: transparent; }

@keyframes feedbackContentPopIn {
    from { transform: scale(0.95) translateY(0.6vmin); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.feedback-close {
    position: absolute;
    top: 1.6vmin;
    right: 1.6vmin;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(238, 219, 241, 0.75);
    border: 0.12vmin solid rgba(238, 219, 241, 0.22);
    width: 3.6vmin;
    height: 3.6vmin;
    font-size: 2.4vmin;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    padding: 0;
    z-index: 2;
}

.feedback-close:hover,
.feedback-close:focus-visible {
    background: rgba(238, 219, 241, 0.18);
    color: #fff;
    transform: scale(1.06);
    outline: none;
}

.feedback-header {
    position: relative;
    flex: 0 0 auto;
    padding: 2vmin 3.2vmin 1.6vmin;
    border-bottom: 0.1vmin solid rgba(238, 219, 241, 0.12);
    background: linear-gradient(180deg, rgba(110, 60, 165, 0.08) 0%, transparent 100%);
}

.feedback-title {
    margin: 0 0 0.3vmin 0;
    font-size: 2.8vmin;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #f6e9f9;
    text-shadow: 0 0 1.6vmin rgba(238, 219, 241, 0.4);
    text-align: left;
    font-family: 'Cinzel', 'Inter', serif;
    background: linear-gradient(135deg, #f6e9f9 0%, #d3b3ff 50%, #ffd97e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feedback-subtitle {
    margin: 0;
    font-size: 1.45vmin;
    color: rgba(238, 219, 241, 0.7);
    text-align: left;
    line-height: 1.4;
    max-width: 80ch;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.feedback-scroll-frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.feedback-body {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1vmin 3.2vmin;
    scrollbar-width: thin;
    scrollbar-color: rgba(185, 154, 220, 0.55) rgba(0, 0, 0, 0.3);
}

.feedback-scroll-cue {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 124px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(238, 219, 241, 0.52);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(70, 42, 105, 0.94), rgba(18, 10, 32, 0.96));
    color: #f6e9f9;
    pointer-events: none;
    flex: 0 0 auto;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.48), 0 0 14px rgba(211, 179, 255, 0.24);
    animation: feedbackScrollCue 1.25s ease-in-out infinite;
}

.feedback-scroll-cue-label {
    color: #f6e9f9;
    font: 700 12px/1.1 'Inter', sans-serif;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.feedback-scroll-cue-icon {
    color: #ffd97e;
    font: 700 18px/1 var(--fb-emoji-stack);
}

.feedback-scroll-cue[hidden] {
    visibility: hidden;
    opacity: 0;
    animation: none;
}

@keyframes feedbackScrollCue {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-scroll-cue { animation: none; }
}

.feedback-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2vmin;
    align-items: stretch;
}

.feedback-col {
    display: flex;
    flex-direction: column;
    /* 1.6vmin, not 2: this column was spaced while its text was rendering
       Arial, because `* { font-family }` in main.css overrode the 'Inter' this
       modal declares for itself. With that universal rule gone the body finally
       renders Inter as designed, and Inter's taller metrics pushed the survey
       26px past a 1920x1080 viewport — a scrollbar and a "Scroll for more" cue
       on a form that is supposed to fit. The spacing follows the real font. */
    gap: 1.6vmin;
    min-height: 100%;
}

.feedback-col > .feedback-section {
    flex: 0 0 auto;
}

/* The comment section grows to fill remaining height in the right column */
.feedback-col-right > .feedback-section-comment { flex: 1 1 auto; display: flex; flex-direction: column; }
.feedback-col-right .feedback-section-comment .feedback-textarea { flex: 1 1 auto; }

/* Large desktops: the whole survey must fit without scrolling. The right
   column drives the height — widening it re-wraps the fix-first chips onto
   fewer rows, and the tighter section rhythm absorbs the rest, so a Full-HD
   viewport shows no scrollbar and no scroll cue. */
@media (min-width: 1500px) and (min-height: 780px) {
    .feedback-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 1.15fr);
        gap: 1.6vmin;
    }
    .feedback-col { gap: 1.6vmin; }
    .feedback-section { padding: 1.4vmin 1.8vmin 1.6vmin; }
}

@media (max-width: 1100px) {
    .feedback-grid {
        grid-template-columns: 1fr 1fr;
    }
    .feedback-col-mid { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .feedback-grid { grid-template-columns: 1fr; }
    .feedback-col-mid { grid-column: auto; }
}

.feedback-footer {
    flex: 0 0 auto;
    padding: 1.4vmin 3.2vmin 1.8vmin;
    border-top: 0.1vmin solid rgba(238, 219, 241, 0.18);
    background:
        linear-gradient(0deg, rgba(8, 4, 16, 0.6) 0%, transparent 100%),
        rgba(18, 10, 32, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Section panels */
.feedback-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.25) 100%);
    border: 0.1vmin solid rgba(238, 219, 241, 0.12);
    border-radius: 1.2vmin;
    /* Trimmed with the column gap above, for the same reason: the survey is
       laid out in Inter now, not the Arial the universal selector forced. */
    padding: 1.4vmin 2vmin 1.5vmin;
    transition: border-color 0.2s, background 0.2s;
}

.feedback-section:hover {
    border-color: rgba(238, 219, 241, 0.2);
}

.feedback-label {
    display: block;
    font-size: 1.55vmin;
    color: rgba(238, 219, 241, 0.95);
    margin: 0 0 1.2vmin 0;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.3;
}

.feedback-label-required::after {
    content: ' ✦';
    color: #ffd97e;
    margin-left: 0.3vmin;
    text-shadow: 0 0 1vmin rgba(255, 217, 126, 0.7);
}

.feedback-section-hint {
    margin: -0.4vmin 0 1vmin 0;
    font-size: 1.25vmin;
    color: rgba(238, 219, 241, 0.5);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Chip rows */
.feedback-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9vmin;
}

.feedback-chip-row-rating {
    gap: 0.9vmin;
    justify-content: space-between;
}

.feedback-chip-row-nps {
    gap: 0.5vmin;
    justify-content: space-between;
}

.feedback-chip-row-priority {
    gap: 0.7vmin;
}

.feedback-chip-row-type {
    gap: 1vmin;
}

.feedback-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6vmin;
    padding: 1.05vmin 1.6vmin;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.55) 100%);
    border: 0.15vmin solid rgba(238, 219, 241, 0.22);
    border-radius: 999px;
    color: #eedbf1;
    cursor: pointer;
    font-size: 1.55vmin;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, transform 0.12s, box-shadow 0.2s, color 0.2s;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.feedback-chip:hover,
.feedback-chip:focus-visible {
    border-color: rgba(238, 219, 241, 0.55);
    background: linear-gradient(180deg, rgba(238, 219, 241, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    color: #fff;
    transform: translateY(-0.1vmin);
    outline: none;
}

.feedback-chip:active {
    transform: scale(0.96);
}

.feedback-chip-active {
    background: linear-gradient(135deg, rgba(185, 154, 220, 0.5) 0%, rgba(110, 60, 165, 0.55) 100%);
    border-color: #d3b3ff;
    color: #fff;
    box-shadow:
        0 0 0 0.18vmin rgba(255, 255, 255, 0.25) inset,
        0 0 2.4vmin rgba(185, 154, 220, 0.75),
        0 0.4vmin 1.6vmin rgba(110, 60, 165, 0.5);
}

/* Type chips — card-like, icon + label */
.feedback-chip-type {
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 1.8vmin 1.2vmin;
    border-radius: 1.2vmin;
    gap: 0.7vmin;
    min-height: 9vmin;
    justify-content: center;
}

.feedback-chip-type .feedback-chip-icon {
    font-size: 3.6vmin;
    line-height: 1;
    font-family: var(--fb-emoji-stack);
    filter: grayscale(0.3) brightness(0.9);
    transition: filter 0.2s, transform 0.15s;
}

.feedback-chip-type:hover .feedback-chip-icon {
    filter: grayscale(0) brightness(1);
    transform: scale(1.08);
}

.feedback-chip-type.feedback-chip-active .feedback-chip-icon {
    filter: grayscale(0) brightness(1.1) drop-shadow(0 0 1vmin rgba(255, 217, 126, 0.45));
}

.feedback-chip-type .feedback-chip-label {
    font-size: 1.4vmin;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Overall rating chips — extra-large emoji */
.feedback-chip-rating {
    padding: 1.4vmin 0.6vmin;
    min-width: 0;
    justify-content: center;
    border-radius: 1.4vmin;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.2vmin;
    min-height: 9vmin;
}

.feedback-chip-rating .feedback-chip-icon {
    font-size: 5vmin;
    line-height: 1;
    font-family: var(--fb-emoji-stack);
    filter: grayscale(0.35) brightness(0.85);
    transition: filter 0.2s, transform 0.15s;
}

.feedback-chip-rating:hover .feedback-chip-icon {
    filter: grayscale(0) brightness(1);
    transform: scale(1.12);
}

.feedback-chip-rating.feedback-chip-active .feedback-chip-icon {
    filter: grayscale(0) brightness(1.1) drop-shadow(0 0 0.8vmin rgba(255, 217, 126, 0.6));
    transform: scale(1.18);
}

/* NPS strip */
.feedback-chip-nps {
    padding: 1.2vmin 0.6vmin;
    min-width: 0;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-size: 1.85vmin;
    font-weight: 700;
    border-radius: 0.9vmin;
    flex: 1 1 0;
    min-height: 4.6vmin;
}

.feedback-chip-nps[data-feedback-nps="0"],
.feedback-chip-nps[data-feedback-nps="1"],
.feedback-chip-nps[data-feedback-nps="2"] { color: #ff9aa2; border-color: rgba(255, 154, 162, 0.35); }
.feedback-chip-nps[data-feedback-nps="3"],
.feedback-chip-nps[data-feedback-nps="4"],
.feedback-chip-nps[data-feedback-nps="5"],
.feedback-chip-nps[data-feedback-nps="6"] { color: #ffd97e; border-color: rgba(255, 217, 126, 0.35); }
.feedback-chip-nps[data-feedback-nps="7"],
.feedback-chip-nps[data-feedback-nps="8"] { color: #d3eaff; border-color: rgba(211, 234, 255, 0.35); }
.feedback-chip-nps[data-feedback-nps="9"],
.feedback-chip-nps[data-feedback-nps="10"] { color: #6eff9e; border-color: rgba(110, 255, 158, 0.45); }

.feedback-chip-priority {
    font-size: 1.5vmin;
    border-radius: 0.9vmin;
    padding: 1.05vmin 1.6vmin;
}

.feedback-nps-scale {
    display: flex;
    justify-content: space-between;
    font-size: 1.25vmin;
    color: rgba(238, 219, 241, 0.55);
    margin-top: 0.8vmin;
    padding: 0 0.5vmin;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Feature grid */
.feedback-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.2vmin;
    row-gap: 0.2vmin;
}

@media (max-width: 720px) {
    .feedback-feature-grid {
        grid-template-columns: 1fr;
    }
}

.feedback-feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.4vmin;
    min-height: 4.6vmin;
    padding: 0.8vmin 0;
    border-bottom: 0.08vmin solid rgba(238, 219, 241, 0.06);
}

.feedback-feature-row:last-child,
.feedback-feature-grid > .feedback-feature-row:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.feedback-feature-label {
    font-size: 1.6vmin;
    color: rgba(238, 219, 241, 0.9);
    flex: 1 1 auto;
    font-weight: 500;
    line-height: 1.3;
}

.feedback-feature-scale {
    display: inline-flex;
    align-items: center;
    gap: 0.1vmin;
}

.feedback-feature-star {
    background: transparent;
    border: none;
    color: rgba(238, 219, 241, 0.22);
    font-size: 2.8vmin;
    line-height: 1;
    padding: 0.25vmin 0.4vmin;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.18s, transform 0.12s, text-shadow 0.18s;
}

.feedback-feature-star:hover,
.feedback-feature-star:focus-visible {
    color: #ffe49a;
    outline: none;
    transform: scale(1.18);
    text-shadow: 0 0 1.2vmin rgba(255, 228, 154, 0.7);
}

.feedback-star-active {
    color: #ffd97e;
    text-shadow: 0 0 0.9vmin rgba(255, 217, 126, 0.65);
}

.feedback-feature-clear {
    background: transparent;
    border: 0.1vmin solid rgba(238, 219, 241, 0.16);
    color: rgba(238, 219, 241, 0.35);
    font-size: 1.25vmin;
    margin-left: 0.6vmin;
    padding: 0.25vmin 0.7vmin;
    cursor: pointer;
    font-family: inherit;
    border-radius: 999px;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.feedback-feature-clear:hover,
.feedback-feature-clear:focus-visible {
    color: #fff;
    background: rgba(238, 219, 241, 0.14);
    border-color: rgba(238, 219, 241, 0.4);
    outline: none;
}

.feedback-feature-clear-active {
    color: rgba(238, 219, 241, 0.5);
}

/* Inputs */
.feedback-select,
.feedback-textarea {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.55) 100%);
    border: 0.15vmin solid rgba(238, 219, 241, 0.22);
    border-radius: 0.9vmin;
    color: #eedbf1;
    padding: 1.3vmin 1.5vmin;
    font-family: inherit;
    font-size: 1.6vmin;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.feedback-select:focus,
.feedback-textarea:focus {
    border-color: #b99adc;
    box-shadow:
        0 0 0 0.15vmin rgba(185, 154, 220, 0.3),
        0 0 1.6vmin rgba(185, 154, 220, 0.35);
    outline: none;
}

.feedback-textarea {
    min-height: 11vmin;
    resize: none;
    line-height: 1.5;
}

.feedback-textarea::placeholder {
    color: rgba(238, 219, 241, 0.35);
    font-style: italic;
}

.feedback-char-count {
    align-self: flex-end;
    font-size: 1.15vmin;
    color: rgba(238, 219, 241, 0.45);
    margin-top: 0.3vmin;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.feedback-followup {
    display: flex;
    align-items: center;
    gap: 1vmin;
    font-size: 1.5vmin;
    color: rgba(238, 219, 241, 0.85);
    cursor: pointer;
    margin: 1.2vmin 0 0;
    -webkit-user-select: none;
    user-select: none;
    padding: 0.8vmin 1vmin;
    border-radius: 0.8vmin;
    transition: background 0.2s;
}

.feedback-followup:hover {
    background: rgba(238, 219, 241, 0.05);
}

.feedback-followup input[type="checkbox"] {
    width: 1.8vmin;
    height: 1.8vmin;
    accent-color: #b99adc;
    cursor: pointer;
}

/* Screenshot attachments (manual upload) */
.feedback-upload-add {
    display: inline-flex;
    align-items: center;
    gap: 0.6vmin;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);
    border: 0.15vmin solid rgba(238, 219, 241, 0.22);
    border-radius: 0.9vmin;
    color: #eedbf1;
    padding: 0.9vmin 1.4vmin;
    font-family: inherit;
    font-size: 1.5vmin;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.feedback-upload-add:hover:not(:disabled) {
    border-color: #b99adc;
    box-shadow: 0 0 1.2vmin rgba(185, 154, 220, 0.3);
}

.feedback-upload-add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.feedback-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1vmin;
    margin-top: 1vmin;
}

.feedback-upload-thumb {
    position: relative;
    width: 8vmin;
    height: 8vmin;
    border-radius: 0.8vmin;
    overflow: hidden;
    border: 0.15vmin solid rgba(238, 219, 241, 0.22);
    background: rgba(0, 0, 0, 0.4);
}

.feedback-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feedback-upload-remove {
    position: absolute;
    top: 0.3vmin;
    right: 0.3vmin;
    width: 2.2vmin;
    height: 2.2vmin;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #eedbf1;
    font-size: 1.6vmin;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.feedback-upload-remove:hover {
    background: rgba(200, 60, 90, 0.85);
}

.feedback-upload-error {
    display: none;
    color: #ff9db0;
    font-size: 1.3vmin;
    margin-top: 0.8vmin;
}

.feedback-upload-error-visible {
    display: block;
}

.feedback-hint {
    display: none;
    color: #ffd97e;
    font-size: 1.3vmin;
    margin: 0 0 0.6vmin 0;
    padding: 0.7vmin 1.1vmin;
    background: rgba(255, 217, 126, 0.1);
    border-left: 0.22vmin solid rgba(255, 217, 126, 0.6);
    border-radius: 0.4vmin;
    font-style: italic;
}

.feedback-hint.feedback-hint-visible {
    display: block;
    animation: feedbackErrorFadeIn 0.2s ease-out;
}

.feedback-error {
    display: none;
    background: rgba(255, 110, 110, 0.12);
    border: 0.15vmin solid rgba(255, 110, 110, 0.55);
    border-radius: 0.7vmin;
    padding: 0.9vmin 1.2vmin;
    color: #ffb1b1;
    font-size: 1.4vmin;
    margin: 0 0 0.6vmin 0;
}

.feedback-error.feedback-error-visible {
    display: block;
    animation: feedbackErrorFadeIn 0.2s ease-out;
}

@keyframes feedbackErrorFadeIn {
    from { opacity: 0; transform: translateY(-0.4vmin); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.feedback-button-row {
    display: grid;
    grid-template-columns: max-content 124px max-content;
    justify-content: flex-end;
    align-items: center;
    gap: 1.2vmin;
    margin-top: 0.6vmin;
}

.feedback-btn {
    padding: 1.2vmin 2.8vmin;
    border-radius: 0.9vmin;
    border: 0.15vmin solid transparent;
    font-family: inherit;
    font-size: 1.6vmin;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, transform 0.12s, opacity 0.2s, box-shadow 0.2s;
}

.feedback-btn:active {
    transform: scale(0.97);
}

.feedback-btn-primary {
    background: linear-gradient(135deg, #c8a8e9 0%, #8a64bd 100%);
    color: #fff;
    border-color: #e9d5ff;
    box-shadow:
        0 0 0 0.12vmin rgba(255, 255, 255, 0.28) inset,
        0 0.5vmin 2vmin rgba(185, 154, 220, 0.6),
        0 0 3vmin rgba(185, 154, 220, 0.35);
    text-shadow: 0 0 0.4vmin rgba(0, 0, 0, 0.4);
}

.feedback-btn-primary:hover:not(:disabled),
.feedback-btn-primary:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #d6b8f4 0%, #9a73c9 100%);
    box-shadow:
        0 0 0 0.18vmin rgba(255, 255, 255, 0.35) inset,
        0 0.6vmin 2.6vmin rgba(185, 154, 220, 0.75),
        0 0 4vmin rgba(185, 154, 220, 0.45);
    transform: translateY(-0.18vmin);
    outline: none;
}

.feedback-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    background: linear-gradient(135deg, #6b5485 0%, #4d3a66 100%);
    color: rgba(255, 255, 255, 0.7);
}

.feedback-btn-secondary {
    background: rgba(0, 0, 0, 0.35);
    color: rgba(238, 219, 241, 0.85);
    border-color: rgba(238, 219, 241, 0.35);
}

.feedback-btn-secondary:hover,
.feedback-btn-secondary:focus-visible {
    background: rgba(238, 219, 241, 0.1);
    border-color: rgba(238, 219, 241, 0.7);
    color: #fff;
    outline: none;
}

/* Lobby footer button */
.feedback-link {
    position: fixed;
    bottom: calc(var(--legal-footer-h, 40px) + 1vmin);
    right: 1.4vmin;
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 0.6vmin;
    padding: 0.85vmin 1.5vmin;
    background: linear-gradient(135deg, rgba(36, 22, 58, 0.85) 0%, rgba(18, 10, 32, 0.85) 100%);
    border: 0.15vmin solid rgba(238, 219, 241, 0.4);
    border-radius: 999px;
    color: #eedbf1;
    text-decoration: none;
    font-size: 1.4vmin;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(0.8vmin);
    -webkit-backdrop-filter: blur(0.8vmin);
    box-shadow: 0 0.4vmin 1.4vmin rgba(0, 0, 0, 0.4);
    transition: background 0.2s, border-color 0.2s, transform 0.12s, box-shadow 0.2s;
}

.feedback-link:hover,
.feedback-link:focus-visible {
    background: linear-gradient(135deg, rgba(185, 154, 220, 0.32) 0%, rgba(110, 60, 165, 0.32) 100%);
    border-color: rgba(238, 219, 241, 0.85);
    box-shadow: 0 0.5vmin 1.8vmin rgba(185, 154, 220, 0.45);
    transform: translateY(-0.15vmin);
    outline: none;
}

.feedback-link:active { transform: scale(0.96); }

.feedback-link-icon { flex-shrink: 0; }
/* An explicit line-height, because `normal` is FONT-dependent: CJK faces report
   a ~1.5em line box where the Latin face reports ~1.15em, so ja/ko/zh-CN needed
   27px of content inside a 24px box and the label clipped at QHD and 4K while
   English sat comfortably. Pinning the ratio makes every locale measure the
   same, without changing the button's height for any of them. */
.feedback-link-label {
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.15;
}

.user-controls .feedback-link {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    min-height: 30px;
    margin: 0;
    padding: 5px 10px;
    font-size: clamp(11px, 1.1vmin, 13px);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.game-active .feedback-link,
body.foundry-surface-active .feedback-link { display: none; }

.feedback-close {
    top: 1.4vmin;
    right: 1.6vmin;
}

/* Narrow viewports */
@media (max-aspect-ratio: 1/1), (max-width: 600px) {
    .feedback-content {
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* the sheet fills the page box, not the phone screen */
        border-radius: 0;
        border-left: none;
        border-right: none;
        font-size: 14px;
    }
    .feedback-header { padding: 2.4vmin 3vmin 1.4vmin; }
    .feedback-body { padding: 1.4vmin 2vmin; }
    .feedback-footer { padding: 1.4vmin 2vmin 1.8vmin; }
    .feedback-feature-grid {
        grid-template-columns: 1fr;
    }
    .feedback-link {
        right: 1.2vmin;
    }
}

@media (max-width: 1100px), (max-aspect-ratio: 10/7) {
    .feedback-link {
        position: static;
        align-self: center;
        right: auto;
        bottom: auto;
        margin: 0;
        padding: clamp(7px, 0.85vmin, 12px) clamp(12px, 1.5vmin, 20px);
        font-size: clamp(11px, 1.4vmin, 16px);
    }
}

/* Touch ergonomics: the pill measures ~31px tall with the compact desktop
   chrome. On coarse pointers guarantee the 44px hit target; the inline-flex
   centring keeps the label and icon exactly where they are, the pill just
   gets taller. Desktop keeps its compact look. */
@media (pointer: coarse) {
    .feedback-link {
        min-height: 44px;
    }
}

/* Keep the lobby feedback action in the same calm, in-flow position across the
   complete landscape-tablet band. The older width/aspect fallbacks otherwise
   switch between fixed-right and centred placement from one iPad model to the
   next. Phones and established desktop layouts remain untouched. */
@media (orientation: landscape) and (min-width: 960px) and (min-height: 561px) and (max-width: 1560px) and (max-aspect-ratio: 17/10) {
    .feedback-link {
        position: static;
        align-self: center;
        right: auto;
        bottom: auto;
        min-height: 44px;
        margin: 0;
        padding: clamp(7px, 0.85vmin, 12px) clamp(12px, 1.5vmin, 20px);
        font-size: clamp(11px, 1.4vmin, 16px);
    }
}

/* =========================================================================
   MOBILE PHONE SHEET — appended last so it wins over this file's legacy
   width/aspect breakpoints by source order (same specificity, no !important).
   -------------------------------------------------------------------------
   Everything above is vmin-dense: on a 390px portrait / 400px landscape phone
   vmin≈3.9–4px, so title→11px, labels→6px, char-count→4.5px, targets 7–35px,
   and the legacy narrow breakpoints (max-width:600 / max-aspect-ratio:1/1 /
   max-width:720) don't even match an 845x400 LANDSCAPE phone — the desktop
   3-column survey + floating 96vw card survive there. These two phone gates
   (the canonical Moonfall thresholds, mirrored from mobile.css) take
   ownership: full-bleed sheet, single legible column, a fixed px type/size
   scale (≥13px text, ≥44px targets), and 16px inputs to block iOS focus-zoom.
   The --mf-* tokens are declared on :root inside these same gates by
   mobile.css, so they resolve whenever these rules match; px fallbacks make
   the block self-sufficient regardless. Desktop stays byte-identical.
   ========================================================================= */
@media (orientation: portrait) and (max-width: 768px),
       (orientation: landscape) and (max-height: 560px) {

    /* Full-bleed sheet: kill the 2vmin overlay padding (which made the 100vw
       content overflow the centred flex box) and stretch flush to the edges. */
    .feedback-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        backdrop-filter: none;            /* wasted GPU behind an opaque sheet */
        -webkit-backdrop-filter: none;
    }

    .feedback-content {
        width: 100vw;
        height: 100dvh;                   /* dvh keeps the sticky footer/Send above the URL bar */
        /* Full-bleed means the sheet runs UNDER the notch. The header and
           inline edges pay those insets here; the footer alone pays the bottom
           gesture inset so it is not counted twice as a blank band. */
        padding-left: var(--mf-safe-left);
        padding-right: var(--mf-safe-right);
        box-sizing: border-box;
        max-width: none;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        font-size: 16px;                  /* legible inherited base */
    }

    /* One legible column in BOTH orientations (landscape's 845px would otherwise
       keep the desktop 3-col survey crammed into a 400px-tall card). */
    .feedback-grid { grid-template-columns: 1fr; gap: var(--mf-gap, 12px); }
    .feedback-col { gap: var(--mf-gap, 12px); min-height: 0; }
    .feedback-col-mid { grid-column: auto; }
    .feedback-feature-grid { grid-template-columns: 1fr; }

    /* Compact chrome; safe-area insets keep the header clear of the notch and
       the footer clear of the home indicator / URL bar. */
    .feedback-header { padding: calc(var(--mf-safe-top, 0px) + 12px) 16px 12px; }
    .feedback-title { font-size: 20px; }
    .feedback-subtitle { font-size: 13px; max-width: none; }
    .feedback-body { padding: 12px 14px; }
    .feedback-footer { padding: 10px 14px calc(var(--mf-safe-bottom, 0px) + 12px); }
    .feedback-close {
        top: calc(var(--mf-safe-top, 0px) + 8px);
        right: calc(var(--mf-safe-right, 0px) + 8px);
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    /* Section chrome */
    .feedback-section { padding: 14px; border-radius: var(--mf-radius-sm, 10px); }
    .feedback-label { font-size: 13px; margin-bottom: 10px; }
    .feedback-section-hint { font-size: 13px; margin: 0 0 8px; }

    /* Type chips — legible label, ≥64px tall tap card */
    .feedback-chip-row-type { gap: 8px; }
    .feedback-chip-type { min-height: 64px; padding: 10px 6px; border-radius: 12px; gap: 6px; }
    .feedback-chip-type .feedback-chip-icon { font-size: 26px; }
    .feedback-chip-type .feedback-chip-label { font-size: 13px; }

    /* Overall vibe — ≥60px tappable emoji */
    .feedback-chip-row-rating { gap: 6px; }
    .feedback-chip-rating { min-height: 60px; }
    .feedback-chip-rating .feedback-chip-icon { font-size: 32px; }

    /* NPS 0–10 strip — 44px-tall targets, legible numerals + scale captions */
    .feedback-chip-row-nps { gap: 4px; }
    .feedback-chip-nps { min-height: 44px; font-size: 15px; border-radius: 8px; }
    .feedback-nps-scale { font-size: 13px; margin-top: 6px; }

    /* Feature star rows — big, thumb-tappable stars */
    .feedback-feature-row { min-height: 48px; }
    .feedback-feature-label { font-size: 14px; }
    .feedback-feature-star { font-size: 26px; padding: 6px; }
    .feedback-feature-clear { font-size: 13px; padding: 6px 10px; }

    /* Priority pills + generic chips — 44px touch floor, legible text */
    .feedback-chip { font-size: 13px; }
    .feedback-chip-row-priority { gap: 8px; }
    .feedback-chip-priority { font-size: 13px; padding: 9px 14px; min-height: 44px; }

    /* Comment + follow-up */
    .feedback-textarea { font-size: 16px; min-height: 96px; padding: 10px 12px; } /* 16px blocks iOS focus-zoom */
    .feedback-char-count { font-size: 13px; }
    .feedback-followup { font-size: 14px; padding: 10px; gap: 10px; }
    .feedback-followup input[type="checkbox"] { width: 22px; height: 22px; }

    /* Screenshot upload — confirmable thumbnails, thumb-removable */
    .feedback-upload-add { font-size: 14px; padding: 10px 14px; min-height: 44px; }
    .feedback-upload-preview { gap: 10px; }
    .feedback-upload-thumb { width: 72px; height: 72px; border-radius: 10px; }
    .feedback-upload-remove {
        top: 4px;
        right: 4px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
    .feedback-upload-error { font-size: 13px; }

    /* User-facing hint / validation copy (was ~5px on a phone) */
    .feedback-hint,
    .feedback-error { font-size: 13px; }

    /* Cancel / Send — split the footer into two ≥48px thumb targets
       (the proposal omitted these, leaving Send ~15px tall). */
    .feedback-button-row {
        grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
        gap: 10px;
    }
    .feedback-btn {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
        padding: 12px 18px;
        border-radius: 10px;
    }

    /* The cue shares the action row instead of consuming a second footer bar.
       On portrait phones collapse its copy to one 44px arrow so both localized
       action labels retain useful width. */
    .feedback-scroll-cue { height: 44px; }
}

/* Portrait phones: 5 word-labelled type chips won't fit one legible row on a
   ~360px-wide inner column, so lay them out 3-per-row (keeps the 13px labels
   readable and the cards wide). Landscape keeps the base 5-across (roomy at
   845px) so it doesn't burn the scarce 400px of height on a second row. */
@media (orientation: portrait) and (max-width: 768px) {
    .feedback-chip-row-type {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .feedback-scroll-cue {
        width: 44px;
        min-width: 44px;
        padding: 0;
    }

    .feedback-scroll-cue-label { display: none; }
}

/* Landscape phones (short viewport): light vertical compaction so more of the
   long single-column survey is visible before scrolling, without dropping any
   touch target below the 44px floor. */
@media (orientation: landscape) and (max-height: 560px) {
    .feedback-header { padding: calc(var(--mf-safe-top, 0px) + 8px) 16px 8px; }
    .feedback-body { padding: 10px 14px; }
    .feedback-grid { gap: 10px; }
    .feedback-col { gap: 10px; }
    .feedback-section { padding: 12px; }
}