:root { --cream:#fff6e8; --paper:#f8ecd8; --ink:#3b2a20; --ink2:#6b5444; --wood:#7a4f2e; --wood2:#a8703f; --leaf:#5f8a4f; --leaf2:#86b06e; --rose:#d9776a; --gold:#e3b04b; --sky:#6c8fb3; --shadow:0 6px 24px rgba(40,20,10,.35); }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#1c130e; 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; flex:none; width:1280px; height:720px; transform-origin:center center; overflow:hidden; overflow:clip; background:#2a1d15; 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 ease; }
.bg.on { opacity:1; }
#charLayer { position:absolute; left:0; right:0; bottom:0; height:720px; pointer-events:none; }
#charImg { position:absolute; bottom:0; left:50%; height:560px; transform:translateX(-50%) translateY(20px); opacity:0; transition:opacity .35s, transform .35s; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
#charImg.on { opacity:1; transform:translateX(-50%) translateY(0); }
#charImg.bump { animation: bump .35s ease; }
@keyframes bump { 0%{ transform:translateX(-50%) translateY(0);} 40%{ transform:translateX(-50%) translateY(-10px);} 100%{ transform:translateX(-50%) translateY(0);} }
#mcanvas { position:absolute; inset:0; display:none; touch-action:none; }
#mcanvas.on { display:block; cursor:none; }
/* HUD */
#hud { position:absolute; top:12px; left:14px; right:14px; display:flex; gap:8px; align-items:center; z-index:30; pointer-events:none; }
.hud-chip { pointer-events:auto; background:rgba(255,246,232,.92); border:2px solid var(--wood2); border-radius:18px; padding:5px 14px; font-weight:bold; font-size:16px; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.hud-chip.coin::before { content:""; display:inline-block; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff2b0, var(--gold) 55%, #a8741b); margin-right:6px; vertical-align:-2px; }
.hud-btn { pointer-events:auto; margin-left:auto; }
.hud-btn + .hud-btn { margin-left:0; }
button { font-family:inherit; font-size:16px; cursor:pointer; color:var(--ink); background:linear-gradient(#fffaf0,#f1dfc2); border:2px solid var(--wood2); border-radius:12px; padding:7px 16px; box-shadow:0 3px 0 var(--wood), 0 4px 10px rgba(0,0,0,.2); transition:transform .08s, filter .15s; }
button:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 var(--wood); }
button { transition:transform .08s ease, filter .12s ease, box-shadow .12s ease, background .15s ease; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:linear-gradient(#9bc77f,#5f8a4f); color:#fff; border-color:#4b6f3c; box-shadow:0 3px 0 #3d5a31, 0 4px 10px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(0,0,0,.3); font-weight:bold; }
button.sel { background:linear-gradient(#ffe7b3,#f3c76d); border-color:#c7902d; box-shadow:0 3px 0 #9b6c1c, 0 0 0 3px rgba(227,176,75,.35); font-weight:bold; }
button:focus-visible { outline:3px solid #6c8fb3; outline-offset:2px; }
/* VN */
#vn { position:absolute; left:120px; right:120px; bottom:22px; height:178px; background:linear-gradient(rgba(255,248,236,.96), rgba(248,236,216,.96)); border:3px solid var(--wood2); border-radius:22px; box-shadow:var(--shadow); padding:30px 36px 18px; z-index:20; cursor:pointer; }
#vn::before { content:""; position:absolute; inset:6px; border:1.5px dashed rgba(168,112,63,.45); border-radius:16px; pointer-events:none; }
#vnName { position:absolute; top:-22px; left:34px; background:var(--wood); color:#fff7e6; font-family: Georgia, "Palatino Linotype", serif; font-weight:bold; font-size:21px; padding:6px 22px; border-radius:14px; border:2px solid #f3d9b0; box-shadow:0 3px 8px rgba(0,0,0,.3); }
#vnName:empty { display:none; }
#vnText { font-size:21px; line-height:1.5; white-space:pre-wrap; }
#vnText.nar { font-style:italic; color:var(--ink2); }
#vnNext { position:absolute; right:26px; bottom:14px; color:var(--wood2); animation:blink 1s infinite; font-size:16px; opacity:0; }
#vnNext.on { opacity:1; }
@keyframes blink { 50% { transform:translateY(4px); opacity:.5; } }
#vnCtrl { position:absolute; right:18px; top:-18px; }
#vnCtrl button { padding:4px 14px; font-size:14px; border-radius:10px; }
#vnCtrl { display:flex; gap:6px; }
#vnSkip.on, #vnAuto.on { background:linear-gradient(#ffe7b3,#f3c76d); box-shadow:0 0 0 2px rgba(227,176,75,.6); }
#choices { position:absolute; left:50%; transform:translateX(-50%); bottom:226px; width:720px; display:flex; flex-direction:column; gap:10px; z-index:22; }
#choices button { text-align:left; font-size:18px; padding:12px 20px; border-radius:16px; background:linear-gradient(rgba(255,250,240,.97),rgba(243,226,198,.97)); }
#choices button .k { display:inline-block; width:26px; height:26px; line-height:24px; text-align:center; border-radius:50%; background:var(--wood2); color:#fff; font-size:14px; margin-right:12px; font-weight:bold; }
#choices button .tag { float:right; font-size:13px; color:var(--leaf); font-weight:bold; margin-top:3px; }
/* Screens */
#screen { position:absolute; inset:0; z-index:25; }
.panel { position:absolute; background:linear-gradient(rgba(255,248,236,.97), rgba(246,232,208,.97)); border:3px solid var(--wood2); border-radius:22px; box-shadow:var(--shadow); padding:22px 26px; }
.panel h2 { margin:0 0 10px; font-family: Georgia, "Palatino Linotype", serif; color:var(--wood); font-size:28px; }
.panel h3 { margin:12px 0 6px; font-family: Georgia, serif; color:var(--wood); font-size:19px; }
.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(--wood2); border-radius:6px; }
.dim { position:absolute; inset:0; background:rgba(30,18,10,.45); }
/* title */
.title-logo { position:absolute; left:70px; top:70px; color:#fff8ea; text-shadow:0 3px 0 #6b3d1f, 0 6px 24px rgba(60,20,0,.6); }
.title-logo .t1 { font-family: Georgia, "Palatino Linotype", serif; font-size:76px; font-weight:bold; letter-spacing:1px; line-height:1; }
.title-logo .t2 { font-family: Georgia, serif; font-size:26px; margin-top:10px; font-style:italic; color:#ffe3b8; }
.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,248,234,.85); font-size:13px; text-shadow:0 1px 3px #000; }
.badge-sfw { position:absolute; right:18px; top:16px; background:rgba(255,248,234,.9); border-radius:12px; padding:6px 12px; font-size:13px; color:var(--leaf); font-weight:bold; border:2px solid var(--leaf2); }
/* cards */
.cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.card { position:relative; background:rgba(255,255,255,.6); border:2px solid #e2c9a3; border-radius:16px; padding:12px; display:flex; gap:12px; cursor:pointer; transition:transform .1s, border-color .15s; }
.card:hover { transform:translateY(-2px); border-color:var(--wood2); }
.card.sel { border-color:var(--leaf); background:rgba(214,236,196,.7); box-shadow:0 0 0 3px rgba(95,138,79,.3); }
.card.sel::after { content:"\2713  Booked"; position:absolute; top:8px; right:10px; background:var(--leaf); color:#fff; font-size:12.5px; font-weight:bold; padding:2px 9px; border-radius:10px; }
.card .meta.last { color:var(--leaf); font-weight:bold; margin-top:3px; }
.slotinfo { font-weight:bold; font-size:17px; color:var(--wood); background:#fff4dc; border:1.5px solid #e2c9a3; border-radius:12px; padding:4px 12px; }
.card.locked { opacity:.55; cursor:default; }
.face { width:84px; height:84px; border-radius:50%; background-color:#e9d6b8; background-repeat:no-repeat; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); flex:none; }
.face.lg { width:120px; height:120px; }
.card .nm { font-weight:bold; font-size:18px; font-family: Georgia, serif; }
.card .meta { font-size:14px; color:var(--ink2); }
.card .req { font-size:14px; margin-top:4px; }
.pill { display:inline-block; font-size:12px; font-weight:bold; padding:2px 8px; border-radius:10px; background:#efe0c4; color:var(--wood); margin-right:4px; }
.pill.new { background:#d6ecc4; color:#3d6a2e; } .pill.f { background:#dbe6f3; color:#3e5f86; }
.hearts { color:var(--rose); letter-spacing:1px; font-size:15px; }
/* diagnosis */
.opt-grid { display:flex; flex-wrap:wrap; gap:8px; }
.opt-grid button { font-size:15px; padding:6px 12px; }
.opt-grid button small { display:block; font-size:11px; color:var(--ink2); font-weight:normal; }
.note { background:#fffdf6; border-left:4px solid var(--gold); border-radius:6px; padding:6px 10px; margin:6px 0; font-size:14.5px; line-height:1.35; }
.note.unk { color:#a99580; border-left-color:#dccbb0; font-style:italic; }
.consent { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font-size:13.5px; }
.consent div { border-radius:10px; padding:6px 8px; }
.c-ok { background:#e2f0d6; } .c-no { background:#f6d9d3; } .c-ask { background:#fbeccb; }
/* items */
.items { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.item { background:rgba(255,255,255,.65); border:2px solid #e2c9a3; border-radius:16px; padding:10px; text-align:center; position:relative; }
.item .ic { width:76px; height:76px; margin:0 auto; background-size:contain; background-repeat:no-repeat; background-position:center; }
.item .nm { font-weight:bold; font-size:15px; margin-top:4px; }
.item .ds { font-size:12.5px; color:var(--ink2); min-height:48px; margin:4px 0 6px; }
.item .own { position:absolute; top:8px; right:10px; font-size:12px; background:#efe0c4; border-radius:8px; padding:1px 7px; }
.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:5px; vertical-align:-1px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
/* massage side panel */
#mpanel { position:absolute; right:14px; top:58px; bottom:14px; width:300px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.meter { height:16px; border-radius:9px; background:#ead9bd; overflow:hidden; border:1.5px solid #cfae80; }
.meter > div { height:100%; border-radius:8px; transition:width .2s; }
.m-comfort > div { background:linear-gradient(90deg,#e48a7a,#f3c76d 45%,#86b06e); }
.m-relief > div { background:linear-gradient(90deg,#9bc7e6,#6c8fb3); }
.mlabel { display:flex; justify-content:space-between; font-size:14px; font-weight:bold; margin-bottom:3px; }
.press { display:flex; gap:4px; }
.press button { flex:1; padding:5px 0; font-size:15px; }
.mtimer { font-family: Georgia, serif; font-size:30px; font-weight:bold; color:var(--wood); text-align:center; }
#mclient { display:flex; gap:10px; align-items:center; }
.zlist { font-size:13.5px; display:flex; flex-direction:column; gap:4px; }
.zrow { display:flex; align-items:center; gap:6px; }
.zrow .zb { flex:1; height:8px; background:#ead9bd; border-radius:5px; overflow:hidden; }
.zrow .zb > div { height:100%; background:linear-gradient(90deg,#e48a7a,#f3a66d); }
.zrow.clear { color:var(--leaf); }
#checkBtn.flash { animation:flash .5s infinite alternate; }
@keyframes flash { to { background:linear-gradient(#ffe7b3,#f3a66d); box-shadow:0 3px 0 #9b6c1c, 0 0 18px rgba(243,166,109,.9); } }
.mhelp { position:absolute; left:16px; top:58px; width:270px; padding:12px 14px; font-size:13.5px; line-height:1.4; }
.kbd { display:inline-block; border:1.5px solid #b89a74; border-bottom-width:3px; border-radius:6px; padding:0 6px; font-size:12px; background:#fffaf0; font-weight:bold; }
/* results */
.grade { font-family: Georgia, serif; font-size:110px; font-weight:bold; line-height:1; text-align:center; color:var(--wood); text-shadow:0 4px 0 #f3d9b0; }
.grade.S { color:#d49a1e; } .grade.A { color:var(--leaf); } .grade.B { color:var(--sky); } .grade.C { color:#a06c5a; } .grade.D { color:#8a5a5a; }
.bars .mlabel { font-weight:normal; }
/* modal + toast */
#modal { position:absolute; inset:0; z-index:60; background:rgba(30,18,10,.5); display:flex; align-items:center; justify-content:center; }
#modal .panel { position:relative; min-width:440px; max-width:760px; }
#toasts { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:70; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:rgba(59,42,32,.92); color:#fff6e8; padding:9px 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(243,217,176,.6); }
.toast.note { background:rgba(95,138,79,.95); }
@keyframes toast { 0%{opacity:0; transform:translateY(-8px);} 8%{opacity:1; transform:none;} 85%{opacity:1;} 100%{opacity:0;} }
input[type=text] { font-family:inherit; font-size:20px; padding:8px 12px; border-radius:10px; border:2px solid var(--wood2); background:#fffdf6; width:100%; }
input[type=range] { width:100%; accent-color:var(--leaf); }
.slot { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border:2px solid #e2c9a3; border-radius:14px; background:rgba(255,255,255,.55); margin-bottom:8px; }
.log-line { margin:6px 0; font-size:15.5px; } .log-line b { color:var(--wood); }
/* loader */
#loader { position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, #4a3020, #1c130e); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ffe3b8; z-index:100; transition:opacity .5s; }
#loader.done { opacity:0; pointer-events:none; }
.ld-title { font-family: Georgia, serif; font-size:44px; 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,#86b06e,#e3b04b); transition:width .2s; }
#ldText { margin-top:12px; font-size:14px; opacity:.8; }
.hint-audio { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); color:#fff6e8; font-size:14px; background:rgba(40,25,15,.6); padding:5px 14px; border-radius:12px; }
.zrow.unreach { color:#a04a3a; }
.opt-grid button.wrongpose { opacity:.75; }
#screen .opt-grid { gap:6px; }
#screen .opt-grid button { font-size:13.5px; padding:4px 10px; }
#screen .opt-grid button small { font-size:10.5px; max-width:170px; }
#screen .opt-grid.three button { flex:1; }
#screen .opt-grid.three button small { max-width:none; }
.cards.week { grid-template-columns:repeat(3, 1fr); gap:10px; }
.cards.week .card { padding:8px; }
.cards.week .meta { font-size:12px; line-height:1.3; }
#screen .panel h3 { margin:8px 0 4px; }
#screen .planbar { position:sticky; bottom:-22px; background:#f6e9d3; padding-bottom:6px; }

#rotateHint { display:none; position:fixed; left:0; right:0; top:max(12px, env(safe-area-inset-top)); z-index:100; text-align:center; color:#f6e8d0; font-size:15px; pointer-events:none; }
@media (orientation: portrait) and (max-width: 760px) { #rotateHint { display:block; } }

/* ---- polish: screen transitions, choice hover, small-screen readability ---- */
/* opacity + slight shrink only: never pushes content past the stage edge (which would let #game scroll) */
@keyframes pop { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
#screen > .panel, #modal .panel { animation:pop .18s ease-out; }
#choices button:hover:not(:disabled) { border-color:var(--gold); box-shadow:0 3px 0 var(--wood), 0 0 0 3px rgba(227,176,75,.35); }
#choices button { animation:pop .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; }
#game.compact #vn { left:70px; right:70px; height:200px; padding:32px 34px 16px; }
#game.compact #vnText { font-size:26px; line-height:1.42; }
#game.compact #vnName { font-size:24px; }
#game.compact #vnCtrl { top:-26px; }
#game.compact #vnCtrl button { font-size:18px; padding:7px 18px; }
#game.compact #choices { width:900px; bottom:244px; gap:12px; }
#game.compact #choices button { font-size:23px; padding:15px 22px; }
#game.compact #choices button .k { width:32px; height:32px; line-height:30px; font-size:17px; }
#game.compact #hud button { font-size:19px; padding:8px 18px; }
#game.compact .sub { font-size:17px; }
#game.compact .note { font-size:17px; }
#game.compact .card .meta { font-size:16px; }
#game.compact .card .nm { font-size:20px; }
#game.compact .press button { padding:10px 0; font-size:19px; }
#game.compact .toast { font-size:19px; }
#game.compact #screen .opt-grid button { font-size:16.5px; padding:7px 12px; }
#game.compact #screen .opt-grid button small { font-size:12.5px; }
#game.compact #screen .panel h3 { font-size:21px; }
#game.compact .mhelp { width:300px; font-size:16px; }
.slot > .row { flex-wrap:nowrap; flex:none; }
#game.compact .slot b { font-size:19px; }
#game.compact .slot button, #game.compact #modal .panel > .row button { font-size:19px; padding:9px 20px; }