/* Page and 3D view. The HUD and menus live in hud.css. */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a211c;
  font: 14px "Fredoka", system-ui, sans-serif;
  color: #2b1d14;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 4px solid #ffd23a;
  outline-offset: 3px;
}
#viewport {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: 0;
  touch-action: none;
}
/* Color grade applies to the 3D scene; the HUD keeps its own colors. */
#game {filter:saturate(1.08) contrast(1.10);}

/* Bubbles pinned to points of the 3D scene (box pile, couriers). */
.packaging-guide{position:absolute;z-index:12;pointer-events:none;transform:translate(-50%,-100%);}
.packaging-guide[hidden]{display:none;}
.packaging-guide-pop{width:58px;height:58px;border-radius:50%;background:#fff;border:3px solid #2b1d14;display:grid;place-items:center;box-shadow:0 4px 0 #2b1d14;animation:packaging-guide-bob 1s ease-in-out infinite;}
.packaging-guide-pop::after{content:'';position:absolute;bottom:-10px;left:calc(50% - 8px);border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #2b1d14;}
.packaging-guide-pop img{width:76%;height:76%;object-fit:contain;}
@keyframes packaging-guide-bob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.07);}}
@media(prefers-reduced-motion:reduce){.packaging-guide-pop{animation:none;}}
.courier-order-hint{position:absolute;pointer-events:none;transform:translate(-50%,-100%);}
.courier-order-hint[hidden]{display:none;}
.courier-order-hint .packaging-guide-pop{width:46px;height:46px;animation-duration:1.4s;}
.courier-order-hint .hud-icon{width:75%;height:75%;overflow:hidden;}
.courier-kappa .hud-icon{filter:hue-rotate(65deg);}

/* ---- Phones and tablets (#viewport.mobile, set by src/app.js) ---- */
.mobile, .mobile canvas {touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
body:has(.mobile){overscroll-behavior:none;position:fixed;inset:0;}
.touch-controls{position:absolute;inset:0;z-index:25;pointer-events:none;}
.touch-controls[hidden]{display:none;}
/* The joystick can start anywhere on the lower left; it rests at the corner. */
.stick-zone{position:absolute;left:0;bottom:0;width:42%;height:62%;pointer-events:auto;touch-action:none;}
.stick-base{position:absolute;left:calc(env(safe-area-inset-left) + 92px);top:calc(100% - 92px);width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.45);box-shadow:inset 0 0 0 2px rgba(43,29,20,.18);opacity:.6;transition:opacity .15s;}
.stick-base.active{opacity:1;}
.stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(255,248,232,.55);border:3px solid rgba(43,29,20,.35);box-shadow:0 3px 8px rgba(0,0,0,.25);}
.touch-buttons{position:absolute;right:calc(env(safe-area-inset-right) + 16px);bottom:14px;width:210px;height:190px;pointer-events:none;}
.touch-btn{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:50%;background:rgba(43,29,20,.28);border:3px solid rgba(255,255,255,.6);color:#fff;font:700 11px 'Fredoka',system-ui,sans-serif;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;padding:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.touch-btn img{width:50%;height:44%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));pointer-events:none;-webkit-user-drag:none;}
.touch-btn.down{background:rgba(255,248,232,.38);transform:scale(.93);}
.touch-btn.use{right:0;bottom:8px;width:92px;height:92px;border-color:rgba(255,200,107,.85);}
.touch-btn.work{right:100px;bottom:0;width:74px;height:74px;border-color:rgba(143,227,243,.85);}
.touch-btn.dash{right:22px;bottom:110px;width:64px;height:64px;}
/* Sideways only: a phone held upright gets a prompt to turn. */
#rotate{display:none;}
@media (orientation:portrait){
 .mobile #rotate{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle,rgba(255,255,255,.18) 6px,transparent 7px) 0 0/40px 40px,#7cc243;color:#fff;font:600 16px 'Fredoka',system-ui,sans-serif;text-align:center;padding:24px;}
 .mobile #rotate b{font:400 34px 'Lilita One',sans-serif;-webkit-text-stroke:7px #2b1d14;paint-order:stroke fill;}
 .mobile #rotate span{background:#fff8e8;color:#2b1d14;border:3px solid #2b1d14;border-radius:14px;padding:6px 14px;}
}
.rotate-phone{width:54px;height:90px;border:5px solid #2b1d14;border-radius:12px;background:#fff8e8;animation:rotate-phone 1.8s ease-in-out infinite;}
@keyframes rotate-phone{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

/* Name bubbles over the chefs' heads (src/crew-visuals.js), in each seat's color. */
.chef-tag{position:absolute;z-index:13;pointer-events:none;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;padding:3px 10px 4px;border-radius:999px;background:var(--seat,#ff8a12);border:3px solid #2b1d14;box-shadow:0 3px 0 #2b1d14;font:700 13px 'Fredoka',system-ui,sans-serif;color:#fff;white-space:nowrap;text-shadow:0 1px 0 #2b1d14,1px 0 0 #2b1d14,-1px 0 0 #2b1d14,0 -1px 0 #2b1d14}
.chef-tag::after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #2b1d14}
.chef-tag[hidden]{display:none}
.chef-tag-you{display:none;font-size:10px;font-weight:600;background:#fff8e8;color:#2b1d14;text-shadow:none;border-radius:999px;padding:0 6px}
.chef-tag.me .chef-tag-you{display:inline}
.mobile .chef-tag{font-size:12px;padding:2px 8px 3px}