/* Seasonal themes (see js/season.js). Each block sets the same few variables; the rules below use them, in both
   games. Colours only — no layout. */
html[data-season="halloween"] {
  --season-a: #ff8a1f; --season-rim1: #ffb347; --season-rim2: #e8710a;
  --season-rib1: #9a5cdc; --season-rib2: #5b2a86; --season-btn1: #a566e6; --season-btn2: #6a32a8;
  --season-bg: #f1e6da; --season-bg-dark: #181420;
  --deco-a: "🎃"; --deco-b: "👻"; --deco-c: "🕸️"; --deco-d: "🦇"; --deco-lobby: "🎃"; --season-hat: "🦇";
}
html[data-season="autumn"] {
  --season-a: #e07b1f; --season-rim1: #f6c26b; --season-rim2: #c2641a;
  --season-rib1: #b5502f; --season-rib2: #732416; --season-btn1: #e8913a; --season-btn2: #b55a16;
  --season-bg: #f5e9d6; --season-bg-dark: #1d1610;
  --deco-a: "🍂"; --deco-b: "🍄"; --deco-c: "🍁"; --deco-d: "🌰"; --deco-lobby: "🍁"; --season-hat: "🍂";
}
html[data-season="newyear"] {
  --season-a: #7ec8ff; --season-rim1: #f2f9ff; --season-rim2: #a9d0ee;
  --season-rib1: #35b974; --season-rib2: #1d7f4a; --season-btn1: #3cc47d; --season-btn2: #1d8f55;
  --season-bg: #e9f1f8; --season-bg-dark: #121a26;
  --deco-a: "🎁"; --deco-b: "🎄"; --deco-c: "❄️"; --deco-d: "⭐"; --deco-lobby: "🎄"; --season-hat: "🎅";
}
html[data-season="spring"] {
  --season-a: #4fae6a; --season-rim1: #a8e6b4; --season-rim2: #3f9a58;
  --season-rib1: #f2a7c3; --season-rib2: #c76f96; --season-btn1: #6cc987; --season-btn2: #3f9a58;
  --season-bg: #f0f7ee; --season-bg-dark: #16201a;
  --deco-a: "🌸"; --deco-b: "🌿"; --deco-c: "🐝"; --deco-d: "🌷"; --deco-lobby: "🌸"; --season-hat: "🌸";
}
html[data-season="summer"] {
  --season-a: #ff9f1c; --season-rim1: #ffd980; --season-rim2: #e09210;
  --season-rib1: #35a8d6; --season-rib2: #1b6f96; --season-btn1: #39b4e0; --season-btn2: #1b7fa8;
  --season-bg: #eef6fb; --season-bg-dark: #121a22;
  --deco-a: "☀️"; --deco-b: "🌊"; --deco-c: "🍉"; --deco-d: "🏖️"; --deco-lobby: "☀️"; --season-hat: "☀️";
}
html[data-season="birthday"] {
  --season-a: #f5b31e; --season-rim1: #ffd978; --season-rim2: #d99514;
  --season-rib1: #8a6cd6; --season-rib2: #5b3fa8; --season-btn1: #f0a93a; --season-btn2: #c97c14;
  --season-bg: #fdf3e6; --season-bg-dark: #1d1812;
  --deco-a: "🎂"; --deco-b: "🎈"; --deco-c: "🎉"; --deco-d: "⭐"; --deco-lobby: "🎂"; --season-hat: "🎂";
}
html[data-season="march8"] {
  --season-a: #e8679a; --season-rim1: #ffb3cd; --season-rim2: #c74d7d;
  --season-rib1: #7fc08a; --season-rib2: #4a8f5c; --season-btn1: #ef7da8; --season-btn2: #c74d7d;
  --season-bg: #fdf0f4; --season-bg-dark: #20161b;
  --deco-a: "🌷"; --deco-b: "💐"; --deco-c: "🌸"; --deco-d: "💗"; --deco-lobby: "🌷"; --season-hat: "🌷";
}
html[data-season="feb23"] {
  --season-a: #7f9f67; --season-rim1: #b9cf9b; --season-rim2: #55703f;
  --season-rib1: #5a6b7a; --season-rib2: #33414d; --season-btn1: #6f8f5a; --season-btn2: #44603a;
  --season-bg: #eef1e9; --season-bg-dark: #161a14;
  --deco-a: "⭐"; --deco-b: "🎖️"; --deco-c: "🛡️"; --deco-d: "❄️"; --deco-lobby: "⭐"; --season-hat: "⭐";
}

/* a badge next to the page title */
html[data-season] .top h1::after, html[data-season] header.top h1::after { content: var(--season-emoji); margin-left: .35em; }

/* the quiet-screen drifting emoji */
#seasonFx { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
#seasonFx[hidden] { display: none; }
#seasonFx span { position: absolute; top: -40px; opacity: .55; animation: seasonDrift linear infinite; will-change: transform; }
html.quiet #seasonFx span { opacity: .55; }
html:not(.quiet) #seasonFx span { opacity: .4; }
/* over the table and the board (the table's own layers go up to 500), under windows and toasts */
html:not(.quiet) #seasonFx { z-index: 600; }
@keyframes seasonDrift { 0% { transform: translate(0, -5vh) rotate(0); } 50% { transform: translate(var(--sway), 55vh) rotate(160deg); } 100% { transform: translate(0, 110vh) rotate(320deg); } }

/* ---- Monopoly ---- */
html[data-season] body { background-color: var(--season-bg); }
html[data-season] .top { border-bottom-color: var(--season-a); box-shadow: 0 2px 0 color-mix(in srgb, var(--season-a) 45%, transparent); }
html[data-season] .board-box .board {
  background-image: linear-gradient(var(--outline), var(--outline)), linear-gradient(165deg, var(--season-rim1) 0%, var(--season-rim2) 100%);
}
html[data-season] .logo { background: linear-gradient(180deg, var(--season-rib1), var(--season-rib2)); }
html[data-season] button.primary { background: linear-gradient(180deg, var(--season-btn1), var(--season-btn2)); }
html[data-season] button.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--season-btn1), var(--season-btn2)); filter: brightness(1.08); }
html[data-season] .card, html[data-season] .box { border-color: var(--ui-line); }
html[data-season] .pw-hint { border-color: var(--season-a); }
@media (prefers-color-scheme: dark) { html[data-season] body { background-color: var(--season-bg-dark); } }

/* ---- poker: the gold and the page tint follow the season; the table's own look (felt, rail, backs) stays the player's ---- */
html[data-season] { --gold: var(--season-a); }
.season-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin: .3em 0 .6em; }

/* A season's own picture for the middle of the board: drop public/img/mboard-centre-<season>.webp in place and it
   shows (a missing file just leaves the teal gradient under it). */
html[data-season="autumn"] .board-box { --center-art: url("/img/mboard-centre-autumn.webp?v=1"); }
html[data-season="halloween"] .board-box { --center-art: url("/img/mboard-centre-halloween.webp?v=1"); }
html[data-season="newyear"] .board-box { --center-art: url("/img/mboard-centre-newyear.webp?v=1"); }
html[data-season="spring"] .board-box { --center-art: url("/img/mboard-centre-spring.webp?v=1"); }
html[data-season="summer"] .board-box { --center-art: url("/img/mboard-centre-summer.webp?v=1"); }
html[data-season="birthday"] .board-box { --center-art: url("/img/mboard-centre-birthday.webp?v=1"); }
html[data-season="march8"] .board-box { --center-art: url("/img/mboard-centre-march8.webp?v=1"); }
html[data-season="feb23"] .board-box { --center-art: url("/img/mboard-centre-feb23.webp?v=1"); }


/* =====================================================================================================
   Decorations: emoji sat on the corners of things, drawn with ::before/::after so no markup changes.
   The four --deco-* are a season's corner pieces (bottom-left, bottom-right, top-left, top-right).
   ===================================================================================================== */

/* ---- the poker table: pieces behind the table at its four corners, the figure next to a name is a real element now (.name-badge), see poker.css ---- */
html[data-season] .table-wrap { position: relative; }
html[data-season] .table-stage::before, html[data-season] .table-stage::after,
html[data-season] .table-wrap::before, html[data-season] .table-wrap::after {
  position: absolute; line-height: 1; pointer-events: none; user-select: none; z-index: 0;
  font-size: clamp(1.5rem, 3.4vw, 3.1rem); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
}
html[data-season] .table-stage::before { content: var(--deco-a); left: .6em; bottom: .15em; }
html[data-season] .table-stage::after { content: var(--deco-b); right: .6em; bottom: .15em; }
html[data-season] .table-wrap::before { content: var(--deco-c); left: .5em; top: .2em; font-size: clamp(1.2rem, 2.6vw, 2.3rem); }
html[data-season] .table-wrap::after { content: var(--deco-d); right: .5em; top: .2em; font-size: clamp(1.2rem, 2.6vw, 2.3rem); }
html[data-season] .table-oval::after { border-color: var(--season-a); }
/* no clutter on a phone's small table */
@media (max-width: 720px) {
  html[data-season] .table-stage::before, html[data-season] .table-stage::after { font-size: 1.3rem; }
  html[data-season] .table-wrap::before, html[data-season] .table-wrap::after { display: none; }
}

/* ---- the poker lobby: a piece on the profile card and on «Создать стол» ---- */
html[data-season] .lobby-me, html[data-season] .start-create { position: relative; }
html[data-season] .lobby-me::after, html[data-season] .start-create::after {
  content: var(--deco-lobby); position: absolute; right: .5em; top: -.55em; font-size: 1.7rem; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

/* ---- Monopoly: the four outer corners of the board, the lobby, the entry picture ---- */
html[data-season] .board-box::before, html[data-season] .board-box::after,
html[data-season] .token-layer::before, html[data-season] .token-layer::after {
  position: absolute; z-index: 6; font-size: 4.6cqw; line-height: 1; pointer-events: none; user-select: none;
  filter: drop-shadow(0 .3cqw .3cqw rgba(0, 0, 0, .4));
}
html[data-season] .board-box::before { content: var(--deco-c); left: .1cqw; top: .1cqw; }
html[data-season] .board-box::after { content: var(--deco-a); right: .2cqw; bottom: 2.8cqw; } /* above the «Получите $200» line of the corner */
html[data-season] .token-layer::before { content: var(--deco-d); right: -1.8cqw; top: -1.8cqw; }
html[data-season] .token-layer::after { content: var(--deco-b); left: -1.8cqw; bottom: -1.8cqw; }
html[data-season] .hero-card.slim::after { content: var(--deco-a) var(--deco-b); position: absolute; left: 14px; bottom: 8px; font-size: 2rem; letter-spacing: .1em; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
html[data-season] .weekly { position: relative; }
html[data-season] .weekly::after {
  content: var(--deco-lobby); position: absolute; right: .6em; top: -.6em; font-size: 1.7rem; line-height: 1; pointer-events: none;
}

/* ---- the felt itself: a piece at each end of the table and two smaller ones (drawn in the gold line's layer, under the seats) ---- */
html[data-season="halloween"] .table-oval::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🎃%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E👻%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🦇%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🕸️%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 5.5% 50%, 94.5% 50%, 17% 24%, 83% 76%;
  background-size: 3.3rem, 3.3rem, 2.1rem, 2.1rem;
}
html[data-season="autumn"] .table-oval::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🍁%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🍂%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🍄%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🌰%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 5.5% 50%, 94.5% 50%, 17% 24%, 83% 76%;
  background-size: 3.3rem, 3.3rem, 2.1rem, 2.1rem;
}
html[data-season="newyear"] .table-oval::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🎄%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E🎁%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E❄️%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='50' font-size='52' text-anchor='middle'%3E⭐%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 5.5% 50%, 94.5% 50%, 17% 24%, 83% 76%;
  background-size: 3.3rem, 3.3rem, 2.1rem, 2.1rem;
}
@media (max-width: 720px) { html[data-season] .table-oval::after { background-size: 2.2rem, 2.2rem, 1.4rem, 1.4rem; } }


/* =====================================================================================================
   The big picture on the front pages (Monopoly's lobby and entry, poker's lobby and entry): one per game and per
   season (public/img/hero/<game>-<default|halloween|newyear>.webp, 16:9, calm on the left). The picture sits on
   the right at the card's height; the rest of the card is a gradient in the picture's own edge colours, and the
   picture's left side fades into it, so it fits any width. A new season is one block of variables here.
   ===================================================================================================== */
:root {
  --hero-mono: url("/img/hero/mono-default.webp?v=1"); --hero-mono-top: #46b8b5; --hero-mono-bottom: #4ec7c2;
  --hero-poker: url("/img/hero/poker-default.webp?v=1"); --hero-poker-top: #002d20; --hero-poker-bottom: #003024;
}
html[data-season="halloween"] {
  --hero-mono: url("/img/hero/mono-halloween.webp?v=1"); --hero-mono-top: #eeb07a; --hero-mono-bottom: #e09963;
  --hero-poker: url("/img/hero/poker-halloween.webp?v=1"); --hero-poker-top: #321c50; --hero-poker-bottom: #361e55;
}
html[data-season="autumn"] {
  --hero-mono: url("/img/hero/mono-autumn.webp?v=1"); --hero-mono-top: #fed095; --hero-mono-bottom: #f0b775;
  --hero-poker: url("/img/hero/poker-autumn.webp?v=1"); --hero-poker-top: #2f0a0a; --hero-poker-bottom: #2e0b0a;
}
html[data-season="newyear"] {
  --hero-mono: url("/img/hero/mono-newyear.webp?v=1"); --hero-mono-top: #55bfcd; --hero-mono-bottom: #57c7d2;
  --hero-poker: url("/img/hero/poker-newyear.webp?v=1"); --hero-poker-top: #00311e; --hero-poker-bottom: #003b27;
}
html[data-season="spring"] {
  --hero-mono: url("/img/hero/mono-spring.webp?v=1"); --hero-mono-top: #da9795; --hero-mono-bottom: #778345;
  --hero-poker: url("/img/hero/poker-spring.webp?v=1"); --hero-poker-top: #a25965; --hero-poker-bottom: #1e171f;
}
html[data-season="summer"] {
  --hero-mono: url("/img/hero/mono-summer.webp?v=1"); --hero-mono-top: #6eb4e6; --hero-mono-bottom: #c89f7e;
  --hero-poker: url("/img/hero/poker-summer.webp?v=1"); --hero-poker-top: #3e4516; --hero-poker-bottom: #3b2f25;
}
html[data-season="birthday"] {
  --hero-mono: url("/img/hero/mono-birthday.webp?v=1"); --hero-mono-top: #a97d5e; --hero-mono-bottom: #9e8272;
  --hero-poker: url("/img/hero/poker-birthday.webp?v=1"); --hero-poker-top: #311e10; --hero-poker-bottom: #160c06;
}
html[data-season="march8"] {
  --hero-mono: url("/img/hero/mono-march8.webp?v=1"); --hero-mono-top: #cd998a; --hero-mono-bottom: #766c46;
  --hero-poker: url("/img/hero/poker-march8.webp?v=1"); --hero-poker-top: #bb967d; --hero-poker-bottom: #717242;
}
html[data-season="feb23"] {
  --hero-mono: url("/img/hero/mono-feb23.webp?v=1"); --hero-mono-top: #3e4236; --hero-mono-bottom: #4a5047;
  --hero-poker: url("/img/hero/poker-feb23.webp?v=1"); --hero-poker-top: #23201d; --hero-poker-bottom: #11130c;
}
.hero-card {
  position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; min-height: 330px;
  border: 2px solid #3a2410; border-radius: 22px; box-shadow: 0 5px 0 #3a2410, 0 14px 28px rgba(30, 20, 10, .22);
  background: linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
}
.hero-card::before {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--hero-img) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
.hero-mono { --hero-img: var(--hero-mono); --hero-top: var(--hero-mono-top); --hero-bottom: var(--hero-mono-bottom); color: #2b1a0a; }
.hero-poker {
  --hero-img: var(--hero-poker); --hero-top: var(--hero-poker-top); --hero-bottom: var(--hero-poker-bottom); color: #f7f2e2;
  border-color: rgba(224, 176, 76, .65); box-shadow: 0 5px 0 rgba(0, 0, 0, .5), 0 14px 28px rgba(0, 0, 0, .4);
}
/* Monopoly's picture is light in either theme, so what sits on it (the code field, the buttons) keeps the light values. */
.hero-mono { --paper: #fffaf0; --paper2: #fff4dc; --ink: #2b1a0a; --muted: #6a6455; --ui-line: #3a2410; --ui-pop: #3a2410; }
.hero-card.slim { min-height: 230px; }
.hero-body { padding: 26px 30px; max-width: min(480px, 52%); }
.hero-hello { margin: 0 0 2px; font-weight: 700; font-size: 1.02em; }
.hero-card h1 { margin: 0 0 8px; font: 900 clamp(1.9rem, 4.2vw, 2.7rem)/1.05 Georgia, "Times New Roman", serif; text-wrap: balance; }
.hero-mono h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, .55); }
.hero-poker h1 { color: #fff7dc; text-shadow: 0 3px 6px rgba(0, 0, 0, .55); }
.hero-sub { margin: 0 0 16px; font-weight: 600; opacity: .88; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-card .code-join { display: flex; gap: 6px; }
/* The create button, the code field and «Войти» are one row at one height. */
.hero-actions { --row-h: 50px; align-items: stretch; }
.hero-actions > button, .hero-actions .code-join input, .hero-actions .code-join button {
  box-sizing: border-box; height: var(--row-h); min-height: var(--row-h); padding-top: 0; padding-bottom: 0; font-size: 1.05em; line-height: 1.1;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 14px;
}
.hero-actions > button { padding-left: 20px; padding-right: 20px; font-size: 1.05em; }
.hero-actions .code-join { align-items: stretch; }
.hero-actions .code-join input { width: 5.8em; padding-left: .4em; padding-right: .4em; }
.hero-actions .code-join button { padding-left: 16px; padding-right: 16px; font-weight: 800; }
.hero-actions { gap: 10px; }
.hero-card .code-join input { width: 6.6em; text-align: center; letter-spacing: .28em; font-weight: 800; text-transform: uppercase; font-size: 1.05em; }
.hero-card .code-join input::placeholder { letter-spacing: .1em; font-weight: 600; }
/* The code field and «Войти» are the same dark pair in both games: a near-black fill, a gold outline, light text. */
.hero-card .code-join input, .hero-card .code-join button:not(.primary) {
  background: rgba(10, 16, 14, .92); border: 2px solid rgba(224, 176, 76, .75); color: #fff7dc;
}
.hero-card .code-join input { color: #fff; }
.hero-card .code-join input::placeholder { color: rgba(255, 247, 220, .55); }
.hero-card .code-join button:not(.primary) { box-shadow: 0 2px 0 rgba(0, 0, 0, .55); }
.hero-card .code-join button:not(.primary):hover:not(:disabled) { background: rgba(28, 38, 33, .9); }
.hero-card .code-join input:focus-visible { outline: none; border-color: #f2cf7a; box-shadow: 0 0 0 3px rgba(224, 176, 76, .3); }
/* poker's golden call to action, the same as in «Новый стол» */
.hero-poker .gold-go {
  border: 2px solid #8a6414; border-radius: 16px; background: linear-gradient(180deg, #f9dc8e, #e0b04c 55%, #c8932a); color: #2a1c06; font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 4px 0 #8a6414, 0 10px 20px rgba(0, 0, 0, .35);
}
.hero-poker .gold-go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #8a6414; }
/* the seasonal button colours must not repaint this one */
html[data-season] .hero-poker .gold-go, html[data-season] .hero-poker .gold-go:hover:not(:disabled) {
  background: linear-gradient(180deg, #f9dc8e, #e0b04c 55%, #c8932a); color: #2a1c06; filter: none;
}
.hero-poker .hero-sub { font-size: 1.08em; color: #f1ecd9; opacity: .95; }
.hero-poker .hero-hello { font-size: 1.1em; }
@media (max-width: 720px) {
  .hero-card { min-height: 0; }
  .hero-card::before { left: 0; aspect-ratio: auto; max-width: none; background-position: right center; opacity: .6; }
  .hero-body { max-width: none; padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-poker .gold-go { transition: none; } }


/* The entry screens of both games share one layout: the picture, then the form under it, the pair at the same distance under
   the top bar. The page-specific stylesheets only dress the card (colours), they do not place it. */
.center-screen.entry-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
  min-height: calc(100vh - 56px); padding: clamp(16px, 9vh, 72px) 16px 16px; box-sizing: border-box;
}
.entry-screen .hero-card { width: min(980px, 100%); flex: none; }
.entry-screen > form { width: min(380px, 100%); flex: none; box-sizing: border-box; }

/* The top bar of both games has one height, and on a phone Monopoly's home link shrinks to its icon so the bar stays one row
   like poker's (the entry screens of both then start at the same height). */
header.top { box-sizing: border-box; min-height: 56px; }
@media (max-width: 560px) {
  header.top .to-poker-label { display: none; }
}

.entry-screen > form h2, .entry-screen > form h1, .entry-screen > form > p { text-align: center; margin-left: 0; margin-right: 0; }
.entry-screen > form h2, .entry-screen > form h1 { margin-top: 0; }
@media (max-width: 720px) {
  /* the text over the picture gets the card's own colour behind it, so it stays readable on a narrow card */
  .hero-card .hero-body { background: linear-gradient(90deg, color-mix(in srgb, var(--hero-top) 94%, transparent) 55%, transparent); border-radius: 0 0 0 0; }
  .hero-card.slim .hero-body { width: 100%; max-width: none; }
}


/* While a window (profile, standings, trade, the create-table form…) is up, the page behind it does not scroll: on a phone a
   swipe over the window used to move the front page underneath it. */
html:has(#modal:not([hidden])), html:has(#cardModal:not([hidden])), html:has(.profile-overlay), html:has(.pw-overlay),
html:has(.cbe-overlay), html:has(.avatar-lightbox),
html:has(#modal:not([hidden])) body, html:has(#cardModal:not([hidden])) body, html:has(.profile-overlay) body, html:has(.pw-overlay) body,
html:has(.cbe-overlay) body, html:has(.avatar-lightbox) body { overflow: hidden; overscroll-behavior: none; }
#modal, #cardModal, .profile-overlay, .pw-overlay, .cbe-overlay { overscroll-behavior: contain; }

/* Achievement description bubble on touch screens (js/ach-tip.js) */
.ach-tip { position: fixed; z-index: 100000; max-width: min(260px, 92vw); padding: 8px 11px; border-radius: 10px; background: #1d1a17; color: #fff6e0; font-size: 13px; line-height: 1.35; white-space: pre-line; box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; }

/* ---- a drawn backdrop for each game's quiet screens (entry, lobby, room): img/bg/<game>-<season|default>[-m].webp.
   Not on the board or the table (html.quiet is set by seasonFx()). Phones get the portrait scenes. ---- */
html[data-game="mono"] { --game-bg: url("/img/bg/mono-default.webp?v=2"); }
html[data-game="mono"][data-season="halloween"] { --game-bg: url("/img/bg/mono-halloween.webp?v=2"); }
html[data-game="mono"][data-season="newyear"] { --game-bg: url("/img/bg/mono-newyear.webp?v=2"); }
html[data-game="mono"][data-season="autumn"] { --game-bg: url("/img/bg/mono-autumn.webp?v=1"); }
html[data-game="poker"][data-season="autumn"] { --game-bg: url("/img/bg/poker-autumn.webp?v=1"); }
html[data-game="poker"] { --game-bg: url("/img/bg/poker-default.webp?v=2"); }
html[data-game="poker"][data-season="halloween"] { --game-bg: url("/img/bg/poker-halloween.webp?v=2"); }
html[data-game="poker"][data-season="newyear"] { --game-bg: url("/img/bg/poker-newyear.webp?v=2"); }
@media (max-width: 720px) {
  html[data-game="mono"] { --game-bg: url("/img/bg/mono-default-m.webp?v=2"); }
  html[data-game="mono"][data-season="halloween"] { --game-bg: url("/img/bg/mono-halloween-m.webp?v=2"); }
  html[data-game="mono"][data-season="newyear"] { --game-bg: url("/img/bg/mono-newyear-m.webp?v=2"); }
  html[data-game="mono"][data-season="autumn"] { --game-bg: url("/img/bg/mono-autumn-m.webp?v=1"); }
  html[data-game="poker"][data-season="autumn"] { --game-bg: url("/img/bg/poker-autumn-m.webp?v=1"); }
  html[data-game="poker"] { --game-bg: url("/img/bg/poker-default-m.webp?v=2"); }
  html[data-game="poker"][data-season="halloween"] { --game-bg: url("/img/bg/poker-halloween-m.webp?v=2"); }
  html[data-game="poker"][data-season="newyear"] { --game-bg: url("/img/bg/poker-newyear-m.webp?v=2"); }
}
html.quiet[data-game]:not([data-game=""]) body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--game-bg) center / cover no-repeat; }
/* poker paints its own gradient on <body>, which would cover the picture (a z-index:-1 layer sits under body's own background) */
html.quiet[data-game]:not([data-game=""]) body { background: none; }
/* a soft shade under the content column so cards never fight the picture's props: darkest in the middle, gone at the sides */
html.quiet[data-game]:not([data-game=""]) body::before {
  background: linear-gradient(90deg, transparent calc(50% - 640px), rgba(10, 8, 20, .46) calc(50% - 520px), rgba(10, 8, 20, .46) calc(50% + 520px), transparent calc(50% + 640px)),
    var(--game-bg) center / cover no-repeat;
}
@media (max-width: 720px) {
  html.quiet[data-game]:not([data-game=""]) body::before { background: linear-gradient(rgba(10, 8, 20, .22), rgba(10, 8, 20, .22)), var(--game-bg) center / cover no-repeat; }
}

/* ---- the room around the poker table itself (img/bg/poker-table-<id>[-m].webp): dark and quiet in the middle.
   By the season, unless the admin picked one for everybody (html[data-table-bg]) or the player did (html[data-room-pref],
   which wins); ids: default (the club) | lounge | library | loft | halloween | newyear, and off = none. */
html[data-game="poker"] {
  --tb-default: url("/img/bg/poker-table-default.webp?v=1");
  --tb-lounge: url("/img/bg/poker-table-lounge.webp?v=1");
  --tb-library: url("/img/bg/poker-table-library.webp?v=1");
  --tb-loft: url("/img/bg/poker-table-loft.webp?v=1");
  --tb-blue: url("/img/bg/poker-table-blue.webp?v=2");
  --tb-mint: url("/img/bg/poker-table-mint.webp?v=2");
  --tb-graphite: url("/img/bg/poker-table-graphite.webp?v=2");
  --tb-day-club: url("/img/bg/poker-table-day-club.webp?v=1");
  --tb-sunroom: url("/img/bg/poker-table-sunroom.webp?v=1");
  --tb-scandi: url("/img/bg/poker-table-scandi.webp?v=1");
  --tb-halloween: url("/img/bg/poker-table-halloween.webp?v=1");
  --tb-newyear: url("/img/bg/poker-table-newyear.webp?v=1");
  --tb-autumn: url("/img/bg/poker-table-autumn.webp?v=1");
  --table-bg: var(--tb-default);
}
@media (max-width: 720px) {
  html[data-game="poker"] {
    --tb-default: url("/img/bg/poker-table-default-m.webp?v=1");
    --tb-lounge: url("/img/bg/poker-table-lounge-m.webp?v=1");
    --tb-library: url("/img/bg/poker-table-library-m.webp?v=1");
    --tb-loft: url("/img/bg/poker-table-loft-m.webp?v=1");
    --tb-blue: url("/img/bg/poker-table-blue-m.webp?v=1");
    --tb-mint: url("/img/bg/poker-table-mint-m.webp?v=1");
    --tb-graphite: url("/img/bg/poker-table-graphite-m.webp?v=1");
    --tb-day-club: url("/img/bg/poker-table-day-club-m.webp?v=1");
    --tb-sunroom: url("/img/bg/poker-table-sunroom-m.webp?v=1");
    --tb-scandi: url("/img/bg/poker-table-scandi-m.webp?v=1");
    --tb-halloween: url("/img/bg/poker-table-halloween-m.webp?v=1");
    --tb-newyear: url("/img/bg/poker-table-newyear-m.webp?v=1");
    --tb-autumn: url("/img/bg/poker-table-autumn-m.webp?v=1");
  }
}
html[data-game="poker"][data-season="halloween"] { --table-bg: var(--tb-halloween); }
html[data-game="poker"][data-season="newyear"] { --table-bg: var(--tb-newyear); }
html[data-game="poker"][data-season="autumn"] { --table-bg: var(--tb-autumn); }
html[data-game="poker"][data-table-bg="autumn"] { --table-bg: var(--tb-autumn); }
html[data-game="poker"][data-table-bg="default"] { --table-bg: var(--tb-default); }
html[data-game="poker"][data-table-bg="lounge"] { --table-bg: var(--tb-lounge); }
html[data-game="poker"][data-table-bg="library"] { --table-bg: var(--tb-library); }
html[data-game="poker"][data-table-bg="loft"] { --table-bg: var(--tb-loft); }
html[data-game="poker"][data-table-bg="blue"] { --table-bg: var(--tb-blue); }
html[data-game="poker"][data-table-bg="mint"] { --table-bg: var(--tb-mint); }
html[data-game="poker"][data-table-bg="graphite"] { --table-bg: var(--tb-graphite); }
html[data-game="poker"][data-table-bg="day-club"] { --table-bg: var(--tb-day-club); }
html[data-game="poker"][data-table-bg="sunroom"] { --table-bg: var(--tb-sunroom); }
html[data-game="poker"][data-table-bg="scandi"] { --table-bg: var(--tb-scandi); }
html[data-game="poker"][data-table-bg="halloween"] { --table-bg: var(--tb-halloween); }
html[data-game="poker"][data-table-bg="newyear"] { --table-bg: var(--tb-newyear); }
html[data-game="poker"][data-room-pref="default"] { --table-bg: var(--tb-default); }
html[data-game="poker"][data-room-pref="lounge"] { --table-bg: var(--tb-lounge); }
html[data-game="poker"][data-room-pref="library"] { --table-bg: var(--tb-library); }
html[data-game="poker"][data-room-pref="loft"] { --table-bg: var(--tb-loft); }
html[data-game="poker"][data-room-pref="blue"] { --table-bg: var(--tb-blue); }
html[data-game="poker"][data-room-pref="mint"] { --table-bg: var(--tb-mint); }
html[data-game="poker"][data-room-pref="graphite"] { --table-bg: var(--tb-graphite); }
html[data-game="poker"][data-room-pref="day-club"] { --table-bg: var(--tb-day-club); }
html[data-game="poker"][data-room-pref="sunroom"] { --table-bg: var(--tb-sunroom); }
html[data-game="poker"][data-room-pref="scandi"] { --table-bg: var(--tb-scandi); }
/* the picture fills exactly the area under the header (the table page), stretched to it, so nothing is cropped or hidden behind the top bar */
html[data-game="poker"] body.ingame .table-page { background: var(--table-bg) 0 0 / 100% 100% no-repeat; }
html[data-game="poker"][data-table-bg="off"]:not([data-room-pref]) body.ingame .table-page,
html[data-game="poker"][data-room-pref="off"] body.ingame .table-page { background: transparent; }
/* the little pictures in the «Фон за столом» picker */
.room-swatch { display: block; width: 64px; height: 42px; border-radius: 8px; border: 2px solid var(--ui-line, #1b1b1f); background: #14161b center / cover; }
.room-swatch.room-site { background: linear-gradient(135deg, #1e3b2f 0 50%, #2b1b46 50% 100%); }
.room-swatch.room-off { background: radial-gradient(circle at 50% 0%, #22262f, #14161b 70%); }

/* Drawn UI icons (js/icons-art.js) in place of system emoji */
img.ic { width: 1.25em; height: 1.25em; vertical-align: -.28em; object-fit: contain; display: inline-block; flex: none; }
button img.ic, .mini img.ic { margin-right: .05em; }
.results-trophy img.ic, .big-ic img.ic { width: 1em; height: 1em; vertical-align: baseline; }

/* the drifting emoji are on over the poker table: none of the season's still pieces next to them (corners, and the ones on the felt) */
html.fx-falling .table-stage::before, html.fx-falling .table-stage::after, html.fx-falling .table-wrap::before, html.fx-falling .table-wrap::after { display: none; }
html.fx-falling .table-oval::after { background-image: none; }

/* ---- autumn: a warm low-sun glow over the quiet screens (soft-light, so it only warms what is under it; clicks pass through) ---- */
html.quiet[data-season="autumn"]::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 70% 55% at 12% 0%, rgba(255, 176, 72, .55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(190, 70, 30, .4), transparent 70%);
}
@media (prefers-reduced-motion: reduce) { html.quiet[data-season="autumn"]::after { opacity: .7; } }