.tp2048 { --tp2048-ink:#17213a; --tp2048-muted:#64748b; --tp2048-purple:#6d28d9; box-sizing:border-box; width:100%; max-width:680px; margin:0 auto; padding:32px; color:var(--tp2048-ink); background:#fff; font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.tp2048 *, .tp2048 *::before, .tp2048 *::after { box-sizing:border-box; }
.tp2048 [hidden] { display:none !important; }
.tp2048 p { margin:0; }
.tp2048 .tp2048-kicker { font-size:10px; font-weight:800; letter-spacing:.17em; color:var(--tp2048-purple); margin-bottom:16px; }
.tp2048 .tp2048-header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.tp2048 h2 { font:800 clamp(32px,6vw,46px)/1.06 system-ui,sans-serif; letter-spacing:-.055em; margin:0 0 16px; color:var(--tp2048-ink); }
.tp2048 h2 span { color:var(--tp2048-purple); }
.tp2048 .tp2048-intro { color:var(--tp2048-muted); font-size:14px; }
.tp2048 .tp2048-scores { display:flex; flex-wrap:wrap; gap:8px; max-width:220px; }
.tp2048 .tp2048-scores > div { min-width:78px; padding:10px 14px; border:1px solid #e5e7eb; border-radius:14px; text-align:center; background:#faf9ff; }
.tp2048 .tp2048-scores span { display:block; text-transform:uppercase; letter-spacing:.09em; font-size:10px; font-weight:700; color:var(--tp2048-muted); }
.tp2048 .tp2048-scores strong { display:block; font-size:22px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.tp2048 .tp2048-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 16px; font-size:13px; }
.tp2048 button { appearance:none; margin:0; border:0; border-radius:10px; padding:12px 16px; background:var(--tp2048-purple); color:white; font:700 13px/1.3 system-ui,sans-serif; text-transform:none; letter-spacing:normal; cursor:pointer; box-shadow:none; min-height:44px; }
.tp2048 button:hover { background:#5420ab; color:white; }
.tp2048 button:focus-visible, .tp2048 summary:focus-visible { outline:3px solid #0f766e; outline-offset:3px; }
.tp2048 .tp2048-play { position:relative; padding:12px; background:#eae6f1; border-radius:20px; touch-action:none; user-select:none; -webkit-user-select:none; outline:none; }
.tp2048 .tp2048-play:focus-visible { outline:3px solid var(--tp2048-purple); outline-offset:4px; }
.tp2048 .tp2048-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.tp2048 .tp2048-cell { display:flex; align-items:center; justify-content:center; min-width:0; aspect-ratio:1; border-radius:12px; background:#f7f5fa; color:#3c3158; font-size:clamp(22px,5vw,40px); font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tp2048 .tp2048-cell[data-level="1"] { background:#fff; }
.tp2048 .tp2048-cell[data-level="2"] { background:#e6ddfa; }
.tp2048 .tp2048-cell[data-level="3"] { background:#d3bdf7; }
.tp2048 .tp2048-cell[data-level="4"] { background:#b292ed; color:#221437; }
.tp2048 .tp2048-cell[data-level="5"] { background:#8a58dc; color:#fff; }
.tp2048 .tp2048-cell[data-level="6"] { background:#6d28d9; color:#fff; }
.tp2048 .tp2048-cell[data-level="7"] { background:#5420ab; color:#fff; }
.tp2048 .tp2048-cell[data-level="8"] { background:#a21caf; color:#fff; }
.tp2048 .tp2048-cell[data-level="9"] { background:#b21979; color:#fff; }
.tp2048 .tp2048-cell[data-level="10"] { background:#9b4321; color:#fff; font-size:clamp(19px,4.5vw,34px); }
.tp2048 .tp2048-cell[data-level="11"] { background:#0f766e; color:#fff; font-size:clamp(19px,4.5vw,34px); overflow-wrap:anywhere; }
.tp2048 .tp2048-pop { animation:tp2048-pop .16s ease-out; }
@keyframes tp2048-pop { from { transform:scale(.9); } to { transform:scale(1); } }
.tp2048 .tp2048-overlay { position:absolute; inset:0; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; background:rgba(250,248,255,.96); text-align:center; }
.tp2048 [data-message-title] { font-size:clamp(25px,5vw,38px); font-weight:800; letter-spacing:-.04em; }
.tp2048 [data-message-detail] { font-size:14px; max-width:270px; }
.tp2048 .tp2048-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; margin:14px 0 20px; color:var(--tp2048-muted); font-size:11px; }
.tp2048 .tp2048-directions { text-align:center; }
.tp2048 .tp2048-directions button { width:46px; height:44px; margin:3px; background:#f0eafa; color:#5420ab; font-size:20px; }
.tp2048 .tp2048-directions button:hover { background:#e2d5f8; }
.tp2048 .tp2048-help { border-top:1px solid #e5e7eb; margin-top:24px; padding-top:18px; font-size:13px; color:var(--tp2048-muted); }
.tp2048 summary { cursor:pointer; color:var(--tp2048-ink); font-weight:700; }
.tp2048 .tp2048-help p { margin-top:12px; }
.tp2048 .tp2048-live { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:480px) {
  .tp2048 { padding:20px 12px; }
  .tp2048 .tp2048-header { flex-direction:column; gap:18px; }
  .tp2048 .tp2048-scores { max-width:100%; }
  .tp2048 .tp2048-scores > div { min-width:90px; }
  .tp2048 .tp2048-toolbar { margin-top:20px; }
  .tp2048 .tp2048-play { padding:8px; border-radius:15px; }
  .tp2048 .tp2048-grid { gap:7px; }
  .tp2048 .tp2048-cell { border-radius:9px; }
}
@media (prefers-reduced-motion:reduce) { .tp2048 .tp2048-pop { animation:none; } }
.tp2048 .tp2048-ranking { border-top:1px solid #e5e7eb; margin-top:24px; padding-top:20px; }
.tp2048 .tp2048-rank-note { padding:10px 12px; background:#f5f0fd; border-radius:10px; font-size:12px; color:#5420ab; }
.tp2048 .tp2048-submit { margin:18px 0; padding:18px; border:1px solid #d3bdf7; border-radius:14px; background:#fcfaff; }
.tp2048 h3 { font:800 20px/1.3 system-ui,sans-serif; color:var(--tp2048-ink); margin:0 0 10px; letter-spacing:-.03em; }
.tp2048 .tp2048-submit p { font-size:12px; color:var(--tp2048-muted); margin-bottom:12px; }
.tp2048 .tp2048-submit label { display:block; font-size:13px; font-weight:700; }
.tp2048 .tp2048-submit input { display:block; width:100%; min-height:44px; margin:6px 0 12px; padding:10px 12px; border:1px solid #c4b5d8; border-radius:8px; background:white; color:var(--tp2048-ink); font:16px system-ui,sans-serif; }
.tp2048 .tp2048-submit input:focus-visible { outline:3px solid #0f766e; outline-offset:2px; }
.tp2048 .tp2048-rank-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:22px 0 8px; }
.tp2048 .tp2048-rank-heading h3 { margin:0; }
.tp2048 [data-demo-label] { font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:4px 7px; background:#fef3c7; color:#713f12; border-radius:5px; vertical-align:middle; }
.tp2048 .tp2048-rank-heading button { padding:8px 12px; background:#f0eafa; color:#5420ab; }
.tp2048 .tp2048-rank-description, .tp2048 [data-ranking-note], .tp2048 [data-submit-note] { font-size:12px; color:var(--tp2048-muted); margin:8px 0; overflow-wrap:anywhere; }
.tp2048 .tp2048-table { width:100%; border-collapse:collapse; table-layout:fixed; margin:14px 0 0; font-size:13px; }
.tp2048 .tp2048-table th, .tp2048 .tp2048-table td { padding:12px 8px; text-align:left; border:0; border-bottom:1px solid #e5e7eb; overflow-wrap:anywhere; }
.tp2048 .tp2048-table th { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--tp2048-muted); }
.tp2048 .tp2048-table th:first-child { width:20%; }
.tp2048 .tp2048-table th:last-child { width:30%; }
.tp2048 .tp2048-table th:last-child, .tp2048 .tp2048-table td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.tp2048 .tp2048-own { background:#f0eafa; font-weight:800; color:#5420ab; }
.tp2048 button:disabled { opacity:.55; cursor:wait; }
.tp2048 .tp2048-scorebar { position:sticky; top:var(--tp2048-sticky-top,48px); z-index:5; display:flex; justify-content:space-between; gap:12px; padding:10px 14px; margin-bottom:10px; background:#faf9ff; border:1px solid #d3bdf7; border-radius:10px; font-size:13px; box-shadow:0 2px 8px #17213a12; }
.tp2048 .tp2048-scorebar strong, .tp2048 .tp2048-result strong { font-size:20px; font-variant-numeric:tabular-nums; }
.tp2048 .tp2048-overlay { overflow:auto; justify-content:safe center; gap:8px; padding:14px; touch-action:pan-y; user-select:text; -webkit-user-select:text; }
.tp2048 .tp2048-overlay .tp2048-submit { width:100%; max-width:320px; margin:0; padding:10px 12px; text-align:left; }
.tp2048 .tp2048-overlay .tp2048-submit h3 { font-size:16px; margin-bottom:4px; }
.tp2048 .tp2048-overlay .tp2048-submit p { margin-bottom:6px; }
.tp2048 .tp2048-overlay [data-submit-note]:empty { display:none; }
.tp2048 .tp2048-restart { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; border:1px solid #d3bdf7; border-radius:20px; background:rgba(250,248,255,.98); text-align:center; }
.tp2048 .tp2048-restart p { margin-bottom:12px; font-size:14px; }
.tp2048 [data-restart-cancel] { margin-left:8px; background:#f0eafa; color:#5420ab; }
@media (max-width:480px) {
  .tp2048 .tp2048-play:has(.tp2048-overlay:not([hidden])) { min-height:540px; }
}