:root{
  --ink:#12131a;
  --yellow:#9c8752;
  --red:#ff4433;
  --green:#3fae62;
  --sky:#5a9bd4;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Courier New',monospace;touch-action:none;-webkit-user-select:none;user-select:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block}

#hud{position:fixed;top:14px;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:0 18px;pointer-events:none}
#score{font-size:34px;font-weight:900;color:#fff;text-shadow:2px 2px 0 #0007;letter-spacing:1px}
#lives{display:flex;gap:6px}
.life{display:inline-block;width:18px;height:18px;background:var(--red);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:1px 1px 0 #0007}

#titleScreen,#overScreen{
  position:fixed;inset:0;z-index:30;background:#0d0e14dd;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
}
#titleScreen.hidden,#overScreen.hidden{display:none}
.title{font-size:min(18vw,64px);color:var(--yellow);margin:0 0 6px;letter-spacing:2px;text-shadow:3px 3px 0 #0007;max-width:92vw;box-sizing:border-box;text-align:center}
.sub{font-size:15px;color:#d8d0c0;line-height:1.5;margin-bottom:16px;max-width:min(320px,88vw);padding:0 12px;box-sizing:border-box}
.best{font-size:13px;color:#9c8752;letter-spacing:1px;margin-bottom:20px}
.roast{font-size:12px;color:#786b52;font-style:italic;letter-spacing:0.5px;margin:0 0 20px;max-width:min(300px,88vw)}
.finalScore{font-size:24px;color:#fff;font-weight:900;margin-bottom:6px}
.go{font-family:inherit;font-weight:900;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:var(--yellow);border:none;border-radius:8px;padding:14px 30px;cursor:pointer;box-shadow:0 4px 0 #6b5d38;animation:pulse 1.3s ease-in-out infinite}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 #6b5d38}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion: reduce){.go{animation:none}}

/* --- desktop keyboard hint (PC support, additive) --- */
.kbd-hint{display:none;}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{display:block;}
}
.kbd-hint{color:#9c8752;font-size:12px;letter-spacing:1px;margin-bottom:14px;}

/* The one rule players miss: you cut a kite by hitting the kite, and a string cuts you. */
.rule{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;font-weight:900;letter-spacing:2px;font-size:clamp(17px,5.2vw,24px)}
.rule .ok{color:#7be38a}.rule .no{color:#ff7a6b;text-decoration:line-through;text-decoration-thickness:3px}
#runHint{position:fixed;left:50%;top:clamp(72px,14vh,120px);transform:translateX(-50%);z-index:21;pointer-events:none;
  background:rgba(20,14,6,.82);color:#fff3d6;font-weight:800;letter-spacing:1.5px;font-size:clamp(12px,3.6vw,16px);
  padding:8px 14px;border-radius:8px;white-space:nowrap;transition:opacity .4s}
#runHint.hidden{display:block;opacity:0}