/* Latte Studio: the game screen (HUD, panels, the result card). The how-to-play pages have
   their own tutorial.css. */
:root{
  --ink:#f4ede4; --ink-dim:rgba(244,237,228,.62); --glass:rgba(24,16,11,.48);
  --line:rgba(244,237,228,.14); --accent:#e8c9a0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#120c08;color:var(--ink);overflow:hidden;
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100vw;height:100vh;cursor:crosshair}
.hud{position:fixed;pointer-events:none;inset:0}
.hud > *{pointer-events:auto}
.brand{position:absolute;left:20px;top:calc(16px + env(safe-area-inset-top));font-size:13px;letter-spacing:.32em;
  color:var(--ink-dim);text-transform:uppercase;pointer-events:none}
.brand b{color:var(--ink);font-weight:600}
.meters{position:absolute;left:20px;top:calc(44px + env(safe-area-inset-top));display:flex;gap:18px;font-size:11px;
  color:var(--ink-dim);pointer-events:none;font-variant-numeric:tabular-nums}
.meters span b{color:var(--ink);font-weight:500;margin-left:6px}
.bar{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;gap:6px;padding:6px;background:var(--glass);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bar button{appearance:none;border:0;background:transparent;color:var(--ink-dim);font:inherit;font-size:13px;
  padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.bar button.on{background:rgba(244,237,228,.92);color:#20150e}
.bar button:hover:not(.on){color:var(--ink)}
.bar .sep{width:1px;background:var(--line);margin:6px 2px}
.tilt{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:row;align-items:flex-end;
  gap:8px;padding:14px 10px;background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tilt label{font-size:10px;letter-spacing:.12em;color:var(--ink-dim)}
.tilt output{font-size:12px;font-variant-numeric:tabular-nums}
.tilt small{font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.tilt input{writing-mode:vertical-lr;direction:rtl;width:28px;height:170px;accent-color:var(--accent);cursor:ns-resize}
.tilt .col{display:flex;flex-direction:column;align-items:center;gap:8px}
/* the steam panel sits on the left: the jug is on the right of the machine */
.tilt.steam{right:auto;left:18px}
.scale{position:absolute;left:20px;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:baseline;gap:10px;
  padding:10px 16px;border-radius:12px;background:#0e0d0c;border:1px solid #2a2622;font-variant-numeric:tabular-nums;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;color:#d9f1ff;box-shadow:inset 0 0 18px rgba(80,170,255,.08)}
.scale span{font-size:13px;opacity:.7} .scale b{font-size:24px;font-weight:500;min-width:72px;text-align:right} .scale i{font-style:normal;opacity:.6}
body.ready .scale{display:none}
.jug{width:18px;height:46px;border:1px solid var(--line);border-radius:3px 3px 6px 6px;position:relative;overflow:hidden;margin-top:6px}
.jugfill{position:absolute;left:0;right:0;bottom:0;background:#f3ece0;height:100%}
.card{position:absolute;left:20px;top:calc(76px + env(safe-area-inset-top));width:240px;padding:14px 16px;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px}
.card h3{margin:0 0 10px;font-size:12px;letter-spacing:.2em;color:var(--ink-dim);font-weight:500}
.card .row{display:flex;justify-content:space-between;color:var(--ink)}
.card input[type=range]{width:100%;accent-color:var(--accent);margin:8px 0 12px}
.card .check{display:flex;gap:8px;align-items:center;color:var(--ink)}
.card .note{margin:10px 0 0;color:var(--ink-dim);font-size:11px;line-height:1.6}
.bar button.brew{background:#c8894d;color:#1b120c;font-weight:600}
.bar button.brew.stop{background:#e9dccb}
body:not(.milk) .stage-milk, body:not(.milk) .tilt:not(.steam){display:none!important}
body:not(.brewing) .stage-machine, body:not(.brewing) .steam{display:none!important}
.bar button.go{background:rgba(232,201,160,.92);color:#20150e;font-weight:600}
.bar button.go[disabled]{opacity:.35;background:transparent;color:var(--ink-dim)}
.bar button.held{background:#f0e6d8;color:#20150e}
body:not(.ready) .setup{display:none}
body.milk .brew, body.done .brew{display:none}
.lift{position:absolute;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));width:76px;height:76px;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);font:inherit;font-size:12px;display:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);touch-action:none}
.lift.on{background:rgba(232,201,160,.9);color:#20150e}
@media (pointer:coarse){ .lift{display:block} .hint .pc{display:none} }
@media (pointer:fine){ .hint .touch{display:none} }
.phase{opacity:0;color:var(--ink)!important}
.hint.phase{top:calc(58px + env(safe-area-inset-top))} /* (under the hint, never behind it) */
.hint{position:absolute;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translateX(-50%);font-size:12px;
  color:var(--ink-dim);background:var(--glass);border:1px solid var(--line);padding:8px 14px;border-radius:999px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;transition:opacity .6s;white-space:nowrap}
.shot{position:fixed;inset:0;display:none;align-items:center;justify-content:flex-start;flex-direction:column;gap:16px;
  background:rgba(10,7,5,.82);backdrop-filter:blur(8px);z-index:5;padding:24px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
/* (centred when it fits, scrolled from the top when it does not: a phone never loses the buttons) */
.shot > :first-child{margin-top:auto} .shot > :last-child{margin-bottom:auto}
.shot.show{display:flex}
.result{display:flex;gap:22px;align-items:center;max-width:min(94vw,1100px)}
.result img{max-width:min(60vw,720px);max-height:70vh;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.eval{min-width:240px;max-width:340px;font-size:13px;line-height:1.7}
.eval .score{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}
.eval .score b{font-size:44px;font-weight:600;letter-spacing:-.02em}
.eval ul{list-style:none;padding:0;margin:0 0 12px}
.eval li{padding:4px 0;border-bottom:1px solid var(--line)}
.eval li.good::before{content:"◎ ";color:#a8d08d} .eval li.warn::before{content:"△ ";color:#e8c9a0} .eval li.bad::before{content:"✕ ";color:#e88f7a}
.eval dl{display:grid;grid-template-columns:auto auto;gap:2px 14px;margin:0;color:var(--ink-dim);font-size:12px;font-variant-numeric:tabular-nums}
.eval dd{margin:0;color:var(--ink);text-align:right}
/* narrower screens: the saucer fills the middle and the jug comes in from the right, so the
   panel moves to the free strip on the left (a little shorter) */
@media (min-width:561px) and (max-width:1100px){
  .tilt{right:auto;left:12px;padding:12px 8px;gap:4px;max-width:170px}
  .tilt input{height:130px;width:24px}
  .tilt label small.kb{display:none!important}
  .tilt small{font-size:9px;white-space:nowrap}
  .tilt .col{gap:6px}
  .tilt.steam{left:12px}
}
@media (max-width:760px){ .result{flex-direction:column} .result img{max-width:92vw;max-height:45vh}
  .card{left:12px;right:12px;width:auto;top:calc(52px + env(safe-area-inset-top));padding:10px 12px;font-size:11px}
  .card h3{margin-bottom:4px} .card input[type=range]{margin:4px 0 8px} .card .note{display:none} }
.shot .row{display:flex;gap:10px}
.shot button{appearance:none;border:1px solid var(--line);background:rgba(244,237,228,.08);color:var(--ink);font:inherit;
  font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer}
.shot button.primary{background:var(--ink);color:#20150e;border-color:transparent}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6;transition:opacity .5s}
.err{max-width:420px;text-align:center;line-height:1.8;letter-spacing:0}
@media (max-width:560px){
  .bar{gap:2px;padding:4px;max-width:calc(100vw - 16px)}
  .bar button{padding:8px 9px;font-size:11.5px}
  .bar .sep{display:none}
  .bar .more-btn{font-size:16px;line-height:1;padding:6px 12px;letter-spacing:.05em}
  .bar .more-menu{position:absolute;right:0;bottom:calc(100% + 8px);display:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:6px;background:var(--glass);border:1px solid var(--line);border-radius:18px;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .bar.open .more-menu{display:flex}
  .bar.open .more-btn{background:rgba(244,237,228,.92);color:#20150e}
  .bar .more-menu button{text-align:left;padding:10px 16px;font-size:13px}
  .hint{top:calc(44px + env(safe-area-inset-top));max-width:calc(100vw - 24px);white-space:normal;text-align:center}
  .hint.phase{top:calc(92px + env(safe-area-inset-top))}
  .tilt{top:auto;bottom:calc(80px + env(safe-area-inset-bottom));right:12px;transform:none;padding:10px 8px;gap:4px}
  .tilt input{height:96px;width:24px}
  .tilt output,.tilt small{font-size:10px}
  .scale{left:auto;right:12px;bottom:auto;top:calc(10px + env(safe-area-inset-top));padding:6px 10px}
  .scale b{font-size:17px;min-width:50px} .scale span{font-size:11px}
  .meters{display:none}
}
.tilt label small.kb { display: block; font-size: 9px; opacity: .55; letter-spacing: .02em; margin-top: 1px; }
@media (pointer: coarse) { .tilt label small.kb { display: none; } }
.tilt button.mini { margin-top: 4px; font: inherit; font-size: 10px; padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.tilt button.mini.on { background: rgba(255,255,255,.85); color: #222; opacity: 1; }