:root {
  --bg: #f4f6f2;
  --surface: #ffffff;
  --surface-soft: #eef2ec;
  --ink: #18221e;
  --muted: #68756f;
  --line: #dde3de;
  --green: #2d7552;
  --green-dark: #215c40;
  --green-soft: #dcece2;
  --lime: #d8ef6d;
  --amber: #d98729;
  --amber-soft: #fff0d9;
  --red: #c84f43;
  --red-soft: #fce8e5;
  --shadow: 0 12px 36px rgba(32, 57, 45, 0.09);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.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; }

.app-shell { position: relative; z-index: 1; min-height: 100vh; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
.topbar { height: 76px; padding: 14px max(20px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; gap: 11px; background: #131b18; color: white; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--lime); color: #16221b; border-radius: 13px; }
.brand-mark svg { width: 26px; height: 26px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy span { color: #99a79f; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.brand-copy strong { margin-top: 4px; font-size: 15px; }
.topbar-rules-link { margin-left: auto; padding: 9px 11px; border: 1px solid #3b4942; border-radius: 11px; color: var(--lime); text-decoration: none; font-size: 11px; font-weight: 800; white-space: nowrap; }
.topbar-rules-link:hover { background: #26332d; }
.topbar-knowledge-menu { position: relative; margin-left: auto; }
.topbar-knowledge-menu .topbar-rules-link { display: block; margin-left: 0; }
.topbar-knowledge-menu summary { list-style: none; cursor: pointer; }
.topbar-knowledge-menu summary::-webkit-details-marker { display: none; }
.knowledge-menu-links { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 190px; padding: 7px; border: 1px solid #3b4942; border-radius: 14px; background: #1d2923; box-shadow: 0 15px 32px rgba(0,0,0,.25); }
.knowledge-menu-links a { display: block; padding: 10px; border-radius: 9px; color: white; text-decoration: none; font-size: 11px; font-weight: 800; }
.knowledge-menu-links a:hover { background: #2b3b33; color: var(--lime); }
.avatar-button { min-width: 39px; height: 39px; padding: 0 12px; border: 1px solid #3b4942; background: #26332d; color: white; border-radius: 20px; font-size: 12px; font-weight: 800; }
.help-button { flex: none; width: 39px; height: 39px; border: 1px solid #3b4942; border-radius: 50%; background: transparent; color: var(--lime); font-size: 17px; font-weight: 900; }
.fire-theme-toggle,
.duck-theme-toggle,
.fire-sound-toggle { flex: none; width: 39px; height: 39px; border: 1px solid #3b4942; border-radius: 50%; background: #26332d; color: white; font-size: 17px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.fire-theme-toggle:hover,
.duck-theme-toggle:hover,
.fire-sound-toggle:hover { transform: translateY(-1px) scale(1.04); }
.fire-theme-toggle.active { border-color: #ffae45; background: #4d1f0d; box-shadow: 0 0 18px rgba(255,116,30,.55); }
.duck-theme-toggle.active { border-color: #ff94c7; background: #7d2858; box-shadow: 0 0 18px rgba(255,109,179,.45); }
.duck-theme-toggle img { display: block; width: 29px; height: 29px; margin: auto; object-fit: contain; }
.fire-sound-toggle { border-color: rgba(255,174,69,.55); background: #4d1f0d; }
.fire-sound-toggle.muted { opacity: .72; border-color: #705043; background: #30221d; }

body.fire-theme {
  --bg: #160604;
  --surface: #40110d;
  --surface-soft: #56180f;
  --ink: #fff1df;
  --muted: #d4a28a;
  --line: rgba(255,143,78,.24);
  --green: #e94f24;
  --green-dark: #ff8b43;
  --green-soft: #682014;
  --lime: #ffc34e;
  --amber: #ff812d;
  --amber-soft: #59200e;
  --red: #ff806d;
  --red-soft: #5d1a17;
  --shadow: 0 18px 46px rgba(0,0,0,.36), 0 0 24px rgba(226,55,16,.08);
  color-scheme: dark;
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 115%, rgba(255,93,20,.3), transparent 42%),
    radial-gradient(circle at 14% 62%, rgba(137,26,10,.15), transparent 34%),
    linear-gradient(180deg, #090302 0%, #160604 52%, #250803 100%);
}
body.fire-theme::before,
body.fire-theme::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
body.fire-theme::before {
  opacity: .78;
  background:
    radial-gradient(ellipse at 50% 106%, rgba(255,119,31,.45), transparent 38%),
    radial-gradient(ellipse at 50% 98%, rgba(255,31,4,.23), transparent 58%);
  animation: fire-breathe 3.4s ease-in-out infinite alternate;
}
body.fire-theme::after {
  background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,.28) 100%);
}
.fire-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .45s ease; contain: strict; }
body.fire-theme .fire-atmosphere { opacity: 1; visibility: visible; }
.fire-video { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center bottom; opacity: .88; filter: saturate(1.42) contrast(1.18) brightness(.68); transform: scale(1.02); }
.fire-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,1,0,.88) 0%, rgba(13,2,0,.62) 33%, rgba(20,3,0,.26) 67%, rgba(33,5,0,.08) 100%), radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.27) 100%); }
.fire-smoke { position: absolute; inset: 25% -15% -5%; opacity: .42; filter: blur(50px); background: radial-gradient(ellipse at 30% 100%, rgba(84,17,7,.85), transparent 52%), radial-gradient(ellipse at 72% 100%, rgba(108,23,8,.75), transparent 55%); animation: fire-smoke-drift 7s ease-in-out infinite alternate; }
.fire-glow { position: absolute; left: -8%; right: -8%; bottom: -120px; height: 270px; opacity: .54; filter: blur(25px); background: radial-gradient(ellipse at center bottom, #ffca4b 0 3%, #ff5a16 23%, rgba(189,30,6,.58) 46%, transparent 73%); animation: fire-breathe 2.7s ease-in-out infinite alternate; }
.fire-embers { position: absolute; inset: 0; }
.fire-ember { position: absolute; left: var(--x); bottom: -10px; width: var(--size); height: var(--size); border-radius: 50%; opacity: 0; background: #ffd369; box-shadow: 0 0 7px #ff6a20, 0 0 14px rgba(255,72,12,.75); will-change: transform, opacity; animation: fire-ember-rise var(--duration) linear var(--delay) infinite; }
.fire-credit { position: fixed; z-index: 2; left: 10px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); padding: 4px 6px; border-radius: 7px; background: rgba(18,3,1,.58); color: rgba(255,218,185,.58); font-size: 7px; line-height: 1; pointer-events: auto; backdrop-filter: blur(5px); }
.fire-credit a { color: inherit; }

body.fire-theme .topbar { background: rgba(25,5,3,.91); border-bottom: 1px solid rgba(255,100,40,.3); box-shadow: 0 8px 30px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
body.fire-theme .brand-mark { background: linear-gradient(145deg, #ffd15c, #ff6b22); color: #381006; box-shadow: 0 0 22px rgba(255,104,27,.35); }
body.fire-theme .topbar-rules-link,
body.fire-theme .avatar-button,
body.fire-theme .help-button,
body.fire-theme .fire-theme-toggle,
body.fire-theme .duck-theme-toggle,
body.fire-theme .fire-sound-toggle { border-color: rgba(255,142,75,.34); background: rgba(91,24,12,.58); color: #ffd7a1; }
body.fire-theme .fire-theme-toggle.active { border-color: #ffc04c; background: #a52d11; box-shadow: 0 0 9px #ff9d32, 0 0 26px rgba(255,70,13,.52); }
body.fire-theme .fire-sound-toggle:not(.muted) { border-color: #ffb44e; box-shadow: 0 0 16px rgba(255,103,29,.3); }
body.fire-theme .fire-sound-toggle.muted { border-color: rgba(255,142,75,.2); background: rgba(48,18,12,.72); color: #ad7964; }
body.fire-theme .bottom-nav { background: rgba(30,6,4,.93); border-color: rgba(255,111,47,.32); box-shadow: 0 16px 38px rgba(0,0,0,.48), 0 0 34px rgba(255,67,14,.15); backdrop-filter: blur(18px); }
body.fire-theme .nav-item { color: #b9826d; }
body.fire-theme .nav-item.active { color: #ffd05a; background: linear-gradient(145deg, rgba(150,38,15,.62), rgba(88,18,9,.82)); box-shadow: inset 0 0 0 1px rgba(255,145,70,.12), 0 0 18px rgba(255,73,17,.08); }
body.fire-theme .active-card { border: 1px solid rgba(255,130,55,.32); background: linear-gradient(145deg, #70180e 0%, #a52b13 48%, #631108 100%); box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 30px rgba(255,62,11,.15); }
body.fire-theme .active-card::after { background: radial-gradient(circle, rgba(255,193,72,.3), rgba(255,73,18,.08) 58%, transparent 70%); }
body.fire-theme .active-card .player-avatar { background: rgba(255,190,73,.18); color: #ffd15a; box-shadow: inset 0 0 0 1px rgba(255,201,92,.14); }
body.fire-theme .active-card .player-copy span,
body.fire-theme .active-card .active-timer span,
body.fire-theme .active-card .timer-memory span { color: #efb59a; }
body.fire-theme .active-actions .buff-button { border-color: #ffcf55; background: linear-gradient(135deg, #ffdb61, #ff9b2e); color: #4a1306; box-shadow: 0 6px 16px rgba(255,107,23,.24); }
body.fire-theme .active-actions button:not(.buff-button):not(.unmark-button) { border-color: rgba(255,200,142,.22); background: rgba(69,9,5,.32); }
body.fire-theme .active-actions .unmark-button { border-color: rgba(255,157,136,.34); background: #5f1613; color: #ffb1a4; }

body.fire-theme :is(.stat-card,.candidate-card,.history-item,.settings-card,.password-card,.alliance-player-card,.players-table-wrap,.oil-card,.oil-opponent-day,.oil-alliance-card,.public-form,.public-queue-section,.public-queue-card,.empty-card) { background: linear-gradient(145deg, rgba(76,20,14,.97), rgba(51,11,8,.97)); border-color: var(--line); box-shadow: var(--shadow); }
body.fire-theme :is(.candidate-card,.stat-card,.history-item,.alliance-player-card,.oil-card,.public-queue-card):hover { border-color: rgba(255,139,65,.47); }
body.fire-theme :is(.type-switch,.public-queue-tabs,.player-screen-tabs,.settings-section-heading,.oil-opponent-day-heading,.oil-rival-player-list) { background: rgba(71,18,12,.8); }
body.fire-theme :is(.type-tab.active,.public-queue-tab.active,.player-screen-tab.active) { background: linear-gradient(145deg, #7b2111, #4d1009); color: #ffd7a1; box-shadow: inset 0 0 0 1px rgba(255,140,64,.17), 0 4px 14px rgba(0,0,0,.24); }
body.fire-theme :is(.queue-move-actions button,.edit-button,.player-edit-button,.secondary-button,.oil-opponent-edit,.oil-alliance-meta button,.oil-rival-player-actions button,.oil-round-toolbar select,.collapse-toggle) { border-color: rgba(255,139,75,.28); background: #58170f; color: #ffc37a; }
body.fire-theme :is(.mark-button,.primary-button,.player-buff-card button:not(:disabled),.manage-link button) { background: linear-gradient(135deg, #ef5524, #a92810); color: #fff4e3; box-shadow: 0 7px 18px rgba(184,39,10,.28); }
body.fire-theme :is(.field input,.field select,.field textarea,.sort-control select,.manage-link input,.setting-row input,.players-toolbar input,.oil-toolbar input) { border-color: rgba(255,139,75,.28); background: rgba(34,7,5,.72); color: var(--ink); caret-color: #ffb046; }
body.fire-theme :is(.field input,.field textarea,.manage-link input)::placeholder { color: #9f6b58; }
body.fire-theme .sheet-dialog { border: 1px solid rgba(255,131,61,.3); background: linear-gradient(160deg, #51150e, #280806 76%); box-shadow: 0 24px 80px rgba(0,0,0,.64), 0 0 40px rgba(255,59,9,.12); }
body.fire-theme .sheet-dialog::backdrop { background: rgba(8,1,0,.72); backdrop-filter: blur(6px); }
body.fire-theme .dialog-handle { background: #9b5136; }
body.fire-theme :is(.player-avatar,.history-icon,.form-icon,.public-queue-position,.player-group-tags span,.capacity-pill) { background: #6a2115; color: #ffb65c; }
body.fire-theme :is(.timer-memory span,.public-buffs,.oil-card-meta span,.oil-opponent-meta span,.history-actor,.history-changes span,.rules-list li) { background: rgba(94,27,16,.78); }
body.fire-theme .player-buff-card.ready { border-color: rgba(255,146,70,.34); background: linear-gradient(145deg, #711d10, #4a100a); }
body.fire-theme .player-buff-card.cooldown { background: #4c130d; }
body.fire-theme :is(.player-buff-card.needs-attention,.alliance-player-card.needs-attention,.players-table tbody tr.needs-attention) { border-color: rgba(255,179,62,.5); background: linear-gradient(145deg, #6d270e, #451008); }
body.fire-theme .player-buff-card button:disabled { background: #35100c; color: #9d6c5a; }
body.fire-theme .player-buff-card .secondary-buff-action { border-color: rgba(255,173,91,.34); background: transparent; color: #ffc078; box-shadow: none; }
body.fire-theme .oil-card.has-pass { border-color: rgba(255,195,73,.48); background: linear-gradient(145deg, #68240f, #3d0c08); }
body.fire-theme .oil-card.has-pass .oil-card-meta span { background: rgba(93,28,14,.76); }
body.fire-theme :is(.oil-opponent-card,.oil-rival-player,.reaction-button,.reaction-add-button,.content-inline-action) { border-color: var(--line); background: #4a120c; color: var(--ink); }
body.fire-theme .attention-banner { background: #56200e; color: #ffc272; }
body.fire-theme .last-queue-update { border-color: var(--line); background: rgba(56,12,8,.68); }
body.fire-theme .queue-number { border-color: #48110b; background: #e54e20; }
body.fire-theme .status-dot { background: #ff812d; box-shadow: 0 0 8px rgba(255,112,30,.5); }
body.fire-theme .live-badge { color: #ffd05b; }
body.fire-theme .live-badge::before { background: #ffd05b; box-shadow: 0 0 0 4px rgba(255,180,51,.12), 0 0 10px rgba(255,103,23,.5); }
body.fire-theme .knowledge-menu-links { border-color: var(--line); background: #35100b; }
body.fire-theme .knowledge-menu-links a:hover { background: #641b10; color: #ffd06a; }
body.fire-theme .hero-row h1,
body.fire-theme .page-heading h1,
body.fire-theme .players-heading h1,
body.fire-theme .oil-heading h1,
body.fire-theme .content-section > .section-heading h2 { color: #fff2dc; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
body.fire-theme .page-heading > p,
body.fire-theme .players-heading > div > p,
body.fire-theme .oil-heading > div > p { color: #dca78f; }
@keyframes fire-breathe {
  from { opacity: .68; transform: scaleX(.96) scaleY(.92); }
  to { opacity: .98; transform: scaleX(1.04) scaleY(1.08); }
}
@keyframes fire-ember-rise {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.6); }
  12% { opacity: .95; }
  72% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(var(--drift),-72vh,0) scale(.15); }
}
@keyframes fire-smoke-drift {
  from { transform: translate3d(-2%,2%,0) scale(1); }
  to { transform: translate3d(3%,-2%,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.fire-theme::before,
  .fire-smoke,
  .fire-glow,
  .fire-ember { animation: none; }
  .fire-video { display: none; }
  .fire-ember { display: none; }
}

body.duck-theme {
  --bg: #fff3fa;
  --surface: #fffafd;
  --surface-soft: #fde7f3;
  --ink: #4a2440;
  --muted: #8d637d;
  --line: #f1c7dd;
  --green: #df4f98;
  --green-dark: #ad2f72;
  --green-soft: #f9d9ea;
  --lime: #ffe36d;
  --amber: #eb6cab;
  --amber-soft: #ffe3f1;
  --red: #c83f79;
  --red-soft: #ffe1ee;
  --shadow: 0 16px 42px rgba(172,47,113,.13);
  color-scheme: light;
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 88% 15%, rgba(255,210,234,.82), transparent 30%),
    linear-gradient(145deg, #fff9fc 0%, #ffe7f4 52%, #ffd9ed 100%);
  background-size: 125% 125%, 130% 130%, 115% 115%;
  background-attachment: fixed;
  animation: duck-background-flow 18s ease-in-out infinite alternate;
}
body.duck-theme::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 74%, rgba(255,255,255,.78), transparent 22%),
    radial-gradient(circle at 78% 62%, rgba(255,183,218,.36), transparent 26%);
}
.duck-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .4s ease; contain: strict; }
body.duck-theme .duck-atmosphere { opacity: 1; visibility: visible; }
.duck-pink-glow { position: absolute; inset: -12%; background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.22), transparent 26%), radial-gradient(circle at 72% 62%, rgba(255,140,201,.16), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%, rgba(255,143,200,.12)); animation: duck-glow-breathe 12s ease-in-out infinite alternate; }
.duck-lights, .duck-floaters, .duck-animated-layer { position: absolute; inset: 0; }
.duck-light { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #fff6a7; opacity: .22; box-shadow: 0 0 7px 2px rgba(255,239,132,.58), 0 0 20px 6px rgba(255,126,192,.24); animation: duck-light-dance var(--duration) ease-in-out var(--delay) infinite; }
.duck-floater { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); opacity: .13; filter: saturate(1.02) drop-shadow(0 10px 16px rgba(178,48,111,.18)); transform: translate(-50%,-50%) rotate(var(--rotate)); animation: duck-dance var(--duration) ease-in-out var(--delay) infinite; will-change: transform; }
.duck-floater img { display: block; width: 100%; height: 100%; object-fit: contain; animation: duck-happy-wiggle 4.8s ease-in-out var(--delay) infinite; transform-origin: 50% 78%; }
.duck-animated-layer { z-index: 1; }
.duck-animated-sticker { position: absolute; left: var(--x); top: var(--y); width: var(--size); opacity: .22; filter: saturate(1.08) drop-shadow(0 13px 20px rgba(143,31,91,.22)); will-change: transform; }
.duck-animated-sticker img { display: block; width: 100%; height: auto; }
.duck-animated-sticker.route-a { animation: duck-flight-a var(--duration) ease-in-out var(--delay) infinite; }
.duck-animated-sticker.route-b { animation: duck-flight-b var(--duration) ease-in-out var(--delay) infinite; }
.duck-animated-sticker.route-c { animation: duck-flight-c var(--duration) ease-in-out var(--delay) infinite; }

body.duck-theme .topbar { background: linear-gradient(115deg, rgba(103,31,73,.96), rgba(137,41,91,.95), rgba(103,31,73,.96)); background-size: 180% 180%; border-bottom: 1px solid rgba(255,170,212,.38); box-shadow: 0 8px 28px rgba(98,25,65,.18); backdrop-filter: blur(16px); animation: duck-topbar-flow 10s ease-in-out infinite; }
body.duck-theme .brand-mark { background: linear-gradient(145deg, #fff18b, #ffbddc); color: #7d2858; box-shadow: 0 0 20px rgba(255,181,218,.38); }
body.duck-theme .brand-mark svg { display: none; }
body.duck-theme .brand-mark::before { content: ""; width: 34px; height: 34px; background: url("./assets/duck-pack-main.png") center / contain no-repeat; }
body.duck-theme .brand-copy span { color: #e9b5d1; }
body.duck-theme .topbar-rules-link,
body.duck-theme .avatar-button,
body.duck-theme .help-button,
body.duck-theme .fire-theme-toggle,
body.duck-theme .duck-theme-toggle { border-color: rgba(255,196,225,.32); background: rgba(132,43,91,.7); color: #ffe4f2; }
body.duck-theme .duck-theme-toggle.active { border-color: #fff08a; background: #d94f97; box-shadow: 0 0 9px rgba(255,239,127,.7), 0 0 25px rgba(255,111,184,.48); }
body.duck-theme .bottom-nav { background: rgba(102,29,70,.94); border-color: rgba(255,178,216,.42); box-shadow: 0 16px 38px rgba(96,27,65,.24), 0 0 30px rgba(255,121,188,.13); backdrop-filter: blur(18px); }
body.duck-theme .nav-item { color: #deb0ca; }
body.duck-theme .nav-item svg { display: none; }
body.duck-theme .nav-item::before { content: ""; width: 24px; height: 24px; background-position: center; background-size: contain; background-repeat: no-repeat; filter: grayscale(.28) saturate(.75); transition: filter .18s ease, transform .18s ease; }
body.duck-theme .nav-item[data-view="queueView"]::before { background-image: url("./assets/duck-nav-queue.png"); }
body.duck-theme .nav-item[data-view="playersView"]::before { background-image: url("./assets/duck-nav-players.png"); }
body.duck-theme .nav-item[data-view="oilView"]::before { background-image: url("./assets/duck-nav-oil.png"); }
body.duck-theme .nav-item[data-view="historyView"]::before { background-image: url("./assets/duck-nav-history.png"); }
body.duck-theme .nav-item[data-view="settingsView"]::before { background-image: url("./assets/duck-nav-settings.png"); }
body.duck-theme .nav-item[data-view="adminView"]::before { background-image: url("./assets/duck-nav-officers.png"); }
body.duck-theme .nav-item.active { color: #fff08a; background: linear-gradient(145deg, rgba(224,79,152,.62), rgba(139,42,92,.8)); box-shadow: inset 0 0 0 1px rgba(255,210,232,.18), 0 0 17px rgba(255,102,179,.14); }
body.duck-theme .nav-item.active::before { filter: none; transform: translateY(-2px) scale(1.08) rotate(-4deg); animation: duck-nav-dance 3.2s ease-in-out infinite; }
body.duck-theme .active-card { border: 1px solid rgba(255,178,216,.58); background: linear-gradient(145deg, #bd3d83 0%, #e965aa 52%, #a92f72 100%); box-shadow: 0 18px 42px rgba(151,40,98,.22), 0 0 28px rgba(255,129,192,.13); animation: duck-card-glow 5.8s ease-in-out infinite; }
body.duck-theme .active-card::after { content: ""; width: 76px; height: 76px; right: -15px; top: -20px; opacity: .32; background: rgba(255,239,128,.2) url("./assets/duck-pack-main.png") center / 58px no-repeat; transform: rotate(-8deg); pointer-events: none; animation: duck-card-mascot 4.6s ease-in-out infinite; }
body.duck-theme .active-card .player-avatar { background: rgba(255,241,137,.22); color: #fff495; box-shadow: inset 0 0 0 1px rgba(255,247,181,.18); }
body.duck-theme .active-card .player-copy span,
body.duck-theme .active-card .active-timer span,
body.duck-theme .active-card .timer-memory span { color: #ffe0ef; }
body.duck-theme .active-card .timer-memory span { background: rgba(105,28,69,.26); }
body.duck-theme .active-actions .buff-button { border-color: #fff08a; background: linear-gradient(135deg, #fff394, #ffd85e); color: #6d2851; box-shadow: 0 6px 16px rgba(122,38,83,.17); }
body.duck-theme .active-actions button:not(.buff-button):not(.unmark-button) { border-color: rgba(255,255,255,.3); background: rgba(105,28,69,.2); }
body.duck-theme .active-actions .unmark-button { border-color: #ffd3e7; background: #ffe2ef; color: #a52f6d; }

body.duck-theme :is(.stat-card,.candidate-card,.history-item,.settings-card,.password-card,.alliance-player-card,.players-table-wrap,.group-summary-card,.oil-card,.oil-opponent-day,.oil-alliance-card,.public-form,.public-queue-section,.public-queue-card,.empty-card) { background: linear-gradient(145deg, rgba(255,253,254,.97), rgba(255,240,248,.97)); border-color: var(--line); box-shadow: var(--shadow); }
body.duck-theme :is(.candidate-card,.stat-card,.history-item,.alliance-player-card,.oil-card,.public-queue-card):hover { border-color: rgba(222,77,151,.45); }
body.duck-theme :is(.type-switch,.public-queue-tabs,.player-screen-tabs,.settings-section-heading,.oil-opponent-day-heading,.oil-rival-player-list) { background: rgba(250,216,234,.8); }
body.duck-theme :is(.type-tab.active,.public-queue-tab.active,.player-screen-tab.active) { background: linear-gradient(145deg, #fffafd, #ffe5f2); color: var(--green-dark); box-shadow: inset 0 0 0 1px rgba(223,79,152,.12), 0 4px 14px rgba(149,45,99,.1); }
body.duck-theme :is(.queue-move-actions button,.edit-button,.player-edit-button,.secondary-button,.oil-opponent-edit,.oil-alliance-meta button,.oil-rival-player-actions button,.oil-round-toolbar select,.collapse-toggle) { border-color: #efbed7; background: #fff0f7; color: var(--green-dark); }
body.duck-theme :is(.mark-button,.primary-button,.player-buff-card button:not(:disabled),.manage-link button) { background: linear-gradient(135deg, #eb70ae, #c73e85); color: white; box-shadow: 0 7px 18px rgba(179,49,116,.2); }
body.duck-theme :is(.mark-button,.primary-button,.active-actions .buff-button) { background-size: 170% 170%; animation: duck-button-pulse 4.8s ease-in-out infinite; }
body.duck-theme :is(.field input,.field select,.field textarea,.sort-control select,.manage-link input,.setting-row input,.players-toolbar input,.oil-toolbar input) { border-color: #efc4da; background: rgba(255,250,253,.94); color: var(--ink); caret-color: #d94791; }
body.duck-theme :is(.field input,.field textarea,.manage-link input)::placeholder { color: #b68a9f; }
body.duck-theme .sheet-dialog { border: 1px solid #efbdd6; background: linear-gradient(160deg, #fffafd, #ffe8f4 78%); box-shadow: 0 24px 80px rgba(112,31,76,.26), 0 0 35px rgba(255,111,184,.13); }
body.duck-theme .sheet-dialog::backdrop { background: rgba(72,19,54,.38); backdrop-filter: blur(6px); }
body.duck-theme .dialog-handle { background: #e7a3c5; }
body.duck-theme :is(.player-avatar,.history-icon,.form-icon,.public-queue-position,.player-group-tags span,.capacity-pill) { background: #f7d7e8; color: #b43176; }
body.duck-theme :is(.timer-memory span,.public-buffs,.oil-card-meta span,.oil-opponent-meta span,.history-actor,.history-changes span,.rules-list li) { background: rgba(249,218,234,.82); }
body.duck-theme .player-buff-card.ready { border-color: #efb7d3; background: linear-gradient(145deg, #fff7fb, #ffe1f0); }
body.duck-theme .player-buff-card.cooldown { background: #fdebf4; }
body.duck-theme :is(.player-buff-card.needs-attention,.alliance-player-card.needs-attention,.players-table tbody tr.needs-attention) { border-color: #ed9dc5; background: linear-gradient(145deg, #fff0f7, #ffdbea); }
body.duck-theme .player-buff-card button:disabled { background: #f4e3ec; color: #ad8499; }
body.duck-theme .player-buff-card .secondary-buff-action { border-color: #eeb5d1; background: transparent; color: #b93d7b; box-shadow: none; }
body.duck-theme .oil-card.has-pass { border-color: #edb5d0; background: linear-gradient(145deg, #fff1f8, #ffdeee); }
body.duck-theme :is(.oil-opponent-card,.oil-rival-player,.reaction-button,.reaction-add-button,.content-inline-action) { border-color: var(--line); background: #fff8fc; color: var(--ink); }
body.duck-theme .attention-banner { background: #ffe0ef; color: #a92f70; }
body.duck-theme .last-queue-update { border-color: var(--line); background: rgba(255,248,252,.84); }
body.duck-theme .queue-number { border-color: #fff; background: #dd4d96; }
body.duck-theme .status-dot { background: #e4529b; box-shadow: 0 0 8px rgba(228,82,155,.36); }
body.duck-theme .live-badge { color: #b73176; }
body.duck-theme .live-badge::before { background: #ed69ac; box-shadow: 0 0 0 4px rgba(237,105,172,.12), 0 0 10px rgba(220,67,143,.3); }
body.duck-theme .knowledge-menu-links { border-color: #d987b2; background: #7a2857; }
body.duck-theme .knowledge-menu-links a:hover { background: #a23871; color: #fff08a; }
body.duck-theme .collapse-toggle { --collapse-border: #efbed7; --collapse-bg: #fff0f7; --collapse-color: #ad2f72; }
body.duck-theme .collapse-toggle:focus-visible { outline-color: #df4f98; }
body.duck-theme .hero-row h1,
body.duck-theme .page-heading h1,
body.duck-theme .players-heading h1,
body.duck-theme .oil-heading h1,
body.duck-theme .content-section > .section-heading h2 { color: #542440; }
body.duck-theme .page-heading > p,
body.duck-theme .players-heading > div > p,
body.duck-theme .oil-heading > div > p { color: #94657e; }

@keyframes duck-dance {
  0%, 100% { transform: translate(-50%,-50%) translate3d(var(--sway-left), var(--lift-start), 0) rotate(calc(var(--rotate) - 4deg)); }
  25% { transform: translate(-50%,-50%) translate3d(0, var(--lift-up), 0) rotate(calc(var(--rotate) + 3deg)) scale(1.035); }
  55% { transform: translate(-50%,-50%) translate3d(var(--sway), 0, 0) rotate(calc(var(--rotate) + 6deg)); }
  78% { transform: translate(-50%,-50%) translate3d(var(--sway-soft), var(--lift-half), 0) rotate(calc(var(--rotate) - 2deg)) scale(.985); }
}
@keyframes duck-happy-wiggle {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.035); }
}
@keyframes duck-flight-a {
  0%, 100% { transform: translate(-50%,-50%) translate3d(-38px, 22px, 0) rotate(-9deg) scale(.94); }
  32% { transform: translate(-50%,-50%) translate3d(34px, -31px, 0) rotate(7deg) scale(1.06); }
  67% { transform: translate(-50%,-50%) translate3d(58px, 12px, 0) rotate(-3deg) scale(1); }
}
@keyframes duck-flight-b {
  0%, 100% { transform: translate(-50%,-50%) translate3d(28px, -24px, 0) rotate(8deg) scale(1.02); }
  38% { transform: translate(-50%,-50%) translate3d(-52px, 19px, 0) rotate(-8deg) scale(.93); }
  72% { transform: translate(-50%,-50%) translate3d(-15px, 43px, 0) rotate(4deg) scale(1.07); }
}
@keyframes duck-flight-c {
  0%, 100% { transform: translate(-50%,-50%) translate3d(-18px, 35px, 0) rotate(-5deg) scale(.96); }
  30% { transform: translate(-50%,-50%) translate3d(42px, 10px, 0) rotate(9deg) scale(1.04); }
  61% { transform: translate(-50%,-50%) translate3d(5px, -47px, 0) rotate(-6deg) scale(1.08); }
}
@keyframes duck-light-dance {
  0%, 100% { opacity: .08; transform: translate3d(0, 8px, 0) scale(.72); }
  45% { opacity: .42; transform: translate3d(var(--drift), -10px, 0) scale(1.08); }
  72% { opacity: .22; transform: translate3d(var(--drift-back), -19px, 0) scale(.9); }
}
@keyframes duck-glow-breathe {
  from { transform: scale(1) translate3d(-1%, 0, 0); opacity: .72; }
  to { transform: scale(1.05) translate3d(1%, -1%, 0); opacity: 1; }
}
@keyframes duck-background-flow {
  from { background-position: 0% 4%, 100% 0%, 40% 45%; }
  to { background-position: 8% 10%, 91% 9%, 58% 55%; }
}
@keyframes duck-topbar-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes duck-nav-dance {
  0%, 100% { transform: translateY(-2px) scale(1.08) rotate(-4deg); }
  45% { transform: translateY(-5px) scale(1.13) rotate(3deg); }
  70% { transform: translateY(-2px) scale(1.09) rotate(-1deg); }
}
@keyframes duck-card-glow {
  0%, 100% { box-shadow: 0 18px 42px rgba(151,40,98,.22), 0 0 24px rgba(255,129,192,.1); }
  50% { box-shadow: 0 20px 47px rgba(151,40,98,.27), 0 0 34px rgba(255,156,207,.2); }
}
@keyframes duck-card-mascot {
  0%, 100% { transform: translate3d(0,0,0) rotate(-8deg) scale(1); }
  50% { transform: translate3d(-3px,4px,0) rotate(1deg) scale(1.06); }
}
@keyframes duck-button-pulse {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 7px 18px rgba(179,49,116,.18); }
  50% { background-position: 100% 50%; box-shadow: 0 9px 23px rgba(179,49,116,.3); }
}
@media (prefers-reduced-motion: reduce) {
  body.duck-theme, body.duck-theme .topbar, body.duck-theme .nav-item.active::before, body.duck-theme .active-card, body.duck-theme .active-card::after,
  body.duck-theme :is(.mark-button,.primary-button,.active-actions .buff-button), .duck-pink-glow, .duck-floater, .duck-floater img, .duck-light { animation: none; }
  .duck-light, .duck-animated-layer { display: none; }
}

main { width: min(1120px, 100%); margin: 0 auto; }
.view { display: none; padding: 28px 20px 24px; animation: fade-in .25s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
.hero-row, .section-heading, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--green); font-weight: 800; font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(27px, 4vw, 39px); letter-spacing: -.04em; line-height: 1.05; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.025em; }
.last-queue-update { width: fit-content; max-width: 100%; margin-top: 13px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.58); color: var(--muted); font-size: 9px; line-height: 1.3; }
.last-queue-update::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.last-queue-update span { white-space: nowrap; }
.last-queue-update strong { min-width: 0; color: var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.primary-button { border: 0; padding: 14px 18px; border-radius: 14px; background: var(--green); color: white; font-weight: 800; box-shadow: 0 7px 16px rgba(45,117,82,.18); }
.primary-button:hover { background: var(--green-dark); }
.primary-button.compact { padding: 12px 15px; }
.primary-button.full { width: 100%; }
.danger-button { border: 1px solid #efc7c2; padding: 12px 16px; border-radius: 14px; background: var(--red-soft); color: var(--red); font-weight: 800; }
.danger-button.full { width: 100%; margin-top: 10px; }
.danger-button:disabled { opacity: .55; cursor: wait; }
.form-note { margin-bottom: 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.public-view { padding-top: 42px; }
.public-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); align-items: center; gap: clamp(35px, 8vw, 110px); min-height: calc(100vh - 210px); }
.public-intro h1 { max-width: 600px; font-size: clamp(42px, 7vw, 76px); }
.public-lead { max-width: 520px; margin: 20px 0 26px; color: var(--muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.5; }
.public-rules { display: flex; flex-wrap: wrap; gap: 10px; }
.public-rules span { padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.6); color: var(--muted); font-size: 11px; font-weight: 700; }
.public-rules b { color: var(--green); font-size: 15px; }
.public-rules-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 11px 14px; border: 1px solid #b8d6c2; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); text-decoration: none; font-size: 11px; font-weight: 900; }
.public-rules-link:hover { background: #cce4d4; }
.public-form { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.form-title { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.form-title strong, .form-title small { display: block; }
.form-title strong { font-size: 18px; }
.form-title small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.form-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 22px; }
.privacy-note { margin: 11px 0 0; color: var(--muted); text-align: center; font-size: 9px; }
.public-success { max-width: 680px; margin: 10px auto; padding: 20px; border: 1px solid #b9dac6; border-radius: 18px; background: var(--green-soft); }
.public-success h2 { margin-bottom: 7px; color: var(--green-dark); }
.public-success p { color: #426452; font-size: 12px; line-height: 1.5; }
.public-queue-section { margin-top: 54px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.48); }
.public-queue-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.public-queue-heading h2 { font-size: clamp(23px, 3vw, 31px); }
.public-queue-heading p:last-child { max-width: 520px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.public-live-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; font-weight: 800; }
.public-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(45,117,82,.1); }
.public-queue-tabs { margin-top: 20px; display: inline-flex; gap: 5px; padding: 5px; border-radius: 14px; background: #e7ebe7; }
.public-queue-tab { border: 0; padding: 9px 12px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.public-queue-tab span { display: inline-grid; min-width: 19px; height: 19px; margin-left: 5px; place-items: center; padding: 0 5px; border-radius: 10px; background: rgba(255,255,255,.65); font-size: 9px; }
.public-queue-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 3px 10px rgba(29,49,39,.08); }
.public-queue-tab.active span { background: var(--green-soft); color: var(--green); }
.public-queue-list { margin-top: 13px; display: grid; gap: 9px; }
.public-queue-card { min-width: 0; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.public-queue-card.on-mark { border-color: #bad8c5; background: linear-gradient(135deg, #f7fbf8, #e8f3ec); }
.public-queue-position { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--green-dark); font-size: 9px; font-weight: 900; font-variant-numeric: tabular-nums; }
.public-queue-card.on-mark .public-queue-position { background: var(--green); color: white; }
.public-player-copy { min-width: 0; }
.public-player-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.public-player-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.public-queue-card.on-mark .public-player-copy span { color: var(--green); font-weight: 800; }
.public-remaining { text-align: right; white-space: nowrap; }
.public-remaining span, .public-buffs span { display: block; color: var(--muted); font-size: 8px; }
.public-remaining strong { display: block; margin-top: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.public-buffs { min-width: 61px; padding: 7px 8px; border-radius: 10px; background: var(--surface-soft); text-align: center; }
.public-buffs strong { display: block; color: var(--green-dark); font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; }
.public-buffs span { margin-top: 4px; white-space: nowrap; }
.manage-link { display: flex; gap: 8px; margin-top: 13px; }
.manage-link input { min-width: 0; flex: 1; border: 1px solid #b9d1c2; padding: 10px; border-radius: 10px; background: white; color: var(--green-dark); font-size: 10px; }
.manage-link button { border: 0; padding: 10px 13px; border-radius: 10px; background: var(--green); color: white; font-size: 10px; font-weight: 800; }
.form-error { margin: 0 0 13px; padding: 10px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700; }
.manage-shell { padding-bottom: 30px; }
.manage-main { max-width: 620px; padding: 42px 20px; }
.manage-main .public-form { margin-top: 20px; }
.manage-main .buff-current { margin-bottom: 17px; }
.error-state { background: var(--red-soft); border-color: #ecc9c5; }
.error-state h2, .error-state p { color: var(--red); }

.type-switch { margin-top: 25px; display: inline-flex; gap: 5px; padding: 5px; border-radius: 15px; background: #e7ebe7; }
.type-tab { display: flex; align-items: center; gap: 8px; border: 0; padding: 10px 13px; color: #68756f; background: transparent; border-radius: 11px; font-size: 13px; font-weight: 800; }
.type-tab.active { color: var(--ink); background: var(--surface); box-shadow: 0 3px 12px rgba(29,49,39,.08); }
.tab-count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 10px; background: #edf0ed; font-size: 10px; }
.type-tab.active .tab-count { background: var(--green-soft); color: var(--green); }

.stats-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card { min-width: 0; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.stat-card span { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card strong { display: block; margin-top: 4px; font-size: 23px; letter-spacing: -.04em; }
.stat-card.warning strong { color: var(--amber); }
.queue-message-section { margin-top: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.queue-message-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer; list-style: none; }
.queue-message-section > summary::-webkit-details-marker { display: none; }
.queue-message-section > summary small { display: block; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.queue-message-section > summary strong { display: block; margin-top: 3px; font-size: 15px; color: var(--ink); }
.queue-message-chevron { color: var(--green); font-size: 22px; line-height: 1; transition: transform .18s ease; }
.queue-message-section[open] .queue-message-chevron { transform: rotate(180deg); }
.queue-message-section > summary:focus-visible, .queue-message-copy:focus-visible, .queue-message-part textarea:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.queue-message-body { padding: 0 16px 16px; }
.queue-message-body > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.queue-message-parts { display: grid; gap: 12px; }
.queue-message-part { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.queue-message-part-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.queue-message-part-heading span { color: var(--muted); font-size: 11px; font-weight: 700; }
.secondary-button.compact.queue-message-copy { min-height: 44px; padding: 10px 14px; font-size: 12px; }
.queue-message-copy:disabled { opacity: .55; cursor: wait; }
.queue-message-part textarea { display: block; width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.5; resize: vertical; overflow-wrap: anywhere; }
.content-section { margin-top: 32px; }
.capacity-pill { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; }
.active-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.active-card { position: relative; overflow: hidden; padding: 17px; color: white; background: linear-gradient(135deg, #1d382c, #275a41); border-radius: 20px; box-shadow: var(--shadow); }
.editable-request-card { cursor: pointer; }
.editable-request-card:hover { border-color: var(--green); }
.editable-request-card button { cursor: pointer; }
.active-card::after { content: ""; position: absolute; width: 110px; height: 110px; right: -48px; top: -50px; border-radius: 50%; background: rgba(216,239,109,.14); }
.active-top, .candidate-top { display: flex; align-items: flex-start; gap: 11px; }
.player-avatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 900; }
.active-card .player-avatar { background: rgba(216,239,109,.18); color: var(--lime); }
.player-copy { min-width: 0; flex: 1; }
.player-copy strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.active-card .player-copy span { color: #afc0b7; }
.live-badge { display: flex; align-items: center; gap: 5px; color: var(--lime); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,239,109,.1); }
.active-timer { margin: 22px 0 15px; }
.active-timer span { display: block; margin-bottom: 3px; color: #a9bbb1; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.active-timer strong { font-size: clamp(20px, 4vw, 27px); letter-spacing: -.04em; }
.timer-memory { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 0 0 15px; }
.timer-memory span { min-width: 0; padding: 7px 8px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; line-height: 1.2; }
.timer-memory b { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.active-card .timer-memory span { background: rgba(255,255,255,.09); color: #afc0b7; }
.active-card .timer-memory b { color: white; }
.timer-memory .timer-memory-givers { position: relative; min-width: 0; min-height: 45px; padding: 7px 24px 7px 8px; border: 1px solid rgba(216,239,109,.35); border-radius: 9px; background: rgba(216,239,109,.12); color: #dce9de; font-size: 9px; line-height: 1.2; text-align: left; }
.timer-memory .timer-memory-givers b { color: white; }
.timer-memory .timer-memory-givers::after { content: "›"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--lime); font-size: 19px; }
.timer-memory .timer-memory-givers:hover { background: rgba(216,239,109,.2); }
.timer-memory .timer-memory-givers:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.active-actions { display: flex; gap: 8px; }
.active-actions button { flex: 1; border: 1px solid rgba(255,255,255,.15); padding: 9px; border-radius: 11px; background: rgba(255,255,255,.09); color: white; font-size: 11px; font-weight: 800; }
.active-actions .buff-button { background: var(--lime); border-color: var(--lime); color: #183022; }
.active-actions .unmark-button { border-color: #f0b8b2; background: #f7d8d5; color: #963c34; }
.empty-card { padding: 25px; text-align: center; border: 1px dashed #cbd4cd; border-radius: 18px; color: var(--muted); }
.empty-card strong { display: block; margin-bottom: 5px; color: var(--ink); }

.candidate-heading { align-items: flex-end; }
.sort-control select { max-width: 160px; border: 1px solid var(--line); padding: 9px 30px 9px 10px; border-radius: 11px; color: var(--ink); background: var(--surface); font-size: 11px; font-weight: 700; }
.candidate-list { margin-top: 14px; display: grid; gap: 9px; }
.candidate-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 12px; row-gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; transition: transform .15s ease, box-shadow .15s ease; }
.queue-move-actions { grid-column: 1 / -1; display: flex; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.queue-move-actions button { flex: 1; border: 0; padding: 7px 9px; border-radius: 9px; background: var(--surface-soft); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.queue-move-actions button:disabled { opacity: .35; cursor: default; }
.candidate-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(32,57,45,.06); }
.candidate-info { min-width: 0; align-self: start; }
.candidate-avatar { position: relative; flex: none; }
.queue-number { position: absolute; top: -7px; left: -7px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); border-radius: 10px; background: var(--green-dark); color: white; box-shadow: 0 2px 6px rgba(24,34,30,.18); font-size: 8px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.candidate-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: 10px; }
.candidate-meta span { display: inline-flex; align-items: center; gap: 4px; }
.queue-age b { color: inherit; font-variant-numeric: tabular-nums; }
.candidate-timer { align-self: start; text-align: right; white-space: nowrap; }
.candidate-timer strong { display: block; font-size: 15px; }
.candidate-timer span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.candidate-card > .timer-memory { grid-column: 1 / -1; width: min(280px, 100%); margin-bottom: 0; }
.mark-button { margin-top: 7px; border: 0; padding: 7px 10px; border-radius: 9px; background: var(--green); color: white; box-shadow: 0 4px 10px rgba(45,117,82,.2); font-size: 10px; font-weight: 800; }
.mark-button:hover { background: var(--green-dark); }
.attention-banner { margin-top: 13px; padding: 11px 13px; border-radius: 12px; background: var(--amber-soft); color: #895111; font-size: 11px; font-weight: 700; }
.attention-banner[hidden] { display: none; }
.attention-banner::before { content: "!"; display: inline-grid; width: 18px; height: 18px; margin-right: 7px; place-items: center; border-radius: 50%; background: var(--amber); color: white; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status-dot.stale { background: var(--amber); }

.page-heading { margin-bottom: 23px; }
.page-heading p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.history-list { display: grid; gap: 9px; }
.history-day { margin: 14px 0 2px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.history-item { display: flex; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.history-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); font-weight: 900; }
.history-item p { margin: 0; font-size: 12px; line-height: 1.45; }
.history-item time { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.history-copy { min-width: 0; flex: 1; }
.history-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.history-kind { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.history-actor { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border-radius: 8px; background: var(--surface-soft); color: var(--ink); font-size: 10px; font-weight: 800; }
.history-actor::before { content: "Кто: "; color: var(--muted); font-weight: 700; }
.history-item-settings { border-color: #b9dec9; background: linear-gradient(135deg, #f4fbf6, var(--surface)); }
.history-item-settings .history-icon { background: var(--green); color: white; }
.history-settings-title { color: var(--green-dark); font-weight: 900; }
.history-changes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.history-changes span { padding: 5px 7px; border-radius: 8px; background: #e3f2e8; color: var(--green-dark); font-size: 10px; font-weight: 800; line-height: 1.25; }
.history-item-buff { border-color: #ecd58c; background: linear-gradient(135deg, #fffaf0, var(--surface)); }
.history-item-buff .history-icon { background: #e5ac30; color: white; }
.history-item-mark { border-color: #b9dec9; }
.history-item-mark .history-icon, .history-item-accept .history-icon, .history-item-add .history-icon { background: var(--green); color: white; }
.history-item-unmark, .history-item-remove { border-color: #edc0c5; background: linear-gradient(135deg, #fff7f7, var(--surface)); }
.history-item-unmark .history-icon, .history-item-remove .history-icon { background: #c95d67; color: white; }
.history-item-edit .history-icon, .history-item-timer .history-icon, .history-item-move .history-icon { background: #e4eef6; color: #356d98; }
.history-item-import .history-icon { background: #eee9fa; color: #7256a8; }
.history-item-oil { border-color: #ecd59f; background: linear-gradient(135deg, #fffaf0, var(--surface)); }
.history-item-oil .history-icon { background: #d89b34; color: white; }
.history-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.history-footer time { margin-top: 0; }
.history-rollback { flex: none; border: 1px solid #b9dec9; padding: 6px 9px; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; font-weight: 900; cursor: pointer; }
.history-rollback:hover { background: #d8eee0; }
.history-undone { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 900; }
.history-item-undone { opacity: .62; }
.history-item-undone .history-copy > p, .history-item-undone .history-settings-title { text-decoration: line-through; }
.settings-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 19px; }
.settings-section-heading { padding: 14px 16px 11px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.settings-section-heading span, .settings-section-heading small { display: block; }
.settings-section-heading span { color: var(--green-dark); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.settings-section-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.settings-section-heading.type-heading { padding-top: 16px; background: var(--green-soft); }
.setting-row { min-height: 70px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.setting-row strong, .setting-row span { display: block; }
.setting-row strong { font-size: 13px; }
.setting-row div > span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.setting-row input { width: 60px; border: 1px solid var(--line); padding: 9px; border-radius: 10px; text-align: center; font-weight: 800; }
.days-input { display: flex; align-items: center; gap: 6px; }
.setting-row .days-input > span { margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; }
.settings-explainer { margin: 14px 16px 0; padding: 12px 13px; border-radius: 12px; background: var(--amber-soft); color: #704718; font-size: 10px; line-height: 1.5; }
.officer-settings-note { margin: 14px 16px 0; padding: 12px 13px; border-radius: 12px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; line-height: 1.5; }
.settings-card .primary-button { margin: 16px; width: calc(100% - 32px); }
.password-card { max-width: 680px; margin-top: 16px; padding: 18px; }
.password-card h2 { margin-bottom: 17px; }
.password-card .primary-button { margin: 0; width: 100%; }
.text-button { display: block; margin: 18px auto; border: 0; background: transparent; font-weight: 700; }
.text-button.danger { color: var(--red); }

.rules-shell { min-height: 100vh; padding-bottom: 42px; }
.rules-topbar { position: sticky; top: 0; z-index: 10; background: rgba(19,27,24,.96); backdrop-filter: blur(12px); }
.rules-topbar-inner { width: min(920px, 100%); min-height: 70px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: white; }
.rules-brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; }
.rules-brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.rules-brand strong { display: block; font-size: 13px; }
.rules-brand small { display: block; margin-top: 3px; color: #9aa79f; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.rules-back { padding: 9px 11px; border: 1px solid #3b4942; border-radius: 10px; color: var(--lime); text-decoration: none; font-size: 10px; font-weight: 800; white-space: nowrap; }
.rules-main { width: min(920px, 100%); margin: 0 auto; padding: 40px 20px; }
.rules-hero { padding: clamp(24px, 6vw, 54px); border-radius: 26px; background: linear-gradient(135deg, #1d4e39, #2d7552); color: white; box-shadow: 0 18px 44px rgba(31,81,58,.21); }
.rules-hero .eyebrow { color: var(--lime); }
.rules-hero h1 { max-width: 650px; font-size: clamp(35px, 6vw, 62px); }
.rules-hero p:last-child { max-width: 590px; margin: 15px 0 0; color: #e0eee5; font-size: 15px; line-height: 1.55; }
.rules-type-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.rules-type-nav a { padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--green-dark); text-decoration: none; font-size: 10px; font-weight: 900; }
.rules-type-nav a:hover, .rules-type-nav a.active { border-color: var(--green); background: var(--green-soft); }
.rules-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 34px; }
.rules-toc a { padding: 9px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--green-dark); text-decoration: none; font-size: 10px; font-weight: 800; }
.rules-toc a:hover { border-color: #9dcab0; background: var(--green-soft); }
.rules-section { scroll-margin-top: 92px; margin-top: 20px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 8px 25px rgba(32,57,45,.05); }
.rules-section-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.rules-section-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--green-soft); font-size: 21px; }
.rules-section h2 { font-size: clamp(21px, 3vw, 29px); }
.rules-section-lead { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rules-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.rules-list li { position: relative; padding: 13px 14px 13px 38px; border-radius: 13px; background: var(--surface-soft); font-size: 13px; line-height: 1.5; }
.rules-list li::before { content: "✓"; position: absolute; left: 13px; top: 13px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 10px; font-weight: 900; }
.rules-list strong { color: var(--green-dark); }
.rules-callout { margin-top: 15px; padding: 14px 15px; border: 1px solid #f0d49d; border-radius: 14px; background: var(--amber-soft); color: #764b16; font-size: 12px; font-weight: 700; line-height: 1.5; }
.rules-footer { margin-top: 28px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.5; }
.content-manager-bar { margin-top: 18px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #b7d7c3; border-radius: 16px; background: var(--green-soft); }
.content-manager-bar strong, .content-manager-bar span { display: block; }
.content-manager-bar strong { color: var(--green-dark); font-size: 13px; }
.content-manager-bar span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.content-manager-bar > div:last-child, .content-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rules-main .primary-button, .rules-main .secondary-button, .rules-main .danger-button { min-height: 40px; margin: 0; border-radius: 11px; padding: 10px 14px; font-size: 11px; font-weight: 900; box-shadow: none; transition: transform .15s ease, filter .15s ease, background .15s ease; }
.rules-main .primary-button:hover, .rules-main .secondary-button:hover, .rules-main .danger-button:hover, .reaction-button:hover { transform: translateY(-1px); filter: brightness(.98); }
.rules-main .primary-button:active, .rules-main .secondary-button:active, .rules-main .danger-button:active, .reaction-button:active { transform: translateY(0); }
.content-manager-bar button, .content-editor-actions button, .content-comment-form button { width: auto; }
.rules-draft { border-style: dashed; opacity: .78; }
.rules-section h2 small { display: inline-block; margin-left: 7px; padding: 4px 7px; border-radius: 999px; background: var(--amber-soft); color: #80541d; font-size: 9px; vertical-align: middle; }
.content-editor-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.content-inline-action { margin: 8px 6px 0 0; border: 0; border-radius: 8px; padding: 5px 7px; background: white; color: var(--green); font-size: 9px; font-weight: 800; }
.content-inline-action.danger { color: #a84343; }
.mailing-community { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.reaction-widget { position: relative; width: fit-content; max-width: 100%; }
.mailing-reaction { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reaction-button { min-width: 43px; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; background: white; color: var(--green-dark); font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.reaction-button b { margin-left: 3px; font-size: 10px; vertical-align: middle; }
.reaction-button.active { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(34,119,75,.08); }
.reaction-add-button { min-height: 34px; border: 1px dashed #b5c5ba; border-radius: 999px; padding: 5px 10px; background: rgba(255,255,255,.72); color: var(--green-dark); font-size: 14px; font-weight: 900; }
.reaction-add-button span { margin-left: 3px; color: var(--muted); font-size: 9px; vertical-align: middle; }
.reaction-add-button[aria-expanded="true"] { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.reaction-picker { position: absolute; z-index: 8; left: 0; top: calc(100% + 8px); width: min(292px, calc(100vw - 64px)); padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 16px 42px rgba(26,53,39,.18); }
.reaction-picker-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.reaction-picker-title strong { color: var(--green-dark); font-size: 11px; }
.reaction-picker-title span { color: var(--muted); font-size: 8px; }
.reaction-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.reaction-choice { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 11px; background: transparent; font-size: 21px; line-height: 1; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.reaction-choice:hover { transform: scale(1.1); background: var(--surface-soft); }
.reaction-choice.active { border-color: #b5d8c1; background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(34,119,75,.08); }
.content-comments { margin-top: 19px; }
.content-comments-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.content-comments h3 { margin: 0; color: var(--green-dark); font-size: 15px; }
.comment-compose-toggle { min-height: 34px !important; padding: 7px 10px !important; font-size: 10px !important; }
.content-comment { margin-top: 9px; padding: 12px 13px; border-radius: 13px; background: var(--surface-soft); }
.content-comment.is-hidden { border: 1px dashed #d6aaa4; background: #fff7f6; opacity: .68; }
.content-comment header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.content-comment header strong { color: var(--green-dark); font-size: 11px; }
.content-comment header span, .content-comment-form small, .content-empty { color: var(--muted); font-size: 9px; }
.content-comment p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; }
.content-comment-form { display: grid; gap: 10px; margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.content-comment-form .secondary-button { justify-self: start; min-width: 174px; background: var(--green); color: white; border-color: var(--green); }
.content-comment-form .field { gap: 5px; margin: 0; }
.content-comment-form .field span { font-size: 10px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; padding-top: 19px; color: var(--green-dark); font-size: 11px; font-weight: 800; }
.content-options { display: grid; gap: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.content-options strong { color: var(--green-dark); font-size: 11px; }
.content-options .checkbox-field { padding-top: 9px; }
.danger-button.compact { width: auto; margin: 0; padding: 9px 11px; font-size: 10px; }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - 16px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,1fr); padding: 5px; background: rgba(20,29,25,.96); border: 1px solid #34413b; border-radius: 18px; box-shadow: 0 12px 28px rgba(17,28,22,.25); backdrop-filter: blur(12px); }
.bottom-nav.admin-mode { grid-template-columns: repeat(6,1fr); }
.nav-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; padding: 5px 2px; color: #91a098; background: transparent; border-radius: 12px; font-size: 8px; line-height: 1.15; font-weight: 700; white-space: nowrap; }
.nav-item svg { font-size: 15px; }
.nav-item.active { color: var(--lime); background: rgba(216,239,109,.08); }

.sheet-dialog { width: min(480px, calc(100% - 20px)); max-height: calc(100vh - 28px); margin: auto auto 10px; overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 0; border-radius: 24px; background: var(--surface); box-shadow: 0 20px 70px rgba(12,27,19,.28); }
.sheet-dialog::backdrop { background: rgba(10,18,14,.55); backdrop-filter: blur(3px); }
.help-dialog { width: min(650px, calc(100% - 20px)); }
.help-content { padding-bottom: 26px; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.help-section { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.help-section strong { display: block; margin-bottom: 6px; color: var(--green-dark); font-size: 12px; }
.help-section p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.dialog-form { padding: 9px 20px 22px; }
.dialog-handle { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 3px; background: #d4d9d5; }
.dialog-heading { margin-bottom: 20px; }
.buff-givers-dialog .dialog-heading { margin-bottom: 12px; }
.buff-givers-summary { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.buff-givers-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: giver; }
.buff-givers-row { counter-increment: giver; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.buff-givers-row::before { content: counter(giver); grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 900; }
.buff-givers-row.renamed::before { grid-row: 1 / 4; }
.buff-givers-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; font-weight: 800; }
.buff-givers-meta { margin-top: 3px; color: var(--muted); font-size: 10px; }
.buff-givers-past-name { grid-column: 2; margin-top: 4px; color: var(--muted); font-size: 10px; }
.buff-givers-empty, .buff-givers-note { margin: 0; padding: 12px; border-radius: 12px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.5; }
.buff-givers-note { margin-top: 12px; }
body.fire-theme .timer-memory .timer-memory-givers { border-color: rgba(255,194,93,.42); background: rgba(255,159,65,.12); color: #ffd2ae; }
body.fire-theme .timer-memory .timer-memory-givers::after { color: #ffce67; }
body.fire-theme .timer-memory .timer-memory-givers:hover { background: rgba(255,159,65,.2); }
body.duck-theme .timer-memory .timer-memory-givers { border-color: rgba(255,240,138,.58); background: rgba(105,28,69,.26); color: #ffe0ef; }
body.duck-theme .timer-memory .timer-memory-givers::after { color: #fff08a; }
body.duck-theme .timer-memory .timer-memory-givers:hover { background: rgba(105,28,69,.38); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 22px; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span, .field-label, .segmented-field legend { color: var(--ink); font-size: 11px; font-weight: 800; }
.field em { color: var(--muted); font-style: normal; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); padding: 12px; border-radius: 12px; outline: none; background: #fafbf9; resize: none; }
.field select { min-height: 44px; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field-help { color: var(--muted); font-size: 9px; line-height: 1.35; }
.player-picker { position: relative; }
.player-picker-control { position: relative; }
.player-picker-search { min-height: 46px; padding-right: 44px !important; }
.player-picker-search::-webkit-search-cancel-button { display: none; }
.player-picker.selected .player-picker-search { border-color: #a9d0b7; background: var(--green-soft); color: var(--green-dark); font-weight: 800; }
.player-picker-clear { position: absolute; z-index: 2; top: 50%; right: 7px; width: 32px; height: 32px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(45,117,82,.12); color: var(--green-dark); font-size: 19px; line-height: 1; }
.player-picker-clear[hidden] { display: none; }
.player-picker-results { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 318px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 38px rgba(20,42,31,.2); overscroll-behavior: contain; }
.player-picker-results[hidden] { display: none; }
.player-picker-results button { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 11px; border: 0; padding: 7px 9px; border-radius: 11px; background: transparent; color: var(--ink); text-align: left; }
.player-picker-results button + button { margin-top: 2px; }
.player-picker-results button:hover, .player-picker-results button[aria-selected="true"] { background: var(--green-soft); color: var(--green-dark); }
.player-picker-results .player-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.player-picker-results strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.player-picker-empty { padding: 15px 12px; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.4; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented-field { margin: 0 0 14px; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.segmented-field legend { margin-bottom: 7px; }
.segmented-field input { position: absolute; opacity: 0; }
.segmented-field span { display: block; padding: 11px; border: 1px solid var(--line); border-radius: 11px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 800; }
.segmented-field input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.buff-current { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 13px; background: var(--surface-soft); }
.buff-current span { color: var(--muted); font-size: 11px; }
.buff-current strong { font-size: 14px; }
.buff-stepper { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; margin: 16px 0; text-align: center; }
.buff-stepper button { height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--green); font-size: 24px; }
.buff-stepper strong { display: block; font-size: 33px; line-height: 1; }
.buff-stepper span { color: var(--muted); font-size: 10px; }
.forecast-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 15px; border-radius: 16px; background: #1b3027; color: white; }
.forecast-card div:not(.forecast-arrow) { text-align: center; }
.forecast-card span { display: block; margin-bottom: 4px; color: #9fb3a8; font-size: 9px; }
.forecast-card strong { font-size: 14px; }
.forecast-arrow { color: var(--lime); }
.recommendation-button { width: 100%; margin: 12px 0; border: 1px solid #cfe2d5; padding: 10px; border-radius: 11px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 800; }
.formula-note { margin: 0 0 14px; color: var(--muted); text-align: center; font-size: 10px; }
.buff-memory { margin: -4px 0 14px; color: var(--muted); text-align: center; font-size: 10px; }
.buff-form .primary-button:disabled { opacity: .62; cursor: wait; box-shadow: none; }
.buff-givers-block { margin: 0 0 13px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.buff-givers-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.buff-givers-heading strong { color: var(--green-dark); font-size: 11px; }
.buff-givers-heading span { color: var(--muted); font-size: 8px; }
.buff-giver-fields { display: grid; gap: 8px; }
.buff-giver-field { margin: 0; }
.buff-giver-field + .buff-giver-field { padding-top: 12px; border-top: 1px solid var(--line); }
.buff-strength-options { margin: 9px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.buff-strength-options legend { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.buff-strength-options label { position: relative; cursor: pointer; }
.buff-strength-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.buff-strength-options span { display: grid; place-items: center; min-height: 40px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; }
.buff-strength-options input:checked + span { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green); }
.buff-strength-options input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 3px; }
.buff-strength-source { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.direct-buff-strength { margin: 15px 0; }
.direct-buff-strength span { min-height: 48px; }
#playerBuffDialogNote { margin-bottom: 18px; line-height: 1.6; }
.buff-giver-field > label { color: var(--green-dark); font-size: 9px; font-weight: 800; }
.buff-giver-control { position: relative; }
.buff-giver-search { min-height: 46px; padding-right: 42px !important; }
.buff-giver-search::-webkit-search-cancel-button { display: none; }
.buff-giver-search.selected { border-color: #a9d0b7; background: var(--green-soft); color: var(--green-dark); font-weight: 800; }
.buff-giver-clear { position: absolute; top: 50%; right: 7px; width: 32px; height: 32px; transform: translateY(-50%); border: 0; border-radius: 9px; background: rgba(45,117,82,.12); color: var(--green-dark); font-size: 18px; }
.buff-giver-results { max-height: 180px; margin-top: 5px; overflow-y: auto; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 9px 24px rgba(20,42,31,.13); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.buff-giver-results button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; border: 0; padding: 6px 8px; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; }
.buff-giver-results button:hover { background: var(--green-soft); color: var(--green-dark); }
.buff-giver-results .player-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 9px; }
.buff-giver-results strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.buff-giver-empty { padding: 13px 8px; color: var(--muted); text-align: center; font-size: 9px; }
.editable-request-card .player-copy strong { cursor: text; user-select: text; -webkit-user-select: text; }
body:has(dialog[open]) { overflow: hidden; }
.queue-readonly-note { margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; font-size: 9px; font-weight: 800; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 98px; max-width: calc(100% - 36px); transform: translate(-50%, 20px); padding: 11px 15px; border-radius: 12px; background: #111b16; color: white; box-shadow: var(--shadow); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.officer-create-form { max-width: 680px; padding: 18px; }
.officer-create-form h2 { margin-bottom: 18px; }
.officer-create-form .primary-button { margin: 0; width: 100%; }
.officer-list { max-width: 680px; margin-top: 18px; display: grid; gap: 9px; }
.officer-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.officer-card .player-copy { min-width: 0; }
.officer-card .player-copy strong, .officer-card .player-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.officer-card .player-copy span { text-transform: none; }
.role-badge { margin-left: auto; padding: 6px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.officer-card.inactive { opacity: .55; }
.officer-toggle { border: 0; padding: 7px 9px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 800; }
.officer-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.players-heading { align-items: flex-end; }
.players-heading p:last-child { max-width: 610px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.player-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.groups-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #b7d8c3; padding: 0 14px; border-radius: 13px; background: linear-gradient(145deg, #f8fcf8, var(--green-soft)); color: var(--green-dark); box-shadow: 0 7px 16px rgba(45,117,82,.1); font-size: 11px; font-weight: 900; }
.groups-button span { font-size: 15px; line-height: 1; }
.groups-button:hover { border-color: var(--green); background: #e2f1e7; }
.groups-button:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(45,117,82,.12); }
.player-screen-tabs { max-width: 760px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 17px 0 12px; padding: 5px; border-radius: 15px; background: var(--surface-soft); }
.player-screen-tab { border: 0; min-width: 0; min-height: 44px; border-radius: 11px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 900; }
.player-screen-tab.active { background: var(--surface); color: var(--green-dark); box-shadow: 0 3px 10px rgba(32,57,45,.08); }
.player-stats { max-width: 760px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.players-toolbar { max-width: 760px; margin: 18px 0 13px; display: flex; align-items: center; gap: 9px; }
.buff-strength-filters { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; }
.buff-strength-filters button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 800; }
.buff-strength-filters button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.buff-strength-filters button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.buff-filter-note { max-width: 760px; margin: 8px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.buff-strength-badge { display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; font-size: 11px; font-weight: 900; white-space: nowrap; }
.buff-strength-badge.strength-5 { border-color: #efb5a0; background: #fff0e8; color: #95361b; }
.buff-strength-badge.strength-10 { border-color: #e7cb84; background: #fff6dc; color: #795009; }
.buff-strength-badge.strength-15 { border-color: #add4bb; background: #e6f5ea; color: #216344; }
.buff-strength-badge.strength-unknown { border-color: var(--line); background: var(--surface-soft); color: var(--muted); }
.player-last-buffs { min-width: 122px; }
.player-last-buffs .buff-strength-badge { display: flex; width: fit-content; margin: 4px 0; font-size: 10px; }
.player-groups-overview { max-width: 760px; margin: 0 0 13px; }
.groups-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px dashed #bfd4c5; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; }
.groups-empty span { color: var(--muted); text-align: right; }
.groups-overview-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 7px; color: var(--green-dark); font-size: 11px; }
.groups-overview-heading span { min-width: 20px; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); text-align: center; font-size: 9px; font-weight: 900; }
.group-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.group-summary-card { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.group-summary-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.group-summary-heading > div { min-width: 0; display: grid; gap: 3px; }
.group-summary-heading > div > strong { color: var(--green-dark); font-size: 11px; }
.group-summary-heading > div > span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.group-collapsed-summary { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 9px; }
.group-collapsed-summary strong { color: var(--green-dark); }
.group-summary-card.is-collapsed .group-collapsed-summary { display: flex; }
.group-category { margin: 0 0 4px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.group-summary-stats { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.group-summary-stats strong { color: var(--ink); }
.group-list { display: grid; gap: 9px; margin-top: 12px; }
.group-card { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.group-card-heading { display: flex; justify-content: space-between; gap: 10px; }
.group-card-heading > div { display: grid; gap: 3px; }
.group-card-heading strong { color: var(--green-dark); font-size: 12px; }
.group-card-heading span, .group-members-preview { color: var(--muted); font-size: 9px; }
.group-card-power { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 9px; color: var(--muted); font-size: 9px; }
.group-card-power strong { color: var(--ink); }
.group-member-power-list { display: grid; gap: 3px; margin: 10px 0 0; padding: 0; list-style: none; }
.group-member-power-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 8px; background: white; color: var(--muted); font-size: 9px; }
.group-member-identity { min-width: 0; display: flex; align-items: center; gap: 7px; }
.group-member-rank { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-variant-numeric: tabular-nums; }
.group-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-member-power-list li strong { flex: none; color: var(--green-dark); font-size: 9px; }
.group-members-empty { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.group-edit-button { min-height: 35px; margin-top: 11px; border: 1px solid #b7d8c3; padding: 8px 11px; border-radius: 10px; background: white; color: var(--green-dark); font-size: 10px; font-weight: 900; box-shadow: 0 4px 10px rgba(45,117,82,.07); }
.group-edit-button:hover { border-color: var(--green); background: var(--green-soft); }
.group-edit-button:active { transform: translateY(1px); }
.group-summary-edit-button { width: 100%; }
.group-members-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 15px 0 8px; color: var(--green-dark); font-size: 11px; }
.group-members-heading span { color: var(--muted); font-size: 9px; }
.group-member-list { max-height: 265px; overflow: auto; margin: 9px 0 14px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.group-member-option { display: grid; grid-template-columns: auto 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 6px; border-radius: 10px; font-size: 10px; }
.group-member-option:has(input:checked) { background: var(--green-soft); color: var(--green-dark); }
.group-member-option input { width: 15px; height: 15px; }
.group-member-option .player-avatar { width: 28px; height: 28px; font-size: 11px; }
.group-member-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-member-option small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.player-search { min-width: 0; flex: 1; }
.player-search input { width: 100%; border: 1px solid var(--line); padding: 11px 13px; border-radius: 12px; outline: none; background: var(--surface); color: var(--ink); }
.player-search input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.player-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.players-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px rgba(32,57,45,.04); }
.players-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 11px; }
.power-table { width: max-content; min-width: 100%; }
.buffs-table { min-width: 520px; }
.players-table th { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; line-height: 1.25; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table-sort-button { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.table-sort-button span { opacity: .55; font-size: 10px; }
.table-sort-button:hover, .table-sort-button.active { color: var(--green-dark); }
.table-sort-button.active span { opacity: 1; }
.table-settings-button { min-height: 42px; border: 1px solid #b7d8c3; padding: 8px 12px; border-radius: 12px; background: var(--surface); color: var(--green-dark); font-size: 10px; font-weight: 900; white-space: nowrap; }
.table-settings-button:hover { background: var(--green-soft); }
.birthday-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.columns-dialog .dialog-form { max-width: 520px; }
.column-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.column-option { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.column-option:has(input:checked) { border-color: #a8d4b5; background: var(--green-soft); }
.column-option input { width: 16px; height: 16px; accent-color: var(--green); }
.column-settings-actions { display: flex; gap: 9px; }
.column-settings-actions > * { flex: 1; }
.players-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.players-table tbody tr:last-child td { border-bottom: 0; }
.players-table tbody tr.needs-attention { background: #fff8ec; }
.table-player { min-width: 142px; display: flex; align-items: center; gap: 8px; }
.table-player .player-avatar { width: 31px; height: 31px; flex: none; font-size: 12px; }
.table-player strong { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.power-cell { min-width: 84px; color: var(--green-dark); font-weight: 900; white-space: nowrap; }
.power-value { line-height: 1.2; }
.power-trend { display: block; margin-top: 4px; font-size: 8px; font-weight: 900; line-height: 1.15; letter-spacing: 0; }
.power-trend.up { color: #24834f; }
.power-trend.down { color: var(--red); }
.power-trend.same { color: var(--muted); }
.alliance-role-badge { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 950; letter-spacing: .04em; }
.alliance-role-badge.r1, .alliance-role-badge.r2, .alliance-role-badge.r3 { background: #eef2ed; color: #637169; }
.alliance-role-badge.r2 { background: #e7f0e9; color: #4e715d; }
.alliance-role-badge.r3 { background: var(--green-soft); color: var(--green-dark); }
.alliance-role-badge.r4 { border-color: #a9d0b7; background: #dcefe3; color: #17633e; box-shadow: 0 3px 8px rgba(45,117,82,.09); }
.alliance-role-badge.r5 { border-color: #e5c36d; background: #fff4c9; color: #815e08; box-shadow: 0 3px 8px rgba(171,126,14,.11); }
.player-groups-cell { min-width: 185px; }
.player-group-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.player-group-tags span { max-width: 180px; overflow: hidden; padding: 5px 7px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.no-player-groups { color: var(--muted); }
.buff-table-cell { min-width: 142px; }
.buff-table-cell > strong { display: block; color: var(--green-dark); font-size: 10px; }
.buff-table-cell > small { display: block; max-width: 160px; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.buff-table-cell button { margin-top: 7px; border: 0; padding: 6px 8px; border-radius: 8px; background: var(--green); color: white; font-size: 9px; font-weight: 800; }
.buff-table-cell button:disabled { background: #d9dfda; color: var(--muted); cursor: default; }
.buff-table-cell.needs-attention > strong { color: #a55c13; }
.alliance-player-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px rgba(32,57,45,.04); }
.alliance-player-card.needs-attention { border-color: #e4a55d; background: linear-gradient(145deg, #fffdf9, var(--amber-soft)); box-shadow: 0 8px 22px rgba(217,135,41,.12); }
.alliance-player-heading { display: flex; align-items: center; gap: 10px; }
.player-copy .player-poop { display: inline; margin: 0 0 0 4px; color: inherit; font-size: 14px; line-height: 1; vertical-align: -1px; }
.player-edit-button { border: 0; padding: 7px 9px; border-radius: 9px; background: var(--surface-soft); color: var(--green-dark); font-size: 9px; font-weight: 800; }
.player-attention-badge { flex: none; padding: 5px 7px; border-radius: 999px; background: var(--amber); color: white; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.player-buffs-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.player-buff-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 13px; }
.player-buff-card.ready { border-color: #b9dac6; background: linear-gradient(145deg, #f7fbf8, var(--green-soft)); }
.player-buff-card.cooldown { background: var(--surface-soft); }
.player-buff-card.needs-attention { border-color: #e4a55d; background: #fff8ec; }
.player-buff-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.player-buff-title strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.player-buff-title span { flex: none; padding: 4px 6px; border-radius: 999px; background: white; color: var(--green); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.player-buff-card.cooldown .player-buff-title span { color: var(--muted); }
.player-buff-card.needs-attention .player-buff-title span { background: var(--amber); color: white; }
.player-buff-card p { min-height: 30px; margin: 9px 0 5px; color: var(--ink); font-size: 10px; font-weight: 800; line-height: 1.4; }
.player-buff-card small { min-height: 30px; display: block; color: var(--muted); font-size: 8px; line-height: 1.4; }
.player-buff-card button { width: 100%; margin-top: 9px; border: 0; padding: 8px; border-radius: 9px; background: var(--green); color: white; font-size: 9px; font-weight: 800; }
.player-buff-card button:disabled { background: #d9dfda; color: var(--muted); cursor: default; }
.player-buff-card.attention-suppressed { border-style: dashed; opacity: .82; }
.player-buff-actions { display: grid; gap: 6px; margin-top: 9px; }
.player-buff-card .player-buff-actions button { margin-top: 0; }
.player-buff-card .secondary-buff-action { border: 1px solid #bdd5c6; background: transparent; color: var(--green-dark); }
.player-buff-card .secondary-buff-action.warning { border-color: #e7bd89; background: #fff4e3; color: #9b5717; }
.player-buff-strength { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0 3px; }
.player-buff-strength > span:first-child { color: var(--muted); font-size: 9px; }
.player-buff-strength time { display: block; margin-top: 3px; font-size: 8px; }
.buff-recent-history { margin-top: 8px; color: var(--muted); font-size: 9px; }
.buff-recent-history summary { min-height: 32px; padding: 8px 0; cursor: pointer; color: var(--green-dark); font-weight: 800; }
.buff-recent-history summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.buff-recent-history ol { margin: 0; padding: 0; list-style: none; }
.buff-recent-history li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; padding: 6px 0; border-top: 1px solid var(--line); }
.buff-recent-history b { color: var(--ink); }
.oil-event-note { max-width: 760px; display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid #efd39b; border-radius: 15px; background: linear-gradient(135deg, #fffdf8, var(--amber-soft)); }
.oil-event-note > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: white; font-size: 18px; box-shadow: 0 3px 9px rgba(155,102,35,.08); }
.oil-event-note > div { min-width: 0; flex: 1; }
.oil-event-note strong { display: block; color: #72501e; font-size: 11px; }
.oil-event-note p { margin: 4px 0 0; color: #8a704c; font-size: 10px; line-height: 1.45; }
.oil-access-badge { flex: none; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--muted); font-size: 8px; font-weight: 800; white-space: nowrap; }
.oil-access-badge.can-manage { border-color: #b8d9c8; background: #edf7f1; color: var(--green-dark); }
.oil-help { max-width: 760px; margin-top: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); overflow: hidden; }
.oil-help summary { padding: 12px 14px; color: var(--green-dark); cursor: pointer; font-size: 11px; font-weight: 900; list-style-position: inside; }
.oil-help[open] summary { border-bottom: 1px solid var(--line); background: var(--green-soft); }
.oil-help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px; }
.oil-help-grid section { padding: 10px; border-radius: 11px; background: var(--surface-soft); }
.oil-help-grid strong { display: block; margin-bottom: 4px; color: var(--green-dark); font-size: 10px; }
.oil-help-grid p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.oil-screen-tabs { max-width: 760px; margin: 12px 0 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; padding: 5px; border-radius: 14px; background: var(--surface-soft); }
.oil-screen-tabs button { min-height: 39px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 900; cursor: pointer; }
.oil-screen-tabs button.active { background: white; color: var(--green-dark); box-shadow: 0 4px 12px rgba(31,65,48,.08); }
.oil-stats { max-width: 760px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.oil-toolbar { max-width: 760px; margin: 18px 0 13px; display: flex; align-items: center; gap: 9px; }
.oil-list { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.oil-list > .empty-card { grid-column: 1 / -1; }
.oil-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px rgba(32,57,45,.04); }
.oil-card.has-pass { border-color: #e5c67f; background: linear-gradient(145deg, #fffdf8, #fff6e3); box-shadow: 0 8px 22px rgba(177,119,37,.1); }
.oil-card-heading { display: flex; align-items: center; gap: 10px; }
.oil-card-heading .player-copy strong { font-size: 12px; }
.oil-card-heading .player-copy span { font-size: 9px; }
.oil-player-power { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.oil-player-power b { color: var(--green-dark); font-weight: 900; }
.oil-pass-badge { flex: none; padding: 5px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .04em; }
.oil-card.has-pass .oil-pass-badge { background: #f3d894; color: #6f4c17; }
.oil-balance { display: flex; align-items: baseline; gap: 8px; margin: 17px 0 11px; }
.oil-balance strong { color: var(--green-dark); font-size: 35px; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.oil-balance span { color: var(--muted); font-size: 10px; font-weight: 700; }
.oil-card-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.oil-card-meta span { min-width: 0; padding: 8px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 8px; line-height: 1.35; }
.oil-card.has-pass .oil-card-meta span { background: rgba(255,255,255,.72); }
.oil-card-meta b { display: block; margin-top: 2px; overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.oil-last-event { min-height: 28px; margin: 10px 1px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.oil-card-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; }
.oil-card-actions button { min-height: 36px; border: 0; padding: 8px; border-radius: 10px; font-size: 9px; font-weight: 900; }
.oil-pass-button { background: var(--surface-soft); color: var(--green-dark); }
.oil-pass-button.active { background: #f3d894; color: #6f4c17; }
.oil-use-button { background: var(--green); color: white; box-shadow: 0 4px 10px rgba(45,117,82,.16); }
.oil-use-button:disabled { background: #d9dfda; color: var(--muted); box-shadow: none; cursor: default; }
.oil-readonly { min-height: 36px; display: grid; place-items: center; padding: 8px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); text-align: center; font-size: 8px; font-weight: 800; }
.oil-dialog-balance { display: flex; align-items: baseline; gap: 7px; margin-bottom: 16px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--green-soft), #edf6f0); }
.oil-dialog-balance span { margin-right: auto; color: var(--muted); font-size: 10px; font-weight: 700; }
.oil-dialog-balance strong { color: var(--green-dark); font-size: 30px; line-height: 1; }
.oil-dialog-balance small { color: var(--green-dark); font-size: 9px; font-weight: 800; }
.oil-adjustment { margin-top: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.oil-adjustment > strong { color: var(--green-dark); font-size: 11px; }
.oil-adjustment > p { margin: 4px 0 9px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.oil-adjustment-row { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 7px; }
.oil-adjustment-row input { width: 100%; min-width: 0; border: 1px solid var(--line); padding: 10px; border-radius: 10px; outline: none; background: white; }
.oil-adjustment-row input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.oil-adjustment-row button { border: 1px solid #b7d8c3; padding: 9px; border-radius: 10px; background: white; color: var(--green-dark); font-size: 9px; font-weight: 900; }
.oil-adjustment-row button:disabled { opacity: .55; cursor: wait; }
.oil-opponents-heading { max-width: 760px; margin: 0 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oil-opponents-heading > div { min-width: 0; }
.oil-opponents-heading strong { display: block; color: var(--ink); font-size: 13px; }
.oil-opponents-heading span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.oil-opponents-heading .primary-button { flex: none; min-height: 38px; padding: 9px 12px; font-size: 9px; }
.oil-opponent-days { max-width: 760px; margin-top: 14px; display: grid; gap: 13px; }
.oil-opponent-day { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px rgba(32,57,45,.04); }
.oil-opponent-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.oil-opponent-day-heading > div { display: flex; align-items: center; gap: 7px; }
.oil-opponent-day-heading strong { color: var(--green-dark); font-size: 11px; text-transform: capitalize; }
.oil-opponent-day-heading span { padding: 3px 6px; border-radius: 999px; background: var(--green); color: white; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.oil-opponent-day-heading > b { color: var(--ink); font-size: 10px; }
.oil-opponent-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 10px; }
.oil-opponent-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.oil-opponent-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oil-opponent-card-heading > div:first-child { min-width: 0; }
.oil-opponent-card-heading > div:first-child > strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.oil-alliance-badge { display: inline-flex; max-width: 100%; margin-top: 5px; padding: 4px 7px; overflow: hidden; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.oil-opponent-spent { flex: none; text-align: right; }
.oil-opponent-spent strong { display: block; color: var(--green-dark); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.oil-opponent-spent span { color: var(--muted); font-size: 8px; }
.oil-opponent-meta { margin-top: 11px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 6px; }
.oil-opponent-meta span { min-width: 0; padding: 7px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 7px; line-height: 1.35; }
.oil-opponent-meta b { display: block; margin-top: 2px; overflow: hidden; color: var(--ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.oil-opponent-edit { width: 100%; min-height: 32px; margin-top: 8px; border: 1px solid #b7d8c3; border-radius: 9px; background: white; color: var(--green-dark); font-size: 8px; font-weight: 900; }
.oil-round-toolbar { max-width: 760px; margin-bottom: 13px; display: flex; align-items: end; gap: 9px; }
.oil-round-toolbar .compact-field { min-width: 0; flex: 1; }
.oil-round-toolbar .field { margin: 0; }
.oil-round-toolbar select { width: 100%; border: 1px solid var(--line); padding: 10px 32px 10px 11px; border-radius: 11px; background: white; color: var(--ink); font-size: 10px; font-weight: 800; }
.oil-round-toolbar .primary-button { flex: none; min-height: 39px; padding: 9px 12px; font-size: 9px; }
.secondary-button.compact { border: 1px solid #b7d8c3; padding: 9px 12px; border-radius: 11px; background: white; color: var(--green-dark); font-size: 9px; font-weight: 900; }
.oil-alliance-list { max-width: 760px; margin-top: 14px; display: grid; gap: 12px; }
.oil-alliance-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 20px rgba(32,57,45,.04); }
.oil-alliance-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px 10px; }
.oil-alliance-heading > div:first-child span { display: block; color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.oil-alliance-heading > div:first-child strong { display: block; margin-top: 3px; color: var(--ink); font-size: 18px; }
.oil-alliance-heading-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.oil-alliance-heading-actions > div { text-align: right; }
.oil-alliance-heading-actions > div strong { display: block; color: var(--green-dark); font-size: 20px; line-height: 1; }
.oil-alliance-heading-actions > div span { color: var(--muted); font-size: 7px; }
.collapse-toggle { --collapse-border: #b7d8c3; --collapse-bg: var(--surface-soft); --collapse-color: var(--green-dark); width: 31px; height: 31px; flex: none; display: grid; place-items: center; appearance: none; padding: 0; border: 1px solid var(--collapse-border); border-radius: 10px; outline: none; background: var(--collapse-bg); box-shadow: none; color: var(--collapse-color); cursor: pointer; }
.collapse-toggle span { display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.collapse-toggle[aria-expanded="true"] span { transform: translateY(2px) rotate(225deg); }
.collapse-toggle:hover, .collapse-toggle:active { border-color: var(--collapse-border); background: var(--collapse-bg); box-shadow: none; color: var(--collapse-color); transform: none; }
.collapse-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
body.fire-theme .collapse-toggle { --collapse-border: rgba(255,139,75,.28); --collapse-bg: #58170f; --collapse-color: #ffc37a; }
body.fire-theme .collapse-toggle:focus-visible { outline-color: #ffc37a; }
.oil-alliance-card.is-collapsed .oil-alliance-meta { padding-bottom: 13px; }
.oil-rival-player-list[hidden], .group-summary-body[hidden] { display: none !important; }
.oil-alliance-meta { display: flex; align-items: center; gap: 6px; padding: 0 15px 11px; color: var(--muted); font-size: 8px; }
.oil-alliance-meta > span { margin-right: auto; }
.oil-alliance-meta button { border: 1px solid #b7d8c3; padding: 6px 8px; border-radius: 8px; background: white; color: var(--green-dark); font-size: 8px; font-weight: 900; }
.oil-alliance-meta .danger-link { border-color: #efc7c2; color: var(--red); }
.oil-rival-player-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.oil-rival-player { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.oil-rival-player-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oil-rival-player-heading > div:first-child { min-width: 0; }
.oil-rival-player-heading > div:first-child strong { display: block; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.oil-rival-player-heading > div:first-child span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.oil-rival-usage { min-height: 40px; margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.oil-rival-usage button { min-width: 58px; border: 0; padding: 5px 7px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); text-align: left; }
.oil-rival-usage button:disabled { cursor: default; }
.oil-rival-usage button span { display: block; font-size: 6px; }
.oil-rival-usage button strong { display: block; margin-top: 1px; font-size: 10px; }
.oil-no-usage { color: var(--muted); font-size: 8px; align-self: center; }
.oil-rival-player-actions { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.oil-rival-player-actions button { border: 1px solid #b7d8c3; padding: 6px 8px; border-radius: 8px; background: white; color: var(--green-dark); font-size: 8px; font-weight: 900; }
.oil-alliance-empty { grid-column: 1/-1; padding: 16px; color: var(--muted); text-align: center; font-size: 9px; }
.pending-badge { display: inline-flex; margin-top: 7px; padding: 4px 7px; border-radius: 8px; background: var(--amber-soft); color: #895111; font-size: 9px; font-weight: 800; }
.candidate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.edit-button { margin-top: 7px; border: 0; padding: 7px 9px; border-radius: 9px; background: var(--surface-soft); color: var(--green-dark); font-size: 10px; font-weight: 800; }
.reject-button { margin-top: 7px; border: 0; padding: 7px 9px; border-radius: 9px; background: var(--red-soft); color: var(--red); font-size: 10px; font-weight: 800; }

@media (min-width: 760px) {
  .view { padding: 38px 28px 60px; }
  .stats-grid { max-width: 550px; }
  .active-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .candidate-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .public-queue-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .player-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .history-list, .settings-card { max-width: 680px; }
  .sheet-dialog { margin: auto; }
  #playersView .player-list.power-player-list { display: block; }
}

@media (max-width: 560px) {
  body.fire-theme .fire-ember:nth-child(3n) { display: none; }
  body.fire-theme .fire-smoke { filter: blur(34px); }
  body.fire-theme .fire-video { inset: -2% -36%; width: 172%; height: 104%; }
  .fire-credit { left: 7px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .duck-floater:nth-child(even) { display: none; }
  .duck-floater { opacity: .11; }
  .duck-animated-sticker { width: min(var(--size), 112px); opacity: .18; }
  .duck-animated-sticker:nth-child(n+4) { display: none; }
  .duck-light:nth-child(3n) { display: none; }
  .topbar { height: 68px; gap: 7px; padding-inline: 12px; }
  .topbar-rules-link { padding: 8px; font-size: 15px; line-height: 1; }
  .topbar-rules-link span { display: none; }
  .fire-theme-toggle, .duck-theme-toggle, .fire-sound-toggle { width: 33px; height: 33px; font-size: 15px; }
  .duck-theme-toggle img { width: 25px; height: 25px; }
  .help-grid { grid-template-columns: 1fr; }
  .brand-mark { width: 37px; height: 37px; border-radius: 11px; }
  .brand-mark svg { width: 23px; }
  .view { padding-inline: 16px; }
  .last-queue-update { width: 100%; justify-content: flex-start; }
  .active-grid { grid-template-columns: 1fr; }
  .active-card { min-height: 190px; }
  .type-switch { width: 100%; }
  .type-tab { flex: 1; justify-content: center; padding-inline: 8px; }
  .stats-grid { gap: 7px; }
  .stat-card { padding: 12px 10px; }
  .stat-card strong { font-size: 20px; }
  .setting-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .setting-row > input, .setting-row .days-input { align-self: flex-end; }
  .candidate-card { padding: 12px; }
  .candidate-meta { gap: 6px 10px; }
  .candidate-meta span:nth-child(2) { display: none; }
  .candidate-actions button { padding-inline: 8px; white-space: nowrap; font-size: 9px; }
  .public-view { padding-top: 26px; }
  .public-layout { display: block; min-height: 0; }
  .public-intro h1 { font-size: 43px; }
  .public-lead { margin: 13px 0 17px; font-size: 14px; }
  .public-rules { margin-bottom: 22px; }
  .public-rules-link { margin-top: -9px; margin-bottom: 22px; }
  .public-form { padding: 17px; border-radius: 20px; }
  .public-queue-section { margin-top: 32px; padding: 17px; border-radius: 20px; }
  .public-queue-heading { align-items: flex-start; }
  .public-live-badge { display: none; }
  .public-queue-tabs { width: 100%; }
  .public-queue-tab { flex: 1; }
  .public-queue-card { grid-template-columns: auto auto minmax(0,1fr) auto; gap: 9px; }
  .public-queue-position { grid-row: 1 / 3; }
  .public-buffs { grid-column: 3 / 5; display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; padding: 6px 8px; }
  .public-buffs strong { font-size: 13px; }
  .public-buffs span { margin: 0; }
  .auth-button { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .players-heading { align-items: flex-start; }
  .players-heading .primary-button { flex: none; }
  .player-header-actions { justify-content: flex-start; }
  .players-toolbar { align-items: stretch; }
  .players-toolbar .sort-control select { height: 100%; max-width: 132px; }
  .player-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .oil-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .oil-toolbar { align-items: stretch; }
  .oil-toolbar .sort-control select { height: 100%; max-width: 132px; }
  .oil-list { grid-template-columns: 1fr; }
  .oil-event-note { flex-wrap: wrap; }
  .oil-access-badge { margin-left: 45px; }
  .oil-help-grid { grid-template-columns: 1fr; }
  .oil-opponents-heading { align-items: flex-start; flex-direction: column; }
  .oil-opponents-heading .primary-button { width: 100%; }
  .oil-opponent-list { grid-template-columns: 1fr; }
  .oil-round-toolbar { align-items: stretch; flex-direction: column; }
  .oil-round-toolbar .primary-button { width: 100%; }
  .oil-rival-player-list { grid-template-columns: 1fr; }
  .group-summary-list { grid-template-columns: 1fr; }
  .player-list { grid-template-columns: 1fr; }
  .players-table-wrap { margin-inline: -1px; border-radius: 15px; }
  .players-table { min-width: 720px; }
  .power-table { min-width: 720px; }
  .table-settings-button { width: 43px; padding: 0; font-size: 0; }
  .table-settings-button span:first-child { font-size: 16px; }
  .column-options { grid-template-columns: 1fr; }
  .buffs-table { min-width: 500px; }
  .player-buffs-grid { grid-template-columns: 1fr 1fr; }
  .rules-main { padding: 24px 16px 34px; }
  .rules-topbar-inner { min-height: 63px; padding-inline: 16px; }
  .rules-hero { border-radius: 21px; }
  .rules-section { border-radius: 18px; }
  .rules-list li { padding: 12px 12px 12px 37px; font-size: 12px; }
  .content-manager-bar { align-items: flex-start; flex-direction: column; }
  .content-manager-bar > div:last-child { width: 100%; }
  .content-manager-bar button { flex: 1; }
  .content-comment-form .secondary-button { width: 100%; justify-self: stretch; }
  .reaction-picker { width: min(244px, calc(100vw - 64px)); }
  .reaction-picker-grid { grid-template-columns: repeat(5, 1fr); }
  .reaction-choice { width: 40px; height: 38px; }
  .nav-item { padding-inline: 1px; font-size: 7.5px; }
}

@media (max-width: 390px) {
  .brand-copy { display: none; }
  .topbar-knowledge-menu { margin-left: auto; }
  .avatar-button { min-width: 33px; height: 33px; padding-inline: 8px; }
  .help-button { width: 33px; height: 33px; }
}

@media (max-width: 370px) {
  .view { padding-inline: 12px; }
  .candidate-card { column-gap: 8px; }
  .candidate-actions { gap: 4px; }
  .candidate-actions button { padding-inline: 7px; font-size: 9px; }
  .candidate-meta { font-size: 9px; }
  .player-buffs-grid { grid-template-columns: 1fr; }
}