:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:#543826; background:linear-gradient(180deg,#fff9e9,#ffefc4); }
.app { width:min(100%, 560px); margin:0 auto; padding:22px 16px 34px; }
.hero { text-align:center; }.hero h1 { margin:0; color:#ed7b2d; font-size:45px; letter-spacing:7px; text-shadow:0 4px #ffd58b; }.hero p { margin:4px 0 16px; color:#98745d; font-size:15px; }
.stats { display:flex; justify-content:space-around; padding:10px 8px; border:2px solid #f0d598; border-radius:20px; background:#fffaf0c9; box-shadow:0 7px 18px #ad77251c; color:#b29573; font-size:13px; }.stats b { display:block; margin-top:2px; color:#70452d; font-size:21px; }
.board-shell { margin-top:16px; padding:10px; border-radius:25px; background:#ffe5a4; border:2px solid #f2ca73; box-shadow:0 10px 22px #a96d211f; }.board-shell canvas { display:block; width:100%; height:auto; border-radius:18px; background:radial-gradient(circle at 50% 20%,#fff8df,#f6d17c); touch-action:none; }
.tray-title { display:flex; justify-content:space-between; margin:20px 8px 8px; font-size:20px; }.tray-title span { color:#b08b69; font-size:15px; }.tray { display:flex; gap:7px; min-height:80px; padding:8px; align-items:center; justify-content:center; border:2px solid #efd39b; border-radius:20px; background:#fffaf0bf; }.tray-item { width:58px; height:58px; border-radius:13px; background-color:#fff1cf; box-shadow:0 4px 10px #764a211a; background-repeat:no-repeat; }.tray-empty { border:2px dashed #edc978; box-shadow:none; background:#fff8e7; }
.restart,.motion { display:block; margin:20px auto 0; border:0; border-radius:30px; padding:13px 36px; color:#fff; background:#ee802e; font-size:16px; font-weight:700; box-shadow:0 5px #cf6423; cursor:pointer; }.motion { margin-top:14px; background:#79a94b; box-shadow:0 5px #5e8b35; font-size:14px; }
.result { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:#53331770; }.result[hidden] { display:none !important; }.result-card { width:min(100%,360px); padding:34px 24px; text-align:center; border-radius:28px; background:#fff9e9; box-shadow:0 18px 44px #3b230e50; }.result-card > div:first-child{font-size:56px}.result-card h2{margin:8px 0;color:#e6752e}.result-card p{color:#9b795b;margin:0 0 20px}.result-card .restart{margin:0 auto;}
@media (max-width:380px){.app{padding-inline:10px}.hero h1{font-size:39px}.tray-item{width:48px;height:48px}}

/* 3D page premium skin */
.premium-3d { color:#f5ead6; background:#75695d url('./assets/kitchen-bg.png') center top / cover fixed; }
.premium-3d .app { position:relative; padding-top:30px; }
.premium-3d .hero h1 { color:#f2bf67; font-size:44px; letter-spacing:8px; text-shadow:0 2px #8e562d,0 0 26px #e9a94a35; }
.premium-3d .hero p { color:#b5c0cc; letter-spacing:1px; }
.premium-3d .hero p b { color:#f2bf67; }
.premium-3d .stats { border:1px solid #dcae5e99; background:linear-gradient(135deg,#ffffff14,#ffffff06); box-shadow:0 14px 32px #0000002b,inset 0 1px #ffffff18; backdrop-filter:blur(12px); color:#c7a871; }
.premium-3d .stats b { color:#fff1d2; }
.premium-3d .board-shell { padding:12px; border:1px solid #d9a44f; background:linear-gradient(145deg,#5a3927,#2b1d1c); box-shadow:0 18px 38px #00000055,0 0 0 5px #ffffff08; }
.premium-3d .board-shell canvas { border-radius:14px; background:#c98d4f; }
.premium-3d .three-note { color:#cbb48c; letter-spacing:1px; }
.premium-3d .tray-title { color:#f5ead6; }
.premium-3d .tray-title span { color:#d9b66f; }
.premium-3d .tray { border:1px solid #d5a85d99; background:linear-gradient(135deg,#ffffff12,#ffffff05); box-shadow:inset 0 1px #ffffff18,0 10px 24px #00000024; }
.premium-3d .tray-item { background-color:#1a2a3a; border-radius:12px; box-shadow:inset 0 0 0 1px #ffffff12,0 5px 12px #0000002b; }
.premium-3d .tray-empty { border:1px dashed #d3ae6d; background:#142235; }
.premium-3d .restart,.premium-3d .motion { border:1px solid #ffe1a0; color:#2a1d15; background:linear-gradient(180deg,#f4cb77,#d9983f); box-shadow:0 5px #8b5429,0 10px 24px #00000035; }
.premium-3d .motion { border-color:#b7e5d0; color:#10251f; background:linear-gradient(180deg,#65c5a3,#27866f); box-shadow:0 5px #155345,0 10px 24px #00000035; }
.premium-3d .result { background:#07101dcc; backdrop-filter:blur(8px); }
.premium-3d .result-card { border:1px solid #dfb66c; background:linear-gradient(145deg,#1d3046,#101d2d); box-shadow:0 24px 60px #00000066; color:#f5ead6; }
.premium-3d .result-card h2 { color:#f2bf67; }
.premium-3d .result-card p { color:#b5c0cc; }
.premium-3d .login-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:#081322e8; backdrop-filter:blur(16px); }
.premium-3d .login-screen[hidden] { display:none; }
.premium-3d .login-card { width:min(100%,360px); padding:34px 28px 30px; text-align:center; border:1px solid #dcae5e; border-radius:28px; background:linear-gradient(145deg,#20364f,#101d2d); box-shadow:0 25px 70px #00000070; }
.premium-3d .login-mark { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 12px; border-radius:18px; color:#2c1b11; background:linear-gradient(145deg,#ffe08e,#d8943e); font-size:26px; font-weight:800; }
.premium-3d .login-card h2 { margin:0; color:#f2bf67; font-size:25px; }
.premium-3d .login-card p { margin:8px 0 22px; color:#b5c0cc; font-size:13px; }
.premium-3d .login-card input { display:block; width:100%; margin:10px 0; padding:13px 15px; border:1px solid #ffffff20; border-radius:13px; outline:0; color:#fff1d2; background:#08152599; font:inherit; }
.premium-3d .login-card input:focus { border-color:#e5b85f; box-shadow:0 0 0 3px #e5b85f1f; }
.premium-3d .login-button { width:100%; margin-top:10px; padding:13px; border:1px solid #ffe1a0; border-radius:14px; color:#2a1d15; background:linear-gradient(180deg,#f4cb77,#d9983f); font-weight:800; cursor:pointer; }
.premium-3d .login-card small { display:block; min-height:18px; margin-top:12px; color:#ff9d86; }
.premium-3d .account-bar { display:flex; justify-content:flex-end; align-items:center; gap:10px; min-height:22px; color:#cbb48c; font-size:11px; }
.premium-3d .account-bar button { border:0; color:#cbb48c; background:transparent; font-size:11px; cursor:pointer; }
.premium-3d .account-bar button:hover { color:#f6d486; }