:root { --blue:#0756a0; --dark:#092c50; --cyan:#23b7d8; --pink:#dc1672; --paper:#f5f8fb; --shadow:0 18px 50px rgba(8,43,79,.16); }
* { box-sizing:border-box; }
body { margin:0; color:var(--dark); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:radial-gradient(circle at 20% 0,#dff6fb 0,transparent 32%),linear-gradient(145deg,#f7fafc,#e8f1f8); min-height:100vh; }
.page { width:min(94vw,760px); margin:auto; padding:36px 0 60px; }
header { text-align:center; }
.eyebrow { margin:0; color:var(--pink); font-weight:900; letter-spacing:.2em; }
h1 { margin:.1em 0; font-size:clamp(2.1rem,8vw,4rem); line-height:1; }
.intro { max-width:580px; margin:14px auto 25px; line-height:1.5; }
.game-card,.scores-card { background:rgba(255,255,255,.96); border:1px solid #fff; border-radius:24px; padding:clamp(14px,4vw,28px); box-shadow:var(--shadow); }
.stats { display:flex; justify-content:center; gap:50px; margin-bottom:16px; }
.stats div { text-align:center; }
.stats span { display:block; color:#60758a; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.stats strong { font-size:1.55rem; font-variant-numeric:tabular-nums; }
.board { position:relative; width:100%; aspect-ratio:1282/1227; overflow:hidden; border-radius:15px; background:#d8e3ec; box-shadow:inset 0 0 0 4px #fff,0 5px 18px rgba(4,40,74,.2); touch-action:manipulation; }
.tile { position:absolute; width:25%; height:25%; padding:0; border:2px solid rgba(255,255,255,.9); border-radius:6px; background-image:url('puzzle.png'); background-size:400% 400%; cursor:pointer; transition:left .15s ease,top .15s ease,filter .15s; box-shadow:inset 0 0 8px rgba(0,0,0,.12); }
.tile:hover,.tile:focus-visible { filter:brightness(1.12); z-index:2; outline:3px solid #fff; }
.board.preview::after { content:""; position:absolute; inset:0; background:url('puzzle.png') center/100% 100% no-repeat; z-index:20; }
.actions,.dialog-actions { display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
button { border:0; border-radius:999px; padding:12px 22px; font:inherit; font-weight:800; cursor:pointer; }
.primary { color:white; background:linear-gradient(110deg,var(--blue),var(--cyan)); box-shadow:0 7px 16px rgba(7,86,160,.25); }
.secondary { color:var(--blue); background:#e7f2fa; }
.message { min-height:1.5em; text-align:center; margin:14px 0 0; font-weight:700; color:var(--pink); }
.scores-card { margin-top:24px; }
.scores-card h2 { margin:0; font-size:1.7rem; }
.score-note { color:#60758a; margin:.25rem 0 1rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:10px 8px; text-align:left; border-bottom:1px solid #e2eaf0; }
th { color:#60758a; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
td:first-child,th:first-child { text-align:center; }
dialog { width:min(90vw,440px); border:0; border-radius:22px; padding:26px; color:var(--dark); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(3,25,45,.68); backdrop-filter:blur(3px); }
dialog h2 { margin-top:0; }
label { display:block; font-weight:750; margin:18px 0 7px; }
input { width:100%; border:2px solid #ccdbe7; border-radius:12px; padding:12px; font:inherit; }
@media (max-width:500px) { .page{padding-top:22px}.game-card{padding:10px}.tile{border-width:1px}.stats{gap:35px} }
@media (prefers-reduced-motion:reduce) { .tile{transition:none} }