@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&display=swap');

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

html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #030712;
color: #f8fafc;
font-family: "Space Grotesk", system-ui, sans-serif;
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}

.app {
height: 100dvh;
display: flex;
flex-direction: column;
background:
radial-gradient(circle at 18% 8%, rgba(34, 211, 238, .26), transparent 28%),
radial-gradient(circle at 85% 78%, rgba(244, 63, 94, .24), transparent 32%),
linear-gradient(145deg, #020617 0%, #06111f 45%, #12091f 100%);
padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
transition: background .18s ease, box-shadow .18s ease;
}

.app.point-win {
background:
radial-gradient(circle at center, rgba(34, 197, 94, .55), transparent 42%),
linear-gradient(145deg, #03140a 0%, #052e16 55%, #020617 100%);
box-shadow: inset 0 0 120px rgba(34, 197, 94, .55);
}

.app.point-lose {
background:
radial-gradient(circle at center, rgba(239, 68, 68, .58), transparent 42%),
linear-gradient(145deg, #190505 0%, #3f0b0b 55%, #020617 100%);
box-shadow: inset 0 0 120px rgba(239, 68, 68, .6);
}

.topbar {
height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex: 0 0 auto;
}

.chip,
.controls button,
.panel button {
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.1);
color: #fff;
border-radius: 999px;
padding: 10px 14px;
font: inherit;
font-weight: 800;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0,0,0,.28);
backdrop-filter: blur(12px);
cursor: pointer;
}

.game-shell {
flex: 1;
display: grid;
grid-template-rows: auto auto auto;
gap: 8px;
width: min(100%, 720px);
margin: 0 auto;
min-height: 0;
}

.scoreboard {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
padding: 2px 2px 0;
flex: 0 0 auto;
}

.scoreboard div {
display: grid;
gap: 1px;
text-align: center;
}

.scoreboard span {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #cbd5e1;
font-weight: 800;
}

.scoreboard strong {
font-size: clamp(25px, 6.5vw, 42px);
line-height: .95;
}

.title {
font-size: clamp(24px, 7vw, 46px);
font-weight: 900;
letter-spacing: .16em;
color: #67e8f9;
text-shadow: 0 0 24px rgba(103,232,249,.7);
}

canvas {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
max-height: calc(100dvh - 170px);
display: block;
border: 2px solid rgba(255,255,255,.24);
border-radius: 24px;
background:
linear-gradient(90deg, transparent calc(50% - 2px), rgba(255,255,255,.2) calc(50% - 2px), rgba(255,255,255,.2) calc(50% + 2px), transparent calc(50% + 2px)),
radial-gradient(circle at 50% 25%, rgba(103,232,249,.16), transparent 36%),
linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
box-shadow:
inset 0 0 42px rgba(103,232,249,.11),
0 18px 50px rgba(0,0,0,.48);
touch-action: none;
}

.controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
flex: 0 0 auto;
padding-bottom: 2px;
}

.controls button,
.panel button {
background: linear-gradient(135deg, rgba(103,232,249,.96), rgba(168,85,247,.96));
color: #020617;
border: 0;
font-size: 13px;
min-height: 36px;
padding: 8px 12px;
}

.point-banner {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.96);
z-index: 12;
pointer-events: none;
opacity: 0;
padding: 18px 26px;
border-radius: 999px;
font-size: clamp(24px, 8vw, 52px);
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: white;
border: 2px solid rgba(255,255,255,.35);
background: rgba(15,23,42,.72);
box-shadow: 0 22px 80px rgba(0,0,0,.5);
backdrop-filter: blur(14px);
transition: opacity .16s ease, transform .16s ease;
}

.point-banner.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

.overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0,0,0,.72);
backdrop-filter: blur(12px);
z-index: 20;
}

.overlay.show {
display: flex;
}

.panel {
position: relative;
width: min(92vw, 520px);
max-height: 82dvh;
overflow: auto;
border: 1px solid rgba(255,255,255,.18);
border-radius: 26px;
background: #0f172a;
padding: 26px;
box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.panel h1 {
margin: 0 0 14px;
font-size: 30px;
}

.panel p {
color: #cbd5e1;
font-size: 17px;
line-height: 1.55;
}

.close {
position: absolute;
right: 14px;
top: 14px;
width: 42px;
height: 42px;
padding: 0;
font-size: 28px;
}

@media (min-width: 700px) {
.app {
padding-left: 18px;
padding-right: 18px;
}

.topbar {
height: 54px;
}

.controls button {
min-height: 52px;
font-size: 17px;
}
}

@media (orientation: landscape) and (max-height: 560px) {
.app {
padding: 6px 10px;
}

.topbar {
height: 40px;
}

.game-shell {
width: min(100%, 900px);
gap: 5px;
}

.scoreboard strong {
font-size: 23px;
}

.title {
font-size: 28px;
}

.controls {
display: none;
}
}

@media (max-width: 600px) {
.controls button {
min-height: 34px;
font-size: 12px;
padding: 6px 10px;
}

.chip {
padding: 7px 11px;
font-size: 12px;
}
}