/* ===========================================================================
   Mafia — Pelinjohtajan paneeli
   Suunta: 1930-luvun tapauskansio. Paperinkarheat pinnat mustalla, punaiset
   leimat, raskas kapea otsikkokirjasin ja ladotut hiusviivat.

   Punainen ei ole koskaan leipätekstiä: se on rakennetta, leimoja,
   tuhoavia toimintoja ja ajastimen kiirettä. Punainen mustalla pienessä
   koossa on hämärässä huoneessa lukukelvotonta.
   =========================================================================== */

/* --- Kirjasimet. Itse tarjoiltuna, ei yhtään ulkoista pyyntöä. ----------- */
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-latin.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Muuttujat ---------------------------------------------------------- */
:root {
    --ink: #08080a;
    --ink-2: #101014;
    --ink-3: #191920;
    --hair: #2b2b33;
    --blood: #b31220;
    /* Punainen teksti mustalla ei yllä 4.5:1:een arvolla #e0202f. Sävy on
       nostettu juuri sen verran, että pienikin punainen teksti on luettavaa
       hämärässä huoneessa — ilman että se lakkaa olemasta veren väri. */
    --blood-hot: #ef4452;
    --bone: #f2efe9;
    --bone-dim: #9a968f;
    /* Toissijainen teksti, joka ei kestä lisäksi läpinäkyvyyttä. */
    --bone-dim-2: #b3afa7;
    --gold: #c9a227;

    --display: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
    --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    --tap: 48px;
    --radius: 3px;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

    color-scheme: dark;
}

/* --- Nollaus ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: var(--bone);
    text-decoration-color: var(--blood-hot);
    text-underline-offset: 3px;
}

:focus-visible {
    /* Luullinen, ei punainen: punainen kehys punaisen reunuksen vieressä
       (esim. .btn--primary) ei erottuisi lainkaan. */
    outline: 3px solid var(--bone);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--blood);
    color: var(--bone);
    padding: var(--s3) var(--s4);
}

.skip-link:focus {
    left: var(--s3);
    top: var(--s3);
}

.mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --- Leima -------------------------------------------------------------- */
.stamp {
    display: inline-block;
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--blood-hot);
    border: 2px solid var(--blood);
    padding: 5px 9px 4px;
    transform: rotate(-1.5deg);
    background: rgba(179, 18, 32, 0.06);
}

/* ===========================================================================
   SIVUKEHYS (etusivu, säännöt, roolit)
   =========================================================================== */
.site-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: calc(var(--s4) + var(--safe-t)) calc(var(--s4) + var(--safe-r)) var(--s4) calc(var(--s4) + var(--safe-l));
    border-bottom: 1px solid var(--hair);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bone);
}

.site-nav {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--bone-dim);
    padding: var(--s2) 0;
}

.site-nav a[aria-current='page'],
.site-nav a:hover {
    color: var(--bone);
    box-shadow: inset 0 -2px 0 var(--blood);
}

.doc-main {
    position: relative;
    z-index: 1;
    padding: var(--s5) calc(var(--s4) + var(--safe-r)) var(--s7) calc(var(--s4) + var(--safe-l));
}

.site-foot {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--hair);
    padding: var(--s4) calc(var(--s4) + var(--safe-r)) calc(var(--s5) + var(--safe-b)) calc(var(--s4) + var(--safe-l));
    color: var(--bone-dim);
    font-size: 0.9rem;
}

/* --- Etusivu ------------------------------------------------------------ */
.hero {
    max-width: 46rem;
    margin: 0 auto var(--s6);
    text-align: center;
}

.hero__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(3.4rem, 18vw, 7rem);
    line-height: 0.9;
    letter-spacing: 0.06em;
    margin: var(--s5) 0 var(--s3);
    text-transform: uppercase;
}

.hero__subtitle {
    margin: 0 0 var(--s5);
}

.hero__lead {
    color: var(--bone-dim);
    margin: 0 auto;
    max-width: 34rem;
}

.entries {
    display: grid;
    gap: var(--s3);
    max-width: 46rem;
    margin: 0 auto;
}

.entry {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s4);
    align-items: baseline;
    padding: var(--s4);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--blood);
    text-decoration: none;
    min-height: var(--tap);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.entry:hover,
.entry:focus-visible {
    background: var(--ink-3);
    border-left-color: var(--blood-hot);
}

.entry--primary {
    background: linear-gradient(180deg, rgba(179, 18, 32, 0.14), rgba(179, 18, 32, 0.02));
}

.entry__index {
    grid-row: 1 / 3;
    font-family: var(--mono);
    color: var(--blood-hot);
    font-size: 0.85rem;
}

.entry__title {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1.5rem;
}

.entry__hint {
    color: var(--bone-dim);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* --- Dokumenttisivut ---------------------------------------------------- */
.doc {
    max-width: 46rem;
    margin: 0 auto;
}

.doc__title {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.05;
    margin: 0 0 var(--s4);
}

.doc__h2 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.25rem;
    margin: var(--s6) 0 var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--hair);
}

.doc__lead {
    font-size: 1.1rem;
    color: var(--bone);
}

.doc__note {
    color: var(--bone-dim);
    font-size: 0.95rem;
    border-left: 2px solid var(--blood);
    padding-left: var(--s3);
}

.doc__list {
    padding-left: 1.2em;
}

.doc__list li {
    margin-bottom: var(--s2);
}

.doc__list--num {
    list-style: decimal;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.doc__table {
    border-collapse: collapse;
    width: 100%;
    min-width: 18rem;
}

.doc__table th,
.doc__table td {
    text-align: left;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--hair);
}

.doc__table th {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: var(--bone-dim);
}

.doc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-top: var(--s6);
}

/* --- Käsimerkit --------------------------------------------------------- */
.signs {
    display: grid;
    gap: var(--s4);
    margin: var(--s4) 0;
}

.sign {
    margin: 0;
    display: grid;
    gap: var(--s3);
    align-items: start;
}

/* Merkit istuvat suoraan tummalla pinnalla ilman vaaleaa taustalevyä:
   punainen ääriviiva erottuu mustaa vasten paremmin kuin paperia vasten,
   ja kolme elettä on siten helpompi erottaa toisistaan yhdellä silmäyksellä. */
.sign__plate {
    background: var(--ink-2);
    border: 1px solid var(--hair);
    padding: var(--s4);
    display: grid;
    place-items: center;
}

.sign__img {
    width: 100%;
    max-width: 240px;
    height: auto;
    display: block;
}

.sign__caption {
    display: grid;
    gap: var(--s2);
    justify-items: start;
}

.sign__title {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
}

.sign__body {
    color: var(--bone-dim);
    font-size: 0.95rem;
}

.signs--compact .sign__plate {
    padding: var(--s3);
}

/* --- Roolikortit -------------------------------------------------------- */
.rolecards {
    display: grid;
    gap: var(--s3);
}

.rolecard {
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--blood);
}

.rolecard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4);
    cursor: pointer;
    min-height: var(--tap);
    list-style: none;
}

.rolecard__head::-webkit-details-marker {
    display: none;
}

.rolecard__name {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.3rem;
}

.rolecard__card {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--bone-dim);
}

.rolecard__body {
    padding: 0 var(--s4) var(--s4);
    display: grid;
    gap: var(--s3);
}

.rolecard__plate {
    background: var(--ink-3);
    padding: var(--s3);
    justify-self: start;
    border: 1px solid var(--hair);
}

.rolecard__plate img {
    display: block;
    width: 140px;
    height: auto;
}

.rolecard__win strong,
.rolecard__tip strong {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--bone-dim);
}

/* ===========================================================================
   PAINIKKEET JA KENTÄT
   =========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: var(--tap);
    padding: var(--s3) var(--s5);
    border: 1px solid var(--hair);
    background: var(--ink-3);
    color: var(--bone);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--blood);
    border-color: var(--blood-hot);
    color: var(--bone);
}

.btn--primary:hover {
    background: var(--blood-hot);
}

.btn--danger {
    background: transparent;
    border-color: var(--blood-hot);
    color: var(--blood-hot);
}

.btn--danger:hover {
    background: var(--blood);
    color: var(--bone);
}

.btn--ghost {
    background: transparent;
    border-color: var(--hair);
    color: var(--bone);
}

.btn--ghost:hover {
    border-color: var(--bone-dim);
}

.btn--block {
    width: 100%;
}

.btn--small {
    min-height: var(--tap);
    padding: var(--s2) var(--s3);
    font-size: 0.82rem;
}

.btn--fake {
    pointer-events: none;
}

/* Läpinäkyvyys himmentäisi myös taustan, jolloin lukitun painikkeen teksti
   putoaisi 2.5:1:een. Lukittu tila piirretään siksi omilla väreillään. */
.btn[disabled] {
    opacity: 1;
    background: var(--ink-2);
    border-color: var(--hair);
    color: #8a8781;
    cursor: not-allowed;
}

.field {
    display: flex;
    gap: var(--s2);
    align-items: stretch;
    margin: var(--s4) 0 var(--s2);
    flex-wrap: wrap;
}

.field__label {
    align-self: center;
    color: var(--bone-dim);
    font-size: 0.9rem;
}

.field__input {
    flex: 1 1 10rem;
    min-height: var(--tap);
    padding: var(--s2) var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone);
    font-size: 1.05rem;
}

.field__input:focus {
    border-color: var(--blood-hot);
}

.chip {
    min-height: var(--tap);
    padding: var(--s2) var(--s4);
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone-dim);
    font-family: var(--mono);
    font-size: 0.88rem;
}

.chip.is-on {
    border-color: var(--blood-hot);
    color: var(--bone);
    background: rgba(179, 18, 32, 0.16);
}

.chiprow,
.rowbtns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s3) 0;
}

.iconbtn {
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 var(--s3);
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.iconbtn:hover {
    border-color: var(--bone-dim);
}

.iconbtn.is-off {
    opacity: 0.7;
}

.iconbtn.is-on {
    border-color: var(--blood-hot);
    color: var(--blood-hot);
}

.iconbtn--danger {
    color: var(--blood-hot);
    border-color: transparent;
    font-size: 1.4rem;
    line-height: 1;
}

.iconbtn[disabled] {
    opacity: 1;
    color: #8a8781;
    border-color: var(--ink-3);
    cursor: not-allowed;
}

/* ===========================================================================
   PANEELIN KEHYS
   =========================================================================== */
/* EI overflow: hidden.
   Se piilotti aiemmin kaiken mikä ei mahtunut ruudulle, eikä sivua voinut
   vierittää — sisältö oli yksinkertaisesti saavuttamattomissa. Nyt kehyksen
   korkeus on tarkka (ks. .shell), joten mitään ei jää yli. Jos selain ei
   ymmärrä dvh-yksikköä, sivu vierittyy normaalisti eikä mitään katoa. */
.page-panel {
    overscroll-behavior-y: none;
}

.app-main {
    position: relative;
    z-index: 1;
}

.app__boot {
    padding: var(--s6);
    color: var(--bone-dim);
    text-align: center;
}

/* Korkeuden on oltava TARKKA, ei min-height.
   min-heightillä kehys venyy sisällön mukaan, jolloin .stage ei koskaan saa
   rajattua korkeutta eikä sen overflow-y: auto tee mitään — pitkä pelaajalista
   työntyi ruudun alareunan ohi eikä siihen päässyt käsiksi.
   dvh pienenee kun mobiiliselaimen osoiterivi on näkyvissä; vh jää varalle. */
.shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.hud {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: calc(var(--s2) + var(--safe-t)) calc(var(--s3) + var(--safe-r)) var(--s2) calc(var(--s3) + var(--safe-l));
    background: rgba(8, 8, 10, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hair);
}

.hud__left {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hud__phase {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1.05rem;
    line-height: 1;
}

.hud__meta {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
}

.hud__stat {
    font-size: 0.82rem;
    color: var(--bone-dim);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hud__stat--dim {
    color: var(--bone-dim-2);
}

.hud__tools {
    display: flex;
    gap: var(--s1);
    flex-shrink: 0;
}

.stage {
    flex: 1 1 auto;
    /* min-height: 0 on pakollinen: ilman sitä flex-lapsen automaattinen
       vähimmäiskoko on sen sisällön korkeus, jolloin se ei kutistu eikä
       vieritys ala koskaan. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: var(--s4) calc(var(--s4) + var(--safe-r)) var(--s4) calc(var(--s4) + var(--safe-l));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pane {
    min-width: 0;
}

.pane--panel {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3) calc(var(--s4) + var(--safe-r)) calc(var(--s3) + var(--safe-b)) calc(var(--s4) + var(--safe-l));
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.6), var(--ink) 40%);
    border-top: 1px solid var(--hair);
}

.screen__title {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1.05;
    margin: 0;
}

.screen__h2 {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.05rem;
    margin: var(--s4) 0 var(--s2);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--hair);
}

.screen__lead {
    margin: 0;
    color: var(--bone-dim);
}

.screen__note {
    margin: 0;
    color: var(--bone-dim);
    font-size: 0.9rem;
}

.instruction {
    margin: 0;
    font-size: 1.05rem;
    padding: var(--s3);
    background: var(--ink-2);
    border-left: 3px solid var(--hair);
}

.instruction--warn {
    border-left-color: var(--blood);
}

.countline {
    margin: 0;
    color: var(--bone-dim);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.bigcount {
    margin: 0;
    font-size: clamp(1.4rem, 5vw, 2rem);
    letter-spacing: 0.02em;
}

.bigcount.is-ok {
    color: var(--gold);
}

.alert {
    margin: 0;
    padding: var(--s3);
    border: 1px solid var(--blood);
    border-left-width: 3px;
    background: rgba(179, 18, 32, 0.1);
    font-size: 0.98rem;
}

.alert--warn {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.08);
}

.empty {
    color: var(--bone-dim);
    padding: var(--s4);
    border: 1px dashed var(--hair);
    text-align: center;
}

/* ===========================================================================
   LUE ÄÄNEEN -KORTTI — sovelluksen tunnusmerkki
   =========================================================================== */
.readcard {
    position: relative;
    background:
        var(--grain),
        linear-gradient(184deg, #16161c, #101014 70%);
    background-blend-mode: overlay, normal;
    border: 1px solid var(--hair);
    border-top: none;
    /* Pystysuunnassa flex, jotta leima varaa oman tilansa eikä jää tekstin
       päälle silloin kun kortti on kapea (vaakataso, kaksipalstainen näkymä). */
    display: flex;
    flex-direction: column;
    padding: var(--s4);
    transform: rotate(-0.7deg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    margin: var(--s2) var(--s1) var(--s4);
    clip-path: polygon(
        0% 7px, 4% 2px, 9% 8px, 14% 1px, 19% 6px, 25% 2px, 31% 9px, 37% 3px,
        43% 7px, 49% 1px, 55% 6px, 61% 2px, 67% 8px, 73% 3px, 79% 9px, 85% 2px,
        91% 7px, 96% 1px, 100% 6px, 100% 100%, 0% 100%
    );
}

.readcard::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--blood);
    opacity: 0.7;
}

.readcard--tight {
    margin-bottom: var(--s3);
}

/* Leima on tekstivirrassa, ei absoluuttisesti sijoitettuna. Absoluuttisena
   se ei varannut tilaa ja peitti ääneen luettavan rivin ensimmäisen rivin —
   ja clip-path olisi leikannut siitä ison osan pois. */
.readcard__kicker {
    align-self: flex-end;
    margin-bottom: var(--s3);
}

.readcard__line {
    margin: 0 0 var(--s3);
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(24px, 7.5vw, 32px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--bone);
}

.readcard__line:last-of-type {
    margin-bottom: 0;
}

.readcard__line--small {
    font-size: clamp(19px, 3.6vw, 23px);
    color: var(--bone-dim);
}

.readcard__reroll {
    /* Kortti on flex-pylväs, joten ilman tätä painike venyisi koko leveydelle. */
    align-self: flex-start;
    margin-top: var(--s4);
    min-height: var(--tap);
    padding: var(--s2) var(--s3);
    background: transparent;
    border: 1px dashed var(--hair);
    border-radius: var(--radius);
    color: var(--bone-dim);
    font-family: var(--mono);
    font-size: 0.8rem;
}

.readcard__reroll:hover {
    color: var(--bone);
    border-color: var(--bone-dim);
}

.readcard__note {
    display: block;
    margin-top: var(--s3);
    color: var(--bone-dim-2);
    font-size: 0.8rem;
    font-family: var(--mono);
}

/* ===========================================================================
   PÖYTÄ
   =========================================================================== */
.table {
    display: block;
}

/* Reunimmaiset paikkakortit työntyvät ellipsin ulkopuolelle puolella
   leveydellään. Sivupehmuste antaa niille tilan, jottei paneeli ala vierimään
   vaakasuunnassa eikä reunimmaisen kortin fokusrengas leikkaudu. */
.table--ellipse {
    padding-inline: 7%;
}

.table__ring {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 62dvh;
    margin: 0 auto;
}

.table__surface {
    position: absolute;
    inset: 22% 24%;
    border: 1px solid var(--hair);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #14141a, #0b0b0e 70%);
    display: grid;
    place-content: center;
    text-align: center;
    gap: var(--s1);
    padding: var(--s3);
}

.table__surfaceLabel {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.9rem;
    color: var(--bone-dim);
}

.table__surfaceCount {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--bone-dim-2);
}

/* Ellipsissä paikkanumero ja roolimerkki nostetaan kortin kulmiin, jotta
   nimi saa koko leveyden. Rivissä ne veisivät noin 46 px, jolloin nimelle
   jäisi puhelimella vain ~28 px ja jokainen nimi hajoaisi kirjainpinoksi. */
.table--ellipse .seat {
    position: absolute;
    transform: translate(-50%, -50%);
    width: min(30%, calc(340% / var(--seats, 8)));
    min-width: 84px;
    max-width: 150px;
    padding-top: 19px;
}

.table--ellipse .seat__body {
    display: block;
}

.table--ellipse .seat__num {
    position: absolute;
    top: 3px;
    left: 6px;
}

.table--ellipse .seat__role {
    position: absolute;
    top: 2px;
    right: 4px;
    margin-left: 0;
}

.table--ellipse .seat__name {
    display: block;
}

.table--dense .seat {
    padding: var(--s1);
}

.table--dense .seat__name {
    font-size: 0.9rem;
}

.table--dense .seat__num {
    font-size: 0.82rem;
}

.table--dense .seat__role {
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
}

.table__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
}

.table__empty {
    color: var(--bone-dim);
    text-align: center;
    padding: var(--s5);
}

.seat {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: var(--s2) var(--s2);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    text-align: left;
    color: var(--bone);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.seat__body {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
}

.seat__num {
    font-size: 0.82rem;
    color: var(--bone-dim-2);
    flex-shrink: 0;
}

.seat__name {
    font-size: 1rem;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.seat__role {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.seat__role--mafia {
    background: var(--blood);
    border-color: var(--blood-hot);
    color: var(--bone);
}

.seat__role--enkeli {
    color: var(--bone);
}

.seat__role--sheriffi {
    color: var(--gold);
}

.seat.is-selected {
    border-color: var(--blood-hot);
    background: rgba(179, 18, 32, 0.2);
    box-shadow: inset 0 0 0 1px var(--blood-hot);
}

/* Estetty paikka on juuri se, jonka narratorin pitää pystyä lukemaan
   ymmärtääkseen miksi napautus ei tehnyt mitään. Se merkitään katkoviivalla
   ja yliviivauksella, ei himmentämällä lukukelvottomaksi. */
.seat.is-blocked {
    opacity: 0.75;
    border-style: dashed;
}

.seat.is-blocked .seat__name {
    text-decoration: line-through;
    text-decoration-color: var(--blood-hot);
}

.seat.is-static {
    cursor: default;
}

.seat--count {
    display: grid;
    gap: var(--s2);
    padding: var(--s2);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
}

.counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}

.counter__btn {
    min-width: var(--tap);
    min-height: var(--tap);
    border: 1px solid var(--hair);
    background: var(--ink-3);
    border-radius: var(--radius);
    color: var(--bone);
    font-size: 1.3rem;
    line-height: 1;
}

.counter__btn--plus {
    border-color: var(--blood);
    color: var(--blood-hot);
}

.counter__value {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.2rem;
}

/* --- Kuolleet ----------------------------------------------------------- */
.dead {
    margin-top: var(--s3);
    border: 1px solid var(--hair);
    background: var(--ink-2);
}

.dead__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    min-height: var(--tap);
    cursor: pointer;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    color: var(--bone-dim);
    list-style: none;
}

.dead__summary::-webkit-details-marker {
    display: none;
}

.dead__count {
    color: var(--blood-hot);
}

.dead__list {
    margin: 0;
    padding: 0 var(--s3) var(--s3);
    list-style: none;
    display: grid;
    gap: var(--s1);
}

.dead__item {
    display: flex;
    gap: var(--s2);
    align-items: baseline;
    color: var(--bone-dim);
    font-size: 0.92rem;
    border-top: 1px solid var(--hair);
    padding-top: var(--s2);
}

.dead__seat {
    font-size: 0.82rem;
    color: var(--bone-dim-2);
}

/* ===========================================================================
   VALMISTELU
   =========================================================================== */
.playerlist,
.orderlist {
    list-style: none;
    margin: var(--s3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s1);
}

.playerlist__item,
.orderlist__item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) var(--s2);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    min-height: var(--tap);
}

.playerlist__seat,
.orderlist__seat {
    font-size: 0.82rem;
    color: var(--bone-dim-2);
    flex-shrink: 0;
}

.playerlist__name {
    flex: 1 1 auto;
    text-align: left;
    background: none;
    border: none;
    padding: var(--s2) 0;
    min-height: var(--tap);
    font-size: 1.02rem;
}

.playerlist__edit {
    flex: 1 1 auto;
    min-height: var(--tap);
    background: var(--ink-3);
    border: 1px solid var(--blood-hot);
    border-radius: var(--radius);
    padding: var(--s2);
    font-size: 1.02rem;
}

.orderlist__name {
    flex: 1 1 auto;
}

.orderlist__handle {
    touch-action: none;
    cursor: grab;
    padding: var(--s2);
    min-width: var(--tap);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bone-dim);
    user-select: none;
}

.orderlist__moves {
    display: flex;
    gap: var(--s1);
}

.orderlist__item.is-dragging {
    border-color: var(--blood-hot);
    background: var(--ink-3);
    opacity: 0.9;
}

.steppers {
    display: grid;
    gap: var(--s2);
}

.stepper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s2) var(--s3);
    padding: var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
}

.stepper__label {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.stepper__control {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.stepper__btn {
    min-width: var(--tap);
    min-height: var(--tap);
    border: 1px solid var(--hair);
    background: var(--ink-3);
    border-radius: var(--radius);
    color: var(--bone);
    font-size: 1.3rem;
    line-height: 1;
}

.stepper__btn[disabled] {
    opacity: 1;
    color: #8a8781;
    border-color: var(--ink-3);
    cursor: not-allowed;
}

.stepper__value {
    min-width: 2.2ch;
    text-align: center;
    font-size: 1.4rem;
}

.stepper__hint {
    grid-column: 1 / -1;
    color: var(--bone-dim);
    font-size: 0.85rem;
}

.stepper--static .stepper__value {
    justify-self: end;
}

.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s2);
}

.checklist__item {
    display: flex;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--hair);
    border-radius: var(--radius);
}

.checklist__item.is-done {
    border-left-color: var(--gold);
    opacity: 0.9;
}

.checklist__check {
    flex-shrink: 0;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--hair);
    background: var(--ink-3);
    border-radius: var(--radius);
    color: var(--gold);
    font-size: 1.2rem;
}

.checklist__body {
    display: grid;
    gap: var(--s1);
    min-width: 0;
}

.checklist__title {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.95rem;
}

.checklist__text {
    color: var(--bone-dim);
    font-size: 0.95rem;
}

.checklist__link {
    font-size: 0.9rem;
    justify-self: start;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
}

/* ===========================================================================
   YÖ
   =========================================================================== */
.signpanel {
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    padding: var(--s4);
    display: grid;
    gap: var(--s3);
    justify-items: center;
    text-align: center;
}

.signpanel.is-open {
    border-color: var(--blood);
}

.signpanel__index {
    font-size: 0.85rem;
    color: var(--bone-dim);
}

.signpanel__target {
    margin: 0;
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    justify-content: center;
}

.signpanel__targetLabel {
    color: var(--bone-dim);
}

.signpanel__shield {
    width: 100%;
    min-height: 220px;
    display: grid;
    gap: var(--s4);
    place-content: center;
    padding: var(--s5);
    background: repeating-linear-gradient(135deg, #101014 0 12px, #16161c 12px 24px);
    border: 2px dashed var(--blood);
    border-radius: var(--radius);
    color: var(--bone-dim);
}

.signpanel__shieldText {
    max-width: 26rem;
    font-size: 0.98rem;
}

.signpanel__face {
    display: grid;
    gap: var(--s3);
    justify-items: center;
}

.signpanel__img {
    background: var(--ink);
    border: 1px solid var(--hair);
    padding: var(--s3);
    width: min(72vw, 300px);
    height: auto;
}

.signpanel__label {
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    padding: 8px 14px 6px;
}

.signpanel__instruction {
    margin: 0;
    font-size: 1.05rem;
}

.signpanel__done {
    color: var(--gold);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.hold {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    padding: var(--s4) 0;
}

.hold__ring {
    --hold-progress: 0;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(var(--blood) calc(var(--hold-progress) * 360deg), var(--ink-3) 0);
    position: relative;
}

.hold__ring::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid var(--hair);
}

.hold__value {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
}

.hold__text {
    margin: 0;
    color: var(--bone-dim);
    font-size: 0.95rem;
    text-align: center;
}

/* ===========================================================================
   PÄIVÄ
   =========================================================================== */
.timer {
    display: grid;
    gap: var(--s3);
    justify-items: center;
    padding: var(--s4);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
}

.timer__label {
    justify-self: start;
}

.timer__readout {
    font-size: clamp(3.2rem, 16vw, 6rem);
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.timer__readout.is-urgent {
    color: var(--blood-hot);
    animation: pulse 1s ease-in-out infinite;
}

.timer__readout.is-over {
    color: var(--bone-dim);
    opacity: 0.75;
    animation: none;
}

/* Sykkeen pohja pidetään korkealla: 0.45 pudottaisi lukeman 1.6:1:een
   puoleksi sekunniksi joka sekunti, eli juuri kun se pitää lukea. */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.timer__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    justify-content: center;
}

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    justify-content: center;
}

.presets__custom {
    width: 6rem;
    min-height: var(--tap);
    padding: var(--s2);
    background: var(--ink-3);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone);
}

.blank {
    display: grid;
    gap: var(--s2);
    padding: var(--s3);
    border: 1px solid var(--hair);
    background: var(--ink-2);
}

.blank__label {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

.blank__hint {
    color: var(--bone-dim);
    font-size: 0.85rem;
}

.candidates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.candidates__item {
    padding: var(--s2) var(--s3);
    border: 1px solid var(--hair);
    background: var(--ink-2);
    font-family: var(--mono);
    font-size: 0.9rem;
}

.pickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--s2);
}

.pickgrid__item {
    min-height: 56px;
    padding: var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone);
    font-size: 1rem;
}

.pickgrid__item.is-selected {
    border-color: var(--blood-hot);
    background: rgba(179, 18, 32, 0.2);
}

.draw {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    padding: var(--s6) var(--s4);
    border: 1px solid var(--blood);
    background: var(--ink-2);
}

.draw__name {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: clamp(2rem, 9vw, 3.4rem);
    line-height: 1;
}

.votelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s1);
}

.votelist__item {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
}

.votelist__count {
    color: var(--gold);
    font-size: 1.2rem;
}

/* ===========================================================================
   LOPPU
   =========================================================================== */
.verdict {
    font-size: clamp(1.6rem, 8vw, 3rem);
    letter-spacing: 0.16em;
    padding: 10px 16px 8px;
    align-self: start;
    margin: var(--s3) 0;
}

.reveal,
.recap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s1);
}

.reveal__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--ink-2);
    border: 1px solid var(--hair);
}

/* Kuolleiden roolit ovat juuri se tieto, jonka takia tätä ruutua katsotaan.
   Kuolema merkitään reunuksella ja yliviivauksella, ei himmentämällä. */
.reveal__item.is-dead {
    border-left: 3px solid var(--blood);
}

.reveal__item.is-dead .reveal__name {
    text-decoration: line-through;
    text-decoration-color: var(--blood-hot);
}

.reveal__seat {
    font-size: 0.82rem;
    color: var(--bone-dim);
}

.reveal__role {
    grid-column: 2 / 3;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: var(--bone-dim);
}

.reveal__role--mafia {
    color: var(--blood-hot);
}

.reveal__role--sheriffi {
    color: var(--gold);
}

.reveal__fate {
    grid-row: 1 / 3;
    grid-column: 3 / 4;
    font-size: 0.85rem;
    color: var(--bone-dim);
}

.reveal__name {
    grid-column: 2 / 3;
    min-width: 0;
    font-size: 1.02rem;
}

.recap__item {
    display: flex;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--hair);
}

.recap__when {
    flex-shrink: 0;
    color: var(--blood-hot);
    font-size: 0.85rem;
    min-width: 5.5rem;
}

.recap__what {
    color: var(--bone-dim);
    font-size: 0.95rem;
}

/* ===========================================================================
   ALOITUSNÄKYMÄ
   =========================================================================== */
/* Aloitusnäkymässä ei ole .stagea, joten se vierittää itse. Kehyksen tarkan
   korkeuden ansiosta tämä oikeasti toimii: kuudes tallennettu peli on
   saavutettavissa myös pienellä puhelimella. */
.shell--start {
    padding: 0 calc(var(--s4) + var(--safe-r)) calc(var(--s5) + var(--safe-b)) calc(var(--s4) + var(--safe-l));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.starthead {
    padding: calc(var(--s4) + var(--safe-t)) 0 var(--s4);
}

.starthead__back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.9rem;
    color: var(--bone-dim);
    text-decoration: none;
}

.startbody {
    display: grid;
    gap: var(--s4);
    max-width: 34rem;
    margin: 0 auto;
    width: 100%;
}

.startlist {
    display: grid;
    gap: var(--s2);
}

.startlist__item {
    display: grid;
    gap: var(--s1);
    text-align: left;
    padding: var(--s3);
    min-height: var(--tap);
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--blood);
    border-radius: var(--radius);
    color: var(--bone);
}

.startlist__name {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.startlist__meta {
    color: var(--bone-dim);
    font-size: 0.88rem;
}

/* ===========================================================================
   LAATIKOT, BANNERIT, TOASTIT
   =========================================================================== */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(4, 4, 6, 0.72);
    backdrop-filter: blur(3px);
    padding: var(--s4) calc(var(--s3) + var(--safe-r)) calc(var(--s3) + var(--safe-b)) calc(var(--s3) + var(--safe-l));
}

.sheet__panel {
    width: 100%;
    max-width: 34rem;
    /* vh mittaa ison näkymäportin, mutta .sheet on fixed eli nykyisen
       kokoinen — 88vh työntäisi otsikon ruudun yläreunan ulkopuolelle
       silloin kun selaimen osoiterivi on näkyvissä. */
    max-height: min(88dvh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ink-2);
    border: 1px solid var(--hair);
    border-top: 3px solid var(--blood);
    border-radius: var(--radius);
    padding: var(--s4);
    display: grid;
    gap: var(--s3);
}

.sheet__panel--wide {
    max-width: 44rem;
}

.sheet__title {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.2rem;
    line-height: 1.2;
    margin: 0;
}

.sheet__body {
    margin: 0;
    color: var(--bone-dim);
}

/* Sisältökääre on olemassa vain uudelleenpiirtoa varten — se ei saa
   muuttaa asettelua, joten se katoaa gridistä. */
.sheet__content {
    display: contents;
}

.sheet__actions {
    display: grid;
    gap: var(--s2);
    position: sticky;
    bottom: 0;
    background: var(--ink-2);
    padding-top: var(--s2);
    padding-bottom: var(--s2);
}

body.has-sheet {
    overflow: hidden;
}

.history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s2);
}

.history__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s2) var(--s3);
    align-items: center;
    padding: var(--s2) var(--s3);
    background: var(--ink-3);
    border: 1px solid var(--hair);
}

.history__meta {
    grid-column: 1 / 2;
    display: flex;
    gap: var(--s2);
    font-size: 0.82rem;
    color: var(--bone-dim);
}

.history__label {
    grid-column: 1 / 2;
    font-size: 0.98rem;
}

.history__item .btn {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.history__empty {
    color: var(--bone-dim);
    padding: var(--s4);
    text-align: center;
}

.settings {
    display: grid;
    gap: var(--s3);
}

.settings__h {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    color: var(--bone-dim);
    margin: var(--s3) 0 0;
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--hair);
}

.settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: var(--tap);
}

.settings__block {
    display: grid;
    gap: var(--s2);
}

.settings__label {
    font-size: 0.98rem;
}

.settings__note {
    color: var(--bone-dim);
    font-size: 0.85rem;
}

.settings__range {
    flex: 1 1 8rem;
    accent-color: var(--blood-hot);
    min-height: var(--tap);
}

.settings__field {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.settings__number {
    width: 5.5rem;
    min-height: var(--tap);
    padding: var(--s2);
    background: var(--ink-3);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    color: var(--bone);
}

.settings__unit {
    color: var(--bone-dim);
    font-size: 0.85rem;
}

.settings__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

.settings__advanced summary {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
    color: var(--bone-dim);
}

.toggle {
    display: flex;
    align-items: center;
    gap: var(--s3);
    background: none;
    border: none;
    padding: var(--s2) 0;
    min-height: var(--tap);
    text-align: left;
    width: 100%;
}

.toggle__track {
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    background: var(--ink-3);
    border: 1px solid var(--hair);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bone-dim);
    transition: transform 0.15s ease, background 0.15s ease;
}

.toggle.is-on .toggle__track {
    background: rgba(179, 18, 32, 0.35);
    border-color: var(--blood-hot);
}

.toggle.is-on .toggle__knob {
    transform: translateX(22px);
    background: var(--bone);
}

.toggle__label {
    font-size: 0.98rem;
}

.banner {
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) calc(var(--s4) + var(--safe-r)) var(--s2) calc(var(--s4) + var(--safe-l));
    background: var(--blood);
    color: var(--bone);
    font-size: 0.92rem;
}

.banner--offline {
    background: var(--ink-3);
    border-bottom: 1px solid var(--blood);
}

.banner__close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    min-width: var(--tap);
    min-height: var(--tap);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + var(--safe-b));
    transform: translateX(-50%);
    z-index: 70;
    max-width: min(90vw, 30rem);
    padding: var(--s3) var(--s4);
    background: var(--ink-3);
    border: 1px solid var(--blood);
    border-radius: var(--radius);
    color: var(--bone);
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    animation: toastin 0.16s ease-out;
}

@keyframes toastin {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ===========================================================================
   RESPONSIIVISUUS
   =========================================================================== */
@media (min-width: 480px) {
    .signs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sign {
        grid-template-columns: 1fr;
    }

    .actionbar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .actionbar .btn {
        flex: 1 1 12rem;
        width: auto;
    }

    .sheet__actions {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 17px;
    }

    .signs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entries {
        gap: var(--s4);
    }

    .doc-main {
        padding: var(--s6) var(--s5) var(--s7);
    }

    .table__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Kapea puhelin: neljä tekstipainiketta ja vaihetunnus eivät mahdu samalle
   riville luettavan kokoisina, joten työkalut siirtyvät omalle rivilleen.
   Vaihe ja laskurit pysyvät samalla rivillä, jotta pystytila ei mene hukkaan. */
@media (max-width: 460px) {
    .hud {
        flex-wrap: wrap;
        row-gap: var(--s2);
    }

    .hud__left {
        flex: 1 0 100%;
        display: flex;
        align-items: baseline;
        gap: var(--s3);
    }

    .hud__meta {
        gap: var(--s3);
    }

    .hud__tools {
        flex: 1 0 100%;
        justify-content: space-between;
    }

    .hud__tools .iconbtn {
        flex: 1 1 auto;
        padding: 0 var(--s2);
    }
}

/* Vaakataso: pöytä vasemmalle, ohjaus oikealle. Ensisijaiset painikkeet
   pysyvät näkyvissä ilman pystyvieritystä. */
@media (orientation: landscape) and (min-width: 700px) {
    .stage {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--s5);
    }

    .pane--table {
        order: -1;
        flex: 1 1 52%;
        position: sticky;
        top: 0;
    }

    .pane--panel {
        flex: 1 1 48%;
        min-width: 0;
    }

    .table__ring {
        aspect-ratio: 16 / 11;
        max-height: none;
    }

    .stage--single .pane--panel {
        max-width: 46rem;
        margin: 0 auto;
    }
}

/* Tabletti vaakatasossa: pöytä 60 %, paneeli 40 %. */
@media (orientation: landscape) and (min-width: 1024px) {
    .pane--table {
        flex: 1 1 60%;
    }

    .pane--panel {
        flex: 1 1 40%;
    }

    .table__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .readcard__line {
        font-size: 30px;
    }
}

/* Pieni vaakapuhelin: tiivistetään korkeussuunnassa. */
@media (orientation: landscape) and (max-height: 460px) {
    .hud {
        padding-top: calc(var(--s1) + var(--safe-t));
        padding-bottom: var(--s1);
    }

    .readcard {
        padding: var(--s3);
        margin-bottom: var(--s2);
    }

    .readcard__line {
        font-size: 24px;
    }

    .timer__readout {
        font-size: 3rem;
    }

    .actionbar {
        flex-direction: row;
        padding-top: var(--s2);
        padding-bottom: calc(var(--s2) + var(--safe-b));
    }
}

/* --- Liikkeen vähennys --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .readcard {
        transform: none;
    }

    .stamp {
        transform: none;
    }

    .timer__readout.is-urgent {
        animation: none;
        text-decoration: underline;
    }
}

/* --- Tulostus ------------------------------------------------------------ */
@media print {
    body {
        background: #fff;
        color: #000;
    }

    .site-head,
    .site-foot,
    .actionbar,
    .hud {
        display: none;
    }
}

/* Loppupaljastuksen suoja, kun roolit on piilotettu asetuksissa. */
.revealshield {
    display: grid;
    gap: var(--s3);
    justify-items: start;
    padding: var(--s4);
    border: 2px dashed var(--blood);
    background: var(--ink-2);
    border-radius: var(--radius);
}