@font-face {
    font-family: 'BigNoodleTitling';
    src: url('../fonts/big_noodle_titling.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arame';
    src: url('../fonts/Arame.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BebasNeue';
    src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BebasNeue';
    src: url('../fonts/BebasNeue-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --panel: #0c0a06;
    --accent: #2f7dff;
    --accent-rgb: 47, 125, 255;
    --accent-top: #5b9dff;
    --accent-bot: #1a54c4;
    --accent-light: #a9c9ff;
    --red-top: #ff4144;
    --red-bot: #992729;
    --green-top: #34d17a;
    --green-bot: #17924e;
    --green-rgb: 52, 209, 122;
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-dim: rgba(255, 255, 255, 0.38);
    --btn-label: #1a1a1a;
    --bg-soft: rgba(255, 255, 255, 0.05);
    --bg-softer: rgba(255, 255, 255, 0.02);
    --icon-dark: rgba(var(--accent-rgb), 0.07);
    --font-ui: 'Arame', 'Oswald', 'Segoe UI', sans-serif;
    --font-display: 'BigNoodleTitling', 'Bebas Neue', 'Oswald', sans-serif;
    --font-back: 'BebasNeue', 'Bebas Neue', 'Oswald', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--text);
    user-select: none;
}

.is-hidden {
    display: none !important;
}

.app,
.manager {
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.app.is-visible,
.manager.is-visible {
    display: flex;
}

.manager {
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
}

.panel {
    position: relative;
    width: 112.24vmin;
    height: 73.2vmin;
    background-color: var(--panel);
    border-radius: 1.13vmin;
    overflow: hidden;
    box-shadow: 0 1.464vmin 3.66vmin rgba(0, 0, 0, 0.55);
}

.panel-narrow {
    width: 67.1vmin;
    height: 75.64vmin;
}

.panel-bail {
    width: 90.28vmin;
}

.book-field.is-readonly {
    cursor: default;
}

.book-field.is-readonly:hover {
    border-color: var(--line);
    background: var(--bg-softer);
}

.book-field.is-readonly .book-field-action {
    display: none;
}

.panel::before,
.book-card::before,
.step-card::before {
    content: '';
    position: absolute;
    left: -6.898vmin;
    top: -1.13vmin;
    width: 57.747vmin;
    height: 26.22vmin;
    background-image: url('../img/grid.svg');
    background-size: 2.624vmin 2.623vmin;
    background-repeat: repeat;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(125% 105% at 14% 10%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%);
    mask-image: radial-gradient(125% 105% at 14% 10%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%);
    pointer-events: none;
    z-index: 1;
}

.panel::after,
.book-card::after,
.step-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--accent) 0%, transparent 58%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
    z-index: 4;
}

.bg-noise {
    position: absolute;
    inset: 0;
    background-image: url('../img/noise.png');
    background-size: 170px 170px;
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.panel-glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--accent-rgb), 0.42) 0%,
        rgba(var(--accent-rgb), 0.14) 45%,
        transparent 100%);
}

.panel-glow-tl {
    top: -20.74vmin;
    left: -20.74vmin;
    width: 41.48vmin;
    height: 41.48vmin;
    opacity: 0.42;
}

.panel-glow-br {
    bottom: -20.74vmin;
    right: -20.74vmin;
    width: 41.48vmin;
    height: 41.48vmin;
    opacity: 0.36;
}

.panel-glow-side {
    top: 50%;
    right: -7.32vmin;
    transform: translateY(-50%);
    width: 17.08vmin;
    height: 36.6vmin;
    opacity: 0.35;
}

.app.is-visible .panel,
.manager.is-visible .panel {
    animation: book-popup-in 680ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
}

@keyframes ui-slide-down {
    from { opacity: 0; transform: translateY(-1.016vmin); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ui-slide-up {
    from { opacity: 0; transform: translateY(1.016vmin); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes stache-in {
    from { opacity: 0; }
    to   { opacity: 0.95; }
}

@keyframes glow-in-tl { from { opacity: 0; } to { opacity: 0.42; } }
@keyframes glow-in-br { from { opacity: 0; } to { opacity: 0.36; } }
@keyframes glow-in-side { from { opacity: 0; } to { opacity: 0.35; } }

.app.is-visible .book-stache {
    animation: stache-in 1450ms ease-in-out 340ms both;
}

@keyframes paper-in { from { opacity: 0; } to { opacity: 0.09; } }

.app.is-visible .book-paper {
    animation: paper-in 1450ms ease-in-out 340ms both;
}

.app.is-visible .panel-glow-tl {
    animation: glow-in-tl 950ms ease 240ms both;
}

.app.is-visible .panel-glow-br {
    animation: glow-in-br 950ms ease 360ms both;
}

.app.is-visible .panel-glow-side {
    animation: glow-in-side 950ms ease 480ms both;
}

.app.is-visible .header-left {
    animation: ui-slide-down 680ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

.app.is-visible .header-right {
    animation: ui-slide-down 680ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both;
}

.app.is-visible .search {
    animation: ui-slide-up 700ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

.app.is-visible .card-frame {
    animation: ui-slide-up 720ms cubic-bezier(0.16, 1, 0.3, 1) 510ms both;
}

.app.is-visible .book-panel {
    animation: ui-slide-up 720ms cubic-bezier(0.16, 1, 0.3, 1) 440ms both;
}

.content {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    padding: 2.824vmin;
    display: flex;
    flex-direction: column;
    gap: 2.824vmin;
}

.header {
    display: flex;
    flex-direction: column;
    gap: 3.503vmin;
    width: 100%;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 1.243vmin;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
}

.brand-logo {
    width: 2.712vmin;
    height: 2.486vmin;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 3.39vmin;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.109vmin;
    white-space: nowrap;
    margin: 0;
}

.brand-subtitle {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
}

.brand-dot {
    width: 0.68vmin;
    height: 0.68vmin;
    border-radius: 0.112vmin;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-bot) 100%);
    box-shadow: 0 0 0.451vmin rgba(var(--accent-rgb), 0.3);
    flex-shrink: 0;
}

.brand-subtitle p {
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    color: var(--text-muted);
    line-height: 1.1;
}

.officer-chip {
    display: flex;
    align-items: center;
    gap: 0.904vmin;
    height: 4.293vmin;
    padding: 0 1.13vmin;
    background: var(--icon-dark);
    border-radius: 0.338vmin;
}

.officer-chip-icon {
    width: 1.807vmin;
    height: 1.807vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.officer-chip-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.officer-chip-text {
    display: flex;
    flex-direction: column;
    gap: 0.226vmin;
    line-height: 1;
}

.officer-chip-label {
    font-size: 1.13vmin;
    color: var(--text-dim);
    letter-spacing: 0.044vmin;
}

.officer-chip-value {
    font-size: 1.581vmin;
    color: var(--text);
    letter-spacing: 0.044vmin;
    white-space: nowrap;
}

.vline {
    width: 1px;
    height: 1.13vmin;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.close-btn {
    width: 4.293vmin;
    height: 4.293vmin;
    border: none;
    border-radius: 0.338vmin;
    background: linear-gradient(180deg, var(--red-top) 0%, var(--red-bot) 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.895vmin;
    transition: filter 200ms ease, transform 200ms ease;
    flex-shrink: 0;
}

.close-btn img {
    width: 1.319vmin;
    height: 1.319vmin;
}

.close-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.04);
}

.close-btn:active {
    transform: scale(0.96);
}

.search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 5.649vmin;
    background: var(--bg-softer);
    border-radius: 0.564vmin;
    padding: 0.564vmin;
    overflow: hidden;
}

.search-left {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    flex: 1;
    min-width: 0;
}

.search-icon-box {
    width: 3.842vmin;
    height: 3.842vmin;
    background: var(--icon-dark);
    border-radius: 0.226vmin;
    padding: 0.792vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-icon-box img {
    width: 1.648vmin;
    height: 1.648vmin;
}

.input-wrap {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    caret-color: var(--accent);
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    line-height: 1.92vmin;
    letter-spacing: 0.044vmin;
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.search-input::placeholder {
    color: transparent;
}

.input-hint {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.581vmin;
    color: var(--text-dim);
    letter-spacing: 0.044vmin;
    transition: opacity 160ms ease;
}

.input-hint-cursor {
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.search-input:focus + .input-hint,
.search-input:not(:placeholder-shown) + .input-hint {
    opacity: 0;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 0.564vmin;
    background: var(--icon-dark);
    border-radius: 0.338vmin;
    padding: 1.13vmin;
    height: 100%;
    flex-shrink: 0;
}

.tabs-icon {
    width: 1.355vmin;
    height: 1.355vmin;
}

.tab {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    line-height: 1.92vmin;
    letter-spacing: 0.044vmin;
    color: var(--text);
    padding: 0;
    transition: color 180ms ease, opacity 180ms ease;
    white-space: nowrap;
}

.tab.tab-inactive {
    font-size: 1.355vmin;
    color: var(--text-muted);
}

.tab.tab-active {
    color: var(--text);
}

.tabs-chevron {
    width: 0.68vmin;
    height: 0.418vmin;
    transform: rotate(-90deg) scaleY(-1);
    opacity: 0.75;
}

.columns {
    display: flex;
    gap: 2.824vmin;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.card-frame {
    position: relative;
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.13vmin;
    padding: 2.261vmin;
    display: flex;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

.card-frame-grow {
    flex: 1;
    min-height: 0;
}

.players,
.manager-list {
    display: flex;
    flex-direction: column;
    gap: 1.13vmin;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-right: 0.564vmin;
}

.players::-webkit-scrollbar,
.manager-list::-webkit-scrollbar {
    width: 0.338vmin;
}

.players::-webkit-scrollbar-track,
.manager-list::-webkit-scrollbar-track {
    background: transparent;
}

.players::-webkit-scrollbar-thumb,
.manager-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 0.112vmin;
}

.players-divider {
    width: 2px;
    margin-left: 1.695vmin;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
    align-self: stretch;
    flex-shrink: 0;
    opacity: 0.5;
}

.player-card {
    position: relative;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.338vmin;
    padding: 1.13vmin;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.player-card:hover {
    background: rgba(255, 255, 255, 0.04);
}

.player-card.is-just-shown {
    animation: player-card-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes player-card-in {
    0% {
        opacity: 0;
        transform: translateY(-1.13vmin) scale(0.97);
        filter: blur(0.226vmin);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.player-info {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    height: 2.824vmin;
    min-width: 0;
    flex: 1 1 auto;
}

.player-icon {
    width: 2.824vmin;
    height: 2.824vmin;
    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
    border: 0.5px solid var(--accent-light);
    border-radius: 0.226vmin;
    padding: 0.792vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-icon img {
    width: 1.355vmin;
    height: 1.355vmin;
    filter: brightness(0) invert(1);
}

.player-icon.has-avatar {
    padding: 0;
    overflow: hidden;
    border: none;
    background: var(--bg-soft);
}

.player-icon.has-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
}

.player-field {
    display: flex;
    flex-direction: column;
    gap: 0.338vmin;
    align-items: flex-start;
    line-height: 1;
    white-space: nowrap;
    font-family: var(--font-ui);
    min-width: 0;
}

.player-field.field-name {
    width: auto;
    min-width: 11.297vmin;
    flex: 0 0 auto;
}

.player-field.field-name .field-value {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.field-label {
    font-size: 1.13vmin;
    color: var(--text-dim);
}

.field-value {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.581vmin;
    color: var(--text);
}

.field-divider {
    width: 1px;
    height: 1.13vmin;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.status-tag {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    background: var(--bg-soft);
    border-radius: 0.112vmin;
    padding: 0.451vmin 0.904vmin;
    flex-shrink: 0;
}

.status-marker {
    width: 0.451vmin;
    height: 0.451vmin;
    background: var(--accent);
    border-radius: 0.112vmin;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.status-marker.offline {
    background: rgba(255, 255, 255, 0.35);
}

.status-value {
    font-size: 1.581vmin;
    color: var(--text);
    line-height: 1.92vmin;
}

.status-label {
    font-size: 1.13vmin;
    color: var(--text-dim);
    line-height: 1.92vmin;
}

.player-card.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--accent) 0%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.player-card.is-active > * {
    position: relative;
    z-index: 1;
}

.player-card.is-active .status-tag {
    display: none;
}

.player-card .action-block {
    display: none;
}

.player-card.is-active .action-block {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
}

.action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.564vmin;
    height: 2.824vmin;
    padding: 0.792vmin 1.13vmin;
    background:
        radial-gradient(120% 150% at 50% 42%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(135% 150% at 50% 50%, rgba(var(--accent-rgb), 0.92) 0%, rgba(var(--accent-rgb), 0.68) 46%, rgba(var(--accent-rgb), 0.46) 88%);
    border: 1px solid rgba(var(--accent-rgb), 0.85);
    border-radius: 0.282vmin;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 300ms ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.action-btn::before {
    content: '';
    position: absolute;
    inset: -0.19vmin;
    border-radius: 0.47vmin;
    padding: 0.19vmin;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.85) 0%, rgba(var(--accent-rgb), 0) 88%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.action-btn:hover {
    opacity: 1;
}

.action-btn:active {
    opacity: 0.7;
}

.action-btn img {
    position: relative;
    z-index: 1;
    width: 1.355vmin;
    height: 1.355vmin;
    filter: brightness(0);
}

.action-btn span {
    position: relative;
    z-index: 1;
    font-family: var(--font-ui);
    font-size: 1.355vmin;
    line-height: 1.92vmin;
    color: var(--btn-label);
    letter-spacing: 0.044vmin;
    white-space: nowrap;
}

.action-btn.is-release {
    background:
        radial-gradient(120% 150% at 50% 42%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(135% 150% at 50% 50%, rgba(var(--green-rgb), 0.92) 0%, rgba(var(--green-rgb), 0.68) 46%, rgba(var(--green-rgb), 0.46) 88%);
    border-color: rgba(var(--green-rgb), 0.85);
}

.action-btn.is-release::before {
    background: linear-gradient(180deg, rgba(var(--green-rgb), 0.85) 0%, rgba(var(--green-rgb), 0) 88%);
}

.player-card.is-offline {
    opacity: 0.6;
}

.player-card.is-offline .player-icon {
    filter: grayscale(1) brightness(0.85);
}

.no-results {
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    padding: 2.261vmin 0;
}

.modal,
.work {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
}

.modal.is-open,
.work.is-open {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}

.modal,
.work {
    background: rgba(0, 0, 0, 0.5);
}

.modal.is-open .book-card,
.work.is-open .book-card {
    animation: book-popup-in 680ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
}

@keyframes book-popup-in {
    0% {
        opacity: 0;
        transform: scale(0.86) translateY(1.695vmin);
        filter: blur(0.564vmin);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

.app.is-visible .book-field {
    animation: book-field-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.app.is-visible .book-field:nth-child(1) { animation-delay: 600ms; }
.app.is-visible .book-field:nth-child(2) { animation-delay: 700ms; }
.app.is-visible .book-field:nth-child(3) { animation-delay: 800ms; }
.app.is-visible .book-field:nth-child(4) { animation-delay: 900ms; }
.app.is-visible .book-field:nth-child(5) { animation-delay: 980ms; }
.app.is-visible .book-field:nth-child(6) { animation-delay: 1060ms; }
.app.is-visible .book-field:nth-child(7) { animation-delay: 1140ms; }

@keyframes book-field-in {
    from {
        opacity: 0;
        transform: translateX(-1.695vmin);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.app.is-visible .book-submit-btn {
    animation: book-submit-in 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 1020ms;
}

@keyframes book-submit-in {
    from {
        opacity: 0;
        transform: translateY(1.13vmin) scale(0.96);
    }
    to {
        opacity: 0.65;
        transform: translateY(0) scale(1);
    }
}

.book-card {
    position: relative;
    width: 50.726vmin;
    background-color: var(--panel);
    border-radius: 0.725vmin;
    overflow: hidden;
    box-shadow: 0 1.464vmin 3.66vmin rgba(0, 0, 0, 0.55);
}

.book-glow {
    position: absolute;
    bottom: -15.86vmin;
    right: -15.86vmin;
    width: 31.72vmin;
    height: 31.72vmin;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--accent-rgb), 0.42) 0%,
        rgba(var(--accent-rgb), 0.14) 45%,
        transparent 100%);
    opacity: 0.42;
    pointer-events: none;
    z-index: 1;
}

.book-glow-tl {
    top: -15.86vmin;
    left: -15.86vmin;
    bottom: auto;
    right: auto;
    opacity: 0.36;
}

.book-watermark {
    position: absolute;
    top: -3.162vmin;
    left: 0;
    transform: rotate(-9deg) skewX(-9deg) scaleY(0.99);
    transform-origin: top left;
    font-family: var(--font-back);
    font-size: 16.948vmin;
    line-height: 1;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
}

.book-stache {
    position: absolute;
    background: url('../img/stacheldraht.png') center/contain no-repeat;
    filter: blur(2px) drop-shadow(0 0.451vmin 0.451vmin rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 3;
    opacity: 0.95;
}

.book-stache-tl {
    top: -4.746vmin;
    left: -6.215vmin;
    width: 15.714vmin;
    height: 15.714vmin;
}

.book-stache-br {
    bottom: -6.71vmin;
    right: -6.71vmin;
    width: 18.659vmin;
    height: 18.659vmin;
    transform: rotate(167.89deg);
}

.panel .book-stache-tl {
    top: -6.1vmin;
    left: -7.93vmin;
    width: 20.13vmin;
    height: 20.13vmin;
}

.panel .book-stache-br {
    bottom: -7.93vmin;
    right: -7.93vmin;
    width: 22.57vmin;
    height: 22.57vmin;
}

.book-cuffs {
    position: absolute;
    bottom: -14.03vmin;
    left: -12.81vmin;
    width: 39.65vmin;
    height: 50.63vmin;
    background: url('../img/handcuffs.png') left bottom/contain no-repeat;
    filter: brightness(1.9) contrast(0.95);
    opacity: 0.16;
    transform: rotate(-4deg);
    transform-origin: left bottom;
    pointer-events: none;
    z-index: 3;
}

.book-paper {
    position: absolute;
    bottom: -3.66vmin;
    right: -3.66vmin;
    width: 39.04vmin;
    height: 51.85vmin;
    background: url('../img/paper.png') right bottom/contain no-repeat;
    opacity: 0.09;
    transform: rotate(3deg);
    transform-origin: right bottom;
    pointer-events: none;
    z-index: 3;
}

.book-content {
    position: relative;
    z-index: 5;
    padding: 5.649vmin;
    display: flex;
    flex-direction: column;
    gap: 3.503vmin;
}

.book-panel {
    width: 41.48vmin;
    height: 100%;
    flex-shrink: 0;
    box-shadow: none;
    border-radius: 1.13vmin;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.book-panel .book-content {
    height: 100%;
    padding: 2.261vmin;
    gap: 2.261vmin;
}

.book-panel::after {
    display: none;
}

.book-panel .book-watermark {
    font-size: 10.98vmin;
}

.book-panel .book-fields {
    gap: 1.355vmin;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.564vmin;
}

.book-panel .book-fields::-webkit-scrollbar {
    width: 0.338vmin;
}

.book-panel .book-fields::-webkit-scrollbar-track {
    background: transparent;
}

.book-panel .book-fields::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 0.112vmin;
}

.book-panel .book-meta {
    margin-top: 1.13vmin;
}

.book-title {
    font-family: var(--font-display);
    font-size: 3.05vmin;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.109vmin;
    background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    margin: 0;
}

.book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.564vmin;
    margin-top: auto;
}

.meta-chip {
    display: flex;
    align-items: center;
    gap: 0.564vmin;
    padding: 0.451vmin 0.904vmin;
    background: var(--bg-soft);
    border-radius: 0.112vmin;
    font-size: 1.13vmin;
    color: var(--text-dim);
}

.meta-chip b {
    font-size: 1.469vmin;
    font-weight: normal;
    color: var(--text);
}

.record-person {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    padding: 1.13vmin;
    border-radius: 0.338vmin;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 180ms ease, border-color 180ms ease;
}

.record-person:hover {
    background: rgba(255, 255, 255, 0.04);
}

.record-person.is-expanded {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.record-person.is-expanded .cell-toggle img {
    transform: rotate(0deg);
}

.record-person-info {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.record-person-stats {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    flex-shrink: 0;
}

.player-field.field-charge {
    width: 16.945vmin;
}

.record-flag {
    flex-shrink: 0;
    padding: 0.451vmin 0.904vmin;
    border-radius: 0.112vmin;
    background: rgba(var(--accent-rgb), 0.18);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    font-family: var(--font-ui);
    font-size: 1.13vmin;
    letter-spacing: 0.056vmin;
    color: var(--accent);
}

.record-priors {
    min-width: 9.03vmin;
}

.record-priors .status-marker {
    background: rgba(255, 255, 255, 0.3);
}

.record-priors.is-warn .status-marker {
    background: var(--accent);
}

.record-priors.is-heavy .status-marker {
    background: var(--red-top);
}

.record-priors.is-heavy .status-value {
    color: var(--red-top);
}

.record-row.is-child,
.no-results.is-child {
    margin-left: 2.824vmin;
}

.record-row {
    display: flex;
    flex-direction: column;
    gap: 0.338vmin;
    padding: 1.13vmin;
    border-radius: 0.338vmin;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0.338vmin solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
}

.record-row.is-open {
    background: rgba(var(--accent-rgb), 0.07);
    border-left-color: var(--accent);
}

.record-top {
    display: flex;
    align-items: baseline;
    gap: 1.13vmin;
}

.record-charge {
    flex: 1;
    min-width: 0;
    font-size: 1.807vmin;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-time {
    flex-shrink: 0;
    font-size: 1.581vmin;
    color: var(--accent-light);
}

.record-date {
    flex-shrink: 0;
    width: 9.03vmin;
    text-align: right;
    font-size: 1.355vmin;
    color: var(--text-muted);
}

.record-bottom {
    display: flex;
    align-items: center;
    gap: 0.677vmin;
    font-size: 1.243vmin;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
}

.record-dot {
    width: 0.226vmin;
    height: 0.226vmin;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.record-serving {
    color: var(--accent);
}

.player-field.is-flagged .field-value {
    color: var(--accent);
}

.book-submit-btn.is-release {
    background:
        radial-gradient(120% 150% at 50% 42%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(135% 150% at 50% 50%, rgba(var(--green-rgb), 0.92) 0%, rgba(var(--green-rgb), 0.68) 46%, rgba(var(--green-rgb), 0.46) 88%);
    border-color: rgba(var(--green-rgb), 0.85);
}

.book-submit-btn.is-release::before {
    background: linear-gradient(180deg, rgba(var(--green-rgb), 0.85) 0%, rgba(var(--green-rgb), 0) 88%);
}

.book-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.book-header-left {
    display: flex;
    flex-direction: column;
    gap: 1.243vmin;
}

.book-fields {
    display: flex;
    flex-direction: column;
    gap: 1.807vmin;
    width: 100%;
}

.book-field {
    background: rgba(0, 0, 0, 0.45);
    height: 5.649vmin;
    flex-shrink: 0;
    border-radius: 0.564vmin;
    padding: 0.564vmin;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
}

.book-field-left {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    min-width: 0;
}

.book-field-icon {
    width: 3.842vmin;
    height: 3.842vmin;
    background: var(--icon-dark);
    border-radius: 0.226vmin;
    padding: 0.792vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.book-field-icon img {
    width: 1.807vmin;
    height: 1.807vmin;
    filter: brightness(0) invert(1);
}

.book-field-text {
    display: flex;
    flex-direction: column;
    gap: 0.226vmin;
    align-items: flex-start;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}

.book-field-label {
    font-size: 1.13vmin;
    line-height: 1.92vmin;
    color: var(--text-dim);
    letter-spacing: 0.044vmin;
}

.book-field-value {
    font-size: 1.581vmin;
    line-height: 1.92vmin;
    color: var(--text);
    letter-spacing: 0.044vmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26.84vmin;
    display: inline-block;
}

.book-field-value.is-empty {
    color: var(--text-dim);
}

.book-field-action {
    background: var(--icon-dark);
    border-radius: 0.338vmin;
    padding: 0.451vmin 0.564vmin;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: filter 180ms ease;
    flex-shrink: 0;
}

.book-field-action:hover {
    filter: brightness(1.3);
}

.book-field-action.is-static {
    cursor: default;
}

.book-field-action-inner {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    height: 3.616vmin;
    min-width: 2.035vmin;
    border-radius: 0.112vmin;
    padding: 0 0.226vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-field-action-inner img {
    width: 1.13vmin;
    height: 1.13vmin;
    filter: brightness(0) invert(1);
}

.book-field-chevron {
    width: 1.13vmin;
    height: 0.698vmin;
    transition: transform 200ms ease;
}

.book-field.is-open .book-field-chevron {
    transform: rotate(180deg);
}

.book-submit-btn {
    width: 100%;
    height: 5.649vmin;
    border: 1px solid rgba(var(--accent-rgb), 0.85);
    border-radius: 0.564vmin;
    background:
        radial-gradient(120% 150% at 50% 42%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(135% 150% at 50% 50%, rgba(var(--accent-rgb), 0.92) 0%, rgba(var(--accent-rgb), 0.68) 46%, rgba(var(--accent-rgb), 0.46) 88%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    transition: opacity 300ms ease;
    flex-shrink: 0;
    position: relative;
}

.book-submit-btn::before {
    content: '';
    position: absolute;
    inset: -0.376vmin;
    border-radius: 0.94vmin;
    padding: 0.376vmin;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.85) 0%, rgba(var(--accent-rgb), 0) 88%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.book-submit-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url('../img/grid.svg');
    background-size: 1.1vmin 1.1vmin;
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.85;
    pointer-events: none;
}

.book-submit-btn span {
    position: relative;
    z-index: 1;
    font-family: var(--font-ui);
    font-size: 2.035vmin;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.087vmin;
    color: var(--btn-label);
}

.book-submit-btn:hover {
    opacity: 1;
}

.book-submit-btn:active {
    opacity: 0.7;
}

.book-submit-btn.is-ghost {
    background: radial-gradient(135% 150% at 50% 50%, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.01) 88%);
    border-color: rgba(255, 255, 255, 0.14);
}

.book-submit-btn.is-ghost::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 88%);
}

.book-submit-btn.is-ghost::after {
    opacity: 0.22;
}

.book-submit-btn.is-ghost span {
    color: var(--text-muted);
}

.dropdown {
    position: fixed;
    z-index: 140;
    max-height: 26.84vmin;
    overflow-y: auto;
    padding: 0.451vmin;
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.564vmin;
    box-shadow: 0 1.13vmin 2.824vmin rgba(0, 0, 0, 0.65);
}

.dropdown::-webkit-scrollbar {
    width: 0.338vmin;
}

.dropdown::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 0.112vmin;
}

.dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.13vmin;
    padding: 0.792vmin 0.904vmin;
    border-radius: 0.226vmin;
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.dropdown-option:hover {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--text);
}

.dropdown-option.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dropdown-option small {
    font-size: 1.13vmin;
    color: var(--text-dim);
}

.dropdown-custom {
    display: flex;
    align-items: center;
    gap: 0.451vmin;
    margin-top: 0.451vmin;
    padding-top: 0.451vmin;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-custom input {
    flex: 1;
    min-width: 0;
    height: 3.39vmin;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.226vmin;
    outline: none;
    color: var(--text);
    caret-color: var(--accent);
    font-family: var(--font-ui);
    font-size: 1.355vmin;
    padding: 0 0.677vmin;
}

.dropdown-custom input::placeholder {
    color: var(--text-dim);
}

.dropdown-custom button {
    width: 3.39vmin;
    height: 3.39vmin;
    border: none;
    border-radius: 0.226vmin;
    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.dropdown-custom button img {
    width: 1.13vmin;
    height: 0.698vmin;
    transform: rotate(-90deg);
    filter: brightness(0) invert(1);
}

.cell-row {
    position: relative;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.338vmin;
    padding: 1.13vmin;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.13vmin;
    flex-shrink: 0;
}

.cell-row.is-station {
    border-left: 0.338vmin solid var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

.cell-row.is-station {
    cursor: pointer;
}

.cell-row.is-child {
    margin-left: 2.824vmin;
}

.cell-toggle {
    width: 2.824vmin;
    height: 2.824vmin;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.226vmin;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.cell-toggle img {
    width: 1.016vmin;
    height: 0.627vmin;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transform: rotate(-90deg);
    transition: transform 180ms ease;
}

.cell-row.is-expanded .cell-toggle img {
    transform: rotate(0deg);
}

.cell-row-info {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
    min-width: 0;
}

.cell-row-actions {
    display: flex;
    gap: 0.564vmin;
    flex-shrink: 0;
}

.row-btn {
    height: 2.824vmin;
    padding: 0 1.13vmin;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.226vmin;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 1.355vmin;
    letter-spacing: 0.044vmin;
    cursor: pointer;
    transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
    white-space: nowrap;
}

.row-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent-light);
    color: var(--text);
}

.bail-locked {
    display: flex;
    align-items: center;
    height: 2.824vmin;
    padding: 0 1.13vmin;
    font-size: 1.243vmin;
    color: var(--text-dim);
    letter-spacing: 0.044vmin;
    white-space: nowrap;
}

.row-btn.is-primary {
    border-color: var(--accent-light);
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--text);
}

.input-static {
    height: 4.971vmin;
    display: flex;
    align-items: center;
    padding: 0 1.13vmin;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.564vmin;
    font-size: 1.581vmin;
    color: var(--accent-light);
    letter-spacing: 0.044vmin;
}

.row-btn.is-danger:hover {
    background: rgba(255, 65, 68, 0.22);
    border-color: rgba(255, 65, 68, 0.55);
    color: #ffb5b6;
}

.modal-card {
    width: 56.12vmin;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.355vmin;
}

.input-row {
    display: flex;
    gap: 1.355vmin;
}

.input-row .input-field {
    flex: 1;
    min-width: 0;
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: 0.564vmin;
}

.input-label {
    font-size: 1.13vmin;
    color: var(--text-dim);
    letter-spacing: 0.044vmin;
}

.input-field select {
    height: 4.971vmin;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.564vmin;
    outline: none;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    letter-spacing: 0.044vmin;
    padding: 0 0.904vmin;
    width: 100%;
    cursor: pointer;
}

.input-field select option {
    background: #0a0d13;
    color: var(--text);
}

.input-field input {
    height: 4.971vmin;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.564vmin;
    outline: none;
    color: var(--text);
    caret-color: var(--accent);
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    letter-spacing: 0.044vmin;
    padding: 0 1.13vmin;
    transition: border-color 160ms ease;
    width: 100%;
}

.input-field input:focus {
    border-color: rgba(var(--accent-rgb), 0.45);
}

.input-field input::placeholder {
    color: var(--text-dim);
}

.input-field.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.input-hintline {
    font-size: 1.13vmin;
    color: var(--text-dim);
}

.toggle {
    display: flex;
    gap: 0.451vmin;
    height: 4.971vmin;
    padding: 0.451vmin;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.564vmin;
}

.toggle-opt {
    flex: 1;
    border: none;
    border-radius: 0.338vmin;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 1.355vmin;
    letter-spacing: 0.044vmin;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.toggle-opt.is-active {
    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
    color: #ffffff;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1.13vmin;
}

.step-overlay {
    position: fixed;
    left: 2.824vmin;
    top: 50%;
    transform: translateY(-50%) translateX(-130%);
    z-index: 15;
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    pointer-events: none;
}

.step-overlay.is-open {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

.step-card {
    position: relative;
    min-width: 31.5vmin;
    background-color: var(--panel);
    border-radius: 0.725vmin;
    overflow: hidden;
    box-shadow: 0 1.464vmin 3.66vmin rgba(0, 0, 0, 0.55);
}

.step-card::before {
    left: -3.4vmin;
    top: -1.13vmin;
    width: 30vmin;
    height: 16vmin;
    opacity: 0.5;
}

.step-card .book-glow {
    bottom: -9.5vmin;
    right: -9.5vmin;
    width: 19vmin;
    height: 19vmin;
    opacity: 0.38;
}

.step-card .book-glow-tl {
    top: -9.5vmin;
    left: -9.5vmin;
    bottom: auto;
    right: auto;
    opacity: 0.3;
}

.step-card .book-watermark {
    top: -1.9vmin;
    font-size: 10.2vmin;
    color: rgba(255, 255, 255, 0.03);
}

.step-card .book-stache-tl {
    top: -3.1vmin;
    left: -4.1vmin;
    width: 10.2vmin;
    height: 10.2vmin;
    opacity: 0.7;
}

.step-card .book-stache-br {
    bottom: -5.2vmin;
    right: -5.2vmin;
    width: 12.1vmin;
    height: 12.1vmin;
    opacity: 0.55;
}

.step-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.282vmin;
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb), 0) 0%,
        rgba(var(--accent-rgb), 0.85) 24%,
        rgba(var(--accent-rgb), 0.85) 76%,
        rgba(var(--accent-rgb), 0) 100%);
    pointer-events: none;
    z-index: 5;
}

.step-content {
    position: relative;
    z-index: 5;
    padding: 1.92vmin 2.1vmin 1.92vmin 2.26vmin;
}

.step-divider {
    height: 2px;
    margin: 1.13vmin 0;
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.35) 0%,
        rgba(255, 255, 255, 0.16) 40%,
        rgba(255, 255, 255, 0) 100%);
    opacity: 0.7;
}

.step-head {
    display: flex;
    align-items: center;
    gap: 0.904vmin;
}

.step-dot {
    width: 0.68vmin;
    height: 0.68vmin;
    border-radius: 0.112vmin;
    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
    box-shadow: 0 0 0.677vmin rgba(var(--accent-rgb), 0.5);
    flex-shrink: 0;
}

.step-title {
    font-family: var(--font-display);
    font-size: 2.261vmin;
    letter-spacing: 0.109vmin;
    color: var(--text);
}

.step-counter {
    margin-top: 0.564vmin;
    font-family: var(--font-display);
    font-size: 3.05vmin;
    line-height: 1;
    letter-spacing: 0.109vmin;
    color: var(--accent-light);
}

.step-counter:empty {
    display: none;
}

.step-hints {
    display: flex;
    flex-direction: column;
    gap: 0.564vmin;
}

.step-hint {
    display: flex;
    align-items: center;
    gap: 0.792vmin;
    font-size: 1.355vmin;
    color: var(--text-muted);
    letter-spacing: 0.044vmin;
}

.step-key {
    min-width: 4.067vmin;
    height: 2.486vmin;
    padding: 0 0.564vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-dark);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: 0.226vmin;
    font-family: var(--font-ui);
    font-size: 1.243vmin;
    color: var(--accent-light);
    flex-shrink: 0;
}

.work-card {
    width: 75.64vmin;
}

.work-close {
    position: absolute;
    top: 1.695vmin;
    right: 1.695vmin;
    z-index: 10;
}

.work-head {
    display: flex;
    flex-direction: column;
    gap: 1.243vmin;
}

.work-stage {
    position: relative;
    width: 100%;
    height: 36.6vmin;
    background: linear-gradient(180deg, #171b22 0%, #0d1015 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.564vmin;
    overflow: hidden;
    cursor: crosshair;
}

.work-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.work-dom {
    position: absolute;
    inset: 0;
    display: none;
}

.work.is-dom .work-canvas {
    display: none;
}

.work.is-dom .work-dom {
    display: block;
}

.work.is-dom .work-stage {
    cursor: default;
}

.work-footer {
    display: flex;
    align-items: center;
    gap: 1.13vmin;
}

.work-progress {
    flex: 1;
    height: 1.016vmin;
    background: var(--bg-soft);
    border-radius: 1.13vmin;
    overflow: hidden;
}

.work-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-bot) 0%, var(--accent-top) 100%);
    transition: width 180ms ease;
}

.work-progress-text {
    font-family: var(--font-display);
    font-size: 2.074vmin;
    color: var(--accent-light);
    min-width: 5.649vmin;
    text-align: right;
}

.sort-bins {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.355vmin;
    display: flex;
    gap: 1.355vmin;
    padding: 0 1.355vmin;
}

.sort-bin {
    flex: 1;
    height: 9.76vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-softer);
    border: 0.226vmin dashed rgba(255, 255, 255, 0.16);
    border-radius: 0.564vmin;
    font-family: var(--font-ui);
    font-size: 1.581vmin;
    letter-spacing: 0.044vmin;
    color: var(--text-dim);
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.sort-bin.is-hot {
    border-color: var(--accent-light);
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent-light);
}

.sort-item {
    position: absolute;
    width: 7.93vmin;
    height: 4.88vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.451vmin;
    font-family: var(--font-ui);
    font-size: 1.355vmin;
    color: var(--text);
    cursor: grab;
}

.sort-item.is-dragging {
    cursor: grabbing;
    z-index: 5;
}

.sort-item.is-done {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.sort-item.is-wrong {
    animation: shake 320ms ease;
    border-color: rgba(255, 65, 68, 0.6);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.677vmin); }
    75% { transform: translateX(0.677vmin); }
}

.smash-target {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #5a5f6b 0%, #33373f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.677vmin;
    cursor: pointer;
    transition: transform 90ms ease, opacity 200ms ease;
}

.smash-target:active {
    transform: scale(0.94);
}

.smash-target.is-gone {
    opacity: 0;
    pointer-events: none;
}

.smash-hits {
    font-family: var(--font-display);
    font-size: 1.92vmin;
    color: var(--accent-light);
}

.jail-hud {
    position: fixed;
    right: 2.732vmin;
    bottom: 2.732vmin;
    z-index: 80;
    display: none;
    flex-direction: column;
    gap: 0.655vmin;
}

.jail-hud.is-visible {
    display: flex;
}

.jail-hud.is-editing {
    cursor: grab;
    outline: 1px dashed rgba(var(--accent-rgb), 0.6);
    outline-offset: 0.545vmin;
}

.jail-hud.is-editing:active {
    cursor: grabbing;
}

.hud-controls {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.983vmin;
    display: none;
    align-items: center;
    gap: 0.545vmin;
    white-space: nowrap;
}

.jail-hud.is-editing .hud-controls {
    display: flex;
}

.jail-hud.controls-below .hud-controls {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.983vmin;
}

.hud-ctrl {
    height: 3.06vmin;
    padding: 0 0.983vmin;
    border: 0.5px solid var(--accent-light);
    border-radius: 0.218vmin;
    background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bot) 100%);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 1.311vmin;
    letter-spacing: 0.042vmin;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-ctrl.confirm {
    width: 3.06vmin;
    padding: 0;
}

.hud-ctrl.confirm img {
    width: 1.093vmin;
    height: 1.093vmin;
    filter: brightness(0) invert(1);
}

.hud-ctrl.reset {
    background: var(--bg-soft);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}

.hud-accent {
    width: 36.432vmin;
    height: 0.489vmin;
    background: var(--accent);
    border-radius: 1.18vmin;
    margin-bottom: 0.327vmin;
}

.hud-card {
    position: relative;
    width: 36.432vmin;
    padding: 1.47vmin;
    display: flex;
    flex-direction: column;
    gap: 0.655vmin;
    background: rgba(8, 10, 14, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.545vmin;
    overflow: hidden;
}

.hud-glow {
    position: absolute;
    top: -5.9vmin;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 12.98vmin;
    background: radial-gradient(closest-side,
        rgba(var(--accent-rgb), 0.28) 0%, transparent 100%);
    opacity: 0.45;
    pointer-events: none;
}

.hud-watermark {
    position: absolute;
    right: -1.093vmin;
    bottom: -1.967vmin;
    transform: rotate(-9deg) skewX(-9deg);
    transform-origin: bottom right;
    font-family: var(--font-back);
    font-weight: bold;
    font-size: 7.67vmin;
    line-height: 1;
    letter-spacing: 0.218vmin;
    color: rgba(255, 255, 255, 0.055);
    -webkit-mask-image: linear-gradient(to bottom right, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 90%);
    mask-image: linear-gradient(to bottom right, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 90%);
    pointer-events: none;
}

.hud-row {
    display: flex;
    gap: 0.655vmin;
}

.hud-row .hud-cell {
    flex: 1;
    min-width: 0;
}

.hud-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.655vmin;
    padding: 0.545vmin;
    background: var(--bg-softer);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.327vmin;
    min-width: 0;
}

.hud-cell-icon {
    width: 2.623vmin;
    height: 2.623vmin;
    background: var(--icon-dark);
    border-radius: 0.218vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hud-cell-icon img {
    width: 1.202vmin;
    height: 1.202vmin;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.hud-cell-text {
    display: flex;
    flex-direction: column;
    gap: 0.109vmin;
    min-width: 0;
}

.hud-cell-label {
    font-size: 0.983vmin;
    color: var(--text-dim);
    letter-spacing: 0.042vmin;
}

.hud-cell-value {
    font-size: 1.421vmin;
    line-height: 1.3;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.hud-scroll {
    display: inline-block;
    white-space: nowrap;
}

.hud-scroll.is-scrolling {
    animation: hud-scroll var(--scroll-time, 6s) ease-in-out infinite alternate;
}

@keyframes hud-scroll {
    0%, 18% {
        transform: translateX(0);
    }
    82%, 100% {
        transform: translateX(var(--scroll-dist, 0));
    }
}

.hud-drag-zone {
    position: fixed;
    inset: 1.778vmin;
    display: none;
    border: 2px dashed var(--accent);
    border-radius: 0.462vmin;
    opacity: 0.5;
    pointer-events: none;
    z-index: 75;
}

.hud-drag-zone.is-active {
    display: block;
}

.notify-stack {
    position: fixed;
    left: 3.672vmin;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.22vmin;
    z-index: 81;
    pointer-events: none;
    max-height: 90vh;
}

.notify-stack-right {
    left: auto;
    right: 3.672vmin;
    align-items: flex-end;
}

.notify {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.469vmin;
    align-items: flex-start;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-110%);
    transition: opacity 320ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0.734vmin;
    padding: 1.028vmin 3.672vmin 1.028vmin 1.028vmin;
    text-shadow:
        0 0 0.793vmin rgba(0, 0, 0, 0.55),
        0 0.159vmin 0.317vmin rgba(0, 0, 0, 0.45);
}

.notify::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg,
            rgba(4, 6, 10, 0.88) 0%,
            rgba(4, 6, 10, 0.74) 38%,
            rgba(4, 6, 10, 0.34) 72%,
            transparent 100%),
        radial-gradient(3.013vmin 3.013vmin at 2.696vmin 50%,
            rgba(var(--accent-rgb), 0.22) 0%,
            transparent 100%);
    z-index: 0;
    pointer-events: none;
}

.notify::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.75) 0%,
        rgba(var(--accent-rgb), 0.25) 45%,
        transparent 100%);
    z-index: 0;
    pointer-events: none;
}

.notify.is-right::before {
    background:
        linear-gradient(270deg,
            rgba(4, 6, 10, 0.88) 0%,
            rgba(4, 6, 10, 0.74) 38%,
            rgba(4, 6, 10, 0.34) 72%,
            transparent 100%),
        radial-gradient(3.013vmin 3.013vmin at calc(100% - 2.696vmin) 50%,
            rgba(var(--accent-rgb), 0.22) 0%,
            transparent 100%);
}

.notify.is-right::after {
    background: linear-gradient(270deg,
        rgba(var(--accent-rgb), 0.75) 0%,
        rgba(var(--accent-rgb), 0.25) 45%,
        transparent 100%);
}

.notify.is-open {
    opacity: 1;
    transform: translateX(0);
}

.notify.is-right {
    transform: translateX(110%);
    align-items: flex-end;
    padding: 1.028vmin 1.028vmin 1.028vmin 3.672vmin;
}

.notify.is-right.is-open {
    transform: translateX(0);
}

.notify.is-right .notify-info {
    flex-direction: row-reverse;
}

.notify.is-right .notify-text {
    align-items: flex-end;
}

.notify.is-right .notify-label,
.notify.is-right .notify-value {
    text-align: right;
}

.notify-info {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.469vmin;
    align-items: center;
    flex-shrink: 0;
}

.notify-icon {
    width: 3.526vmin;
    height: 3.526vmin;
    border-radius: 0.734vmin;
    border: 0.5px solid var(--accent);
    background: transparent;
    box-shadow: 0 0 1.903vmin rgba(var(--accent-rgb), 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.notify-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.441vmin;
    transform: translateX(-50%) rotate(45deg);
    width: 0.734vmin;
    height: 0.734vmin;
    background: var(--accent);
    border-radius: 0.147vmin;
    opacity: 0.8;
    pointer-events: none;
}

.notify-icon-inner {
    position: relative;
    width: 3.232vmin;
    height: 3.232vmin;
    border-radius: 0.587vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--accent);
}

.notify-icon-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    opacity: 0.22;
    border-radius: 0.587vmin;
    z-index: 0;
    pointer-events: none;
}

.notify-icon-inner > * {
    position: relative;
    z-index: 1;
}

.notify-icon-inner svg {
    display: block;
    width: 1.293vmin;
    height: 1.586vmin;
    color: var(--accent);
}

.notify .vline {
    width: 1px;
    height: 2.939vmin;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.notify-text {
    display: flex;
    flex-direction: column;
    gap: 0.439vmin;
    align-items: flex-start;
    font-family: var(--font-ui);
    line-height: 1;
}

.notify-label {
    font-size: 1.469vmin;
    line-height: 2.496vmin;
    color: var(--text-dim);
    letter-spacing: 0.057vmin;
}

.notify-value {
    font-size: 1.762vmin;
    line-height: 2.203vmin;
    color: var(--text);
    letter-spacing: 0.057vmin;
    margin: 0;
    white-space: nowrap;
}

.notify-value .hl,
.notify-value .hud-edit-cmd {
    color: var(--accent);
}

.screen-fade {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1500ms ease-in-out;
}

.screen-fade.is-black {
    opacity: 1;
}