@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/barlow-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/barlow-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/chakra-petch-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/chakra-petch-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/chakra-petch-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
    --ground:#070707;
    --panel:#070707;
    --rail:#16141c;
    --panel-2:#101010;
    --card:#121212;
    --card-2:#1a1a1a;
    --line:color-mix(in srgb, #fff 14%, transparent);
    --line-bright:#5D18F4;
    --line-focus:color-mix(in srgb, #5D18F4 46%, #c4b6e8);
    --line-soft:color-mix(in srgb, #fff 8%, transparent);

    --ink:#fff;
    --ink-2:#aaa;
    --ink-3:#8a8a8a;
    --ink-4:#666;

    --blue:#5D18F4;
    --blue-2:#A680F9;
    --blue-deep:#1A0838;
    --glow:rgba(93,24,244,.34);
    --red:#ff6b6b;
    --ok:#4FBF87;
    --amber:#d1c185;
    --ct:#7a9bcb;
    --t:#d1c185;
    --brand:#5D18F4;

    --f-display:"IBM Plex Sans Condensed","Segoe UI",sans-serif;
    --f-body:"IBM Plex Sans Condensed","Segoe UI",sans-serif;
    --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

    --pad:clamp(18px,3vw,34px);
    --r:4px;
    --page-radius:20px;
}

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .bloom{position:absolute;border-radius:50%;filter:blur(90px)}
.bg .b1{width:820px;height:620px;right:-160px;top:-260px;background:rgba(93,24,244,.16)}
.bg .b2{width:640px;height:520px;left:-220px;top:36%;background:rgba(93,24,244,.14)}
.bg .b3{width:520px;height:420px;left:34%;bottom:-260px;background:rgba(93,24,244,.05)}
.bg .mesh{
    position:absolute;inset:0;opacity:.55;
    background-image:
        repeating-linear-gradient(60deg,  rgba(93,24,244,.08) 0 1px, transparent 1px 108px),
        repeating-linear-gradient(-60deg, rgba(93,24,244,.08) 0 1px, transparent 1px 108px);
    -webkit-mask-image:radial-gradient(1500px 1000px at 68% 8%, #000 12%, transparent 72%);
                    mask-image:radial-gradient(1500px 1000px at 68% 8%, #000 12%, transparent 72%);
}

.wordmark{
    margin:0;
    font-size:0;
    line-height:0;
    color:var(--ink);
}
.logo{display:block;height:56px;width:auto;max-width:min(420px,100%)}

:root { color-scheme: dark; }
#app { display: contents; }
.play-board { margin: 24px 0; min-width: 0; }
.board-map { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; touch-action: manipulation; position: relative; overflow: hidden; background: #070B12; }
.board-map img { width: 100%; height: 100%; object-fit: contain; display: block; }
.board-piece { position: absolute; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; color: #04060B; font: 700 11px var(--f-display); display: grid; place-items: center; pointer-events: none; }
.play-board fieldset > button { margin-bottom: 10px; }
.play-board .actions { margin-bottom: 16px; }
* { box-sizing: border-box; }
[hidden]{display:none !important}
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.wrap { position: relative; z-index: 1; width: min(1100px, 100%); margin: 0 auto; padding: 0 }
.wrap > header { padding: 20px 0 26px; border-bottom: 1px solid var(--line); }
.wordmark { margin: 0; }
.tagline { font-family: var(--f-display); font-weight: 400; font-size: clamp(11px, 1.9vw, 18px); letter-spacing: .42em; color: var(--ink-2); margin: 16px 0 0; }
.wrap > header .intro { margin-bottom: 0; }
h1, h2, h3, h4, h5 { font-family: var(--f-display); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
h2 { font-size: clamp(22px, 2.7vw, 32px); margin: 26px 0 20px; }
h3 { font-size: 18px; margin: 0 0 20px; }
h4 { font-size: 16px; margin: 0 0 12px; }
h5 { font-size: 14px; margin: 0 0 12px; }
p, li, summary, legend, strong { overflow-wrap: anywhere; }
p { color: var(--ink-2); margin: 10px 0 16px; }
/* Labels read as plain words, not tracked capitals; only codes and clocks stay monospaced. */
label, legend, .eyebrow, .meta, .play-status, .slot-card > h5 { font-family: var(--f-body); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.step-time { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
label { display: grid; gap: 7px; margin-bottom: 16px; }
legend { padding: 0 6px; }
input, select, textarea { width: 100%; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: 16px var(--f-body); line-height: 1.5; letter-spacing: normal; text-transform: none; font-variant-numeric: tabular-nums; }
input:focus, textarea:focus, select:focus { border-color: var(--line-focus); outline: none; }
input, select, button { min-height: 40px; }
.select { position: relative; width: 100%; min-width: 0; }
button.select-trigger {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 40px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--card); color: var(--ink); font: 500 16px/1.5 var(--f-body);
    letter-spacing: normal; text-transform: none; font-variant-numeric: tabular-nums;
    text-align: left; cursor: pointer; box-shadow: none;
}
button.select-trigger:disabled { opacity: .6; cursor: not-allowed; }
button.select-trigger:focus,
.select.is-open button.select-trigger { border-color: var(--line-focus); outline: none; }
@media (hover: hover) {
    button.select-trigger:not(:disabled):hover { border-color: var(--line); background: var(--card); color: var(--ink); }
    button.select-trigger:focus:not(:disabled):hover,
    .select.is-open button.select-trigger:not(:disabled):hover { border-color: var(--line-focus); background: var(--card); color: var(--ink); }
}
.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-value.is-placeholder { color: var(--ink-3); }
.select-chevron {
    flex: none; width: 8px; height: 8px; margin-right: 2px;
    border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg) translateY(-2px); transform-origin: center;
    transition: transform 160ms cubic-bezier(.16,1,.3,1);
}
.select.is-open .select-chevron { transform: rotate(225deg) translateY(-1px); }
.select-menu {
    z-index: 60; overflow: auto; padding: 6px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink);
    box-shadow: 0 18px 40px rgba(0,0,0,.48), 0 0 0 1px rgba(93,24,244,.08);
}
.select-option {
    min-height: 40px; padding: 8px 12px; border-radius: 7px;
    color: var(--ink); font: 16px/1.4 var(--f-body); cursor: pointer;
}
.select-option[aria-current="true"] { background: var(--card-2); }
.select-option[aria-selected="true"] { color: var(--ink); background: var(--card-2); }
.select--pill button.select-trigger {
    height: 40px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 7px;
    border-color: var(--line); background: var(--card); color: var(--ink); font-size: 14px;
}
.select--pill.is-selected button.select-trigger { background: var(--card); border-color: var(--line); color: var(--ink); }
.select--pill.is-selected .select-chevron { border-color: var(--ink-2); }
.select--pill.is-selected .select-value.is-placeholder { color: inherit; }
@media (hover: hover) {
    .select--pill.is-selected button.select-trigger:not(:disabled):hover { background: var(--card); border-color: var(--line); color: var(--ink); }
    .select-option:hover { background: var(--card-2); }
    .select-option[aria-selected="true"]:hover { background: var(--card-2); }
}
@media (prefers-reduced-motion: reduce) {
    .select-chevron { transition: none; }
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[name="invite_code"], #invite-code, .time-input { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
#invite-code { color: var(--blue-2); font-size: 14px; letter-spacing: .12em; }
button { max-width: 100%; min-height: 40px; padding: 0 16px; border: 1px solid #5D18F4; border-radius: 7px; background: linear-gradient(180deg,rgba(93,24,244,.2),rgba(93,24,244,.08)); color: var(--blue-2); font-family: var(--f-body); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: 0; text-transform: none; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
button.planner-dock-play,
button.planner-dock-speed,
button.planner-beat {
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    overflow-wrap: normal;
    white-space: nowrap;
}
button.planner-dock-play {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    line-height: 0;
    border-radius: 999px;
    background: var(--card-2, #1a1a1a);
    color: var(--ink, #fff);
}
button.planner-dock-speed {
    min-width: 2.5rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border: 0;
    border-radius: 0.3rem;
    background: var(--card-2, #1a1a1a);
    color: var(--ink-2, #aaa);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}
button.planner-dock-play svg { display: block; }
button.planner-dock-play svg.lucide-play { transform: translateX(1px); }
button.secondary, nav button { background: var(--card); border-color: var(--line); color: var(--ink-2); }
button.danger { background: var(--card); border-color: var(--red); color: var(--red); }
button.confirmed { border-color: var(--ok); color: var(--ok); }
button.discord { background: #5865F2; border-color: #5865F2; color: #fff; }
button.steam, a.steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(93,24,244,.45), 0 10px 28px rgba(93,24,244,.32);
}
#steam-login { margin-bottom: 8px; }
/* Team identity on the team page. */
.team-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.team-head h2 { margin: 0; overflow-wrap: anywhere; }
.team-head .meta { margin: 2px 0 0; }
.team-logo { width: 56px; height: 56px; flex: none; border-radius: 10px; object-fit: contain; background: var(--panel); border: 1px solid var(--line); }
#team-meta:empty { display: none; }
#team-edit { margin: 2rem 0 0; }

/* Profile card: avatar, handle, tags, stats and ELO. */
.profile-card { display: grid; gap: 12px; max-width: 640px; margin: 8px 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.profile-head { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.profile-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--panel); }
.profile-head h3 { margin: 0; font: 700 20px var(--f-display); overflow-wrap: anywhere; }
.profile-head .meta { margin: 2px 0 0; }
#profile-bio { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#profile-tags:empty { display: none; }
#profile-tags .chip.is-primary { border-color: var(--blue-2); color: var(--blue-2); }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin: 0; }
.profile-stats div { display: flex; flex-direction: column-reverse; }
.profile-stats dd { margin: 0; font: 500 20px var(--f-mono); font-variant-numeric: tabular-nums; }
.profile-stats dt { font-size: 13px; color: var(--ink-3); }
.profile-elo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.profile-elo input { width: 100%; min-width: 0; }
@media (max-width: 480px) { .profile-elo { grid-template-columns: 1fr; } }

/* Steam and Discord are the way in; email stays reachable for accounts made before. */
#email-login { margin: 8px 0 24px; }
#email-login > summary { cursor: pointer; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }
#email-login > .meta { max-width: 56ch; margin: 0 0 12px; }
.discord-promise { max-width: 48ch; margin: 10px 0 24px; }
#discord-profile { margin: 0 0 24px; }
button:disabled { opacity: .6; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
@media (hover: hover) { button:not(:disabled):not(.select-trigger):hover { border-color: var(--blue-2); background-color: var(--blue-deep); } button.danger:not(:disabled):hover { border-color: var(--red); } }
.columns, .slot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
section, article, fieldset, form, .columns > *, .slot-grid > *, .actions > *, .bar > * { min-width: 0; }
form { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
form > button { margin: 4px 4px 4px 0; }
.bar, nav, .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bar { justify-content: space-between; }
nav { margin-bottom: 24px; color: var(--ink-2); }
nav button[aria-current="true"], .play-card.is-active { border-color: #5D18F4; background: linear-gradient(120deg,rgba(93,24,244,.11),rgba(93,24,244,.02)); color: var(--blue-2); }
.actions button { flex: 1 1 auto; }
#notice { min-height: 24px; color: var(--ok); margin: 8px 0; }
#notice.error { color: var(--red); }
.play-list { display: grid; gap: 12px; }
.member, .play-card, .task-step, .slot-card, .readiness { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.member h4 { margin: 0 0 12px; }
.member .columns { gap: 12px; }
fieldset { margin: 12px 0; border: 1px solid var(--line-bright); border-radius: 7px; padding: 12px; }
summary { cursor: pointer; min-height: 44px; padding: 14px 0; font-family: var(--f-display); font-weight: 600; color: var(--blue-2); }
details { margin: 16px 0; border-top: 1px solid var(--line-soft); }
details > form + form { margin-top: 12px; }
#playbook, #play-detail { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
#team > h3 { margin-top: 28px; }
.play-filters { margin-bottom: 8px; }
.play-filters .select { width: auto; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 10px 0 16px; }
.chip { display: inline-flex; max-width: 100%; overflow-wrap: anywhere; font-family: var(--f-body); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; border-radius: 100px; padding: 6px 11px; border: 1px solid var(--line); color: var(--ink-2); background: var(--panel); font-variant-numeric: tabular-nums; }
.play-status { color: var(--blue-2); }
.run-panel { margin: 16px 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.run-numbers { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.run-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.run-panel button { min-height: 44px; }
.run-panel > div > button { margin: 4px 4px 4px 0; }
.run-row { border-top: 1px solid var(--line); padding: 10px 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .run-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.play-form, #play-detail > form { margin: 16px 0; }
.slot-grid { margin-top: 16px; gap: 12px; }
.slot-card form { padding: 0; border: 0; background: transparent; }
.note-text { white-space: pre-wrap; border-left: 2px solid var(--blue); padding: 8px 12px; background: linear-gradient(120deg,rgba(93,24,244,.11),rgba(93,24,244,.02)); }
.utility-list { padding-left: 20px; color: var(--ink-2); }
.utility-list li::marker { color: var(--blue); }
.readiness { margin: 16px 0; border-color: #5D18F4; background: linear-gradient(120deg,rgba(93,24,244,.11),rgba(93,24,244,.02)); }
.readiness > .meta { color: var(--blue-2); }
.task-step { position: relative; margin: 16px 0 16px 14px; padding-left: 24px; }
.task-step:has(+ .task-step)::after { content: ""; position: absolute; top: 29px; bottom: -30px; left: -1px; width: 1px; background: var(--blue-deep); }
.step-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.step-number { position: absolute; z-index: 1; left: -15px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; background: var(--panel); color: var(--blue-2); font-family: var(--f-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.step-time { color: var(--blue-2); }
@media (min-width: 640px) {
    .columns, .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .play-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .actions button { flex: 0 1 auto; }
    form { padding: 24px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 600px) {
    form > button { width: 100%; margin: 4px 0; }
}

/* The existing visual language, arranged as screens and a workbench. */
.wrap { width: 100%; }
.wrap > header { padding: 18px 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.wordmark { font-size: 32px; }
.tagline { font-size: 10px; margin: 0; }
#teams { margin-left: auto; max-width: 100%; }
#teams label { margin: 0; display: flex; align-items: center; gap: 8px; }
.team-selector { position: relative; min-width: 0; }
button.team-selector-badge,
button.team-selector-option,
button.team-selector-create {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 0; padding: 6px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ink-2); box-shadow: none;
    font: 600 12px/1.3 var(--f-body); letter-spacing: 0; text-transform: none;
    text-align: left; cursor: pointer;
}
button.team-selector-badge { overflow: hidden; }
.team-selector.is-open button.team-selector-badge,
button.team-selector-badge:not(:disabled):hover { background: var(--card); border-color: transparent; color: var(--ink); }
.team-selector-initials {
    flex: none; width: 28px; height: 22px; display: grid; place-items: center;
    border-radius: 6px; background: var(--card-2); color: var(--ink-2);
    font: 800 10px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
}
.team-selector-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-selector-more { flex: none; width: 12px; height: 12px; color: var(--ink-3); }
.team-selector.is-compact button.team-selector-badge { width: auto; gap: 6px; padding: 4px; }
.team-selector.is-compact .team-selector-name { display: none; }
.create-menu {
    z-index: 30;
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 18px 40px rgba(0,0,0,.48);
}
button.create-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    overflow-wrap: normal;
    white-space: normal;
}
button.create-menu-item:hover,
button.create-menu-item:focus-visible {
    background: var(--card-2);
    color: var(--ink);
}
.team-selector-menu {
    z-index: 30; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card);
    box-shadow: 0 18px 40px rgba(0,0,0,.48);
}
.team-selector-heading {
    padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
    font: 700 10px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.team-selector-list { overflow: auto; padding: 4px; }
button.team-selector-option { padding: 8px 10px; color: var(--ink-2); font-weight: 500; font-size: 13px; }
button.team-selector-option:not(:disabled):hover { background: var(--card-2); border-color: transparent; color: var(--ink); }
button.team-selector-option[aria-selected="true"] { background: var(--blue-deep); color: var(--ink); }
button.team-selector-option[aria-selected="true"] .team-selector-initials { background: rgba(93,24,244,.2); color: var(--blue-2); }
.team-selector-check { flex: none; width: 14px; height: 14px; color: var(--blue-2); }
.team-selector-foot { padding: 8px; border-top: 1px solid var(--line-soft); }
button.team-selector-create {
    justify-content: center; gap: 6px; padding: 8px 10px;
    border: 1px dashed var(--line-bright); color: var(--ink-3); font-size: 12px;
}
button.team-selector-create:not(:disabled):hover { border-color: var(--blue); color: var(--blue-2); background: var(--blue-deep); }
#playbook, #play-detail { margin: 0; border: 0; padding: 0; }
[data-screen] > h2, .play-head h2 { margin: 8px 0 12px; }
#onboarding, #account { max-width: 900px; margin: 0 auto; }
.play-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.play-head .chips { margin: 0; }
.play-tabs { margin: 8px 0; }
.play-tabs [aria-selected="true"] { border-bottom: 3px solid var(--blue-2); font-weight: 700; }
.play-extras { display: flex; flex-wrap: wrap; gap: 8px 18px; position: relative; margin-bottom: 8px; }
.play-extras > details { margin: 0; min-width: 0; }
.play-extras > details[open] { position: absolute; top: 0; left: 0; right: 0; z-index: 4; background: var(--panel); padding: 0 12px 12px; border: 1px solid var(--line-bright); max-height: none; overflow: visible; }
.play-extras { min-height: 48px; }
.play-workspace { display: grid; gap: 18px; min-width: 0; }
.play-board { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.board-timeline { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; }
.board-timeline input { min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 0; touch-action: none; accent-color: var(--blue); }
.board-markers { grid-column: 1 / -1; display: flex; gap: 4px; overflow-x: auto; }
.board-markers button { flex: 1 0 44px; padding: 4px; }
.board-markers [aria-current=step] { border-bottom: 3px solid var(--blue-2); color: var(--blue-2); }
.board-timeline .actions { grid-column: 1 / -1; margin: 0; }
.board-caption { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-tools { display: flex; flex-wrap: wrap; border: 1px solid var(--line-bright); border-radius: 7px; margin-bottom: 8px; }
.board-tools button { flex: 1 1 80px; border-radius: 0; padding: 6px; }
.board-tools [aria-pressed=true] { box-shadow: inset 0 -3px var(--blue-2); }
.play-board:focus-visible, .board-timeline :focus-visible, .board-tools :focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.board-mode { color: var(--blue-2); min-height: 2.5em; font-family: var(--f-display); }
.play-board > label, .play-board > .actions { margin: 0; }
.play-board > p { margin: 0; }
.play-board fieldset { margin: 0; }
.board-information { max-height: none; overflow: visible; }
.board-information .note-text, .board-information .utility-list { display: none; }
.workspace-tasks .task-step { margin: 0; padding: 12px; }
.workspace-tasks .step-number { position: static; flex-shrink: 0; }
.workspace-tasks .task-step::after { content: none; }
.workspace-tasks .slot-grid { grid-template-columns: minmax(0,1fr); margin-top: 8px; }
.workspace-tasks .slot-card { padding: 8px; }
.workspace-tasks label { margin-bottom: 8px; }
.workspace-tasks details { margin: 0; }
.workspace-tasks textarea { min-height: 100px; }
.workspace-tasks .acknowledge { margin-top: 12px; width: 100%; }
#team-stats { display: grid; gap: 12px; }
@media (min-width:900px) {
    .has-team .wrap > header {
        grid-column: 1 / -1;
        grid-row: 1;
        z-index: 6;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 14px var(--pad);
        background: var(--rail);
        border-bottom: 1px solid var(--line);
    }
    .play-list, #team-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workbench-screen .wrap { height: 100dvh; display: flex; flex-direction: column; }
    .workbench-screen .wrap > header { flex-shrink: 0; }
    .workbench-screen main { min-height: 0; flex: 1; display: flex; flex-direction: column; padding-bottom: 12px; overflow: hidden; }
    .viewer-screen .page { margin: 0; padding: 0; border-radius: 0; }
    .viewer-screen .wrap > header { display: none; }
    .viewer-screen main { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    .viewer-screen #notice { display: none; }
    #notice { flex-shrink: 0; }
    #play-detail { min-height: 0; flex: 1; display: flex; flex-direction: column; }
    .play-head, .play-tabs, .play-extras { flex-shrink: 0; }
    .play-workspace { flex: 1; min-height: 0; grid-template-columns: minmax(0,1fr) 290px; gap: 12px; }
    .play-board { min-height: 0; display: grid; grid-template-columns: 160px minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 8px 12px; }
    .board-map { grid-column: 2; grid-row: 2; height: 100%; width: 100%; min-height: 0; object-fit: contain; }
    .board-timeline { grid-column: 2; grid-row: 3; }
    .play-board > label { grid-column: 2; grid-row: 2; }
    .play-board > .actions { grid-column: 2; grid-row: 3; flex-wrap: nowrap; }
    .play-board > fieldset { grid-column: 1; grid-row: 1 / 4; overflow: auto; padding: 8px; }
    .play-board > p, .board-information { grid-column: 2; font-size: 11px; }
    .play-board > p:empty { display: none; }
    .play-board > p:not(:empty) { grid-column: 2; grid-row: 1; background: var(--panel); z-index: 1; pointer-events: none; }
    .play-board { position: relative; }
    .board-information { display: none; }
    .workspace-tasks { min-height: 0; overflow: auto; padding-right: 4px; }
    .workspace-tasks form { padding: 8px; }
    .workspace-tasks button { font-size: 13px; padding: 10px 8px; }
    .workspace-tasks > label { margin-bottom: 8px; }
}

#notice { min-height: 1.6em; }
.buy-icons { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.buy-item { display: grid; gap: 2px; min-width: 0; max-width: 100%; align-items: center; }
.buy-item .buy-icon { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 6px; color: var(--blue-2); letter-spacing: normal; }
.buy-icon svg { flex: 0 0 auto; height: 32px; max-width: 100%; }
.buy-item[data-kind=spar] { min-height: 44px; padding: 6px; }
.buy-item:not([data-group=equipment]) .buy-icon { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.buy-item:not([data-group=equipment]) .buy-icon:hover { color: var(--ink); }
.buy-count { position: absolute; left: 27px; top: 0; background: var(--card); color: var(--ink); padding: 0 3px; border-radius: 4px; font: 12px var(--f-mono); }
.buy-price, .buy-subtotal { font: 11px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.buy-name { max-width: 160px; overflow-wrap: anywhere; font-size: 12px; color: var(--ink); }
.buy-slot { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; margin: 8px 0; }
.buy-slot h4 { margin: 0 0 8px; }
.buy-total { font: 600 24px var(--f-display); color: var(--blue-2); font-variant-numeric: tabular-nums; }
.buy-form { min-width: 0; }
.buy-form select, .buy-form input { min-width: 0; width: 100%; }
.my-buy { flex-shrink: 0; border-left: 2px solid var(--blue); background: var(--panel); padding: 8px 12px; margin-bottom: 8px; }
.my-buy h3 { margin: 0 0 8px; }
.buy-icon:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
/* Købet åbner i dokumentets flow og dækker aldrig det afspillende kort. */
.play-extras > details[data-panel=buys][open] { position: static; flex-basis: 100%; max-height: none; overflow: visible; }
@media (min-width:900px) { .workbench-screen #notice { height: 1.6em; overflow: auto; } }

@media (min-width:900px) { .workspace-tasks textarea { min-height: 80px; } .workspace-tasks .slot-card form { padding: 0; } }

@media (min-width:900px) {
    .play-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; position: relative; flex-shrink: 0; }
    .play-toolbar .play-extras { position: static; margin: 0; }
    .play-board > p:not(:empty) { left: 172px; font-size: 12px; padding: 4px 8px; }
}

.app-bar { display: none; }
@media (max-width:899.98px) {
    html { scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
    .wrap { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
    .auth-screen .wrap > header { padding-top: calc(18px + env(safe-area-inset-top)); }
    .board-map { order: -1; }
    body:not(.auth-screen) .wrap > header {
        position: sticky; top: 0; z-index: 6;
        height: calc(56px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top); padding-bottom: 0;
        padding-left: max(var(--pad), env(safe-area-inset-left));
        padding-right: max(var(--pad), env(safe-area-inset-right));
        /* Match the wrapper's safe padding so only the background reaches the edges. */
        margin-left: calc(-1 * max(var(--pad), env(safe-area-inset-left)));
        margin-right: calc(-1 * max(var(--pad), env(safe-area-inset-right)));
        background: rgba(22, 20, 28, .96); border-bottom: 1px solid var(--line);
        flex-wrap: nowrap;
    }
    @supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
        body:not(.auth-screen) .wrap > header { background: rgba(22, 20, 28, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    }
    @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
        body:not(.auth-screen) .wrap > header { background: rgba(22, 20, 28, .96); }
    }
    body:not(.auth-screen) .wrap > header > .wordmark { display: flex; align-items: center; }
    body:not(.auth-screen) .wrap > header > .wordmark .logo { height: 32px; }
    .app-bar { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    .auth-screen .app-bar { display: none; }
    .wrap > header #teams { display: none; }
    #app-title { flex: 1; min-width: 0; font: 600 20px var(--f-display); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #app-back { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; color: var(--blue-2); font-family: var(--f-display); text-decoration: none; }
    #notice:empty { display: none; }
    #play-detail { display: flex; flex-direction: column; }
    .play-workspace { display: contents; }
    .my-buy .buy-price { font-size: 10px; }
    .my-buy { order: 2; margin-top: 8px; }
    .play-board { order: 1; }
    .play-toolbar { order: 2; }
    .workspace-tasks { order: 3; }
    .play-head { order: 2; }
    .play-head h2 { display: none; }
    .play-extras > details[open] { position: static; flex-basis: 100%; }
    /* Gem play svæver over navigationen, så den altid kan nås på telefonen. */
    .play-head .save-play { position: fixed; z-index: 7; right: max(12px, env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
}

/* Baner vælges på billedet: det rigtige kort med A og B, navn og antal plays. */
.map-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; min-width: 0; max-width: 100%; margin: 4px 0 14px; }
.map-tile { display: grid; gap: 6px; min-width: 0; min-height: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-align: left; text-transform: none; letter-spacing: normal; font: inherit; box-shadow: none; }
.map-tile[aria-pressed="true"] { border-color: var(--blue); background: var(--card-2); }
.map-tile-pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: #070B12; }
.map-tile-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.map-site { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--amber); color: #04060B; font: 700 12px/20px var(--f-body); text-align: center; }
.map-tile-all { position: absolute; inset: 0; display: grid; place-items: center; font: 600 18px var(--f-display); color: var(--ink-2); }
.map-tile-name { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; min-width: 0; }
.map-tile-name b { font: 600 15px var(--f-display); }
.map-tile-name small { color: var(--ink-3); font: 12px var(--f-body); white-space: nowrap; }
@media (max-width:899.98px) {
    .map-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; padding-bottom: 4px; }
}

/* Kør play: IGL vælger, spillerne ser deres linje, store Vundet/Tabt. */
.live-panel { display: grid; gap: 8px; min-width: 0; margin: 8px 0 14px; padding: 12px; border: 1px solid var(--blue); border-radius: 10px; background: var(--panel); }
.live-panel h3, .live-panel > p { margin: 0; }
.live-task { white-space: pre-line; font-size: 18px; color: var(--ink); overflow-wrap: anywhere; }
.live-mine { border-left: 3px solid var(--blue-2); padding: 4px 0 4px 10px; }
.live-mine h4, .live-roles h4 { margin: 0 0 4px; }
.live-roles { display: grid; gap: 6px; min-width: 0; }
.live-role { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.live-role.is-mine { border-color: var(--blue-2); }
.live-role h5 { margin: 0 0 4px; }
.live-role p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width:900px) { .live-roles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .live-roles h4 { grid-column: 1 / -1; } }
.live-result { margin: 0; }
.live-result button { flex: 1 1 0; min-height: 56px; font-size: 18px; }
.live-picker { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.live-picker h4 { flex-basis: 100%; margin: 4px 0 0; }
.live-picker button { max-width: 100%; overflow-wrap: anywhere; }

/* Opret play: ét skema som Metastack, Gem øverst til højre. */
.create-play { display: grid; gap: 12px; min-width: 0; }
.create-play-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.create-play-top h3 { margin: 0; }
.create-play-top .actions { margin: 0; }
.create-roles { display: grid; gap: 10px; }
.create-role { display: grid; gap: 8px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.create-role select, .create-role textarea { width: 100%; min-width: 0; }
.role-gear { display: grid; gap: 8px; min-width: 0; }
.pick-group { display: grid; gap: 4px; min-width: 0; }
.pick-label { font: 500 13px var(--f-body); color: var(--ink-2); }
.pick-icons { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pick-icon { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: 8px; letter-spacing: normal; }
.pick-icon svg { display: block; max-width: 100%; }
.pick-icon[aria-pressed="true"] { color: var(--blue-2); border-color: var(--blue-2); background: var(--panel); }
.pick-icon .buy-count { left: auto; right: 2px; }
@media (min-width:900px) {
    .create-play { max-width: 980px; }
    .create-role { grid-template-columns: 1fr 1fr; }
    .create-role > label:has(textarea), .create-role > button, .create-role > .role-gear { grid-column: 1 / -1; }
    .create-role > button { justify-self: start; }
}
.play-description { flex-basis: 100%; margin: 0; white-space: pre-line; color: var(--ink); }
@media (max-width:899.98px) {
    .play-head .play-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Redigering på kortet: vælg spiller på farven, tryk på kortet; resten træder tilbage. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.board-players { display: grid; gap: 4px; margin-bottom: 10px; }
.board-player { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-size: 14px; }
.board-player[aria-pressed="true"] { border-color: var(--blue-2); background: var(--card-2); }
.board-player-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.board-nades { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.board-nades .pick-label { flex-basis: 100%; }
.board-nades .meta { margin: 0; }
.board-nade { padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-size: 13px; }
.board-nade[aria-pressed="true"] { border-color: var(--blue-2); color: var(--blue-2); }
.board-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.board-extra button { padding: 8px 10px; font-size: 13px; }
@media (max-width:899.98px) {
    .board-players { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .board-player { justify-content: center; gap: 4px; padding: 6px 2px; font-size: 12px; }
}

/* Forsiden til et play: hvad det er, hvem gør hvad, og kortet ved siden af. */
#play-detail.overview { display: block; overflow: auto; }
.play-overview { display: grid; gap: 22px; max-width: 1120px; padding-bottom: 24px; }
.overview-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; }
.overview-head h2 { margin: 0; font: 700 24px/1.2 var(--f-display); }
.overview-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 13px var(--f-body); color: var(--ink-2); }
.overview-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.overview-status[data-status="aktiv"] { color: var(--ok); }
.overview-status[data-status="aktiv"]::before { background: var(--ok); }
.overview-meta { margin: 4px 0 0; color: var(--ink-2); }
.overview-actions { margin: 0; }
.overview-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.overview-desc { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.overview-desc.is-empty, .overview-task.is-empty { color: var(--ink-3); }
.overview-roles { display: grid; margin-top: 18px; border-top: 1px solid var(--line-soft); }
.overview-roles h3 { margin: 14px 0 4px; font: 600 16px var(--f-display); }
.overview-role { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px 16px; padding: 12px 8px; border-bottom: 1px solid var(--line-soft); }
.overview-role.is-mine { background: linear-gradient(90deg, rgba(93,24,244,.1), transparent 70%); }
.overview-who { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.overview-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.overview-task { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.role-kit { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ink-2); }
.kit-icon { display: inline-flex; align-items: center; gap: 3px; }
.kit-icon svg { display: block; max-width: 100%; }
.kit-count { font: 500 13px var(--f-body); color: var(--ink-2); }
.overview-side { display: grid; gap: 14px; min-width: 0; }
.overview-map { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #070B12; }
.overview-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.overview-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overview-facts b { display: block; font: 500 20px var(--f-mono); font-variant-numeric: tabular-nums; }
.overview-facts small { color: var(--ink-3); font-size: 13px; }
.back-to-overview { order: -1; }
@media (max-width:899.98px) {
    .overview-body { grid-template-columns: 1fr; }
    .overview-role { grid-template-columns: 1fr; }
    .role-kit { grid-column: 1; }
    .overview-actions { width: 100%; }
    .overview-actions button { flex: 1 1 auto; }
}

/* Android/phone fixes found in local screenshots 15-09-2026. */
@media (max-width:899.98px) {
    /* The overview is a grid; the older phone rule moved .play-head to the bottom. */
    .play-overview .play-head { order: 0; }
    /* Save play sits in the top bar instead of floating over the player buttons. */
    .play-head .save-play { top: calc(8px + env(safe-area-inset-top)); bottom: auto; right: max(12px, env(safe-area-inset-right)); min-height: 40px; padding: 8px 14px; box-shadow: none; }
    body:has(.play-head .save-play) #app-title { padding-right: 116px; }
}

/* Public legal documents use body type and remain readable on phones. */
.legal-page { max-width: 760px; margin: 0 auto; font: 400 18px/1.6 var(--f-body); overflow-wrap: anywhere; }
.legal-page h3 { margin: 32px 0 12px; scroll-margin-top: 72px; }
.legal-page li { margin: 10px 0; }
.legal-page ul { padding-left: 24px; }
.legal-page a, .legal-links a { color: var(--blue-2); text-underline-offset: 3px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 20px 0; font-family: var(--f-body); }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
.legal-page a:focus-visible, .legal-links a:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.legal-pending { border: 2px solid var(--amber); border-radius: var(--r); padding: 16px; color: var(--ink); background: var(--panel); }
.legal-pending strong { color: var(--amber); }

.pwa-status { flex-basis: 100%; min-width: 0; font: 400 13px var(--f-body); color: var(--ink-2); }
.pwa-status:not(:has(> :not([hidden]))) { display: none; }
.pwa-status p { margin: 4px 0; }
.pwa-status button { min-height: 44px; max-width: 100%; }
@media (max-width:899.98px) {
    body:not(.auth-screen) .wrap > header:has(.pwa-status > :not([hidden])) { height: auto; min-height: calc(56px + env(safe-area-inset-top)); flex-wrap: wrap; }
}

.seconds-control { display: flex; align-items: center; gap: 12px; }
.seconds-control output { min-width: 4ch; text-align: center; font-family: var(--f-mono); }
.calculated-time { display: block; margin-top: 8px; font-family: var(--f-mono); }
.editor-warning, .utility-entry[data-incomplete=true] [role=status] { color: var(--amber); }
.empty-task { color: var(--ink-3); margin: 4px 0; }
.utility-points { display: grid; gap: 6px; }
.workspace-tasks .slot-card textarea { min-height: 60px; }
.board-transport { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.board-speeds { display: flex; }
.board-speeds button { padding: 8px; min-width: 44px; letter-spacing: normal; border-radius: 0; }
.board-speeds [aria-pressed=true] { background: var(--blue-deep); color: var(--blue-2); border-color: var(--blue); }
.board-timeline > input, .board-timeline > output { grid-column: 1 / -1; }
.board-map [data-slot], .board-map [data-handle] { cursor: grab; }
.board-map { user-select: none; }
.board-help { color: var(--ink); background: var(--panel); border: 1px solid var(--line); max-width: min(90vw, 520px); }
.task-saved { color: var(--ink-2); font: 10px var(--f-mono); }
@media (min-width:900px) {
    .workspace-tasks .slot-card { position: relative; padding: 5px; }
    .workspace-tasks .slot-card > h5 { margin: 0 0 3px; letter-spacing: 0; line-height: 14px; }
    .workspace-tasks .slot-card > .empty-task { position: absolute; top: 5px; right: 65px; margin: 0; font-size: 10px; line-height: 14px; }
    .workspace-tasks .slot-card > form { display: grid; grid-template-columns: minmax(0,1fr) 70px; gap: 0 4px; }
    .workspace-tasks .slot-card > form > label { grid-column: 1; margin: 0; font-size: 0; line-height: 0; }
    .workspace-tasks .slot-card textarea { display: block; min-height: 44px; height: 44px; margin: 0; padding: 5px; font-size: 13px; line-height: 16px; }
    .workspace-tasks .slot-card .task-saved { position: absolute; top: 5px; right: 5px; }
    .workspace-tasks .slot-card > form > details { grid-column: 2; grid-row: 1; }
    .workspace-tasks .slot-card > form > details[open] { grid-column: 1 / -1; grid-row: 2; }
    .workspace-tasks .slot-card > form > details > summary { min-height: 44px; padding: 5px 0; font-size: 10px; letter-spacing: 0; }
    .workspace-tasks .slot-card > form > button { display: none; }
    .workspace-tasks .slot-card > form:has(details[open]) > button { display: block; grid-column: 1 / -1; }
    .workspace-tasks .slot-grid { gap: 5px; }
}

.roster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.position-card{min-width:0}
.position-card h4{color:var(--blue-2)}
.empty-position{color:var(--ink-2)}
#shared-play{min-width:0}#shared-play .play-workspace{margin-top:12px}
#shared-play input{max-width:100%}

.economy-choices { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.economy-choices label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.economy-choices input { width: 20px; height: 20px; margin: 0; }
/* Automatic timing is a checkbox like the economies: box and text on one line. */
.auto-times { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 16px; }
.auto-times input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.economy-selector { max-width: 100%; margin: 8px 0; }
[data-screen] .match-panel, .match-detail, .match-round { min-width: 0; overflow-wrap: anywhere; }
.match-panel > button { display: block; max-width: 100%; white-space: normal; margin-block: 8px; }
.match-round { border-top: 1px solid var(--line, #46505b); padding-block: 16px; }
.match-round select, .match-panel input { width: 100%; min-width: 0; max-width: 100%; }
.match-round .run-buttons button { min-height: 48px; }
[hidden]{display:none !important}
.demo-panel, .demo-board, .demo-panel form, .match-detail { min-width: 0; max-width: 100%; }
.demo-panel input, .match-detail input, .match-detail select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.demo-panel p, .match-detail button { overflow-wrap: anywhere; }
.demo-time { display: flex; align-items: end; gap: 8px; }
.demo-time label { flex: 1; min-width: 0; }
.demo-board .board-information { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }

/* Player suggestions waiting for the leader */
.proposal { border-style: dashed; }
.proposal-chip { background: color-mix(in srgb, var(--accent, #F0B23C) 18%, transparent); }

/* Library and Community tabs, public play toggles */
.library-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line, #2a2f36); }
.library-tabs a { padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.library-tabs a[aria-current="page"] { border-bottom-color: var(--accent, #F0B23C); font-weight: 600; }
.public-controls { display: grid; gap: 8px; margin-bottom: 16px; }
.public-controls .check { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.play-by { margin: 0; opacity: .8; }
.play-summary { margin: 4px 0; overflow-wrap: anywhere; }

/* Lineup library */
.library-tabs { overflow-x: auto; }
.lineup-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.lineup-detail { display: grid; gap: 12px; }
@media (min-width: 900px) { .lineup-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.lineup-images { display: grid; gap: 8px; }
.lineup-images figure { margin: 0; }
.lineup-images img { display: block; width: 100%; height: auto; border-radius: 6px; }
.lineup-images figcaption { font-size: .875rem; opacity: .8; margin-top: 4px; }
.lineup-picker .board-map { cursor: crosshair; }
.lineup-form { display: grid; gap: 12px; }
.lineup-link { white-space: nowrap; }

/* Calendar, trend line and opponent rating */
.calendar-panel { display: grid; gap: 12px; margin: 16px 0; }
.event-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.event-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.event-card h4, .event-card p { margin: 0; overflow-wrap: anywhere; }
.event-when { font-variant-numeric: tabular-nums; }
.event-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event-answers button { min-height: 44px; }
.event-form { display: grid; gap: 12px; }
.trend { display: flex; align-items: center; gap: 8px; }
.trend-chart { width: 120px; height: 28px; flex: none; }
.trend-mid { stroke: var(--line); stroke-dasharray: 3 3; }
.trend-line { fill: none; stroke: var(--accent, #F0B23C); stroke-width: 2; stroke-linejoin: round; }

.lede { margin: 0.3rem 0 1rem; color: var(--ink-2); max-width: 42rem; }
.books-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: end; }
.inline-form { display: flex; gap: 0.35rem; }
.inline-form input { min-width: 14rem; }
.strats-head { margin-top: 2rem; }
.book-card { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.book-card h4 { margin: 0; }
.book-card .hint { margin: 0.15rem 0 0; }
.map-code {
    width: 2.5rem; height: 2.25rem; display: grid; place-items: center; flex-shrink: 0;
    background: var(--card-2); color: var(--blue-2);
    font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 700;
}
.play-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.play-toolbar a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }
form.play-sheet-form {
    display: grid;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    background: transparent;
    border: 0;
}
.play-sheet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 10px 16px;
}
.play-sheet-head h3 { margin: 0; }
.play-sheet-title { display: grid; gap: 8px; min-width: min(100%, 22rem); flex: 1; }
.play-sheet-title .play-name { margin: 0; }
.play-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.play-sheet-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 12px 16px; border: 1px solid #5D18F4; border-radius: 7px;
    background: linear-gradient(180deg,rgba(93,24,244,.2),rgba(93,24,244,.08));
    color: var(--blue-2); font-weight: 600; text-decoration: none;
}
.play-sheet-meta { display: grid; gap: 12px; }
.play-sheet-meta > label, .play-idea { margin: 0; }
.spot-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spot-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}
.spot-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.spot-card header strong { font: 600 13px var(--f-body); color: var(--ink); }
.spot-state { font: 600 11px var(--f-mono); color: var(--blue-2); }
.spot-card input, .spot-card textarea { min-height: 0; padding: 8px 10px; font-size: 14px; }
.spot-card textarea { min-height: 4.5rem; }
.play-sheet-bar { display: grid; gap: 10px; }
.play-sheet-bar .hint { margin: 0; }
.play-sheet-bar .actions { margin: 0; }
@media (min-width:720px) {
    .play-sheet-meta { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width:1100px) {
    .spot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.spot-count { margin-left: auto; text-align: right; font-size: 0.75rem; color: var(--ink-3); }
.spot-count strong { display: block; font-family: var(--f-mono); font-size: 1rem; color: var(--ink); }
.back-link { color: var(--ink-2); text-decoration: none; }
.back-link:hover { color: var(--ink); }
.server-list { margin: 0; padding: 0; list-style: none; }
.server-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.15rem; border-bottom: 1px solid var(--line);
}
.server-body { flex: 1; min-width: 0; }
.server-body strong { display: block; }
.server-row .actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.viewer-screen {
    --action: var(--blue);
    --action-ink: var(--ground);
    --hud: var(--panel);
    --overlay: var(--card);
    --wash: var(--card-2);
    --muted: var(--ink-2);
    --faint: var(--ink-3);
    --ct: #79b4ff;
    --t: #f0b23c;
    --float: rgba(10, 15, 24, 0.92);
    --hair: var(--line);
    --danger: var(--red);
    --radius: 6px;
    --radius-panel: 10px;
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --mono: var(--f-mono);
    --text-lg: 1.35rem;
    --text-md: 1.05rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
    --text-body: 0.95rem;
    --bg: var(--ground);
}
body.viewer-screen,
body.viewer-screen.has-team {
    overflow: hidden;
}
body.viewer-screen .bg { display: none; }
body.viewer-screen .wrap,
body.viewer-screen.has-team .wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: var(--bg);
}
body.viewer-screen .page,
body.viewer-screen.has-team .page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--bg);
}
body.viewer-screen .wrap > header,
body.viewer-screen #navigation,
body.viewer-screen #notice { display: none !important; }
body.viewer-screen main,
body.viewer-screen.has-team main {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.viewer {
    --action: var(--blue);
    --action-ink: var(--ground);
    --hud: var(--panel);
    --overlay: var(--card);
    --wash: var(--card-2);
    --muted: var(--ink-2);
    --faint: var(--ink-3);
    --ct: #79b4ff;
    --t: #f0b23c;
    --float: rgba(10, 15, 24, 0.92);
    --hair: var(--line);
    --danger: var(--red);
    --radius: 6px;
    --radius-panel: 10px;
    --shadow: 0 8px 24px rgba(0, 0, 0, .35);
    --mono: var(--f-mono);
    --bg: var(--ground);
    position: relative; width: 100%; height: 100%; min-height: 0; flex: 1; overflow: hidden; background: var(--bg); color: var(--ink);
}
.viewer-screen .viewer { min-height: 100%; height: 100%; }
.viewer form,
.viewer .note {
    margin: 0 0 0.65rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.viewer .note button { margin: 0.3rem 0 0; max-width: none; min-height: 0; padding: 0.25rem 0.5rem; }
.viewer__canvas { position: absolute; inset: 0; cursor: grab; }
.viewer__canvas:active { cursor: grabbing; }
.viewer__layer { position: absolute; display: block; width: 100%; height: 100%; }
.viewer__layer--game { pointer-events: none; }
.viewer .status {
    position: absolute; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
    background: var(--bg);
}
.viewer .status__msg { margin: 0; color: var(--muted); }
.viewer .status__back { font-size: var(--text-sm); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.viewer .chrome {
    position: absolute; top: 0.75rem; left: 0.75rem; z-index: 10;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem;
    max-width: 17rem; max-height: calc(100% - 5.25rem); pointer-events: none;
}
.viewer .hud-top {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
    flex-shrink: 0; padding: 0.65rem 0.75rem;
    background: var(--float); box-shadow: var(--shadow); border-radius: var(--radius-panel);
}
.viewer .back {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0; border: 0; background: none; color: var(--muted);
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.viewer .back:hover { color: var(--ink); }
.viewer .back svg { width: 1rem; height: 1rem; }
.viewer .title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.viewer .map-chip {
    display: inline-block; padding: 0.1rem 0.4rem; border-radius: var(--radius);
    background: var(--overlay); color: var(--action); font-size: 0.6875rem; font-weight: 600;
}
.viewer .title h1 { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.viewer .server {
    pointer-events: auto; margin: 0; border: 0; border-radius: var(--radius);
    padding: 0.4rem 0.7rem; background: var(--action); color: var(--action-ink);
    font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.viewer .server:disabled { opacity: 0.6; cursor: wait; }
.viewer .server-err { pointer-events: auto; margin: 0; font-size: 0.75rem; color: var(--danger); }
.viewer .clock {
    font-family: var(--mono); font-size: 1.75rem; font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink);
}
.viewer .clock__total { margin-left: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--faint); }
.viewer .notes {
    width: 100%; min-height: 0; overflow: auto; padding: 0.75rem;
    border-radius: var(--radius-panel); background: var(--float); box-shadow: var(--shadow); pointer-events: auto;
}
.viewer .notes h2 { margin: 0 0 0.5rem; font-size: var(--text-sm); color: var(--ink); }
.viewer .note { margin-bottom: 0.65rem; }
.viewer .note__who { font-size: var(--text-xs); color: var(--muted); margin-bottom: 0.25rem; }
.viewer .note textarea, .viewer .note select {
    width: 100%; box-sizing: border-box; background: var(--overlay); color: var(--ink);
    border: 0; border-radius: var(--radius); padding: 0.35rem; font: inherit; font-size: 0.8rem;
}
.viewer .note button {
    margin-top: 0.3rem; background: var(--action); color: var(--action-ink);
    border: 0; border-radius: var(--radius); padding: 0.25rem 0.5rem; font: inherit; font-weight: 700; cursor: pointer;
}
.viewer .boards {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; display: none; gap: 1rem;
    padding: 0.65rem 0.7rem 0.7rem; border-radius: var(--radius-panel);
    background: var(--float); box-shadow: var(--shadow); color: var(--ink);
}
.viewer .roster {
    display: flex; gap: 0.35rem; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 4.25rem;
    z-index: 10; overflow-x: auto; padding-bottom: 0.15rem;
}
.viewer .chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; height: 1.75rem;
    padding: 0 0.5rem; border-radius: var(--radius); border: 0; background: var(--overlay);
    color: var(--ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.viewer .chip__hp { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.6875rem; }
.viewer .chip--ct { color: var(--ct); }
.viewer .chip--t { color: var(--t); }
.viewer .chip--dead { opacity: 0.4; }
.viewer .chip--focus { background: var(--wash); color: var(--ink); }
.viewer .dock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
    display: flex; align-items: center; gap: 0.75rem; height: 3.5rem;
    padding: 0 0.85rem; background: color-mix(in srgb, #000 55%, var(--card)); border-top: 1px solid var(--line); color: var(--ink);
}
.viewer .play,
.viewer .speed,
.viewer .chip { min-height: 0; max-width: none; }
.viewer .play {
    width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
    margin: 0; padding: 0; border: 0; border-radius: 999px; line-height: 0;
    background: var(--overlay); color: var(--ink);
}
.viewer .play svg { display: block; width: 1.05rem; height: 1.05rem; }
.viewer .play svg.lucide-play { transform: translateX(1px); }
.viewer .speed {
    min-width: 2.5rem; height: 1.75rem; padding: 0 0.4rem; border: 0; border-radius: 0.3rem;
    background: var(--overlay); font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--muted);
}
.viewer .dock__time {
    width: 2.25rem; flex-shrink: 0; font-family: var(--mono); font-size: 0.75rem;
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted);
}
.viewer .dock__time--end { text-align: right; }
.viewer .hint { display: none; margin: 0; align-items: center; gap: 0.35rem; font-size: 0.6875rem; color: var(--faint); white-space: nowrap; }
@media (min-width: 1024px) {
    .viewer .boards { display: flex; }
    .viewer .roster { display: none; }
    .viewer .hint { display: inline-flex; }
}