@import url('./js/characters.css');
@import url('./js/three/style.css');

:root{color-scheme:light;font-family:system-ui,sans-serif;background:#e9d8b8;color:#544c3e}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button{-webkit-tap-highlight-color:transparent;font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px dashed #b6643e;outline-offset:6px}neko-app{display:block;width:100%;height:100%;height:100svh}button svg{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.apartment{width:100%;height:100%;position:relative;overflow:clip;isolation:isolate;background:#edddba}.room-art{position:absolute;inset:0;width:100%;height:100%;transition:filter 1.2s;pointer-events:none}.light-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 74% 23%,#ffedac22,transparent 65%);transition:background 1.2s}.light-wash:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 120px #725c2518}.sky-clouds{animation:cloud-drift 30s ease-in-out infinite alternate}.curtain{transform-box:fill-box;transform-origin:top center;animation:curtain-sway 9s ease-in-out infinite alternate}.dust-motes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.dust-motes i{position:absolute;width:3px;height:3px;border-radius:50%;left:calc(17% + var(--i)*6%);top:calc(12% + var(--i)*5%);background:#fff5c9;opacity:0;animation:mote 13s linear infinite;animation-delay:calc(var(--i)*-1.3s)}
.cast,.room-props{position:absolute;inset:0;pointer-events:none}.cast{z-index:3}.room-props{z-index:6}neko-actor{position:absolute;display:block;max-height:none;transform:translateX(-50%);pointer-events:none;isolation:isolate;z-index:3}neko-actor[data-id=yani]{z-index:5}neko-actor[data-id=yaku],neko-actor[data-id=aru]{z-index:4}.actor-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;pointer-events:none;transform-origin:50% var(--foot-y);transition:filter .2s}.actor-hit:focus-visible{outline:3px dashed #997c5480;outline-offset:-12px;border-radius:45%}.actor-hit .character-vector{pointer-events:visiblePainted;animation:none;transform-origin:50% var(--foot-y);filter:drop-shadow(0 2px 0 #6357440d);transition:filter .2s}.actor-hit:hover .character-vector{filter:drop-shadow(0 0 9px #fff1bb90)}.ground-shadow{position:absolute;top:var(--foot-y);left:28%;width:48%;height:2.4%;border-radius:50%;background:#645b4545;filter:blur(2px);transform:translateY(-50%);z-index:-2}neko-actor[data-pose=sit] .ground-shadow{top:calc(var(--foot-y) + 2%);left:13%;width:74%;height:5%}.seat-cushion{position:absolute;top:calc(var(--foot-y) - 4%);left:13%;width:74%;height:8%;border-radius:50%;background:linear-gradient(#c4be90 0 58%,#a19d76 61%);border:1.5px solid #8b8969;box-shadow:0 3px 0 #70674b20;z-index:-1}.cat-eyes.expression-normal{animation:blink 7.5s linear infinite;animation-delay:var(--delay)}.cat-tail{animation:tail-swish 4s ease-in-out infinite;animation-delay:var(--delay)}.cat-ears{transform-box:fill-box;transform-origin:center bottom;animation:ear-twitch 11s ease-in-out infinite;animation-delay:var(--delay)}.cat-smoke{animation:draw-smoke 1.8s ease-in-out infinite;stroke-dasharray:80;stroke-dashoffset:80}.cat-ember{animation:ember 1.3s ease-in-out infinite}.character-vector .cat-cigarette{pointer-events:none}
room-prop{position:absolute;display:block;left:var(--x);top:var(--y);width:var(--width);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;max-width:155px}.prop-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;transform-origin:center 80%;pointer-events:none;transition:filter .2s,transform .2s}.prop-hit svg{width:100%;height:100%;overflow:visible;pointer-events:visiblePainted}.prop-hit:hover{filter:drop-shadow(0 0 7px #fff1ad);transform:rotate(-3deg)}.prop-hit:active{transform:scale(.97)}room-prop[data-id=lamp]{z-index:2}.lamp-glow{transition:filter 1s}.fan-blades{transform-origin:91px 64px}.corner-controls{position:absolute;top:calc(22px + env(safe-area-inset-top));right:calc(24px + env(safe-area-inset-right));display:flex;gap:8px;z-index:30}.corner-controls button{width:44px;height:44px;border:1px solid #917f5820;border-radius:50%;display:grid;place-items:center;color:#706b55;background:#f7ebcd85;backdrop-filter:blur(7px);transition:background .2s,transform .2s}.corner-controls button:hover{background:#fff2cc;transform:rotate(-8deg)}.corner-controls .icon{width:19px;height:19px}.corner-controls .reset-button{opacity:.65}.corner-controls .reset-button:hover{opacity:1}.sound-toggle[aria-pressed=true]{color:#ae694f}.first-touch{position:absolute;left:54%;top:42%;z-index:20;pointer-events:none;color:#fff8df;filter:drop-shadow(0 2px 2px #54463566);animation:tap-invitation 1.9s ease-in-out 3;transition:opacity .5s}.first-touch .icon{width:31px;height:31px;stroke-width:1.8}.first-touch.hidden{animation:none;opacity:0}
[data-motion=smoke] .actor-hit{animation:inhale 3.3s ease-in-out}[data-motion=smoke] .cat-head{animation:satisfied 3.3s ease-in-out}[data-motion=throw] .cat-arm-right{animation:throw-arm .65s ease-in-out}[data-motion=throw] .cat-head{animation:scold .4s ease-in-out 4}[data-motion=bonk] .actor-hit{animation:bonk .7s ease-out}[data-motion=bonk] .cat-head{animation:dizzy .45s ease-in-out 3}[data-motion=laugh] .actor-hit{animation:laugh .3s ease-in-out 5}[data-motion=windup] .actor-hit{animation:windup .55s ease-in both}[data-motion=sneeze] .actor-hit{animation:sneeze .7s cubic-bezier(.15,.8,.3,1)}[data-motion=jump] .actor-hit{animation:jump .9s ease-out}[data-motion=wobble] .actor-hit{animation:wobble .5s ease-in-out 3}[data-motion=hiccup] .actor-hit{animation:hiccup .7s ease-in-out 3}[data-motion=dance] .actor-hit{animation:dance .47s ease-in-out infinite;animation-delay:var(--delay)}[data-motion=dance] .cat-arm-left{animation:hand-dance .45s ease-in-out infinite alternate}[data-motion=dance] .cat-arm-right{animation:hand-dance .45s ease-in-out infinite alternate-reverse}[data-motion=wind] .cat-head{animation:wind-head .2s ease-in-out infinite alternate}[data-motion=wind] .cat-fringe{transform-box:fill-box;transform-origin:top center;animation:wind-hair .2s ease-in-out infinite alternate}.windy .fan-blades{animation:fan-spin .16s linear infinite}.windy .curtain{animation:curtain-sway .35s ease-in-out infinite alternate}.dancing room-prop[data-id=radio] .prop-hit{animation:radio-bounce .3s ease-in-out infinite}
.apartment[data-light=night] .room-art{filter:brightness(.52) saturate(.66) hue-rotate(9deg)}.apartment[data-light=night] .light-wash{background:radial-gradient(ellipse at 77% 27%,#ffc95c25 0%,#293e4a0a 35%,#20323f3d 100%)}.apartment[data-light=night] .character-vector{filter:brightness(.81) saturate(.86) drop-shadow(0 0 4px #f0cc611a)}.apartment[data-light=night] .city-lights{fill:#ffdc8a}.apartment[data-light=night] .sky-disc{fill:#fffce5}.apartment[data-light=night] .sunbeam{opacity:0}.apartment[data-light=night] .lamp-glow{filter:drop-shadow(0 0 13px #ffcf51)}.apartment[data-light=night] room-prop[data-id=lamp]:before{content:'';position:absolute;width:400%;height:600%;left:-145%;top:30%;background:radial-gradient(ellipse at top,#ffe6a437,transparent 65%);pointer-events:none}.apartment[data-light=night] .corner-controls button{color:#dbd6b9;background:#ddd2a530;border-color:#e5d99c20}
@keyframes idle-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes blink{0%,40%,43%,71%,74%,100%{transform:scaleY(1)}41.5%,72.5%{transform:scaleY(.08)}}@keyframes tail-swish{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(7deg)}}@keyframes ear-twitch{0%,43%,47%,100%{transform:rotate(0)}44%,46%{transform:rotate(-3deg)}45%{transform:rotate(3deg)}}@keyframes cloud-drift{to{transform:translateX(38px)}}@keyframes curtain-sway{from{transform:skewX(-.7deg)}to{transform:skewX(.7deg)}}@keyframes mote{0%{opacity:0;transform:translate(0,0)}25%,75%{opacity:.5}100%{opacity:0;transform:translate(-55px,-90px)}}@keyframes tap-invitation{0%,100%{transform:rotate(-14deg) scale(1);opacity:.75}50%{transform:translate(-5px,8px) rotate(-4deg) scale(.9);opacity:1}}@keyframes ember{0%,100%{opacity:.6}40%{opacity:1;filter:drop-shadow(0 0 3px #fb773c)}}@keyframes draw-smoke{0%{stroke-dashoffset:80;opacity:0}35%{opacity:.7}100%{stroke-dashoffset:0;opacity:0}}@keyframes inhale{0%,100%{transform:scale(1)}25%{transform:scale(1.018) rotate(-1deg)}60%{transform:translateY(3px) scale(.995) rotate(.6deg)}}@keyframes satisfied{0%,100%{transform:rotate(0)}35%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}}@keyframes throw-arm{0%{transform:rotate(0)}35%{transform:rotate(-65deg)}70%{transform:rotate(55deg)}100%{transform:rotate(0)}}@keyframes scold{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(4deg)}}@keyframes bonk{0%{transform:scale(1)}14%{transform:scale(1.13,.81) translateY(8px)}35%{transform:scale(.91,1.11) translateY(-16px)}65%{transform:scale(1.03,.96)}100%{transform:scale(1)}}@keyframes dizzy{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}@keyframes laugh{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes windup{to{transform:rotate(-8deg) scale(1.03)}}@keyframes sneeze{0%{transform:rotate(-8deg)}20%{transform:rotate(20deg) translateX(16px) scale(1.06,.88)}43%{transform:rotate(-13deg) translateX(-12px)}70%{transform:rotate(7deg)}100%{transform:rotate(0)}}@keyframes jump{0%,100%{transform:translateY(0)}30%{transform:translateY(-47px) scale(.92,1.08)}65%{transform:translateY(4px) scale(1.08,.92)}}@keyframes wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}@keyframes hiccup{0%,25%,100%{transform:translateY(0) rotate(0)}12%{transform:translateY(-22px) rotate(-6deg) scale(1.04)}48%{transform:rotate(5deg)}}@keyframes dance{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(7deg) translateY(-13px)}}@keyframes hand-dance{from{transform:rotate(-28deg)}to{transform:rotate(26deg)}}@keyframes wind-head{from{transform:rotate(-8deg)}to{transform:rotate(-3deg)}}@keyframes wind-hair{from{transform:skewX(-6deg)}to{transform:skewX(-12deg)}}@keyframes fan-spin{to{transform:rotate(360deg)}}@keyframes radio-bounce{50%{transform:translateY(-4px) rotate(3deg)}}
@media(min-aspect-ratio:19/10){.corner-controls{top:16px;right:18px}}
@media(max-width:1100px) and (orientation:portrait){neko-actor[data-id=imouto],neko-actor[data-id=kansai]{z-index:2}neko-actor[data-id=yaku],neko-actor[data-id=aru]{z-index:5}neko-actor[data-id=yani]{z-index:4}.room-props{z-index:7}room-prop{left:var(--mx);top:var(--my);width:var(--mwidth);max-width:none}.corner-controls{top:calc(12px + env(safe-area-inset-top));right:13px;gap:5px}.corner-controls button{width:38px;height:38px}.corner-controls .icon{width:17px;height:17px}.first-touch{left:59%;top:48%}.first-touch .icon{width:25px;height:25px}.light-wash:after{box-shadow:inset 0 0 70px #725c2515}.apartment[data-light=night] .light-wash{background:radial-gradient(ellipse at 80% 24%,#ffd97320,#1f34353b 90%)}}
@media(max-width:380px) and (orientation:portrait){.first-touch{left:58%;top:51%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.dust-motes{display:none}.first-touch{opacity:.8}.first-touch.hidden{animation:none;opacity:0}[data-motion] .actor-hit{transform:none}.cat-eyes.expression-normal{transform:none}}
/* Transparent SVG space must never steal another character's click. */
.actor-hit .character-vector,.prop-hit svg{pointer-events:none}
.actor-hit svg :is(path,ellipse,circle,rect,polygon,line,polyline,use),.prop-hit svg :is(path,ellipse,circle,rect,polygon,line,polyline,use){pointer-events:visiblePainted}

/* Invite one friend; the host keeps her place in the room. */
character-picker{position:absolute;left:calc(20px + env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:25}
.character-picker{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid #fff5d975;border-radius:31px;background:#f8efd5bc;backdrop-filter:blur(14px);box-shadow:0 5px 28px #61513612;max-height:calc(100svh - 90px);overflow-y:auto;scrollbar-width:thin}
.picker-option{position:relative;flex-shrink:0;width:48px;height:48px;padding:0;display:grid;place-items:center;border:1.5px solid transparent;border-radius:50%;background:#dbd8bd66;color:#9a8c70;transition:background .18s,border-color .18s,box-shadow .18s}
.picker-option:hover{background:#fff7de}
.picker-option[aria-pressed=true]{background:#fff4ce;border-color:#ac8055;box-shadow:0 0 0 3px #cda67625}
.picker-option[aria-pressed=true]:after{content:'';position:absolute;right:-2px;bottom:1px;width:8px;height:8px;border:2px solid #f8efd5;border-radius:50%;background:#a77c51}
.picker-portrait{width:100%;height:100%;overflow:hidden;border-radius:50%;pointer-events:none}
.picker-portrait .character-vector{display:block;width:100%;height:100%;overflow:hidden;filter:none!important}
.picker-portrait *{animation:none!important;pointer-events:none}
.picker-empty{margin-bottom:5px;background:none}
.picker-empty>svg{width:30px;height:30px;pointer-events:none}
.picker-option:focus-visible{outline:2px solid #a96741;outline-offset:3px}
.apartment[data-light=night] .character-picker{background:#575d50c9;border-color:#d8d5ae35}
.apartment[data-light=night] .picker-option{color:#d0c9aa;background:#9e9e8160}
.apartment[data-light=night] .picker-option[aria-pressed=true]{background:#bcb792;border-color:#ecd89f}
@media(max-width:600px){character-picker{left:calc(10px + env(safe-area-inset-left))}.character-picker{padding:7px;gap:7px;border-radius:28px}.picker-option{width:40px;height:40px}.picker-empty{margin-bottom:3px}.picker-empty>svg{width:26px;height:26px}}
@media(max-height:450px){.character-picker{padding:6px;gap:4px;max-height:calc(100svh - 24px)}.picker-option{width:34px;height:34px}.picker-empty{margin-bottom:0}character-picker{left:12px}}