/* ─── Floppy disks: every server card is a 3.5" disk ───────────────────────
   Structure:  .floppy-wrap > .floppy > (.floppy__media > .floppy__disc + .floppy__plate)
                                       + .floppy__label (.floppy__strip + .floppy__body)
   Game colour comes from a .tint-* class (sets --gt label strip, --gi strip ink, --gb body).
──────────────────────────────────────────────────────────────────────────── */

/* Components layer: Tailwind utilities (utilities layer) can still override these. */
@layer components {


.tint-mint  { --gt: #DDF5EA; --gi: #0F3B2A; --gb: #34B98A; }
.tint-peach { --gt: #FFE6DA; --gi: #4A1F10; --gb: #F08A5D; }
.tint-lilac { --gt: #ECE4FF; --gi: #2E1E5A; --gb: #8B6CF0; }
.tint-sky   { --gt: #DFEEFF; --gi: #12305A; --gb: #4C8DF0; }
[data-theme="dark"] .tint-mint  { --gt: #12352B; --gi: #CFF3E3; }
[data-theme="dark"] .tint-peach { --gt: #3D2219; --gi: #FFDCCB; }
[data-theme="dark"] .tint-lilac { --gt: #2A2150; --gi: #E6DCFF; }
[data-theme="dark"] .tint-sky   { --gt: #152B4A; --gi: #D6E7FF; }

.floppy-wrap { position: relative; filter: drop-shadow(0 16px 20px var(--shadow)); }
.floppy {
  --cut: 40px;
  position: relative; box-sizing: border-box; min-height: 336px;
  padding: 0 16px 16px; border-radius: 26px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--gb);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
/* Both corners of the cut slightly rounded where shape() is supported; the sharp polygon stays as fallback. */
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
  .floppy {
    --cut-r: 6px;
    clip-path: shape(from 0 0,
      hline to calc(100% - var(--cut) - var(--cut-r)),
      curve to calc(100% - var(--cut) + var(--cut-r) * .7071) calc(var(--cut-r) * .7071) with calc(100% - var(--cut)) 0,
      line to calc(100% - var(--cut-r) * .7071) calc(var(--cut) - var(--cut-r) * .7071),
      curve to 100% calc(var(--cut) + var(--cut-r)) with 100% var(--cut),
      vline to 100%, hline to 0, close);
  }
}
.floppy--hero { --cut: 52px; min-height: 400px; border-radius: 32px; padding: 0 20px 20px; gap: 16px; }

.floppy__media { position: relative; overflow: hidden; height: 80px; margin: 0 58px 0 40px; border-radius: 0 0 16px 16px; background: #15132A; flex-shrink: 0; }
.floppy--hero .floppy__media { height: 108px; margin: 0 80px 0 54px; border-radius: 0 0 20px 20px; }
.floppy__disc {
  position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  background: radial-gradient(circle, #D9DDE7 0 15%, #15132A 16% 19%, #4A4478 20% 100%);
}
.floppy--hero .floppy__disc { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.floppy__disc::after { content: ""; position: absolute; left: 58%; top: 30%; width: 9%; height: 14%; border-radius: 2px; background: #D9DDE7; }
.floppy.is-spinning .floppy__disc { animation: spin 2.4s linear infinite; }
.floppy__plate {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, #F1F3F8, #D6DAE5);
  transition: transform .8s var(--spring);
}
.floppy__plate::before { content: ""; position: absolute; right: 16%; top: 16%; width: 18%; height: 68%; border-radius: 6px; background: #15132A; }
.floppy__code { position: absolute; left: 14%; bottom: 14%; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: #9AA0B4; }
/* The shutter slides open on hover (and stays open on the server page while it runs);
   the disc only spins while the server is running or busy. */
.floppy.is-writing .floppy__plate { transform: translateX(-34%); }
.floppy-wrap:hover .floppy__plate,
.floppy.is-open .floppy__plate { transform: translateX(-68%); }

.floppy__label { flex-grow: 1; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); color: var(--paper-ink); }
.floppy--borrowed .floppy__label { background: var(--paper-loan); }
.floppy__strip {
  height: 28px; flex-shrink: 0; padding: 0 14px; background: var(--gt); color: var(--gi);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
}
.floppy__body { flex-grow: 1; padding: 12px 14px 12px 16px; display: flex; flex-direction: column; }
.floppy__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; margin: 0; }
.floppy--hero .floppy__name { font-size: 32px; letter-spacing: -0.04em; }
.floppy__lines { margin-top: auto; display: flex; flex-direction: column; }
.floppy__foot { padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }

/* Written lines on the paper label */
.paper-line { display: flex; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1.5px solid var(--paper-line); }
.paper-line:last-child { border-bottom: none; }
.paper-line__key { width: 88px; flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--paper-muted); }
.paper-line__value { flex-grow: 1; font-family: var(--font-mono); font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-line__value--text { font-family: var(--font-body); }
.copy-row {
  position: relative; z-index: 2;
  width: calc(100% + 12px); margin: 2px -6px; padding: 0 6px; min-height: 40px; box-sizing: border-box;
  border-radius: 10px; background: transparent; border: none; color: inherit; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px;
  transition: transform .45s var(--spring), background .2s ease;
}
.copy-row:hover { background: rgba(91, 91, 240, .10); transform: scale(1.02); }
.copy-row:active { transform: scale(.95); }
.copy-row.is-copied { color: #15784A; animation: pop .45s var(--spring); }
.copy-row .icon-check, .copy-row.is-copied .icon-copy { display: none; }
.copy-row.is-copied .icon-check { display: block; }

/* Status + actions on the paper keep their colours in both themes */
.floppy .status { color: var(--paper-ink); }
.floppy .muted-on-paper { color: var(--paper-muted); }

/* Whole disk opens the server; inner buttons sit above the stretched link */
.stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.floppy form, .floppy button, .floppy .copy-row { position: relative; z-index: 2; }

/* Stickers stuck on the left edge of the disk, over the shutter (Borrowed, Split & Play) */
.sticker {
  position: absolute; top: 24px; left: -10px; z-index: 3; transform: rotate(-6deg); pointer-events: none;
  display: flex; align-items: center; gap: 7px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: #1B1A2E; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 6px 12px rgba(27, 26, 46, .25);
}
.sticker__avatar { width: 26px; height: 26px; border-radius: 50%; background: #FFB4C2; color: #1B1A2E; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; }
.sticker--payments { padding: 7px 10px; border-radius: 3px; background: #f5c451; color: #1B1A2E; transform: rotate(-4deg); }
.floppy-wrap:has(.floppy--hero) > .sticker { top: 34px; }
/* Borrowed sits beside the card (it outlives Turbo replacements), so it follows the disk's lift */
.floppy-slot--borrowed > .sticker { transition: transform .6s var(--spring); }
.floppy-slot--borrowed:hover > .sticker { transform: translateY(-8px) rotate(-7.2deg); }

/* Grids */
.disk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: 14px 4px 4px; }
.tray { border: 2px dashed var(--line); border-radius: 40px; padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 22px; }

/* Mini floppy icon (inline SVG uses var(--gb)) */
.mini-floppy { flex-shrink: 0; }
.mini-floppy .body { fill: var(--gb, var(--accent)); }

/* Select rendered as pills (select-pills controller); the <select> stays for the form */
.pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 28px; background: var(--chip); }
.pills button {
  flex: 1 1 0; min-width: max-content; min-height: 44px; padding: 0 14px; border-radius: 999px; border: none;
  background: transparent; color: var(--ink); font-weight: 800; font-size: 14px; cursor: pointer;
  transition: background .3s ease, box-shadow .3s ease, transform .5s var(--spring);
}
.pills button:hover { transform: translateY(-1px); }
.pills button[aria-checked="true"] { background: var(--tile); box-shadow: 0 6px 14px var(--shadow); }
.pills--mono button { font-family: var(--font-mono); font-weight: 700; }
/* One full-width row per option; scrolls when it outgrows its space */
.pills--list { flex-direction: column; flex-wrap: nowrap; border-radius: 22px; overflow-y: auto; max-height: 320px; }
.pills--list button { flex: 0 0 auto; min-width: 0; text-align: left; border-radius: 16px; }

/* Platform + version panel beside Size: the row height comes from Size and each visible list takes an
   equal share of it instead of growing the row. Stacked on phones, the lists keep their natural height. */
@media (min-width: 768px) {
  .choice-panel--fill { contain: size; }
  .choice-panel--fill .choice-panel__half { flex: 1 1 0; min-height: 0; }
  .choice-panel--fill .pills--list { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* New server preview disk */
.preview-disk { width: 240px; }
.preview-disk .floppy { min-height: 250px; --cut: 34px; border-radius: 26px; }
.preview-disk .floppy__media { height: 84px; margin: 0 50px 0 32px; }

/* Game picker */
.game-grid {
  max-height: 340px; overflow-y: auto; padding: 6px 6px 28px; margin: 0 -6px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 72px; gap: 10px; align-content: start;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.game-tile {
  position: relative; padding: 0 10px; border-radius: 20px; background: var(--chip); border: 2px solid transparent;
  display: flex; align-items: center; gap: 10px; text-align: left; color: var(--ink);
  transition: background .25s ease, box-shadow .25s ease, transform .5s var(--spring);
}
.game-tile:hover { transform: translateY(-2px); background: var(--tile); box-shadow: 0 8px 18px var(--shadow); }
.game-tile[aria-current="true"] { background: var(--tile); border-color: var(--accent); box-shadow: 0 8px 18px var(--shadow); }
.game-tile__name { font-size: 13px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-tile__meta { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-tile[hidden] { display: none; }

/* Borrowed disks: the slot outlives Turbo card replacements, so the look survives broadcasts */
.floppy-slot--borrowed .floppy__label { background: var(--paper-loan); }

/* Dark theme: disk bodies are toned down (mixed with the background) so they don't glare on the dark UI.
   Every place that shows a disk colour goes through this, swatches included, so what you pick is what you get. */
[data-theme="dark"] .floppy { background: color-mix(in srgb, var(--gb) 68%, #0F0E1A); }
[data-theme="dark"] .mini-floppy .body { fill: color-mix(in srgb, var(--gb, var(--accent)) 68%, #0F0E1A); }
[data-theme="dark"] .swatch:not(.swatch--wheel) { background: color-mix(in srgb, var(--swatch) 68%, #0F0E1A); }
[data-theme="dark"] .swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--tile), 0 0 0 5px color-mix(in srgb, var(--swatch) 68%, #0F0E1A); }
[data-theme="dark"] .disk-painter__toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--gb) 68%, #0F0E1A); }

/* Painted disks: the owner picked the body colour (--gb, inline); the label strip is derived from it.
   Doubled class so it beats the [data-theme="dark"] .tint-* rules. */
.painted.painted {
  --gt: color-mix(in srgb, var(--gb) 22%, #FFFFFF);
  --gi: color-mix(in srgb, var(--gb) 40%, #000000);
}
[data-theme="dark"] .painted.painted {
  --gt: color-mix(in srgb, var(--gb) 30%, #0F0E1A);
  --gi: color-mix(in srgb, var(--gb) 30%, #FFFFFF);
}

/* Disk painter: palette button beside the preview disk, popover of swatches */
.disk-painter { position: absolute; top: 14px; right: 14px; z-index: 5; }
.disk-painter__toggle { background: var(--glass-strong); color: var(--gi); box-shadow: 0 6px 14px var(--shadow); }
.disk-painter__toggle[aria-expanded="true"] { background: var(--gb); color: #fff; }
.disk-painter__menu { top: 54px; width: 252px; gap: 10px; padding: 14px; }
.disk-painter__title { margin: 0 4px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.disk-painter__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
  transition: transform .45s var(--spring), box-shadow .2s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch:active { transform: scale(.92); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--tile), 0 0 0 5px var(--swatch); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The colour wheel: a native colour input dressed as a rainbow swatch */
.swatch--wheel { --swatch: conic-gradient(#F0566B, #F5C451, #8CCB3F, #2BB3C0, #4C8DF0, #8B6CF0, #F0699B, #F0566B); overflow: hidden; }
.swatch--wheel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; }
.disk-painter__row { display: flex; align-items: center; gap: 10px; }
.disk-painter__row .swatch { width: 36px; flex-shrink: 0; }
.disk-painter__hex { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--muted); }
.disk-painter__reset { margin-left: auto; }

}