html, body { height: 100%; margin: 0; background: #5b965b; color: #e6edf3; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
#wrap { position: relative; height: 100%; }
canvas { display:block; width:100%; height:100%; background: #456345; }
.hud { position: absolute; left: 12px; top: 12px; display:flex; gap:12px; align-items:center; z-index: 2; }
.pill { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 6px 10px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.btn { cursor: pointer; user-select:none; transition: transform .08s ease; }
.btn:active { transform: scale(0.96); }
.difficultyBtn { cursor: pointer; user-select:none; transition: all .2s ease; padding: 8px 16px; border: 2px solid; border-radius: 8px; font-weight: 600; font-size: 14px; color: #e6edf3; }
.difficultyBtn:hover { transform: scale(1.05); }
.difficultyBtn.active { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,255,255,0.3); }
.centerOverlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; pointer-events:none; }
.card { pointer-events:auto; max-width: 720px; background: rgba(15,22,35,0.9); border: 1px solid rgba(255,255,255,0.14); padding: 20px; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
h1 { margin: 0 0 6px; font-weight: 700; font-size: 22px; letter-spacing: 0.2px; }
p { margin: 6px 0; line-height: 1.45; color: #c8d1da; }
kbd { background: #101a2b; border: 1px solid #1a2741; border-bottom-width: 3px; padding: 2px 6px; border-radius: 6px; font-weight: 600; color:#d7e4ff; }
.healthWrap { display:flex; gap:6px; align-items:center; }
.heart { width: 18px; height: 18px; background: conic-gradient(from 180deg at 50% 40%, #ff6b6b, #ff3b3b 40%, #ff7b7b 60%, #ff6b6b); clip-path: path("M 9 3 C 9 1 8.2 0 6.5 0 C 5 0 4 0.9 3.5 1.7 C 3 0.9 2 0 0.5 0 C -1.2 0 -2 1 -2 3 c 0 3 5.5 6.5 5.5 6.5 S 9 6 9 3 Z"); transform: translateX(4px) translateY(3px) scale(1.1); }
.healthBar { width: 120px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #2a354d, #1d263b); overflow: hidden; border: 1px solid #394662; }
.healthFill { height:100%; background: linear-gradient(90deg, #ff3b3b, #ffb199); width:100%; transition: width .15s ease; }
.toast { position:absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); padding: 10px 12px; border-radius: 12px; font-size: 13px; opacity: 0.9; }