/*
    RS3 Bingo UI Theme
    Theme direction: clan minigame noticeboard + ancient tome.
    No external assets required.
*/
:root {
    --void: #090604;
    --stone-0: #15100b;
    --stone-1: #241811;
    --stone-2: #392516;
    --wood-0: #1b1009;
    --wood-1: #2c1a0d;
    --wood-2: #4b2c12;
    --wood-3: #6f4219;
    --gold-0: #6b4212;
    --gold-1: #a06a20;
    --gold-2: #d19a3a;
    --gold-3: #f1cf77;
    --parchment-0: #6b4b23;
    --parchment-1: #c9a46a;
    --parchment-2: #e4c891;
    --parchment-3: #f1deb4;
    --parchment-4: #fff0c8;
    --ink: #2a170a;
    --ink-soft: #604321;
    --red: #9b3929;
    --green: #4f7a43;
    --blue: #416b8e;
    --shadow: rgba(0,0,0,.48);
    --soft-shadow: rgba(59,36,14,.22);
    --border-dark: #4b2b12;
    --border-mid: #93612a;
    --border-light: #d5a24d;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    color: var(--parchment-4);
    background:
        radial-gradient(circle at 20% -10%, rgba(191,132,39,.22), transparent 30%),
        radial-gradient(circle at 80% 110%, rgba(91,48,13,.34), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 42px 42px,
        linear-gradient(225deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0 / 42px 42px,
        linear-gradient(180deg, #2a1b11 0%, #15100b 48%, #090604 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .26;
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(0,0,0,.18) 31px 33px),
        repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.035) 47px 49px);
    mix-blend-mode: overlay;
}
a { color: #7b470e; text-decoration: none; font-weight: 700; }
a:hover { color: #4b2808; text-decoration: underline; }
img { image-rendering: auto; }

.shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 28px;
    min-height: 100vh;
    padding: 22px;
}

/* Left navigation: carved clan noticeboard */
.sidebar {
    position: sticky;
    top: 22px;
    align-self: start;
    min-height: calc(100vh - 44px);
    padding: 22px 18px;
    border: 3px ridge #8e5b24;
    border-radius: 18px 10px 18px 10px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.04), transparent 14%, rgba(0,0,0,.18) 47%, transparent 84%, rgba(255,255,255,.025)),
        repeating-linear-gradient(90deg, rgba(116,70,27,.22) 0 12px, rgba(42,24,10,.18) 12px 24px),
        linear-gradient(180deg, #4a2a12, #211109 62%, #130b06);
    box-shadow:
        0 24px 46px rgba(0,0,0,.52),
        inset 0 0 0 1px rgba(255,219,134,.18),
        inset 0 0 28px rgba(0,0,0,.32);
}
.sidebar::before,
.sidebar::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(241,207,119,.55), transparent);
    opacity: .5;
}
.sidebar::before { top: 12px; }
.sidebar::after { bottom: 12px; }

.brand {
    position: relative;
    margin: 10px 0 8px;
    padding: 16px 12px 14px;
    border: 2px ridge #aa792e;
    border-radius: 14px 14px 10px 10px;
    background:
        radial-gradient(circle at top, rgba(241,207,119,.22), transparent 60%),
        linear-gradient(180deg, #2f1c0b, #160b05);
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.72rem;
    line-height: 1.08;
    font-weight: 900;
    text-align: center;
    color: var(--gold-3);
    letter-spacing: .045em;
    text-shadow:
        0 2px 0 #000,
        0 0 10px rgba(241,207,119,.16);
}
.brand::before,
.brand::after {
    content: "◆";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #c99034;
    font-size: .75rem;
}
.brand::before { left: 10px; }
.brand::after { right: 10px; }
.subtle {
    color: #dfbf7e;
    font-size: .86rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.nav {
    margin-top: 24px;
    display: grid;
    gap: 15px;
}
.nav-section {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 12px 10px 10px;
    border: 1px solid rgba(213,162,77,.25);
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.025)),
        rgba(22, 12, 5, .26);
    box-shadow: inset 0 1px 12px rgba(0,0,0,.18);
}
.nav-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 4px;
    color: var(--gold-3);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 900;
    text-shadow: 0 1px 0 #000;
}
.nav-section-title::before,
.nav-section-title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(241,207,119,.45), transparent);
}
.nav a {
    display: block;
    position: relative;
    padding: 10px 12px 10px 28px;
    border: 1px solid rgba(130, 82, 28, .38);
    border-radius: 9px 13px 9px 13px;
    color: #f9e6b7;
    background:
        linear-gradient(180deg, rgba(138,83,30,.25), rgba(34,17,6,.3)),
        rgba(255,255,255,.018);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    font-weight: 800;
    transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.nav a::before {
    content: "›";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #d6a342;
    font-size: 1.1rem;
    line-height: 1;
}
.nav a.active,
.nav a:hover {
    color: #fff5d6;
    background:
        radial-gradient(circle at left, rgba(241,207,119,.28), transparent 55%),
        linear-gradient(180deg, rgba(146,91,34,.5), rgba(49,25,8,.38));
    border-color: rgba(241,207,119,.62);
    text-decoration: none;
    transform: translateX(3px);
}
.nav a.nav-return {
    color: #fff1c7;
    border-color: rgba(241,207,119,.58);
    background:
        linear-gradient(180deg, rgba(178,116,30,.52), rgba(90,48,12,.48));
}
.sidebar .card {
    margin-top: 22px !important;
    padding: 13px !important;
    border-radius: 13px !important;
    color: #f7e5b8;
    background:
        linear-gradient(180deg, rgba(45,25,9,.96), rgba(18,9,4,.96)) !important;
    border: 1px solid rgba(213,162,77,.35) !important;
    box-shadow: inset 0 0 18px rgba(0,0,0,.34) !important;
}
.sidebar .card::before { display: none; }
.sidebar .card .subtle,
.sidebar .card .muted,
.sidebar .card small { color: #d6bb82; }

/* Main page: torn tome page over stone */
.main {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin-right: 4px;
    padding: 42px 34px 44px;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 10%, rgba(255,250,219,.78), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(145,89,31,.13), transparent 33%),
        repeating-linear-gradient(0deg, rgba(92,54,17,.035) 0 2px, transparent 2px 19px),
        linear-gradient(180deg, #fff0c8, #e8c98f 55%, #d7b475);
    border: 3px solid #8f642b;
    border-radius: 14px 24px 18px 28px;
    box-shadow:
        0 28px 60px rgba(0,0,0,.48),
        inset 0 0 0 2px rgba(255,245,202,.34),
        inset 0 0 52px rgba(97,56,17,.18);
    clip-path: polygon(
        0 1.2%, 2.2% 0, 6.2% .7%, 9.8% 0, 15% .8%, 19% 0,
        24% .7%, 29% 0, 34% .8%, 40% 0, 45% .7%, 50% 0,
        55% .7%, 61% 0, 67% .8%, 73% 0, 78% .7%, 84% 0,
        90% .8%, 96% 0, 100% 1.1%,
        99.3% 9%, 100% 16%, 99.1% 23%, 100% 31%, 99.2% 39%,
        100% 47%, 99.4% 56%, 100% 63%, 99.2% 72%, 100% 81%,
        99.3% 91%, 100% 99%,
        96% 100%, 91% 99.3%, 86% 100%, 80% 99.2%, 74% 100%,
        68% 99.3%, 63% 100%, 56% 99.2%, 50% 100%, 43% 99.3%,
        37% 100%, 31% 99.2%, 25% 100%, 18% 99.3%, 12% 100%,
        6% 99.1%, 0 100%,
        .7% 91%, 0 83%, .8% 75%, 0 66%, .9% 58%, 0 49%,
        .8% 41%, 0 32%, .9% 24%, 0 16%, .8% 8%
    );
}
.main::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(90, 56, 20, .19);
    border-radius: 16px 22px 14px 24px;
    pointer-events: none;
    z-index: -1;
}
.main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 8% 20%, rgba(83,45,12,.08), transparent 14%),
        radial-gradient(circle at 88% 14%, rgba(83,45,12,.07), transparent 12%),
        radial-gradient(circle at 70% 92%, rgba(83,45,12,.08), transparent 16%);
    mix-blend-mode: multiply;
}

/* Quest title banner */
.topbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
    padding: 18px 22px 18px 26px;
    color: #f7e6bd;
    background:
        linear-gradient(90deg, rgba(0,0,0,.2), transparent 18%, transparent 82%, rgba(0,0,0,.16)),
        linear-gradient(180deg, #6b3e16, #3a210c);
    border: 2px ridge #b47a2b;
    border-radius: 10px 22px 10px 22px;
    box-shadow: 0 12px 24px rgba(66,39,14,.2), inset 0 0 0 1px rgba(255,221,145,.15);
}
.topbar::before,
.topbar::after {
    content: "✦";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #e7bf62;
    opacity: .78;
}
.topbar::before { left: 9px; }
.topbar::after { right: 9px; }
.topbar.compact {
    margin-bottom: 14px;
    padding: 13px 18px;
}
.topbar .muted,
.topbar .subtle {
    color: #e6c98f;
}
h1, h2, h3 {
    font-family: Georgia, "Palatino Linotype", serif;
    color: #321b08;
}
.topbar h1,
.topbar h2 {
    color: #ffe7a9;
    text-shadow: 0 2px 0 #1c0d04;
}
h1 {
    margin: 0 0 6px;
    font-size: clamp(1.9rem, 2.6vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: .035em;
}
h2 {
    position: relative;
    margin: 0 0 14px;
    font-size: 1.42rem;
    line-height: 1.15;
}
.card > h2:first-child::after,
.card .topbar.compact h2::after {
    content: "";
    display: block;
    width: min(260px, 100%);
    height: 8px;
    margin-top: 8px;
    background: linear-gradient(90deg, rgba(100,58,16,.55), rgba(100,58,16,.18), transparent);
    clip-path: polygon(0 40%, 94% 40%, 100% 50%, 94% 60%, 0 60%);
}
h3 { margin: 0 0 10px; font-size: 1.08rem; }

/* Cards are pinned parchment scraps rather than dashboard panels */
.card {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(255,255,229,.55), transparent 27%),
        radial-gradient(circle at 95% 100%, rgba(113,67,21,.09), transparent 25%),
        repeating-linear-gradient(0deg, rgba(95,58,21,.035) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, #fff1c9, #e9cf97);
    border: 2px solid #9e7135;
    border-radius: 9px 18px 12px 20px;
    box-shadow:
        0 12px 24px var(--soft-shadow),
        inset 0 0 0 1px rgba(255,248,218,.34),
        inset 0 0 34px rgba(90,52,16,.1);
    clip-path: polygon(
        0 2%, 4% 0, 10% 1.2%, 16% 0, 25% 1.1%, 33% 0,
        42% 1.1%, 51% 0, 60% 1.2%, 70% 0, 80% 1.1%, 89% 0, 100% 2%,
        99% 15%, 100% 26%, 99% 39%, 100% 50%, 99% 63%, 100% 76%, 99% 89%, 100% 98%,
        93% 100%, 84% 99%, 74% 100%, 64% 99%, 53% 100%, 43% 99%, 32% 100%, 22% 99%, 12% 100%, 0 98%,
        1% 84%, 0 70%, 1% 58%, 0 45%, 1% 32%, 0 18%
    );
}
.card::before,
.card::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #ffe4a3, #b17424 48%, #53300d 100%);
    box-shadow: 0 1px 1px rgba(0,0,0,.35);
    pointer-events: none;
}
.card::before { left: 12px; }
.card::after { right: 12px; }

/* Grid and stats */
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 2.35rem;
    font-weight: 900;
    color: #8a540f;
    text-shadow: 0 1px 0 rgba(255,246,215,.8);
}
.stat-card-link {
    display: block;
}
.stat-card-link:hover {
    text-decoration: none;
    filter: brightness(.98);
}

/* Tables become parchment ledgers */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.table th,
.table td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(103, 63, 22, .2);
    vertical-align: top;
    color: var(--ink);
}
.table th {
    color: #573719;
    text-align: left;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    background: rgba(124,76,24,.08);
}
.table tr:nth-child(even) td { background: rgba(112,70,25,.035); }
.table tr:last-child td,
.table tr:last-child th { border-bottom: 0; }

/* Status badges become wax seals / tags */
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .78rem;
    border: 1px solid rgba(105,63,18,.36);
    color: #533515;
    background:
        linear-gradient(180deg, rgba(255,245,212,.68), rgba(214,180,117,.36));
    font-weight: 900;
}
.badge.good,
.badge.status-active {
    color: #244b23;
    border-color: rgba(55,114,48,.5);
    background: linear-gradient(180deg, rgba(216,239,202,.75), rgba(110,157,94,.24));
}
.badge.bad {
    color: #77251b;
    border-color: rgba(155,57,41,.45);
    background: linear-gradient(180deg, rgba(250,218,209,.78), rgba(182,76,58,.22));
}
.badge.status-draft {
    color: #735016;
    border-color: rgba(159,105,26,.5);
    background: linear-gradient(180deg, rgba(250,235,188,.8), rgba(190,136,48,.18));
}
.badge.status-published {
    color: #68430d;
    border-color: rgba(191,139,51,.54);
    background: linear-gradient(180deg, rgba(255,240,186,.85), rgba(207,151,49,.22));
}
.badge.status-completed {
    color: #244967;
    border-color: rgba(65,107,142,.48);
    background: linear-gradient(180deg, rgba(218,235,248,.82), rgba(98,141,174,.22));
}
.badge.status-archived {
    color: #5a4a38;
    border-color: rgba(106,91,71,.48);
    background: linear-gradient(180deg, rgba(232,222,205,.82), rgba(130,114,91,.18));
}

/* Buttons: carved game UI controls */
.actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 8px 12px 8px 12px;
    border: 2px ridge #b98536;
    background:
        linear-gradient(180deg, #c58a2f 0%, #855014 52%, #5f340d 100%);
    color: #fff1c7;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,236,166,.24),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 4px 0 rgba(75,43,14,.38);
    text-shadow: 0 1px 0 #2f1605;
}
.btn.secondary, button.secondary {
    background:
        linear-gradient(180deg, #f5dfad 0%, #ceaa68 54%, #a17031 100%);
    border-color: #9b6b2d;
    color: #321b08;
    text-shadow: 0 1px 0 rgba(255,246,211,.65);
}
.btn.danger, button.danger {
    background:
        linear-gradient(180deg, #b95440 0%, #8a3025 54%, #611d17 100%);
    border-color: #a04435;
    color: #fff0e7;
}
.btn:hover, button:hover {
    text-decoration: none;
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.btn:active, button:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 6px rgba(0,0,0,.28);
}

/* Forms */
input, select, textarea {
    width: 100%;
    border-radius: 9px;
    border: 2px inset #ad8043;
    background:
        linear-gradient(180deg, rgba(255,246,222,.96), rgba(231,204,151,.96));
    color: var(--ink);
    padding: 10px 11px;
    min-height: 42px;
    box-shadow: inset 0 2px 4px rgba(92,55,16,.14);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(191,139,51,.23);
    border-color: #86591d;
}
textarea { min-height: 110px; resize: vertical; }
label {
    display: block;
    color: #563513;
    font-size: .88rem;
    margin-bottom: 6px;
    font-weight: 900;
}
.form-row { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.check-list {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}
.check-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}
.check-list input[type="checkbox"],
.check-list input[type="radio"] {
    width: auto;
    min-height: 0;
}

/* Alerts */
.flash {
    position: relative;
    border-radius: 10px 16px 10px 16px;
    padding: 13px 16px 13px 36px;
    margin-bottom: 16px;
    border: 2px solid #9c7134;
    background:
        linear-gradient(180deg, #fff0c8, #dfbf82);
    color: var(--ink);
    box-shadow: 0 8px 18px var(--soft-shadow);
    font-weight: 800;
}
.flash::before {
    content: "!";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #8a540f;
    color: #fff1c7;
    font-size: .75rem;
}
.flash.success {
    border-color: rgba(72,119,60,.76);
    background: linear-gradient(180deg, #e3f0cc, #b9d49e);
}
.flash.error {
    border-color: rgba(155,57,41,.76);
    background: linear-gradient(180deg, #f6d4c8, #dda08f);
}

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-card {
    width: min(600px, 100%);
    clip-path: none;
}
.muted, small { color: var(--ink-soft); }
.topbar .muted { color: #dfc086; }
pre {
    margin: 0 0 14px;
    padding: 14px;
    overflow: auto;
    border-radius: 10px;
    border: 2px inset #8b6129;
    background: #2b180a;
    color: #f5dfad;
}
code { color: #7f490d; }

/* Search pickers */
.item-picker,
.rsn-picker,
.discord-picker { position: relative; }
.item-picker-results,
.rsn-picker-results,
.discord-picker-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 2px solid #8d622b;
    border-radius: 10px;
    background:
        linear-gradient(180deg, #fff0c8, #e6c88f);
    box-shadow: 0 18px 38px var(--shadow);
}
.item-picker-option,
.rsn-picker-option,
.discord-picker-option {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(103,63,22,.22);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-weight: 800;
    box-shadow: none;
}
.item-picker-option:hover,
.item-picker-option:focus,
.rsn-picker-option:hover,
.rsn-picker-option:focus,
.discord-picker-option:hover,
.discord-picker-option:focus {
    background: rgba(128,78,23,.16);
    filter: none;
    outline: none;
    transform: none;
}
.item-picker-option img,
.item-picker-icon-placeholder,
.rsn-picker-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #d4b476;
    border: 1px solid rgba(83,49,16,.38);
}
.item-picker-option strong,
.rsn-picker-option strong,
.discord-picker-option strong { display: block; color: var(--ink); }
.item-picker-option small,
.rsn-picker-option small,
.discord-picker-option small { display: block; margin-top: 2px; }
.item-picker-empty,
.rsn-picker-empty,
.discord-picker-empty {
    padding: 12px;
    color: var(--ink-soft);
}

.discord-picker-option {
    grid-template-columns: 1fr;
}
.discord-picker input[data-discord-picker-search] {
    padding-right: 96px;
}
.discord-picker::after {
    content: "Search";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Game board: parchment tiles with item slots */
.game-builder-layout { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); }
.bingo-board {
    display: grid;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border: 2px ridge #9b6b2d;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(67,38,12,.12), rgba(255,255,255,.04));
}
.bingo-cell {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 11px;
    border-radius: 8px 12px 8px 12px;
    border: 2px solid rgba(112,70,25,.42);
    background:
        radial-gradient(circle at top, rgba(255,250,219,.48), transparent 65%),
        linear-gradient(180deg, #f4dfab, #d8b878);
    color: var(--ink);
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(91,53,15,.08), 0 4px 10px rgba(68,40,12,.14);
}
.bingo-cell:hover,
.bingo-cell.selected {
    text-decoration: none;
    border-color: #b47a2b;
    background:
        radial-gradient(circle at top, rgba(255,244,190,.62), transparent 65%),
        linear-gradient(180deg, #ffe7ad, #e0bd77);
}
.bingo-cell.configured {
    background:
        radial-gradient(circle at top, rgba(255,244,190,.54), transparent 65%),
        linear-gradient(180deg, #ecd199, #cda461);
}
.bingo-cell img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(83,49,16,.32);
    background: rgba(255,246,222,.82);
}

/* Player board state colours */
.bingo-board.public .bingo-cell {
    position: relative;
    min-height: 132px;
}
.bingo-board.public .bingo-cell.completed {
    border-color: rgba(74, 126, 66, .9);
    background:
        radial-gradient(circle at top, rgba(234,255,207,.62), transparent 62%),
        linear-gradient(180deg, #d8efb8, #8fbd72);
    box-shadow:
        inset 0 0 20px rgba(43,91,36,.15),
        0 5px 12px rgba(49,88,39,.18);
}
.bingo-board.public .bingo-cell.completed::after {
    content: "✓ Complete";
    position: absolute;
    right: 8px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(48, 98, 39, .45);
    background: rgba(238, 255, 222, .78);
    color: #254b20;
    font-size: .72rem;
    font-weight: 900;
}
.bingo-board.public .bingo-cell.pending {
    border-color: rgba(184, 125, 32, .92);
    background:
        radial-gradient(circle at top, rgba(255,241,178,.68), transparent 62%),
        linear-gradient(180deg, #f4d98f, #c9953d);
    box-shadow:
        inset 0 0 20px rgba(141,92,20,.13),
        0 5px 12px rgba(112,73,19,.16);
}
.bingo-board.public .bingo-cell.pending::after {
    content: "⏳ Review";
    position: absolute;
    right: 8px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(141, 92, 20, .45);
    background: rgba(255, 246, 210, .78);
    color: #6b410d;
    font-size: .72rem;
    font-weight: 900;
}
.bingo-board.public .bingo-cell.incomplete {
    border-color: rgba(145, 58, 43, .82);
    background:
        radial-gradient(circle at top, rgba(255,226,216,.5), transparent 62%),
        linear-gradient(180deg, #eac5a6, #bf765e);
    box-shadow:
        inset 0 0 20px rgba(120,43,31,.12),
        0 5px 12px rgba(100,42,28,.14);
}
.bingo-board.public .bingo-cell.incomplete::after {
    content: "Incomplete";
    position: absolute;
    right: 8px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(145, 58, 43, .42);
    background: rgba(255, 237, 231, .74);
    color: #73261c;
    font-size: .72rem;
    font-weight: 900;
}
.bingo-board.public .bingo-cell.empty {
    opacity: .68;
    filter: grayscale(.2);
}
.bingo-board.public .bingo-cell.line-claimed {
    outline: 3px solid rgba(241, 207, 119, .8);
    outline-offset: -5px;
}
.cell-pos {
    display: inline-block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(57, 32, 11, .72);
}
.completion-text {
    padding-right: 74px;
}
.btn.tiny {
    min-height: 30px;
    padding: 5px 8px;
    font-size: .78rem;
    border-width: 1px;
    box-shadow: inset 0 1px 0 rgba(255,236,166,.18), 0 2px 0 rgba(75,43,14,.28);
}

/* Submission review screenshots should display uncropped */
.submission-review-layout {
    align-items: start;
}
.submission-screenshot {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border: 2px ridge #9b6b2d;
    border-radius: 10px;
    background: #1a0f07;
    box-shadow: 0 8px 18px rgba(59,36,14,.24);
}
.submission-preview-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(83,49,16,.32);
    background: rgba(255,246,222,.82);
}

.team-colour-chip {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,.22);
    vertical-align: middle;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.log-panel {
    background:
        linear-gradient(180deg, #2d190a, #160a04);
    color: #f4e8cf;
    border-radius: 12px;
    border: 2px ridge #8d622b;
    padding: 14px;
}
.log-panel pre {
    background: rgba(15, 8, 3, .9);
    color: #f3e6ca;
    border-color: rgba(255,255,255,.08);
}
.danger-zone {
    border-color: rgba(155,57,41,.58);
    background:
        radial-gradient(circle at top, rgba(255,226,213,.52), transparent 50%),
        linear-gradient(180deg, #f4d6c9, #d79684);
}

/* Small polish for native details */
hr {
    border: 0;
    height: 2px;
    margin: 18px 0;
    background: linear-gradient(90deg, transparent, rgba(92,55,16,.46), transparent);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #1a1008; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a06a20, #5f340d);
    border: 2px solid #1a1008;
    border-radius: 999px;
}

@media (max-width: 1180px) {
    .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .shell {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 14px;
    }
    .sidebar {
        position: static;
        min-height: 0;
    }
    .main {
        margin-right: 0;
        padding: 32px 20px 34px;
        clip-path: none;
    }
    .card {
        clip-path: none;
    }
    .grid.two, .grid.three, .grid.four, .form-grid, .game-builder-layout {
        grid-template-columns: 1fr;
    }
    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Phase 17: public board tile safe text padding.
   The parchment styling has uneven visual edges, so keep text away from the border
   and reserve space for the status seal in the bottom-right corner. */
.bingo-board.public .bingo-cell {
    padding: 16px 18px 42px;
    min-height: 148px;
    overflow: visible;
    line-height: 1.22;
}
.bingo-board.public .bingo-cell strong {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 1.16;
    overflow-wrap: anywhere;
    word-break: normal;
}
.bingo-board.public .bingo-cell small,
.bingo-board.public .bingo-cell .completion-text {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-right: 88px;
    line-height: 1.22;
    overflow-wrap: anywhere;
}
.bingo-board.public .bingo-cell .cell-pos {
    margin-bottom: 2px;
}
.bingo-board.public .bingo-cell img,
.bingo-board.public .bingo-cell .item-picker-icon-placeholder {
    flex: 0 0 auto;
}
.bingo-board.public .bingo-cell.completed::after,
.bingo-board.public .bingo-cell.pending::after,
.bingo-board.public .bingo-cell.incomplete::after {
    right: 12px;
    bottom: 10px;
}
@media (max-width: 1180px) {
    .bingo-board.public .bingo-cell {
        padding: 15px 15px 42px;
    }
    .bingo-board.public .bingo-cell small,
    .bingo-board.public .bingo-cell .completion-text {
        padding-right: 0;
    }
    .bingo-board.public .bingo-cell.completed::after,
    .bingo-board.public .bingo-cell.pending::after,
    .bingo-board.public .bingo-cell.incomplete::after {
        position: static;
        margin-top: auto;
        align-self: flex-start;
        display: inline-block;
    }
}


/* Phase 18: keep rough parchment styling decorative only.
   The previous jagged edges used clip-path on .main/.card, which can cut through
   headings and long tile labels. These overrides remove physical clipping and use
   decorative shadow/outline treatment instead. */
.main,
.card,
.login-card {
    clip-path: none !important;
    overflow: visible;
}
.main {
    border-radius: 16px 24px 18px 28px;
}
.card {
    border-radius: 12px 18px 14px 20px;
}
.main::before {
    inset: 18px;
}
.card::before,
.card::after {
    z-index: 1;
}
.card > *,
.topbar > *,
.bingo-board.public .bingo-cell > * {
    position: relative;
    z-index: 2;
}
/* Keep a torn-note feel without cutting the content box. */
.card {
    outline: 1px solid rgba(85, 50, 16, .18);
    outline-offset: -7px;
}
.bingo-board.public .bingo-cell {
    overflow: visible;
    border-radius: 10px 14px 11px 15px;
    outline: 1px solid rgba(85, 50, 16, .12);
    outline-offset: -5px;
}
.bingo-board.public .bingo-cell::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(85, 50, 16, .16);
    border-radius: 8px 11px 8px 12px;
    pointer-events: none;
    z-index: 1;
}
.bingo-board.public .bingo-cell.completed::before,
.bingo-board.public .bingo-cell.pending::before,
.bingo-board.public .bingo-cell.incomplete::before {
    content: "";
}
.bingo-board.public .bingo-cell.completed::after,
.bingo-board.public .bingo-cell.pending::after,
.bingo-board.public .bingo-cell.incomplete::after {
    z-index: 3;
}


/* Phase 19: readable code blocks and inline code.
   Inline code sits on parchment; code inside pre/log panels sits on dark stone. */
code {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(94, 55, 16, .26);
    background: rgba(255, 246, 220, .74);
    color: #3f2208;
    font-weight: 800;
}
pre code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffe8ac;
    font-weight: 700;
    white-space: pre;
}
pre {
    color: #ffe8ac;
}
.log-panel code,
.log-panel pre code {
    color: #ffe8ac;
}


/* Phase 20: Game Control Centre */
.control-button-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.control-button-grid form {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 12px;
    border: 1px solid rgba(103, 63, 22, .22);
    border-radius: 12px;
    background: rgba(255, 246, 220, .34);
}
.control-button-grid small {
    line-height: 1.25;
}
button:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.35);
    transform: none !important;
}
.ops-checklist {
    display: grid;
    gap: 10px;
}
.ops-check {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid rgba(103, 63, 22, .22);
    background: rgba(255, 246, 220, .34);
}
.ops-check-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(103, 63, 22, .24);
    background: rgba(255, 240, 200, .75);
}
.ops-check.good {
    border-color: rgba(79, 122, 67, .42);
    background: rgba(224, 242, 207, .36);
}
.ops-check.good .ops-check-icon {
    color: #244b23;
    background: rgba(191, 225, 167, .72);
    border-color: rgba(79, 122, 67, .42);
}
.ops-check.warn {
    border-color: rgba(191, 139, 51, .48);
    background: rgba(255, 232, 174, .34);
}
.ops-check.warn .ops-check-icon {
    color: #6b410d;
    background: rgba(255, 224, 142, .72);
    border-color: rgba(191, 139, 51, .48);
}
.ops-check.danger {
    border-color: rgba(155, 57, 41, .48);
    background: rgba(248, 210, 200, .34);
}
.ops-check.danger .ops-check-icon {
    color: #77251b;
    background: rgba(230, 154, 134, .58);
    border-color: rgba(155, 57, 41, .48);
}
.badge.status-sent {
    color: #244b23;
    border-color: rgba(55,114,48,.5);
    background: linear-gradient(180deg, rgba(216,239,202,.75), rgba(110,157,94,.24));
}
.badge.status-failed {
    color: #77251b;
    border-color: rgba(155,57,41,.45);
    background: linear-gradient(180deg, rgba(250,218,209,.78), rgba(182,76,58,.22));
}
.badge.status-skipped,
.badge.status-not_sent {
    color: #735016;
    border-color: rgba(159,105,26,.5);
    background: linear-gradient(180deg, rgba(250,235,188,.8), rgba(190,136,48,.18));
}
@media (max-width: 980px) {
    .control-button-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 21: Audit log viewer */
.audit-log-list {
    display: grid;
    gap: 12px;
}
.audit-entry {
    border: 1px solid rgba(103, 63, 22, .28);
    border-radius: 12px;
    background: rgba(255, 246, 220, .34);
    overflow: hidden;
}
.audit-entry.danger {
    border-color: rgba(155, 57, 41, .48);
    background: rgba(248, 210, 200, .24);
}
.audit-entry summary {
    display: grid;
    grid-template-columns: 185px 1.1fr 1fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 800;
}
.audit-entry summary:hover {
    background: rgba(128, 78, 23, .1);
}
.audit-time {
    color: var(--ink-soft);
    font-size: .88rem;
}
.audit-action {
    color: #4b2808;
}
.audit-entity {
    color: #6a4010;
}
.audit-actor {
    color: #321b08;
}
.audit-entry-body {
    padding: 14px;
    border-top: 1px solid rgba(103, 63, 22, .18);
}
.audit-entry pre {
    max-height: 420px;
}
@media (max-width: 980px) {
    .audit-entry summary {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* Phase 23: compact admin game builder layout.
   Keep game settings separate, then place board preview and selected tile editor side-by-side. */
.game-settings-card {
    margin-bottom: 22px;
}
.board-editor-layout {
    grid-template-columns: minmax(520px, 1.1fr) minmax(420px, .9fr);
    align-items: start;
}
.board-preview-card,
.tile-editor-card {
    align-self: start;
}
.tile-editor-card {
    position: sticky;
    top: 22px;
}
.board-preview-card .bingo-board {
    gap: 8px;
}
.board-preview-card .bingo-cell {
    min-height: 112px;
    padding: 13px 13px 15px;
}
.board-preview-card .bingo-cell strong {
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.board-preview-card .bingo-cell small {
    line-height: 1.15;
}
.tile-editor-card .topbar.compact {
    margin-bottom: 16px;
}
@media (max-width: 1280px) {
    .board-editor-layout {
        grid-template-columns: minmax(460px, 1fr) minmax(390px, .9fr);
    }
    .board-preview-card .bingo-cell {
        min-height: 104px;
    }
}
@media (max-width: 1080px) {
    .board-editor-layout {
        grid-template-columns: 1fr;
    }
    .tile-editor-card {
        position: static;
    }
}


/* Phase 24: keep tile editing anchored after selecting a board tile. */
#board-editor {
    scroll-margin-top: 18px;
}
.board-preview-card .bingo-cell.selected {
    outline: 4px solid rgba(241, 207, 119, .95);
    outline-offset: -4px;
}


/* Phase 25: cleaner player game cards */
.game-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px;
}
.game-card {
    display: block;
    color: var(--ink);
}
.clean-game-card {
    position: relative;
    min-height: 245px;
    padding: 18px;
    border: 2px solid #9e7135;
    border-radius: 13px 19px 14px 21px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,255,229,.5), transparent 27%),
        linear-gradient(180deg, #fff1c9, #e5c68c);
    box-shadow:
        0 10px 20px rgba(59,36,14,.18),
        inset 0 0 0 1px rgba(255,248,218,.34);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.clean-game-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: #b47a2b;
    box-shadow:
        0 16px 28px rgba(59,36,14,.24),
        inset 0 0 0 1px rgba(255,248,218,.44);
}
.game-card-topline,
.game-card-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.game-card-topline {
    margin-bottom: 14px;
}
.game-card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}
.game-card-title-row h3 {
    margin: 0 0 4px;
    font-size: 1.28rem;
    line-height: 1.12;
}
.game-card-clan {
    color: var(--ink-soft);
    font-weight: 800;
}
.game-card-board-size {
    min-width: 56px;
    padding: 8px 9px;
    border-radius: 11px;
    border: 1px solid rgba(103, 63, 22, .28);
    background: rgba(255, 246, 220, .58);
    color: #6a4010;
    text-align: center;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.15rem;
    font-weight: 900;
}
.game-card-schedule {
    display: grid;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 11px;
    border-radius: 12px;
    background: rgba(103, 63, 22, .07);
}
.game-card-schedule div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
}
.game-card-schedule strong {
    color: #573719;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
}
.game-card-schedule span {
    color: var(--ink);
    font-weight: 800;
}
.game-card-footer {
    justify-content: space-between;
    color: var(--ink-soft);
    font-size: .88rem;
    font-weight: 800;
}
.game-card-open {
    color: #7b470e;
    font-weight: 900;
}
.badge.warn {
    color: #735016;
    border-color: rgba(159,105,26,.5);
    background: linear-gradient(180deg, rgba(250,235,188,.8), rgba(190,136,48,.18));
}
@media (max-width: 620px) {
    .game-card-grid {
        grid-template-columns: 1fr;
    }
    .game-card-title-row {
        grid-template-columns: 1fr;
    }
    .game-card-board-size {
        justify-self: start;
    }
}


/* Phase 28: participant access controls */
.participant-clan-picker .check-list.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .18);
    border-radius: 10px;
    background: rgba(255, 246, 220, .32);
}
.participant-clan-picker .check-list.compact label {
    margin: 0;
}

/* Phase 29: item images and item-group hover details on bingo boards */
.bingo-cell .bingo-cell-image,
.bingo-board.public .bingo-cell .bingo-cell-image,
.board-preview-card .bingo-cell .bingo-cell-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: auto;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(83,49,16,.32);
    background: rgba(255,246,222,.88);
    box-shadow: inset 0 0 8px rgba(91,53,15,.12);
}
.bingo-board.public .bingo-cell .bingo-cell-image {
    margin-bottom: 3px;
}
.bingo-cell.item-group-cell {
    overflow: visible;
}
.bingo-cell .group-any-one {
    color: #6a4010;
    font-weight: 900;
    font-size: .78rem;
    padding-right: 0;
}
.group-hover-card {
    display: none;
    position: absolute;
    z-index: 40;
    left: 12px;
    right: 12px;
    top: calc(100% - 8px);
    min-width: 260px;
    max-width: 360px;
    max-height: 300px;
    overflow: auto;
    padding: 12px;
    border: 2px solid rgba(93,55,18,.58);
    border-radius: 12px;
    background:
        radial-gradient(circle at top, rgba(255,248,214,.95), transparent 65%),
        linear-gradient(180deg, #fff1c9, #d9b77a);
    box-shadow: 0 16px 34px rgba(33,20,8,.36);
    color: var(--ink);
    text-align: left;
}
.bingo-cell:hover .group-hover-card,
.bingo-cell:focus-within .group-hover-card {
    display: block;
}
.group-hover-card strong {
    display: block;
    margin-bottom: 8px;
    padding-right: 0 !important;
}
.group-hover-card ul {
    list-style: none;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.group-hover-card li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    font-size: .88rem;
    font-weight: 800;
}
.group-hover-card li img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    padding: 1px;
    border-radius: 5px;
}
.group-hover-card p {
    margin: 0;
    font-size: .88rem;
}
.bingo-board.public.compact .group-hover-card {
    left: 6px;
    right: auto;
}
@media (max-width: 860px) {
    .group-hover-card {
        position: static;
        display: block;
        min-width: 0;
        max-height: 180px;
        margin-top: 8px;
        box-shadow: inset 0 0 10px rgba(91,53,15,.12);
    }
}
.group-item-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}
.group-item-list-inline span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(103, 63, 22, .22);
    border-radius: 999px;
    background: rgba(255, 246, 220, .5);
    font-weight: 800;
    font-size: .88rem;
}
.group-item-list-inline img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


/* Phase 30: floating board hover cards + item aliases.
   Earlier global card safety rules made direct tile children position:relative,
   which caused hover cards to enter the tile flow and stretch the board. */
.bingo-cell,
.bingo-board.public .bingo-cell,
.bingo-board.public.compact .bingo-cell,
.board-preview-card .bingo-cell {
    position: relative;
    overflow: visible !important;
}
.bingo-cell > .group-hover-card,
.bingo-board.public .bingo-cell > .group-hover-card,
.bingo-board.public.compact .bingo-cell > .group-hover-card,
.board-preview-card .bingo-cell > .group-hover-card {
    display: none !important;
    position: absolute !important;
    z-index: 2000 !important;
    left: 12px;
    right: auto;
    top: calc(100% + 8px);
    width: max-content;
    min-width: 280px;
    max-width: min(420px, 82vw);
    max-height: 320px;
    overflow: auto;
    pointer-events: none;
}
.bingo-cell:hover > .group-hover-card,
.bingo-cell:focus-within > .group-hover-card,
.bingo-board.public .bingo-cell:hover > .group-hover-card,
.bingo-board.public .bingo-cell:focus-within > .group-hover-card {
    display: block !important;
}
.bingo-board.public.compact .bingo-cell > .group-hover-card {
    left: auto;
    right: 8px;
}
.bingo-board.public .bingo-cell:nth-child(3n) > .group-hover-card,
.bingo-board.public.compact .bingo-cell:nth-child(3n) > .group-hover-card {
    left: auto;
    right: 8px;
}
.group-hover-card .item-aliases {
    display: block;
    margin-top: 2px;
    color: #6a4010;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
}
.item-alias-hover-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.25;
}
@media (max-width: 860px) {
    .bingo-cell > .group-hover-card,
    .bingo-board.public .bingo-cell > .group-hover-card,
    .bingo-board.public.compact .bingo-cell > .group-hover-card,
    .board-preview-card .bingo-cell > .group-hover-card {
        display: none !important;
        position: absolute !important;
        left: 8px;
        right: auto;
        top: calc(100% + 8px);
        min-width: 240px;
        max-width: min(340px, 84vw);
        max-height: 260px;
        margin-top: 0;
        box-shadow: 0 16px 34px rgba(33,20,8,.36);
    }
    .bingo-cell:hover > .group-hover-card,
    .bingo-cell:focus-within > .group-hover-card {
        display: block !important;
    }
}


/* Phase 31: player board edge labels and square tiles */
.bingo-board-labelled {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, auto);
    grid-template-areas:
        "corner cols"
        "rows board";
    gap: 8px;
    align-items: stretch;
    overflow: visible;
}
.board-axis-corner {
    grid-area: corner;
}
.board-col-labels {
    grid-area: cols;
    display: grid;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    gap: 10px;
}
.board-row-labels {
    grid-area: rows;
    display: grid;
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
    gap: 10px;
}
.board-col-labels span,
.board-row-labels span {
    display: grid;
    place-items: center;
    min-height: 30px;
    padding: 5px 7px;
    border: 1px solid rgba(103, 63, 22, .28);
    border-radius: 9px;
    background: rgba(255, 246, 220, .46);
    color: #573719;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
    box-shadow: inset 0 0 7px rgba(91,53,15,.08);
}
.board-row-labels span {
    min-height: 0;
}
.bingo-board-labelled > .bingo-board {
    grid-area: board;
}
.bingo-board.public.square-board {
    align-items: stretch;
}
.bingo-board.public.square-board .bingo-cell {
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
    height: auto;
    overflow: visible !important;
    gap: 5px;
}
.bingo-board.public.square-board .bingo-cell .cell-pos {
    display: none !important;
}
.bingo-board.public.square-board .bingo-cell strong {
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.bingo-board.public.square-board .bingo-cell small {
    line-height: 1.15;
}
.bingo-board.public.square-board .bingo-cell .bingo-cell-image {
    width: clamp(30px, 18%, 48px);
    height: clamp(30px, 18%, 48px);
    flex: 0 0 auto;
}
.bingo-board-labelled.compact-labelled {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 6px;
}
.bingo-board-labelled.compact-labelled .board-col-labels,
.bingo-board-labelled.compact-labelled .board-row-labels,
.bingo-board.public.compact.square-board {
    gap: 6px;
}
.bingo-board-labelled.compact-labelled .board-col-labels span,
.bingo-board-labelled.compact-labelled .board-row-labels span {
    font-size: .72rem;
    padding: 4px 5px;
}
.bingo-board.public.compact.square-board .bingo-cell {
    padding: 8px;
    font-size: .86rem;
}
@media (max-width: 760px) {
    .bingo-board-labelled,
    .bingo-board-labelled.compact-labelled {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 5px;
    }
    .board-col-labels,
    .board-row-labels,
    .bingo-board.public.square-board {
        gap: 5px;
    }
    .board-col-labels span,
    .board-row-labels span {
        font-size: .68rem;
        padding: 4px;
    }
    .bingo-board.public.square-board .bingo-cell {
        padding: 7px;
        font-size: .78rem;
    }
}

/* Phase 32: centred player tiles and default manual/free-space icons */
.bingo-board.public.square-board .bingo-cell {
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    padding: 14px 14px 40px;
    gap: 7px;
}
.bingo-board.public.square-board .bingo-cell > strong,
.bingo-board.public.square-board .bingo-cell > small,
.bingo-board.public.square-board .bingo-cell .completion-text,
.bingo-board.public.square-board .bingo-cell .group-any-one {
    align-self: center;
    text-align: center;
    padding-right: 0 !important;
}
.bingo-board.public.square-board .bingo-cell .bingo-cell-image,
.bingo-board.public.square-board .bingo-cell img.bingo-cell-image,
.bingo-cell .bingo-cell-image,
.bingo-board.public .bingo-cell .bingo-cell-image,
.board-preview-card .bingo-cell .bingo-cell-image {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain !important;
    flex: 0 0 56px;
    display: block;
    margin: 0 auto 3px;
}
.bingo-board.public.compact.square-board .bingo-cell {
    padding: 10px 10px 34px;
    gap: 5px;
}
.bingo-board.public.compact.square-board .bingo-cell .bingo-cell-image {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    flex-basis: 48px;
}
.bingo-board.public.square-board .bingo-cell .btn.tiny {
    align-self: center;
    margin-top: 3px;
}
@media (max-width: 760px) {
    .bingo-board.public.square-board .bingo-cell {
        padding: 9px 7px 32px;
        gap: 4px;
    }
    .bingo-board.public.square-board .bingo-cell .bingo-cell-image,
    .bingo-board.public.compact.square-board .bingo-cell .bingo-cell-image {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        flex-basis: 40px;
    }
}


/* Phase 33: vertical row labels, larger board art, manual custom icon field */
.board-row-labels span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    min-width: 34px;
    min-height: 0;
}
.bingo-board.public.square-board .bingo-cell .bingo-cell-image,
.bingo-board.public.square-board .bingo-cell img.bingo-cell-image,
.bingo-cell .bingo-cell-image,
.bingo-board.public .bingo-cell .bingo-cell-image,
.board-preview-card .bingo-cell .bingo-cell-image {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px;
    min-height: 68px;
    max-width: 68px;
    max-height: 68px;
    flex: 0 0 68px;
}
.bingo-board.public.compact.square-board .bingo-cell .bingo-cell-image,
.bingo-board.public.compact.square-board .bingo-cell img.bingo-cell-image {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px;
    min-height: 58px;
    max-width: 58px;
    max-height: 58px;
    flex-basis: 58px;
}
@media (max-width: 760px) {
    .bingo-board.public.square-board .bingo-cell .bingo-cell-image,
    .bingo-board.public.compact.square-board .bingo-cell .bingo-cell-image {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        min-height: 48px;
        max-width: 48px;
        max-height: 48px;
        flex-basis: 48px;
    }
}


/* Phase 34: make row/column board identifiers visually consistent */
.board-col-labels span,
.board-row-labels span {
    font-size: .86rem;
    font-weight: 900;
}
.board-col-labels span {
    min-height: 48px;
}
.bingo-board-labelled.compact-labelled .board-col-labels span,
.bingo-board-labelled.compact-labelled .board-row-labels span {
    font-size: .86rem;
}
.bingo-board-labelled.compact-labelled .board-col-labels span {
    min-height: 62px;
}
@media (max-width: 760px) {
    .board-col-labels span,
    .board-row-labels span,
    .bingo-board-labelled.compact-labelled .board-col-labels span,
    .bingo-board-labelled.compact-labelled .board-row-labels span {
        font-size: .76rem;
    }
    .board-col-labels span,
    .bingo-board-labelled.compact-labelled .board-col-labels span {
        min-height: 46px;
    }
}

/* Phase 35: clan branding, HIT Media footer, and Discord profile sidebar */
.sidebar-user-card {
    margin-top: 22px;
    padding: 14px 12px;
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px solid rgba(241, 207, 119, .28);
    border-radius: 14px;
    background:
        radial-gradient(circle at top, rgba(241,207,119,.16), transparent 62%),
        rgba(12, 7, 3, .24);
    box-shadow: inset 0 0 18px rgba(0,0,0,.18);
    text-align: center;
}
.sidebar-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(241,207,119,.62);
    background: rgba(255,246,220,.22);
    box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 0 8px rgba(0,0,0,.2);
}
.sidebar-avatar.fallback {
    display: grid;
    place-items: center;
    color: #fff0c8;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(180deg, #8e5b24, #3a2110);
}
.sidebar-user-name {
    color: #fff0c8;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.03rem;
    font-weight: 900;
    line-height: 1.15;
}
.sidebar-user-subtle {
    color: rgba(255,240,200,.72);
    font-size: .84rem;
    font-weight: 700;
}
.clan-title-with-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.clan-logo-preview {
    width: 78px;
    height: 78px;
    object-fit: contain;
    flex: 0 0 78px;
    padding: 6px;
    border-radius: 16px;
    border: 2px solid rgba(103, 63, 22, .38);
    background: rgba(255, 246, 220, .58);
    box-shadow: inset 0 0 12px rgba(91,53,15,.12), 0 8px 18px rgba(59,36,14,.16);
}
.clan-logo-current {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid rgba(103, 63, 22, .24);
    border-radius: 12px;
    background: rgba(255, 246, 220, .38);
    color: var(--ink-soft);
    font-weight: 800;
}
.clan-logo-current img,
.clan-list-logo-row img,
.game-card-clan-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(103, 63, 22, .24);
    background: rgba(255, 246, 220, .58);
}
.clan-list-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.game-card-title-row.has-logo {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.game-card-title-row.has-logo > div {
    min-width: 0;
}
.app-footer {
    margin-top: 28px;
    padding: 16px 18px;
    border-top: 1px solid rgba(103, 63, 22, .28);
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.35;
    text-align: center;
}
.app-footer strong {
    color: #4b2808;
    font-family: Georgia, "Palatino Linotype", serif;
    letter-spacing: .03em;
}
.app-footer-disclaimer {
    margin-top: 5px;
    font-size: .78rem;
    opacity: .86;
}
@media (max-width: 760px) {
    .clan-title-with-logo {
        align-items: flex-start;
    }
    .clan-logo-preview {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }
    .game-card-title-row.has-logo {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .game-card-title-row.has-logo .game-card-board-size {
        grid-column: 1 / -1;
    }
}
.login-footer {
    max-width: 720px;
    margin: 18px auto 0;
    color: rgba(255,240,200,.82);
    border-top-color: rgba(241,207,119,.28);
}
.login-footer strong {
    color: #fff0c8;
}


/* Phase 36: global app logo and sidebar footer brand */
.app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
}
.app-brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 48px;
    border-radius: 12px;
    border: 1px solid rgba(241, 207, 119, .38);
    background: rgba(255, 240, 200, .08);
    box-shadow: inset 0 0 12px rgba(0,0,0,.18);
}
.app-brand span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.sidebar {
    display: flex;
    flex-direction: column;
}
.sidebar .nav {
    flex: 1 1 auto;
}
@media (max-width: 980px) {
    .app-brand {
        justify-content: flex-start;
    }
    .app-brand-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}


/* Phase 37: player sidebar spacing cleanup after branding pass */
.sidebar .subtle {
    margin-bottom: 0;
}
.sidebar .nav {
    margin-top: 16px;
    gap: 11px;
}
.sidebar .nav-section {
    gap: 5px;
    padding: 10px 9px 9px;
}
.sidebar .nav-section-title {
    margin: -2px 0 2px;
    line-height: 1;
}
.sidebar .nav a {
    padding: 8px 11px 8px 26px;
    min-height: 42px;
    display: flex;
    align-items: center;
}
.sidebar .nav a::before {
    left: 10px;
}
.sidebar-user-card {
    margin-top: 14px;
    padding: 12px 10px;
}
.account-shell .sidebar,
body .sidebar {
    row-gap: 0;
}
@media (max-width: 980px) {
    .sidebar .nav {
        margin-top: 12px;
        gap: 9px;
    }
    .sidebar .nav-section {
        padding: 9px 8px 8px;
    }
    .sidebar .nav a {
        min-height: 40px;
    }
}


/* Phase 38: tighter player sidebar menu + public landing page */
.account-ui .sidebar .nav {
    margin-top: 12px;
    gap: 8px;
}
.account-ui .sidebar .nav-section {
    gap: 3px;
    padding: 8px 8px 7px;
    border-radius: 11px;
}
.account-ui .sidebar .nav-section-title {
    margin: -1px 0 1px;
    font-size: .66rem;
    letter-spacing: .12em;
}
.account-ui .sidebar .nav a {
    min-height: 34px;
    padding: 6px 9px 6px 23px;
    border-radius: 8px 11px 8px 11px;
    font-size: .9rem;
    line-height: 1.12;
}
.account-ui .sidebar .nav a::before {
    left: 9px;
    font-size: .95rem;
}
.account-ui .sidebar-user-card {
    margin-top: 10px;
    padding: 10px 9px;
    gap: 6px;
}
.account-ui .sidebar-avatar {
    width: 58px;
    height: 58px;
}

/* Public index / landing page */
.landing-ui {
    color: var(--parchment-4);
}
.landing-wrap {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 42px 0 28px;
}
.landing-hero,
.landing-card {
    position: relative;
    border: 3px ridge #9b6b2d;
    border-radius: 22px 13px 22px 13px;
    background:
        radial-gradient(circle at top, rgba(255,244,190,.42), transparent 58%),
        linear-gradient(180deg, #f5e4b7, #d6b170);
    color: var(--ink);
    box-shadow:
        0 22px 40px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,248,218,.36),
        inset 0 0 28px rgba(91,53,15,.12);
}
.landing-hero {
    padding: 34px;
}
.landing-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: center;
    gap: clamp(24px, 5vw, 58px);
}
.landing-copy {
    min-width: 0;
    max-width: 760px;
}
.landing-logo-panel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.landing-logo-panel .landing-app-logo {
    width: min(420px, 36vw);
    height: auto;
    max-height: 430px;
    object-fit: contain;
    flex: 0 1 420px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: 0 22px 38px rgba(59,36,14,.22);
    filter: drop-shadow(0 18px 26px rgba(33, 18, 7, .26));
}
.landing-brand-row {
    display: flex;
    align-items: center;
    gap: 22px;
}
.landing-app-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    flex: 0 0 104px;
    padding: 8px;
    border-radius: 22px;
    border: 2px solid rgba(103, 63, 22, .38);
    background: rgba(255, 246, 220, .52);
    box-shadow: inset 0 0 12px rgba(91,53,15,.12), 0 12px 22px rgba(59,36,14,.2);
}
.landing-hero h1 {
    margin: 0 0 10px;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    color: #321a07;
    text-shadow: 0 2px 0 rgba(255,246,220,.55);
}
.landing-kicker {
    margin: 0;
    max-width: 760px;
    color: #5f3e1b;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.45;
}
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.landing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.landing-card {
    padding: 22px;
}
.landing-card h2 {
    margin-top: 0;
}
.landing-card p {
    margin-bottom: 0;
    color: #533416;
    font-weight: 750;
    line-height: 1.45;
}
.landing-clans {
    margin-top: 20px;
}
.landing-clan-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 14px;
}
.landing-clan {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid rgba(103, 63, 22, .24);
    border-radius: 14px;
    background: rgba(255, 246, 220, .34);
    color: #3a210c;
    font-weight: 900;
    text-align: center;
}
.landing-clan img,
.landing-clan-fallback {
    width: 74px;
    height: 74px;
    object-fit: contain;
    border-radius: 16px;
    border: 2px solid rgba(103, 63, 22, .32);
    background: rgba(255, 246, 220, .6);
}
.landing-clan-fallback {
    display: grid;
    place-items: center;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 2rem;
    color: #6a4010;
}
.landing-footer {
    display: grid;
    justify-items: center;
    gap: 8px;
}
.landing-footer-logo {
    width: min(220px, 80%);
    max-height: 90px;
    object-fit: contain;
    margin-bottom: 4px;
}
@media (max-width: 860px) {
    .landing-hero-inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .landing-logo-panel {
        justify-content: center;
        order: -1;
    }
    .landing-logo-panel .landing-app-logo {
        width: min(340px, 82vw);
        max-height: 340px;
    }
    .landing-brand-row {
        align-items: flex-start;
    }
    .landing-app-logo {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }
    .landing-grid {
        grid-template-columns: 1fr;
    }
    .landing-hero {
        padding: 24px;
    }
}
@media (max-width: 560px) {
    .landing-brand-row {
        display: grid;
        justify-items: start;
    }
    .landing-actions .btn {
        width: 100%;
        text-align: center;
    }
}


/* Phase 39: mobile responsive application shell */
.mobile-topbar,
.mobile-menu-backdrop {
    display: none;
}

@media (max-width: 980px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 5000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border-bottom: 2px ridge #8e5b24;
        background:
            linear-gradient(180deg, rgba(55, 31, 12, .98), rgba(20, 10, 5, .98)),
            #211109;
        box-shadow: 0 10px 22px rgba(0,0,0,.34);
    }

    .mobile-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: #f1cf77;
        font-family: Georgia, "Palatino Linotype", serif;
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: .04em;
        text-shadow: 0 2px 0 #000;
        text-decoration: none;
    }

    .mobile-brand:hover {
        color: #fff0c8;
        text-decoration: none;
    }

    .mobile-brand img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        flex: 0 0 38px;
        border-radius: 9px;
        border: 1px solid rgba(241,207,119,.34);
        background: rgba(255,240,200,.08);
    }

    .mobile-brand span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-button {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 13px;
        border-radius: 10px;
        border: 1px solid rgba(241,207,119,.52);
        background:
            radial-gradient(circle at top, rgba(241,207,119,.22), transparent 55%),
            linear-gradient(180deg, #8e5b24, #3b210d);
        color: #fff0c8;
        font-weight: 900;
        letter-spacing: .04em;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.28);
    }

    .shell {
        display: block;
        width: 100%;
        min-height: calc(100vh - 60px);
        padding: 12px;
    }

    .sidebar {
        position: fixed;
        z-index: 5200;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 330px);
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 14px;
        border-radius: 0 16px 16px 0;
        transform: translateX(-105%);
        transition: transform .18s ease;
        box-shadow: 18px 0 42px rgba(0,0,0,.52);
    }

    body.mobile-menu-open .sidebar {
        transform: translateX(0);
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 5100;
        inset: 0;
        background: rgba(0,0,0,.56);
        backdrop-filter: blur(2px);
    }

    body.mobile-menu-open .mobile-menu-backdrop {
        display: block;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .sidebar .brand {
        margin-top: 4px;
        font-size: 1.28rem;
        padding: 12px 10px;
    }

    .sidebar .app-brand-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sidebar .subtle {
        font-size: .72rem;
        letter-spacing: .09em;
    }

    .sidebar .nav,
    .account-ui .sidebar .nav {
        margin-top: 12px;
        gap: 9px;
    }

    .sidebar .nav-section,
    .account-ui .sidebar .nav-section {
        padding: 9px 8px 8px;
        gap: 4px;
    }

    .sidebar .nav-section-title,
    .account-ui .sidebar .nav-section-title {
        font-size: .66rem;
        letter-spacing: .12em;
        margin: 0 0 2px;
    }

    .sidebar .nav a,
    .account-ui .sidebar .nav a {
        min-height: 38px;
        padding: 7px 10px 7px 25px;
        font-size: .92rem;
        line-height: 1.15;
        display: flex;
        align-items: center;
    }

    .sidebar-user-card {
        margin-top: 10px;
        padding: 10px;
        gap: 6px;
    }

    .sidebar-avatar {
        width: 56px;
        height: 56px;
    }

    .main {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 14px;
        overflow: visible;
    }

    .main::before {
        inset: 10px;
    }

    .topbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
    }

    .topbar h1 {
        font-size: clamp(1.6rem, 8vw, 2.25rem);
        overflow-wrap: anywhere;
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .actions .btn,
    .actions button,
    .btn,
    button {
        min-height: 40px;
    }

    .grid,
    .grid.two,
    .grid.three,
    .grid.four,
    .game-builder-layout,
    .board-editor-layout,
    .landing-grid {
        grid-template-columns: 1fr !important;
    }

    .card {
        padding: 16px;
        border-radius: 12px;
        overflow: visible;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table th,
    .table td {
        white-space: nowrap;
    }

    .game-card-grid {
        grid-template-columns: 1fr !important;
    }

    .clean-game-card {
        min-height: auto;
    }

    .game-card-schedule div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .game-card-footer {
        justify-content: flex-start;
    }

    .clan-title-with-logo,
    .game-card-title-row.has-logo,
    .landing-brand-row {
        grid-template-columns: 1fr !important;
        display: grid;
        justify-items: start;
    }

    .clan-logo-preview,
    .game-card-clan-logo {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .audit-entry summary {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .control-button-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Phase 39: mobile board handling */
@media (max-width: 760px) {
    .bingo-board-labelled {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        grid-template-columns: 48px minmax(540px, 1fr);
    }

    .bingo-board-labelled.compact-labelled {
        grid-template-columns: 46px minmax(520px, 1fr);
    }

    .board-col-labels,
    .board-row-labels,
    .bingo-board.public.square-board {
        min-width: 0;
    }

    .bingo-board.public.square-board {
        width: 100%;
    }

    .bingo-board.public.square-board .bingo-cell {
        min-width: 0;
        padding: 8px 7px 30px;
        font-size: .76rem;
    }

    .bingo-board.public.square-board .bingo-cell strong {
        font-size: .82rem;
    }

    .bingo-board.public.square-board .bingo-cell .completion-text,
    .bingo-board.public.square-board .bingo-cell .group-any-one {
        font-size: .68rem;
    }

    .bingo-board.public.square-board .bingo-cell .bingo-cell-image,
    .bingo-board.public.compact.square-board .bingo-cell .bingo-cell-image {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        max-width: 44px;
        max-height: 44px;
        flex-basis: 44px;
    }

    .board-col-labels span,
    .board-row-labels span,
    .bingo-board-labelled.compact-labelled .board-col-labels span,
    .bingo-board-labelled.compact-labelled .board-row-labels span {
        font-size: .68rem;
        min-height: 38px;
    }

    .board-row-labels span {
        min-width: 28px;
    }

    .group-hover-card,
    .bingo-cell > .group-hover-card,
    .bingo-board.public .bingo-cell > .group-hover-card {
        max-width: min(320px, 78vw);
    }
}

@media (max-width: 520px) {
    .shell {
        padding: 8px;
    }

    .main {
        padding: 13px;
    }

    .card {
        padding: 13px;
    }

    .landing-wrap {
        width: min(100% - 20px, 1180px);
        padding-top: 22px;
    }

    .landing-hero {
        padding: 18px;
    }

    .landing-app-logo {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .landing-logo-panel .landing-app-logo {
        width: min(300px, 86vw);
        height: auto;
        flex-basis: auto;
    }

    .landing-actions .btn {
        width: 100%;
        text-align: center;
    }

    .bingo-board-labelled {
        grid-template-columns: 42px minmax(500px, 1fr);
    }

    .bingo-board-labelled.compact-labelled {
        grid-template-columns: 40px minmax(480px, 1fr);
    }
}


/* Phase 40: mobile board list replaces full grid on small screens */
.mobile-board-list {
    display: none;
}
@media (max-width: 760px) {
    .desktop-bingo-board {
        display: none !important;
    }
    .mobile-board-list {
        display: grid;
        gap: 14px;
    }
    .mobile-board-section {
        display: grid;
        gap: 8px;
    }
    .mobile-board-section h3 {
        margin: 0;
        padding: 8px 10px;
        border: 1px solid rgba(103, 63, 22, .28);
        border-radius: 10px;
        background: rgba(255, 246, 220, .44);
        color: #4b2808;
        font-size: 1rem;
        text-align: center;
    }
    .mobile-board-items {
        display: grid;
        gap: 8px;
    }
    .mobile-board-item {
        display: grid;
        grid-template-columns: 58px 52px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px;
        border: 1px solid rgba(103, 63, 22, .25);
        border-radius: 12px;
        background:
            radial-gradient(circle at top left, rgba(255,246,220,.46), transparent 62%),
            rgba(230, 196, 128, .42);
        color: var(--ink);
    }
    .mobile-board-item.completed {
        border-color: rgba(79, 122, 67, .42);
        background:
            radial-gradient(circle at top left, rgba(234,255,207,.55), transparent 62%),
            rgba(183, 218, 145, .58);
    }
    .mobile-board-item.pending {
        border-color: rgba(191, 139, 51, .48);
        background:
            radial-gradient(circle at top left, rgba(255,242,191,.58), transparent 62%),
            rgba(235, 204, 132, .48);
    }
    .mobile-board-item.empty {
        opacity: .72;
    }
    .mobile-board-col {
        display: grid;
        place-items: center;
        min-height: 42px;
        border-radius: 9px;
        border: 1px solid rgba(103, 63, 22, .22);
        background: rgba(255, 246, 220, .48);
        color: #573719;
        font-family: Georgia, "Palatino Linotype", serif;
        font-size: .8rem;
        font-weight: 900;
        text-align: center;
    }
    .mobile-board-image {
        width: 46px;
        height: 46px;
        object-fit: contain;
        padding: 3px;
        border-radius: 9px;
        border: 1px solid rgba(83,49,16,.28);
        background: rgba(255,246,222,.84);
    }
    .mobile-board-main {
        display: grid;
        gap: 3px;
        min-width: 0;
    }
    .mobile-board-main strong {
        color: #2a170a;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    .mobile-board-main small {
        color: #604321;
        font-weight: 800;
        line-height: 1.25;
    }
    .mobile-board-main .btn.tiny {
        justify-self: start;
        margin-top: 4px;
    }
}
@media (max-width: 430px) {
    .mobile-board-item {
        grid-template-columns: 48px 42px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }
    .mobile-board-col {
        min-height: 38px;
        font-size: .72rem;
    }
    .mobile-board-image {
        width: 40px;
        height: 40px;
    }
}


/* Phase 41: mobile tables stack vertically instead of sideways scrolling */
@media (max-width: 760px) {
    .table {
        display: grid;
        gap: 8px;
        overflow: visible;
        width: 100%;
    }
    .table thead {
        display: none;
    }
    .table tbody,
    .table tr,
    .table th,
    .table td {
        display: block;
        width: 100%;
    }
    .table tr {
        padding: 9px;
        border: 1px solid rgba(103, 63, 22, .22);
        border-radius: 10px;
        background: rgba(255, 246, 220, .26);
    }
    .table th,
    .table td {
        white-space: normal !important;
        overflow-wrap: anywhere;
        border: 0 !important;
        padding: 4px 2px !important;
    }
    .table th {
        color: #573719;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #573719;
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .mobile-board-section h3 {
        text-align: left;
        padding-left: 12px;
    }
    .mobile-board-list {
        gap: 16px;
    }
}


/* Phase 42: match mobile board status colours to desktop board tiles */
@media (max-width: 760px) {
    .mobile-board-item.completed {
        border-color: rgba(79, 122, 67, .58) !important;
        background:
            radial-gradient(circle at top left, rgba(234,255,207,.72), transparent 62%),
            linear-gradient(180deg, rgba(217, 239, 199, .86), rgba(125, 170, 104, .58)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.2),
            0 8px 16px rgba(48, 76, 35, .16);
    }

    .mobile-board-item.pending {
        border-color: rgba(191, 139, 51, .62) !important;
        background:
            radial-gradient(circle at top left, rgba(255,246,201,.76), transparent 62%),
            linear-gradient(180deg, rgba(255, 235, 171, .88), rgba(210, 158, 65, .5)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.2),
            0 8px 16px rgba(126, 83, 20, .14);
    }

    .mobile-board-item.incomplete {
        border-color: rgba(155, 57, 41, .54) !important;
        background:
            radial-gradient(circle at top left, rgba(255,230,215,.62), transparent 62%),
            linear-gradient(180deg, rgba(238, 190, 165, .62), rgba(154, 77, 52, .32)) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.14),
            0 8px 16px rgba(93, 34, 23, .12);
    }

    .mobile-board-item.empty {
        border-color: rgba(103, 63, 22, .18) !important;
        background:
            radial-gradient(circle at top left, rgba(255,246,220,.34), transparent 62%),
            rgba(182, 149, 91, .22) !important;
        opacity: .72;
    }

    .mobile-board-item.completed .mobile-board-col {
        color: #244b23;
        border-color: rgba(79, 122, 67, .4);
        background: rgba(224, 242, 207, .68);
    }

    .mobile-board-item.pending .mobile-board-col {
        color: #735016;
        border-color: rgba(191, 139, 51, .44);
        background: rgba(255, 235, 171, .68);
    }

    .mobile-board-item.incomplete .mobile-board-col {
        color: #77251b;
        border-color: rgba(155, 57, 41, .38);
        background: rgba(248, 210, 200, .48);
    }

    .mobile-board-item.completed .mobile-board-main small,
    .mobile-board-item.pending .mobile-board-main small,
    .mobile-board-item.incomplete .mobile-board-main small {
        color: #3f2208;
    }

    .mobile-board-item.completed .mobile-board-main strong,
    .mobile-board-item.pending .mobile-board-main strong,
    .mobile-board-item.incomplete .mobile-board-main strong {
        color: #211105;
    }
}


/* Phase 43: colour-code mobile row/column/diagonal line headers */
@media (max-width: 760px) {
    .mobile-board-section {
        border: 2px solid rgba(103, 63, 22, .18);
        border-radius: 14px;
        padding: 8px;
        background: rgba(255, 246, 220, .12);
    }

    .mobile-board-section h3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 2px;
    }

    .mobile-board-section h3 span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mobile-board-section h3 small {
        font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1.15;
        text-align: right;
        text-transform: none;
        letter-spacing: 0;
    }

    .mobile-board-section.line-completed {
        border-color: rgba(79, 122, 67, .55);
        background:
            radial-gradient(circle at top left, rgba(234,255,207,.28), transparent 62%),
            rgba(183, 218, 145, .16);
    }

    .mobile-board-section.line-completed h3 {
        border-color: rgba(79, 122, 67, .48);
        background:
            radial-gradient(circle at top left, rgba(234,255,207,.66), transparent 62%),
            linear-gradient(180deg, rgba(217, 239, 199, .9), rgba(125, 170, 104, .62));
        color: #244b23;
    }

    .mobile-board-section.line-pending {
        border-color: rgba(191, 139, 51, .6);
        background:
            radial-gradient(circle at top left, rgba(255,246,201,.32), transparent 62%),
            rgba(235, 204, 132, .18);
    }

    .mobile-board-section.line-pending h3 {
        border-color: rgba(191, 139, 51, .52);
        background:
            radial-gradient(circle at top left, rgba(255,246,201,.72), transparent 62%),
            linear-gradient(180deg, rgba(255, 235, 171, .92), rgba(210, 158, 65, .56));
        color: #735016;
    }

    .mobile-board-section.line-incomplete {
        border-color: rgba(155, 57, 41, .52);
        background:
            radial-gradient(circle at top left, rgba(255,230,215,.26), transparent 62%),
            rgba(154, 77, 52, .14);
    }

    .mobile-board-section.line-incomplete h3 {
        border-color: rgba(155, 57, 41, .46);
        background:
            radial-gradient(circle at top left, rgba(255,230,215,.64), transparent 62%),
            linear-gradient(180deg, rgba(238, 190, 165, .72), rgba(154, 77, 52, .38));
        color: #77251b;
    }

    .mobile-board-section.line-empty {
        opacity: .78;
        border-color: rgba(103, 63, 22, .18);
    }

    .mobile-board-section.line-empty h3 {
        color: #573719;
        background: rgba(255, 246, 220, .34);
    }
}


/* Phase 44: force visible mobile line/tile status colouring */
@media (max-width: 760px) {
    .mobile-board-section.line-completed {
        border-color: rgba(57, 112, 47, .9) !important;
        background:
            radial-gradient(circle at top left, rgba(219,255,192,.42), transparent 62%),
            rgba(116, 169, 92, .28) !important;
    }

    .mobile-board-section.line-pending {
        border-color: rgba(190, 128, 28, .9) !important;
        background:
            radial-gradient(circle at top left, rgba(255,239,175,.46), transparent 62%),
            rgba(205, 148, 51, .24) !important;
    }

    .mobile-board-section.line-incomplete {
        border-color: rgba(145, 58, 43, .9) !important;
        background:
            radial-gradient(circle at top left, rgba(255,220,204,.38), transparent 62%),
            rgba(165, 76, 54, .24) !important;
    }

    .mobile-board-section.line-completed h3 {
        background: linear-gradient(180deg, #d8efb8, #8fbd72) !important;
        border-color: rgba(74, 126, 66, .9) !important;
        color: #254b20 !important;
    }

    .mobile-board-section.line-pending h3 {
        background: linear-gradient(180deg, #f4d98f, #c9953d) !important;
        border-color: rgba(184, 125, 32, .92) !important;
        color: #5d3709 !important;
    }

    .mobile-board-section.line-incomplete h3 {
        background: linear-gradient(180deg, #eac5a6, #bf765e) !important;
        border-color: rgba(145, 58, 43, .82) !important;
        color: #5e2119 !important;
    }

    .mobile-board-item.completed {
        border-color: rgba(74, 126, 66, .9) !important;
        background: linear-gradient(180deg, #d8efb8, #8fbd72) !important;
    }

    .mobile-board-item.pending {
        border-color: rgba(184, 125, 32, .92) !important;
        background: linear-gradient(180deg, #f4d98f, #c9953d) !important;
    }

    .mobile-board-item.incomplete,
    .mobile-board-item.preview {
        border-color: rgba(145, 58, 43, .82) !important;
        background: linear-gradient(180deg, #eac5a6, #bf765e) !important;
    }

    .mobile-board-item.empty {
        border-color: rgba(103, 63, 22, .22) !important;
        background: rgba(210, 174, 105, .28) !important;
        opacity: .74;
    }

    .mobile-board-section.line-completed h3::after,
    .mobile-board-section.line-pending h3::after,
    .mobile-board-section.line-incomplete h3::after {
        flex: 0 0 auto;
        padding: 3px 7px;
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 900;
        border: 1px solid currentColor;
        background: rgba(255,255,255,.26);
    }

    .mobile-board-section.line-completed h3::after {
        content: "Complete";
    }

    .mobile-board-section.line-pending h3::after {
        content: "Review";
    }

    .mobile-board-section.line-incomplete h3::after {
        content: "Incomplete";
    }

    .mobile-board-item.completed .mobile-board-main small:first-of-type::before {
        content: "✓ ";
        font-weight: 900;
    }

    .mobile-board-item.pending .mobile-board-main small:first-of-type::before {
        content: "⏳ ";
        font-weight: 900;
    }

    .mobile-board-item.incomplete .mobile-board-main small:first-of-type::before,
    .mobile-board-item.preview .mobile-board-main small:first-of-type::before {
        content: "✗ ";
        font-weight: 900;
    }
}


/* Phase 49: footer should always sit below page content */
.app-footer {
    clear: both;
}


/* Phase 50: player sidebar natural menu sizing + clearer active states */
.account-ui .sidebar {
    justify-content: flex-start;
}
.account-ui .sidebar .nav {
    flex: 0 0 auto !important;
    align-content: start !important;
    align-items: stretch;
    grid-auto-rows: auto;
}
.account-ui .sidebar .nav-section {
    flex: 0 0 auto;
    align-content: start;
    grid-auto-rows: auto;
    min-height: 0;
}
.account-ui .sidebar .nav a {
    flex: 0 0 auto;
    min-height: 34px;
    height: auto;
}
.account-ui .sidebar .nav a:not(.active):not(:hover) {
    transform: none;
}
.account-ui .sidebar .nav a.nav-return:not(.active) {
    color: #f9e6b7;
    background:
        linear-gradient(180deg, rgba(138,83,30,.25), rgba(34,17,6,.3)),
        rgba(255,255,255,.018);
    border-color: rgba(130, 82, 28, .38);
}


/* Phase 51: public game overview board + team row list */
.public-game-layout {
    grid-template-columns: 1fr;
}

.public-board-card {
    overflow: visible;
}

.public-board-preview-wrap {
    display: grid;
    gap: 14px;
}

.public-overview-board {
    position: relative;
    overflow: hidden;
}

.public-overview-board .overview-cell {
    background:
        radial-gradient(circle at top, rgba(255,246,220,.42), transparent 62%),
        linear-gradient(180deg, rgba(235, 205, 143, .84), rgba(199, 151, 80, .62));
    border-color: rgba(103, 63, 22, .34);
}

.public-overview-board .overview-cell.empty {
    opacity: .62;
}

.public-overview-board .overview-cell::after {
    display: none !important;
    content: none !important;
}

.public-overview-board .claimed-line-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.claimed-board-line {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: var(--line-color, #c7904a);
    box-shadow:
        0 0 0 2px rgba(255, 246, 220, .72),
        0 0 10px rgba(0, 0, 0, .28),
        0 0 18px color-mix(in srgb, var(--line-color, #c7904a) 65%, transparent);
    opacity: .92;
}

.claim-row-line {
    left: 4%;
    right: 4%;
    top: var(--line-y, 50%);
    height: 8px;
    transform: translateY(-50%);
}

.claim-column-line {
    top: 4%;
    bottom: 4%;
    left: var(--line-x, 50%);
    width: 8px;
    transform: translateX(-50%);
}

.claim-diagonal-tlbr,
.claim-diagonal-trbl {
    left: -22%;
    top: 50%;
    width: 144%;
    height: 8px;
    transform-origin: center;
}

.claim-diagonal-tlbr {
    transform: rotate(45deg);
}

.claim-diagonal-trbl {
    transform: rotate(-45deg);
}

.claimed-line-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.claimed-line-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(103, 63, 22, .22);
    background: rgba(255, 246, 220, .34);
    color: #3b210c;
    font-weight: 900;
    font-size: .84rem;
}

.claimed-line-legend i {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 1px solid rgba(59, 36, 14, .36);
    box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

.public-team-list {
    display: grid;
    gap: 10px;
}

.public-team-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(103, 63, 22, .24);
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.42), transparent 64%),
        rgba(229, 194, 127, .36);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.public-team-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.public-team-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-team-copy strong {
    color: #2a170a;
    overflow-wrap: anywhere;
}

.public-team-copy small {
    color: #604321;
    font-weight: 800;
    line-height: 1.25;
}

.team-chatheads {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 88px;
}

.team-chathead {
    width: 34px;
    height: 34px;
    margin-left: -8px;
    border-radius: 999px;
    border: 2px solid rgba(255, 246, 220, .92);
    background: #3d2410;
    object-fit: cover;
    box-shadow: 0 3px 8px rgba(59, 36, 14, .26);
}

.team-chathead:first-child {
    margin-left: 0;
}

.team-chathead.fallback,
.team-chathead.more {
    display: inline-grid;
    place-items: center;
    color: #fff0c8;
    font-weight: 900;
    font-size: .82rem;
}

.team-chathead.more {
    background: #76501f;
}

.public-team-actions {
    justify-self: end;
}

.public-game-line-list .mobile-board-section.line-claimed {
    border-color: var(--line-color, #c7904a) !important;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--line-color, #c7904a) 28%, transparent), transparent 62%),
        rgba(255, 246, 220, .22) !important;
}

.public-game-line-list .mobile-board-section.line-claimed h3 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--line-color, #c7904a) 46%, #fff0c8), color-mix(in srgb, var(--line-color, #c7904a) 70%, #7b4d15)) !important;
    border-color: var(--line-color, #c7904a) !important;
    color: #261406 !important;
}

.public-game-line-list .mobile-board-section.line-claimed h3::after {
    content: "Claimed";
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    border: 1px solid currentColor;
    background: rgba(255,255,255,.3);
}

.public-game-line-list .mobile-board-section.line-open h3 {
    background: rgba(255, 246, 220, .34) !important;
    color: #573719 !important;
}

.public-game-line-list .mobile-board-item.preview,
.public-game-line-list .mobile-board-item.incomplete,
.public-game-line-list .mobile-board-item.completed,
.public-game-line-list .mobile-board-item.pending {
    border-color: rgba(103, 63, 22, .25) !important;
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.46), transparent 62%),
        rgba(230, 196, 128, .42) !important;
    box-shadow: none !important;
}

.public-game-line-list .mobile-board-item.preview .mobile-board-main small:first-of-type::before,
.public-game-line-list .mobile-board-item.incomplete .mobile-board-main small:first-of-type::before,
.public-game-line-list .mobile-board-item.completed .mobile-board-main small:first-of-type::before,
.public-game-line-list .mobile-board-item.pending .mobile-board-main small:first-of-type::before {
    content: "" !important;
}

@media (max-width: 860px) {
    .public-team-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .team-chatheads {
        justify-content: flex-start;
    }

    .public-team-actions {
        justify-self: stretch;
    }

    .public-team-actions .btn {
        width: 100%;
        text-align: center;
    }
}


/* Phase 52: public overview and team board layout refinements */
.public-game-layout {
    grid-template-columns: minmax(300px, .85fr) minmax(520px, 1.15fr);
    align-items: start;
}
.public-game-layout > .card:not(.public-board-card) {
    order: 1;
}
.public-game-layout > .public-board-card {
    order: 2;
}

.team-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.team-stat-tile {
    padding: 14px 16px;
}
.team-stat-tile h2 {
    font-size: .92rem;
    margin-bottom: 8px;
}
.team-stat-tile .stat {
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    line-height: 1.1;
}
.team-stat-tile .muted {
    font-size: .82rem;
}

.team-board-layout {
    grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.28fr);
    align-items: start;
}
.team-side-panel,
.team-board-panel {
    display: grid;
    gap: 20px;
}
.team-board-panel {
    order: 2;
}
.team-side-panel {
    order: 1;
}

.team-roster-chatheads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 12px;
}
.team-roster-member {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}
.team-roster-avatar {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: 3px solid rgba(255, 246, 220, .88);
    background: #3d2410;
    object-fit: cover;
    box-shadow: 0 5px 12px rgba(59, 36, 14, .24);
}
.team-roster-avatar.fallback {
    display: grid;
    place-items: center;
    color: #fff0c8;
    font-weight: 900;
    font-size: 1.35rem;
}
.team-roster-member strong {
    max-width: 100%;
    color: #2a170a;
    font-size: .82rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.claim-history-list {
    display: grid;
    gap: 10px;
}
.claim-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .22);
    border-radius: 12px;
    background: rgba(255, 246, 220, .3);
}
.claim-history-row.line-claim {
    background:
        radial-gradient(circle at top left, rgba(241,207,119,.34), transparent 60%),
        rgba(235, 199, 125, .38);
}
.claim-history-row.full-board-claim {
    background:
        radial-gradient(circle at top left, rgba(213,241,183,.42), transparent 60%),
        rgba(188, 218, 145, .34);
}
.claim-history-row.tile-completion {
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.42), transparent 60%),
        rgba(229, 194, 127, .28);
}
.claim-history-row strong {
    color: #2a170a;
}
.claim-history-row small {
    display: block;
    margin-top: 3px;
    color: #604321;
    font-weight: 800;
    line-height: 1.25;
}

.tile-type-legend {
    display: grid;
    gap: 10px;
}
.tile-type-swatch {
    display: grid;
    grid-template-columns: 42px minmax(0, auto);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .24);
    border-radius: 12px;
}
.tile-type-swatch span {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 2px solid rgba(255, 246, 220, .8);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 10px rgba(59,36,14,.16);
}
.tile-type-swatch strong {
    color: #2a170a;
}
.tile-type-swatch small {
    color: #604321;
    font-weight: 800;
    line-height: 1.25;
}
.tile-type-swatch.completed {
    background:
        radial-gradient(circle at top left, rgba(234,255,207,.64), transparent 62%),
        linear-gradient(180deg, rgba(217, 239, 199, .8), rgba(125, 170, 104, .48));
    border-color: rgba(79, 122, 67, .48);
}
.tile-type-swatch.completed span {
    background: linear-gradient(180deg, #d8efb8, #8fbd72);
    border-color: rgba(74, 126, 66, .75);
}
.tile-type-swatch.pending {
    background:
        radial-gradient(circle at top left, rgba(255,246,201,.72), transparent 62%),
        linear-gradient(180deg, rgba(255, 235, 171, .86), rgba(210, 158, 65, .44));
    border-color: rgba(191, 139, 51, .52);
}
.tile-type-swatch.pending span {
    background: linear-gradient(180deg, #f4d98f, #c9953d);
    border-color: rgba(184, 125, 32, .82);
}
.tile-type-swatch.incomplete {
    background:
        radial-gradient(circle at top left, rgba(255,230,215,.62), transparent 62%),
        linear-gradient(180deg, rgba(238, 190, 165, .68), rgba(154, 77, 52, .34));
    border-color: rgba(155, 57, 41, .54);
}
.tile-type-swatch.incomplete span {
    background: linear-gradient(180deg, #eac5a6, #bf765e);
    border-color: rgba(145, 58, 43, .82);
}

@media (max-width: 1180px) {
    .team-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .team-board-layout,
    .public-game-layout {
        grid-template-columns: 1fr;
    }
    .team-board-panel,
    .team-side-panel,
    .public-game-layout > .card:not(.public-board-card),
    .public-game-layout > .public-board-card {
        order: initial;
    }
}
@media (max-width: 680px) {
    .team-stat-grid {
        grid-template-columns: 1fr;
    }
    .claim-history-row {
        grid-template-columns: 1fr;
    }
}


/* Phase 53: entry fee payment tracking */
.fee-unpaid-notice {
    border-color: rgba(155, 57, 41, .55) !important;
    background:
        radial-gradient(circle at top left, rgba(255,230,215,.62), transparent 62%),
        linear-gradient(180deg, rgba(238, 190, 165, .5), rgba(154, 77, 52, .18)) !important;
}
.fee-unpaid-notice h2,
.fee-unpaid-notice h3 {
    color: #5e2119;
}
.fee-unpaid-notice.compact {
    padding: 12px;
    border: 1px solid rgba(155, 57, 41, .45);
    border-radius: 12px;
}
.entry-fee-admin-form {
    display: grid;
    gap: 6px;
    min-width: 220px;
}
.entry-fee-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 900;
}
.entry-fee-toggle input {
    width: auto;
    min-height: 0;
}
.entry-fee-admin-form input[name="entry_fee_payment_notes"] {
    min-height: 34px;
    padding: 6px 8px;
    font-size: .86rem;
}
.entry-fee-admin-form button {
    justify-self: start;
    min-height: 32px;
    padding: 6px 10px;
    font-size: .82rem;
}


/* Phase 54: admin games layout and dedicated fee management */
.admin-games-layout {
    grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr);
    align-items: start;
}
.admin-games-create,
.admin-games-list {
    display: grid;
    gap: 20px;
}
.fee-team-sections {
    display: grid;
    gap: 18px;
}
.fee-team-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(103, 63, 22, .22);
    border-radius: 14px;
    background: rgba(255, 246, 220, .16);
}
.fee-team-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 10px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 12px;
    background: rgba(255, 246, 220, .26);
}
.fee-team-heading h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fee-team-heading .actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.fee-team-heading form {
    margin: 0;
}
@media (max-width: 1180px) {
    .admin-games-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .fee-team-heading {
        display: grid;
    }
    .fee-team-heading .actions,
    .fee-team-heading .actions form,
    .fee-team-heading .actions button {
        width: 100%;
    }
}


/* Phase 55: user timezone, public clock, and game countdowns */
.public-clock {
    display: inline-grid;
    grid-template-columns: auto;
    justify-items: end;
    gap: 2px;
    padding: 9px 12px;
    border: 1px solid rgba(213, 162, 77, .34);
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(241,207,119,.16), transparent 62%),
        rgba(22, 12, 5, .34);
    color: #fff0c8;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.public-clock span {
    color: #e8c982;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.public-clock strong {
    color: #fff6d8;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.06rem;
    line-height: 1;
}
.public-clock small {
    color: #dcb977;
    font-size: .72rem;
    font-weight: 800;
}
.desktop-clock {
    margin: 0 0 14px auto;
}
.mobile-clock {
    padding: 6px 8px;
    min-width: 128px;
}
.mobile-clock span {
    font-size: .62rem;
}
.mobile-clock strong {
    font-size: .78rem;
}
.mobile-clock small {
    display: none;
}
.landing-clock {
    margin: 14px 0 0;
    justify-items: start;
}
.countdown-badge {
    color: #573719;
    border-color: rgba(65, 107, 142, .45);
    background: linear-gradient(180deg, rgba(219,236,252,.8), rgba(65,107,142,.2));
}
.inline-filter-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.timezone-form {
    max-width: 760px;
}
@media (max-width: 980px) {
    .desktop-clock {
        display: none;
    }
}
@media (max-width: 620px) {
    .mobile-clock {
        display: none;
    }
    .game-card-schedule div {
        grid-template-columns: 74px minmax(0, 1fr);
    }
}


/* Phase 56: public header clock alignment and My Games readability fixes */
.pending-header-clock {
    display: none !important;
}
.topbar > .public-clock {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 235px;
    justify-content: center;
    justify-items: end;
    padding: 10px 14px;
    border: 2px ridge #b47a2b;
    border-radius: 10px 18px 10px 18px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.18), transparent 22%, rgba(0,0,0,.12)),
        linear-gradient(180deg, #6b3e16, #3a210c);
    box-shadow: 0 10px 20px rgba(66,39,14,.18), inset 0 0 0 1px rgba(255,221,145,.15);
}
.topbar > .public-clock span {
    color: #e6c98f;
}
.topbar > .public-clock strong {
    color: #fff5d6;
}
.topbar > .public-clock small {
    color: #e6c98f;
}
.game-card-title-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
}
.game-card-title-copy {
    min-width: 0;
}
.game-card-title-status {
    justify-self: end;
    display: flex;
    align-items: center;
}
.game-card-title-status .badge {
    white-space: nowrap;
}
.inline-filter-form,
.inline-filter-form label,
.inline-filter-form span {
    color: #f7e6bd;
}
.inline-filter-form .entry-fee-toggle {
    color: #f7e6bd;
    background: rgba(22, 12, 5, .22);
    border: 1px solid rgba(241,207,119,.28);
    border-radius: 999px;
    padding: 7px 10px;
}
.inline-filter-form input[type="checkbox"] {
    accent-color: #d19a3a;
}
.timezone-form label,
.timezone-form .form-row label {
    color: var(--ink);
}
@media (max-width: 980px) {
    .topbar > .public-clock {
        display: none;
    }
}
@media (max-width: 620px) {
    .game-card-title-row,
    .game-card-title-row.has-logo {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .game-card-title-status {
        justify-self: start;
        grid-column: 1 / -1;
    }
    .game-card-board-size {
        justify-self: start;
    }
}


/* Phase 57: player game card layout polish */
.game-card-title-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
}
.game-card-title-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 100%;
}
.game-card-title-inline > div:first-child {
    min-width: 0;
}
.game-card-title-status {
    justify-self: start;
    align-self: start;
    margin-top: 2px;
}
.game-card-title-status .badge {
    white-space: nowrap;
}
.game-card-board-size {
    justify-self: end;
    align-self: start;
}
.game-card-footer {
    justify-content: space-between;
}
@media (max-width: 620px) {
    .game-card-title-row,
    .game-card-title-row.has-logo {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .game-card-title-inline {
        display: grid;
        gap: 7px;
    }
    .game-card-title-status {
        grid-column: auto;
        justify-self: start;
    }
    .game-card-board-size {
        justify-self: end;
    }
}


/* Phase 59: clearer upload-limit warnings */
.upload-limit-warning {
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 10px;
}
.upload-limit-warning code {
    color: #321b08;
    background: rgba(255, 246, 220, .58);
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 5px;
    padding: 1px 4px;
    font-weight: 900;
}


/* Phase 63: My Games separate Open Game and Team Board actions */
.game-card-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.game-card-button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: .82rem;
    line-height: 1.1;
}
.clean-game-card .game-card-button {
    text-decoration: none;
}
.clean-game-card .game-card-button:hover {
    text-decoration: none;
}
@media (max-width: 620px) {
    .game-card-footer {
        display: grid;
        gap: 10px;
    }
    .game-card-actions {
        justify-content: stretch;
    }
    .game-card-actions .btn {
        flex: 1 1 auto;
        text-align: center;
    }
}


/* Phase 64: searchable timezone input */
.timezone-search-input {
    width: 100%;
    min-height: 44px;
}


/* Phase 66: RuneMetrics log page cleanup */
.rm-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.rm-stat-grid .card {
    min-width: 0;
}
.rm-log-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    font-family: Georgia, "Palatino Linotype", serif;
    font-weight: 900;
    color: #4b2808;
    list-style-position: inside;
}
.rm-log-details summary span {
    font-size: 1.3rem;
}
.rm-log-details summary small {
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: .82rem;
}
.rm-log-details[open] summary {
    margin-bottom: 12px;
}
.rm-cron-command {
    margin-top: 18px;
}
.inline-action-form {
    margin: 0;
    display: inline-flex;
}
.compact-btn {
    min-height: 30px;
    padding: 6px 10px;
    font-size: .78rem;
    line-height: 1.05;
    white-space: nowrap;
}
@media (max-width: 1180px) {
    .rm-stat-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}
@media (max-width: 720px) {
    .rm-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rm-log-details summary {
        display: grid;
    }
}


/* Phase 69: public board auto-refresh control */
.auto-refresh-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(103, 63, 22, .26);
    border-radius: 999px;
    background: rgba(255, 246, 220, .52);
    color: #4b2808;
    font-size: .84rem;
    font-weight: 900;
    white-space: nowrap;
}
.auto-refresh-toggle input {
    width: auto;
    min-height: 0;
    margin: 0;
}
.auto-refresh-toggle small {
    min-width: 32px;
    color: #7b470e;
    font-weight: 900;
    text-align: right;
}
@media (max-width: 720px) {
    .auto-refresh-toggle {
        justify-content: center;
        width: 100%;
    }
}


/* Phase 70: rich-text game rules */
.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 7px 0 0;
    padding: 8px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 11px 14px 10px 13px;
    background: rgba(103, 63, 22, .06);
}
.rich-text-toolbar button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: .82rem;
    line-height: 1;
}
.rich-text-editor {
    min-height: 210px;
    margin-top: 8px;
    padding: 13px 14px;
    border: 2px solid rgba(103, 63, 22, .36);
    border-radius: 12px 16px 12px 16px;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,230,.52), transparent 32%),
        linear-gradient(180deg, rgba(255,246,220,.88), rgba(232,201,143,.78));
    color: var(--ink);
    outline: none;
    overflow: auto;
}
.rich-text-editor:focus {
    border-color: rgba(177,112,30,.72);
    box-shadow: 0 0 0 3px rgba(177,112,30,.14);
}
.rules-content {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.55;
}
.rules-content h3,
.rules-content h4,
.rich-text-editor h3,
.rich-text-editor h4 {
    margin: 12px 0 7px;
    color: #4b2808;
}
.rules-content p,
.rich-text-editor p {
    margin: 0 0 9px;
}
.rules-content ul,
.rules-content ol,
.rich-text-editor ul,
.rich-text-editor ol {
    margin: 8px 0 12px 1.35rem;
    padding-left: 1rem;
}
.rules-content li,
.rich-text-editor li {
    margin: 4px 0;
}
.rules-content blockquote,
.rich-text-editor blockquote {
    margin: 10px 0;
    padding: 8px 12px;
    border-left: 4px solid rgba(123, 71, 14, .5);
    background: rgba(255, 246, 220, .45);
}
.public-game-info-layout {
    display: grid;
    grid-template-columns: minmax(230px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.public-game-info-stack {
    display: grid;
    gap: 16px;
}
.public-game-rules-card {
    min-height: 100%;
}
@media (max-width: 900px) {
    .public-game-info-layout {
        grid-template-columns: 1fr;
    }
}


/* Phase 71: public game tile spacing + submit access polish */
.public-game-info-layout {
    gap: 22px;
    margin-bottom: 28px;
    align-items: start;
}
.public-game-info-stack {
    gap: 22px;
}
.public-game-rules-card {
    align-self: stretch;
}
@media (max-width: 900px) {
    .public-game-info-layout {
        margin-bottom: 22px;
    }
}


/* Phase 74: admin cleanup, top user card, and game section tabs */
.admin-ui .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 2px ridge #8e5b24;
    background:
        linear-gradient(180deg, rgba(55, 31, 12, .98), rgba(20, 10, 5, .98)),
        #211109;
    box-shadow: 0 10px 22px rgba(0,0,0,.34);
}
.admin-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-left: auto;
}
.topbar-user-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: min(320px, 40vw);
    padding: 6px 10px;
    border: 1px solid rgba(241, 207, 119, .28);
    border-radius: 999px;
    background: rgba(12, 7, 3, .28);
    color: #fff0c8;
    box-shadow: inset 0 0 14px rgba(0,0,0,.18);
}
.topbar-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(241,207,119,.58);
    background: rgba(255,246,220,.18);
}
.topbar-user-avatar.fallback {
    display: grid;
    place-items: center;
    color: #fff0c8;
    font-family: Georgia, "Palatino Linotype", serif;
    font-weight: 900;
    background: linear-gradient(180deg, #8e5b24, #3a2110);
}
.topbar-user-copy {
    min-width: 0;
    display: grid;
    line-height: 1.08;
}
.topbar-user-copy strong,
.topbar-user-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-copy strong {
    color: #fff0c8;
    font-size: .9rem;
}
.topbar-user-copy small {
    color: rgba(255,240,200,.72);
    font-size: .76rem;
}
.admin-ui .admin-topbar .mobile-menu-button {
    display: none;
}
.nav a.nav-return {
    color: #e6c989;
    border-color: rgba(213,162,77,.24);
    background:
        linear-gradient(180deg, rgba(80,47,18,.22), rgba(24,12,5,.22)),
        rgba(255,255,255,.012);
}
.nav a.nav-return:hover {
    color: #fff0c8;
    border-color: rgba(241,207,119,.44);
    background:
        linear-gradient(180deg, rgba(138,83,30,.25), rgba(34,17,6,.3)),
        rgba(255,255,255,.018);
}
.game-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 14px 18px 14px 18px;
    background: rgba(255, 246, 220, .42);
}
.game-admin-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(103, 63, 22, .24);
    border-radius: 999px;
    background: rgba(255, 240, 200, .36);
    color: #5a350f;
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}
.game-admin-tabs a:hover,
.game-admin-tabs a.active {
    color: #2a170a;
    border-color: rgba(123, 71, 14, .55);
    background: rgba(209, 154, 58, .34);
    text-decoration: none;
}
.game-list-actions {
    min-width: 260px;
}
@media (max-width: 980px) {
    .admin-ui .admin-topbar .mobile-menu-button {
        display: inline-flex;
    }
    .topbar-user-card {
        max-width: 46vw;
    }
}
@media (max-width: 560px) {
    .topbar-user-copy {
        display: none;
    }
    .topbar-user-card {
        padding: 5px;
    }
    .game-admin-tabs a {
        flex: 1 1 44%;
        justify-content: center;
    }
}


/* Phase 75: admin header branding and logout placement */
.admin-header-brand {
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.admin-header-brand-copy {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.05;
}
.admin-header-brand-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f1cf77;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 900;
    letter-spacing: .045em;
    text-shadow: 0 2px 0 #000;
}
.admin-header-brand-copy small {
    color: #dfbf7e;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.topbar-logout {
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
}
.admin-ui .sidebar .nav {
    margin-top: 0;
}
@media (max-width: 720px) {
    .admin-header-brand-copy small {
        display: none;
    }
    .admin-header-brand-copy strong {
        font-size: 1.15rem;
    }
    .topbar-logout {
        display: none;
    }
}
@media (max-width: 560px) {
    .admin-header-brand-copy strong {
        max-width: 42vw;
    }
}


/* Phase 76: admin header logo sizing fix */
.admin-ui .admin-header-brand img,
.admin-ui .mobile-brand.admin-header-brand img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    object-fit: contain;
    display: block;
    padding: 3px;
    border-radius: 12px;
}
.admin-ui .admin-header-brand {
    align-items: center;
    width: auto;
    max-width: min(720px, 55vw);
}
@media (max-width: 720px) {
    .admin-ui .admin-header-brand img,
    .admin-ui .mobile-brand.admin-header-brand img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
    }
}


/* Phase 77: shared admin/player header branding and create-page cleanup */
.admin-ui .admin-topbar,
.account-ui .account-topbar {
    position: sticky;
    top: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 2px ridge #8e5b24;
    background:
        linear-gradient(180deg, rgba(55, 31, 12, .98), rgba(20, 10, 5, .98)),
        #211109;
    box-shadow: 0 10px 22px rgba(0,0,0,.34);
}
.admin-header-brand,
.mobile-brand.admin-header-brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    width: auto;
    max-width: min(760px, 54vw);
    min-width: 0;
    text-decoration: none;
}
.admin-ui .admin-header-brand img,
.account-ui .admin-header-brand img,
.mobile-brand.admin-header-brand img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    object-fit: contain;
    display: block;
    padding: 3px;
    border-radius: 12px;
}
.admin-header-brand-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 2px;
    min-width: 0;
    line-height: 1.05;
    text-align: left;
}
.admin-header-brand-copy strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f1cf77;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 900;
    letter-spacing: .045em;
    text-shadow: 0 2px 0 #000;
}
.admin-header-brand-copy small {
    color: #dfbf7e;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.account-ui .admin-topbar-actions,
.admin-ui .admin-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-left: auto;
}
.topbar-clock {
    min-height: 38px;
    padding: 5px 10px;
    white-space: nowrap;
}
.topbar-clock span,
.topbar-clock strong {
    display: block;
    line-height: 1.05;
}
.account-ui .sidebar .nav {
    margin-top: 0;
}
@media (max-width: 980px) {
    .account-ui .account-topbar .mobile-menu-button,
    .admin-ui .admin-topbar .mobile-menu-button {
        display: inline-flex;
    }
}
@media (max-width: 720px) {
    .admin-header-brand-copy small,
    .topbar-clock,
    .topbar-logout {
        display: none;
    }
    .admin-header-brand-copy strong {
        font-size: 1.15rem;
    }
    .admin-ui .admin-header-brand img,
    .account-ui .admin-header-brand img,
    .mobile-brand.admin-header-brand img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
    }
}


/* Phase 78: player dashboard and game heading cleanup */
.account-ui .mobile-menu-button {
    display: none !important;
}
.topbar-profile {
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
}
.dashboard-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dashboard-team-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.dashboard-team-row small {
    display: block;
    color: var(--ink-soft);
    font-weight: 700;
}
.game-heading-actions {
    align-items: stretch;
}
.heading-admin-controls {
    display: grid;
    gap: 7px;
    min-width: min(100%, 320px);
    padding: 9px 10px;
    border: 1px solid rgba(241,207,119,.32);
    border-radius: 12px 16px 12px 16px;
    background: rgba(18, 9, 4, .24);
    box-shadow: inset 0 0 12px rgba(0,0,0,.16);
}
.heading-admin-controls-title {
    color: #f1cf77;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.heading-admin-controls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
@media (max-width: 900px) {
    .game-heading-actions {
        width: 100%;
    }
    .heading-admin-controls {
        width: 100%;
    }
}
@media (max-width: 720px) {
    .topbar-profile {
        display: inline-flex;
    }
}


/* Phase 79: keep public game admin controls beside main controls */
.game-heading-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.heading-main-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.heading-admin-controls {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
}
.heading-admin-controls-title {
    flex: 0 0 auto;
    white-space: nowrap;
}
.heading-admin-controls-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
@media (max-width: 900px) {
    .game-heading-actions {
        justify-content: flex-start;
    }
    .heading-main-controls,
    .heading-admin-controls {
        width: auto;
    }
}
@media (max-width: 640px) {
    .heading-admin-controls {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }
    .heading-main-controls {
        width: 100%;
    }
}

/* Phase 81: admin topbar shortcut and Discord test block polish */
.topbar-dashboard {
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
}
.discord-test-card {
    margin-top: 0;
}
@media (max-width: 720px) {
    .topbar-dashboard {
        display: none;
    }
}

/* Phase 82: compact admin sidebar menu spacing */
.admin-ui .sidebar {
    padding: 16px 14px;
}
.admin-ui .sidebar .nav {
    gap: 7px;
    margin-top: 0;
}
.admin-ui .sidebar .nav-section {
    gap: 3px;
    padding: 7px 7px 6px;
    border-radius: 11px;
}
.admin-ui .sidebar .nav-section-title {
    margin: -1px 0 1px;
    font-size: .64rem;
    letter-spacing: .12em;
    line-height: 1;
}
.admin-ui .sidebar .nav a {
    min-height: 32px;
    padding: 5px 8px 5px 22px;
    border-radius: 8px 11px 8px 11px;
    font-size: .88rem;
    line-height: 1.1;
}
.admin-ui .sidebar .nav a::before {
    left: 8px;
    font-size: .92rem;
}
@media (max-width: 980px) {
    .admin-ui .sidebar {
        padding: 14px 12px;
    }
    .admin-ui .sidebar .nav {
        gap: 6px;
    }
    .admin-ui .sidebar .nav-section {
        padding: 7px 7px 6px;
    }
    .admin-ui .sidebar .nav a {
        min-height: 32px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* Phase 83: stop admin sidebar menu rows stretching to fill height */
.admin-ui .sidebar {
    justify-content: flex-start;
}
.admin-ui .sidebar .nav {
    flex: 0 0 auto;
    align-content: start;
    align-items: stretch;
    grid-auto-rows: max-content;
}
.admin-ui .sidebar .nav-section {
    align-content: start;
    align-items: stretch;
}
.admin-ui .sidebar .nav a {
    flex: 0 0 auto;
}
.admin-ui @media (min-width: 981px) {
    .admin-ui .sidebar {
        min-height: 0;
        height: auto;
        max-height: calc(100vh - 44px);
        overflow-y: auto;
    }
}


/* Phase 84: standalone footer bar for admin and player screens */
body.rs3-tome-ui.admin-ui,
body.rs3-tome-ui.account-ui {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-ui .shell,
.account-ui .shell {
    flex: 1 0 auto;
    min-height: 0;
}
.app-footer.site-footer {
    flex: 0 0 auto;
    clear: both;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(260px, 2fr) minmax(150px, 1fr);
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 12px 22px;
    color: #f7e6bd;
    border-top: 2px ridge #8e5b24;
    background:
        linear-gradient(180deg, rgba(55, 31, 12, .98), rgba(20, 10, 5, .98)),
        #211109;
    box-shadow: 0 -10px 22px rgba(0,0,0,.32);
}
.site-footer-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}
.site-footer-centre {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    text-align: center;
    color: #f7e6bd;
    font-size: .86rem;
    line-height: 1.25;
}
.site-footer-centre strong {
    color: #f1cf77;
}
.site-footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}
.site-footer-sidebar-logo,
.site-footer-hit-logo,
.site-footer-runescape-logo {
    display: block;
    width: auto;
    object-fit: contain;
}
.site-footer-sidebar-logo,
.site-footer-hit-logo {
    max-width: 170px;
    max-height: 54px;
}
.site-footer-runescape-logo {
    max-width: 170px;
    max-height: 54px;
    opacity: .92;
}
.app-footer.site-footer .app-footer-disclaimer {
    max-width: 760px;
    color: rgba(247,230,189,.78);
    font-size: .72rem;
}
@media (max-width: 820px) {
    .app-footer.site-footer {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 14px 16px;
    }
    .site-footer-left,
    .site-footer-right {
        justify-content: center;
    }
    .site-footer-sidebar-logo,
    .site-footer-hit-logo,
    .site-footer-runescape-logo {
        max-height: 46px;
    }
}


/* Phase 85: player footer visibility layout fix */
.account-ui .shell {
    min-height: 0 !important;
    flex: 1 1 auto;
    align-content: start;
}
.account-ui .main {
    min-height: 0 !important;
}
.account-ui .sidebar {
    min-height: 0;
}
@media (min-width: 981px) {
    .account-ui .shell {
        min-height: 0 !important;
    }
    .account-ui .sidebar {
        min-height: 0;
        height: auto;
        max-height: calc(100vh - 138px);
        overflow-y: auto;
    }
}
@media (max-width: 980px) {
    .account-ui .shell {
        min-height: 0 !important;
    }
}


/* Phase 86: align admin/player menu and content heights between header and footer */
:root {
    --app-shell-header-height: 70px;
    --app-shell-footer-height: 82px;
    --app-shell-vertical-padding: 44px;
    --app-shell-available-height: calc(100vh - var(--app-shell-header-height) - var(--app-shell-footer-height));
    --app-panel-available-height: calc(var(--app-shell-available-height) - var(--app-shell-vertical-padding));
}
body.rs3-tome-ui.admin-ui,
body.rs3-tome-ui.account-ui {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-ui .admin-topbar,
.account-ui .account-topbar,
.app-footer.site-footer {
    flex: 0 0 auto;
}
.admin-ui .shell,
.account-ui .shell {
    flex: 1 0 auto;
    min-height: var(--app-shell-available-height) !important;
    align-items: stretch;
}
.admin-ui .main,
.account-ui .main,
.admin-ui .sidebar,
.account-ui .sidebar {
    min-height: max(360px, var(--app-panel-available-height)) !important;
}
.admin-ui .main,
.account-ui .main {
    align-self: stretch;
}
.admin-ui .sidebar,
.account-ui .sidebar {
    align-self: stretch;
}
@media (min-width: 981px) {
    .admin-ui .sidebar,
    .account-ui .sidebar {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible;
    }
}
@media (max-width: 980px) {
    :root {
        --app-shell-header-height: 60px;
        --app-shell-footer-height: 150px;
        --app-shell-vertical-padding: 24px;
    }
    .admin-ui .shell,
    .account-ui .shell {
        min-height: var(--app-shell-available-height) !important;
        display: block;
    }
    .admin-ui .main,
    .account-ui .main {
        min-height: max(320px, var(--app-panel-available-height)) !important;
    }
    .admin-ui .sidebar,
    .account-ui .sidebar {
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto;
    }
}


/* Phase 87: RuneScape character avatars for RSN contexts */
.rsn-avatar-row {
    display: flex;
    align-items: center;
    gap: 9px;
}
.rsn-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(103, 63, 22, .35);
    background: rgba(255, 246, 220, .55);
    box-shadow: inset 0 0 8px rgba(91,53,15,.16), 0 2px 5px rgba(59,36,14,.15);
}
.dashboard-team-row .rsn-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}


/* Phase 88: viewport-fitted bingo boards */
:root {
    --runtime-header-height: var(--app-shell-header-height, 70px);
    --runtime-footer-height: var(--app-shell-footer-height, 82px);
    --board-fit-reserved-space: 156px;
    --board-fit-max-size: max(340px, calc(100svh - var(--runtime-header-height) - var(--runtime-footer-height) - var(--board-fit-reserved-space)));
}
.viewport-fit-board {
    width: min(100%, var(--board-fit-max-size));
    max-width: min(100%, var(--board-fit-max-size));
    margin-left: auto;
    margin-right: auto;
}
.bingo-board-labelled.viewport-fit-board {
    max-height: var(--board-fit-max-size);
}
.bingo-board-labelled.viewport-fit-board > .bingo-board {
    width: 100%;
}
.viewport-fit-builder-board {
    aspect-ratio: 1 / 1;
    max-height: var(--board-fit-max-size);
}
.viewport-fit-builder-board .bingo-cell {
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    padding: clamp(5px, 1.1vw, 10px);
    gap: clamp(2px, .55vw, 5px);
}
.viewport-fit-builder-board .bingo-cell .cell-pos {
    font-size: clamp(.58rem, .78vw, .72rem);
}
.viewport-fit-builder-board .bingo-cell .bingo-cell-image {
    width: clamp(26px, 14%, 42px);
    height: clamp(26px, 14%, 42px);
}
.viewport-fit-builder-board .bingo-cell strong {
    font-size: clamp(.68rem, .82vw, .9rem);
    line-height: 1.08;
}
.viewport-fit-builder-board .bingo-cell small {
    font-size: clamp(.56rem, .7vw, .74rem);
    line-height: 1.05;
}
.viewport-fit-public-game-board.bingo-board-labelled.compact-labelled,
.viewport-fit-team-board.bingo-board-labelled {
    grid-template-rows: auto minmax(0, 1fr);
}
.viewport-fit-public-game-board .board-col-labels span,
.viewport-fit-team-board .board-col-labels span {
    min-height: clamp(22px, 3.5vh, 34px);
    padding-top: 3px;
    padding-bottom: 3px;
}
.viewport-fit-public-game-board .board-row-labels span,
.viewport-fit-team-board .board-row-labels span {
    padding-left: 3px;
    padding-right: 3px;
}
.viewport-fit-public-game-board .bingo-cell,
.viewport-fit-team-board .bingo-cell {
    padding: clamp(5px, .8vw, 10px);
    gap: clamp(2px, .55vw, 5px);
}
.viewport-fit-public-game-board .bingo-cell strong,
.viewport-fit-team-board .bingo-cell strong {
    font-size: clamp(.62rem, .82vw, .9rem);
    line-height: 1.06;
}
.viewport-fit-public-game-board .bingo-cell small,
.viewport-fit-team-board .bingo-cell small {
    font-size: clamp(.54rem, .68vw, .74rem);
    line-height: 1.05;
}
.viewport-fit-public-game-board .bingo-cell .bingo-cell-image,
.viewport-fit-team-board .bingo-cell .bingo-cell-image {
    width: clamp(24px, 16%, 42px);
    height: clamp(24px, 16%, 42px);
}
@media (max-width: 1080px) {
    :root {
        --board-fit-reserved-space: 184px;
    }
}
@media (max-width: 760px) {
    .viewport-fit-board {
        width: 100%;
        max-width: 100%;
        max-height: none;
    }
}


/* Phase 89: fitted board tile and axis-label sizing polish */
:root {
    --viewport-board-gap: clamp(3px, .55vw, 6px);
    --viewport-board-padding: clamp(3px, .55vw, 6px);
    --viewport-board-label-size: clamp(22px, 3.2vh, 30px);
    --viewport-board-label-column: clamp(42px, 5.2vw, 58px);
}
.viewport-fit-public-game-board.bingo-board-labelled.compact-labelled,
.viewport-fit-team-board.bingo-board-labelled {
    grid-template-columns: var(--viewport-board-label-column) minmax(0, 1fr);
    gap: var(--viewport-board-gap);
}
.viewport-fit-public-game-board .board-col-labels,
.viewport-fit-public-game-board .board-row-labels,
.viewport-fit-public-game-board > .bingo-board,
.viewport-fit-team-board .board-col-labels,
.viewport-fit-team-board .board-row-labels,
.viewport-fit-team-board > .bingo-board {
    gap: var(--viewport-board-gap) !important;
}
.viewport-fit-public-game-board > .bingo-board,
.viewport-fit-team-board > .bingo-board,
.viewport-fit-builder-board {
    padding: var(--viewport-board-padding) !important;
    border-width: 1px;
    border-radius: 10px;
}
.viewport-fit-public-game-board .board-col-labels span,
.viewport-fit-public-game-board .board-row-labels span,
.viewport-fit-team-board .board-col-labels span,
.viewport-fit-team-board .board-row-labels span {
    min-height: var(--viewport-board-label-size) !important;
    height: var(--viewport-board-label-size) !important;
    max-height: var(--viewport-board-label-size) !important;
    padding: 2px 4px !important;
    align-self: center;
    justify-self: stretch;
    font-size: clamp(.58rem, .72vw, .72rem);
    line-height: 1;
}
.viewport-fit-public-game-board .board-row-labels span,
.viewport-fit-team-board .board-row-labels span {
    width: 100%;
}
.viewport-fit-public-game-board .bingo-cell,
.viewport-fit-team-board .bingo-cell,
.viewport-fit-builder-board .bingo-cell {
    border-width: 1px;
    border-radius: 7px 9px 7px 9px;
    padding: clamp(3px, .55vw, 7px) !important;
    gap: clamp(1px, .35vw, 4px) !important;
    box-shadow: inset 0 0 10px rgba(91,53,15,.08), 0 2px 5px rgba(68,40,12,.12);
}
.viewport-fit-public-game-board .bingo-cell .bingo-cell-image,
.viewport-fit-team-board .bingo-cell .bingo-cell-image,
.viewport-fit-builder-board .bingo-cell .bingo-cell-image,
.viewport-fit-builder-board .bingo-cell img {
    width: clamp(22px, 13%, 36px) !important;
    height: clamp(22px, 13%, 36px) !important;
    border-radius: 5px;
}
.viewport-fit-public-game-board .bingo-cell strong,
.viewport-fit-team-board .bingo-cell strong,
.viewport-fit-builder-board .bingo-cell strong {
    font-size: clamp(.58rem, .72vw, .82rem) !important;
    line-height: 1.02 !important;
}
.viewport-fit-public-game-board .bingo-cell small,
.viewport-fit-team-board .bingo-cell small,
.viewport-fit-builder-board .bingo-cell small {
    font-size: clamp(.5rem, .62vw, .68rem) !important;
    line-height: 1.02 !important;
}
.viewport-fit-public-game-board .bingo-cell.completed::after,
.viewport-fit-team-board .bingo-cell.completed::after,
.viewport-fit-public-game-board .bingo-cell.pending::after,
.viewport-fit-team-board .bingo-cell.pending::after {
    right: 4px;
    bottom: 4px;
    padding: 2px 5px;
    font-size: clamp(.48rem, .58vw, .62rem);
}
@media (max-width: 760px) {
    .viewport-fit-public-game-board .board-col-labels span,
    .viewport-fit-public-game-board .board-row-labels span,
    .viewport-fit-team-board .board-col-labels span,
    .viewport-fit-team-board .board-row-labels span {
        height: auto !important;
        max-height: none !important;
    }
}


/* Phase 90: team board card fit and reciprocal axis labels */
@media (min-width: 761px) {
    .team-board-layout {
        grid-template-columns: minmax(260px, 1fr) max-content !important;
        align-items: stretch !important;
        justify-content: start;
    }

    .team-side-panel {
        align-self: stretch;
        height: 100%;
        grid-auto-rows: minmax(0, 1fr);
    }

    .team-side-panel > .card {
        min-height: 0;
        height: 100%;
    }

    .team-board-panel {
        justify-items: start;
        align-self: stretch;
        width: max-content;
        max-width: 100%;
    }

    .team-board-card {
        width: max-content;
        max-width: 100%;
        justify-self: start;
        align-self: stretch;
        display: grid;
        grid-template-rows: auto minmax(0, auto);
        align-content: start;
    }
}

:root {
    --viewport-board-axis-thickness: clamp(26px, 3.7vh, 34px);
    --viewport-board-label-column: var(--viewport-board-axis-thickness);
}

.viewport-fit-public-game-board.bingo-board-labelled.compact-labelled,
.viewport-fit-team-board.bingo-board-labelled {
    grid-template-columns: var(--viewport-board-axis-thickness) minmax(0, 1fr) !important;
    grid-template-rows: var(--viewport-board-axis-thickness) minmax(0, 1fr) !important;
}

.viewport-fit-public-game-board .board-axis-corner,
.viewport-fit-team-board .board-axis-corner {
    width: var(--viewport-board-axis-thickness);
    height: var(--viewport-board-axis-thickness);
}

.viewport-fit-public-game-board .board-col-labels,
.viewport-fit-team-board .board-col-labels {
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr)) !important;
    grid-auto-rows: var(--viewport-board-axis-thickness);
    height: var(--viewport-board-axis-thickness);
}

.viewport-fit-public-game-board .board-row-labels,
.viewport-fit-team-board .board-row-labels {
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr)) !important;
    width: var(--viewport-board-axis-thickness);
    height: 100%;
}

.viewport-fit-public-game-board .board-col-labels span,
.viewport-fit-team-board .board-col-labels span {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--viewport-board-axis-thickness) !important;
    min-height: var(--viewport-board-axis-thickness) !important;
    max-height: var(--viewport-board-axis-thickness) !important;
}

.viewport-fit-public-game-board .board-row-labels span,
.viewport-fit-team-board .board-row-labels span {
    width: var(--viewport-board-axis-thickness) !important;
    min-width: var(--viewport-board-axis-thickness) !important;
    max-width: var(--viewport-board-axis-thickness) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

.viewport-fit-public-game-board > .bingo-board,
.viewport-fit-team-board > .bingo-board {
    aspect-ratio: 1 / 1;
    align-self: stretch;
}

.viewport-fit-public-game-board .bingo-cell,
.viewport-fit-team-board .bingo-cell {
    min-width: 0;
    min-height: 0 !important;
}

@media (max-width: 760px) {
    .team-board-card,
    .team-board-panel {
        width: 100%;
        max-width: 100%;
    }
}


/* Phase 91: make the team board card fill available viewport height */
@media (min-width: 761px) {
    :root {
        --team-board-card-chrome: 92px;
        --team-board-card-height: max(520px, calc(100svh - var(--runtime-header-height, 70px) - var(--runtime-footer-height, 82px) - 44px));
        --team-board-grid-size: max(420px, calc(var(--team-board-card-height) - var(--team-board-card-chrome)));
    }

    .team-board-layout {
        grid-template-columns: minmax(260px, 1fr) auto !important;
        align-items: stretch !important;
    }

    .team-board-panel {
        width: auto;
        max-width: 100%;
        align-self: stretch;
    }

    .team-board-card {
        height: var(--team-board-card-height) !important;
        min-height: var(--team-board-card-height) !important;
        max-height: var(--team-board-card-height) !important;
        width: auto;
        max-width: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, var(--team-board-grid-size));
        align-content: start;
        overflow: visible;
    }

    .team-board-card > h2 {
        margin-bottom: 10px;
    }

    .team-board-card > .viewport-fit-team-board {
        height: var(--team-board-grid-size) !important;
        width: var(--team-board-grid-size) !important;
        max-height: var(--team-board-grid-size) !important;
        max-width: min(100%, var(--team-board-grid-size)) !important;
        margin-left: 0;
        margin-right: 0;
    }

    .team-board-card .bingo-board.public.square-board {
        width: 100%;
        height: 100%;
    }

    .team-side-panel {
        height: var(--team-board-card-height) !important;
        min-height: var(--team-board-card-height) !important;
        max-height: var(--team-board-card-height) !important;
        align-self: stretch;
        overflow-y: auto;
        padding-right: 2px;
    }

    .team-side-panel > .card {
        height: auto;
        min-height: 0;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    :root {
        --team-board-card-height: max(500px, calc(100svh - var(--runtime-header-height, 70px) - var(--runtime-footer-height, 82px) - 36px));
        --team-board-card-chrome: 86px;
    }

    .team-board-layout {
        grid-template-columns: minmax(220px, .72fr) auto !important;
    }
}

@media (max-width: 760px) {
    .team-board-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .team-board-card > .viewport-fit-team-board {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Phase 92: compact roster card beside full-height team board */
@media (min-width: 761px) {
    .team-side-panel {
        grid-template-rows: auto minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        align-content: stretch;
    }

    .team-side-panel > .card:first-child {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start;
    }

    .team-side-panel > .card:not(:first-child) {
        min-height: 0;
        align-self: stretch;
        overflow-y: auto;
    }

    .team-roster-chatheads {
        align-content: start;
    }
}


/* Phase 93: align team board Tile Types legend with board width */
@media (min-width: 761px) {
    .team-board-panel {
        width: max-content;
    }

    .team-board-card,
    .team-board-legend-card {
        width: var(--team-board-grid-size) !important;
        max-width: var(--team-board-grid-size) !important;
        justify-self: start;
    }

    .team-board-legend-card {
        height: auto !important;
        min-height: 0 !important;
    }

    .team-board-legend-card .tile-type-legend {
        width: 100%;
    }
}


/* Phase 94: keep fitted team board inside its card */
@media (min-width: 761px) {
    :root {
        --team-board-card-padding-x: 44px;
        --team-board-card-outer-width: calc(var(--team-board-grid-size) + var(--team-board-card-padding-x));
    }

    .team-board-card,
    .team-board-legend-card {
        width: var(--team-board-card-outer-width) !important;
        max-width: min(100%, var(--team-board-card-outer-width)) !important;
        overflow: hidden;
    }

    .team-board-card > .viewport-fit-team-board {
        width: var(--team-board-grid-size) !important;
        max-width: 100% !important;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .team-board-card .bingo-board-labelled {
        box-sizing: border-box;
    }

    .team-board-card .board-col-labels,
    .team-board-card .board-row-labels,
    .team-board-card .bingo-board {
        min-width: 0;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    :root {
        --team-board-card-padding-x: 36px;
    }
}


/* Phase 95: single mobile hamburger dropdown for header + side navigation */
.mobile-menu-actions {
    display: none;
}

@media (max-width: 980px) {
    .admin-ui .admin-topbar,
    .account-ui .account-topbar {
        position: sticky;
        top: 0;
        z-index: 5400;
    }

    .admin-ui .admin-topbar-actions > :not(.mobile-menu-button),
    .account-ui .admin-topbar-actions > :not(.mobile-menu-button) {
        display: none !important;
    }

    .admin-ui .mobile-menu-button,
    .account-ui .mobile-menu-button,
    .account-ui .account-topbar .mobile-menu-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .admin-ui .sidebar,
    .account-ui .sidebar {
        position: fixed !important;
        z-index: 5350;
        top: calc(var(--runtime-header-height, 60px) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100svh - var(--runtime-header-height, 60px) - 24px) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px !important;
        border-radius: 16px 18px 16px 18px !important;
        transform: translateY(-10px) scale(.985) !important;
        transform-origin: top center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        box-shadow: 0 18px 42px rgba(0,0,0,.52) !important;
    }

    body.mobile-menu-open .admin-ui .sidebar,
    body.mobile-menu-open .account-ui .sidebar,
    body.mobile-menu-open.admin-ui .sidebar,
    body.mobile-menu-open.account-ui .sidebar {
        transform: translateY(0) scale(1) !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu-backdrop {
        z-index: 5300 !important;
        top: var(--runtime-header-height, 60px) !important;
        background: rgba(0,0,0,.38) !important;
        backdrop-filter: blur(2px);
    }

    .admin-ui .sidebar .nav,
    .account-ui .sidebar .nav {
        margin-top: 0 !important;
        gap: 8px;
    }

    .mobile-menu-actions {
        display: grid !important;
        gap: 8px !important;
    }

    .mobile-menu-user {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 8px 9px;
        border: 1px solid rgba(241,207,119,.24);
        border-radius: 11px;
        background: rgba(12, 7, 3, .22);
        color: #fff0c8;
    }

    .mobile-menu-user strong,
    .mobile-menu-user small {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-menu-user small {
        color: rgba(255,240,200,.7);
        font-weight: 800;
    }

    .mobile-menu-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(241,207,119,.54);
        background: rgba(255,246,220,.18);
    }

    .mobile-menu-avatar.fallback {
        display: grid;
        place-items: center;
        color: #fff0c8;
        font-weight: 900;
        background: linear-gradient(180deg, #8e5b24, #3a2110);
    }

    .admin-ui .shell,
    .account-ui .shell {
        display: block !important;
        padding: 12px !important;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 560px) {
    .admin-ui .sidebar,
    .account-ui .sidebar {
        left: 8px !important;
        right: 8px !important;
        max-height: calc(100svh - var(--runtime-header-height, 60px) - 18px) !important;
    }
}


/* Phase 96: board builder tile centring and custom/free-space tile type polish */
.board-preview-card .bingo-cell,
.viewport-fit-builder-board .bingo-cell {
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}
.board-preview-card .bingo-cell .cell-pos,
.viewport-fit-builder-board .bingo-cell .cell-pos {
    align-self: center;
    margin: 0;
}
.board-preview-card .bingo-cell .bingo-cell-image,
.viewport-fit-builder-board .bingo-cell .bingo-cell-image,
.board-preview-card .bingo-cell img,
.viewport-fit-builder-board .bingo-cell img {
    margin-left: auto;
    margin-right: auto;
}
.board-preview-card .bingo-cell strong,
.board-preview-card .bingo-cell small,
.viewport-fit-builder-board .bingo-cell strong,
.viewport-fit-builder-board .bingo-cell small {
    width: 100%;
    text-align: center;
}

/* Phase 97: Treasury integration UI polish */
.nested-card {
    margin: 14px 0;
    padding: 14px;
    background: rgba(255, 246, 220, .24);
}
.entry-fee-admin-form.payout-admin-form {
    margin-top: 8px;
    align-items: end;
}
.treasury-status-line {
    display: grid;
    gap: 3px;
    margin-top: 7px;
}
.bad-text {
    color: #8e2f1f;
    font-weight: 900;
}


/* Phase 98: winnings payout page polish */
.winnings-payout-grid .claim-row {
    align-items: start;
}
.winnings-payout-grid .payout-admin-form {
    margin-top: 10px;
}
.warning-card {
    border-color: rgba(191, 139, 51, .55);
    background:
        radial-gradient(circle at top left, rgba(255, 236, 166, .5), transparent 58%),
        linear-gradient(180deg, #f4dfab, #dfbd72);
}


/* Phase 100: cleaner entry fee summaries and team/player owed amounts */
.fee-team-summary {
    min-width: 0;
    display: grid;
    gap: 8px;
}
.fee-team-money-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fee-team-money-row span {
    display: grid;
    gap: 2px;
    min-width: 112px;
    padding: 7px 9px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 10px;
    background: rgba(255, 246, 220, .32);
}
.fee-team-money-row strong {
    color: #2d1909;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: .95rem;
    line-height: 1.05;
}
.fee-team-money-row small {
    color: #6a4c25;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}
.entry-fee-table th:nth-child(2),
.entry-fee-table td:nth-child(2) {
    width: 130px;
}
.entry-fee-table th:nth-child(4),
.entry-fee-table td:nth-child(4) {
    width: 170px;
}
.entry-fee-table th:nth-child(5),
.entry-fee-table td:nth-child(5) {
    width: min(340px, 30vw);
}
.entry-fee-table td {
    vertical-align: top;
}
.entry-fee-table .entry-fee-admin-form {
    max-width: 320px;
}
.entry-fee-table .entry-fee-admin-form select,
.fee-team-heading select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: .86rem;
}
.fee-team-heading .actions form {
    display: grid;
    gap: 6px;
    justify-items: end;
}
@media (max-width: 980px) {
    .entry-fee-table,
    .entry-fee-table thead,
    .entry-fee-table tbody,
    .entry-fee-table tr,
    .entry-fee-table th,
    .entry-fee-table td {
        display: block;
        width: 100% !important;
    }
    .entry-fee-table thead {
        display: none;
    }
    .entry-fee-table tr {
        margin-bottom: 12px;
        padding: 10px;
        border: 1px solid rgba(103, 63, 22, .18);
        border-radius: 12px;
        background: rgba(255, 246, 220, .2);
    }
    .entry-fee-table td {
        padding: 6px 0;
    }
    .entry-fee-table .entry-fee-admin-form {
        max-width: none;
    }
    .fee-team-heading .actions,
    .fee-team-heading .actions form {
        justify-items: stretch;
    }
}


/* Phase 101: team-grouped entry-fee payment grid */
.entry-fee-payment-card {
    display: grid;
    gap: 18px;
}
.entry-fee-payment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.entry-fee-payment-heading h2 {
    margin-bottom: 4px;
}
.entry-fee-show-paid-toggle,
.entry-fee-team-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-weight: 900;
}
.entry-fee-show-paid-toggle input,
.entry-fee-team-check input,
.entry-fee-player-card input[type="checkbox"] {
    width: auto;
    min-height: 0;
}
.entry-fee-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}
.entry-fee-team-card {
    display: grid;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(103, 63, 22, .22);
    border-radius: 15px;
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.34), transparent 55%),
        rgba(255, 246, 220, .16);
}
.entry-fee-team-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 12px;
    background: rgba(255, 246, 220, .28);
}
.entry-fee-team-check > span {
    display: grid;
    gap: 3px;
}
.entry-fee-team-check strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.entry-fee-team-check small,
.entry-fee-team-total small,
.entry-fee-player-card small,
.entry-fee-selected-summary small {
    color: #6a4c25;
    font-weight: 850;
}
.entry-fee-team-total {
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 128px;
}
.entry-fee-team-total strong {
    color: #2d1909;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: 1.02rem;
}
.entry-fee-team-money-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.entry-fee-team-money-row span {
    display: grid;
    gap: 2px;
    min-width: 112px;
    padding: 7px 9px;
    border: 1px solid rgba(103, 63, 22, .18);
    border-radius: 10px;
    background: rgba(255, 246, 220, .28);
}
.entry-fee-team-money-row strong {
    color: #2d1909;
    font-family: Georgia, "Palatino Linotype", serif;
    font-size: .95rem;
    line-height: 1.05;
}
.entry-fee-team-money-row small {
    color: #6a4c25;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.entry-fee-player-grid {
    display: grid;
    gap: 8px;
}
.entry-fee-player-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(120px, auto);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(103, 63, 22, .18);
    border-radius: 12px;
    background: rgba(255, 246, 220, .24);
    cursor: pointer;
}
.entry-fee-player-card.is-paid {
    opacity: .72;
    background: rgba(213, 235, 202, .22);
}
.entry-fee-selection-form:not(.show-paid) .entry-fee-player-card.is-paid {
    display: none;
}
.entry-fee-player-main,
.entry-fee-player-money,
.entry-fee-player-status {
    display: grid;
    gap: 2px;
}
.entry-fee-player-main strong,
.entry-fee-player-money strong {
    color: #2d1909;
}
.entry-fee-player-status {
    justify-items: end;
    text-align: right;
}
.entry-fee-payment-footer {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    padding: 14px;
    border: 2px ridge rgba(142, 91, 36, .55);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.62), transparent 55%),
        linear-gradient(180deg, rgba(244,223,171,.98), rgba(220,188,114,.98));
    box-shadow: 0 14px 32px rgba(65, 38, 10, .22);
}
.entry-fee-selected-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.entry-fee-selected-summary span,
.entry-fee-admin-rsn-display {
    display: grid;
    gap: 2px;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid rgba(103, 63, 22, .2);
    border-radius: 11px;
    background: rgba(255, 246, 220, .34);
}
.entry-fee-selected-summary strong,
.entry-fee-admin-rsn-display strong {
    color: #2d1909;
    font-family: Georgia, "Palatino Linotype", serif;
}
.entry-fee-payment-controls {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(200px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.entry-fee-payment-controls .form-row {
    margin: 0;
}
.entry-fee-payment-controls select,
.entry-fee-payment-controls input {
    min-height: 38px;
}
.entry-fee-payment-controls button {
    min-height: 38px;
    white-space: nowrap;
}
.entry-fee-payment-controls button:disabled {
    cursor: not-allowed;
    opacity: .55;
}
@media (max-width: 980px) {
    .entry-fee-payment-heading,
    .entry-fee-team-card-header,
    .entry-fee-payment-footer {
        grid-template-columns: 1fr;
        display: grid;
    }
    .entry-fee-team-grid {
        grid-template-columns: 1fr;
    }
    .entry-fee-player-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .entry-fee-player-money,
    .entry-fee-player-status {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }
    .entry-fee-team-total {
        justify-items: start;
    }
    .entry-fee-payment-footer {
        position: static;
    }
    .entry-fee-payment-controls {
        grid-template-columns: 1fr;
    }
}


/* Phase 102: single-column entry-fee teams and stronger selection affordances */
.entry-fee-team-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
}

.entry-fee-team-card {
    border: 2px solid rgba(103, 63, 22, .48) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 246, 220, .4),
        0 8px 18px rgba(65, 38, 10, .16);
}

.entry-fee-team-card-header {
    border: 2px solid rgba(103, 63, 22, .36) !important;
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.55), transparent 58%),
        rgba(235, 204, 132, .38) !important;
}

.entry-fee-player-card {
    border: 2px solid rgba(103, 63, 22, .28) !important;
}

.entry-fee-player-card.is-unpaid {
    background:
        radial-gradient(circle at top left, rgba(255,246,220,.42), transparent 58%),
        rgba(255, 246, 220, .28);
}

.entry-fee-player-card.is-unpaid:hover,
.entry-fee-player-card:has(input[type="checkbox"]:checked) {
    border-color: rgba(92, 122, 50, .7) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 246, 220, .5),
        0 6px 16px rgba(65, 38, 10, .18);
}

.entry-fee-show-paid-toggle input,
.entry-fee-team-check input,
.entry-fee-player-card input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0;
    border: 2px solid rgba(61, 36, 14, .82);
    border-radius: 7px;
    background:
        linear-gradient(180deg, #fff3c7, #d6ad5a);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.28),
        0 2px 5px rgba(65,38,10,.22);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
}

.entry-fee-show-paid-toggle input::after,
.entry-fee-team-check input::after,
.entry-fee-player-card input[type="checkbox"]::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 4px;
    transform: scale(0);
    transition: transform .12s ease;
    background: #416b2f;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.entry-fee-show-paid-toggle input:checked,
.entry-fee-team-check input:checked,
.entry-fee-team-check input:indeterminate,
.entry-fee-player-card input[type="checkbox"]:checked {
    border-color: rgba(44, 85, 32, .95);
    background:
        linear-gradient(180deg, #e6f0b4, #9eb760);
}

.entry-fee-show-paid-toggle input:checked::after,
.entry-fee-team-check input:checked::after,
.entry-fee-team-check input:indeterminate::after,
.entry-fee-player-card input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.entry-fee-team-check input:indeterminate::after {
    width: 14px;
    height: 5px;
}

.entry-fee-player-card input[type="checkbox"]:disabled,
.entry-fee-team-check input:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.entry-fee-team-check {
    align-items: flex-start;
}

.entry-fee-player-card input[type="checkbox"] {
    align-self: center;
}

@supports not selector(:has(*)) {
    .entry-fee-player-card.is-unpaid:hover {
        border-color: rgba(92, 122, 50, .7) !important;
    }
}


/* Phase 103: team-member payee dropdown on winnings page */
.payout-admin-form select[name="payout_payee_rsn"] {
    min-height: 36px;
    font-size: .9rem;
}
.payout-admin-form button:disabled {
    cursor: not-allowed;
    opacity: .55;
}


/* Phase 104: payout field labels */
.payout-admin-form .payout-field-row {
    margin: 0;
    display: grid;
    gap: 5px;
}
.payout-admin-form .payout-field-row label {
    color: #5f3c17;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}
.payout-admin-form .payout-static-field {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid rgba(103, 63, 22, .26);
    border-radius: 9px;
    background: rgba(255, 246, 220, .28);
    color: #2d1909;
    font-weight: 900;
}
.payout-admin-form .payout-submit-row button {
    justify-self: start;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.placeholder-group {
    border: 1px solid rgba(209, 154, 58, 0.25);
    border-radius: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.14);
}
.placeholder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.placeholder-list code {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.compact-topbar {
    align-items: flex-start;
    gap: 12px;
}
.embed-template-form textarea {
    min-height: 96px;
}
.onboarding-review-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.onboarding-review-form input[name="reason"],
.onboarding-review-form input[name="review_reason"] {
    min-width: min(100%, 420px);
    flex: 1 1 360px;
}
.onboarding-review-row td {
    background: rgba(0, 0, 0, 0.12);
}
.onboarding-wrap {
    max-width: 1080px;
}

.discord-picker-create {
    background: rgba(64, 111, 71, .16);
    border-top: 1px dashed rgba(103,63,22,.32);
}
.discord-picker-create strong::before {
    content: "+ ";
}
.onboarding-steps .inline-form,
.onboarding-guild-form {
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.onboarding-guild-form input[name="discord_guild_id"] {
    min-width: min(100%, 360px);
}
.muted-card {
    opacity: .88;
}