/* game-tokens.css — Design tokens dùng chung cho 3 giao diện game (pc | ipad | mobile) và khu Think. Đặt data-device="pc|ipad|mobile" trên (do _Layout render từ GameViewResolver). 3 view chia sẻ CÙNG ngôn ngữ màu; chỉ khác kích thước / khoảng cách / tap-target. Dùng var(--g-*) trong CSS từng view thay vì hardcode để đồng bộ. */ :root { /* ── Màu thương hiệu (claymorphism candy) ── */ --g-brand: #7C6CF0; --g-brand-2: #FF8FCF; --g-brand-grad: linear-gradient(135deg, #7C6CF0, #FF8FCF); --g-accent: #FFB54C; --g-ok: #43D9B8; --g-bad: #FF7A85; --g-ink: #3A3357; --g-muted: #6E6690; --g-surface: #ffffff; --g-surface-2: #F3EEFB; /* ── Hình khối (chunky clay) ── */ --g-radius-sm: 16px; --g-radius: 22px; --g-radius-lg: 30px; --g-radius-pill: 999px; /* Puffy clay shadows — raised / pressed / floating */ --g-shadow: 6px 7px 15px rgba(122,100,180,.26), -5px -5px 12px rgba(255,255,255,.85), inset 2px 2px 4px rgba(255,255,255,.7), inset -3px -4px 7px rgba(120,100,180,.18); --g-shadow-lg: 0 20px 44px rgba(90,70,160,.26), -6px -6px 16px rgba(255,255,255,.6), inset 2px 2px 5px rgba(255,255,255,.6); --g-shadow-press: inset 4px 4px 9px rgba(120,100,180,.24), inset -4px -4px 9px rgba(255,255,255,.8); --g-ring: 0 0 0 4px rgba(124, 108, 240, .28); /* ── Scale mặc định (mobile-first) ── */ --g-tap-min: 44px; /* tap target tối thiểu */ --g-space: 8px; --g-hud-font: .9rem; --g-title-font: 1.4rem; --g-btn-font: 1rem; --g-choice-size: 130px; /* nút lựa chọn / thẻ */ --g-max-w: 600px; /* bề rộng nội dung tối đa */ } /* ── iPad: rộng rãi, tap target to, board lớn ── */ :root[data-device="ipad"] { --g-tap-min: 56px; --g-space: 14px; --g-hud-font: 1.05rem; --g-title-font: 1.9rem; --g-btn-font: 1.15rem; --g-choice-size: 150px; --g-max-w: 860px; } /* ── PC: landscape rộng, có hover, dùng chuột / bàn phím ── */ :root[data-device="pc"] { --g-tap-min: 40px; --g-space: 12px; --g-hud-font: 1rem; --g-title-font: 1.6rem; --g-btn-font: 1rem; --g-choice-size: 140px; --g-max-w: 960px; } /* ── Tiện ích dùng chung ── */ .g-hover-lift { transition: transform .15s, box-shadow .15s; } :root[data-device="pc"] .g-hover-lift:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--g-shadow-lg); } /* ══════════════════════════════════════════════════════════════ Clay override layer — reskins the shared game surfaces across ALL games at once. Selector `:root[data-device] .x` = specificity (0,3,0) so it beats each game's inline base `.x` (0,1,0) / `.x:state` (0,2,0) WITHOUT !important. Only clay-defining props are overridden (shadow / radius / border) — padding & font sizes stay per-game so responsive scaling is untouched. ══════════════════════════════════════════════════════════════ */ :root[data-device] { --clay-raise-btn: 6px 7px 14px rgba(90,70,160,.30), -5px -5px 12px rgba(255,255,255,.70), inset 3px 3px 5px rgba(255,255,255,.50), inset -4px -5px 9px rgba(0,0,0,.16); --clay-press-btn: inset 5px 5px 11px rgba(0,0,0,.22), inset -4px -4px 9px rgba(255,255,255,.40); --clay-raise-soft: 4px 5px 11px rgba(90,70,160,.22), -3px -3px 8px rgba(255,255,255,.72), inset 2px 2px 4px rgba(255,255,255,.55), inset -3px -3px 6px rgba(0,0,0,.10); --clay-chip: 4px 4px 10px rgba(122,100,180,.20), -3px -3px 8px rgba(255,255,255,.85), inset 1px 1px 2px rgba(255,255,255,.70); --clay-bounce: cubic-bezier(.175,.885,.32,1.4); } /* Primary game button — puffy clay pill */ :root[data-device] .btn-game { border-radius: var(--g-radius-pill); box-shadow: var(--clay-raise-btn); text-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform .22s var(--clay-bounce), filter .2s, box-shadow .2s; } :root[data-device] .btn-game:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.04) saturate(1.06); } :root[data-device] .btn-game:active { transform: translateY(1px) scale(.98); box-shadow: var(--clay-press-btn); } /* HUD chips — soft embossed clay */ :root[data-device] .hud-item { background: var(--g-surface); border: none; border-radius: var(--g-radius-sm); box-shadow: var(--clay-chip); } /* Win / game-over overlay card — floating clay panel */ :root[data-device] .overlay-card, :root[data-device] .game-overlay > div, :root[data-device] .drop-overlay .overlay-card, :root[data-device] .n-overlay-card, :root[data-device] .f-overlay-card, :root[data-device] .pz-overlay-card, :root[data-device] .sp-overlay-card, :root[data-device] .det-overlay-card { border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-lg); } /* Secondary pill buttons (mute / leaderboard / pick-words / save-score) */ :root[data-device] .mute-btn, :root[data-device] .lb-btn, :root[data-device] .btn-pick-words, :root[data-device] .btn-save-score, :root[data-device] .swipe-btn, :root[data-device] .tut-skip-btn, :root[data-device] .tut-next-btn { border: none; border-radius: var(--g-radius-pill); box-shadow: var(--clay-raise-soft); transition: transform .2s var(--clay-bounce), box-shadow .2s, filter .2s; } :root[data-device] .mute-btn:hover, :root[data-device] .lb-btn:hover, :root[data-device] .btn-pick-words:hover, :root[data-device] .btn-save-score:hover, :root[data-device] .swipe-btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.03); } :root[data-device] .mute-btn:active, :root[data-device] .lb-btn:active, :root[data-device] .btn-pick-words:active, :root[data-device] .btn-save-score:active, :root[data-device] .swipe-btn:active { box-shadow: var(--clay-press-btn); transform: scale(.97); } /* Chips used by detective / device variants */ :root[data-device] .d-chip, :root[data-device] .pc-chip, :root[data-device] .m-chip, :root[data-device] .ip-chip { border: none; border-radius: var(--g-radius-pill); box-shadow: var(--clay-chip); } /* Name input on the save-score row — pressed clay well */ :root[data-device] .player-name-input, :root[data-device] .name-input { border: none !important; border-radius: var(--g-radius-pill); background: var(--g-surface-2); box-shadow: var(--g-shadow-press); } :root[data-device] .player-name-input:focus, :root[data-device] .name-input:focus { background: #fff; box-shadow: var(--g-shadow-press), var(--g-ring); }