*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:"Hiragino Maru Gothic ProN","Rounded Mplus 1c",system-ui,sans-serif;background:#ffe4ef;color:#6b3a52;display:flex;flex-direction:column;height:100dvh;overflow:hidden;user-select:none;-webkit-user-select:none}
header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#ff8fb8;color:#fff}
h1{font-size:clamp(16px,4vw,24px);margin:0;text-shadow:0 2px 0 #e06a95}
button{font:inherit;border:0;border-radius:999px;padding:6px 14px;background:#fff;color:#e05c8f;box-shadow:0 3px 0 #f3a6c3;cursor:pointer}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #f3a6c3}
#placed{position:absolute;inset:0}
.item{position:absolute;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
.item img{width:100%;height:100%;image-rendering:pixelated}
.ph{width:80%;height:80%;border:2px dashed #fff;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;text-shadow:0 1px 1px #0005}
.ph.circle{border-radius:50%}.ph.oval{border-radius:50%;height:55%}.ph.rect{border-radius:6px;height:60%}
.ph.star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border:0}
.ph.heart{clip-path:path('M20 36 L4 20 A9 9 0 0 1 20 8 A9 9 0 0 1 36 20 Z');width:40px;height:40px;border:0}
#bubble{position:absolute;left:50%;top:8%;transform:translateX(-50%);background:#fff;padding:8px 14px;border-radius:16px;max-width:80%;font-size:clamp(12px,2.6vw,16px);z-index:4;box-shadow:0 3px 0 #f3a6c3}
#tray{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 12px 10px;background:#fff0f6;min-height:70px}
#inv{display:flex;gap:6px;overflow-x:auto}#inv .item{position:static;transform:none;width:48px;background:#ffd3e4;border-radius:12px}
#inv .item.sel{outline:3px solid #e05c8f}#hint{width:100%;font-size:11px;opacity:.7}
dialog{border:0;border-radius:20px;background:#fff7fb;color:inherit;width:min(92vw,520px)}
#zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.zc{background:#ffe4ef;border-radius:12px;padding:6px;text-align:center;font-size:12px}.zc .item{position:static;transform:none;width:56px;margin:auto}
.zc.locked{filter:grayscale(1) opacity(.5)}
@media (orientation:landscape) and (max-height:500px){header{padding:2px 10px}#tray{min-height:56px;padding:4px 10px}#hint{display:none}}
img,#room{image-rendering:pixelated;image-rendering:crisp-edges}
#stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#room{position:relative;overflow:hidden;background:center/100% 100% no-repeat;touch-action:none;outline:3px solid #fff;border-radius:4px}
#placed{position:absolute;inset:0}
#room .item{position:absolute;transform:translate(-50%,-50%)}
#himari{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;transform:translate(-50%,-100%);cursor:pointer;z-index:3}
.ph{background:#ccc}
#inv .item{width:auto;padding:4px;display:flex}
header button,#zclose{background:url(assets/dots/ui_button_normal.png) center/100% 100% no-repeat;border-radius:0;box-shadow:none;image-rendering:pixelated;color:#fff;text-shadow:0 1px 0 #c0507a;min-width:96px;height:32px;padding:0 10px}
header button:active,#zclose:active{background-image:url(assets/dots/ui_button_pressed.png);transform:none;box-shadow:none}
dialog{border:16px solid transparent;border-image:url(assets/dots/ui_dex_frame.png) 8 fill / 16px stretch;background:transparent;image-rendering:pixelated;border-radius:0}
.zc{background:none}.zc .slot{width:80px;height:80px;margin:auto;background:url(assets/dots/ui_dex_slot.png) 0 0/100% 100%;display:flex;align-items:center;justify-content:center}
.zc.locked{filter:none;opacity:.8}.zc.locked .slot{background-image:url(assets/dots/ui_dex_slot_locked.png)}
#hearts img{width:32px;height:32px;vertical-align:middle}

/* dots 56x16 watch/channel buttons @x2: icon x4-13, label x17-52; pressed shifts 2px down */
.pxbtn{display:inline-flex;align-items:center;width:112px;height:32px;padding:0 8px 0 34px;background:url(assets/dots/ui_btn_watch.png) 0 0/112px 32px no-repeat;image-rendering:pixelated;color:#6b2440;text-shadow:0 1px 0 #fff8;font-size:12px;font-weight:bold;line-height:1;text-decoration:none;white-space:nowrap;overflow:hidden;border:0;border-radius:0;box-shadow:none;min-width:0;cursor:pointer}
.pxbtn:active{background-image:url(assets/dots/ui_btn_watch_pressed.png);padding-top:4px;transform:none}
header .pxbtn.ch,.pxbtn.ch{background:url(assets/dots/ui_btn_channel.png) 0 0/112px 32px no-repeat;min-width:0;padding:0 8px 0 34px;height:32px}
header .pxbtn.ch:active,.pxbtn.ch:active{background-image:url(assets/dots/ui_btn_channel_pressed.png);padding-top:4px}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;justify-content:center}
#zdetail{background:#fff;border-radius:8px;padding:8px;margin:8px 0;font-size:13px}
.zc.got{cursor:pointer}
#bubble .links{pointer-events:auto}
.btns{display:flex;gap:4px;align-items:center}
@media (max-width:420px){header button:not(.pxbtn){min-width:64px}h1{font-size:14px}}