/* =====================================================
   Swift 30 — Stylesheet
   Single combined stylesheet (formerly style.css + new.css).
   Sections:
     1.  CSS variables & theme overrides
     2.  Global resets & iOS / mobile hardening
     3.  Page layouts (main, pref, gameSetup, howToPlay)
     4.  Buttons & button variants
     5.  Logo, slogan, main-menu
     6.  Settings (pref) page
     7.  Close / info / menu buttons
     8.  How-to-Play
     9.  Bottom menu
     10. Warning message
     11. Game setup forms (input, token colours)
     12. Sortable player list (#teamPlayers)
     13. Game play layout (playLayout, scoreBoard, board, dice)
     14. Options menu & background cover
     15. Generic .gameModal
     16. Word-phase modal
     17. Only-1 modal
     18. Trade modal
     19. Quit modal
     20. Flash overlay
     21. Results screen
     22. Card flip / deck animations
     23. Social icons
     24. Copyright
   ===================================================== */


/* =====================================================
   1. CSS variables & theme overrides
   ===================================================== */
:root {
    --y: #FFF200;
    --b: #000000;
    --w: #ffffff;
    --board: url('../img/board.svg');
    --logo: url('../img/logo.svg');
    --pattern: url('../img/pattern.jpg');
}

/* Dark-mode override — flips colour roles and swaps the board/logo art */
[data-theme="dark"] {
    --y: #000000;
    --b: #FFF200;
    --w: #000000;
    --board: url('../img/board2.svg');
    --logo: url('../img/logo2.svg');
    --pattern: url('../img/pattern.jpg');
}


/* =====================================================
   2. Global resets & iOS / mobile hardening
   ----------------------------------------------------
   - clear native button/input chrome so colour circles
     and link-buttons render consistently on iOS
   - lock horizontal scroll so a slightly-too-wide
     element can't make the page swipeable sideways
   - touch-action: manipulation removes the 300 ms tap
     delay; tap-highlight transparent suppresses the
     grey flash
   - dvh / -webkit-fill-available fallbacks so flex
     centering doesn't get clipped by the dynamic iOS
     URL bar
   ===================================================== */
* {
    margin: 0;
    padding: 0;
}

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

html,
body {
    height: 100%;
    overflow-x: hidden;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--y);
}

body {
    font-family: 'Helvetica Neue', sans-serif;
    background: var(--y);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

a,
button,
.button,
.button2,
.button3,
.buttonLR,
.buttonRR,
.tokenColor,
#addTeamPlayer,
.closeButton,
.infoButton,
.menuButton,
.soc-icon,
.wordCard,
.tradeRow {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Block body scroll while a modal is open */
body.modalOpen {
    overflow: hidden;
}

#statusBar {
    content: var(--y);
    background: var(--y);
}

/* =====================================================
   3. Page layouts
   ===================================================== */
.main,
.pref,
.gameSetup,
.howToPlay {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

.main,
.pref,
.gameSetup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#loadScreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--y);
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms ease, visibility 220ms ease;
}

#loadScreen::before {
    content: "";
    display: block;
    width: min(62vw, 320px);
    aspect-ratio: 4 / 1;
    background: var(--logo) no-repeat center / contain;
}

#loadScreen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Setup screens — let content scroll if the keyboard pushes the
   form past the viewport on small devices */
.gameSetup {
    width: 100%;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* =====================================================
   4. Buttons & button variants
   ===================================================== */
.button,
.button2,
.button3,
.buttonLR,
.buttonRR,
.buttonLR2,
.buttonRR2 {
    font-size: 16px;
    background: var(--b);
    color: var(--y);
    display: grid;
    place-items: center;
    margin-top: 10px;
    border-radius: 10px;
    padding: auto 10px;
    width: 200px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.button2 {
    background: none;
    border: 2px solid var(--b);
    color: var(--b);
    height: 36px;
    width: 196px;
}

.button3 {
    background: var(--y);
    color: var(--b);
}

.buttonLR,
.buttonRR,
.buttonLR2,
.buttonRR2 {
    display: inline-block;
    background: #ffffff;
    color: #000000;
    width: 100px;
    line-height: 40px;
    vertical-align: middle;
}

.buttonLR,
.buttonLR2 {
    border-radius: 10px 0 0 10px;
}

.buttonRR,
.buttonRR2 {
    border-radius: 0 10px 10px 0;
}

.buttonLR.active,
.buttonRR.active {
    background: var(--b);
    color: var(--y);
}

.buttonLR2.active,
.buttonRR2.active {
    background: var(--y);
    color: var(--b);
}

#continueButton {
    display: none;
    line-height: 36px;
}


/* =====================================================
   5. Logo, slogan, main-menu
   ===================================================== */
.logo {
    height: 80px;
    content: var(--logo);
}

.slogan {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 10px auto 5px auto;
    text-align: center;
    color: var(--b);
}

.mainMenu {
    margin-bottom: 50px;
}

.purchaseGate {
    padding: 24px 16px 150px;
    box-sizing: border-box;
    text-align: center;
    color: var(--b);
}

.purchasePanel,
.purchaseInfo,
.adminPanel,
.activatePanel {
    width: min(520px, calc(100vw - 32px));
    margin: 16px auto;
    color: var(--b);
    text-align: center;
}

.purchasePanel h1,
.purchaseInfo h1,
.adminPanel h1,
.activatePanel h1 {
    font-size: clamp(30px, 8vw, 46px);
    line-height: 1;
    margin-bottom: 12px;
}

.purchasePanel p,
.purchaseInfo p,
.adminPanel p,
.activatePanel p {
    font-size: 16px;
    line-height: 1.35;
    margin: 12px auto;
}

.storeButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px auto;
}

.storeButton {
    display: flex;
    align-items: center;
    width: min(206px, calc(50vw - 27px));
    aspect-ratio: 2065 / 592;
    padding: 0;
    border-radius: 7px;
    text-decoration: none;
    overflow: hidden;
}

.storeButton img {
    display: block;
    width: 100%;
    height: 100%;
}

.purchaseInfo,
.adminPanel,
.activatePanel {
    background: var(--b);
    color: var(--w);
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.purchaseInfo .paymentDetails {
    text-align: left;
    line-height: 1.45;
    margin: 18px 0;
}

.purchaseInfo .paymentDetails p {
    margin: 14px 0;
}

.adminPanel input,
.activatePanel input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--w);
    border-radius: 8px;
    background: transparent;
    color: var(--y);
    padding: 0 12px;
    margin: 8px 0;
    box-sizing: border-box;
}

.adminPanel .button3,
.adminPanel .button2,
.adminPanel .button,
.activatePanel .button3,
.purchaseInfo .button,
.purchaseInfo .button2 {
    margin-left: auto;
    margin-right: auto;
}

.adminPanel .buttonSecondary {
    background: transparent;
    border: 2px solid var(--y);
    color: var(--y);
    margin-top: 10px auto;
}

.adminResult,
.activateMessage {
    display: none;
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    background: var(--y);
    color: var(--b);
    overflow-wrap: anywhere;
}

.adminResult.show,
.activateMessage.show {
    display: block;
}

.generatedCode {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 8px 0;
}

.generatedLink {
    color: var(--b);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.generatedLinkRow {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.copyLinkButton {
    align-items: center;
    appearance: none;
    background: var(--b);
    border: 0;
    border-radius: 6px;
    color: var(--y);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.copyLinkButton svg {
    fill: currentColor;
    height: 18px;
    width: 18px;
}

.copyLinkButton:hover,
.copyLinkButton:focus-visible {
    background: #333;
}

.copyLinkButton.copied {
    background: #087f5b;
}


/* =====================================================
   6. Settings (pref) page
   ===================================================== */
.pref {
    background: var(--y);
    color: var(--b);
    height: 100%;
}

.prefBg {
    background: var(--b);
}

.pref h2 {
    margin-top: 20px;
}


/* =====================================================
   7. Close / info / menu buttons
   ===================================================== */
.closeButton,
.infoButton,
.menuButton {
    position: fixed;
    /* honour iPhone home-indicator safe-area */
    bottom: calc(10px + env(safe-area-inset-bottom, 0));
    right: 10px;
    width: 40px;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
}

.infoButton {
    left: 10px;
}

/* When these icons are inside the in-game menu they aren't fixed */
.gamePlayMenu .infoButton,
.gamePlayMenu .menuButton {
    bottom: auto;
}


/* =====================================================
   8. How-to-Play
   ===================================================== */
.howToPlay {
    background: var(--w);
}

.howToPlay .container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 40px 10px 240px 10px;
    text-align: left;
    max-width: 640px;
    color: var(--b);
}

.howToPlay h2 {
    margin-top: 20px;
}

.howToPlay ul {
    margin-left: 40px;
}


/* =====================================================
   9. Bottom menu
   ===================================================== */
.bottomMenu {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background: var(--y);
    /* honour iPhone home-indicator safe-area */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
}

.bottomMenu .button {
    width: 160px;
}

.bottomMenu .closeButton {
    bottom: 5px;
}


/* =====================================================
   10. Warning message
   ===================================================== */
#warningMsg {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 1600;
    width: 100%;
    height: 100%;
}

#warningMsg .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--b);
    color: var(--w);
    width: 240px;
    height: 160px;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
}

#warningMessage {
    text-align: center;
}


/* =====================================================
   11. Game setup forms — input, token colours
   ===================================================== */
.gameSetup .step {
    font-size: 18px;
    font-weight: 400;
    color: var(--b);
}

.gameSetup .pageTitle {
    color: var(--b);
}

.gameSetup .container {
    position: relative;
    background: var(--b);
    border-radius: 17px;
    margin: 10px auto;
    color: var(--w);
    padding: 10px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.gameSetup table {
    margin: 0;
    width: 100%;
}

.gameSetup table td:first-child {
    width: 100%;
}

/* Use min font-size 16/18 to stop iOS auto-zoom on focus */
.gameSetup input,
input[type="text"],
input[type="email"],
input[type="search"] {
    font-size: 18px;
}

.gameSetup input {
    /* outline keeps the layout stable when focused (border would shift it) */
    outline: 1px solid var(--w);
    border-radius: 12px;
    color: var(--y);
    background: none;
    height: 40px;
    width: 100%;
    text-indent: 10px;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    max-width: 100%;
}

.gameSetup input:focus {
    box-shadow: none;
    outline: 2px solid var(--y);
}

#teamName {
    font-weight: 600;
    text-indent: 40px;
    color: red;
}

#tokenColors {
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    /* let the row wrap on narrow phones rather than overflow */
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 8px;
}

#teamColor {
    position: absolute;
    /*top: 32px;*/
    width: 26px;
    height: 26px;
    margin-top: 6px;
    margin-left: 6px;
    border-radius: 50%;
    color: var(--y);
    background: red;
    z-index: 10;
}

.tokenColor {
    border: 2px solid var(--b);
    border-radius: 50%;
    color: var(--y);
    background: none;
    height: 26px;
    width: 26px;
    text-indent: 4px;
    font-size: 18px;
}

.tokenColor.active,
#tokenColor1.active {
    border: 2px solid var(--y);
}

#tokenColor1 {
    background: red;
}

#tokenColor2 {
    background: green;
}

#tokenColor3 {
    background: blue;
}

#tokenColor4 {
    background: orange;
}

#tokenColor5 {
    background: purple;
}

#tokenColor6 {
    background: teal;
}

#tokenColor7 {
    background: brown;
}

#tokenColor8 {
    background: grey;
}

/* Larger tap targets for the colour circles on touch devices */
@media (hover: none) and (pointer: coarse) {
    .tokenColor {
        height: 26px;
        width: 26px;
    }

    #teamColor {
        width: 26px;
        height: 26px;
        margin-top: 6px;
        margin-left: 6px;
    }
}

.gameSetup h2 {
    font-size: 38px;
    margin-top: 20px;
}

.gameSetup .button,
.gameSetup .button2 {
    width: 130px;
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    margin-top: 0;
}

.gameSetup .button2 {
    margin-right: 10px;
    line-height: 36px;
}

.gameSetup .button3 {
    width: 52px;
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    margin: 0 0 0 8px;
}

/* Add-Player anchor styled as a button */
#addTeamPlayer {
    display: inline-block;
    line-height: 40px;
    -webkit-user-select: none;
    user-select: none;
}


/* =====================================================
   12. Sortable player list (#teamPlayers)
   Each <li> renders as:
     [up/down arrow] [⠿ grip] [name] [× remove]
   The arrow direction is computed in JS (refreshPlayerArrows)
   so the first row points down and the rest point up.
   ===================================================== */
#teamPlayers {
    list-style: none;
    padding: 0;
    width: 100%;
}

#teamPlayers li {
    padding: 8px 10px;
    margin: 5px 0;
    background: var(--y);
    cursor: grab;
    color: var(--b);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Don't let iOS treat long-press as a text selection */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

#teamPlayers li.dragging {
    opacity: .5;
    background: #e0e0e0;
}

#teamPlayers .liArrow,
#teamPlayers .liRemove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#teamPlayers .liArrow svg,
#teamPlayers .liRemove svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

#teamPlayers .liArrow:active,
#teamPlayers .liRemove:active {
    transform: scale(.88);
}

#teamPlayers .liGrip {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: .7;
    cursor: grab;
    user-select: none;
}

#teamPlayers .liName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#teamPlayers .liRemove {
    margin-left: auto;
}


/* =====================================================
   13. Game play layout (playLayout, scoreBoard, board, dice, etc.)
   The flexbox layout replaces an unreliable table — tables
   with height:100% don't recalc on iOS Safari when the URL
   bar collapses or the page is restored from bfcache.
   --vh is set from JS so older Safari that doesn't honour
   100dvh still gets a correct viewport height.
   ===================================================== */
#playLayout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: -webkit-fill-available;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    overflow: hidden;
}

.standaloneApp #playLayout {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
}

#playTop,
#playBottom {
    flex: 0 0 auto;
}

#playMiddle {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px 0;
}

/* On gameplay let the layout fully own the viewport (no body scroll) */
body:has(#playLayout),
body:has(#board) {
    overflow: hidden;
    position: relative;
    height: 100vh;
    height: -webkit-fill-available;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
}

/* ----- Scoreboard ----- */
.scoreBoard {
    display: flex;
    padding: 10px;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    color: var(--b);
}

#teamAScore,
#teamBScore {
    flex: 1;
    padding: 8px;
    outline-width: 1px;
    outline-style: solid;
    outline-color: var(--b);
    border-radius: 12px;
    min-width: 0;
    text-align: center;
}

#teamAScore {
    margin-right: 0;
}

#teamBScore {
    margin-left: 0;
}

#teamAScore.activeTurn,
#teamBScore.activeTurn {
    outline-width: 3px;
}

#teamBScore span,
#teamAScore span {
    display: inline-block;
    height: 20px;
}

/* ----- Board ----- */
#board {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto;
}

#playMiddle #board {
    width: 100%;
    height: 100%;
    align-items: center;
}

.board-wrap {
    /* fitBoardWrap() in script.js sets width/height inline so the
       wrap is exactly the visible SVG. The rules below are only a
       fallback while JS hasn't measured yet (or never runs). */
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 877 / 623;
    max-width: 100%;
    max-height: 100%;
}

#playMiddle .board-wrap {
    margin: 0;
}

.board-wrap img.board-bg,
.board-bg {
    width: 100%;
    height: 100%;
    display: block;
    /* Themed board art — dark mode swaps the SVG via --board */
    content: var(--board);
}

/* Path squares (positioned absolutely as % of the board) */
.sq {
    position: absolute;
    border: 0;
    background: transparent;
    pointer-events: none;
    overflow: visible;
    height: 24px;
    width: 24px;
}

/* Team tokens that move around the board */
.tok {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    transition:
        left .5s cubic-bezier(.34, 1.56, .64, 1),
        top .5s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ----- In-game header bar ----- */
.gamePlayMenu {
    width: 100%;
    background: var(--y);
}

.row,
.row2 {
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.row {
    background: var(--b);
}

.row .column,
.row2 .column {
    width: 50%;
}

.gamePlayMenu .button {
    min-width: 140px;
    position: relative;
    float: right;
    margin: 0;
    background-color: var(--y);
    color: var(--b);
}

.gamePlayMenu .button.disabled {
    opacity: .4;
    pointer-events: none;
}

.game-pattern {
    height: 48px;
    background-image: var(--pattern);
    background-size: 100% auto;
    background-repeat: repeat;
    flex-shrink: 0;
}

/* ----- Dice (and dot/X/0 face renderings) ----- */
#dice {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 12px;
    position: relative;
    left: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    flex-shrink: 0;
    cursor: default;
}

.dot {
    width: 10px;
    height: 10px;
    background: #111;
    border-radius: 50%;
    position: absolute;
}

@keyframes diceRoll {
    0% {
        transform: rotate(0) scale(1);
    }

    25% {
        transform: rotate(90deg) scale(1.1);
    }

    50% {
        transform: rotate(180deg) scale(.9);
    }

    75% {
        transform: rotate(270deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

#dice.rolling {
    animation: diceRoll .12s ease-in-out 6;
}


/* =====================================================
   14. Options menu & background cover
   ===================================================== */
#optionsMenu {
    position: fixed;
    bottom: 0;
    width: 98%;
    background: var(--b);
    z-index: 100;
    text-align: center;
    color: var(--w);
    display: none;
    border-radius: 20px 20px 0 0;
    margin: 0 1%;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
}

#optionsMenu .button3 {
    width: 200px;
    margin: 0 auto;
}

#optionsMenu .closeButton {
    right: 3%;
}

/* Behind any modal — also behind the options menu */
#bgCover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 80;
    background: var(--y);
    opacity: .8;
    display: none;
}

#bgCover.show {
    display: flex;
}

#bgCover.warningActive {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: block;
}


/* =====================================================
   15. Generic full-screen modal (.gameModal)
   ===================================================== */
.gameModal {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(var(--y), .6);
    padding: 16px;
    /* avoid iOS rubber-band overscroll inside modals */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.gameModal.show {
    display: flex;
}

.gameModal .container {
    background: var(--b);
    color: var(--w);
    border-radius: 18px;
    padding: 22px 22px 18px;
    width: min(520px, 96vw);
    max-height: 92vh;
    /* dvh keeps the modal within the visible area when iOS URL bar shows */
    max-height: 92dvh;
    overflow-y: auto;
    animation: modalSlide .22s cubic-bezier(.34, 1.3, .64, 1);
    opacity: 1;
}

@supports not (height: 100dvh) {
    .gameModal .container {
        max-height: 92vh;
    }
}

@keyframes modalSlide {
    from {
        transform: scale(.93);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gameModal h2 {
    font-size: 22px;
    margin-bottom: 4px;
}

.gameModal .modalActions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.gameModal .modalActions .button,
.gameModal .modalActions .button2,
.gameModal .modalActions .button3 {
    flex: 1;
    margin-top: 0;
}


/* =====================================================
   16. Word-phase modal
   ===================================================== */
#wordModal {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#wordModal .container {
    border-radius: 18px;
    padding: 10px 10px 0;
    width: min(500px, 98%);
}

#wordModal .modalHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 22px;
    color: var(--b);
    gap: 12px;
    text-align: center;
}

#wordModal .teamInfo h2 {
    font-size: 22px;
    line-height: 1;
    letter-spacing: 1px;
}

#wordModal .currentPlayer {
    font-size: 12px;
    color: var(--b);
    margin-top: 4px;
}

#wordModal .rollBadge {
    display: inline-block;
    font-size: 11px;
    background: rgba(255, 242, 0, .15);
    color: var(--y);
    border-radius: 20px;
    padding: 4px 8px;
    margin-top: 4px;
}

/* Countdown timer */
#timerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

#timer {
    font-size: 40px;
    line-height: 1;
    color: var(--y);
    background: var(--b);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 242, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

#timer.urgent {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, .4);
    animation: timerPulse .5s ease-in-out infinite;
}

@keyframes timerPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

#timerLabel {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--b);
}

#upsideBanner {
    display: none;
    background: #1a0d00;
    border: 1px solid #5a2d00;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #ff8c00;
    text-align: center;
    letter-spacing: 1px;
}

#upsideBanner.show {
    display: block;
}

#wordList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.wordCard {
    display: flex;
    align-items: center;
    background: var(--b);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid var(--y);
    gap: 8px;
}

.wordCard.ticked {
    background: var(--y);
    color: var(--b);
}

/* "Read upside down" square flips the cards */
.wordCard.upside {
    transform: rotate(180deg);
}

.wordText {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--y);
}

.tickBox {
    width: 20px;
    height: 20px;
    border: 1px solid var(--y);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: transparent;
    flex-shrink: 0;
    transition: all .15s;
}

.wordCard.ticked .tickBox {
    background: var(--b);
    border-color: var(--b);
    color: var(--y);
}

.wordCard.ticked .wordText {
    color: var(--b);
}

#doneButton {
    cursor: pointer;
}


/* =====================================================
   17. Only-1 modal
   ===================================================== */
#only1Modal .container {
    text-align: center;
}

#only1Modal .iconLarge {
    font-size: 46px;
    margin-bottom: 10px;
    display: block;
}

#only1Modal .title {
    font-size: 26px;
    color: var(--y);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

#only1Modal .body {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 16px;
}


/* =====================================================
   18. Trade modal
   ===================================================== */
#tradeModal .container {
    width: min(660px, 96vw);
}

#tradeModal .tradeCols {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

#tradeModal .tradeSide {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#tradeModal .tradeHeader {
    font-size: 18px;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

#tradeModal .tradeDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #555;
    flex-shrink: 0;
    padding-top: 50px;
}

.tradeList {
    min-height: 100px;
    background: #0a0a0a;
    border-radius: 10px;
    padding: 4px;
    border: 2px dashed #333;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color .15s;
}

.tradeList.dragOver {
    border-color: var(--y);
    background: #141414;
}

.tradeRow {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--b);
    border-radius: 8px;
    padding: 4px;
    cursor: grab;
    user-select: none;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--w);
}

.tradeRow.dragging {
    opacity: .35;
    transform: scale(.96);
}

.tradePlayerName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline-SVG arrow button on each row — tap moves the player to
   the other team without needing drag-and-drop */
.tradeArrow {
    flex-shrink: 0;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tradeArrow svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: var(--y);
}

.tradeArrow:active {
    transform: scale(.88);
}

.tradeEmpty {
    font-size: 12px;
    color: #777;
    text-align: center;
    padding: 14px 8px;
    font-style: italic;
}


/* =====================================================
   19. Quit confirmation modal
   ===================================================== */
#quitModal .container {
    border-color: #e74c3c;
    text-align: center;
}

#quitModal .iconLarge {
    font-size: 42px;
    display: block;
    margin-bottom: 10px;
}

#quitModal .title {
    font-size: 26px;
    color: #e74c3c;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

#quitModal .body {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 16px;
}

#quitYes,
#quitNo {
    flex: 1;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    height: 44px;
    cursor: pointer;
}

#quitYes {
    background: #e74c3c;
    color: #fff;
    border: none;
}

#quitNo {
    background: transparent;
    color: var(--w);
    border: 2px solid #555;
}


/* =====================================================
   20. Flash overlay (white pulse + red on time-up)
   ===================================================== */
#flashOverlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1500;
    opacity: 0;
}

#flashOverlay.flashWhite {
    background: #fff;
    animation: flashWhitePulse .45s ease-in-out infinite;
}

#flashOverlay.flashRed {
    background: #e74c3c;
    animation: flashRedOnce .75s ease forwards;
}

@keyframes flashWhitePulse {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: .55;
    }
}

@keyframes flashRedOnce {
    0% {
        opacity: .8;
    }

    100% {
        opacity: 0;
    }
}


/* =====================================================
   21. Results screen — winner panel & cards
   ===================================================== */
.winnerName {
    font-size: clamp(40px, 9vw, 64px);
    text-align: center;
    letter-spacing: 3px;
    line-height: 1.05;
    margin-top: 20px;
}

.winnerSub {
    font-size: 14px;
    color: var(--b);
    letter-spacing: 3px;
    margin: 4px 0 24px;
}

@keyframes winnerPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

.finalScores {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.finalCard {
    background: var(--b);
    color: var(--w);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
    border: 3px solid var(--b);
    position: relative;
    min-width: 80px;
}

.finalCard.isWinner {
    border-color: var(--b);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
}

.crownIcon {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
}

.finalTeamName {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.finalScore {
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
}

.finalLabel {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
}


/* =====================================================
   22. Card flip / deck animations
   The black (UNREAD) deck on the left flips a card up to
   reveal the words for the current turn, then discards
   the card to the yellow (READ) deck on the right. The
   end-X / mid-X distances are computed by JS at runtime
   (applyCardMotionVars) so the trajectory stays inside
   the visible board on every viewport.
   ===================================================== */
.deckBlock {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    z-index: 74;
}

#deckBlack {
    top: 43.34%;
    left: 15.96%;
    width: 22.81%;
    height: 25.68%;
}

#deckYellow {
    top: 30.5%;
    right: 15.62%;
    width: 25.07%;
    height: 26.49%;
}

.cardStack {
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    pointer-events: none;
    z-index: 90;
}

.deckCard {
    position: absolute;
    inset: 0;
    width: clamp(80px, 12vw, 130px);
    height: clamp(58px, 8.7vw, 95px);
    border-radius: 7px;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.34, 1.3, .64, 1);
    will-change: transform;
}

.deckCard .deckBack,
.deckCard .deckFace {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .55),
        inset 0 0 0 1.5px rgba(255, 242, 0, .55);
}

.deckCard .deckBack {
    background:
        repeating-linear-gradient(45deg, rgba(255, 242, 0, .08) 0 4px, transparent 4px 8px),
        linear-gradient(135deg, #1a1a1a 0%, #050505 100%);
    color: var(--y);
    font-size: 3px;
    letter-spacing: 3px;
    text-align: center;
    line-height: 0;
}

.deckCard .deckBack img {
    height: 28px;
    width: auto;
    pointer-events: none;
}

.deckCard .deckFace {
    background: linear-gradient(160deg, #fff7d6 0%, var(--y) 100%);
    color: #111;
    transform: rotateY(180deg);
    padding: 4px 3px;
    font-weight: 600;
    flex-direction: column;
    gap: 1px;
    text-align: center;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .55),
        inset 0 0 0 1.5px #b8860b;
    box-sizing: border-box;
    overflow: hidden;
}

.deckCard .deckFace .deckWord {
    width: 100%;
    border-bottom: 1px dashed rgba(0, 0, 0, .25);
    padding-bottom: 1px;
    font-size: clamp(4px, 0.8vw, 6px);
    overflow-wrap: anywhere;
}

.deckCard .deckFace .deckWord:last-child {
    border-bottom: none;
}

/* Slight rotational stagger on the resting stack for visual texture */
.deckCard[data-stack="0"] {
    transform: translate(0, 0) rotate(-4deg);
}

.deckCard[data-stack="1"] {
    transform: translate(2px, 1px) rotate(-1deg);
}

.deckCard[data-stack="2"] {
    transform: translate(4px, 2px) rotate(2deg);
}

.deckCard[data-stack="3"] {
    transform: translate(1px, 3px) rotate(-2deg);
}

.deckCard[data-stack="4"] {
    transform: translate(3px, 4px) rotate(3deg);
}

/* Lift & flip the top card */
.deckCard.deckLift {
    animation: deckLift 1.1s cubic-bezier(.34, 1.3, .64, 1) forwards;
    z-index: 60;
}

@keyframes deckLift {
    0% {
        transform: translate(0, 0) rotateZ(0) rotateY(0) scale(1);
    }

    30% {
        transform: translate(0, var(--liftY, -90px)) rotateZ(180deg) rotateY(0) scale(1.4);
    }

    60% {
        transform: translate(0, var(--liftY, -90px)) rotateZ(360deg) rotateY(90deg) scale(1.7);
    }

    100% {
        transform: translate(0, var(--liftY, -90px)) rotateZ(360deg) rotateY(180deg) scale(1.9);
    }
}

/* Resting state of the lifted/face-up card before the discard fires */
.deckCard.deckOpen {
    transform: translate(0, var(--liftY, -90px)) rotateZ(360deg) rotateY(180deg) scale(1.9);
    z-index: 60;
}

/* Discard fly-out into the yellow stack.
   --discardEndX / --discardEndY are set by JS to the actual
   pixel delta from black-stack centre to yellow-stack centre
   so the card lands inside the visible board on phones. */
.deckCard.deckDiscard {
    animation: deckDiscard 1s cubic-bezier(.55, .08, .68, .53) forwards;
    z-index: 60;
}

@keyframes deckDiscard {
    0% {
        transform: translate(0, var(--liftY, -90px)) rotateZ(360deg) rotateY(180deg) scale(1.9);
    }

    40% {
        transform: translate(var(--discardMidX, 150px), var(--discardMidY, -40px)) rotateZ(540deg) rotateY(360deg) scale(1.2);
    }

    100% {
        transform: translate(var(--discardEndX, 300px), var(--discardEndY, 0)) rotateZ(720deg) rotateY(360deg) scale(1);
    }
}


/* =====================================================
   23. Social icons
   ===================================================== */
.socialIcons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
    /* avoid horizontal overflow if the row is unusually wide */
    max-width: 100%;
    overflow-x: hidden;
}

.soc-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    margin: 0;
}

.soc-icon:hover {
    cursor: pointer;
}

.yt,
.ig,
.tw,
.fb {
    background: var(--b);
}

.yt svg,
.ig svg,
.tw svg,
.fb svg {
    width: 22px;
    height: 22px;
    fill: var(--y);
    stroke: none;
}


/* =====================================================
   24. Copyright footer
   ===================================================== */
.copyright {
    text-align: center;
    margin: 10px auto;
    position: fixed;
    bottom: 0;
    color: var(--b);
    text-decoration: none;
}

.copyright a {
    text-decoration: none;
    color: var(--b);
    font-weight: 700;
}

.copyright a:hover {
    text-decoration: underline;
}


/* =====================================================
   25. Landscape rotation warning
   Pill in the top-right corner that nudges phone/tablet
   users to switch to portrait. Hidden by default; the
   media query at the bottom toggles it on for short
   landscape viewports only (so desktops are unaffected).
   The icon is the rotate.svg art applied via CSS mask so
   the stroke colour follows --y instead of the SVG's
   built-in black.
   ===================================================== */
#landscapeWarn {
    display: none;
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0));
    right: calc(8px + env(safe-area-inset-right, 0));
    align-items: center;
    gap: 8px;
    background: var(--b);
    color: var(--y);
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    z-index: 3000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    max-width: 90vw;
    pointer-events: none;
}

#landscapeWarn .rotateIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url('../img/rotate.svg') no-repeat center / contain;
    mask: url('../img/rotate.svg') no-repeat center / contain;
}

#landscapeWarn .rotateText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Only show in landscape on phone/tablet-sized viewports.
   max-height keeps desktops (which are usually landscape) silent. */
@media (orientation: landscape) and (max-height: 600px) {
    #landscapeWarn {
        display: inline-flex;
    }
}


/* =====================================================
   26. History modal
   Yellow translucent backdrop, modeled on #wordModal but
   read-only. Step-through nav at the bottom and a circular
   close (×) button in the corner.
   ===================================================== */
#historyModal {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 242, 0, .9);
}

[data-theme="dark"] #historyModal {
    background: rgba(0, 0, 0, .9);
}

#historyModal .historyHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 22px 6px;
    color: var(--b);
    gap: 6px;
    text-align: center;
}

#historyModal .historyHeader h2 {
    font-size: 22px;
    line-height: 1;
    letter-spacing: 1px;
    color: red;
}

#historyModal .currentPlayer {
    font-size: 14px;
    color: var(--b);
    margin-top: 2px;
    font-weight: 600;
}

#historyModal .rollBadge {
    display: inline-block;
    font-size: 12px;
    background: red;
    color: var(--w);
    border-radius: 20px;
    padding: 4px 10px;
    margin-top: 2px;
    font-weight: 600;
}

#historyScore {
    margin: 10px auto 14px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--b);
    color: var(--y);
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

#historyModal .container {
    border-radius: 18px;
    padding: 10px;
    width: min(500px, 98%);
}

#historyWordList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.historyCard {
    cursor: default !important;
}

#historyModal .historyNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
    color: var(--b);
}

.historyArrow {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--b) !important;
    color: var(--y) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.historyArrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.historyArrow.disabled {
    opacity: .5;
    pointer-events: none;
}

#historyCounter {
    font-size: 13px;
    font-weight: 700;
    color: var(--b);
    min-width: 50px;
    text-align: center;
}

.historyClose {
    position: absolute;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.historyClose svg {
    width: 48px;
    height: 48px;
    display: block;
}

/* History menu link in the options menu — keep icon + label aligned */
#optionsMenu .button3 .historyIcon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
    color: currentColor;
}

/* =====================================================
   Sound / Music Guess Feature
   ===================================================== */

/* ---- Modals use existing .gameModal as backdrop ---- */
#soundModal {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* soundRevealModal is now #sndRevealPhase inside soundModal — no separate modal needed */
#sndRevealPhase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---- Shared card wrapper ---- */
.sndCard {
    background: var(--b);
    color: var(--w);
    border-radius: 20px;
    padding: 14px;
    width: min(500px, 96%);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: auto;
    /*animation: modalSlide .22s cubic-bezier(.34, 1.3, .64, 1);*/
    text-align: center;
}

/* ---- Header inside sound modals ---- */
.sndHeader {
    width: 100%;
    text-align: center;
}

.sndHeader h2 {
    font-size: 22px;
    line-height: 1;
    letter-spacing: 1px;
    margin: 0;
}

.sndHeader .currentPlayer {
    font-size: 12px;
    color: var(--w);
    opacity: .7;
    margin-top: 4px;
}

/* ---- "Guess the Song / Sound" label ---- */
.sndTypeLabel {
    font-size: 17px;
    font-weight: 800;
    color: var(--y);
    letter-spacing: .5px;
}

/* ---- Circular timer (shared style with word modal) ---- */
.sndTimerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sndTimer {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--y);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255, 242, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sndTimer.urgent {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, .4);
    animation: timerPulse .5s ease-in-out infinite;
}

.sndTimerLbl {
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--y);
    opacity: .7;
}

/* =============================================
   Animated audio waveform
   ============================================= */
#sndWaveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 68px;
    width: 220px;
    flex-shrink: 0;
}

.sndBar {
    width: 5px;
    min-height: 4px;
    border-radius: 3px;
    background: var(--y);
    transform-origin: center;
    transform: scaleY(.25);
    /* slightly taller at rest so bars are clearly visible */
    transition: transform .3s;
}

/* Tap-to-skip hint on the listen card */
#sndListenPhase {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
}

#sndListenPhase .sndHeader .currentPlayer {
    color: var(--b);
    opacity: .8;
}

#sndListenPhase .sndTimer {
    background: var(--b);
    color: var(--y);
    border-color: rgba(0, 0, 0, .15);
}

#sndListenPhase .sndTimerLbl {
    color: var(--b);
    opacity: .8;
}

#sndListenPhase::after {
    content: 'Tap to skip ›';
    display: block;
    margin-top: 0px;
    font-size: 12px;
    color: var(--b);
    letter-spacing: .5px;
    text-align: center;
}

/* Each bar gets a different speed & delay for organic feel */
#sndWaveform.sndAnimating .sndBar {
    animation: sndBarBounce .85s ease-in-out infinite;
}

#sndWaveform.sndAnimating .sndBar:nth-child(1) {
    animation-duration: 1.00s;
    animation-delay: 0.00s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(2) {
    animation-duration: 0.65s;
    animation-delay: 0.08s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(3) {
    animation-duration: 0.90s;
    animation-delay: 0.16s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(4) {
    animation-duration: 0.55s;
    animation-delay: 0.04s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(5) {
    animation-duration: 1.10s;
    animation-delay: 0.20s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(6) {
    animation-duration: 0.70s;
    animation-delay: 0.12s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(7) {
    animation-duration: 0.50s;
    animation-delay: 0.00s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(8) {
    animation-duration: 0.80s;
    animation-delay: 0.10s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(9) {
    animation-duration: 0.60s;
    animation-delay: 0.18s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(10) {
    animation-duration: 1.05s;
    animation-delay: 0.06s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(11) {
    animation-duration: 0.75s;
    animation-delay: 0.14s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(12) {
    animation-duration: 0.95s;
    animation-delay: 0.22s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(13) {
    animation-duration: 0.68s;
    animation-delay: 0.02s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(14) {
    animation-duration: 1.15s;
    animation-delay: 0.16s;
}

#sndWaveform.sndAnimating .sndBar:nth-child(15) {
    animation-duration: 0.58s;
    animation-delay: 0.10s;
}

@keyframes sndBarBounce {

    0% {
        transform: scaleY(.18);
    }

    100% {
        transform: scaleY(12);
    }

    50% {
        transform: scaleY(6);
    }
}

/* =============================================
   Phase 2 — Guess layout & input + buttons
   ============================================= */
#sndGuessPhase {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 16px;
}

#sndGuessPhase .sndHeader .currentPlayer {
    color: var(--b);
    opacity: .8;
}

#sndGuessPhase .sndTimer {
    background: var(--b);
    color: var(--y);
    border-color: rgba(0, 0, 0, .15);
}

#sndGuessPhase .sndTimer.urgent {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, .4);
}

#sndGuessPhase .sndTimerLbl {
    color: var(--b);
    opacity: .8;
}

#sndGuessInput {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid var(--y);
    border-radius: 10px;
    color: var(--w);
    font-size: 15px;
    font-family: inherit;
    padding: 10px 12px;
    min-height: 52px;
    text-align: center;
    caret-color: var(--y);
    outline: none;
}

#sndGuessInput::placeholder {
    color: rgba(255, 255, 255, .35);
}

#sndGuessInput:focus {
    border-color: var(--y);
    box-shadow: 0 0 0 3px rgba(255, 242, 0, .15);
}

#sndGuessBtn {
    width: 100%;
    touch-action: none;
    /* prevent scroll hijack on hold */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* suppress iOS long-press menu */
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    margin-top: 4px;
}

#sndGuessBtn.sndRecording {
    background: #e74c3c !important;
    color: #fff !important;
    animation: sndRecPulse .7s ease-in-out infinite;
}

@keyframes sndRecPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .7;
    }
}

#sndDoneBtn {
    margin-top: 0px;
}

/* =============================================
   Reveal modal card
   ============================================= */
.sndRevealCard {

    text-align: center;
    /*animation: modalSlide .22s cubic-bezier(.34, 1.3, .64, 1);*/
}

#sndRevealEmoji {
    font-size: 46px;
    line-height: 1;
}

#sndRevealTitle {
    font-size: 26px;
    font-weight: 800;
    color: var(--y);
    letter-spacing: .5px;
    margin-top: 10px;
    line-height: 1.2;
}

#sndRevealAuthor {
    font-size: 15px;
    color: var(--w);
    opacity: .75;
}

#sndRevealPoints {
    font-size: 22px;
    font-weight: 700;
    color: var(--y);
    margin-top: 14px;
}