:root {
	--bg1: #140b2e; --bg2: #0a0618;
	--panel: rgba(255, 255, 255, .06); --panel-b: rgba(255, 255, 255, .12);
	--text: #f3efff; --muted: #a59cc9;
	--acc1: #ff4fd8; --acc2: #7b5cff; --acc3: #22d3ee;
	--font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg2); color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }

#app {
	position: relative; height: 100%; display: flex; flex-direction: column; align-items: center;
	padding: max(10px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
	background: radial-gradient(120% 70% at 50% -10%, #3a1f7a 0%, transparent 60%), radial-gradient(90% 60% at 100% 110%, #1b3f7a 0%, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2));
	gap: 10px;
}
.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 10px 2px rgba(190, 160, 255, .8); animation: twinkle 6s infinite; }
.bg i:nth-child(1) { left: 8%; top: 18%; animation-delay: .2s; }
.bg i:nth-child(2) { left: 88%; top: 12%; animation-delay: 1.4s; }
.bg i:nth-child(3) { left: 72%; top: 46%; animation-delay: 2.6s; }
.bg i:nth-child(4) { left: 14%; top: 64%; animation-delay: 3.3s; }
.bg i:nth-child(5) { left: 92%; top: 82%; animation-delay: 4.1s; }
.bg i:nth-child(6) { left: 40%; top: 6%; animation-delay: 5s; }
.bg i:nth-child(7) { left: 4%; top: 92%; animation-delay: .9s; }
.bg i:nth-child(8) { left: 55%; top: 95%; animation-delay: 3.8s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }

.top, .toolbar, .goal { position: relative; width: 100%; max-width: var(--bw, 520px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-gem { width: 30px; height: 30px; flex: none; border-radius: 9px; transform: rotate(45deg) scale(.8); background: conic-gradient(from 30deg, #ff7ae6, #7b5cff, #22d3ee, #b6f23a, #ffd23f, #ff4f8b, #ff7ae6); box-shadow: 0 0 18px rgba(255, 90, 220, .55), inset 0 0 0 3px rgba(255, 255, 255, .35); }
.brand h1 { margin: 0; font-size: clamp(15px, 4.4vw, 24px); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.brand h1 b { background: linear-gradient(90deg, #ffd23f, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { color: var(--muted); font-size: 12px; }
.scores { display: flex; gap: 6px; }
.score { position: relative; min-width: 58px; padding: 6px 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-b); text-align: center; }
.score span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.score strong { display: block; font-size: clamp(15px, 4.4vw, 18px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.score em { position: absolute; left: 0; right: 0; top: 0; font-style: normal; font-weight: 700; color: #ffd23f; opacity: 0; pointer-events: none; }
.score em.go { animation: rise .8s ease-out; }
@keyframes rise { 0% { opacity: 1; transform: translateY(18px); } 100% { opacity: 0; transform: translateY(-14px); } }

.toolbar { display: flex; gap: 6px; }
.tb { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--panel-b); background: var(--panel); font-size: 13px; font-weight: 700; position: relative; transition: background .15s, transform .1s; }
.tb:active { transform: scale(.96); }
.tb:hover { background: rgba(255, 255, 255, .1); }
.tb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, var(--acc1), var(--acc2)); font-size: 11px; line-height: 18px; }
.tb[disabled] { opacity: .45; }
.tb.off svg { opacity: .5; }

.goal { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto 6px; column-gap: 10px; row-gap: 4px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-b); }
.goal-gem { grid-row: 1 / 3; width: 38px; height: 38px; }
.goal-gem canvas { width: 100%; height: 100%; }
.goal-txt { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.goal-txt span { color: var(--muted); }
.goal-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--acc3), var(--acc2), var(--acc1)); transition: width .4s ease; }

.board-wrap { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-start; justify-content: center; min-height: 0; }
#board { display: block; touch-action: none; border-radius: 18px; }

.overlay { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: var(--bw, 100%); height: var(--bw, 100%); display: none; align-items: center; justify-content: center; padding: 14px; border-radius: 18px; background: rgba(10, 6, 24, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 5; }
.overlay.show { display: flex; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.card { width: 100%; max-width: 380px; text-align: center; }
.card h2 { margin: 6px 0 8px; font-size: clamp(24px, 6.5vw, 32px); }
.card p { margin: 0 0 14px; color: #d5cdf5; font-size: 15px; line-height: 1.45; }
.hero-gems canvas { width: 100%; max-width: 300px; height: auto; }
.modes { display: flex; gap: 8px; margin: 0 0 14px; }
.mode { flex: 1; padding: 10px; border-radius: 14px; border: 1px solid var(--panel-b); background: var(--panel); }
.mode strong { display: block; font-size: 15px; }
.mode small { color: var(--muted); }
.mode.is-on { border-color: transparent; background: linear-gradient(var(--bg1), var(--bg1)) padding-box, linear-gradient(135deg, var(--acc1), var(--acc3)) border-box; border: 2px solid transparent; }
.btn { min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--panel-b); background: var(--panel); font-weight: 800; font-size: 16px; letter-spacing: .02em; transition: transform .1s, box-shadow .2s; }
.btn:active { transform: scale(.96); }
.btn.primary { border: 0; background: linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow: 0 10px 26px -10px rgba(255, 79, 216, .9); min-width: 160px; }
.btn.ghost { background: rgba(255, 255, 255, .08); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hint { margin-top: 14px !important; font-size: 12px !important; color: var(--muted) !important; }
.k { display: inline-block; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); color: #fff; }
.big-score span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.big-score strong { display: block; font-size: 44px; line-height: 1.1; background: linear-gradient(90deg, #ffd23f, #ff4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-score small { color: #ffd23f; font-weight: 700; }
.over-gem { display: grid; justify-items: center; margin: 8px 0 14px; color: var(--muted); font-size: 13px; }
.over-gem canvas { width: 96px; height: 96px; }
#ovWin .over-gem canvas { width: 130px; height: 130px; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(4deg); } }

.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: flex-end; justify-content: center; background: rgba(5, 3, 14, .6); }
.modal.show { display: flex; animation: fade .2s; }
.sheet { width: 100%; max-width: 560px; max-height: 86%; overflow: auto; padding: 16px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #24154f, #130b2b); border: 1px solid var(--panel-b); animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 20px; }
.sheet-sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--panel-b); background: var(--panel); font-size: 22px; line-height: 1; }
.gem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.gem-cell { padding: 10px 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.gem-cell canvas { width: 56px; height: 56px; }
.gem-cell strong { display: block; font-size: 13px; margin-top: 4px; }
.gem-cell small { color: var(--muted); font-size: 11px; }
.gem-cell.locked canvas { filter: brightness(0) opacity(.35); }
.gem-cell.locked strong { color: var(--muted); }

.toast { position: fixed; left: 50%; top: 26%; z-index: 30; transform: translate(-50%, 0) scale(.9); padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 79, 216, .95), rgba(123, 92, 255, .95)); font-weight: 800; font-size: 18px; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
.toast.go { animation: toast 1.3s ease; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px) scale(1); } }

@media (min-aspect-ratio: 4/3) and (max-height: 520px) {
	#app { display: grid; grid-template-columns: minmax(200px, 290px) auto; grid-template-rows: auto auto auto 1fr; column-gap: 18px; row-gap: 10px; justify-content: center; align-content: start; }
	.top, .toolbar, .goal { grid-column: 1; max-width: 290px; }
	.top { flex-wrap: wrap; row-gap: 8px; }
	.scores { width: 100%; }
	.score { flex: 1; }
	.toolbar { flex-wrap: wrap; }
	.tb { flex: 1 1 45%; }
	.board-wrap { grid-column: 2; grid-row: 1 / 5; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bg i { animation: none; } }