:root {
			--bg: #0a0d12;
			--panel: #131922;
			--panel-2: #1a2330;
			--line: #2b3950;
			--text: #e9f0ff;
			--muted: #95a9c8;
			--accent: #5dd6ff;
			--ok: #6cf7ad;
			--warn: #ffc66b;
			--danger: #ff7f94;
			--chip: #182132;
			--chip-on: #224a76;
			--chip-hit-on: #4f3344;
		}

		* {
			box-sizing: border-box;
			-webkit-tap-highlight-color: transparent;
		}

		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
			background: radial-gradient(circle at 70% -20%, #1c2838 0%, var(--bg) 45%), var(--bg);
			color: var(--text);
			font-family: "Trebuchet MS", "Segoe UI", sans-serif;
		}

		#app {
			height: 100dvh;
			overflow-y: auto;
			scroll-behavior: smooth;
			scroll-snap-type: y mandatory;
		}

		#app.game-active {
			overflow-y: hidden;
			scroll-snap-type: none;
		}

		#app.game-active #stage-welcome,
		#app.game-active #stage-rules,
		#app.game-active #stage-config {
			display: none;
		}

		#app:not(.game-active) #stage-game {
			display: none;
		}

		.stage {
			min-height: 100dvh;
			scroll-snap-align: start;
			padding: 18px 14px 26px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 14px;
		}

		.stage-title {
			font-size: 1.15rem;
			margin: 0;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			color: var(--muted);
		}

		.brand-wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20px;
			width: 100%;
			max-width: 520px;
			margin: 0 auto;
		}

		.design-credit {
			color: #f6fbff;
			font-size: 0.86rem;
			text-align: center;
			line-height: 1.35;
			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
			padding: 10px 14px;
			border-radius: 999px;
			border: 1px solid rgba(173, 215, 255, 0.28);
			background: linear-gradient(180deg, rgba(26, 38, 58, 0.92) 0%, rgba(15, 24, 38, 0.92) 100%);
			box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
		}

		.logo-img {
			width: min(88vw, 380px);
			border-radius: 14px;
			box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
			border: 1px solid #2a3242;
		}

		.app-version {
			margin-top: -12px;
			padding: 3px 8px;
			border: 1px solid rgba(149, 169, 200, 0.3);
			border-radius: 999px;
			background: rgba(15, 22, 34, 0.8);
			color: var(--muted);
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.06em;
		}

		.img-btn {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border: 0;
			background: none;
			padding: 0;
			cursor: pointer;
			width: min(75vw, 280px);
			transition: transform 0.12s ease, filter 0.12s ease;
		}

		.img-btn img {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 12px;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
		}

		.img-btn:active {
			transform: translateY(1px) scale(0.995);
		}

		.blink {
			animation: softBlink 1.6s ease-in-out infinite;
		}

		.heartbeat {
			animation: heartbeat 1.65s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
			transform-origin: center;
		}

		@keyframes softBlink {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 0.82;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes heartbeat {
			0% {
				transform: scale(1);
				filter: drop-shadow(0 0 0 rgba(93, 214, 255, 0));
			}

			10% {
				transform: scale(1.06);
				filter: drop-shadow(0 0 8px rgba(93, 214, 255, 0.28));
			}

			20% {
				transform: scale(0.985);
				filter: drop-shadow(0 0 2px rgba(93, 214, 255, 0.12));
			}

			30% {
				transform: scale(1.09);
				filter: drop-shadow(0 0 11px rgba(93, 214, 255, 0.36));
			}

			40% {
				transform: scale(1);
				filter: drop-shadow(0 0 4px rgba(93, 214, 255, 0.18));
			}

			100% {
				transform: scale(1);
				filter: drop-shadow(0 0 0 rgba(93, 214, 255, 0));
			}
		}

		.name-input-row {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto;
			gap: 8px;
			align-items: center;
		}

		.player-index-badge {
			width: 34px;
			height: 34px;
			border-radius: 50%;
			border: 1px solid #4d6487;
			background: #16253a;
			color: #e9f4ff;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 0.9rem;
			font-weight: 700;
			cursor: pointer;
			transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
		}

		.player-index-badge.starting {
			background: linear-gradient(180deg, #6d5420 0%, #4e3912 100%);
			border-color: #ffe18b;
			box-shadow: 0 0 0 2px rgba(255, 225, 139, 0.18), 0 0 14px rgba(255, 213, 120, 0.18);
			color: #fff8db;
		}

		.player-index-badge.random {
			cursor: default;
			opacity: 0.75;
		}

		.organize-toggle {
			border: 1px solid #3e5b80;
			background: #17283f;
			color: #d9e9ff;
			border-radius: 10px;
			padding: 10px 12px;
			font-size: 0.9rem;
			font-weight: 700;
			cursor: pointer;
		}

		.organize-toggle.on {
			background: #2b4f7e;
			border-color: #8bc5ff;
		}

		.move-controls {
			display: flex;
			gap: 6px;
		}

		.move-btn {
			border: 1px solid #4b6489;
			background: linear-gradient(180deg, #1a2d46 0%, #15253a 100%);
			border-radius: 10px;
			width: 46px;
			height: 46px;
			color: #eaf4ff;
			font-size: 1.1rem;
			font-weight: 800;
			cursor: pointer;
			transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
		}

		.move-btn:disabled {
			opacity: 0.35;
			cursor: not-allowed;
		}

		.player-index-badge:active,
		.move-btn:active,
		.organize-toggle:active,
		.text-btn:active,
		.pill:active,
		.limit-chip:active {
			transform: scale(0.98);
			box-shadow: 0 0 0 2px rgba(143, 202, 255, 0.22), 0 0 16px rgba(93, 214, 255, 0.18);
			filter: brightness(1.12);
		}

		.panel {
			width: min(98vw, 760px);
			margin: 0 auto;
			background: linear-gradient(180deg, var(--panel) 0%, #101721 100%);
			border: 1px solid var(--line);
			border-radius: 14px;
			padding: 12px;
			box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
		}

		.config-grid {
			display: grid;
			gap: 10px;
		}

		.field {
			display: grid;
			gap: 6px;
		}

		.field label,
		.legend {
			font-size: 0.92rem;
			color: var(--muted);
		}

		input[type="text"],
		input[type="number"],
		select {
			width: 100%;
			background: #0f1622;
			color: var(--text);
			border: 1px solid #2d3b53;
			border-radius: 10px;
			padding: 10px;
			font-size: 1rem;
		}

		.inline {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		.pill {
			border: 1px solid #355072;
			padding: 7px 10px;
			border-radius: 999px;
			background: #122033;
			color: var(--text);
			font-size: 0.9rem;
			cursor: pointer;
		}

		.pill input {
			display: none;
		}

		.pill.on {
			background: #1d3e63;
			border-color: #4d83be;
			color: #e8f5ff;
		}

		.cards-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 6px;
			max-height: 220px;
			overflow: auto;
			padding: 8px;
			border: 1px solid #2a3a53;
			border-radius: 10px;
			background: #0f1724;
		}

		.card-chip {
			font-size: 0.74rem;
			text-align: center;
			border: 1px solid #32445e;
			padding: 6px 4px;
			border-radius: 9px;
			background: #121d2d;
			cursor: pointer;
			user-select: none;
		}

		.card-chip.on {
			background: #4f3344;
			border-color: #c46f96;
			color: #ffdff0;
		}

		.config-note {
			color: var(--muted);
			font-size: 0.86rem;
			line-height: 1.35;
		}

		.game-wrap {
			width: min(98vw, 900px);
			margin: 0 auto;
			display: grid;
			gap: 10px;
			align-content: start;
			min-height: 100%;
			padding-bottom: 20px;
			position: relative;
		}

		.game-topbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 6px;
			position: sticky;
			top: 0;
			z-index: 40;
			min-height: 44px;
		}

		.burger-btn {
			font-size: 1.1rem;
			min-width: 44px;
		}

		.topbar-icon {
			width: 44px;
			min-width: 44px;
			padding: 0;
			font-size: 1.2rem;
			background: rgba(13, 21, 34, 0.94);
		}

		.game-view-switcher {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 4px;
			width: min(100%, 430px);
			padding: 4px;
			border: 1px solid #2e425e;
			border-radius: 12px;
			background: #0d1522;
		}

		.view-tab {
			min-width: 0;
			min-height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			border: 1px solid transparent;
			border-radius: 8px;
			background: transparent;
			color: var(--muted);
			font: inherit;
			cursor: pointer;
		}

		.view-tab span {
			font-size: 1.05rem;
		}

		.view-tab small {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 0.78rem;
		}

		.view-tab.on {
			border-color: #74b8ec;
			background: #244f78;
			color: #fff;
		}

		.game-menu {
			display: none;
			position: absolute;
			right: 0;
			top: 38px;
			padding: 8px;
			border-radius: 10px;
			border: 1px solid #2e425e;
			background: #0d1522;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
		}

		.drawer-backdrop,
		.game-info-drawer {
			display: none;
		}

		.game-menu.open {
			display: block;
		}

		.totals {
			border-radius: 12px;
			border: 1px solid #32445f;
			background: linear-gradient(180deg, #101723 0%, #172434 100%);
			padding: 10px;
			box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
		}

		.totals h2,
		.entry h2,
		.history h2 {
			margin: 0 0 8px;
			font-size: 1rem;
			color: #c7dcff;
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}

		.totals-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
			gap: 6px;
		}

		.total-card {
			padding: 8px;
			border: 1px solid #39506e;
			border-radius: 10px;
			background: #111a27;
		}

		.total-card.leader {
			border-color: #d9b851;
			background: linear-gradient(180deg, #2c2918 0%, #1c201c 100%);
			box-shadow: inset 0 0 0 1px rgba(255, 225, 139, 0.12);
		}

		.total-name {
			font-size: 0.82rem;
			color: var(--muted);
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.total-score {
			margin-top: 3px;
			font-size: 1.2rem;
			font-weight: 700;
			color: #f4f9ff;
		}

		.game-view {
			min-width: 0;
		}

		.game-view-ranking .ranking-view {
			min-height: calc(100dvh - 90px);
		}

		.entry,
		.history {
			border: 1px solid #32445f;
			border-radius: 12px;
			padding: 10px;
			background: linear-gradient(180deg, #0f1622 0%, #121b29 100%);
		}

		.round-meta {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;
			flex-wrap: wrap;
		}

		.round-jump {
			margin: 8px 0 10px;
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.round-jump.collapsed {
			display: none;
		}

		.badge-btn {
			cursor: pointer;
		}

		.round-chip {
			border: 1px solid #3b506d;
			background: #142238;
			color: #dcedff;
			border-radius: 999px;
			padding: 7px 10px;
			font-size: 0.78rem;
			cursor: pointer;
			display: grid;
			gap: 2px;
			min-width: 72px;
			min-height: 48px;
			text-align: left;
		}

		.round-chip small {
			color: var(--muted);
			font-size: 0.67rem;
			white-space: nowrap;
		}

		.round-chip.current {
			background: #285684;
			border-color: #8fcaff;
		}

		.round-chip.played {
			background: #1b2431;
			border-color: #33445d;
			color: #7f95b3;
			cursor: not-allowed;
			opacity: 0.7;
		}

		.round-chip.locked {
			cursor: not-allowed;
			opacity: 0.78;
		}

		.badge {
			border-radius: 999px;
			border: 1px solid #3a4c67;
			padding: 4px 9px;
			font-size: 0.8rem;
			color: #d8e7ff;
			background: #162235;
		}

		.order {
			font-size: 0.86rem;
			color: var(--muted);
			margin-bottom: 10px;
			line-height: 1.35;
		}

		.turn-strip {
			display: flex;
			align-items: center;
			gap: 6px;
			overflow-x: auto;
			padding: 8px;
			margin: 4px 0 12px;
			border: 1px solid #2e425c;
			border-radius: 10px;
			background: #0c1521;
			scrollbar-width: thin;
		}

		.turn-strip-label,
		.turn-person {
			white-space: nowrap;
			font-size: 0.78rem;
		}

		.turn-strip-label {
			color: var(--accent);
			font-weight: 800;
			margin-right: 4px;
		}

		.turn-person {
			padding: 5px 8px;
			border-radius: 999px;
			background: #17263a;
			color: #d8e7ff;
		}

		.turn-person.last {
			border: 1px solid #d0a953;
			color: #ffe7a3;
		}

		.turn-arrow {
			color: #65809f;
		}

		.player-row {
			border: 1px solid #2e405a;
			border-radius: 10px;
			padding: 8px;
			margin-bottom: 8px;
			background: #101927;
		}

		.player-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 6px;
			gap: 10px;
		}

		.player-head-right {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
		}



		.player-head-left {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
			position: relative;
		}

		.player-name {
			font-weight: 600;
		}

		.player-total {
			font-size: 0.74rem;
			border: 1px solid #426086;
			background: #16263b;
			color: #d6e8ff;
			border-radius: 999px;
			padding: 2px 8px;
			white-space: nowrap;
			text-align: center;
		}

		.turn-order {
			font-size: 0.76rem;
			border: 1px solid #2e425c;
			color: var(--muted);
			border-radius: 999px;
			padding: 2px 8px;
			white-space: nowrap;
			min-width: 40px;
			text-align: center;
		}

		.num-group {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.num-btn {
			border: 1px solid #415a79;
			border-radius: 8px;
			min-width: 44px;
			min-height: 44px;
			padding: 9px 12px;
			background: var(--chip);
			color: var(--text);
			font-size: 0.96rem;
			font-weight: 700;
			cursor: pointer;
		}

		.num-btn.on {
			background: var(--chip-on);
			border-color: #7fbcff;
			color: #f0f8ff;
			box-shadow: 0 0 0 2px rgba(127, 188, 255, 0.18);
		}

		.mode-hit .num-btn.on {
			background: var(--chip-hit-on);
			border-color: #f2a6c8;
		}

		.mode-hit .num-btn.bet-mark {
			border-color: #ffd46f;
			box-shadow: inset 0 0 0 1px rgba(255, 212, 111, 0.5);
		}

		.mode-hit .num-btn.bet-mark.on {
			border-color: #ffb9d6;
			box-shadow: inset 0 0 0 1px rgba(255, 185, 214, 0.65);
		}

		.num-btn:disabled {
			opacity: 0.35;
			cursor: not-allowed;
		}

		.warning {
			color: var(--warn);
			font-size: 0.83rem;
			margin-top: 4px;
			min-height: 1.1em;
		}

		.player-warning {
			margin-top: 6px;
			color: #ffd784;
			font-size: 0.76rem;
		}

		.phase-heading {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 10px;
		}

		.phase-heading h2 {
			margin: 2px 0 0;
			font-size: 1.25rem;
		}

		.phase-step,
		.phase-status {
			color: var(--muted);
			font-size: 0.76rem;
		}

		.phase-status {
			text-align: right;
		}

		.hit-progress {
			display: grid;
			grid-template-columns: auto minmax(70px, 1fr) auto;
			align-items: center;
			gap: 10px;
			margin: 0 0 12px;
			padding: 9px 10px;
			border: 1px solid #7d6332;
			border-radius: 10px;
			background: #282215;
			color: #ffe2a4;
			font-size: 0.8rem;
		}

		.hit-progress.valid {
			border-color: #3f8a62;
			background: #13271e;
			color: var(--ok);
		}

		.hit-progress progress {
			width: 100%;
			accent-color: var(--accent);
		}

		.msg {
			min-height: 1.2em;
			color: var(--accent);
			font-size: 0.87rem;
			margin-top: 6px;
		}

		.actions {
			display: flex;
			justify-content: center;
			margin-top: 8px;
		}

		.phase-actions {
			align-items: center;
			gap: 10px;
			position: sticky;
			bottom: 0;
			z-index: 10;
			padding: 10px 0 max(10px, env(safe-area-inset-bottom));
			background: linear-gradient(180deg, rgba(15, 22, 34, 0) 0%, #0f1622 25%);
		}

		.primary-action {
			min-height: 48px;
			border: 1px solid #72b9ec;
			border-radius: 12px;
			padding: 11px 18px;
			background: linear-gradient(180deg, #2676ad 0%, #195783 100%);
			color: #fff;
			font: inherit;
			font-weight: 800;
			cursor: pointer;
			box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25);
		}

		.primary-action:disabled {
			border-color: #38475b;
			background: #202a37;
			color: #8796a9;
			cursor: not-allowed;
			box-shadow: none;
		}

		.actions .img-btn {
			width: min(64vw, 240px);
		}

		.disabled {
			pointer-events: none;
			filter: grayscale(0.9) brightness(0.7);
			opacity: 0.7;
		}

		.history-list {
			display: grid;
			gap: 10px;
		}

		.round-item {
			border: 1px solid #2e425e;
			border-radius: 10px;
			padding: 8px;
			background: #0e1725;
		}

		.round-item h3 {
			margin: 0 0 6px;
			font-size: 0.95rem;
			color: #d9e9ff;
		}

		.mini-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.86rem;
		}

		.mini-table th,
		.mini-table td {
			border-bottom: 1px solid #273953;
			padding: 4px;
			text-align: center;
		}

		.mini-table th {
			color: #abc3e8;
			font-weight: 600;
			font-size: 0.76rem;
			text-transform: uppercase;
		}

		.round-actions {
			display: flex;
			gap: 8px;
			margin-top: 8px;
			flex-wrap: wrap;
		}

		.text-btn {
			border: 1px solid #395279;
			background: #15243a;
			color: #e5f1ff;
			border-radius: 8px;
			padding: 9px 11px;
			min-height: 44px;
			font-size: 0.82rem;
			cursor: pointer;
		}

		.text-btn.danger {
			border-color: #8d4760;
			background: #3a1f2e;
			color: #ffd9e6;
		}

		.text-btn.on {
			background: #284822;
			border-color: #7ad56e;
			color: #e4ffe0;
		}

		.pocha-actions {
			margin-top: 6px;
		}

		.pocha-btn:disabled {
			display: none;
		}

		.pocha-tag {
			border-color: #7ad56e;
			color: #ddffd6;
		}

		.edit-grid {
			display: grid;
			gap: 6px;
			margin-top: 8px;
		}

		.edit-row {
			display: grid;
			grid-template-columns: 1fr 70px 70px;
			gap: 6px;
			align-items: center;
		}

		.edit-head {
			color: var(--muted);
			font-size: 0.72rem;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
		}

		.edit-head > :first-child {
			text-align: left;
		}

		.small {
			color: var(--muted);
			font-size: 0.8rem;
		}

		.limit-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-top: 6px;
		}

		.limit-chip {
			border: 1px solid #3b506d;
			background: #142238;
			color: #dcedff;
			border-radius: 999px;
			padding: 6px 10px;
			font-size: 0.8rem;
			cursor: pointer;
		}

		.limit-chip.on {
			background: #285684;
			border-color: #8fcaff;
		}

		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		.done {
			color: var(--ok);
			font-weight: 700;
		}

		.game-result {
			text-align: center;
			border-color: #806d35;
			background: radial-gradient(circle at 50% 0%, #34301c 0%, #121b29 48%);
		}

		.result-kicker {
			margin: 0 0 5px;
			color: var(--ok);
			font-size: 0.82rem;
			font-weight: 800;
			text-transform: uppercase;
		}

		.result-ranking {
			list-style: none;
			padding: 0;
			margin: 15px 0;
			display: grid;
			gap: 7px;
		}

		.result-row {
			display: flex;
			justify-content: space-between;
			gap: 15px;
			padding: 10px 12px;
			border: 1px solid #31445e;
			border-radius: 10px;
			background: #111a27;
			text-align: left;
		}

		.result-row.winner {
			border-color: #d9b851;
			background: #2b2818;
			color: #fff0b3;
		}

		.rules-panel {
			display: grid;
			gap: 12px;
		}

		.rules-title {
			margin: 0;
			font-size: 1.3rem;
			color: #dcedff;
		}

		.rules-grid {
			display: grid;
			gap: 10px;
		}

		.rules-item {
			border: 1px solid #2e425e;
			border-radius: 10px;
			padding: 10px;
			background: #101b2a;
		}

		.rules-item h3 {
			margin: 0 0 6px;
			font-size: 0.98rem;
			color: #d4e7ff;
		}

		.rules-item p {
			margin: 0;
			font-size: 0.9rem;
			line-height: 1.35;
			color: #a9bfdc;
		}

		.rules-list {
			margin: 0;
			padding-left: 18px;
			display: grid;
			gap: 7px;
			color: #c9dcf6;
			font-size: 0.9rem;
			line-height: 1.35;
		}

		.rules-list li {
			margin: 0;
		}

		.seo-intro {
			border: 1px solid #2e425e;
			border-radius: 10px;
			background: #0f1927;
			color: #b9cce7;
		}

		.seo-intro summary {
			padding: 10px;
			color: #d4e7ff;
			font-size: 0.9rem;
			font-weight: 700;
			cursor: pointer;
		}

		.seo-intro-body {
			padding: 0 10px 10px;
		}

		.seo-intro-body h2 {
			margin: 2px 0 7px;
			font-size: 1rem;
			color: #dcecff;
		}

		.seo-intro-body p {
			margin: 0 0 7px;
			font-size: 0.86rem;
			line-height: 1.45;
		}

		.consent-banner {
			position: fixed;
			left: 50%;
			bottom: max(10px, env(safe-area-inset-bottom));
			z-index: 100;
			width: min(calc(100vw - 20px), 680px);
			transform: translateX(-50%);
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: 14px;
			padding: 12px;
			border: 1px solid #4a6385;
			border-radius: 12px;
			background: rgba(13, 21, 34, 0.98);
			box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
		}

		.consent-banner[hidden] {
			display: none;
		}

		.consent-banner strong {
			color: #e6f0ff;
		}

		.consent-banner p {
			margin: 4px 0 0;
			color: #afc1db;
			font-size: 0.78rem;
			line-height: 1.35;
		}

		.consent-actions {
			display: flex;
			align-items: center;
			gap: 7px;
		}

		.consent-actions .primary-action,
		.consent-actions .text-btn {
			min-height: 42px;
			padding: 8px 12px;
		}

		.ad-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 55;
			min-height: 52px;
			max-height: 90px;
			padding: 13px max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
			border-top: 1px solid #26374e;
			background: rgba(8, 12, 18, 0.97);
			overflow: hidden;
			text-align: center;
		}

		.ad-footer[hidden] {
			display: none;
		}

		.ad-label {
			position: absolute;
			top: 1px;
			left: 50%;
			transform: translateX(-50%);
			color: #7587a1;
			font-size: 0.58rem;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

		body.ads-enabled #app {
			padding-bottom: 90px;
		}

		.privacy-settings {
			position: fixed;
			left: max(6px, env(safe-area-inset-left));
			bottom: max(4px, env(safe-area-inset-bottom));
			z-index: 56;
			border: 0;
			background: rgba(9, 14, 22, 0.82);
			color: #8194af;
			padding: 3px 6px;
			font-size: 0.62rem;
			cursor: pointer;
		}

		body.ads-enabled .privacy-settings {
			bottom: max(92px, calc(86px + env(safe-area-inset-bottom)));
		}

		.config-top-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-bottom: 10px;
		}

		.config-title {
			margin: 0;
		}

		.lang-selector {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: 6px;
		}

		.lang-btn {
			border: 1px solid #365173;
			background: #132239;
			color: #d8eaff;
			border-radius: 8px;
			padding: 4px 7px;
			font-size: 1rem;
			font-weight: 700;
			cursor: pointer;
			line-height: 1;
		}

		.lang-btn.on {
			background: #285684;
			border-color: #8fcaff;
			color: #f2f8ff;
		}

		@media (max-width: 768px) {
			.consent-banner {
				grid-template-columns: 1fr;
				gap: 9px;
			}

			.consent-actions {
				justify-content: flex-end;
			}

			.stage#stage-game {
				padding: 6px 5px 16px;
			}

			.game-wrap {
				width: 100%;
				gap: 6px;
				padding-top: 58px;
			}

			.game-topbar {
				position: fixed;
				left: max(5px, env(safe-area-inset-left));
				right: max(5px, env(safe-area-inset-right));
				top: max(6px, env(safe-area-inset-top));
				z-index: 70;
				gap: 5px;
			}

			.game-view-switcher {
				width: auto;
				flex: 1 1 auto;
				min-width: 0;
			}

			.view-tab {
				gap: 3px;
				padding: 3px 5px;
			}

			.view-tab small {
				font-size: 0.69rem;
			}

			.game-menu {
				top: 48px;
			}

			.drawer-backdrop {
				display: block;
				position: fixed;
				inset: 0;
				z-index: 79;
				border: 0;
				background: rgba(0, 0, 0, 0.62);
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.2s ease;
			}

			.drawer-backdrop.open {
				opacity: 1;
				pointer-events: auto;
			}

			.game-info-drawer {
				display: grid;
				grid-template-rows: auto auto 1fr;
				align-content: start;
				gap: 12px;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 80;
				width: min(88vw, 360px);
				padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) 12px;
				background: #0d1522;
				border-left: 1px solid #344966;
				box-shadow: -14px 0 36px rgba(0, 0, 0, 0.46);
				transform: translateX(105%);
				visibility: hidden;
				transition: transform 0.22s ease, visibility 0.22s;
				overflow-y: auto;
			}

			.game-info-drawer.open {
				transform: translateX(0);
				visibility: visible;
			}

			.drawer-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
			}

			.drawer-head h2 {
				margin: 0;
				font-size: 1.05rem;
				color: #dceaff;
			}

			.drawer-close {
				width: 44px;
				height: 44px;
				border: 1px solid #405674;
				border-radius: 10px;
				background: #162338;
				color: #fff;
				font-size: 1.6rem;
				cursor: pointer;
			}

			.game-info-drawer .totals {
				position: static;
				padding: 8px;
			}

			.game-info-drawer .totals-toggle {
				pointer-events: none;
			}

			.game-info-drawer .totals-chevron {
				display: none;
			}

			.totals-grid {
				grid-template-columns: 1fr;
				gap: 8px;
			}

			.game-view-ranking .totals {
				min-height: calc(100dvh - 70px);
				padding: 12px;
			}

			.game-view-ranking .totals h2 {
				font-size: 1.15rem;
				margin-bottom: 12px;
			}

			.game-view-ranking .total-card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				padding: 13px 14px;
			}

			.game-view-ranking .total-name {
				font-size: 0.95rem;
			}

			.game-view-ranking .total-score {
				margin: 0;
				font-size: 1.35rem;
			}

			.drawer-turn-order {
				display: grid;
				grid-template-columns: 1fr;
				gap: 6px;
				margin: 0;
				overflow: visible;
			}

			.drawer-turn-order .turn-person {
				display: block;
				padding: 9px 10px;
				border-radius: 8px;
			}

			.drawer-turn-order .turn-arrow {
				display: none;
			}

			.entry,
			.history {
				padding: 7px;
				border-radius: 10px;
			}

			.phase-heading {
				align-items: center;
				margin-bottom: 6px;
			}

			.phase-heading h2 {
				font-size: 1.05rem;
			}

			.round-meta {
				gap: 4px;
				margin-bottom: 6px;
				flex-wrap: nowrap;
				overflow-x: auto;
			}

			.badge {
				padding: 4px 7px;
				font-size: 0.72rem;
				white-space: nowrap;
			}

			.round-jump {
				flex-wrap: nowrap;
				overflow-x: auto;
				padding-bottom: 4px;
			}

			.player-row {
				display: grid;
				grid-template-columns: minmax(0, 25%) minmax(0, 1fr) auto;
				align-items: center;
				column-gap: 5px;
				row-gap: 4px;
				padding: 6px;
				margin-bottom: 5px;
				border-radius: 8px;
			}

			.player-head {
				display: contents;
			}

			.player-head-left {
				grid-column: 1;
				grid-row: 1;
				min-width: 0;
			}

			.player-head-right {
				grid-column: 3;
				grid-row: 1;
				min-width: max-content;
				gap: 4px;
			}

			.player-name {
				width: 100%;
				max-width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 0.9rem;
			}

			.player-total {
				padding: 2px 6px;
				min-width: max-content;
			}

			.num-group {
				grid-column: 2;
				grid-row: 1;
				display: flex;
				flex-wrap: nowrap;
				gap: 4px;
				min-width: 0;
				overflow-x: auto;
				padding: 2px;
				scrollbar-width: thin;
				overscroll-behavior-inline: contain;
			}

			.num-btn {
				flex: 0 0 40px;
				width: 40px;
				min-width: 40px;
				min-height: 42px;
				padding: 6px 4px;
				font-size: 0.92rem;
			}

			.player-row > .pocha-actions,
			.player-row > .player-warning {
				grid-column: 1 / -1;
				grid-row: 2;
			}

			.hit-progress {
				grid-template-columns: 1fr auto;
			}

			.hit-progress progress {
				grid-column: 1 / -1;
				grid-row: 2;
			}

			.phase-actions {
				flex-wrap: wrap;
				padding-top: 7px;
			}

			.phase-actions .primary-action {
				flex: 1 1 190px;
			}

			.entry > .msg,
			.entry > .small {
				font-size: 0.74rem;
			}
		}

		@media (max-width: 360px) {
			.num-group {
				display: flex;
			}

			.num-btn {
				min-width: 38px;
				width: 38px;
				flex-basis: 38px;
			}

		}

		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				scroll-behavior: auto !important;
				animation-duration: 0.01ms !important;
				animation-iteration-count: 1 !important;
				transition-duration: 0.01ms !important;
			}
		}