@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%;
overflow:hidden;
background:#06111f;
font-family:"Space Grotesk",sans-serif;
color:white;
}

.app{
height:100dvh;
display:flex;
flex-direction:column;
gap:8px;
padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
background:
radial-gradient(circle at top left,rgba(34,211,238,.22),transparent 28%),
radial-gradient(circle at bottom right,rgba(168,85,247,.18),transparent 32%),
linear-gradient(145deg,#031525,#07111f);
}

.winbar{
height:34px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10px;
background:linear-gradient(90deg,#000080,#1084d0);
border-top:2px solid #dbeafe;
border-left:2px solid #dbeafe;
border-right:2px solid #020617;
border-bottom:2px solid #020617;
font-weight:900;
}

.winbtns{
display:flex;
gap:4px;
}

.winbtns b{
width:22px;
height:22px;
display:grid;
place-items:center;
background:#c0c0c0;
color:#111827;
border-top:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #404040;
border-bottom:2px solid #404040;
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}

.chip{
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
color:white;
text-decoration:none;
font-size:12px;
font-weight:800;
}

.title-wrap{
text-align:center;
flex:1;
}

.title-wrap h1{
margin:0;
font-size:clamp(24px,7vw,44px);
letter-spacing:.14em;
color:#67e8f9;
text-shadow:0 0 18px rgba(103,232,249,.7);
}

.title-wrap p{
margin:0;
font-size:11px;
opacity:.75;
letter-spacing:.12em;
}

.hud{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
padding:10px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
}

.hud div{
display:grid;
text-align:center;
}

.hud span{
font-size:10px;
letter-spacing:.15em;
opacity:.75;
}

.hud strong{
font-size:26px;
}

.game-wrap{
flex:1;
display:flex;
justify-content:center;
min-height:0;
}

canvas{
width:min(100%,720px);
aspect-ratio:9/16;
background:
linear-gradient(180deg,#dbeafe,#eff6ff);
border-radius:24px;
border:2px solid rgba(255,255,255,.18);
box-shadow:
inset 0 0 50px rgba(255,255,255,.25),
0 20px 50px rgba(0,0,0,.45);
}

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

.controls button{
height:38px;
border:none;
border-radius:999px;
background:linear-gradient(135deg,#67e8f9,#a855f7);
font-family:inherit;
font-weight:900;
}

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

.overlay.show{
display:flex;
}

.panel{
position:relative;
width:min(92vw,520px);
padding:24px;
border-radius:24px;
background:#0f172a;
}

.close{
position:absolute;
right:12px;
top:12px;
width:42px;
height:42px;
border:none;
border-radius:50%;
font-size:24px;
}

.topbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 6px;
}

.win-button {
height: 34px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 0;
background: #c0c0c0;
color: #111;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
border-right: 3px solid #404040;
border-bottom: 3px solid #404040;
box-shadow: none;
font-family: "MS Sans Serif", "Space Grotesk", system-ui, sans-serif;
font-weight: 900;
font-size: 12px;
padding: 0 6px;
}

.win-button:active {
border-top: 3px solid #404040;
border-left: 3px solid #404040;
border-right: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
background: #b8b8b8;
transform: translate(1px, 1px);
}

.controls {
display: none;
}

.game-wrap {
flex: 1;
min-height: 0;
display: flex;
align-items: stretch;
justify-content: center;
padding: 6px 0;
}

canvas {
height: 100%;
width: min(100%, 760px);
aspect-ratio: auto;
border-radius: 18px;
}

.app {
gap: 4px;
}

.title-wrap {
display: none !important;
}

.hud {
padding: 6px 10px;
border-radius: 0;
}

.hud strong {
font-size: 20px;
}

.hud span {
font-size: 9px;
}

.game-wrap {
flex: 1 1 auto;
min-height: 0;
padding: 0;
align-items: stretch;
}

canvas {
height: 100% !important;
width: 100% !important;
max-width: none !important;
border-radius: 0;
}