/* =============================================================================
   Life counter tool
   ========================================================================== */

.life-main { width: 100%; max-width: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.life-app { height: calc(100dvh - 72px); min-height: 520px; padding: .65rem; display: flex; flex-direction: column; gap: 0; }
.life-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 46px; gap: .5rem; }
.life-toolbar__title { font-family: var(--font-display); font-weight: 700; }
.life-toolbar__actions { display: flex; gap: .4rem; }
.life-toolbar__button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(16,10,24,.82); color: var(--ink); text-decoration: none; cursor: pointer; }

.life-controls {
    position: fixed; z-index: 1052; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); width: min(calc(100% - 2rem), 620px); transform: translate(-50%, calc(100% + 2rem));
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding: .8rem 1rem; border-radius: 16px;
    background: #20162a; border: 1px solid var(--line-strong); box-shadow: 0 18px 60px rgba(0,0,0,.55); transition: transform .22s ease;
}
.life-controls.is-open { transform: translate(-50%, 0); }
.life-controls__title { width: 100%; font-family: var(--font-display); }
.life-controls__close { position: absolute; top: .55rem; right: .55rem; width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink); }
.life-controls__scrim { position: fixed; z-index: 1051; inset: 0; border: 0; background: rgba(5,3,8,.62); opacity: 0; pointer-events: none; transition: opacity .2s; }
.life-controls__scrim.is-open { opacity: 1; pointer-events: auto; }
.life-controls__group { display: flex; align-items: center; gap: .6rem; }
.life-controls__label { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ms-auto { margin-left: auto; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.seg button {
    padding: .4rem .8rem; border: 0; background: transparent; color: var(--muted);
    font-weight: 800; cursor: pointer; font-family: var(--font-display); min-width: 44px;
}
.seg button:hover { color: var(--ink); background: var(--glass-2); }
.seg button.active { color: #241a08; background: linear-gradient(135deg, #f2d68e, var(--gold)); }

/* Players grid */
.players-grid { display: grid; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.players-grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.players-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.players-grid[data-count="3"] .player:first-child { grid-column: 1 / -1; }
.players-grid[data-count="4"] { grid-template-columns: 1fr 1fr; }

@media (min-width: 720px) {
    .players-grid[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .players-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}

.player {
    position: relative; display: flex; flex-direction: column;
    border-radius: 0; padding: .75rem; overflow: hidden;
    background: linear-gradient(160deg, var(--p-color-soft), var(--night-800));
    border: 1px solid var(--line-strong);
    min-height: 0;
}
.player.is-flipped { transform: rotate(180deg); }
.player.is-dead { filter: grayscale(.7) brightness(.7); }
.player.is-first { z-index: 2; box-shadow: inset 0 0 0 3px var(--gold-soft), 0 0 34px rgba(217,255,114,.3); }
.player.is-first::after {
    content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 24%, rgba(217,255,114,.22) 45%, rgba(99,230,196,.12) 52%, transparent 72%);
    transform: translateX(-130%); animation: first-scan .72s ease-out forwards;
}
.player.is-first-winner { animation: first-winner 1s ease-in-out infinite alternate; }
.player.is-first-winner::before {
    content: "✦"; position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%,-50%);
    color: var(--gold-soft); font-size: clamp(2.5rem, 10vw, 5rem); text-shadow: 0 0 24px var(--gold), 0 0 55px var(--mint);
    pointer-events: none; animation: first-mark .42s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes first-scan { to { transform: translateX(130%); } }
@keyframes first-winner { from { box-shadow: inset 0 0 0 3px var(--gold-soft),0 0 22px rgba(217,255,114,.22); } to { box-shadow: inset 0 0 0 4px var(--gold-soft),0 0 52px rgba(217,255,114,.5); } }
@keyframes first-mark { from { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(-25deg); } to { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .player.is-first,.player.is-first-winner,.player.is-first::after,.player.is-first-winner::before { animation:none; } }

.player__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.player__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); background: none; border: 0; border-bottom: 1px dashed transparent; outline: none; min-width: 60px; max-width: 60%; }
.player__name:focus { border-bottom-color: var(--gold); }
.player__badges { display: flex; gap: .3rem; align-items: center; }
.player__poison {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem; border-radius: 999px; cursor: pointer;
    background: rgba(63,155,92,.18); border: 1px solid rgba(63,155,92,.4);
    color: #a9e0c0; font-size: .74rem; font-weight: 800;
}
.player__poison.danger { background: rgba(63,155,92,.4); color: #eafff2; }

.player__mid { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem; }
.life-step {
    width: 46px; height: 46px; display: grid; place-items: center;
    border-radius: 14px; border: 1px solid var(--line-strong);
    background: rgba(0,0,0,.22); color: var(--ink); font-size: 1.3rem; cursor: pointer;
    transition: background .12s, transform .1s;
}
.life-step:hover { background: rgba(0,0,0,.36); }
.life-step:active { transform: scale(.92); }
.life-step--big { font-size: .9rem; font-weight: 800; font-family: var(--font-display); }

.life-value { position: relative; text-align: center; }
.life-value__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 5.2rem); line-height: 1; color: #fff; }
.life-delta {
    position: absolute; top: -.2rem; left: 50%; transform: translateX(-50%);
    font-weight: 800; font-size: 1rem; opacity: 0; transition: opacity .3s;
}
.life-delta.show { opacity: 1; }
.life-delta.up { color: var(--mint); }
.life-delta.down { color: var(--flame); }

.player__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.player__history { color: var(--muted); font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 70%; }
.player__step-row { display: flex; gap: .3rem; }

.life-hint { text-align: center; color: var(--muted-2); font-size: .8rem; margin: .4rem 0 0; }

@media (max-width: 520px) {
    body.app-body:has(.life-app) .app-nav { display: none; }
    .life-app { height: 100dvh; min-height: 0; padding: max(.45rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left)); }
    .life-controls { gap: .8rem; padding: 1.15rem; border-radius: 22px; }
    .life-controls__group { width: 100%; justify-content: space-between; }
    .life-controls__group.ms-auto { margin-left: 0; justify-content: stretch; }
    .life-controls__group.ms-auto button { flex: 1; min-height: 44px; }
    .life-controls__group.ms-auto span { display: none; }
    .player__mid { gap: .2rem; }
    .life-step { width: 44px; height: 44px; }
    .life-value__num { font-size: clamp(2.8rem, 15vw, 5rem); }
    .player__history { display: none; }
    .player__foot { justify-content: flex-end; }
}

/* Phones held sideways: width-based mobile queries no longer match, so use
   the short viewport as the signal and make the board a true one-row table. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    body.app-body:has(.life-app) .app-nav { display: none; }
    body.app-body:has(.life-app) { min-height: 100dvh; overflow: hidden; }
    .life-main { height: 100dvh; min-height: 0; overflow: hidden; }
    .life-app {
        height: 100dvh; min-height: 0;
        padding: max(.3rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) max(.3rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));
        gap: 0;
    }
    .life-toolbar { min-height: 38px; }
    .life-toolbar__button { width: 38px; height: 38px; border-radius: 3px 11px 3px 11px; }
    .life-toolbar__title { font-size: .78rem; }

    .players-grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .players-grid[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .players-grid[data-count="3"] .player:first-child { grid-column: 1 / -1; }
    .players-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }

    .player { padding: .5rem; border-radius: 0; }
    .player__name { font-size: .78rem; max-width: 55%; }
    .player__poison { padding: .1rem .35rem; font-size: .65rem; }
    .player__mid { gap: .15rem; }
    .life-value__num { font-size: clamp(2.7rem, 14vh, 4.4rem); }
    .life-step { width: 38px; height: 38px; border-radius: 3px 10px 3px 10px; }
    .player__history { display: none; }
    .player__foot { justify-content: flex-end; margin-top: .15rem; }
    .life-step--big { width: 36px; height: 32px; font-size: .7rem; }

    .life-controls { bottom: max(.4rem, env(safe-area-inset-bottom)); width: min(calc(100% - 2rem), 760px); padding: .8rem 1rem; gap: .65rem; }
    .life-controls__title { width: auto; margin-right: 1rem; }
}

/* Very short landscape displays (small iPhones with browser chrome visible). */
@media (orientation: landscape) and (max-height: 390px) and (pointer: coarse) {
    .life-toolbar { min-height: 34px; }
    .life-toolbar__button { width: 34px; height: 34px; }
    .player__foot { display: none; }
    .life-value__num { font-size: clamp(2.4rem, 16vh, 3.5rem); }
    .life-step { width: 34px; height: 34px; }
}