:root { color-scheme: light; font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: #4e456d; background: radial-gradient(circle at 10% 10%, #fff8fd 0, transparent 28%), radial-gradient(circle at 90% 0, #e8f8ff 0, transparent 28%), linear-gradient(145deg, #f9d9ed, #e8e4ff 52%, #d8f4f0); }
button { font: inherit; }
.app-shell { width: min(1050px, 100%); min-height: 100vh; margin: auto; padding: 20px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 18px; }
.title-block { text-align: center; }
.title-block p { margin: 0 0 2px; color: #9a7caf; font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 0; color: #6b587e; font-size: clamp(2rem, 6vw, 3.7rem); letter-spacing: -.05em; text-shadow: 0 2px 0 rgba(255,255,255,.9); }
.home-link, .icon-button { width: max-content; border: 1px solid rgba(132, 103, 164, .3); border-radius: 999px; padding: .55rem .85rem; color: #624a78; background: rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(110, 80, 140, .08); font-weight: 800; text-decoration: none; }
.icon-button { justify-self: end; cursor: pointer; }
.game-card { overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; background: rgba(255,255,255,.48); box-shadow: 0 24px 60px rgba(100, 80, 140, .16), inset 0 1px 0 white; backdrop-filter: blur(12px); }
.intro { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 54px; padding: 10px 16px; color: #756184; font-size: .92rem; font-weight: 750; text-align: center; }
.pulse-dot { width: 10px; height: 10px; border-radius: 99px; background: #f49dbe; box-shadow: 0 0 0 5px rgba(244, 157, 190, .18); animation: breathe 2.2s ease-in-out infinite; }
.canvas-wrap { position: relative; min-height: 500px; height: min(68vh, 680px); overflow: hidden; border-top: 1px solid rgba(162, 128, 181, .16); border-bottom: 1px solid rgba(162, 128, 181, .16); background: radial-gradient(circle at 50% 38%, #fffdfd 0, #f7effa 72%, #ecddf2 100%); touch-action: none; }
canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: .55rem 1rem; border-radius: 999px; color: #7e648d; background: rgba(255,255,255,.72); box-shadow: 0 8px 26px rgba(106, 78, 126, .11); font-weight: 800; pointer-events: none; transition: opacity .45s ease; }
.controls { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 84px; padding: 14px 18px; }
.refill-button { border: 0; border-radius: 999px; padding: .76rem 1.1rem; color: #fff; background: linear-gradient(135deg, #e98ab3, #ad90d8); box-shadow: 0 5px 0 #a96d98, 0 10px 20px rgba(167, 102, 143, .2); font-weight: 900; cursor: pointer; }
.refill-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #a96d98; }
.status { color: #8c7794; font-size: .82rem; font-weight: 700; }
.footer-note { margin: 18px 0 0; color: #887991; font-size: .8rem; text-align: center; }
@keyframes breathe { 50% { transform: scale(1.25); box-shadow: 0 0 0 8px rgba(244, 157, 190, .08); } }
@media (max-width: 650px) { .app-shell { padding: 10px; } .topbar { grid-template-columns: 1fr auto; } .title-block { grid-column: 1 / -1; grid-row: 1; } .home-link, .icon-button { grid-row: 2; } .canvas-wrap { min-height: 510px; height: calc(100vh - 310px); } .controls { flex-direction: column; gap: 8px; } .status { text-align: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }