/* game.css — fullscreen canvas + HUD overlays */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #101c2c; }
body.game { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #f7efe0; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }

/* HUD */
#hud { position: absolute; top: 10px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
#hud .box { background: rgba(16,28,44,.72); border: 1px solid rgba(255,210,122,.35);
  border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 15px; letter-spacing: .3px;
  color: #ffd27a; text-shadow: 0 1px 0 #000; }
#inv { position: absolute; top: 52px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 46vw; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(16,28,44,.7);
  border: 1px solid rgba(247,239,224,.22); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

#toasts { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 480px); }
.toast { background: rgba(20,35,43,.9); border: 1px solid rgba(127,214,201,.5); color: #f7efe0;
  padding: 7px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; animation: pop .18s ease-out; }
.toast.good { border-color: #ffd27a; color: #ffd27a; }
.toast.bad { border-color: #f06a8a; color: #ff9fb2; }
.toast.out { opacity: 0; transition: opacity .5s; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#prompt .prompt-touch { display: none; }
#prompt .prompt-main { white-space: nowrap; }
#ui.touch #prompt { white-space: normal; }
#ui.touch #prompt .prompt-touch { display: block; margin-top: 3px; font-weight: 700; color: #ffd27a; }
#prompt { position: absolute; bottom: 18vh; left: 50%; transform: translateX(-50%);
  background: rgba(16,28,44,.78); border: 1px solid rgba(255,210,122,.4); border-radius: 12px;
  padding: 9px 18px; font-size: 15px; font-weight: 600; white-space: nowrap; max-width: 92vw;
  overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; opacity: 0; text-align: center; }

/* reel bar */
#reel { position: absolute; bottom: 26vh; left: 50%; transform: translateX(-50%); width: min(60vw, 320px);
  height: 18px; border: 2px solid rgba(247,239,224,.65); border-radius: 10px; overflow: hidden;
  background: rgba(16,28,44,.6); opacity: 0; transition: opacity .2s; }
#reel-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #3f9aa0, #7fd6c9 60%, #ffd27a); }
#reel.bite { animation: shake .35s infinite; }
@keyframes shake { 0%,100% { transform: translateX(-50%) 0; } 25% { transform: translateX(-51%) ; } 75% { transform: translateX(-49%); } }

/* buttons top-right */
#btns { position: absolute; top: 10px; right: 12px; display: flex; gap: 8px; }
#btns button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,210,122,.4);
  background: rgba(16,28,44,.75); color: #ffd27a; font-size: 17px; font-weight: 700; cursor: pointer; }
#btns button:active { transform: scale(.94); }

/* crop picker */
#picker { display: none; position: absolute; bottom: 20vh; left: 50%; transform: translateX(-50%);
  grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; width: min(92vw, 420px);
  background: rgba(16,28,44,.9); border: 1px solid rgba(255,210,122,.45); border-radius: 16px; padding: 14px; }
.picker-title { grid-column: 1 / -1; font-weight: 800; color: #ffd27a; margin-bottom: 2px; }
.picker-hint { grid-column: 1 / -1; font-size: 12px; opacity: .8; }
.pick { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  background: rgba(247,239,224,.08); border: 1px solid rgba(247,239,224,.25); border-radius: 12px;
  padding: 10px; color: #f7efe0; font-size: 13px; cursor: pointer; }
.pick:active { transform: scale(.97); }
.pick .sw { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.pick .cost { opacity: .85; font-size: 12px; }

/* touch controls */
#touch-ui { display: none; position: absolute; inset: 0; }
.stick-zone { position: absolute; left: 14px; bottom: 16px; width: 132px; height: 132px; }
.stick-base { position: absolute; left: 0; bottom: 0; width: 118px; height: 118px; border-radius: 50%;
  border: 2px solid rgba(247,239,224,.35); background: rgba(16,28,44,.35); touch-action: none; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(255,210,122,.55); border: 2px solid rgba(247,239,224,.6); }
.look-zone { position: absolute; right: 0; top: 0; width: 55%; height: 70%; }
.tbtn { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255,210,122,.6);
  background: rgba(16,28,44,.6); color: #ffd27a; font-size: 13px; font-weight: 800; line-height: 1.15;
  right: 18px; bottom: 18px; touch-action: none; }
.tbtn:nth-of-type(3) { right: 108px; bottom: 26px; width: 62px; height: 62px; }
.tbtn:nth-of-type(4) { right: 22px; bottom: 108px; width: 58px; height: 58px; }
.tbtn:active { transform: scale(.93); }

/* overlays */
#start, #end { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(26,61,82,.55), rgba(8,14,22,.88)); padding: 16px; }
#start { display: flex; }
.panel { max-width: 560px; background: rgba(14,24,36,.86); border: 1px solid rgba(255,210,122,.4);
  border-radius: 20px; padding: 28px 26px; text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.panel h1 { font-size: clamp(28px, 6vw, 44px); color: #ffd27a; letter-spacing: .5px; }
.panel h2 { font-size: clamp(22px, 5vw, 34px); color: #ffd27a; }
.panel .tag { margin: 8px 0 14px; font-size: 16px; color: #e8dcc0; }
.goal { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #cfd8dd;
  background: rgba(247,239,224,.06); border-radius: 12px; padding: 12px; margin-bottom: 18px; }
.goal b { color: #7fd6c9; }
.small { font-size: 12px; opacity: .7; margin-top: 10px; }
#end-text b { color: #ffd27a; }
.btn { display: inline-block; background: linear-gradient(180deg, #ffd27a, #f0a86b); color: #14232b;
  border: none; border-radius: 999px; padding: 13px 34px; font-size: 17px; font-weight: 800;
  text-decoration: none; cursor: pointer; box-shadow: 0 6px 22px rgba(240,168,107,.35); }
.btn:active { transform: translateY(1px); }
kbd { background: #22394a; border: 1px solid #3d5b6e; border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 7px; font-size: 12px; font-family: inherit; }
@media (max-width: 480px) {
  #prompt { bottom: 24vh; font-size: 13px; }
  #inv { max-width: 70vw; }
  #hud .box { font-size: 13px; padding: 5px 9px; }
}