:root { --ink:#5b4770; --pink:#ff80ad; --cream:#fffafd; --shadow:0 12px 0 rgba(203,136,164,.12), 0 18px 32px rgba(103,66,103,.12); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font-family:"M PLUS Rounded 1c", system-ui,sans-serif; background:radial-gradient(circle at 18% 10%,#fff 0 2px,transparent 3px) 0 0/40px 40px, linear-gradient(135deg,#fff3f7,#e9f8ff 56%,#fff9df); }
button { font:inherit; -webkit-tap-highlight-color:transparent; } .game-shell { width:min(1120px,100%); margin:auto; padding:26px 24px 18px; text-align:center; }
.hero { margin-bottom:16px; } .eyebrow { margin:0; color:#ff85a9; font-size:.73rem; letter-spacing:.17em; font-weight:800; } h1 { margin:2px 0 0; color:#7b5a83; letter-spacing:.04em; line-height:1.15; font-size:clamp(2rem,5vw,3.15rem); font-weight:800; text-shadow:0 3px #fff; } h1 span { color:#ff76a6; } .subtitle { margin:5px 0 0; font-size:.9rem; font-weight:700; }
.game-layout { display:grid; grid-template-columns:180px minmax(250px,400px) 180px; align-items:center; justify-content:center; gap:26px; } .stats,.help-card { display:grid; gap:12px; text-align:left; } .stat-card,.help-card { background:rgba(255,255,255,.82); border:3px solid #fff; border-radius:22px; box-shadow:var(--shadow); padding:13px 15px; } .stat-card span { display:block; color:#ff83a9; letter-spacing:.09em; font-size:.65rem; font-weight:800; } .stat-card strong { display:block; font-size:1.55rem; line-height:1.12; letter-spacing:.04em; } .stat-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .stat-row .stat-card { padding:11px; } .stat-row strong { font-size:1.28rem; }
.score-card { position:relative; } #score-pop { position:absolute; right:11px; bottom:10px; color:#ff679d; font-size:.78rem; font-weight:800; opacity:0; transform:translateY(5px); } #score-pop.show { animation:scorePop .7s ease-out; } @keyframes scorePop { 15%{opacity:1;transform:translateY(0) scale(1.1)} 100%{opacity:0;transform:translateY(-25px) scale(.9)} }
.combo-message { min-height:28px; color:#ff669b; font-size:.8rem; line-height:1.25; font-weight:800; text-align:center; } .combo-message.show { animation:bob .7s ease-out; } @keyframes bob { 0%{transform:scale(.65);opacity:0} 35%{transform:scale(1.18);opacity:1} 100%{transform:scale(1);opacity:1} }
.board-wrap { position:relative; width:min(400px,calc(100vw - 48px)); aspect-ratio:1/2; overflow:visible; border-radius:29px; padding:9px; background:linear-gradient(145deg,#fff,#ffddec); box-shadow:0 18px 0 #efa5bd, 0 25px 38px rgba(125,71,111,.22); } #game-canvas { display:block; width:100%; height:100%; border-radius:22px; background:linear-gradient(180deg,#dff7ff,#f9fbff 70%,#f8efff); touch-action:none; } .sparkle { position:absolute; z-index:-1; color:#ffc852; font-size:1.3rem; } .s1{top:-13px;left:-18px}.s2{right:-23px;top:22%}.s3{bottom:13%;left:-26px;font-size:.6rem;color:#99dfd1}
.overlay { position:absolute; inset:9px; display:grid; place-items:center; border-radius:22px; background:rgba(255,244,250,.76); backdrop-filter:blur(2px); transition:opacity .25s; } .overlay.hidden { opacity:0; pointer-events:none; } .overlay-card { width:min(270px,82%); padding:22px 18px 19px; border:3px solid white; border-radius:28px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); } .overlay h2 { margin:8px 0 6px; font-size:1.55rem; line-height:1.28; color:#755578; } .overlay p { margin:0 0 15px; font-size:.83rem; font-weight:700; line-height:1.7; } .small-title { color:#ff72a5; font-size:.7rem!important; letter-spacing:.14em; } .mascot { display:grid; place-items:center; width:62px; height:54px; margin:auto; border-radius:48% 52% 45% 55%; background:radial-gradient(circle at 32% 24%,#fff 0 7%,transparent 8%),linear-gradient(140deg,#ffc7dd,#ff86b4); box-shadow:inset -5px -7px rgba(211,72,123,.12), 0 5px #f09cba; color:#6e4c66; transform:rotate(-5deg); } .mascot b { letter-spacing:2px; font-size:1.05rem; }.mascot.sad{background:linear-gradient(140deg,#c9d8ff,#9bbcff)}
.primary-button,.pause-button { border:0; cursor:pointer; font-weight:800; color:white; background:linear-gradient(135deg,#ff92b7,#ff669a); box-shadow:0 5px 0 #dc5684, 0 9px 14px rgba(226,78,129,.27); transition:transform .12s,box-shadow .12s; } .primary-button { border-radius:999px; padding:11px 25px; font-size:.92rem; } .primary-button:active,.pause-button:active,.touch-controls button:active { transform:translateY(4px); box-shadow:0 1px 0 #dc5684; }
.help-card { padding:18px 15px; } .help-card h2 { margin:0 0 3px; color:#71b9b1; font-size:1rem; } .help-card p { margin:0; font-size:.75rem; font-weight:700; } kbd { display:inline-grid; min-width:22px; place-items:center; padding:1px 4px; border:1px solid #d7cbe0; border-radius:5px; background:#fff; box-shadow:0 2px #ded3e3; font:700 .7rem inherit; } .pause-button { width:100%; margin-top:5px; padding:8px; border-radius:12px; font-size:.75rem; background:linear-gradient(135deg,#8fd9d4,#66bbb5); box-shadow:0 4px 0 #4aa59f; }
.touch-controls { display:none; grid-template-columns:repeat(5,1fr); gap:8px; width:min(430px,100%); margin:21px auto 0; } .touch-controls button { min-height:58px; border:0; border-radius:17px; color:#755578; background:rgba(255,255,255,.9); box-shadow:0 5px 0 #edc8d8,0 9px 18px rgba(117,71,108,.12); font-size:1.5rem; font-weight:800; cursor:pointer; } .touch-controls small { display:block; margin-top:-2px; font-size:.57rem; letter-spacing:.05em; }.touch-controls .rotate{color:#8a76d9}.touch-controls .down{color:#56bdb5}.touch-controls .drop{color:#ff6598;background:#fff1a7}.footer-note { margin:20px 0 0; color:#927d98; font-size:.62rem; }
@media (max-width:800px) { .game-shell{padding-top:18px}.game-layout{grid-template-columns:minmax(0,400px);gap:13px}.stats{grid-template-columns:1.3fr 1fr 1fr;gap:8px;align-items:stretch;order:0}.stat-card{padding:9px 10px;border-radius:16px}.score-card{grid-row:span 1}.stat-card strong{font-size:1.2rem}.stat-row{display:contents}.stat-row .stat-card{padding:9px 10px}.combo-message{display:none}.board-wrap{order:1;justify-self:center}.help-card{display:none}.touch-controls{display:grid}.footer-note{margin-top:14px} }
@media (max-width:390px) { .game-shell{padding-left:16px;padding-right:16px}.board-wrap{width:calc(100vw - 32px)}.stats .stat-card span{font-size:.55rem}.stat-card strong{font-size:1.08rem} }