:root {
    --bg: #050508;
    --card: #10101a;
    --card-soft: #151522;
    --text: #f7f7ff;
    --muted: #9394ae;
    --pink: #ff2bd6;
    --purple: #7b3cff;
    --cyan: #00e5ff;
    --red: #ff3e6c;
    --radius: 12px;
    --border: rgba(123, 60, 255, 0.26);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0%, rgba(123, 60, 255, 0.21), transparent 36rem),
        var(--bg);
    color: var(--text);
    font: 16px/1.42 Arial, Helvetica, sans-serif;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

h1,
h2,
p {
    margin: 0;
}

.shell {
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 12px 10px 22px;
}

.join-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
}

.brand {
    text-align: center;
}

.brand h1 {
    margin: 10px 0 8px;
    font-size: clamp(3.2rem, 20vw, 5.4rem);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 0.86;
}

.brand h1 span,
.wordmark span {
    color: var(--pink);
    text-shadow: 0 0 20px rgba(255, 43, 214, 0.5);
}

.eyebrow {
    color: var(--cyan);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tagline,
.handle,
.pass-note {
    color: var(--muted);
}

.card {
    margin-bottom: 9px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(20, 20, 32, 0.98), rgba(9, 9, 15, 0.98));
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22);
}

.signup-card h2 {
    margin-bottom: 16px;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-stack label {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: bold;
}

.connect-copy {
    margin: 0 0 14px;
    color: var(--muted);
}

.verified-x {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    padding: 11px;
    border-radius: 13px;
    background: rgba(0, 229, 255, 0.06);
}

.verified-x a {
    margin-left: auto;
    font-size: 0.8rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    outline: 0;
    background: var(--card-soft);
    color: var(--text);
    font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}

textarea {
    min-height: 86px;
    resize: vertical;
    line-height: 1.45;
}

select {
    appearance: auto;
}

.window-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.window-times label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.handle-field {
    display: flex;
    align-items: center;
    padding-left: 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: var(--card-soft);
    color: var(--muted);
}

.handle-field:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}

.handle-field input {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.button {
    appearance: none;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: rgba(123, 60, 255, 0.17);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.button:active {
    transform: scale(0.98);
}

.button:disabled {
    cursor: wait;
    opacity: 0.5;
}

.button.primary {
    background: linear-gradient(105deg, var(--pink), var(--purple));
    box-shadow: 0 7px 22px rgba(255, 43, 214, 0.27);
}

.button.primary.big {
    margin-top: 15px;
    min-height: 54px;
}

.button.x-button {
    display: block;
    background: var(--text);
    color: var(--bg);
    text-align: center;
}

.button.x-button.big {
    min-height: 54px;
    padding-top: 15px;
}

.button.secondary {
    border-color: rgba(0, 229, 255, 0.25);
}

.button.danger {
    background: rgba(255, 62, 108, 0.18);
    border-color: rgba(255, 62, 108, 0.42);
}

.button.danger.outline {
    background: transparent;
}

.button.tiny {
    min-height: 34px;
    padding: 5px 12px;
    color: var(--cyan);
}

.link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cyan);
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.top-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin-bottom: 9px;
}

.wordmark {
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.status {
    padding: 6px 11px;
    border-radius: 99px;
    background: rgba(123, 60, 255, 0.2);
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status.live {
    background: rgba(255, 43, 214, 0.2);
    color: var(--pink);
}

.bomb-card {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.bomb-card::after {
    position: absolute;
    z-index: 0;
    top: -110px;
    left: 50%;
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: rgba(255, 43, 214, 0.07);
    content: "";
    filter: blur(36px);
    transform: translateX(-50%);
}

.bomb-card.blast-flash {
    animation: blast-flash 850ms ease-out;
}

@keyframes blast-flash {
    0% {
        border-color: rgba(255, 62, 108, 1);
        box-shadow: 0 0 0 rgba(255, 62, 108, 0);
    }
    30% {
        box-shadow: 0 0 42px rgba(255, 62, 108, 0.72);
        transform: scale(1.012);
    }
    100% {
        border-color: var(--border);
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22);
        transform: none;
    }
}

.bomb-card > * {
    position: relative;
    z-index: 1;
}

.bomb-card h1 {
    margin-top: 7px;
    font-size: 1.45rem;
}

.bomb-card .handle {
    margin-top: 3px;
}

.timer {
    margin: 9px 0 8px;
    color: var(--text);
    font-size: 2.35rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}

.bomb-visual {
    --fuse-progress: 0;
    --fuse-length: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 100px;
    margin: 4px 0 9px;
}

.bomb-body {
    position: relative;
    width: 82px;
    height: 82px;
    border: 2px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.62), transparent 0 10px),
        radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.16), transparent 0 27px),
        radial-gradient(circle at 66% 72%, rgba(255, 43, 214, 0.28), transparent 0 34px),
        linear-gradient(145deg, #4b5065 0%, #252838 44%, #11131d 100%);
    box-shadow:
        inset -13px -18px 24px rgba(0, 0, 0, 0.52),
        inset 10px 10px 18px rgba(255, 255, 255, 0.09),
        0 0 0 3px rgba(0, 229, 255, 0.08),
        0 0 32px rgba(0, 229, 255, 0.2),
        0 0 30px rgba(255, 43, 214, 0.18);
}

.bomb-body::before {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 26px;
    height: 18px;
    border-radius: 9px 9px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, #5c627a, #272b3c);
    content: "";
    transform: translateX(-50%);
}

.bomb-body::after {
    position: absolute;
    top: -7px;
    left: calc(50% + 16px);
    width: 16px;
    height: 16px;
    border-top: 3px solid #8f95ad;
    border-right: 3px solid #8f95ad;
    border-radius: 0 13px 0 0;
    content: "";
}

.bomb-shine {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
}

.fuse-track {
    position: relative;
    width: 122px;
    height: 70px;
    margin-right: -12px;
    margin-bottom: 52px;
}

.fuse-line {
    position: absolute;
    right: 0;
    bottom: 4px;
    width: var(--fuse-length);
    min-width: 10px;
    max-width: 100%;
    height: 5px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, #b58750 0 9px, #ffe08a 9px 14px);
    box-shadow: 0 0 10px rgba(255, 212, 111, 0.42);
    transform: rotate(-23deg);
    transform-origin: right center;
}

.fuse-spark {
    position: absolute;
    right: calc(var(--fuse-length) - 7px);
    bottom: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 18%, #ffd46f 19% 42%, #ff3e6c 43% 70%, transparent 71%);
    filter: drop-shadow(0 0 9px rgba(255, 62, 108, 0.78));
    transform: rotate(-23deg);
    animation: spark-flicker 180ms infinite alternate ease-in-out;
}

.bomb-card.bomb-live .bomb-body {
    box-shadow:
        inset -13px -18px 24px rgba(0, 0, 0, 0.52),
        inset 10px 10px 18px rgba(255, 255, 255, 0.09),
        0 0 0 3px rgba(0, 229, 255, 0.1),
        0 0 34px rgba(0, 229, 255, 0.24),
        0 0 36px rgba(255, 43, 214, 0.25);
}

.bomb-card.bomb-critical .bomb-body {
    animation: bomb-shake 170ms infinite alternate ease-in-out;
}

@keyframes spark-flicker {
    to {
        transform: rotate(-23deg) scale(1.35);
    }
}

@keyframes bomb-shake {
    from {
        transform: translateX(-1px) rotate(-1deg);
    }
    to {
        transform: translateX(1px) rotate(1deg);
    }
}

.section-head,
.person,
.rank-row,
.event,
.post {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.risk-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
}

.risk-caption {
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: bold;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.risk-status {
    min-width: 174px;
    padding: 7px 12px;
    border: 1px solid;
    border-radius: 99px;
    font-size: 1.06rem;
    letter-spacing: 0.12em;
}

.risk-status.waiting {
    border-color: rgba(147, 148, 174, 0.32);
    color: var(--muted);
}

.risk-status.safe {
    border-color: rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.09);
    color: var(--cyan);
}

.risk-status.incoming {
    border-color: rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.09);
    color: var(--cyan);
}

.risk-status.risky {
    border-color: rgba(123, 60, 255, 0.65);
    background: rgba(123, 60, 255, 0.16);
    color: #ad8aff;
}

.risk-status.very-risky {
    border-color: rgba(255, 43, 214, 0.65);
    background: rgba(255, 43, 214, 0.14);
    color: var(--pink);
}

.risk-status.critical {
    border-color: rgba(255, 62, 108, 0.9);
    background: rgba(255, 62, 108, 0.2);
    color: #ff7696;
    animation: critical-pulse 0.7s infinite alternate ease-in-out;
}

@keyframes critical-pulse {
    to {
        box-shadow: 0 0 20px rgba(255, 62, 108, 0.52);
        transform: scale(1.035);
    }
}

.pass-note {
    margin: 10px 0 9px;
    font-size: 0.88rem;
}

.risk-rule {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.pass-button {
    width: 100%;
    min-height: 48px;
    font-size: 1.08rem;
}

.play-now-form,
.end-attempt-form {
    margin: 0;
}

.play-now-form .pass-button,
.end-attempt-form .pass-button {
    margin-top: 0;
}

.viewer-panel {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    text-align: left;
}

.viewer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.viewer-stats div {
    min-width: 0;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
}

.viewer-stats span {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: bold;
    text-transform: uppercase;
}

.viewer-stats strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--cyan);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.attempt-history {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.attempt-row {
    min-width: 0;
    padding: 6px;
    border-radius: 9px;
    background: rgba(0, 229, 255, 0.06);
    text-align: center;
}

.attempt-row span,
.attempt-row small {
    display: block;
}

.attempt-row span {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.attempt-row small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.62rem;
}

.sound-button {
    width: 100%;
}

.ready-panel {
    padding: 9px;
    border-radius: 13px;
    background: rgba(0, 229, 255, 0.05);
}

.ready-panel .connect-copy {
    margin-bottom: 10px;
}

.ready-panel .button {
    width: 100%;
}

.ready-panel .button + .button {
    margin-top: 9px;
}

.alert-note {
    margin-top: 9px;
    color: var(--muted);
    font-size: 0.74rem;
}

.arena-card {
    text-align: center;
}

.arena-card .section-head span {
    color: var(--pink);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

.arena-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.arena-stats div {
    padding: 7px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.arena-stats strong {
    display: block;
    color: var(--cyan);
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
}

.arena-stats small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: bold;
    text-transform: uppercase;
}

.compact-note {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.78rem;
}

.section-head {
    margin-bottom: 8px;
}

.section-head h1,
.section-head h2 {
    font-size: 1.05rem;
}

.section-head span {
    color: var(--muted);
    font-size: 0.84rem;
}

.people-list,
.board,
.events,
.post-ideas,
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.chat-message {
    position: relative;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.chat-message .remove-button {
    float: right;
    margin-left: 8px;
}

.chat-message strong {
    margin-right: 6px;
    color: var(--cyan);
    font-size: 0.84rem;
}

.chat-message p {
    display: inline;
    font-size: 0.9rem;
}

.chat-message time {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.chat-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.chat-form input {
    min-width: 0;
}

.chat-form .button {
    flex-shrink: 0;
}

.chat-login-note {
    margin-top: 12px;
}

.taunts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.taunt-button {
    min-height: 33px;
    padding: 5px 10px;
    color: var(--pink);
    font-size: 0.75rem;
}

.demo-actions {
    display: flex;
    gap: 6px;
}

.person,
.rank-row,
.event,
.post {
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.person-copy,
.event-copy {
    min-width: 0;
}

.person strong,
.rank-row strong {
    display: block;
}

.person small,
.rank-row small,
.event time {
    color: var(--muted);
    font-size: 0.78rem;
}

.pill {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(0, 229, 255, 0.1);
    color: var(--cyan);
    font-size: 0.69rem;
    font-weight: bold;
    text-transform: uppercase;
}

.pill.cooldown {
    background: rgba(255, 62, 108, 0.14);
    color: var(--red);
}

.pill.off-hours {
    background: rgba(147, 148, 174, 0.13);
    color: var(--muted);
}

.pill.incoming {
    background: rgba(255, 43, 214, 0.14);
    color: var(--pink);
}

.pill.missed {
    background: rgba(255, 62, 108, 0.14);
    color: #ff9db4;
}

.pill.spectator {
    background: rgba(255, 197, 61, 0.13);
    color: #ffd46f;
}

.rank {
    width: 25px;
    color: var(--pink);
    font-weight: bold;
}

.score {
    margin-left: auto;
    color: var(--cyan);
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

.event {
    align-items: flex-start;
}

.event-copy p {
    font-size: 0.9rem;
}

.event.explosion {
    border: 1px solid rgba(255, 43, 214, 0.28);
}

.event.missed {
    border: 1px solid rgba(255, 62, 108, 0.22);
}

.quiet-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 10px 0;
    font-size: 0.9rem;
}

.flash {
    margin-bottom: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.flash.error {
    background: rgba(255, 62, 108, 0.12);
    color: #ff9db4;
}

.flash.success {
    background: rgba(0, 229, 255, 0.11);
    color: var(--cyan);
}

.game-clock-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 9px;
}

.clock-tile {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(0, 229, 255, 0.13);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.clock-tile span {
    display: block;
    min-height: 2.1em;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: bold;
    line-height: 1.15;
    text-transform: uppercase;
}

.clock-tile strong {
    display: block;
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--cyan);
    font-size: 1.18rem;
    font-variant-numeric: tabular-nums;
}

.demo-notice {
    font-size: 0.84rem;
    text-align: center;
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 16px;
}

.admin-status .handle {
    margin-top: 8px;
}

.small-link {
    font-size: 0.84rem;
}

.remove-button {
    min-height: 33px;
    padding: 5px 9px;
    color: var(--red);
}

.score-edit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-edit input {
    width: 84px;
    min-height: 33px;
    padding: 5px 8px;
    font-size: 0.82rem;
}

.score-edit .button {
    white-space: nowrap;
}

.post {
    align-items: flex-start;
    flex-direction: column;
}

.post p {
    font-size: 0.9rem;
    white-space: pre-line;
}

.copy-button {
    align-self: flex-end;
    min-height: 32px;
    padding: 4px 10px;
    color: var(--cyan);
    font-size: 0.8rem;
}

.post-actions {
    display: flex;
    gap: 8px;
    align-self: flex-end;
    flex-wrap: wrap;
}

.template-list {
    display: grid;
    gap: 14px;
}

.settings-list {
    display: grid;
    gap: 12px;
}

.setting-field {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.setting-label {
    display: grid;
    gap: 3px;
}

.setting-label small,
.setting-hint {
    color: var(--muted);
    font-size: 0.76rem;
}

.setting-input {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.setting-input input {
    min-height: 38px;
    padding: 9px 10px;
}

.setting-input small {
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: bold;
    text-transform: uppercase;
}

.template-field {
    display: grid;
    gap: 7px;
}

.template-field span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: bold;
}

.empty-message {
    color: var(--muted);
    font-size: 0.9rem;
}

.toast {
    position: fixed;
    bottom: 18px;
    left: 50%;
    width: min(calc(100% - 28px), 452px);
    padding: 12px 15px;
    border-radius: 14px;
    background: #202034;
    box-shadow: 0 12px 36px #000;
    color: var(--text);
    font-size: 0.9rem;
    transform: translateX(-50%);
}

.modal {
    width: min(calc(100% - 28px), 452px);
    max-height: min(78vh, 620px);
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.modal.open {
    display: block;
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.modal-head h2 {
    font-size: 1.05rem;
}

.rules-copy {
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 0.92rem;
}

.rules-copy strong {
    color: var(--text);
}

.toast.error {
    background: #351522;
}

.hidden {
    display: none !important;
}

@media (min-width: 481px) {
    .shell {
        padding-top: 27px;
    }
}