/* V7: same stamped-enamel diner identity, clearer hierarchy and state. Layers over game-v6.css. */
:root{--ketchup:#b63825;--ketchup-hi:#d8502f;--mustard:#e3b257;--paper:#efdcae;--ink:#3a2a1c;--soot:#1f1712;--ok:#6f8f3e;--warn:#c4472b}

/* ---- station prompt: an enamel sign with a key cap, a verb and a where/why line */
#interact{display:flex;align-items:center;gap:12px;min-width:230px;max-width:min(420px,80vw);padding:9px 16px 9px 10px;background:linear-gradient(180deg,#f1d494,#e2bb72);border:1px solid #f6e1b1;border-bottom:3px solid #a8823f;border-radius:3px;color:var(--ink);box-shadow:0 6px 0 #1b120c66,0 12px 28px #0007;text-align:left;cursor:pointer}
#interact kbd{flex:none;display:grid;place-items:center;width:30px;height:30px;font:700 15px Consolas,monospace;color:#f7e8c6;background:var(--soot);border:1px solid #000;border-bottom-width:3px;border-radius:4px}
#interact .verb{display:block;font:700 15px/1.15 Bahnschrift,sans-serif;letter-spacing:.2px}
#interact small{display:block;margin-top:2px;font:10px/1.3 Consolas,monospace;color:#6e5434;letter-spacing:.3px}
#interact .copy{display:flex;flex-direction:column;min-width:0}
#interact:hover{background:linear-gradient(180deg,#f6dda4,#e7c27c)}
#interact.locked{background:linear-gradient(180deg,#3a2a21,#2c1f18);border-color:#7a3b2a;border-bottom-color:#5a2618;color:#f0d9b2}
#interact.locked kbd{background:#5a2a1d;color:#e8b7a1;border-color:#2a120b}
#interact.locked .verb{color:#ffb39a}#interact.locked .verb:before{content:"✕ ";color:var(--ketchup-hi)}
#interact.locked small{color:#c9a98a}
#interact.done{background:linear-gradient(180deg,#d8cfb4,#c4b996);border-bottom-color:#8e8466}#interact.done .verb:before{content:"✓ ";color:var(--ok)}
#interact.enter{animation:v7-rise .22s cubic-bezier(.2,.9,.3,1.3)}
#interact.nudge{animation:v7-nudge .38s}
@keyframes v7-rise{from{translate:0 8px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes v7-nudge{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:2px}}

/* ---- aim reticle: a word under the crosshair tells you what a click will do */
#v7-reticle{position:fixed;left:50%;top:50%;z-index:3;pointer-events:none;transform:translate(-50%,14px);display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity .12s}
#v7-reticle i{display:none}
#v7-reticle span{font:11px Consolas,monospace;padding:4px 8px;border-radius:2px;background:#1d1510d9;color:#f3e3c0;white-space:nowrap;box-shadow:0 2px 0 #0006}
#v7-reticle.grab,#v7-reticle.far,#v7-reticle.blocked,#v7-reticle.holding{opacity:1}
#v7-reticle.grab span{background:#405a26e8;color:#eaf5cf}
#v7-reticle.far span,#v7-reticle.blocked span{background:#5a2418e8;color:#ffd2c2}
#v7-reticle.holding span{background:#2b2018e8;color:var(--mustard)}
body:not(.playing) #v7-reticle,.modal:not([hidden])~#v7-reticle{display:none}
#crosshair{transition:scale .12s,background .12s}
body:has(#v7-reticle.grab) #crosshair{scale:1.8;background:#c9f08a;border-color:#eaffc9}
body:has(#v7-reticle.far) #crosshair,body:has(#v7-reticle.blocked) #crosshair{background:#ff8c6b}

/* ---- toasts carry their meaning in colour and a stamp */
.toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;box-shadow:3px 4px 0 #1a100a66;line-height:1.45}
.toast:before{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 12px Bahnschrift,sans-serif;color:#fff;background:#8a6a3c;content:"i"}
.toast[data-kind=warn]{border-left-color:var(--warn);background:#f3d3b8}.toast[data-kind=warn]:before{content:"!";background:var(--warn)}
.toast[data-kind=ok]{border-left-color:var(--ok);background:#e7e2b3}.toast[data-kind=ok]:before{content:"✓";background:var(--ok)}
.toast.pop{animation:v7-pop .26s cubic-bezier(.2,.9,.3,1.4)}
@keyframes v7-pop{from{opacity:0;translate:0 -6px;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* ---- objective ticket: labelled step track with a stamp on completion */
.ticket{width:226px}
.ticket h2{font-size:19px;margin:10px 0 8px}
.ticket #objective{font:12px/1.5 Bahnschrift,sans-serif;color:#4c3a26;background:#d8c08a66;padding:7px 9px;border-left:3px solid var(--ketchup);margin:0}
.steps{display:grid!important;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:14px;counter-reset:step}
.steps i{position:relative;height:5px;border-radius:1px;background:#bba57299;transition:background .3s}
.steps i:after{position:absolute;top:8px;left:0;right:0;text-align:center;font:7.5px Consolas,monospace;letter-spacing:.3px;color:#8a7350;text-transform:uppercase}
.steps i:nth-child(1):after{content:"idea"}.steps i:nth-child(2):after{content:"prep"}.steps i:nth-child(3):after{content:"cook"}.steps i:nth-child(4):after{content:"plate"}.steps i:nth-child(5):after{content:"serve"}
.steps i.done{background:var(--ketchup)}.steps i.done:after{color:#7a2c1c;font-weight:700}
.steps i.just-done{animation:v7-stamp .9s}
@keyframes v7-stamp{0%{box-shadow:0 0 0 0 #e9a54fcc}40%{box-shadow:0 0 0 6px #e9a54f00;scale:1 2.2}100%{scale:1}}
.ticket #session{margin-top:20px}

/* ---- chef guide: the next station is the loudest thing on the card */
#chef-guide{width:268px;padding:13px 15px 12px;background:linear-gradient(180deg,#2d2016f2,#241912f2);border-left-width:4px}
#guide-title{font-size:15px;line-height:1.25}
#guide-tip{font-size:11.5px;color:#d6c4a0}
.guide-bearing{margin-top:4px;padding-top:8px;border-top:1px dashed #6b5139}
#guide-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e1ad5022;color:var(--mustard);font-size:17px;transition:transform .15s}
#guide-distance{font:11px Consolas,monospace;color:#f0cf8e}

/* ---- dialogue: subtitle stays as a compact transcript, bubbles carry the voice */
.subtitle{bottom:150px;max-width:520px;padding:10px 16px;box-shadow:3px 4px 0 #120b0866}
.subtitle p{font-size:13.5px}
#cook-bubble{position:fixed;z-index:4;pointer-events:none;max-width:200px;padding:7px 11px;transform:translate(-50%,-100%);background:#fbf3df;color:#3a2a1c;border:2px solid #3a2a1c;border-radius:12px 12px 12px 3px;box-shadow:3px 3px 0 #1d140e55;font:italic 600 13px/1.25 Bahnschrift,sans-serif;animation:v7-pop .2s}
#cook-bubble:after{content:"";position:absolute;left:16px;top:100%;border:7px solid transparent;border-top-color:#3a2a1c}
#chef-bubble{animation:v7-pop .22s}

/* ---- panels: printed-paper sheets with clearer actions */
.sheet{background:linear-gradient(180deg,#ecdab0,#e3cd9c);box-shadow:9px 10px 0 #140d0980,0 30px 60px #0008}
.sheet h1{text-shadow:1px 1px 0 #f6e8c6}
.sheet .actions{gap:8px}
.sheet button{padding:10px 14px;border-radius:2px;box-shadow:0 2px 0 #24170e}
.sheet button:hover{transform:translateY(-1px);box-shadow:0 3px 0 #24170e}
.sheet button:active{transform:translateY(1px);box-shadow:0 1px 0 #24170e}
.sheet button:disabled{opacity:.45;transform:none;cursor:not-allowed}
.sheet button.primary{background:linear-gradient(180deg,#c4412a,#a8341f);font-weight:700;letter-spacing:.3px}
.sheet .field{font:11px/1.4 Consolas,monospace;letter-spacing:.3px}
.sheet input,.sheet textarea,.sheet select{padding:10px 11px;font:14px Bahnschrift,sans-serif;background:repeating-linear-gradient(#f4e8c8,#f4e8c8 23px,#e3d1a8 24px)}
.sheet input:focus,.sheet textarea:focus,.sheet select:focus{border-color:var(--ketchup);box-shadow:0 0 0 3px #b6382533;outline:none}
.sheet .message:not(:empty){padding:8px 10px;background:#b6382514;border-left:3px solid var(--ketchup);font:12px Consolas,monospace}
.modal.activity .sheet{width:320px;border-top-color:var(--mustard)}
.modal.activity .bar{height:14px;border:1px solid #a48a5a;background:#c4ab76}
.modal.activity .bar span{background:repeating-linear-gradient(-45deg,#b63825 0 10px,#d0502f 10px 20px);background-size:28px 28px;animation:v7-stripes .6s linear infinite;transition:width .35s cubic-bezier(.2,.8,.3,1)}
@keyframes v7-stripes{to{background-position:28px 0}}
.modal.activity .score{font:44px Impact,sans-serif;letter-spacing:1px}

/* ---- buttons in the HUD: real pressed/active states */
.tools button,.utility-tools button,.grip-button{transition:background .15s,transform .1s,box-shadow .1s}
.tools button:active,.utility-tools button:active,.grip-button:active{transform:translateY(2px);box-shadow:0 0 0 #0000}
.utility-tools button[aria-pressed=true],.utility-tools .speaking{background:#5c6539;border-color:#a6b46a}

@media(prefers-reduced-motion:reduce){#interact.enter,#interact.nudge,.toast.pop,.steps i.just-done,#cook-bubble,#chef-bubble,.modal.activity .bar span{animation:none}}
@media(max-width:1100px){.ticket{width:196px}#chef-guide{width:240px}}
@media(max-width:780px){#interact{min-width:0;max-width:86vw;padding:7px 12px 7px 8px}#interact .verb{font-size:13px}#interact kbd{width:26px;height:26px}.ticket{width:150px}.ticket #objective{font-size:10px;padding:5px 7px}.steps i:after{font-size:6px}#cook-bubble{font-size:11px}}
@media(max-height:700px){.subtitle{bottom:132px}#chef-guide{bottom:100px}.ticket{top:108px}}
/* Toasts drop below an open panel's heading instead of covering it. */
body:has(.modal:not([hidden])) .toast{top:auto;bottom:22px}
@media(max-width:780px){#chef-guide{top:118px;bottom:auto;right:12px;width:178px;padding:9px 10px}#guide-tip{display:none}#guide-title{font-size:12px}.guide-bearing{padding-top:6px}.ticket{left:12px;width:150px}.subtitle{bottom:150px}#interact{bottom:100px}}