/* Latte's quiet ceramic, linen and evergreen palette. */
body[data-game='latte'] {--accent:#315e56; --ink:#493e35; --paper:#fffaf1; background:#eee5d8; color:var(--ink)}
body[data-game='latte'] .mini-shell {gap:4px; background:linear-gradient(#fffaf3,#f0e8dc); padding-top:1px}
body[data-game='latte'] .companion {min-height:48px}
body[data-game='latte'] .companion::before {background:radial-gradient(circle at 35% 25%,#fff9e8,#e5d6bd); box-shadow:inset 0 0 0 1px #b4946550}
body[data-game='latte'] .cast-name {color:#685c4e}
body[data-game='latte'] .speech {color:#4e493e; background:linear-gradient(120deg,#fffef9,#fcf4e7); border-color:#d9c7ad; border-radius:4px 16px 16px; box-shadow:0 3px 8px #58462f08}
body[data-game='latte'] .companion[data-reaction='good'] .speech,
body[data-game='latte'] .companion[data-reaction='end'] .speech {background:#eef2e7; border-color:#7d9a87}
body[data-game='latte'] .mini-hud {min-height:24px; color:#4a6359}
body[data-game='latte'] .mini-hud > span:first-child {background:#e6eade; color:#315e56; box-shadow:none}
body[data-game='latte'] .icon-button {color:#315e56; border-color:#d9d5c8; background:#fcfaf3}
body[data-game='latte'] .stage {border-radius:22px; background:#d7bda0; box-shadow:0 0 0 1px #ad8b6259,0 5px 12px #65513d13}
body[data-game='latte'] .overlay:not([data-presentation='result']) {background:linear-gradient(145deg,#faf7eff2,#f1ece0ec); backdrop-filter:blur(3px)}
body[data-game='latte'] .panel-icon {background:linear-gradient(135deg,#fffdf7,#e7e9dd); border-color:#fffdf8; box-shadow:0 4px 12px #65513d12; border-radius:50%; transform:none}
body[data-game='latte'] .panel-icon img {transform:none}
body[data-game='latte'] .panel-detail {color:#685c4e}
body[data-game='latte'] .cast-options button {background:#e6e5d9; border-radius:17px 17px 12px 12px}
body[data-game='latte'] .cast-options button[aria-pressed='true'] {border-color:#52796a; background:#f4f8ec; box-shadow:0 4px 0 #52796a20,0 0 0 3px #fffdf6}
body[data-game='latte'] .cast-options button[aria-pressed='true']::after {background:#315e56}
body[data-game='latte'] .go {background:linear-gradient(145deg,#53786a,#315e56); box-shadow:0 4px 0 #25483f,0 8px 15px #315e561a; border-color:#ffffff60}
body[data-game='latte'] .go:active {box-shadow:0 1px 0 #25483f}
body[data-game='latte'] .overlay[data-presentation='result'] {border-color:#c4cebd; background:#f7f8ef; padding:7px 10px}
body[data-game='latte'] .overlay[data-presentation='result'] .panel-detail {color:#426759}
body[data-game='latte'] .cast-toggle {background:#e7ecdf; color:#315e56; border-color:#cdd7c5}
@media (max-width:350px) {body[data-game='latte'] .mini-shell {padding-left:5px; padding-right:5px} body[data-game='latte'] .cast-options {gap:5px}}
@media (prefers-reduced-motion:reduce) {body[data-game='latte'] .overlay {backdrop-filter:none}}

/* Time pressure uses color and a border, without flashing. */
body[data-game='latte'] .clock {color:#544635; border-color:#d9c7ad; background:#fffaf1}
body[data-game='latte'] .clock[data-urgency='soon'] {color:#883b2b; border-color:#bc7861; background:#fff0df; box-shadow:inset 3px 0 #bc7861}
body[data-game='latte'] .icon-button {min-width:44px; min-height:44px}

/* A cafe menu on arrival; a small serving receipt beside the finished cup. */
body[data-game='latte'] .overlay:not([data-presentation='result']) {
    background:linear-gradient(145deg,#fffaf1f5,#f1e6d4e8);
    box-shadow:inset 0 0 0 7px #fffaf133,inset 0 0 0 8px #b3946540;
}
body[data-game='latte'] .overlay h2 {font-family:'Hiragino Mincho ProN','Yu Mincho',serif; letter-spacing:.03em; color:#544132}
body[data-game='latte'] .panel-icon {border:1px solid #b3946580; outline:3px solid #fffaf180; outline-offset:3px}
body[data-game='latte'] .overlay[data-scene='paused'] .panel-icon {display:none}
body[data-game='latte'] .overlay[data-presentation='result'] {border-left:3px solid #a78a61; background:linear-gradient(100deg,#fffaf0,#f7f4e9)}
body[data-game='latte'] .overlay[data-scene='complete'] {border-color:#b59960; box-shadow:0 2px 8px #97764115}
body[data-game='latte'] .overlay[data-scene='complete'] h2 {color:#315e56}
body[data-game='latte'] .overlay[data-scene='timeout'] {border-left-color:#9d7962}
body[data-game='latte'] .overlay[data-presentation='result'] .panel-detail {max-width:125px; font-variant-numeric:tabular-nums}

body[data-game='latte'] .score-unit {font-size:11px; margin-left:-4px}
body[data-game='latte'] .go {border-radius:18px; min-width:60px; font-size:26px}
body[data-game='latte'] button:focus-visible {outline:3px solid #315e56; outline-offset:3px}
body[data-game='latte'] .cast-options button {transition:background .16s,border-color .16s}
@media (max-height:620px) {
    body[data-game='latte'] .overlay {padding:10px}
    body[data-game='latte'] .cast-options {margin:6px 0 10px}
    body[data-game='latte'] .overlay h2 {font-size:19px}
}

/* Keep the same success artwork, without floating hearts or companion motion. */
@media (prefers-reduced-motion:reduce) {
    body[data-game='latte'] .companion > img,
    body[data-game='latte'] .cast-options button,
    body[data-game='latte'] .go {animation:none; transition:none}
}

/* Choices belong to start/results; tracing keeps the full board. */
body[data-game='latte'] .pattern-options {display:flex; flex:none; justify-content:center; gap:6px; margin:3px 0 7px}
body[data-game='latte'] .pattern-options button {min-width:48px; min-height:44px; border:1px solid #c9b793; border-radius:12px; background:#fffaf0; color:#544132; font-size:20px; padding:4px 10px}
body[data-game='latte'] .pattern-options button[aria-pressed='true'] {border:2px solid #315e56; background:#e7ecdf; color:#315e56; box-shadow:inset 0 0 0 2px #fffaf0}
body[data-game='latte'] .next-art {min-height:44px; border:1px solid #52796a; border-radius:12px; padding:5px 10px; background:#e7ecdf; color:#315e56; font-size:12px}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options {order:3; width:100%; margin:0}
body[data-game='latte'] .overlay[data-presentation='result'] .next-art {order:2}
body[data-game='latte'] .overlay[data-presentation='result'] h2 {font-size:15px}

/* A small coffee menu: the same outlines as the playable orders, with stamps. */
body[data-game='latte'] .pattern-options {width:100%; max-width:320px; gap:5px}
body[data-game='latte'] .pattern-options button {display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; padding:5px 2px; font-size:11px; gap:2px; border-radius:14px; box-shadow:0 2px 0 #84624312}
body[data-game='latte'] .pattern-options canvas {width:58px; height:53px; max-width:100%; object-fit:contain; pointer-events:none}
body[data-game='latte'] .pattern-stars {font-size:11px; letter-spacing:1px; color:#87622b; line-height:1.1}
body[data-game='latte'] .collection-note {flex:none; margin:0 0 6px; font-size:10px; line-height:1.4; color:#685c4e}
body[data-game='latte'] .cup-options {display:flex; flex:none; justify-content:center; gap:6px; margin:0 0 6px}
body[data-game='latte'] .cup-options button {min-height:44px; padding:3px 9px; min-width:68px; border:1px solid #b7a58b; border-radius:10px; font-size:10px; color:#493e35}
body[data-game='latte'] .cup-options button[aria-pressed='true'] {border:2px solid #315e56; box-shadow:inset 0 0 0 2px #fffaf1}
body[data-game='latte'] .cup-options button:disabled {opacity:.55; cursor:default}
body[data-game='latte'] .rating-note {font-size:11px; color:#765628; line-height:1.4; margin:0; flex:none}
body[data-game='latte'] .overlay[data-presentation='result'] {gap:5px 7px}
body[data-game='latte'] .overlay[data-presentation='result'] .rating-note {order:1; width:100%}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options {order:3; max-width:none}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options button {flex-direction:row; justify-content:center; min-height:44px; flex-wrap:wrap; padding:3px 1px; gap:1px 3px; font-size:10px}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options canvas {width:27px; height:25px}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-stars {width:100%; font-size:9px}
body[data-game='latte'] .overlay[data-presentation='result'] .collection-note {order:4; width:100%; margin:0}
body[data-game='latte'] .overlay[data-presentation='result'] .cup-options {order:5; width:100%; margin:0}
body[data-game='latte'] .overlay[data-presentation='result'] .cup-options button {flex:1; min-width:0; max-width:120px}
body[data-game='latte'] .overlay[data-scene='ready'] .panel-icon {display:none}
body[data-game='latte'] .overlay[data-scene='ready'] h2 {font-size:19px}
body[data-game='latte'] .overlay[data-scene='ready'] .cast-options {margin:6px 0 9px}
@media (max-height:620px) {
    body[data-game='latte'] .overlay[data-scene='ready'] h2 {font-size:17px}
    body[data-game='latte'] .pattern-options canvas {width:40px; height:37px}
    body[data-game='latte'] .pattern-options button {gap:1px}
    body[data-game='latte'] .overlay .panel-detail {font-size:11px; margin:5px 0}
}

/* More orders stay in a compact scrolling menu; tracing retains the board. */
body[data-game='latte'] .pattern-options {flex-wrap:wrap; max-height:156px; overflow-y:auto; align-content:flex-start; padding:2px}
body[data-game='latte'] .pattern-options button {flex:0 0 calc(25% - 4px)}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options {max-height:108px}
body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options button {flex-basis:calc(25% - 4px)}
@media (max-height:620px) {
    body[data-game='latte'] .pattern-options {max-height:118px}
    body[data-game='latte'] .overlay[data-presentation='result'] .pattern-options {max-height:88px}
}

/* Compact choices keep the finished cup above its serving receipt. */
body[data-game='latte'] .art-choices {display:flex; flex-direction:column; align-items:center; width:100%; flex:none; min-width:0}
body[data-game='latte'] .choices-toggle {order:3; min-height:44px; padding:6px 10px; border:1px solid #b7a58b; border-radius:12px; color:#315e56; background:#fffaf0; font-size:12px}
body[data-game='latte'] .overlay[data-presentation='result'] .art-choices {order:4; max-height:210px; overflow-y:auto; overscroll-behavior:contain}
body[data-game='latte'] .cup-options {width:100%; max-width:320px; align-items:stretch}
body[data-game='latte'] .cup-options button {display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:#fffaf0}
body[data-game='latte'] .cup-options canvas {width:56px; height:35px; max-width:100%; object-fit:contain; pointer-events:none}
body[data-game='latte'] .cup-status {font-size:10px; min-height:14px}
body[data-game='latte'] .cup-options button:disabled {opacity:.75}
body[data-game='latte'] .go,
body[data-game='latte'] .overlay[data-presentation='result'] .go {width:auto; min-width:80px; min-height:44px; height:44px; padding:5px 12px; font-size:14px}
body[data-game='latte'] .overlay:not([data-presentation='result']) .go {position:sticky; bottom:0; z-index:1}
@media (max-height:620px) {
    body[data-game='latte'] .overlay[data-presentation='result'] .art-choices {max-height:160px}
    body[data-game='latte'] .cup-options canvas {width:40px; height:25px}
}