:root { --accent: #f45a21; --canvas: #fff8ef; }

.best { padding: 9px 13px; border-radius: 12px; background: #fff2e5; color: #8d3a17; font-size: 14px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
.game-panel { padding: 28px; }
.game-title { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.game-title h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.05em; margin-bottom: 20px; }
.timer { min-width: 108px; padding: 13px 16px; text-align: center; color: #a43b14; background: #fff4e8; border: 1px solid #ffd7bd; border-radius: 16px; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 22px; }
.timer.danger { color: #fff; background: #e9452b; animation: pulse .7s infinite alternate; }
.board { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 12px; padding: 16px; background: #fff2dd; border: 1px solid #f8ddbd; border-radius: 20px; }
.card { aspect-ratio: 1; border: 0; border-radius: 18px; background: linear-gradient(145deg, #ff864b, #f24c1e); box-shadow: inset 0 -5px 0 rgba(128,42,10,.15), 0 8px 16px rgba(183,69,25,.12); position: relative; transform-style: preserve-3d; transition: transform .25s ease, opacity .25s ease; }
.card::before { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: clamp(26px, 4vw, 48px); font-weight: 900; backface-visibility: hidden; }
.card img { width: 72%; height: 72%; object-fit: contain; opacity: 0; transform: scale(.65) rotate(-8deg); transition: .22s ease; }
.card.open, .card.matched { background: #fff; transform: rotateY(180deg); }
.card.open img, .card.matched img { opacity: 1; transform: rotateY(180deg) scale(1); }
.card.matched { opacity: .38; pointer-events: none; }
.card.hint { outline: 4px solid #ffbd2e; animation: hint .6s 2; }
.game-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.score-panel { display: grid; align-content: start; gap: 14px; }
.stat { box-shadow: none; }
.stat strong { color: var(--accent); font-size: 34px; }
.rules { padding: 20px; box-shadow: none; }
.rules p { color: var(--muted); line-height: 1.55; font-size: 14px; }
.daily { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 14px; background: #fff2e5; font-size: 13px; font-weight: 800; }
.daily img { width: 34px; height: 34px; object-fit: contain; }
.result { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(44,25,17,.46); backdrop-filter: blur(8px); }
.result[hidden] { display: none; }
.result-card { width: min(420px, 100%); padding: 36px; text-align: center; }
.result-card h2 { font-size: 34px; letter-spacing: -.04em; }
.result-score { color: var(--accent); font-size: 72px; font-weight: 900; line-height: 1; }
@keyframes pulse { to { transform: scale(1.04); } }
@keyframes hint { 50% { transform: translateY(-6px); } }
@media (max-width: 820px) { .game-layout { grid-template-columns: 1fr; } .score-panel { grid-template-columns: repeat(3, 1fr); } .rules { grid-column: 1 / -1; } }
@media (max-width: 520px) { .game-panel { padding: 15px; } .board { gap: 7px; padding: 9px; } .card { border-radius: 12px; } .game-actions { flex-direction: column; } .score-panel { grid-template-columns: 1fr 1fr; } .rules { grid-column: 1 / -1; } }