:root{--font-display: "Unbounded", sans-serif;--font-body: "Manrope", sans-serif;--ink: #112423;--ink-soft: #36555d;--surface: #f5fdfb;--surface-deep: rgba(239, 251, 247, .9);--accent: #1fc4b3;--accent-warm: #f0a84d;--shadow: 0 25px 60px rgba(13, 37, 40, .2);--radius-lg: 28px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-body);color:var(--ink);min-height:100vh;overflow:hidden;background:radial-gradient(circle at 10% 10%,rgba(31,196,179,.22),transparent 55%),radial-gradient(circle at 85% 15%,rgba(240,168,77,.18),transparent 50%),radial-gradient(circle at 20% 80%,rgba(240,95,92,.16),transparent 60%),linear-gradient(150deg,#f7fffd,#e9f7f4 45%,#fff3e4)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(rgba(15,45,48,.06) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;opacity:.45}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.page{max-width:100%;margin:0 auto;padding:28px clamp(16px,3vw,40px) 72px;position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;background:var(--surface-deep);padding:10px 16px;border-radius:999px;border:1px solid rgba(17,36,35,.08);box-shadow:0 10px 25px #0c26271f}.brand img{width:44px;height:44px}.title-block{flex:1;text-align:center}.title-block h1{margin:0;font-family:var(--font-display);font-size:36px;letter-spacing:-.02em}.game-shell{display:grid;gap:22px;animation:rise .6s ease both;flex:1;min-height:0;grid-template-rows:1fr}.canvas-card{position:relative;background:#fffc;border-radius:var(--radius-lg);border:2px solid rgba(17,36,35,.12);box-shadow:var(--shadow);padding:10px;overflow:hidden;height:100%;min-height:520px;max-height:860px}.canvas-card:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:calc(var(--radius-lg) - 10px);border:1px dashed rgba(17,36,35,.12);pointer-events:none}#gameCanvas{width:100%;height:100%;display:block;border-radius:calc(var(--radius-lg) - 12px)}.dish-hud{position:absolute;top:16px;left:16px;z-index:1}.avoid-card{background:#ffffffdb;border-radius:14px;padding:10px 12px 12px;border:1px solid rgba(17,36,35,.12);box-shadow:0 10px 20px #0e282b29;display:grid;gap:8px;justify-items:center}.avoid-card.is-hidden{opacity:.3}.avoid-label{text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:700;color:var(--ink-soft)}.avoid-preview{width:44px;height:44px;display:block}.glass-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#f5fdfbbf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s ease;z-index:2}.glass-overlay.is-hidden{opacity:0;pointer-events:none}.overlay-card{width:min(420px,90%);background:#fff;border-radius:20px;padding:26px;text-align:center;border:1px solid rgba(17,36,35,.12);box-shadow:0 20px 50px #0c242533;animation:float-in .5s ease both}.overlay-label{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--ink-soft);margin:0 0 8px;font-weight:700}.overlay-card h2{font-family:var(--font-display);margin:0 0 12px;font-size:28px}.overlay-card p{margin:0 0 18px;color:var(--ink-soft);line-height:1.5}.overlay-actions{display:flex;justify-content:center}.primary-btn{border:none;background:linear-gradient(135deg,var(--accent),var(--accent-warm));color:#082724;font-weight:700;padding:12px 20px;border-radius:999px;cursor:pointer;box-shadow:0 10px 22px #165a5833}.overlay-hint{margin-top:14px;font-size:12px;color:var(--ink-soft)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes float-in{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 980px){.top-bar{flex-direction:column;align-items:flex-start}.title-block{text-align:left}}@media (max-width: 720px){.page{padding:22px 16px 60px}.title-block h1{font-size:30px}.canvas-card{min-height:420px}.dish-hud{top:12px;left:12px}.avoid-preview{width:38px;height:38px}}@media (max-height: 640px){body{overflow-y:auto}.page{min-height:auto}}
