:root { --cream:#fff4e4; --paper:#f7e8d0; --ink:#2e1c16; --ink2:#6a5040; --wine:#7a1f2e; --wine2:#a8323f; --gold:#e3b04b; --brass:#c9902a; --teal:#2f7f7a; --rose:#d9607a; --shadow:0 8px 28px rgba(20,8,4,.45); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:#140a08; overflow:hidden; font-family:"Trebuchet MS", "Segoe UI", system-ui, sans-serif; color:var(--ink); -webkit-tap-highlight-color:transparent; }
#wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#game { position:relative; width:1280px; height:720px; flex:none; transform-origin:center center; overflow:hidden; overflow:clip; background:#1e100c; user-select:none; -webkit-user-select:none; }
.hidden { display:none !important; }
.bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .6s; }
.bg.on { opacity:1; }
#charLayer { position:absolute; inset:0; pointer-events:none; }
#charImg { position:absolute; left:50%; bottom:0; height:640px; transform:translateX(-50%); opacity:0; transition:opacity .35s; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
#charImg.on { opacity:1; }
#charImg.enter { animation:enter .45s ease-out; }
#charImg.bump { animation:bump .3s ease-out; }
@keyframes enter { from { transform:translate(-50%, 24px); opacity:0; } to { transform:translate(-50%, 0); opacity:1; } }
@keyframes bump { 40% { transform:translate(-50%, -8px); } }
#game[data-scene="bar"] #charImg, #game[data-scene="closed"] #charImg { bottom:20px; }
#fg { position:absolute; left:0; top:0; width:1280px; height:720px; pointer-events:none; opacity:0; transition:opacity .4s; }
#fg.on { opacity:1; }
button { font-family:inherit; font-size:16px; font-weight:bold; color:var(--ink); background:linear-gradient(#fff8ec,#efdcbf); border:2px solid #b98a5a; border-radius:12px; padding:8px 14px; cursor:pointer; box-shadow:0 3px 0 #8a5a30; transition:transform .06s, filter .1s; }
button:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #8a5a30; }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:linear-gradient(#c8404f,#8a1f2e); color:#fff3e4; border-color:#5a0e18; box-shadow:0 3px 0 #4a0a12; }
button.big { font-size:20px; padding:12px 20px; }
button.sel { outline:3px solid var(--gold); background:linear-gradient(#fff2cf,#f5d995); }
/* HUD */
#hud { position:absolute; top:10px; left:10px; right:10px; display:flex; gap:8px; z-index:30; pointer-events:none; }
.hud-chip { background:rgba(30,14,10,.78); color:var(--cream); border:1.5px solid rgba(227,176,75,.6); border-radius:12px; padding:5px 12px; font-size:15px; font-weight:bold; }
.hud-chip.coin::before, .price::before { content:""; display:inline-block; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff2b0, var(--gold) 55%, #a8741b); margin-right:6px; vertical-align:-1px; }
.hud-btn { pointer-events:auto; padding:4px 12px; font-size:14px; }
#hudLog { margin-left:auto; }
/* VN */
#vn { position:absolute; left:110px; right:110px; bottom:16px; height:172px; background:linear-gradient(rgba(36,16,14,.94),rgba(24,10,10,.96)); border:2px solid rgba(227,176,75,.75); border-radius:20px; box-shadow:var(--shadow); padding:30px 34px 16px; z-index:20; cursor:pointer; color:var(--cream); }
#vnName { position:absolute; top:-18px; left:28px; background:var(--wine2); color:#fff; font-weight:bold; font-size:19px; padding:5px 18px; border-radius:12px; border:2px solid rgba(255,240,210,.8); font-family:Georgia, serif; text-shadow:0 1px 2px rgba(0,0,0,.5); }
#vnText { font-size:21px; line-height:1.45; white-space:pre-wrap; }
#vnText.nar { font-style:italic; color:#f2dcc0; }
#vnText.me { color:#bfe3ff; }
#vnNext { position:absolute; right:22px; bottom:12px; color:var(--gold); opacity:0; animation:bob 1s infinite; }
#vnNext.on { opacity:1; }
@keyframes bob { 50% { transform:translateY(4px); } }
#vnCtrl { position:absolute; right:16px; top:-16px; display:flex; gap:6px; }
#vnCtrl button { font-size:14px; padding:4px 13px; border-radius:9px; }
#vnCtrl button.on { background:linear-gradient(#ffe7a6,#e3b04b); }
#choices { position:absolute; left:50%; transform:translateX(-50%); bottom:204px; width:760px; display:flex; flex-direction:column; gap:9px; z-index:22; }
#choices button { text-align:left; font-size:18px; padding:11px 18px; border-radius:16px; background:linear-gradient(rgba(255,248,236,.97),rgba(240,222,192,.97)); display:flex; align-items:center; gap:10px; }
#choices button .k { flex:none; width:26px; height:26px; line-height:24px; text-align:center; border-radius:50%; background:var(--wine2); color:#fff; font-size:14px; }
#choices button .tag { flex:none; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:8px; background:#e9d6b4; color:#6a4a2a; }
#choices .k-listen .tag { background:#d7ecf0; color:#1f5a6a; } #choices .k-advise .tag { background:#e2efd2; color:#3a6a2a; } #choices .k-joke .tag { background:#fbe3c0; color:#8a5216; } #choices .k-quiet .tag { background:#e6e0ef; color:#4a3a6a; }
#choices .k-romance .tag { background:#f8d2dc; color:#a0283f; } #choices .k-friend .tag { background:#d9ecdf; color:#2a6a4a; }
/* screens */
#screen { position:absolute; inset:0; z-index:25; }
.panel { position:absolute; background:linear-gradient(rgba(255,247,234,.97), rgba(244,228,202,.97)); border:3px solid var(--brass); border-radius:22px; box-shadow:var(--shadow); padding:20px 24px; }
.panel h2 { margin:0 0 6px; font-family:Georgia, "Palatino Linotype", serif; color:var(--wine); font-size:28px; }
.panel h3 { margin:8px 0 5px; font-family:Georgia, serif; color:var(--wine); font-size:16px; }
.sub { color:var(--ink2); font-size:15px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.scroll { overflow-y:auto; }
.scroll::-webkit-scrollbar { width:10px; } .scroll::-webkit-scrollbar-thumb { background:var(--brass); border-radius:6px; }
.note { background:#fffdf6; border-left:4px solid var(--gold); border-radius:6px; padding:7px 10px; margin:8px 0; font-size:15px; line-height:1.35; }
.note.warn { border-left-color:var(--rose); }
.pill { display:inline-block; font-size:12px; font-weight:bold; padding:2px 8px; border-radius:10px; background:#efe0c4; color:var(--wine); margin-left:6px; }
.pill.zero { background:#d3eedd; color:#1f6a3a; }
/* title */
.title-logo { position:absolute; left:70px; top:64px; color:#fff1e0; text-shadow:0 3px 0 #6a1424, 0 6px 26px rgba(255,80,120,.55); }
.title-logo .t1 { font-family:Georgia, "Palatino Linotype", serif; font-size:92px; font-weight:bold; letter-spacing:1px; line-height:1; }
.title-logo .t2 { font-family:Georgia, serif; font-size:28px; margin-top:8px; font-style:italic; color:#ffd7c0; }
.title-menu { position:absolute; left:80px; top:262px; display:flex; flex-direction:column; gap:12px; width:260px; }
.title-menu button { font-size:20px; padding:11px 18px; text-align:left; }
.title-foot { position:absolute; right:18px; bottom:12px; color:rgba(255,240,226,.8); font-size:13px; text-shadow:0 1px 3px #000; }
.badge-sfw { position:absolute; right:18px; top:16px; background:rgba(255,244,228,.92); border-radius:12px; padding:6px 12px; font-size:13px; color:var(--wine); font-weight:bold; border:2px solid var(--gold); }
.title-cast { position:absolute; right:20px; bottom:0; width:760px; height:520px; pointer-events:none; }
.title-cast .tc { position:absolute; bottom:0; height:430px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.tc0 { right:300px; height:400px !important; } .tc1 { right:120px; height:470px !important; } .tc2 { right:-40px; height:410px !important; }
.hint-audio { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); color:var(--cream); font-size:14px; background:rgba(30,14,10,.65); padding:5px 14px; border-radius:12px; }
/* night card */
.nightcard-wrap { background:rgba(10,4,4,.55); display:flex; align-items:center; justify-content:center; }
.nightcard { text-align:center; color:#fff0dc; animation:fadeup 1.6s ease-out forwards; }
.nc1 { font-family:Georgia, serif; font-size:84px; font-weight:bold; text-shadow:0 4px 30px rgba(255,120,90,.7); }
.nc2 { font-size:22px; font-style:italic; color:#ffd2b0; }
@keyframes fadeup { 0% { opacity:0; transform:translateY(12px); } 20%,80% { opacity:1; transform:none; } 100% { opacity:0; } }
/* hub */
.hub { left:300px; top:110px; width:680px; }
.hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.hub-grid .big { grid-column:span 2; }
.market { left:120px; top:58px; width:1040px; height:648px; display:flex; flex-direction:column; }
.marketwrap .market { left:40px; width:820px; }
.market > .sub { margin-bottom:8px; }
.market .body { flex:1; min-height:0; }
.coins { font-size:20px; font-weight:bold; }
.tabs { display:flex; gap:8px; margin:8px 0 10px; }
.items { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-right:6px; }
.item { background:rgba(255,255,255,.65); border:2px solid #e2c9a3; border-radius:14px; padding:10px; text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.item.owned { opacity:.75; }
.item .nm { font-weight:bold; font-size:15px; }
.item .ds { font-size:12.5px; color:var(--ink2); flex:1; }
.item .own { position:absolute; top:6px; right:8px; font-size:12px; background:#efe0c4; border-radius:8px; padding:1px 7px; }
.item .gl { width:72px; height:72px; background:#3a1a16; border-radius:12px; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:1.5px solid rgba(0,0,0,.35); margin-right:5px; vertical-align:-1px; }
.dot.big { width:30px; height:30px; margin:0; }
.marketwrap #charImg { }
/* cards (regulars) */
.cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; padding-right:6px; }
.card { background:rgba(255,255,255,.6); border:2px solid #e2c9a3; border-radius:16px; padding:10px; display:flex; gap:12px; }
.card.locked { opacity:.55; }
.card .nm { font-weight:bold; font-size:17px; font-family:Georgia, serif; }
.card .meta { font-size:13px; color:var(--ink2); }
.card .bio { margin:3px 0; }
.face { width:84px; height:84px; border-radius:50%; background-color:#d9c0a0; background-repeat:no-repeat; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); flex:none; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:bold; color:#fff; }
.face.lg { width:120px; height:120px; }
.face.walk { background:#6a4a3a; }
.hearts { color:var(--rose); letter-spacing:1px; font-size:16px; }
/* recipe book */
.rbook { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:520px; padding-right:6px; }
.market .rbook { max-height:none; flex:1; }
.rcard { display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.65); border:2px solid #e2c9a3; border-radius:14px; padding:8px; }
.rcard.miss { opacity:.7; }
.rcard .gl { width:64px; height:64px; background:#3a1a16; border-radius:10px; flex:none; }
.rc-body { flex:1; } .rc-body .nm { font-weight:bold; }
.rc-ing { font-size:13px; color:var(--ink2); } .rc-miss { font-size:12px; color:#a0283f; }
.rc-tags .chip { font-size:11px; padding:1px 6px; }
/* mixing */
.mix .panel { padding:14px 16px; }
.mix-order { left:12px; top:52px; width:300px; bottom:12px; display:flex; flex-direction:column; gap:10px; }
.mix-order .nm { font-weight:bold; font-size:20px; font-family:Georgia, serif; }
.mix-order .face { width:76px; height:76px; }
.quote { font-size:17px; font-style:italic; background:#fffdf6; border-radius:12px; padding:10px 12px; border-left:4px solid var(--wine2); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-block; font-size:13px; font-weight:bold; padding:3px 10px; border-radius:12px; background:#efe0c4; color:var(--ink2); }
.chip.yes { background:#dbeccb; color:#2f5a1f; } .chip.no { background:#f6d6d0; color:#8a2a1a; } .chip.zero { background:#cfeee0; color:#0f5a3a; border:2px solid #2f9a6a; } .chip.rec { background:#f6e0b0; color:#6a3a0a; font-size:15px; }
.likes { font-size:13.5px; color:var(--ink2); }
.mix-order .help { font-size:12.5px; color:var(--ink2); margin-top:auto; line-height:1.35; }
.mix-center { left:324px; top:52px; width:400px; bottom:12px; display:flex; flex-direction:column; align-items:center; gap:4px; background:linear-gradient(#2c1410,#1c0c0a); color:var(--cream); border-color:#6a3a1a; }
#glassCv { width:300px; height:290px; }
.mixname { font-size:17px; color:#ffe2b0; min-height:22px; text-align:center; }
.mixsel { font-size:13px; color:#d9c0a0; min-height:18px; text-align:center; }
.mix-center.pouring .flavor { visibility:hidden; }
#hud .hud-chip:empty { display:none; }
.flavor { width:100%; display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.fl-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.fl-row.want .fl-k { color:#bfe8a0; font-weight:bold; } .fl-row.avoid .fl-k { color:#ffb0a0; font-weight:bold; }
.fl-row.bad { color:#ffb0a0; font-weight:bold; justify-content:center; } .fl-row.okz { color:#a8e8c0; justify-content:center; }
.fl-k { width:104px; text-align:right; }
.fl-bar { flex:1; height:10px; background:rgba(255,255,255,.12); border-radius:6px; position:relative; overflow:visible; }
.fl-bar > div { height:100%; border-radius:6px; background:linear-gradient(90deg,#e3b04b,#f07a4a); transition:width .2s; }
.fl-bar .mk { position:absolute; top:-3px; width:3px; height:16px; background:#bfe8a0; border-radius:2px; }
.fl-bar .mk.no { background:#ff9a8a; }
.fl-t { width:14px; color:var(--gold); }
.mix-right { left:736px; top:52px; right:12px; bottom:12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.mix-right.dim2 { opacity:.5; pointer-events:none; }
.mixsec h3 { margin:4px 0 4px; font-size:15px; }
.ing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.ing-grid.small { grid-template-columns:repeat(4,1fr); }
.ing-grid.three { grid-template-columns:repeat(3,1fr); }
.ing { font-size:13px; padding:5px 6px; border-radius:9px; text-align:left; box-shadow:0 2px 0 #8a5a30; line-height:1.15; position:relative; }
.ing.abv { }
.ing small { display:block; font-size:10.5px; color:var(--ink2); font-weight:normal; }
.ing .stk { position:absolute; right:5px; top:5px; display:inline; font-size:10.5px; color:#8a6a4a; }
.ing.meth { text-align:center; font-size:15px; }
.mixbtns { margin-top:auto; padding-top:8px; justify-content:flex-end; }
#pourBtn { font-size:18px; padding:10px 22px; }
.pourbox { position:absolute; left:16px; right:16px; bottom:16px; background:rgba(20,8,6,.92); border:2px solid var(--gold); border-radius:16px; padding:12px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.pour-t { font-weight:bold; color:#ffe2b0; }
.pourbox .sub { color:#d9c0a0; font-size:13px; }
#holdPour { width:240px; touch-action:none; }
.mixresult { position:absolute; top:110px; left:50%; transform:translateX(-50%); background:rgba(255,248,236,.97); color:var(--ink); border-radius:16px; padding:12px 26px; text-align:center; border:3px solid var(--gold); animation:pop .3s ease-out; min-width:240px; }
.mixresult .big { font-family:Georgia, serif; font-size:34px; font-weight:bold; }
.q-perfect .big { color:#c98a12; } .q-good .big { color:#2f7a3a; } .q-ok .big { color:#3a5a8a; } .q-bad .big, .q-forbidden .big { color:#a0283f; }
@keyframes pop { from { transform:translateX(-50%) scale(.7); opacity:0; } }
/* summary */
.summary { left:250px; top:80px; width:780px; height:560px; display:flex; flex-direction:column; }
.summary .body { flex:1; min-height:0; }
.srow { display:grid; grid-template-columns:150px 1fr 140px 70px 70px; gap:8px; padding:8px 10px; border-bottom:1px solid #e2c9a3; font-size:16px; align-items:center; }
.srow .sq { font-weight:bold; } .srow.q-perfect .sq { color:#c98a12; } .srow.q-good .sq { color:#2f7a3a; } .srow.q-bad .sq, .srow.q-forbidden .sq { color:#a0283f; }
.sa.up { color:var(--rose); font-weight:bold; } .sa.dn { color:#6a5a5a; }
.total { justify-content:flex-end; font-size:18px; font-weight:bold; margin:10px 0; gap:16px; }
/* endings */
.endwrap { background:rgba(10,4,4,.35); }
.ending { left:170px; top:150px; width:940px; display:flex; gap:24px; align-items:flex-start; }
.ending .eb { flex:1; } .ending p { font-size:19px; line-height:1.5; margin:6px 0 14px; }
.barend { display:block; left:220px; width:840px; }
.etag { display:inline-block; font-weight:bold; font-size:13px; text-transform:uppercase; letter-spacing:1px; padding:3px 10px; border-radius:10px; background:#efe0c4; color:var(--wine); }
.etag.partner { background:#f8d2dc; color:#a0283f; } .etag.good { background:#dbeccb; color:#2f5a1f; } .etag.gone { background:#ddd; color:#555; }
.stats { color:var(--ink2); margin-bottom:12px; }
.theend { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff0dc; background:rgba(10,4,4,.6); }
.theend .t1 { font-family:Georgia, serif; font-size:90px; font-weight:bold; text-shadow:0 4px 30px rgba(255,120,90,.7); } .theend .t2 { font-size:22px; font-style:italic; }
/* modal + toast */
#modal { position:absolute; inset:0; z-index:60; background:rgba(20,8,6,.55); display:flex; align-items:center; justify-content:center; }
#modal .panel { position:relative; min-width:380px; max-width:960px; max-height:680px; display:flex; flex-direction:column; }
.menu-col { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.slot { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border:2px solid #e2c9a3; border-radius:14px; background:rgba(255,255,255,.55); margin-bottom:8px; gap:10px; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:10px 0; }
.set-row label { font-weight:bold; }
.set-row input[type=range] { width:260px; accent-color:var(--wine2); }
.logbox { max-height:520px; padding-right:8px; }
.log-line { margin:6px 0; font-size:15.5px; line-height:1.4; } .log-line b { color:var(--wine); }
input[type=text] { font-family:inherit; font-size:20px; padding:8px 12px; border-radius:10px; border:2px solid var(--brass); background:#fffdf6; width:100%; margin-top:10px; }
#toasts { position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast { background:rgba(40,16,12,.94); color:var(--cream); padding:8px 18px; border-radius:14px; font-size:15px; box-shadow:0 4px 14px rgba(0,0,0,.3); animation:toast 3.2s forwards; border:1.5px solid rgba(227,176,75,.6); }
.toast.note { background:rgba(47,127,122,.95); } .toast.heart { background:rgba(190,60,90,.95); } .toast.coin { background:rgba(150,100,20,.95); } .toast.down { background:rgba(70,60,70,.95); }
@keyframes toast { 0% { opacity:0; transform:translateY(-8px); } 8% { opacity:1; transform:none; } 85% { opacity:1; } 100% { opacity:0; } }
/* loader */
#loader { position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, #4a1a22, #140a08); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffd7c0; z-index:100; transition:opacity .5s; }
#loader.done { opacity:0; pointer-events:none; }
.ld-title { font-family:Georgia, serif; font-size:48px; font-weight:bold; margin-bottom:22px; }
.ld-bar { width:360px; height:12px; border-radius:7px; background:rgba(255,255,255,.15); overflow:hidden; }
#ldFill { height:100%; width:0; background:linear-gradient(90deg,#c8404f,#e3b04b); transition:width .2s; }
#ldText { margin-top:12px; font-size:14px; opacity:.8; }
#game[data-scene="market"] #charImg { left:84%; height:600px; }

/* portrait phones: the stage letterboxes; suggest landscape */
#rotateHint { display:none; position:fixed; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(20,8,6,.9); color:#f3e2c4; border:1px solid #c9a24a; border-radius:999px; padding:8px 16px; font:14px/1.3 system-ui, sans-serif; white-space:nowrap; pointer-events:none; z-index:50; }
@media (orientation: portrait) and (max-width: 700px) { #rotateHint { display:block; } }

/* ---- polish: transitions, choice hover, mixing guide, phone (compact) layout ---- */
button { transition:transform .08s ease, filter .12s ease, box-shadow .12s ease, background .15s ease; }
button:focus-visible { outline:3px solid #6cc0ff; outline-offset:2px; }
@keyframes panelin { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }  /* no translate: never pushes past the stage edge */
#screen > .panel, #modal .panel { animation:panelin .18s ease-out; }
#choices button { animation:panelin .2s ease-out both; }
#choices button:nth-child(2) { animation-delay:.04s; } #choices button:nth-child(3) { animation-delay:.08s; } #choices button:nth-child(4) { animation-delay:.12s; }
#choices button:hover:not(:disabled) { border-color:var(--gold); box-shadow:0 3px 0 #8a5a30, 0 0 0 3px rgba(227,176,75,.4); }
#vnCtrl button.on { box-shadow:0 0 0 2px rgba(227,176,75,.7); }
.mixsec.next h3::after { content:"  \2190 next"; color:var(--wine2); font-size:13px; font-family:"Trebuchet MS", sans-serif; animation:nudge 1s ease-in-out infinite; display:inline-block; }
.mixsec.next .ing-grid { box-shadow:0 0 0 2px rgba(227,176,75,.75); border-radius:10px; }
#pourBtn.ready { animation:glowp 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform:translateX(-4px); } }
@keyframes glowp { 50% { box-shadow:0 3px 0 #4a0a12, 0 0 16px rgba(227,176,75,.9); } }
.tutsteps { margin:6px 0 0; padding-left:22px; } .tutsteps li { margin:6px 0; font-size:15.5px; line-height:1.4; }
.slot > .row { flex-wrap:nowrap; flex:none; }
#game.compact #vn { left:60px; right:60px; height:196px; }
#game.compact #vnText { font-size:26px; line-height:1.4; }
#game.compact #vnName { font-size:23px; }
#game.compact #vnCtrl { top:-24px; }
#game.compact #vnCtrl button { font-size:18px; padding:7px 18px; }
#game.compact #choices { width:900px; bottom:232px; gap:11px; }
#game.compact #choices button { font-size:22px; padding:14px 20px; }
#game.compact #choices button .k { width:32px; height:32px; line-height:30px; font-size:17px; }
#game.compact #choices button .tag { font-size:14px; }
#game.compact .hud-btn { font-size:19px; padding:8px 18px; }
#game.compact .hud-chip { font-size:18px; }
#game.compact .sub, #game.compact .note { font-size:17px; }
#game.compact .toast { font-size:19px; }
#game.compact .ing { font-size:15.5px; padding:7px 7px; }
#game.compact .ing small { font-size:12px; }
#game.compact .ing.meth { font-size:17px; }
#game.compact .mixsec h3 { font-size:17px; }
#game.compact .quote { font-size:19px; }
#game.compact .chip { font-size:15px; }
#game.compact .likes, #game.compact .mix-order .help { font-size:15px; }
#game.compact .fl-row { font-size:15px; }
#game.compact .mixname { font-size:19px; }
#game.compact .slot b { font-size:19px; }
#game.compact .slot button, #game.compact #modal .panel > .row button { font-size:19px; padding:9px 20px; }
#game.compact .item .nm { font-size:17px; } #game.compact .item .ds { font-size:14.5px; }
#game.compact .card .meta { font-size:15px; }
#game.compact .log-line { font-size:18px; }
#game.compact .ing.meth small { display:none; }
#game.compact .mixsec h3 { margin:3px 0 3px; }
#game.compact .ing-grid { gap:4px; }
.mixbtns { position:sticky; bottom:0; background:linear-gradient(rgba(244,228,202,0), rgba(244,228,202,.97) 35%); }
#game.compact .ing { padding:6px 7px; }