/* Pikachu by August – every selector is scoped under .pkc-app so the theme is never affected. */
.pkc-app {
	--pkc-tw: 40px;
	--pkc-th: 50px;
	--pkc-yellow: #ffd23f;
	--pkc-yellow-d: #f4a100;
	--pkc-red: #e63946;
	--pkc-blue: #1d4ed8;
	--pkc-ink: #1f2240;
	--pkc-card: #ffffff;
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--pkc-ink);
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
}
.pkc-app *, .pkc-app *::before, .pkc-app *::after { box-sizing: border-box; }
.pkc-app .pkc-loading { padding: 40px; text-align: center; }

.pkc-app .pkc-shell {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 12px;
	background: radial-gradient(circle at 15% 10%, #fff7c2 0, transparent 40%),
		radial-gradient(circle at 90% 90%, #c7e3ff 0, transparent 45%),
		linear-gradient(135deg, #8fd3ff 0%, #6aa8ff 45%, #7b6cff 100%);
	box-shadow: 0 12px 30px rgba(31, 34, 64, .25);
	user-select: none;
}

/* ---------- Top bar ---------- */
.pkc-app .pkc-top { margin-bottom: 10px; }
.pkc-app .pkc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.pkc-app .pkc-user { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.pkc-app .pkc-avatar {
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 34px; border-radius: 0;
	background: none; border: 0; font-size: 16px; color: #fff; text-shadow: none;
}
/* Ảnh avatar-hex.png 206×208: lục giác tối chiếm ~110×126 ở giữa, còn lại là quầng sáng → phóng 187%×165% để lục giác khớp ô. */
.pkc-app .pkc-avatar::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; top: 50%; width: 187%; height: 165%; transform: translate(-50%, -50%);
	background: url("../img/avatar-hex.png") center / 100% 100% no-repeat;
}
.pkc-app .pkc-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkc-app .pkc-link {
	appearance: none; border: 0; background: rgba(255, 255, 255, .25); color: #fff;
	font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.pkc-app .pkc-link:hover { background: rgba(255, 255, 255, .4); }
.pkc-app .pkc-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pkc-app .pkc-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .92); color: var(--pkc-ink);
	font-size: 14px; font-weight: 600; box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
	border: 0; font-family: inherit; line-height: 1.4;
}
.pkc-app .pkc-chip small { font-weight: 500; opacity: .75; font-size: 12px; }
.pkc-app .pkc-chip-gold b { color: #b7791f; }
.pkc-app .pkc-chip-btn { cursor: pointer; font-size: 16px; }
.pkc-app .pkc-chip-btn:hover { transform: translateY(-1px); }
.pkc-app .pkc-rank-btn {
	position: relative; overflow: hidden;
	padding: 5px 14px 5px 10px; gap: 6px;
	background: linear-gradient(180deg, #ffe066 0%, #f4a100 100%); color: #3b2500;
	font-size: 14px; font-weight: 800; letter-spacing: .2px;
	box-shadow: 0 3px 0 #b45309, 0 4px 10px rgba(180, 83, 9, .35);
}
.pkc-app .pkc-rank-btn:hover { filter: brightness(1.06); }
.pkc-app .pkc-rank-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b45309; }
.pkc-app .pkc-rank-ico { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.pkc-app .pkc-rank-btn::after {
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
	transform: skewX(-20deg); animation: pkc-shine 3.5s ease-in-out infinite; pointer-events: none;
}
@keyframes pkc-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .pkc-app .pkc-rank-btn::after { animation: none; display: none; } }
.pkc-app .pkc-chip-lucky[data-state="open"] { box-shadow: 0 0 0 2px var(--pkc-yellow-d); animation: pkc-lucky-pulse 1.6s ease-in-out infinite; }
.pkc-app .pkc-chip-lucky[data-state="hit"] { background: #e6ffed; color: #1e7b34; }
.pkc-app .pkc-chip-lucky[data-state="over"] { opacity: .6; }
@keyframes pkc-lucky-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .pkc-app .pkc-chip-lucky[data-state="open"] { animation: none; } }

.pkc-app .pkc-timer {
	position: relative; height: 16px; margin-top: 10px; border-radius: 999px;
	background: rgba(255, 255, 255, .45); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.pkc-app .pkc-timer-bar {
	height: 100%; width: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #34d399, #a3e635);
	transition: width .2s linear;
}
.pkc-app .pkc-timer-bar.pkc-warn { background: linear-gradient(90deg, #f43f5e, #fb923c); animation: pkc-pulse .8s infinite; }
.pkc-app .pkc-timer-text {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- Board ---------- */
.pkc-app .pkc-stage { display: flex; justify-content: center; align-items: center; min-height: 200px; }
.pkc-app .pkc-board {
	position: relative;
	border-radius: 14px;
	background: rgba(255, 255, 255, .18);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.pkc-app .pkc-board.pkc-shuffling .pkc-tile { animation: pkc-spin .45s ease; }
.pkc-app .pkc-board.pkc-noanim .pkc-tile { transition: none; }
.pkc-app .pkc-path { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; overflow: visible; }
.pkc-app .pkc-path polyline {
	fill: none; stroke: #ff2d55; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
}

.pkc-app .pkc-tile {
	position: absolute;
	width: var(--pkc-tw); height: var(--pkc-th);
	padding: 1px;
	cursor: pointer;
	transition: left .22s ease, top .22s ease, transform .15s ease, opacity .25s ease;
	z-index: 2;
}
.pkc-app .pkc-sprite {
	display: block; width: 100%; height: 100%;
	border-radius: 4px;
	background-color: #f6c9a4;
	background-image: var(--pkc-sprite);
	background-size: 3600% 100%;
	background-repeat: no-repeat;
	box-shadow: 0 2px 0 #b9805a, 0 3px 5px rgba(0, 0, 0, .2);
	transition: filter .12s ease;
}
.pkc-app .pkc-tile:hover .pkc-sprite { filter: brightness(1.08); }
.pkc-app .pkc-tile.pkc-sel { transform: translateY(-3px) scale(1.06); z-index: 3; }
.pkc-app .pkc-tile.pkc-sel .pkc-sprite { filter: brightness(1.12) saturate(1.2); box-shadow: 0 0 0 3px var(--pkc-yellow), 0 6px 10px rgba(0, 0, 0, .25); }
.pkc-app .pkc-tile.pkc-hint .pkc-sprite { animation: pkc-glow .7s ease-in-out infinite alternate; }
.pkc-app .pkc-tile.pkc-gone { opacity: 0; transform: scale(.4) rotate(20deg); pointer-events: none; }
.pkc-app .pkc-tile.pkc-shake { animation: pkc-shake .35s ease; }
.pkc-app .pkc-tile.pkc-shake .pkc-sprite { animation: pkc-wrong 1s ease-out; }

.pkc-app .pkc-float {
	position: absolute; z-index: 8; transform: translate(-50%, -50%);
	font-weight: 900; font-size: 20px; color: #ffd23f;
	text-shadow: 0 2px 0 #b45309, 0 0 8px rgba(0, 0, 0, .4);
	animation: pkc-float 1.1s ease forwards; pointer-events: none;
}

/* ---------- Toolbar ---------- */
.pkc-app .pkc-toolbar { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pkc-app .pkc-tool {
	appearance: none; position: relative;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px; border: 0; border-radius: 14px;
	background: linear-gradient(180deg, #fff 0%, #ffeaa0 100%);
	color: var(--pkc-ink); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
	box-shadow: 0 4px 0 var(--pkc-yellow-d), 0 6px 10px rgba(0, 0, 0, .15);
	cursor: pointer; transition: transform .1s ease, box-shadow .1s ease;
}
.pkc-app .pkc-tool:hover { transform: translateY(-1px); }
.pkc-app .pkc-tool:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pkc-yellow-d); }
.pkc-app .pkc-ico { font-size: 18px; }
.pkc-app .pkc-badge {
	position: absolute; top: -8px; right: -6px;
	min-width: 22px; padding: 1px 6px; border-radius: 999px;
	background: var(--pkc-red); color: #fff; font-size: 11px; font-weight: 800; text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* ---------- Toast ---------- */
.pkc-app .pkc-toast {
	position: absolute; left: 50%; top: 14px; z-index: 30;
	transform: translate(-50%, -30px); opacity: 0;
	max-width: 90%; padding: 9px 18px; border-radius: 999px;
	background: rgba(31, 34, 64, .92); color: #fff; font-size: 14px; font-weight: 600; text-align: center;
	transition: transform .25s ease, opacity .25s ease; pointer-events: none;
}
.pkc-app .pkc-toast.pkc-show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Modal ---------- */
.pkc-app .pkc-modal {
	position: absolute; inset: 0; z-index: 40;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(20, 24, 54, .55); backdrop-filter: blur(2px);
}
.pkc-app .pkc-modal[hidden] { display: none; }
.pkc-app .pkc-modal-card {
	width: 100%; max-width: 460px; max-height: 100%; overflow: auto;
	padding: 22px 22px 18px; border-radius: 20px;
	background: var(--pkc-card); box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
	border-top: 8px solid var(--pkc-yellow);
	animation: pkc-pop .25s ease;
}
.pkc-app .pkc-modal-card.pkc-lose { border-top-color: var(--pkc-red); }
.pkc-app .pkc-modal-card.pkc-win { border-top-color: #22c55e; text-align: center; }
.pkc-app .pkc-modal-card.pkc-rank { max-width: 520px; }
.pkc-app .pkc-modal-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--pkc-ink); line-height: 1.25; }
.pkc-app .pkc-modal-body { font-size: 15px; color: var(--pkc-ink); }
.pkc-app .pkc-modal-body p { margin: 0 0 10px; }
.pkc-app .pkc-modal-body p, .pkc-app .pkc-modal-body li, .pkc-app .pkc-modal-body td, .pkc-app .pkc-modal-body label { color: var(--pkc-ink); }
.pkc-app .pkc-modal-body p.pkc-muted, .pkc-app .pkc-modal-body p.pkc-ad-note { color: #6b7280; }
.pkc-app .pkc-modal-body p.pkc-big { color: #b7791f; }
.pkc-app .pkc-modal-body p.pkc-form-err { color: var(--pkc-red); }
.pkc-app .pkc-rich ul { margin: 0 0 10px 18px; padding: 0; }
.pkc-app .pkc-rich li { margin: 0 0 8px; }
.pkc-app .pkc-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.pkc-app .pkc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.pkc-app .pkc-win .pkc-modal-actions { justify-content: center; }
.pkc-app .pkc-big { font-size: 34px; font-weight: 900; color: #b7791f; }
.pkc-app .pkc-muted { font-size: 12px; color: #6b7280; margin-top: 10px; }

.pkc-app .pkc-btn {
	appearance: none; border: 0; border-radius: 12px;
	padding: 10px 18px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2;
	cursor: pointer; transition: transform .1s ease, filter .1s ease;
}
.pkc-app .pkc-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pkc-app .pkc-btn:disabled { opacity: .6; cursor: default; transform: none; }
.pkc-app .pkc-btn-primary { background: linear-gradient(180deg, var(--pkc-yellow) 0%, var(--pkc-yellow-d) 100%); color: #3b2500; box-shadow: 0 3px 0 #b45309; }
.pkc-app .pkc-btn-ghost { background: #eef1f7; color: var(--pkc-ink); }
.pkc-app .pkc-btn-block { display: block; width: 100%; margin-top: 6px; }

/* ---------- Forms ---------- */
.pkc-app .pkc-form label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.pkc-app .pkc-form input {
	display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
	border: 2px solid #dfe3ee; border-radius: 10px; background: #fff; color: var(--pkc-ink);
	font-family: inherit; font-size: 16px; line-height: 1.3; box-shadow: none;
}
.pkc-app .pkc-form input:focus { outline: none; border-color: var(--pkc-yellow-d); }
.pkc-app .pkc-form-err { color: var(--pkc-red); font-size: 14px; font-weight: 600; }
.pkc-app .pkc-modal-body p.pkc-form-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #9a3412; font-size: 13px; font-weight: 600; line-height: 1.45; }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-form-notice { background: rgba(251, 146, 60, .15); color: #fdba74; }
.pkc-app .pkc-pw-rule { margin: -6px 0 10px; }
.pkc-app .pkc-pw-wrap { position: relative; display: block; margin-top: 4px; }
.pkc-app .pkc-form .pkc-pw-wrap input { margin-top: 0; padding-right: 48px; }
.pkc-app .pkc-pw-eye {
	position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
	width: 40px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 8px;
	background: transparent; box-shadow: none; cursor: pointer;
	font-size: 18px; line-height: 1; color: var(--pkc-ink);
}
.pkc-app .pkc-pw-eye:hover, .pkc-app .pkc-pw-eye:focus-visible { background: rgba(0, 0, 0, .06); outline: none; }
.pkc-app.pkc-dark .pkc-pw-eye:hover, .pkc-app.pkc-dark .pkc-pw-eye:focus-visible { background: rgba(255, 255, 255, .1); }
.pkc-app .pkc-select {
	width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 2px solid #dfe3ee; border-radius: 10px;
	font-family: inherit; font-size: 14px; background: #fff; color: var(--pkc-ink);
}

/* ---------- Shop / ad / rank ---------- */
.pkc-app .pkc-shop-wallet { text-align: center; font-size: 16px; }
.pkc-app .pkc-shop-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #f7f8fc;
}
.pkc-app .pkc-shop-item > div { flex: 1; }
.pkc-app .pkc-shop-item small { display: block; color: #6b7280; font-size: 12px; }
.pkc-app .pkc-shop-ico { font-size: 26px; }
.pkc-app .pkc-ad-screen {
	position: relative; overflow: hidden; height: 190px; border-radius: 14px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: #111827; color: #fff; text-align: center;
}
.pkc-app .pkc-ad-screen p { margin: 4px 0; position: relative; z-index: 1; }
.pkc-app .pkc-ad-glow {
	position: absolute; inset: -50%;
	background: conic-gradient(from 0deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6, #10b981, #f59e0b);
	opacity: .35; animation: pkc-rotate 4s linear infinite;
}
.pkc-app .pkc-ad-brand { font-size: 22px; font-weight: 900; color: var(--pkc-yellow); }
.pkc-app .pkc-ad-count { font-size: 34px; font-weight: 900; }
.pkc-app .pkc-ad-note { font-size: 12px; color: #6b7280; margin-top: 8px; }
.pkc-app .pkc-ad.pkc-modal-card { width: min(640px, 94vw); max-width: 640px; }
.pkc-app .pkc-ad-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.pkc-app .pkc-ad-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pkc-app .pkc-ad-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pkc-app .pkc-ad-bar .pkc-ad-count { font-size: 22px; margin: 0; color: var(--pkc-ink); }
.pkc-app .pkc-ad-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pkc-app .pkc-ad-hint { font-size: 13px; font-weight: 700; color: #dc2626; animation: pkc-pulse 1s infinite; }
.pkc-app .pkc-ad-hint[hidden] { display: none; }
.pkc-app .pkc-ad-links .pkc-btn { text-decoration: none; padding: 8px 12px; font-size: 13px; }
.pkc-app .pkc-ad-sub { background: #ff0033; color: #fff; border-color: transparent; box-shadow: 0 3px 0 #b00024; }
.pkc-app .pkc-ad-sub:hover { background: #e6002e; color: #fff; }
.pkc-app .pkc-ad-links .pkc-ad-unmute { animation: pkc-pulse 1.2s infinite; }
.pkc-app .pkc-ad-links .pkc-ad-unmute[hidden] { display: none; }
.pkc-app.pkc-frozen .pkc-timer-bar { background: linear-gradient(90deg, #60a5fa, #818cf8); animation: none; }
.pkc-app.pkc-frozen .pkc-timer-text::before { content: '⏸ '; }
.pkc-app .pkc-ad.pkc-modal-card { overflow-x: hidden; }
/* Điện thoại ngang (kể cả xoay bằng CSS): video bên trái, nút bên phải, vừa khít màn hình, không thanh cuộn. */
.pkc-app.pkc-compact .pkc-ad.pkc-modal-card {
	width: auto; max-width: none; max-height: 100%; overflow: hidden;
	display: grid; grid-template-columns: auto 190px; column-gap: 14px;
	grid-template-areas: "v t" "v b" "v n" "v a"; grid-template-rows: auto auto 1fr auto;
	touch-action: none; overscroll-behavior: contain;
}
.pkc-app.pkc-compact .pkc-ad .pkc-modal-body { display: contents; }
.pkc-app.pkc-compact .pkc-ad .pkc-modal-title { grid-area: t; font-size: 16px; margin: 0 0 6px; }
.pkc-app.pkc-compact .pkc-ad-video, .pkc-app.pkc-compact .pkc-ad .pkc-ad-screen {
	grid-area: v; align-self: center; margin: 0; height: auto; aspect-ratio: 16 / 9;
	width: min(calc(var(--pkc-vw, 100vw) - 260px), calc((var(--pkc-vh, 100vh) - 46px) * 16 / 9));
}
.pkc-app.pkc-compact .pkc-ad .pkc-ad-screen { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 8px; }
.pkc-app.pkc-compact .pkc-ad-bar { grid-area: b; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.pkc-app.pkc-compact .pkc-ad-links { flex-direction: column; gap: 6px; }
.pkc-app.pkc-compact .pkc-ad-links .pkc-btn { text-align: center; padding: 7px 10px; }
.pkc-app.pkc-compact .pkc-ad .pkc-ad-note { grid-area: n; margin: 6px 0 0; font-size: 11px; }
.pkc-app.pkc-compact .pkc-ad .pkc-modal-actions { grid-area: a; margin-top: 6px; }
.pkc-app.pkc-compact .pkc-ad .pkc-modal-actions .pkc-btn { width: 100%; padding: 8px 10px; font-size: 13px; }
.pkc-app .pkc-rank-me { font-weight: 600; }
.pkc-app .pkc-rank-wrap { max-height: 50vh; overflow: auto; border-radius: 12px; border: 1px solid #eef0f6; }
.pkc-app .pkc-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.pkc-app .pkc-table th, .pkc-app .pkc-table td { padding: 8px 10px; text-align: left; border: 0; border-bottom: 1px solid #eef0f6; }
.pkc-app .pkc-table th { position: sticky; top: 0; background: #fff8d6; font-weight: 700; }
.pkc-app .pkc-table tr:nth-child(-n+3) td { font-weight: 700; }
.pkc-app .pkc-table td:not(.pkc-td-name), .pkc-app .pkc-table th { white-space: nowrap; }
.pkc-app .pkc-td-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkc-app .pkc-tabs { display: flex; gap: 6px; margin: 0 0 10px; padding: 4px; border-radius: 12px; background: #f1f3f9; }
.pkc-app .pkc-tab {
	appearance: none; flex: 1 1 0; min-width: 0;
	padding: 8px 6px; border: 0; border-radius: 9px; background: transparent;
	color: #4b5563; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pkc-app .pkc-tab:hover { color: var(--pkc-ink); }
.pkc-app .pkc-tab.pkc-tab-on { background: #fff; color: var(--pkc-ink); box-shadow: 0 2px 6px rgba(31, 34, 64, .12); }

/* ---------- BXH: tìm kiếm + chu kỳ ---------- */
.pkc-app .pkc-rank-search { display: flex; gap: 8px; margin: 0 0 10px; }
.pkc-app .pkc-rank-search input {
	flex: 1 1 auto; min-width: 0; margin: 0;
	padding: 10px 14px; border: 2px solid #dfe3ee; border-radius: 12px;
	background: #fff; color: var(--pkc-ink); font-family: inherit; font-size: 15px; line-height: 1.3; box-shadow: none;
}
.pkc-app .pkc-rank-search input:focus { outline: none; border-color: var(--pkc-yellow-d); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35); }
.pkc-app .pkc-rank-search .pkc-btn { flex: 0 0 auto; padding: 10px 18px; }
.pkc-app .pkc-scopes { display: flex; gap: 8px; margin: 0 0 10px; }
.pkc-app .pkc-scope {
	appearance: none; flex: 1 1 0; min-width: 0;
	padding: 8px 6px; border: 2px solid #dfe3ee; border-radius: 12px; background: #fff;
	color: var(--pkc-ink); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.pkc-app .pkc-scope:hover { border-color: var(--pkc-yellow-d); }
.pkc-app .pkc-scope.pkc-scope-on {
	border-color: transparent; color: #3b2500;
	background: linear-gradient(180deg, var(--pkc-yellow) 0%, var(--pkc-yellow-d) 100%);
	box-shadow: 0 3px 0 #b45309;
}
.pkc-app .pkc-rank-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.pkc-app .pkc-rank-clear {
	appearance: none; border: 0; padding: 3px 10px; border-radius: 999px; background: #eef1f7; color: var(--pkc-ink);
	font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.pkc-app .pkc-table tr.pkc-row-me td { background: #fff4c2; }
.pkc-app .pkc-table tr.pkc-row-me small { color: #b45309; font-weight: 700; }
.pkc-app .pkc-table td.pkc-td-empty { text-align: center; color: #6b7280; padding: 18px 10px; white-space: normal; }
.pkc-app .pkc-theme-btn { min-width: 36px; justify-content: center; font-size: 17px; padding: 5px 10px; }

/* ---------- Chế độ tối ---------- */
.pkc-app.pkc-dark { --pkc-ink: #e6eaf3; --pkc-card: #182131; color: var(--pkc-ink); }
.pkc-app.pkc-dark .pkc-shell {
	background: radial-gradient(circle at 15% 10%, rgba(255, 210, 63, .12) 0, transparent 40%),
		radial-gradient(circle at 90% 90%, rgba(99, 102, 241, .25) 0, transparent 45%),
		linear-gradient(135deg, #0f172a 0%, #172036 50%, #231d4d 100%);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.pkc-app.pkc-dark .pkc-chip { background: rgba(30, 41, 59, .92); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pkc-app.pkc-dark .pkc-chip-gold b { color: #fbbf24; }
.pkc-app.pkc-dark .pkc-chip-lucky[data-state="hit"] { background: rgba(34, 197, 94, .2); color: #86efac; }
.pkc-app.pkc-dark .pkc-chip.pkc-rank-btn {
	background: linear-gradient(180deg, #ffe066 0%, #f4a100 100%); color: #3b2500;
	box-shadow: 0 3px 0 #b45309, 0 0 12px rgba(251, 191, 36, .45);
}
.pkc-app.pkc-dark .pkc-chip.pkc-rank-btn .pkc-rank-lbl { color: #3b2500; }
.pkc-app.pkc-dark .pkc-timer { background: rgba(255, 255, 255, .1); }
.pkc-app.pkc-dark .pkc-board { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.pkc-app.pkc-dark .pkc-tool {
	background: linear-gradient(180deg, #2b3850 0%, #1f2a3e 100%); color: var(--pkc-ink);
	box-shadow: 0 4px 0 #0b1220, 0 6px 10px rgba(0, 0, 0, .35);
}
.pkc-app.pkc-dark .pkc-tool:active { box-shadow: 0 1px 0 #0b1220; }
.pkc-app.pkc-dark .pkc-modal { background: rgba(2, 6, 23, .7); }
.pkc-app.pkc-dark .pkc-modal-card { box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-muted, .pkc-app.pkc-dark .pkc-modal-body p.pkc-ad-note, .pkc-app.pkc-dark .pkc-muted { color: #94a3b8; }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-big, .pkc-app.pkc-dark .pkc-big { color: #fbbf24; }
.pkc-app.pkc-dark .pkc-btn-ghost, .pkc-app.pkc-dark .pkc-rank-clear { background: #26324a; color: var(--pkc-ink); }
.pkc-app.pkc-dark .pkc-form input, .pkc-app.pkc-dark .pkc-select, .pkc-app.pkc-dark .pkc-rank-search input, .pkc-app.pkc-dark .pkc-scope {
	background: #0f1726; border-color: #2c3a52; color: var(--pkc-ink);
}
.pkc-app.pkc-dark .pkc-rank-search input::placeholder { color: #7b8aa3; }
.pkc-app.pkc-dark .pkc-scope.pkc-scope-on { background: linear-gradient(180deg, var(--pkc-yellow) 0%, var(--pkc-yellow-d) 100%); color: #3b2500; border-color: transparent; }
.pkc-app.pkc-dark .pkc-tabs { background: #0f1726; }
.pkc-app.pkc-dark .pkc-tab { color: #94a3b8; }
.pkc-app.pkc-dark .pkc-tab.pkc-tab-on { background: #26324a; color: var(--pkc-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.pkc-app.pkc-dark .pkc-rank-wrap { border-color: #2c3a52; }
.pkc-app.pkc-dark .pkc-table th { background: #222c40; color: #fcd34d; }
.pkc-app.pkc-dark .pkc-table th, .pkc-app.pkc-dark .pkc-table td { border-bottom-color: #26324a; }
.pkc-app.pkc-dark .pkc-table tr.pkc-row-me td { background: rgba(255, 210, 63, .14); }
.pkc-app.pkc-dark .pkc-table tr.pkc-row-me small { color: #fcd34d; }
.pkc-app.pkc-dark .pkc-shop-item { background: #1f2a3e; }
.pkc-app.pkc-dark .pkc-shop-item small { color: #94a3b8; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
	.pkc-app .pkc-shell { padding: 8px; border-radius: 12px; }
	.pkc-app .pkc-row { justify-content: center; }
	.pkc-app .pkc-stats { justify-content: center; gap: 4px; }
	.pkc-app .pkc-lbl { display: none; }
	.pkc-app .pkc-tool { padding: 10px 14px; }
	.pkc-app .pkc-ico { font-size: 20px; }
	.pkc-app .pkc-chip { font-size: 12px; padding: 4px 9px; gap: 4px; }
	.pkc-app .pkc-name { max-width: 110px; }
	.pkc-app .pkc-tile { padding: 0.5px; }
	.pkc-app .pkc-sprite { border-radius: 3px; box-shadow: 0 1px 0 #b9805a; }
	.pkc-app .pkc-modal { padding: 8px; }
	.pkc-app .pkc-modal-card { padding: 16px 14px 14px; border-radius: 16px; }
	.pkc-app .pkc-modal-title { font-size: 19px; }
	.pkc-app .pkc-modal-body { font-size: 14px; }
	.pkc-app .pkc-modal-actions .pkc-btn { flex: 1 1 auto; }
	.pkc-app .pkc-big { font-size: 28px; }
	.pkc-app .pkc-tab { font-size: 12px; padding: 7px 4px; }
	.pkc-app .pkc-table { font-size: 13px; }
	.pkc-app .pkc-table th, .pkc-app .pkc-table td { padding: 6px 7px; }
	.pkc-app .pkc-td-name { max-width: 120px; }
	.pkc-app .pkc-rank-wrap { max-height: 45vh; }
}
@media (max-width: 360px) {
	.pkc-app .pkc-chip small { display: none; }
	.pkc-app .pkc-tool { padding: 9px 11px; }
	.pkc-app .pkc-td-name { max-width: 90px; }
}

/* ---------- Điện thoại dọc: chơi bàn dọc; nút "Ngang" để tuỳ chọn xoay ---------- */
.pkc-app .pkc-rot-btn { display: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pkc-app.pkc-portrait .pkc-rot-btn, .pkc-app.pkc-landed .pkc-rot-btn { display: inline-flex; }
.pkc-app.pkc-portrait .pkc-rot-btn { background: linear-gradient(180deg, #a5f3fc 0%, #38bdf8 100%); color: #0c4a6e; }

/* Màn dọc: ô rộng hơn hình gốc → mặt quân phủ đầy ô, hình con vật nằm giữa (không kéo méo). */
.pkc-app.pkc-wide .pkc-tile::before {
	content: ""; position: absolute; inset: 1px; border-radius: 4px;
	background: #f6c9a4; box-shadow: 0 2px 0 #b9805a, 0 3px 5px rgba(0, 0, 0, .2);
	transition: box-shadow .12s ease, filter .12s ease;
}
.pkc-app.pkc-wide .pkc-sprite {
	position: relative; width: var(--pkc-sw); margin: 0 auto;
	background-color: transparent; box-shadow: none; border-radius: 0;
	/* Phóng khung hơi lớn hơn vùng hiển thị rồi căn giữa → viền khung của từng con bị cắt đi. */
	background-size: calc(var(--pkc-fw) * 36) var(--pkc-fh);
	background-position: calc(var(--pkc-ox) - var(--t, 0) * var(--pkc-fw)) var(--pkc-oy) !important;
}
.pkc-app.pkc-wide .pkc-tile.pkc-sel::before { box-shadow: 0 0 0 3px var(--pkc-yellow), 0 6px 10px rgba(0, 0, 0, .25); filter: brightness(1.08); }
.pkc-app.pkc-wide .pkc-tile.pkc-sel .pkc-sprite { box-shadow: none; }
.pkc-app.pkc-wide .pkc-tile.pkc-hint::before { animation: pkc-glow .7s ease-in-out infinite alternate; }
.pkc-app.pkc-wide .pkc-tile.pkc-hint .pkc-sprite { animation: none; }
.pkc-app.pkc-wide .pkc-tile.pkc-shake::before { animation: pkc-wrong 1s ease-out; }

/* Màn dọc: thanh trạng thái gọn (≈3 hàng mỏng) để bàn chơi cao nhất có thể. */
.pkc-app.pkc-tall .pkc-shell { padding: 6px; border-radius: 12px; }
.pkc-app.pkc-tall .pkc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-bottom: 6px; }
.pkc-app.pkc-tall .pkc-row, .pkc-app.pkc-tall .pkc-stats { display: contents; }
.pkc-app.pkc-tall .pkc-user { gap: 4px; font-size: 13px; }
.pkc-app.pkc-tall .pkc-avatar { width: 22px; height: 25px; font-size: 11px; }
.pkc-app.pkc-tall .pkc-name { max-width: 90px; }
.pkc-app.pkc-tall .pkc-link { font-size: 10px; padding: 2px 7px; white-space: nowrap; }
.pkc-app.pkc-tall .pkc-chip { font-size: 11.5px; padding: 3px 7px; gap: 3px; white-space: nowrap; }
.pkc-app.pkc-tall .pkc-chip small { font-size: 10.5px; display: inline; }
.pkc-app.pkc-tall .pkc-timer { order: 5; flex: 1 1 120px; height: 14px; margin: 0; }
.pkc-app.pkc-tall .pkc-rank-btn, .pkc-app.pkc-tall .pkc-theme-btn, .pkc-app.pkc-tall .pkc-fs-btn, .pkc-app.pkc-tall .pkc-rot-btn { order: 6; }
.pkc-app.pkc-tall .pkc-rank-btn { padding: 3px 9px; }
.pkc-app.pkc-tall .pkc-rank-lbl { display: none; }
.pkc-app.pkc-tall .pkc-rank-ico { font-size: 15px; }
.pkc-app.pkc-tall .pkc-theme-btn, .pkc-app.pkc-tall .pkc-fs-btn { min-width: 30px; padding: 3px 7px; font-size: 14px; }
.pkc-app.pkc-tall .pkc-rot-btn { font-size: 11.5px; padding: 3px 9px; }
.pkc-app.pkc-tall .pkc-stage { min-height: 0; }
.pkc-app.pkc-tall .pkc-toolbar { margin-top: 6px; gap: 6px; flex-wrap: nowrap; }
.pkc-app.pkc-tall .pkc-tool { padding: 6px 12px; border-radius: 12px; }
.pkc-app.pkc-tall .pkc-lbl { display: none; }
.pkc-app.pkc-tall .pkc-ico { font-size: 18px; }
.pkc-app.pkc-tall .pkc-tile { padding: 0.5px; }
.pkc-app.pkc-tall .pkc-sprite { border-radius: 3px; }

/* ---------- Điện thoại ngang (JS bật .pkc-compact, kể cả khi game tự xoay bằng CSS) ----------
   3 cột: thanh trạng thái dọc | bàn chơi | nút công cụ → bàn chơi dùng gần hết chiều cao màn hình. */
.pkc-app.pkc-compact .pkc-shell {
	display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; column-gap: 8px; align-items: center;
	padding: 6px 8px; border-radius: 10px;
}
.pkc-app.pkc-compact .pkc-top { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; align-self: center; }
.pkc-app.pkc-compact .pkc-row { display: contents; }
.pkc-app.pkc-compact .pkc-user { order: 0; gap: 5px; min-width: 0; }
.pkc-app.pkc-compact .pkc-avatar { width: 22px; height: 25px; font-size: 11px; flex: 0 0 auto; }
.pkc-app.pkc-compact .pkc-name { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 12px; }
.pkc-app.pkc-compact .pkc-link { flex: 0 0 auto; font-size: 10px; padding: 2px 6px; white-space: nowrap; }
.pkc-app.pkc-compact .pkc-timer { order: 1; margin: 0; height: 16px; flex: 0 0 auto; }
.pkc-app.pkc-compact .pkc-timer-text { font-size: 11px; }
.pkc-app.pkc-compact .pkc-stats { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pkc-app.pkc-compact .pkc-chip {
	grid-column: 1 / -1; justify-content: center; min-width: 0;
	font-size: 12px; padding: 3px 6px; gap: 3px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pkc-app.pkc-compact .pkc-chip small { font-size: 10.5px; display: inline; }
.pkc-app.pkc-compact .pkc-theme-btn, .pkc-app.pkc-compact .pkc-fs-btn { grid-column: auto; min-width: 0; padding: 4px 0; font-size: 15px; }
.pkc-app.pkc-compact .pkc-rank-btn { padding: 4px 6px; font-size: 12px; }
.pkc-app.pkc-compact .pkc-rank-ico { font-size: 15px; }
.pkc-app.pkc-compact .pkc-stage { min-height: 0; }
.pkc-app.pkc-compact .pkc-toolbar { flex-direction: column; flex-wrap: nowrap; justify-content: center; margin: 0; gap: 10px; }
.pkc-app.pkc-compact .pkc-lbl { display: none; }
.pkc-app.pkc-compact .pkc-tool { padding: 7px 10px; border-radius: 12px; }
.pkc-app.pkc-compact .pkc-ico { font-size: 18px; }
.pkc-app.pkc-compact .pkc-tile { padding: 0.5px; }
.pkc-app.pkc-compact .pkc-sprite { border-radius: 3px; box-shadow: 0 1px 0 #b9805a; }
.pkc-app.pkc-compact .pkc-modal-card { max-height: calc(100% - 8px); padding: 14px 16px 12px; }
.pkc-app.pkc-compact .pkc-modal-title { font-size: 18px; margin-bottom: 8px; }
.pkc-app.pkc-compact .pkc-rank-wrap { max-height: calc(var(--pkc-vh, 100vh) * .42); }

/* ---------- Toàn màn hình ---------- */
.pkc-app .pkc-fs-btn { min-width: 36px; justify-content: center; padding: 5px 10px; }
.pkc-app .pkc-fs-btn svg { display: block; }
.pkc-app:fullscreen { max-width: none; width: 100%; height: 100%; overflow: auto; background: #0f172a; }
.pkc-app:-webkit-full-screen { max-width: none; width: 100%; height: 100%; overflow: auto; background: #0f172a; }
.pkc-app.pkc-fs .pkc-shell { min-height: 100%; border-radius: 0; box-shadow: none; }
.pkc-app.pkc-fs .pkc-rank-wrap { max-height: calc(var(--pkc-vh, 100vh) * .5); }
/* Không có Fullscreen API (iPhone, Messenger…): phủ kín trang bằng position fixed. */
.pkc-app.pkc-fs-cover {
	position: fixed; inset: 0; z-index: 2147483000;
	max-width: none; width: auto; height: auto; margin: 0;
	overflow: auto; overscroll-behavior: contain; background: #0f172a;
}
.pkc-app.pkc-fs-cover .pkc-shell { min-height: 100%; }
/* Xoay ngang bằng CSS khi máy khoá hướng dọc: JS đặt width = chiều cao màn hình, height = chiều rộng. */
.pkc-app.pkc-fs-cover.pkc-rot {
	inset: auto; top: 0; left: 0;
	transform-origin: top left; transform: rotate(90deg) translateY(-100%);
	overflow: hidden;
}
.pkc-app.pkc-rot .pkc-shell { height: 100%; }
html.pkc-lock, html.pkc-lock body { overflow: hidden !important; overscroll-behavior: none; }
/* Thanh nổi trên bảng (đăng nhập/thông báo) khi đang toàn màn hình hoặc ngang: luôn có nút về dọc / thoát. */
.pkc-app .pkc-view-bar { display: none; position: absolute; top: 8px; right: 8px; z-index: 50; gap: 6px; }
.pkc-app.pkc-fs.pkc-modal-open .pkc-view-bar, .pkc-app.pkc-landed.pkc-modal-open .pkc-view-bar { display: flex; }
.pkc-app.pkc-fs.pkc-modal-open .pkc-modal, .pkc-app.pkc-landed.pkc-modal-open .pkc-modal { padding-top: 50px; }
.pkc-app .pkc-view-bar .pkc-chip-btn { font-size: 13px; font-weight: 700; padding: 6px 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.pkc-app .pkc-vb-rot { display: none; background: linear-gradient(180deg, #a5f3fc 0%, #38bdf8 100%); color: #0c4a6e; }
.pkc-app.pkc-landed .pkc-vb-rot { display: inline-flex; }
.pkc-app .pkc-vb-exit { display: none; }
.pkc-app.pkc-fs .pkc-vb-exit { display: inline-flex; }

/* ---------- Animations ---------- */
@keyframes pkc-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pkc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pkc-wrong {
	0%, 33%, 66% { box-shadow: 0 0 0 3px var(--pkc-red); filter: sepia(.6) hue-rotate(-40deg) saturate(2.5); }
	16%, 50%, 83% { box-shadow: 0 0 0 1px rgba(255, 59, 48, .3); filter: none; }
	100% { box-shadow: none; filter: none; }
}
@keyframes pkc-glow { from { box-shadow: 0 0 0 2px #22c55e, 0 0 6px #22c55e; } to { box-shadow: 0 0 0 4px #22c55e, 0 0 16px #22c55e; } }
@keyframes pkc-float { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -160%); } }
@keyframes pkc-spin { 0% { transform: scale(1) rotate(0); } 50% { transform: scale(.6) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); } }
@keyframes pkc-pulse { 50% { opacity: .65; } }
@keyframes pkc-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.pkc-app .pkc-tile, .pkc-app .pkc-timer-bar { transition: none; }
	.pkc-app .pkc-ad-glow, .pkc-app .pkc-timer-bar.pkc-warn, .pkc-app .pkc-rotate-phone { animation: none; }
}

/* =========================================================
 * 1.9.0 — Khung viền, danh hiệu, sảnh chờ, điểm danh, thư, kho đồ
 * ======================================================= */


/* ---------- Danh hiệu ---------- */
.pkc-app .pkc-title-tag {
	display: inline-block; max-width: 160px; padding: 1px 8px; border-radius: 999px;
	font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #3b2500; background: linear-gradient(180deg, #fff3b0, #f4a100); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); text-shadow: none;
	vertical-align: middle;
}
.pkc-app .pkc-title-tag[hidden] { display: none; }
.pkc-app .pkc-title-tag[data-tg^="score"] { color: #082f49; background: linear-gradient(180deg, #e0f7ff, #38bdf8); }
.pkc-app .pkc-title-tag[data-tg^="lucky"] { color: #fff; background: linear-gradient(180deg, #c084fc, #7e22ce); }
.pkc-app .pkc-td-name .pkc-title-tag { display: block; width: max-content; max-width: 100%; margin-top: 2px; font-size: 10px; }

/* ---------- Ẩn bàn khi ở sảnh (không nhìn trộm khi tạm dừng) ---------- */
.pkc-app.pkc-in-lobby .pkc-board .pkc-tile, .pkc-app.pkc-in-lobby .pkc-path { visibility: hidden; }

/* ---------- Sảnh chờ ---------- */
.pkc-app .pkc-modal-card.pkc-lobby { max-width: 440px; border-top-color: #7b6cff; }
.pkc-app .pkc-lb-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.pkc-app .pkc-lb-ava { position: relative; isolation: isolate; flex: 0 0 auto; width: 42px; height: 48px; margin: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pkc-app .pkc-lb-ava::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; width: 187%; height: 165%; transform: translate(-50%, -50%); background: url("../img/avatar-hex.png") center / 100% 100% no-repeat; }
.pkc-app .pkc-lb-who { min-width: 0; flex: 1 1 auto; }
.pkc-app .pkc-lb-name { display: block; font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkc-app .pkc-lb-wallet { display: block; font-size: 13px; color: #6b7280; margin-top: 2px; }
.pkc-app .pkc-btn.pkc-lb-play { display: block; width: 100%; padding: 14px 18px; font-size: 19px; font-weight: 900; letter-spacing: .3px; }
.pkc-app .pkc-btn.pkc-lb-play small { display: block; font-size: 12px; font-weight: 700; opacity: .8; margin-top: 2px; }
.pkc-app .pkc-btn.pkc-lb-code { display: block; width: 100%; margin-top: 8px; background: linear-gradient(180deg, #c4b5fd, #7c3aed); color: #fff; box-shadow: 0 3px 0 #5b21b6; }
.pkc-app .pkc-modal-body p.pkc-lb-pause { margin: 8px 0 0; font-size: 12px; color: #2563eb; text-align: center; }
.pkc-app .pkc-modal-body p.pkc-lb-pause.pkc-warn { color: #dc2626; }
.pkc-app .pkc-lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pkc-app .pkc-lb-tile {
	appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 10px 4px; border: 0; border-radius: 14px; background: #f3f4fb; color: var(--pkc-ink);
	font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .1s ease, background .15s ease;
}
.pkc-app .pkc-lb-tile:hover { transform: translateY(-1px); background: #e9ebf8; }
.pkc-app .pkc-lb-tile span:first-child { font-size: 24px; line-height: 1.1; }
.pkc-app .pkc-lb-tile .pkc-badge { top: -6px; right: -4px; }
.pkc-app .pkc-lb-tile .pkc-dot { position: absolute; top: 6px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--pkc-red); box-shadow: 0 0 0 2px #fff; animation: pkc-pulse 1.2s infinite; }
.pkc-app .pkc-lb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12px; color: #6b7280; }
.pkc-app .pkc-lb-foot .pkc-link { background: #eef1f7; color: var(--pkc-ink); text-shadow: none; }
.pkc-app .pkc-back { appearance: none; border: 0; background: none; padding: 0 0 6px; color: #6b7280; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---------- Điểm danh ---------- */
.pkc-app .pkc-ci-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 12px; }
.pkc-app .pkc-ci-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; background: #f3f4fb; font-size: 11px; font-weight: 700; color: #6b7280; }
.pkc-app .pkc-ci-day b { font-size: 15px; color: #b7791f; }
.pkc-app .pkc-ci-day.pkc-ci-past { background: #e6ffed; color: #1e7b34; }
.pkc-app .pkc-ci-day.pkc-ci-past b { color: #1e7b34; }
.pkc-app .pkc-ci-day.pkc-ci-now { background: linear-gradient(180deg, #fff3b0, #ffd23f); color: #3b2500; box-shadow: 0 0 0 2px var(--pkc-yellow-d); animation: pkc-lucky-pulse 1.6s ease-in-out infinite; }
.pkc-app .pkc-ci-day.pkc-ci-now.pkc-ci-got { animation: none; background: #e6ffed; box-shadow: 0 0 0 2px #22c55e; }
.pkc-app .pkc-ci-mile { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 8px; }
.pkc-app .pkc-ci-mile span { padding: 3px 10px; border-radius: 999px; background: #eef1f7; font-size: 12px; font-weight: 700; }

/* ---------- Thư ---------- */
.pkc-app .pkc-mail-list { max-height: 50vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.pkc-app .pkc-mail-item { border-radius: 12px; background: #f7f8fc; margin-bottom: 6px; }
.pkc-app .pkc-mail-head { appearance: none; display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: none; color: var(--pkc-ink); font: inherit; text-align: left; cursor: pointer; }
.pkc-app .pkc-mail-head b { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pkc-app .pkc-mail-item.pkc-unread .pkc-mail-head b { font-weight: 800; }
.pkc-app .pkc-mail-item.pkc-unread .pkc-mail-head::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pkc-red); }
.pkc-app .pkc-mail-head small { flex: 0 0 auto; color: #6b7280; font-size: 11px; }
.pkc-app .pkc-mail-body { display: none; padding: 0 12px 10px; font-size: 14px; white-space: pre-line; word-break: break-word; }
.pkc-app .pkc-mail-item.pkc-open .pkc-mail-body { display: block; }
.pkc-app .pkc-mail-del { appearance: none; border: 0; background: none; color: #dc2626; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0 0; }

/* ---------- Kho đồ ---------- */
.pkc-app .pkc-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; }
.pkc-app .pkc-inv-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; background: #f7f8fc; border: 2px solid transparent; text-align: center; }
.pkc-app .pkc-inv-card.pkc-on { border-color: #22c55e; background: #f0fdf4; }
.pkc-app .pkc-inv-card small { color: #6b7280; font-size: 11px; line-height: 1.3; }
.pkc-app .pkc-inv-card b { font-size: 12.5px; line-height: 1.25; }
.pkc-app .pkc-inv-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pkc-app .pkc-inv-btns .pkc-btn { padding: 5px 8px; font-size: 11.5px; border-radius: 9px; }
.pkc-app .pkc-fr-mini { --pkc-tw: 16px; }
.pkc-app .pkc-fr-mini > .pkc-board { width: 96px; height: 62px; background: linear-gradient(135deg, #8fd3ff, #7b6cff); }
.pkc-app .pkc-inv-empty { text-align: center; color: #6b7280; padding: 16px 0; }

/* ---------- Giftcode ---------- */
.pkc-app .pkc-code-form { display: flex; gap: 8px; }
.pkc-app .pkc-code-form input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 10px 12px; border: 2px solid #dfe3ee; border-radius: 12px; font-family: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; background: #fff; color: var(--pkc-ink); }
.pkc-app .pkc-code-form input:focus { outline: none; border-color: #7c3aed; }
.pkc-app .pkc-modal-body p.pkc-code-ok { padding: 10px 12px; border-radius: 10px; background: #e6ffed; color: #1e7b34; font-weight: 700; }

/* ---------- Tối ---------- */
.pkc-app.pkc-dark .pkc-lb-tile, .pkc-app.pkc-dark .pkc-ci-day, .pkc-app.pkc-dark .pkc-mail-item, .pkc-app.pkc-dark .pkc-inv-card, .pkc-app.pkc-dark .pkc-ci-mile span { background: #1f2a3e; color: var(--pkc-ink); }
.pkc-app.pkc-dark .pkc-lb-tile:hover { background: #26324a; }
.pkc-app.pkc-dark .pkc-ci-day.pkc-ci-past, .pkc-app.pkc-dark .pkc-inv-card.pkc-on { background: rgba(34, 197, 94, .18); color: #86efac; }
.pkc-app.pkc-dark .pkc-ci-day.pkc-ci-now { color: #3b2500; }
.pkc-app.pkc-dark .pkc-code-form input { background: #0f1726; border-color: #2c3a52; color: var(--pkc-ink); }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-code-ok { background: rgba(34, 197, 94, .18); color: #86efac; }
.pkc-app.pkc-dark .pkc-lb-wallet, .pkc-app.pkc-dark .pkc-lb-foot, .pkc-app.pkc-dark .pkc-mail-head small, .pkc-app.pkc-dark .pkc-inv-card small { color: #94a3b8; }

/* ---------- Điện thoại ---------- */
@media (max-width: 560px) {
	.pkc-app .pkc-ci-days { grid-template-columns: repeat(4, 1fr); }
	.pkc-app .pkc-lb-tile { font-size: 11.5px; padding: 9px 2px; }
}
.pkc-app.pkc-compact .pkc-modal-card.pkc-lobby { max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.pkc-app.pkc-compact .pkc-lobby .pkc-modal-title { grid-column: 1 / -1; }
.pkc-app.pkc-compact .pkc-lobby .pkc-modal-body { display: contents; }
.pkc-app.pkc-compact .pkc-lobby .pkc-lb-main { grid-column: 1; }
.pkc-app.pkc-compact .pkc-lobby .pkc-lb-grid { grid-column: 2; margin-top: 0; align-self: start; }
.pkc-app.pkc-compact .pkc-lobby .pkc-lb-foot { grid-column: 1 / -1; margin-top: 6px; }
.pkc-app.pkc-compact .pkc-lobby .pkc-modal-actions { display: none; }
.pkc-app.pkc-compact .pkc-ci-days { grid-template-columns: repeat(7, 1fr); }
.pkc-app.pkc-compact .pkc-mail-list, .pkc-app.pkc-compact .pkc-inv-grid { max-height: calc(var(--pkc-vh, 100vh) * .5); }
.pkc-app.pkc-tall .pkc-title-tag { max-width: 90px; font-size: 10px; }
.pkc-app.pkc-compact .pkc-title-tag { max-width: 100%; font-size: 10px; }

/* ---------- BXH: kỳ 14 ngày nằm riêng 1 hàng ---------- */
.pkc-app .pkc-scopes { flex-wrap: wrap; }
.pkc-app .pkc-scope[data-scope="cycle"] { flex: 1 1 100%; }
.pkc-app .pkc-modal-body p.pkc-rank-cycle { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #eef6ff; color: #1e3a8a; font-size: 12.5px; }
.pkc-app .pkc-modal-body p.pkc-rank-cycle.pkc-closed { background: #fff4e5; color: #9a3412; }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-rank-cycle { background: rgba(56, 189, 248, .14); color: #bae6fd; }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-rank-cycle.pkc-closed { background: rgba(251, 146, 60, .16); color: #fed7aa; }
/* ---------- Sảnh: danh hiệu dưới tên, nút quay lại ---------- */
.pkc-app .pkc-lb-who .pkc-title-tag { display: block; width: max-content; max-width: 100%; margin-top: 2px; }
.pkc-app .pkc-modal-card.pkc-inv { max-width: 560px; }
.pkc-app .pkc-mail-body > div { margin-top: 6px; }
.pkc-app .pkc-user .pkc-title-tag { flex: 0 1 auto; min-width: 0; }.pkc-app .pkc-inv-card .pkc-title-tag { max-width: 100%; white-space: normal; font-size: 11px; }
.pkc-app .pkc-code-form + .pkc-form-err, .pkc-app .pkc-code-form ~ .pkc-muted { margin-top: 8px; }
.pkc-app .pkc-code-form input::placeholder { text-transform: none; letter-spacing: 0; }
/* Điện thoại ngang: sảnh gọn để vừa chiều cao */
.pkc-app.pkc-compact .pkc-modal-card.pkc-lobby { padding: 12px 16px 10px; }
.pkc-app.pkc-compact .pkc-lobby .pkc-modal-title { font-size: 17px; margin-bottom: 6px; }
.pkc-app.pkc-compact .pkc-lb-head { margin-bottom: 6px; gap: 8px; }
.pkc-app.pkc-compact .pkc-lb-ava { width: 32px; height: 36px; font-size: 16px; }
.pkc-app.pkc-compact .pkc-lb-name { font-size: 15px; }
.pkc-app.pkc-compact .pkc-btn.pkc-lb-play { padding: 8px 12px; font-size: 16px; }
.pkc-app.pkc-compact .pkc-modal-body p.pkc-lb-pause { margin-top: 4px; font-size: 11px; }
.pkc-app.pkc-compact .pkc-btn.pkc-lb-code { margin-top: 6px; padding-top: 7px; padding-bottom: 7px; }
.pkc-app.pkc-compact .pkc-lb-grid { gap: 6px; }
.pkc-app.pkc-compact .pkc-lb-tile { padding: 6px 2px; font-size: 11.5px; }
.pkc-app.pkc-compact .pkc-lb-tile span:first-child { font-size: 20px; }.pkc-app.pkc-dark .pkc-ci-day.pkc-ci-now { background: linear-gradient(180deg, #fff3b0, #ffd23f); }
.pkc-app.pkc-dark .pkc-ci-day.pkc-ci-now.pkc-ci-got { background: rgba(34, 197, 94, .18); color: #86efac; }/* Bẫy bot: ô ẩn khỏi màn hình (không dùng display:none để bot vẫn thấy trong HTML) */
.pkc-app .pkc-form .pkc-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* ---------- 1.9.7: Ủng hộ — nút + bảng số LED 7 đoạn (font DSEG7, OFL, đóng gói trong plugin) ---------- */
@font-face { font-family: "PKC DSEG7"; src: url("../fonts/dseg7-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.pkc-app .pkc-sp { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.pkc-app .pkc-sp-btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0; padding: 10px 16px; border: 0; border-radius: 6px; cursor: pointer;
	background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; box-shadow: 0 3px 0 #9f1239;
	font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap;
	text-transform: none !important; letter-spacing: 0 !important; min-height: 0 !important; height: auto !important;
	transition: transform .1s ease, filter .15s ease;
}
.pkc-app .pkc-sp-btn:hover { filter: brightness(1.06); }
.pkc-app .pkc-sp-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9f1239; }
.pkc-app .pkc-sp-btn i { font-style: normal; font-size: 18px; line-height: 1; }
.pkc-app .pkc-sp-done .pkc-sp-btn, .pkc-app .pkc-sp-btn:disabled { background: #bdbdbd; color: #111; box-shadow: none; cursor: default; transform: none; filter: none; }
.pkc-app .pkc-sp-board {
	flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 7px 12px; border: 1px solid #3a3a3a; border-radius: 6px; background: #0b0b0b;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, .8);
}
.pkc-app .pkc-sp-led {
	position: relative; direction: ltr; white-space: nowrap;
	font-family: "PKC DSEG7", "Courier New", monospace; font-weight: 700; font-size: 24px; line-height: 1;
	color: #ff8a1f; text-shadow: 0 0 5px rgba(255, 138, 31, .85), 0 0 14px rgba(255, 90, 0, .45);
}
.pkc-app .pkc-sp-ghost { position: absolute; left: 0; top: 0; color: rgba(255, 138, 31, .1); text-shadow: none; }
.pkc-app .pkc-sp-num { position: relative; }
.pkc-app .pkc-sp-lbl { font-size: 10.5px; font-weight: 800; line-height: 1.15; letter-spacing: .3px; text-transform: uppercase; color: #e5e5e5; text-align: left; }
.pkc-app .pkc-announce .pkc-sp { margin-top: 14px; }
@media (max-width: 380px) { .pkc-app .pkc-sp-led { font-size: 20px; } .pkc-app .pkc-sp-btn { padding: 8px 12px; } }
.pkc-app.pkc-compact .pkc-sp { margin-top: 6px; }
.pkc-app.pkc-compact .pkc-sp-btn { padding: 5px 12px; font-size: 13px; }
.pkc-app.pkc-compact .pkc-sp-board { padding: 4px 10px; }
.pkc-app.pkc-compact .pkc-sp-led { font-size: 18px; }
.pkc-app.pkc-compact .pkc-sp-lbl { font-size: 9.5px; }

/* ---------- 1.9.6: BXH — nút Hôm nay/Tuần/Tháng/Năm không bị theme ép chữ hoa + đệm to ---------- */
.pkc-app .pkc-scopes { gap: 6px; }
.pkc-app .pkc-scopes .pkc-scope { text-transform: none !important; letter-spacing: 0 !important; padding: 8px 4px !important; min-width: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; line-height: 1.2 !important; font-size: 13.5px; }
@media (max-width: 420px) { .pkc-app .pkc-scopes .pkc-scope { font-size: 12.5px; } }

/* ---------- 1.9.6: Nút Đăng xuất ở sảnh khi giao diện tối ---------- */
.pkc-app.pkc-dark .pkc-lb-foot .pkc-link { background: #26324a; color: #e2e8f0; }
.pkc-app.pkc-dark .pkc-lb-foot .pkc-link:hover { background: #33415c; }

.pkc-app .pkc-toolbar { position: relative; z-index: 2; }
.pkc-app.pkc-tall .pkc-toolbar { margin-top: 10px; }
/* ---------- 1.9.9: Nút Nhận thưởng sau khi xem đủ video ---------- */
.pkc-app .pkc-btn.pkc-ad-claim:not(:disabled) { animation: pkc-claim-pulse 1.2s ease-in-out infinite; }
@keyframes pkc-claim-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .pkc-app .pkc-btn.pkc-ad-claim { animation: none; } }
/* ---------- 1.9.13: Khung = ảnh admin tải lên, luôn là "lớp phủ" (đã bỏ khung viền CSS) ----------
 * Ảnh nằm trên bàn, tràn ra ngoài; bấm xuyên qua (pointer-events: none). Không có ảnh = không có khung.
 * Ảnh vuông (khuyên 1200×1200), góc = 30% cạnh ảnh (360px) giữ nguyên, cạnh kéo dãn.
 * Mép bàn nằm ở 1/3 góc (120px): 1/3 góc nằm ngoài bàn, 2/3 đè lên bàn. */
.pkc-app .pkc-fr[data-img][data-over] { --pkc-ovc: calc(var(--pkc-tw) * 3); }
.pkc-app.pkc-tall .pkc-fr[data-img][data-over], .pkc-app.pkc-compact .pkc-fr[data-img][data-over] { --pkc-ovc: calc(var(--pkc-tw) * 2.6); }
.pkc-app .pkc-fr[data-img][data-over] > .pkc-board { margin: calc(var(--pkc-ovc) / 3); }
.pkc-app .pkc-fr[data-img][data-over] > .pkc-board::after {
	content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
	border: 0 solid transparent;
	border-image-source: var(--pkc-frame-img);
	border-image-slice: 30%;
	border-image-width: var(--pkc-ovc);
	border-image-outset: calc(var(--pkc-ovc) / 3);
	border-image-repeat: stretch;
}
.pkc-app .pkc-fr-mini[data-img][data-over] { --pkc-ovc: 33px; }
/* ---------- 1.9.17: Hết giờ - vẽ đường nối của cặp vẫn còn nối được ---------- */
.pkc-app .pkc-path polyline.pkc-path-reveal { stroke: #facc15; stroke-width: 5; stroke-dasharray: 10 7; animation: pkc-reveal-dash .8s linear infinite; }
@keyframes pkc-reveal-dash { to { stroke-dashoffset: -34; } }
@media (prefers-reduced-motion: reduce) { .pkc-app .pkc-path polyline.pkc-path-reveal { animation: none; } }
/* 1.9.18: BXH - nut xem ky truoc */
.pkc-app .pkc-rank-period { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.pkc-app .pkc-rank-period .pkc-select { flex: 1 1 auto; min-width: 0; width: auto; margin-bottom: 0; }
.pkc-app .pkc-rank-period .pkc-rank-nav { flex: 0 0 auto; margin: 0 !important; padding: 6px 12px !important; font-size: 13px !important; white-space: nowrap; min-width: 0 !important; width: auto !important; min-height: 0 !important; height: auto !important; text-transform: none !important; letter-spacing: 0 !important; }
.pkc-app .pkc-rank-period .pkc-rank-nav[disabled] { opacity: .55; cursor: default; }
/* 1.9.20: Khung NGANG rieng (data-fh): anh 1900x1450, goc 300px (= 3 o), mep ban cach mep anh 100px (= 1 o).
 * Ti le anh = ti le ban ngang + phan tran (19 x 14.5 o) nen khong bi keo dan tren may tinh. */
.pkc-app .pkc-fr[data-img][data-over][data-fh], .pkc-app.pkc-compact .pkc-fr[data-img][data-over][data-fh] { --pkc-ovc: calc(var(--pkc-tw) * 3); }
.pkc-app .pkc-fr[data-img][data-over][data-fh] > .pkc-board::after { border-image-slice: 20.69% 15.79%; }
/* 1.9.21: Ghi chu duoi nut Ung ho (mien phi, chi tha tim) */
.pkc-app .pkc-modal-body p.pkc-sp-note { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #fff1f4; color: #9f1239; font-size: 12.5px; line-height: 1.45; text-align: left; }
.pkc-app.pkc-dark .pkc-modal-body p.pkc-sp-note { background: rgba(244, 63, 94, .14); color: #fecdd3; }
.pkc-app.pkc-compact .pkc-modal-body p.pkc-sp-note { font-size: 11.5px; padding: 4px 8px; }
/* 1.9.23: Dien thoai ngang / xoay CSS - bang xem video cuon duoc neu cot nut cao hon man hinh */
.pkc-app.pkc-compact .pkc-ad.pkc-modal-card { overflow-x: hidden; overflow-y: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; row-gap: 0; }
.pkc-app.pkc-compact .pkc-ad .pkc-ad-links .pkc-btn { padding: 6px 8px; font-size: 12px; }
.pkc-app.pkc-compact .pkc-ad .pkc-ad-note { font-size: 10.5px; line-height: 1.35; }
/* 1.9.24: Khung tren cung (de len o) nhung la 1 phan tu rieng, khong tran (inset am) -> an cap / hieu ung o khong lam khung nhap nhay.
 * Ban choi chinh dung .pkc-frame-ov; ::after chi con cho khung xem truoc (kho do, admin). */
.pkc-app .pkc-stage.pkc-has-ov > .pkc-board::after { content: none; display: none; }
.pkc-app .pkc-frame-ov { display: none; }
.pkc-app .pkc-fr[data-img][data-over] > .pkc-board > .pkc-frame-ov {
	display: block; position: absolute; inset: calc(var(--pkc-ovc) / -3); z-index: 4; pointer-events: none;
	border: 0 solid transparent;
	border-image-source: var(--pkc-frame-img);
	border-image-slice: 30%;
	border-image-width: var(--pkc-ovc);
	border-image-outset: 0;
	border-image-repeat: stretch;
}
.pkc-app .pkc-fr[data-img][data-over][data-fh] > .pkc-board > .pkc-frame-ov { border-image-slice: 20.69% 15.79%; }
/* 1.9.26: Khung ve bang canvas (khong nhay khi chon/an o tren dien thoai); chua ve xong thi van dung border-image. */
.pkc-app .pkc-frame-ov > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pkc-app .pkc-fr[data-img][data-over] > .pkc-board > .pkc-frame-ov.pkc-cv { border-image: none; }
/* 1.9.27: Cua hang - nut khong du vang / het luot */
.pkc-app .pkc-shop-item .pkc-btn.pkc-shop-lack, .pkc-app .pkc-shop-item .pkc-btn.pkc-shop-lack:disabled { background: #d1d5db !important; color: #4b5563 !important; box-shadow: none !important; opacity: 1; cursor: not-allowed; transform: none; filter: none; white-space: nowrap; }
.pkc-app.pkc-dark .pkc-shop-item .pkc-btn.pkc-shop-lack { background: #334155 !important; color: #94a3b8 !important; }
.pkc-app .pkc-shop-item small .pkc-shop-miss { color: #dc2626; font-weight: 600; }
.pkc-app.pkc-dark .pkc-shop-item small .pkc-shop-miss { color: #f87171; }

/* ---------- 1.9.30: HUD gọn — tên + danh hiệu hiện đủ, chip 🏅 điểm đang đua kỳ ---------- */
.pkc-app .pkc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.pkc-app .pkc-user .pkc-title-tag { max-width: none; overflow: visible; flex: 0 0 auto; }
.pkc-app .pkc-chip-score, .pkc-app .pkc-chip-cyc { cursor: pointer; font-size: 14px; }
.pkc-app .pkc-chip-cyc { background: linear-gradient(180deg, #fff7d6, #ffe08a); }
.pkc-app .pkc-chip-cyc[data-closed="1"] { opacity: .6; }
.pkc-app.pkc-dark .pkc-chip-cyc { background: linear-gradient(180deg, #4a3b12, #6b5216); color: #fde68a; }
.pkc-app .pkc-score-list { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.pkc-app .pkc-score-list li { padding: 8px 10px; border-radius: 10px; background: #f3f5fb; line-height: 1.45; }
.pkc-app.pkc-dark .pkc-score-list li { background: #1f2a3e; }
.pkc-app .pkc-score-note { margin: 0; font-size: 12.5px; opacity: .75; }
.pkc-app .pkc-lb-cyc { display: grid; gap: 3px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 13px; line-height: 1.4; color: #5a3d00; background: linear-gradient(180deg, #fff7d6, #ffe7a3); border: 1px solid #f5c84c; }
.pkc-app.pkc-dark .pkc-lb-cyc { color: #fde68a; background: #3a2f10; border-color: #6b5216; }

/* Màn dọc: hàng 1 = avatar + tên + danh hiệu | Màn N; hàng 2 = 💰 ⭐ 🏅 🍀; hàng 3 = giờ + nút. */
.pkc-app.pkc-tall .pkc-top::before, .pkc-app.pkc-tall .pkc-top::after { content: ""; flex: 0 0 100%; height: 0; }
.pkc-app.pkc-tall .pkc-top::before { order: 2; }
.pkc-app.pkc-tall .pkc-top::after { order: 4; }
.pkc-app.pkc-tall .pkc-user { order: 0; flex: 1 1 0; min-width: 0; justify-content: flex-start; }
.pkc-app.pkc-tall .pkc-name { max-width: 150px; }
.pkc-app.pkc-tall .pkc-user .pkc-title-tag { max-width: none; font-size: 10.5px; }
.pkc-app.pkc-tall .pkc-chip-lv { order: 1; }
.pkc-app.pkc-tall .pkc-chip-gold, .pkc-app.pkc-tall .pkc-chip-score, .pkc-app.pkc-tall .pkc-chip-cyc, .pkc-app.pkc-tall .pkc-chip-lucky { order: 3; }

/* Điện thoại ngang: tên trên, danh hiệu dưới (xuống dòng nếu dài) — không cắt chữ. */
.pkc-app.pkc-compact .pkc-user { flex-wrap: wrap; row-gap: 3px; }
.pkc-app.pkc-compact .pkc-who { display: contents; }
.pkc-app.pkc-compact .pkc-name { flex: 1 1 calc(100% - 32px); min-width: 0; max-width: none; }
.pkc-app.pkc-compact .pkc-user .pkc-title-tag { flex: 0 1 auto; width: max-content; max-width: 100%; margin: 0 auto; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; border-radius: 8px; font-size: 10px; line-height: 1.35; padding: 1px 7px; }
.pkc-app.pkc-compact .pkc-user .pkc-title-tag:not([hidden]) { display: block; }
.pkc-app.pkc-compact .pkc-chip-score, .pkc-app.pkc-compact .pkc-chip-cyc { grid-column: auto; padding: 3px 2px; font-size: 11px; }
/* ---------- 1.9.31: PC — chip thành thẻ thông tin có nhãn (Màn / Vàng / Điểm lượt / Điểm kỳ / May mắn) ---------- */
.pkc-app .pkc-ci { font-size: 19px; line-height: 1; flex: 0 0 auto; }
.pkc-app .pkc-cval { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.pkc-app .pkc-cl { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .72; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.pkc-app .pkc-cval b { font-size: 15.5px; font-weight: 800; }
.pkc-app .pkc-cval small { font-size: 12.5px; font-weight: 700; opacity: 1; }
.pkc-app .pkc-chip-lv, .pkc-app .pkc-chip-gold, .pkc-app .pkc-chip-score, .pkc-app .pkc-chip-cyc, .pkc-app .pkc-chip-lucky { gap: 8px; padding: 5px 13px 5px 10px; border-radius: 12px; text-transform: none; text-align: left; }
.pkc-app.pkc-dark .pkc-chip-lv, .pkc-app.pkc-dark .pkc-chip-gold, .pkc-app.pkc-dark .pkc-chip-score, .pkc-app.pkc-dark .pkc-chip-lucky { background: rgba(51, 65, 85, .88); color: #f1f5f9; border: 1px solid rgba(148, 163, 184, .22); }
.pkc-app.pkc-dark .pkc-chip-cyc { border: 1px solid rgba(253, 230, 138, .3); }
.pkc-app.pkc-dark .pkc-cl { color: #cbd5e1; opacity: .9; }
.pkc-app.pkc-dark .pkc-chip-cyc .pkc-cl { color: #fde68a; }

/* Điện thoại (dọc / ngang / màn hẹp): giữ chip gọn 1 dòng như trước, ẩn nhãn. */
.pkc-app.pkc-tall .pkc-cval, .pkc-app.pkc-compact .pkc-cval { display: contents; }
.pkc-app.pkc-tall .pkc-cl, .pkc-app.pkc-compact .pkc-cl { display: none; }
.pkc-app.pkc-tall .pkc-ci, .pkc-app.pkc-compact .pkc-ci, .pkc-app.pkc-tall .pkc-cval b, .pkc-app.pkc-compact .pkc-cval b { font-size: inherit; }
.pkc-app.pkc-tall .pkc-cval small, .pkc-app.pkc-compact .pkc-cval small { font-size: 10.5px; font-weight: 500; }
.pkc-app.pkc-tall .pkc-chip-lv .pkc-ci, .pkc-app.pkc-compact .pkc-chip-lv .pkc-ci { display: none; }
.pkc-app.pkc-tall .pkc-chip-lv .pkc-cl, .pkc-app.pkc-compact .pkc-chip-lv .pkc-cl { display: inline; font-size: inherit; opacity: 1; margin-right: 3px; }
.pkc-app.pkc-tall .pkc-chip-lv, .pkc-app.pkc-tall .pkc-chip-gold, .pkc-app.pkc-tall .pkc-chip-score, .pkc-app.pkc-tall .pkc-chip-cyc, .pkc-app.pkc-tall .pkc-chip-lucky { gap: 3px; padding: 3px 7px; border-radius: 999px; }
.pkc-app.pkc-compact .pkc-chip-lv, .pkc-app.pkc-compact .pkc-chip-gold, .pkc-app.pkc-compact .pkc-chip-lucky { gap: 3px; padding: 3px 6px; border-radius: 999px; justify-content: center; }
.pkc-app.pkc-compact .pkc-chip-score, .pkc-app.pkc-compact .pkc-chip-cyc { gap: 3px; padding: 3px 2px; border-radius: 999px; justify-content: center; }
/* ---------- 1.9.31: điện thoại — căn đều, chống theme chèn margin/min-height vào nút ---------- */
.pkc-app .pkc-top .pkc-chip { margin: 0; min-width: 0; min-height: 0; box-sizing: border-box; vertical-align: middle; }
.pkc-app.pkc-tall .pkc-top { gap: 6px 5px; }
.pkc-app.pkc-tall .pkc-top .pkc-chip { height: 30px; line-height: 1; justify-content: center; }
.pkc-app.pkc-tall .pkc-chip-gold, .pkc-app.pkc-tall .pkc-chip-score, .pkc-app.pkc-tall .pkc-chip-cyc, .pkc-app.pkc-tall .pkc-chip-lucky { flex: 1 1 auto; }
.pkc-app.pkc-tall .pkc-chip-lv { flex: 0 0 auto; }
.pkc-app.pkc-tall .pkc-timer { flex: 1 1 auto; height: 16px; align-self: center; }
.pkc-app.pkc-tall .pkc-rank-btn, .pkc-app.pkc-tall .pkc-theme-btn, .pkc-app.pkc-tall .pkc-fs-btn { flex: 0 0 auto; width: 38px; padding: 0; border-radius: 999px; }
.pkc-app.pkc-tall .pkc-rot-btn { flex: 0 0 auto; padding: 0 10px; }
.pkc-app.pkc-tall .pkc-rank-btn .pkc-rank-ico { font-size: 16px; }
.pkc-app.pkc-compact .pkc-top .pkc-chip { min-height: 26px; line-height: 1.2; }
/* 1.9.33: Đeo khung ảnh (lớp phủ) → ẩn viền trắng 2px bo 14px của bàn để không lệch với góc khung ảnh. */
.pkc-app .pkc-fr[data-img][data-over] > .pkc-board, .pkc-app.pkc-dark .pkc-fr[data-img][data-over] > .pkc-board { box-shadow: none; }

/* 1.9.34: Thông báo nổi (toast) - left:50% làm khung chỉ rộng nửa màn hình → chữ bị dồn. Cho rộng theo nội dung, tối đa gần hết bề ngang. */
.pkc-app .pkc-toast { width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; border-radius: 18px; line-height: 1.35; }
.pkc-app.pkc-tall .pkc-toast { font-size: 13px; padding: 8px 14px; }