*{box-sizing:border-box;margin:0;padding:0}:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--hud-accent:#ff8c3c;--bg:#0d1117}html,body{overscroll-behavior:none;-webkit-overflow-scrolling:auto;background:var(--bg);color:#e6edf3;touch-action:none;width:100%;height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);font-family:system-ui,Segoe UI,sans-serif;overflow:hidden}#app{grid-template-rows:1fr auto;width:100%;height:100%;min-height:0;display:grid;position:relative}#canvas{touch-action:none;grid-row:1;width:100%;height:100%;min-height:0;display:block}#hud{z-index:10;-webkit-overflow-scrolling:touch;width:100%;max-height:42vh;padding:12px 14px;padding-bottom:max(12px, var(--safe-bottom));pointer-events:auto;touch-action:manipulation;background:#0d1117f0;border:1px solid #ff8c3c59;border-bottom:none;border-radius:14px 14px 0 0;grid-row:2;overflow-y:auto;box-shadow:0 -6px 28px #00000073}@media (width>=641px){#app{display:block}#canvas{width:100%;height:100%;position:absolute;inset:0}#hud{top:max(12px, var(--safe-top));left:max(12px, var(--safe-left));grid-row:unset;width:min(320px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)));border-bottom:1px solid #ff8c3c59;border-radius:10px;max-height:none;padding:14px 16px;position:fixed;bottom:auto;overflow:visible;box-shadow:0 8px 32px #00000073}}#hud h1{margin-bottom:10px;font-size:1.05rem;font-weight:600}#hud .tag{color:var(--hud-accent);margin-left:6px;font-size:.7rem;font-weight:500}.panel{margin-bottom:12px}.panel label{color:#8b949e;margin-bottom:4px;font-size:.75rem;display:block}#word-input{color:#e6edf3;touch-action:manipulation;background:#161b22;border:1px solid #30363d;border-radius:6px;width:100%;min-height:44px;padding:10px 12px;font-size:16px}.btn-row{gap:8px;margin-top:8px;display:flex}button{cursor:pointer;background:var(--hud-accent);color:#0d1117;touch-action:manipulation;border:none;border-radius:6px;flex:1;min-height:44px;padding:10px 14px;font-size:.95rem;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}button#btn-play-again{color:#0d1117;background:#3fb950;width:100%;margin-top:8px}.word-bank{color:#8b949e;min-height:1.2em;margin-top:8px;font-size:.8rem}.bars{flex-direction:column;gap:8px;display:flex}@media (width>=400px) and (width<=640px){.bars{flex-direction:row;gap:12px}.bars .bar-wrap{flex:1;margin-bottom:0}}.bars .bar-wrap{margin-bottom:8px}.bars span{color:#8b949e;font-size:.72rem}.bar{background:#21262d;border-radius:4px;height:8px;margin-top:2px;overflow:hidden}.bar .fill{transform-origin:0;width:100%;height:100%;transition:transform .2s;transform:scaleX(1)}.fill.player{background:linear-gradient(90deg,#58a6ff,#1f6feb)}.fill.gate{background:linear-gradient(90deg,#f85149,#da3633)}.status{color:#c9d1d9;font-size:.82rem;line-height:1.35}.hidden{display:none!important}.zoom-controls{z-index:12;right:max(10px, var(--safe-right));bottom:calc(12px + var(--safe-bottom));pointer-events:auto;touch-action:manipulation;flex-direction:column;gap:6px;display:flex;position:fixed}@media (width>=641px){.zoom-controls{bottom:max(16px, var(--safe-bottom))}}@media (width<=640px){.zoom-controls{bottom:auto;top:max(10px, var(--safe-top));right:max(10px, var(--safe-right))}}.zoom-controls button{width:48px;min-height:48px;color:var(--hud-accent);background:#0d1117e0;border:1px solid #ff8c3c73;border-radius:10px;flex:none;padding:0;font-size:1.35rem;line-height:1;box-shadow:0 4px 16px #00000059}.loading-screen{z-index:100;padding:24px;padding-top:max(24px, var(--safe-top));padding-bottom:max(24px, var(--safe-bottom));background:var(--bg);justify-content:center;align-items:center;transition:opacity .35s,visibility .35s;display:flex;position:fixed;inset:0}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-inner{text-align:center;width:min(320px,100%)}.loading-title{margin-bottom:8px;font-size:1.1rem;font-weight:600}.loading-hint{color:#8b949e;margin-bottom:18px;font-size:.85rem;line-height:1.4}.loading-bar{background:#21262d;border-radius:3px;height:6px;overflow:hidden}.loading-bar-fill{background:linear-gradient(90deg, var(--hud-accent), #ffb366);border-radius:3px;width:0%;height:100%;transition:width .25s}.damage-float{pointer-events:none;color:#ff7b72;text-shadow:0 1px 4px #000c;z-index:20;font-size:1.1rem;font-weight:700;animation:.9s ease-out forwards float-up;position:fixed}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-48px)}}