/* The support form extends the site's colors, Fredoka/Sniglet lettering and chunky controls. */
.support { --ink-muted:#5b6a8f; --hair:#dde9f3; --paper:#fff6c7; --paper-edge:#e9cf62; --paper-ink:#5a4600; }
.support [hidden] { display:none !important; }
.contact-head { padding:36px 0 46px; text-align:start; }
.contact-head h1 { margin-bottom:14px; }
.contact-head p { max-width:690px; margin:0; color:var(--ink-soft); }
.support-main { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; padding-block:24px 58px; }
.support-primary,.support-card,.support-help { min-width:0; }
.support-card { padding:22px 18px 26px; border:2px solid var(--pink-300); border-bottom-width:6px; border-radius:22px; background:var(--card); overflow-wrap:anywhere; }
.support form,.support .field-pair { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0; }
.support form > *,.support .field-pair > *,.support .prove > *,.support .check-panel > * { min-width:0; }
.support fieldset { min-width:0; margin:0; padding:0; border:0; }
.support legend { max-width:100%; margin:0 0 8px; padding:0; }
.support .field { display:grid; gap:6px; min-width:0; align-content:start; }
.support .field > label,.support .field > .label,.support legend { font-size:18px; font-weight:600; line-height:1.4; }
.support input,.support textarea { font-family:var(--font-body); color:var(--ink); }
.support .input { display:block; width:100%; min-width:0; max-width:100%; min-height:50px; padding:9px 13px; border:2px solid var(--sky-200); border-radius:14px; background:#fff; font-size:17px; line-height:1.4; }
.support textarea.input { min-height:150px; resize:vertical; }
.support .input:hover { border-color:var(--sky-300); }
.support .input:focus-visible { outline:3px solid var(--blue-deep); outline-offset:2px; border-color:var(--blue-deep); }
.support .input[aria-invalid=true] { border-color:var(--pink); background:var(--pink-50); }
.support .hint,.support .error { margin:0; font-size:15px; line-height:1.45; }
.support .hint { color:var(--ink-muted); }
.support .error { color:var(--pink-ink); font-weight:500; }
.support .error:empty,.support .context-note:empty { display:none; }
.support .choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.support .choice { position:relative; min-width:0; cursor:pointer; }
.support .choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.support .choice span { display:flex; align-items:center; justify-content:center; min-height:52px; height:100%; padding:8px 10px 10px; border:2px solid var(--sky-200); border-bottom-width:4px; border-radius:16px; background:#fff; text-align:center; line-height:1.25; font-size:16px; font-weight:500; }
.support .choice input:hover + span { background:var(--sky-50); }
.support .choice input:checked + span { color:#fff; background:var(--pink); border-color:var(--pink-ink); }
.support .choice input:focus-visible + span { outline:3px solid var(--blue-deep); outline-offset:3px; }
.support .choice input:disabled + span { opacity:.55; cursor:not-allowed; background:var(--sky-50); }
.support .choice input:disabled { cursor:not-allowed; }
.support fieldset[aria-invalid=true] > .choice-grid .choice span { border-color:var(--pink-300); }
.support .legend-extra { color:var(--ink-muted); font-weight:400; font-size:.86em; }
.support .note { margin:0; padding:10px 14px; border:1px solid var(--green-300); border-radius:14px; background:var(--green-50); color:var(--ink-soft); font-size:15px; line-height:1.45; }
.support .note-paper { background:var(--paper); border-color:var(--paper-edge); color:var(--paper-ink); }
.support .note-warn { background:var(--pink-50); border-color:var(--pink-300); color:var(--pink-ink); }
.support .prove { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:14px 12px; border:2px solid var(--sky-200); border-radius:20px; background:var(--sky-50); }
.support .prove > legend { float:inline-start; width:100%; margin:0; }
.support .prove > legend + * { clear:both; }
.support .pw-note { display:flex; align-items:flex-start; gap:10px; margin:0; color:var(--ink-soft); font-size:16px; line-height:1.45; }
.support .pw-note svg { flex-shrink:0; width:22px; height:22px; margin-top:1px; fill:none; stroke:var(--pink-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.support .check-panel { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.support .check-toggle { display:inline-flex; align-items:center; justify-self:start; min-width:44px; min-height:44px; max-width:100%; padding:8px 0; border:0; border-radius:4px; background:transparent; color:var(--blue-deep); font:inherit; font-size:15.5px; line-height:1.4; text-align:start; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.support .check-toggle:hover { color:var(--pink-ink); }
.support .code-input { max-width:240px; font-family:var(--font-body); font-size:24px; letter-spacing:.18em; text-transform:uppercase; }
.support .sub-legend { margin-bottom:6px; font-size:17px; }
.support .checks { display:flex; flex-wrap:wrap; gap:8px 18px; }
.support .check { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:16px; cursor:pointer; }
.support .check input { width:20px; height:20px; accent-color:var(--pink); }
.support .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.support .dropzone { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; padding:18px; border:2px dashed var(--sky-300); border-radius:18px; background:var(--sky-50); color:var(--ink-soft); text-align:center; font-size:16px; line-height:1.35; }
.support .dropzone > * { min-width:0; max-width:100%; }
.support .dropzone svg { width:30px; height:30px; fill:none; stroke:var(--blue-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support .dropzone.is-over { background:var(--pink-50); border-color:var(--pink); }
.support .btn-small { min-height:44px; padding:7px 14px 9px; border-bottom-width:4px; border-radius:14px; font-size:16px; }
.support .btn-ghost:hover { background:var(--sky-100); color:var(--blue-deep); }
.support #shots:focus-visible + label { outline:3px solid var(--blue-deep); outline-offset:3px; }
.support #shots-btn.is-full { opacity:.55; pointer-events:none; }
.support .thumbs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:4px 0 0; padding:0; list-style:none; }
.support .thumbs:empty { display:none; }
.support .thumbs li { position:relative; display:grid; gap:4px; padding:6px; border:2px solid var(--sky-200); border-radius:14px; background:#fff; }
.support .thumbs img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:9px; background:var(--sky-100); }
.support .thumb-meta { color:var(--ink-muted); font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.support .thumb-x { position:absolute; inset-block-start:3px; inset-inline-end:3px; width:44px; height:44px; padding:0; border:2px solid var(--pink-ink); border-radius:50%; background:var(--pink); color:#fff; font-size:20px; line-height:1; }
.support .thumb-x:hover { background:#bd155c; }
.support .thumb-busy { display:flex !important; align-items:center; justify-content:center; min-height:100px; color:var(--ink-muted); font-size:14px; }
.support .form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.support .form-actions .btn-primary { width:100%; }
.support .error-summary { padding:14px 18px; border:2px solid var(--pink); border-radius:16px; background:var(--pink-50); color:var(--pink-ink); font-size:16px; line-height:1.5; }
.support .error-summary ul { margin:6px 0 0; padding-inline-start:20px; }
.support .error-summary a { color:var(--pink-ink); }
.support .done { display:grid; justify-items:center; gap:14px; padding:16px 0; text-align:center; }
.support .done h2 { margin:0; color:var(--green-ink); font-size:30px; }
.support .done p { max-width:56ch; margin:0; color:var(--ink-soft); }
.support .done .note-paper { color:var(--paper-ink); }
.support .ticket-no { display:inline-block; padding:8px 20px; border:2px dashed var(--pink-300); border-radius:16px; background:var(--pink-50); color:var(--pink-ink); font-size:26px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.support .support-foot { margin:22px 0 0; color:var(--ink-muted); text-align:center; font-size:15px; }
.support-help { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:16px; }
.support-help-card { min-width:0; padding:20px; border:2px solid var(--sky-200); border-bottom:5px solid var(--pink-300); border-radius:24px; background:var(--card); overflow-wrap:anywhere; }
.support-help-card h2 { margin:0 0 10px; color:var(--pink-ink); font-size:22px; line-height:1.2; }
.support-help-card p { margin:0; color:var(--ink-soft); font-size:16px; line-height:1.5; }
.support-help-links { display:grid; }
.support-help-links a { display:flex; align-items:center; min-height:44px; padding:6px 8px; border-radius:12px; font-size:16px; line-height:1.35; }
.support-help-links a:hover { background:var(--pink-50); }
@media (min-width:640px) {
  .contact-head { padding:48px 0 54px; }
  .support-main { padding-block:36px 72px; }
  .support-card { padding:32px 38px 38px; border-radius:28px; }
  .support form,.support .field-pair { gap:22px; }
  .support .choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .support .choice-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .support .prove { padding:18px; }
  .support .thumbs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .support .form-actions .btn-primary { width:auto; }
}
@media (min-width:1024px) {
  .support-main { grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; }
  .support .field-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .support .choice-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .support-help { position:sticky; top:calc(var(--topbar-height, 84px) + 20px); max-height:max(200px,calc(100vh - var(--topbar-height, 84px) - 40px)); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--pink-300) var(--sky-50); }
}

/* Wide screens: full width like the home and Updates pages (styles.css .home .wrap). */
@media (min-width:1281px) {
  .support .wrap { max-width:none; padding-inline:clamp(32px,3vw,64px); }
}
@media (min-width:1600px) {
  .support-main { grid-template-columns:minmax(0,3fr) minmax(340px,1fr); gap:32px; }
  .support .choice-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .support .choice-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .support .thumbs { grid-template-columns:repeat(3,minmax(0,220px)); }
}

/* Hero picture like the Updates page (styles.css .updates-intro), with the game's town. */
.contact-intro .updates-scene img { object-position:50% 58%; }
.contact-intro .lead,.contact-intro p { max-width:46ch; }

.support .input { caret-color:var(--pink-ink); }
.support .num { display:inline-block; unicode-bidi:isolate; }
.support .input:disabled { opacity:.6; }
@media (max-height:500px) { .support-help { position:static; max-height:none; } }