.game-page { min-height:calc(100vh - 150px); padding:clamp(72px,9vw,110px) 0 82px; }.game-intro { max-width:680px; animation:enter .65s var(--ease) both; }.game-intro h1 { max-width:100%; margin:0; font-size:clamp(3rem,6vw,5.2rem); letter-spacing:-.08em; }.game-intro h1 em { color:var(--green); font-style:normal; }.game-intro .intro { margin-top:19px; }.arcade { margin-top:46px; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:30px; background:rgba(255,255,252,.64); box-shadow:var(--shadow); backdrop-filter:blur(16px); animation:enter .7s .1s var(--ease) both; }.game-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:8px; border-bottom:1px solid var(--line); background:rgba(16,36,30,.045); }.game-tab { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:15px 17px; border:0; border-radius:16px; color:var(--muted); background:transparent; text-align:left; transition:background .2s,color .2s,transform .2s var(--ease); }.game-tab:hover { color:var(--green-dark); background:rgba(255,255,255,.7); transform:translateY(-1px); }.game-tab.active { color:var(--green-dark); background:#fffef9; box-shadow:0 5px 14px rgba(19,34,30,.08); }.game-tab span { font-size:1rem; font-weight:900; }.game-tab small { font-size:.76rem; font-weight:750; }.game-panel { display:grid; grid-template-columns:minmax(220px,.62fr) minmax(0,1fr); gap:clamp(30px,5.5vw,72px); align-items:center; padding:clamp(28px,5vw,58px); }.game-panel[hidden] { display:none; }.game-kicker { margin:0 0 9px; color:var(--green); font-family:ui-monospace,monospace; font-size:.74rem; font-weight:900; letter-spacing:.1em; }.game-copy h2 { font-size:clamp(2.1rem,4vw,3.2rem); }.game-copy>p:not(.game-kicker) { margin:15px 0 0; color:var(--muted); line-height:1.82; }.tips { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:23px; color:var(--muted); font-size:.77rem; font-weight:750; }.tips kbd { min-width:26px; padding:4px 7px; border:1px solid var(--line-strong); border-bottom-width:3px; border-radius:7px; color:var(--green-dark); background:#fffef9; font-family:inherit; text-align:center; }.game-stage { min-width:0; }.score-row { display:flex; align-items:stretch; gap:8px; margin-bottom:14px; }.score-box { display:flex; flex:1; flex-direction:column; justify-content:center; min-width:0; padding:9px 11px; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--green-dark),var(--green)); box-shadow:0 7px 14px rgba(13,71,55,.12); }.score-box span { opacity:.75; font-size:.66rem; font-weight:700; }.score-box b { margin-top:1px; font-size:1.12rem; }.mini-button { padding:0 13px; border:1px solid var(--line); border-radius:12px; color:var(--green-dark); background:rgba(255,255,255,.78); font-weight:850; transition:transform .18s var(--ease),background .18s var(--ease); }.mini-button:hover { background:var(--mint); transform:translateY(-2px); }.game-status { min-height:1.4em; margin:14px 1px 0; color:var(--muted); font-size:.85rem; font-weight:750; }.board-2048-wrap { position:relative; }.board-2048 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:8px; border-radius:17px; background:#97aaa0; box-shadow:inset 0 2px 5px rgba(10,47,36,.15); touch-action:none; }.gameover-2048 { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border-radius:17px; color:var(--ink); background:rgba(246,245,239,.9); backdrop-filter:blur(5px); text-align:center; }.gameover-2048[hidden] { display:none; }.gameover-2048 strong { font-size:clamp(1.65rem,4vw,2.3rem); letter-spacing:-.06em; }.gameover-2048 span { color:var(--muted); font-size:.84rem; font-weight:700; }.gameover-2048 .mini-button { min-height:37px; padding:0 14px; margin-top:5px; background:#fff; }.tile { display:grid; place-items:center; aspect-ratio:1; border-radius:10px; color:#23423a; background:rgba(240,245,241,.62); font-size:clamp(1.1rem,3.1vw,1.7rem); font-weight:900; transition:background .15s,transform .15s; }.tile.v2 { background:#e5f2e6; }.tile.v4 { background:#cee8d3; }.tile.v8 { color:#fff; background:#75b990; }.tile.v16 { color:#fff; background:#4b9f76; }.tile.v32 { color:#fff; background:#26835f; }.tile.v64 { color:#fff; background:#0d6047; }.tile.v128,.tile.v256 { color:#fff; background:#d49d38; }.tile.v512,.tile.v1024,.tile.v2048 { color:#fff; background:#d66d32; }.mines-board { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; padding:5px; border-radius:12px; background:#91a59a; user-select:none; }.mine-cell { display:grid; place-items:center; aspect-ratio:1; padding:0; border:0; border-radius:4px; color:#173f32; background:#e5ede7; font-size:clamp(.72rem,2vw,1rem); font-weight:900; }.mine-cell:hover:not(.revealed) { background:#fff; }.mine-cell.revealed { background:#f8f8f3; }.mine-cell.mine { background:#e97858; }.mine-cell.flagged { background:#bfe5cc; }.mine-cell.n1 { color:#2772b5; }.mine-cell.n2 { color:#208153; }.mine-cell.n3 { color:#cb573b; }.mine-cell.n4 { color:#77459e; } #snake-canvas { display:block; width:100%; aspect-ratio:1; border:8px solid #97aaa0; border-radius:17px; background:#e8f1eb; box-shadow:inset 0 2px 5px rgba(10,47,36,.13); image-rendering:pixelated; touch-action:none; }.snake-controls { display:none; margin-top:12px; text-align:center; }.snake-controls button { width:43px; height:35px; margin:2px; border:1px solid var(--line); border-radius:9px; color:var(--green-dark); background:#fff; font-size:1.1rem; font-weight:900; }.snake-controls button:active { background:var(--mint); } @media(max-width:760px) { .game-page { padding:58px 0; }.arcade { margin-top:35px; border-radius:23px; }.game-tabs { padding:6px; }.game-tab { padding:12px 10px; }.game-tab small { display:none; }.game-panel { grid-template-columns:1fr; padding:27px 19px 29px; gap:26px; }.game-copy h2 { font-size:2rem; }.snake-controls { display:block; }.tips { margin-top:16px; } } @media(max-width:380px) { .score-row { gap:5px; }.score-box { padding:7px; }.mini-button { padding:0 9px; font-size:.78rem; }.board-2048 { gap:5px; padding:5px; }.tile { border-radius:7px; } }