:root{
  --bg:#f6d9c8; --ink:#3b2420; --pink:#e8607a; --pink2:#f48aa0; --card:#fff7f3; --line:#ecc4b4;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font:16px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{touch-action:manipulation;-webkit-user-select:none;user-select:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;user-select:text;-webkit-user-select:text}

/* login */
#login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px}
#login h1{margin:0;font-size:32px}
.sub{margin:0;opacity:.7}
.pick{display:flex;gap:18px}
.who{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:20px;background:var(--card);border:3px solid transparent}
.who img{width:110px}
.who span{font-weight:700}
.who.on{border-color:var(--pink);box-shadow:0 6px 18px #e8607a44}
#pw{width:240px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;text-align:center}
.big{background:var(--pink);color:#fff;font-weight:700;padding:12px 28px;border-radius:16px;box-shadow:0 4px 0 #b9405a}
.big:active{transform:translateY(2px);box-shadow:0 2px 0 #b9405a}
.err{color:#c0392b;margin:0;min-height:1.3em}

/* game layout */
#game{position:fixed;inset:0;display:flex;flex-direction:column}
#top{display:flex;align-items:center;gap:8px;padding:calc(6px + var(--safe-t)) 10px 6px;background:#fff7f3cc;border-bottom:1px solid var(--line);z-index:5}
#partnerHead{width:36px;height:auto}
#status{flex:1;font-size:14px}
#status b{color:var(--pink)}
.icon{font-size:22px;width:40px;height:40px;border-radius:12px;position:relative;display:grid;place-items:center}
.icon:active{background:#0001}
#unread{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 4px}

#viewport{flex:1;position:relative;overflow:hidden;background:linear-gradient(#f6d9c8 0 50%,#b77a50 50%)}
#stage{position:absolute;width:400px;height:700px;transform-origin:0 0}
#room{position:absolute;inset:0;width:400px;height:700px;pointer-events:none}
#actors,#fx{position:absolute;inset:0;pointer-events:none}
#net{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:#3b2420dd;color:#fff;font-size:13px;padding:6px 12px;border-radius:12px}

/* characters */
.ch{position:absolute;left:0;top:0;width:96px;height:160px;margin:-160px 0 0 -48px;transform-origin:50% 100%;will-change:transform}
.ch .shadow{position:absolute;left:18px;bottom:-6px;width:60px;height:14px;border-radius:50%;background:#0003}
.ch .flip{position:absolute;inset:0;transition:transform .15s}
.ch.left .flip{transform:scaleX(-1)}
.ch .body{position:absolute;left:3px;top:66px;width:90px;height:94px;overflow:visible}
.ch .upper{position:absolute;inset:0;transform-origin:48px 112px;transition:rotate .35s,translate .35s}
.legsAll{transform-box:view-box;transform-origin:45px 46px;transition:transform .35s}
.ch .flip{transition:transform .15s,translate .35s,rotate .35s}
.ch .head{position:absolute;left:4px;top:0;width:88px;transform-origin:50% 90%}
.ch .me-mark{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:#e8607acc;padding:1px 6px;border-radius:8px}
.legL,.legR,.armF,.armB{transform-box:fill-box}
.legL,.legR{transform-origin:50% 0}
.armF,.armB{transform-origin:50% 8%}
.ch.walk .legL{animation:leg .45s infinite ease-in-out}
.ch.walk .legR{animation:leg .45s infinite ease-in-out reverse}
.ch.walk .armF{animation:arm .45s infinite ease-in-out}
.ch.walk .armB{animation:arm .45s infinite ease-in-out reverse}
.ch.walk .flip{animation:bob .225s infinite alternate ease-in-out}
@keyframes leg{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes arm{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
@keyframes bob{from{translate:0 0}to{translate:0 -4px}}

.ch.reachF .armF{transform:rotate(-70deg)}
.ch.reachB .armB{transform:rotate(70deg)}
.ch.hug .armF,.ch.hug .armB{transform:rotate(-95deg)!important;animation:none!important}
.ch.hug .body,.ch.hug .head{translate:10px 0}
.ch.kiss .head{transform:rotate(10deg) translateX(8px)}
.ch.kiss .body{translate:6px 0}
.ch.dance .flip{animation:dance .5s infinite alternate ease-in-out}
.ch.dance .armF{animation:arm .5s infinite}
.ch.dance .armB{animation:arm .5s infinite reverse}
@keyframes dance{from{rotate:-8deg;translate:0 0}to{rotate:8deg;translate:0 -10px}}
.ch.shake .flip{animation:shake .12s 8 alternate}
@keyframes shake{from{translate:-4px 0}to{translate:4px 0}}
.ch.jump .flip{animation:jump .5s ease-out}
@keyframes jump{0%,100%{translate:0 0}40%{translate:0 -34px}}
.ch.relax .head{animation:relax 1.2s infinite alternate ease-in-out}
@keyframes relax{from{rotate:-4deg}to{rotate:4deg}}

/* speech bubble (not flipped) */
.bubble{--sx:0px;position:absolute;left:50%;bottom:168px;transform:translateX(calc(-50% + var(--sx))) scale(.6);opacity:0;transition:.2s;
  background:#fff;border-radius:16px;padding:8px 12px;max-width:230px;width:max-content;font-size:17px;box-shadow:0 3px 10px #0002;white-space:pre-wrap;word-break:break-word;text-align:center}
.bubble::after{content:"";position:absolute;left:calc(50% - var(--sx));bottom:-8px;margin-left:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.bubble.on{opacity:1;transform:translateX(calc(-50% + var(--sx))) scale(1)}
.bubble img{width:90px;display:block}

/* fx */
.heart,.float{position:absolute;font-size:26px;animation:up 1.8s ease-out forwards;pointer-events:none}
@keyframes up{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-140px) scale(1.2)}}
.link{position:absolute;font-size:22px;margin:-12px 0 0 -12px;animation:pulse 1s infinite alternate}
@keyframes pulse{to{scale:1.25}}
.tapmark{position:absolute;width:30px;height:12px;margin:-6px 0 0 -15px;border:3px solid #fff;border-radius:50%;animation:tap .5s forwards}
@keyframes tap{to{opacity:0;scale:1.8}}

/* actions */
#actions{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 2px;background:#fff7f3;scrollbar-width:none;min-height:58px}
#actions::-webkit-scrollbar{display:none}
.act{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:62px;padding:4px 6px;border-radius:14px;background:#fff;border:2px solid var(--line);font-size:11px;font-weight:600}
.act i{font-style:normal;font-size:22px;line-height:1.1}
.act:active{background:#ffe3ea}
.act.on{border-color:var(--pink);background:#ffe3ea}
.hint{font-size:13px;opacity:.65;align-self:center;padding:0 4px}

#chatbar{display:flex;gap:6px;align-items:center;padding:6px 8px calc(6px + var(--safe-b));background:#fff7f3}
#msg{flex:1;min-width:0;padding:10px 14px;border-radius:20px;border:2px solid var(--line);background:#fff;font-size:16px}
.send{background:var(--pink);color:#fff;border-radius:50%}

/* popup */
#popup{position:fixed;left:50%;top:22%;width:min(78vw,300px);transform:translate(-50%,-50%);z-index:20;text-align:center;
  background:var(--card);border-radius:18px;padding:12px 14px 14px;box-shadow:0 8px 24px #0003;animation:pop .35s cubic-bezier(.3,1.6,.6,1)}
#popup img{width:100%;filter:drop-shadow(0 8px 18px #0004)}
#popup p{margin:0 0 10px;font-weight:700;font-size:18px}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}}

/* sheets */
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:72%;display:flex;flex-direction:column;background:var(--card);
  border-radius:20px 20px 0 0;box-shadow:0 -6px 24px #0003;z-index:30;padding-bottom:var(--safe-b);animation:sheet .25s ease-out}
.sheet.small{max-height:40%}
@keyframes sheet{from{transform:translateY(100%)}}
.sheetHead{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 4px 16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 8px 10px;overflow-y:auto}
.grid img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px}
.grid img:active{background:#ffe3ea}
.row{display:block;width:100%;text-align:left;padding:14px 18px;border-top:1px solid var(--line)}
#history{overflow-y:auto;padding:6px 10px 12px;display:flex;flex-direction:column;gap:4px;user-select:text;-webkit-user-select:text}
.m{max-width:78%;padding:7px 11px;border-radius:16px;background:#fff;align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.m.mine{align-self:flex-end;background:#ffd9e1}
.m.pending{opacity:.55}
.m img{width:120px;display:block}
.m small{display:block;font-size:10px;opacity:.5;text-align:right}
.day{align-self:center;font-size:11px;opacity:.55;margin:6px 0 2px}

/* poses */
.ch.pose-bend .upper{rotate:82deg}
.ch.pose-bend .head{rotate:-20deg}
.ch.pose-kneel .flip{translate:0 26px}
.ch.pose-kneel .legsAll{transform:scaleY(.42)}
.ch.pose-sit .flip{translate:0 40px}
.ch.pose-sit .legsAll{transform:rotate(-82deg)}
.ch.pose-sit .upper{rotate:-6deg}
.ch.pose-lie .flip{transform-origin:50% 100%;rotate:calc(-90deg * var(--f,1));translate:calc(80px * var(--f,1)) -40px}
.ch.pose-lie .shadow{width:150px;left:-27px}
.ch.slap .armF{animation:slap .7s ease-out}
@keyframes slap{0%{transform:rotate(0)}35%{transform:rotate(-150deg)}55%{transform:rotate(-40deg)}100%{transform:rotate(0)}}
.slaphand{position:absolute;font-size:30px;margin:-16px 0 0 -16px;animation:slaphand 1.5s ease-out forwards;pointer-events:none}
@keyframes slaphand{0%{scale:2.2;opacity:0}15%{scale:1;opacity:1}70%{opacity:.9}100%{opacity:0}}
.slaptxt{position:absolute;transform:translateX(-50%);font-weight:900;font-size:22px;color:#e8304f;-webkit-text-stroke:1.5px #fff;
  animation:slaptxt 1.5s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes slaptxt{0%{scale:.3;opacity:0}20%{scale:1.3;opacity:1}40%{scale:1}100%{translate:0 -30px;opacity:0}}

/* drawn sprites */
.ch.sprite .spr{position:absolute;bottom:0;max-width:none;pointer-events:none}
.ch.sprite .bubble{bottom:184px}
.ch.sprite .shadow{left:22px;width:52px}
.ch.sprite.pose-kneel .flip,.ch.sprite.pose-sit .flip,.ch.sprite.pose-lie:not(.fakelie) .flip{translate:none;rotate:none}