/* neko playground */
#roster{position:fixed;right:10px;top:calc(max(6px,env(safe-area-inset-top)) + 48px);bottom:90px;width:min(300px,calc(100vw - 20px));background:#fffaf2;border:3px solid #3b2a4a;border-radius:14px;box-shadow:4px 4px 0 #3b2a4a;display:flex;flex-direction:column;z-index:5}
#roster[hidden]{display:none}
.rhead{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:2px dashed #3b2a4a;font-family:ui-monospace,Menlo,monospace}
.rhead button{font:inherit;font-weight:800;border:2px solid #3b2a4a;background:#ffd0dc;border-radius:8px;width:28px;height:28px;cursor:pointer}
#rlist{list-style:none;margin:0;padding:6px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#rlist li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px;cursor:pointer}
#rlist li:hover,#rlist li:active{background:#ffe3ec}
#rlist img{width:48px;height:40px;image-rendering:pixelated;flex:none}
#rlist b{display:block;font-size:14px}
#rlist small{font-size:11px;opacity:.75}
#rlist .tag{display:inline-block;font-size:10px;font-weight:800;padding:0 5px;border:2px solid #3b2a4a;border-radius:6px;margin-left:6px;vertical-align:1px;background:#fff4d6}
#rlist .tag.angry{background:#ffc2c9}#rlist .tag.shy{background:#d8ceff}#rlist .tag.bitey{background:#ffd9a8}#rlist .tag.flippy{background:#ffc2e6}#rlist .tag.hyper{background:#b6f0ff}
#bar button.cpbtn{background:#d9f7e4}
#bar button.nipbtn{background:#e6f9d4}
#rlist small.nip{display:block;margin-top:2px;color:#2f6a2a;opacity:.9}
#rlist li.high{background:#e6f9d4}
#rlist li.high small.nip{font-weight:800}
/* CATCHPA */
#cp{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:6;width:min(480px,calc(100vw - 16px));background:#fffaf2;border:3px solid #3b2a4a;border-radius:14px;box-shadow:4px 4px 0 #3b2a4a;padding:8px 10px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;text-align:center}
#cp[hidden]{display:none}
#cp p{margin:0;font-size:14px;font-weight:800}
#cp p small{display:block;font-size:11px;font-weight:700;opacity:.75;margin-top:3px}
#cp .tn{color:#d6336c;background:#ffe08a;padding:0 4px;border-radius:4px}
#cp .cpb{display:flex;gap:6px;justify-content:center;margin-top:7px;flex-wrap:wrap}
#cp button{font:inherit;font-size:12px;font-weight:800;color:#3b2a4a;background:#fff4d6;border:2px solid #3b2a4a;border-radius:8px;padding:4px 10px;cursor:pointer;box-shadow:2px 2px 0 #3b2a4a;touch-action:manipulation}
#cp button.on{background:#ffb3c9}
#cp button[hidden]{display:none}
#cp.win{background:#d9f7e4}
#cp.nope{animation:cpshake .4s steps(6)}
@keyframes cpshake{0%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 7px))}40%{transform:translateX(calc(-50% + 7px))}60%{transform:translateX(calc(-50% - 5px))}80%{transform:translateX(calc(-50% + 4px))}100%{transform:translateX(-50%)}}
body.cp-on #bar{display:none}
body.cp-hunt canvas.stage{cursor:none}
@media (max-width:520px){#cp p{font-size:12px}#cp p small{font-size:10px}}

.cctl{padding:8px 10px 6px;border-bottom:2px dashed #3b2a4a;display:flex;flex-direction:column;gap:6px;flex:none}
.cctl label{font-size:13px}
.cctl input[type=range]{width:100%;accent-color:#ff5c8a;height:28px}
.cbtns{display:flex;gap:6px}
.cbtns button{flex:1;font:inherit;font-size:12px;font-weight:800;padding:5px 0;border:2px solid #3b2a4a;border-radius:8px;background:#fff4d6;cursor:pointer;box-shadow:2px 2px 0 #3b2a4a}
.cbtns button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #3b2a4a}
#rlist input.con{width:20px;height:20px;flex:none;accent-color:#ff5c8a;margin:0;cursor:pointer}
#rlist li.off{opacity:.45}
@media (max-width:600px){#roster{top:auto;bottom:84px;left:10px;right:10px;width:auto;max-height:56vh}}
/* furniture move mode */
#bar button.mvbtn{background:#ffe6c7}
body.moving #bar{display:none}
#mvbar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));z-index:6;width:min(560px,calc(100vw - 16px));background:#fffaf2;border:3px solid #3b2a4a;border-radius:14px;box-shadow:4px 4px 0 #3b2a4a;padding:6px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;text-align:center;box-sizing:border-box}
#mvbar[hidden],#tray[hidden]{display:none}
#mvlabel{margin:0 0 5px;font-size:12px;font-weight:800;color:#3b2a4a}
#mvbar .mvb{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
#mvbar .mvb button{font:inherit;font-size:11px;font-weight:700;color:#3b2a4a;background:#fff4d6;border:2px solid #3b2a4a;border-radius:10px;padding:3px 6px;display:flex;flex-direction:column;align-items:center;min-width:46px;cursor:pointer;touch-action:manipulation}
#mvbar .mvb button span{font-size:17px;line-height:1.1}
#mvbar .mvb button:disabled{opacity:.4;cursor:default}
#mvbar #mvtrash{background:#ffd0d6}
#mvbar #mvtrash.hot{background:#ff5c7a;color:#fff;transform:scale(1.15)}
#mvbar .mvb button.mvdone{background:#d9f7e4}
#tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px;margin-top:6px;max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:2px dashed #3b2a4a;padding-top:6px}
#tray button{font:inherit;border:2px solid #3b2a4a;border-radius:10px;background:#fff;padding:2px;display:flex;flex-direction:column;align-items:center;cursor:pointer;touch-action:manipulation}
#tray button:hover{background:#ffe3ec}
#tray canvas{width:48px;height:48px;image-rendering:pixelated}
#tray small{font-size:9px;line-height:1.1;color:#3b2a4a}
body.moving canvas.stage{cursor:default}
@media (max-width:520px){#bar{flex-wrap:wrap;justify-content:center;width:max-content}#mvbar .mvb button{min-width:0;padding:2px 5px;font-size:10px}#mvbar .mvb button span{font-size:15px}#mvlabel{font-size:11px}}
@media (max-width:600px){body.moving #hud{display:none}#mvbar{bottom:auto;top:calc(max(6px,env(safe-area-inset-top)) + 46px)}}
/* mini fishing board link (positioned over the drawn board by neko.js) */
#fishboard{position:fixed;left:calc(50% - 60px);top:45%;width:120px;height:100px;z-index:3;display:block;text-decoration:none;border-radius:12px;-webkit-tap-highlight-color:transparent}
#fishboard.off{display:none}
#fishboard:focus-visible{outline:3px dashed #ff5c8a;outline-offset:4px}
#fishboard .fbtag{position:absolute;left:50%;top:100%;transform:translate(-50%,4px);white-space:nowrap;font:800 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#3b2a4a;background:#fff4d6;border:2px solid #3b2a4a;border-radius:7px;padding:3px 6px;box-shadow:2px 2px 0 #3b2a4a;pointer-events:auto}
#fishboard:not(.live) .fbtag{top:auto;bottom:0}
#fishboard:hover .fbtag,#fishboard:focus-visible .fbtag{background:#ffe08a}
body.moving #fishboard{pointer-events:none}
body.moving #fishboard .fbtag{display:none}
#bar .tb.fishlink{background:#dff1ff;color:#3b2a4a}