@font-face { font-family: 'Fredoka'; src: url(fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Grand Hotel'; src: url(fonts/grandhotel.woff2) format('woff2'); font-display: swap; }
:root { --pink: #ff4fd8; --teal: #3ff2e2; --purple: #9d5bff; --cream: #f6d9b8; --ink: #0d0618; --panel: rgba(28, 12, 40, .94); --line: rgba(255, 79, 216, .55); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; font-family: Fredoka, system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
img { -webkit-user-drag: none; }
#boot { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); transition: opacity .4s; color: var(--pink); }
#boot.gone { opacity: 0; pointer-events: none; }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 79, 216, .2); border-top-color: var(--teal); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.screen { position: fixed; inset: 0; display: none; }
.screen.show { display: flex; }
.art { position: relative; flex: none; }
.art > img { display: block; width: 100%; height: 100%; }
.hs { position: absolute; background: transparent; border: 0; border-radius: 16px; padding: 0; }
.hs:active { background: rgba(255, 255, 255, .16); }
.hs.face img { width: 100%; height: 100%; display: block; border-radius: 9%; pointer-events: none; }
.grow { flex: 1; min-width: 0; }

/* buttons */
.big { display: block; width: 100%; border: 2px solid rgba(255, 255, 255, .25); border-radius: 16px; padding: 12px 14px; font-size: 17px; font-weight: 600; background: rgba(255, 255, 255, .08); margin: 6px 0; text-shadow: 0 1px 2px #0008; transition: transform .1s; }
.big:active { transform: scale(.96); }
.big:disabled { opacity: .45; }
.big.pink { background: linear-gradient(180deg, #ff6fe0, #d42fb4); border-color: #ffc2f2; box-shadow: 0 0 14px rgba(255, 79, 216, .5); }
.big.teal { background: linear-gradient(180deg, #46e8db, #138f8c); border-color: #b5fff8; box-shadow: 0 0 14px rgba(63, 242, 226, .35); }
.big.purple { background: linear-gradient(180deg, #b47bff, #6a2fc9); border-color: #e0c8ff; }
.big.cream { background: linear-gradient(180deg, #ffe8cc, #e1b98d); color: #3a1630; text-shadow: none; border-color: #fff3e2; }
.big.danger { background: rgba(255, 60, 90, .18); border-color: rgba(255, 90, 120, .6); color: #ffb3c4; font-size: 15px; }
.big small { display: block; font-weight: 400; font-size: 13px; opacity: .9; }
.row2 { display: flex; gap: 8px; } .row2 > * { flex: 1; }
.mini { border: 0; border-radius: 12px; padding: 8px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.mini.pink { background: var(--pink); } .mini.teal { background: #17a8a0; } .mini:disabled { opacity: .45; }
.link { background: none; border: 0; color: var(--teal); text-decoration: underline; padding: 4px; }
.pill { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; background: rgba(20, 8, 30, .8); border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; white-space: nowrap; }
.coins img { width: 22px; height: 22px; }
.coins.bump { animation: bump .45s; }
@keyframes bump { 40% { transform: scale(1.22); box-shadow: 0 0 18px #ffd36a; } }
.small { font-size: 13px; opacity: .85; } .center { text-align: center; }
.newTag { display: inline-block; background: rgba(63, 242, 226, .18); border: 1px solid var(--teal); color: #c9fffa; border-radius: 10px; padding: 3px 9px; font-size: 13px; margin: 2px 4px 4px 0; }
.newTag.gold { background: rgba(255, 211, 106, .16); border-color: #ffd36a; color: #ffeab0; }
.tiny { width: 18px; height: 18px; vertical-align: middle; }

/* main menu + character select */
#menu, #choose { align-items: center; justify-content: center; background: radial-gradient(#2a0f3c, var(--ink)); }
#menu .art, #choose .art { width: min(100vw, 177.7vh); aspect-ratio: 1672 / 941; }
.menuList, .choosePanel { display: none; }
#nameArt { position: absolute; left: 37%; top: 70.5%; width: 26%; height: 8%; border-radius: 12px; border: 2px solid var(--teal); background: rgba(10, 4, 20, .82); color: #fff; text-align: center; font-size: clamp(11px, 1.6vw, 20px); outline: none; box-shadow: 0 0 10px rgba(63, 242, 226, .4); }
.dim { position: absolute; top: 0; bottom: 0; background: rgba(8, 2, 18, .58); transition: opacity .25s; pointer-events: none; }
#chooseLook { position: absolute; pointer-events: none; border-radius: 10%; border: 3px solid var(--pink); box-shadow: 0 0 14px var(--pink), inset 0 0 10px var(--pink); animation: pulse 1.4s infinite; transition: all .2s; }
#chooseLook.m { border-color: var(--teal); box-shadow: 0 0 14px var(--teal), inset 0 0 10px var(--teal); }
@keyframes pulse { 50% { filter: brightness(1.5); } }
@media (orientation: portrait) {
  #menu, #choose { flex-direction: column; justify-content: flex-start; overflow-y: auto; }
  #menu .art, #choose .art { width: 100vw; }
  .menuList, .choosePanel { display: block; width: 100%; max-width: 480px; padding: 10px 16px 24px; }
  .rotate { text-align: center; font-size: 13px; opacity: .7; }
  #nameArt { display: none; }
  #choose .art .hs[data-g], #choose .art .hs.face, #choose .art .hs[data-arrow], #confirmHs { pointer-events: none; }
}
.faces { display: flex; gap: 8px; align-items: flex-end; justify-content: center; margin: 6px 0; }
.faceBtn { flex: 1; max-width: 96px; border: 3px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .06); padding: 4px; }
.faceBtn img { width: 100%; border-radius: 10px; display: block; } .faceBtn small { font-size: 11px; }
.faceBtn.on.f { border-color: var(--pink); box-shadow: 0 0 12px var(--pink); } .faceBtn.on.m { border-color: var(--teal); box-shadow: 0 0 12px var(--teal); }
.walkPv { width: 72px; height: 88px; }
.nameIn2 { width: 100%; padding: 12px; border-radius: 14px; border: 2px solid var(--teal); background: rgba(10, 4, 20, .8); color: #fff; font-size: 16px; text-align: center; margin: 6px 0; }

/* house */
#game { flex-direction: column; background: #0d0618; }
.hud { display: flex; align-items: center; gap: 8px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); height: auto; flex: none; z-index: 2; }
#hudRoom { font-weight: 600; color: #ffc9f3; text-shadow: 0 0 8px var(--pink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gameBody { flex: 1; display: flex; min-height: 0; }
.stage { position: relative; flex: 1; min-width: 0; }
.stage canvas { position: absolute; inset: 0; display: block; touch-action: none; }
.side { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; width: 84px; justify-content: center; }
.act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 16px; min-height: 60px; background: linear-gradient(180deg, rgba(60, 20, 80, .92), rgba(30, 10, 45, .92)); border: 2px solid var(--line); box-shadow: 0 0 10px rgba(255, 79, 216, .2); padding: 4px; }
.side.R .act { border-color: rgba(63, 242, 226, .55); box-shadow: 0 0 10px rgba(63, 242, 226, .2); }
.act i { font-style: normal; font-size: 24px; line-height: 1; } .act span { font-size: 12px; font-weight: 600; }
.act:active { transform: scale(.94); }
.act em { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 11px; font-weight: 700; background: #3a2050; border: 1.5px solid #fff5; border-radius: 10px; padding: 1px 6px; }
.act em:empty { display: none; } .act em.hot { background: var(--pink); border-color: #fff; animation: pulse 1s infinite; }
.hintBar { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 12px; background: rgba(13, 6, 24, .7); padding: 3px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
.hintBar:empty { display: none; }
/* portrait info cards */
.info { display: none; order: 5; padding: 10px 12px 0; }
@media (orientation: portrait) {
  .gameBody { flex-direction: column; }
  .stage { flex: none; width: 100%; aspect-ratio: 3 / 2; order: -1; }
  .side { width: 100%; flex-direction: row; flex: 1; max-height: 130px; padding: 8px 10px 0; }
  .side .act { flex: 1; } .act i { font-size: 30px; } .act span { font-size: 13px; }
  .side.R { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .info { display: block; }
  #menu > .art, #choose > .art { margin-top: auto; } #menu > .menuList, #choose > .choosePanel { margin-bottom: auto; }
}
.info .card { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; font-size: 14px; }
.info .card img { height: 40px; } .info .card p { margin: 0; flex: 1; } .info .card .bar { display: block; margin: 4px 0 0; height: 8px; }
.info .card.go { border-color: var(--pink); animation: pulse 1.4s infinite; }

/* overlays */
.overlay { position: fixed; inset: 0; display: none; z-index: 20; }
.overlay.show { display: flex; }
#scene, #decor { flex-direction: column; background: #0d0618; }
.sceneTop { display: flex; align-items: center; gap: 8px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); flex: none; }
#sceneTitle, #decorTitle { font-weight: 600; text-align: center; color: #ffc9f3; text-shadow: 0 0 8px var(--pink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sceneBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sceneArt { position: relative; width: 100%; flex: none; align-self: center; }
.sceneArt > #sceneImg { display: block; width: 100%; }
.cust { position: absolute; left: 5%; bottom: 3%; height: 64%; filter: drop-shadow(0 6px 8px #000a); animation: idle 2.2s ease-in-out infinite; transform-origin: bottom center; }
.sceneArt.plain .cust { height: 96%; bottom: 1%; left: 2.5%; }
.cust.float { animation: floaty 2.4s ease-in-out infinite; }
.cust.secret { filter: drop-shadow(0 0 14px #ffd36a); }
.cust.happy { animation: hop .5s ease-in-out 3; } .cust.ok { animation: idle 1s ease-in-out 2; }
@keyframes idle { 50% { transform: scaleY(.97); } } @keyframes floaty { 50% { transform: translateY(-8%); } } @keyframes hop { 50% { transform: translateY(-14%); } }
#bowl { position: absolute; display: flex; align-items: center; justify-content: center; gap: 0; pointer-events: none; }
.sceneArt.mix.up #bowl { left: 36%; top: 48%; width: 34.4%; height: 30%; } .sceneArt.mix.plain #bowl { left: 41.5%; top: 64%; width: 28%; height: 32%; }
.sceneArt.counter #bowl { display: none; }
#bowl img { height: 78%; max-width: 30%; object-fit: cover; border-radius: 10px; margin: 0 -2%; border: 2px solid #fff6; box-shadow: 0 0 12px var(--pink); animation: pop .3s; }
@keyframes pop { from { transform: scale(.2) translateY(-60%); opacity: 0; } }
#sparkleFx { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#sparkleFx.go { animation: flash .9s; background: radial-gradient(circle at 53% 62%, rgba(255, 255, 255, .95), rgba(255, 79, 216, .6) 18%, rgba(63, 242, 226, .25) 40%, transparent 60%); }
@keyframes flash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.sceneCtl { flex: 1; overflow-y: auto; padding: 10px 14px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.speech { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 0 16px rgba(255, 79, 216, .2); }
.speech .hello { opacity: .85; margin: 4px 0; } .speech .order { font-size: 19px; margin: 6px 0 2px; line-height: 1.35; }
mark { background: none; color: var(--c); font-weight: 700; text-shadow: 0 0 8px var(--c); }
.stars { font-size: 30px; margin: 0; text-align: center; } .pay { font-size: 22px; font-weight: 700; color: #ffe680; text-align: center; margin: 6px 0; } .pay span { color: #ff9be8; font-size: 18px; }
.orderMini { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 10px; margin: 0 0 6px; font-size: 15px; }
.orderMini img { height: 46px; } .orderMini p { margin: 0; } .orderMini.free { display: block; opacity: .9; }
.sceneCtl h4 { margin: 10px 0 4px; color: var(--teal); font-size: 14px; letter-spacing: .5px; } .sceneCtl h4 small { color: #fff9; font-weight: 400; }
.ings { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ing { border: 2px solid rgba(255, 255, 255, .15); border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s; }
.ing img { width: 100%; height: 50px; object-fit: cover; border-radius: 10px; } .ing.herb img { object-fit: contain; height: 58px; }
.ing span { font-size: 12px; font-weight: 600; }
.ing.on { border-color: var(--pink); background: rgba(255, 79, 216, .2); box-shadow: 0 0 12px var(--pink); transform: translateY(-2px); }
.ing.locked { opacity: .35; filter: grayscale(.8); }
.blendBtn { margin-top: 12px; font-size: 20px; }
.made { text-align: center; } .made h3 { margin: 6px 0; font-size: 22px; color: #ffc9f3; text-shadow: 0 0 10px var(--pink); }
.prod { display: flex; justify-content: center; gap: 6px; } .prod img { height: 60px; border-radius: 10px; border: 2px solid #fff5; animation: pop .4s; }
@media (orientation: landscape) and (max-height: 600px) {
  .sceneBody { flex-direction: row; }
  .sceneArt { width: auto; flex: 1.25; align-self: center; }
  .sceneCtl { flex: 1; padding-top: 4px; }
  .speech .order { font-size: 16px; }
  .ing img { height: 34px; } .ing.herb img { height: 40px; }
  .sceneCtl { flex: 1.15; } .sceneCtl h4 { margin: 6px 0 3px; }
  .ings { grid-template-columns: repeat(6, 1fr); gap: 5px; } .ing { padding: 3px; border-radius: 12px; } .ing span { font-size: 11px; }
  .orderMini img { height: 34px; } .orderMini { font-size: 13px; padding: 4px 8px; }
  .blendBtn { margin-top: 8px; font-size: 18px; min-height: 48px; }
}

/* decorate */
.decorBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.decorStage { position: relative; flex: 1; min-height: 0; }
.decorStage canvas { position: absolute; inset: 0; touch-action: none; }
.floatBar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: none; gap: 6px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 6px; box-shadow: 0 0 14px rgba(255, 79, 216, .3); z-index: 2; }
.floatBar.show { display: flex; }
.floatBar button { border: 0; background: rgba(255, 255, 255, .08); border-radius: 12px; width: 58px; height: 52px; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.floatBar button small { font-size: 10px; }
.floatBar.pv { align-items: center; padding: 6px 8px; max-width: 96%; } .floatBar.pv b { font-size: 14px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.floatBar.pv .buy { width: auto; padding: 0 14px; background: var(--pink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.drawer { flex: none; height: 200px; background: rgba(22, 9, 32, .97); border-top: 2px solid var(--line); display: flex; flex-direction: column; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.tabs { display: flex; gap: 6px; margin-bottom: 6px; } .tabs button { flex: 1; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 8px 4px; font-weight: 600; font-size: 14px; }
.tabs button.on { background: rgba(255, 79, 216, .25); border-color: var(--pink); box-shadow: 0 0 10px rgba(255, 79, 216, .4); }
.chips { display: flex; gap: 5px; overflow-x: auto; flex: none; padding-bottom: 4px; scrollbar-width: none; } .chips:empty { display: none; }
.chip { border: 1px solid rgba(63, 242, 226, .5); background: none; border-radius: 12px; padding: 4px 10px; font-size: 12px; white-space: nowrap; } .chip.on { background: rgba(63, 242, 226, .25); }
.dlist { flex: 1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
.dcard { flex: none; width: 92px; border: 2px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 4px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dcard canvas { width: 64px; height: 64px; } .dcard b { font-size: 11.5px; line-height: 1.15; } .dcard small { font-size: 10.5px; opacity: .8; }
.dcard.on { border-color: var(--pink); box-shadow: 0 0 10px var(--pink); } .dcard.prem { border-color: #ffd36a88; } .dcard.locked { opacity: .5; }
.empty { opacity: .7; font-size: 14px; padding: 10px; }
@media (orientation: landscape) {
  .decorBody { flex-direction: row; }
  .drawer { height: auto; width: 270px; border-top: 0; border-left: 2px solid var(--line); }
  .dlist { flex-wrap: wrap; overflow-y: auto; overflow-x: hidden; align-content: flex-start; }
  .dcard { width: calc(33.3% - 4px); }
}

/* modal */
#modal { z-index: 40; align-items: center; justify-content: center; background: rgba(5, 0, 12, .66); backdrop-filter: blur(3px); }
.sheet { width: 94vw; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #2a1040, #170926); border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 0 30px rgba(255, 79, 216, .35); animation: rise .25s; }
#modal.wide .sheet { max-width: 820px; } #modal.small .sheet { max-width: 430px; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.sheetTop { display: flex; align-items: center; padding: 10px 12px 6px 16px; font-size: 19px; } .sheetTop b { flex: 1; color: #ffc9f3; text-shadow: 0 0 8px var(--pink); }
.x { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #fff4; background: #ffffff10; font-size: 18px; }
.sheetBody { overflow-y: auto; padding: 4px 14px 16px; }
.celebrate { text-align: center; } .celebrate img { height: 90px; filter: drop-shadow(0 0 16px #ffd36a); animation: pop .5s; } .burst { font-size: 64px; animation: pop .5s; }
.tips { padding-left: 4px; list-style: none; } .tips li { margin: 8px 0; } .steps li { margin: 8px 0; } .k { border: 1px solid #fff6; border-radius: 6px; padding: 0 5px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.roomBtn { border: 2px solid rgba(255, 255, 255, .15); border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 6px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: center; }
.roomBtn .rimg { display: block; width: 100%; max-height: 110px; border-radius: 10px; background-image: url(img/scene/house.webp); background-repeat: no-repeat; }
.roomBtn:active { border-color: var(--pink); }
.detail { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .05); border-radius: 16px; padding: 8px; margin-bottom: 8px; min-height: 60px; }
.detail canvas { width: 100px; height: 100px; flex: none; } .detail > div { flex: 1; } .detail b { font-size: 18px; } .detail small { display: block; opacity: .8; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } .grid .dcard { width: auto; }
.wardrobe { display: flex; gap: 10px; align-items: center; } .wardrobe canvas { width: 150px; height: 172px; flex: none; background: radial-gradient(rgba(255, 79, 216, .25), transparent 70%); border-radius: 50%; }
.olist { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.orow { display: flex; align-items: center; gap: 6px; border-radius: 12px; padding: 3px 4px; background: rgba(255, 255, 255, .04); border: 1.5px solid transparent; } .orow.on { border-color: var(--pink); }
.oname { flex: 1; text-align: left; background: none; border: 0; padding: 8px 6px; font-weight: 600; }
.dream { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .05); border-radius: 16px; padding: 8px; margin-bottom: 8px; }
.dream img { width: 42%; border-radius: 12px; border: 2px solid var(--line); } .dream small { display: block; opacity: .85; font-size: 12.5px; }
.bar { height: 12px; border-radius: 6px; background: #ffffff1a; overflow: hidden; margin: 6px 0; } .bar.big { height: 18px; border-radius: 9px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--teal)); box-shadow: 0 0 10px var(--pink); }
.ulist { display: flex; flex-direction: column; gap: 6px; }
.urow { display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 6px 8px; }
.urow img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; } .urow .em { width: 64px; text-align: center; font-size: 30px; }
.urow > div { flex: 1; } .urow small { display: block; opacity: .8; font-size: 12.5px; } .urow.own { opacity: .7; } .ok { color: var(--teal); font-weight: 600; white-space: nowrap; }
.quest { text-align: center; } .qtext { font-size: 22px; font-weight: 600; color: #ffe2f8; }
.bookHead { text-align: center; margin-bottom: 8px; } .bookHead small { opacity: .85; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.bitem { background: rgba(255, 255, 255, .04); border: 2px dashed rgba(255, 255, 255, .15); border-radius: 14px; padding: 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 120px; justify-content: center; }
.bitem img, .bitem canvas { height: 64px; width: auto; max-width: 90%; object-fit: contain; filter: brightness(0) drop-shadow(0 0 1px #fff6); opacity: .5; }
.bitem.got { border-style: solid; border-color: rgba(63, 242, 226, .5); } .bitem.got img, .bitem.got canvas { filter: none; opacity: 1; }
.bitem b { font-size: 12.5px; } .bitem small { font-size: 11px; opacity: .75; } .bitem .rec { font-size: 40px; } .bitem.secret:not(.got) { border-color: #ffd36a66; }
.set h4 { color: var(--teal); margin: 14px 0 4px; }
.tog { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid #ffffff14; font-size: 16px; }
.tog input { width: 24px; height: 24px; accent-color: var(--pink); }
.set input:not([type]), .set input[type=email], .set input[type=password] { width: 100%; padding: 11px; border-radius: 12px; border: 1.5px solid #fff3; background: #0d0618; color: #fff; margin: 4px 0; font-size: 16px; }

/* phone */
#phone { z-index: 30; align-items: center; justify-content: center; background: rgba(5, 0, 12, .7); backdrop-filter: blur(4px); }
.phoneFrame { position: relative; height: min(94vh, 188vw); aspect-ratio: 887 / 1774; border-radius: 28px; border: 3px solid #ff4fd8aa; box-shadow: 0 0 30px rgba(255, 79, 216, .5), 0 0 0 6px #160a1f; overflow: hidden; background: #120818; animation: rise .25s; }
.phoneHome { position: absolute; inset: 0; } .phoneHome > img { width: 100%; height: 100%; display: block; }
.clockW { position: absolute; left: 18.6%; top: 9.6%; width: 30.6%; height: 8.2%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #241028 55%, #1b0b1f); border-radius: 10px; pointer-events: none; }
.clockW b { font-size: calc(min(94vh, 188vw) * .042); color: #ff8fe6; text-shadow: 0 0 8px var(--pink); line-height: 1; } .clockW small { font-size: calc(min(94vh, 188vw) * .014); color: #ffc9f3; }
.appTag { position: absolute; font-size: calc(min(94vh, 188vw) * .016); color: #fff; background: var(--pink); border-radius: 10px; padding: 0 4px; box-shadow: 0 0 8px var(--pink); pointer-events: none; animation: pulse 1.6s infinite; }
.appLbl { position: absolute; text-align: center; font-size: calc(min(94vh, 188vw) * .0125); color: #ffd6f6; background: #150a1a; border-radius: 6px; pointer-events: none; }
.app:active { background: rgba(255, 79, 216, .25); }
.phoneApp { position: absolute; inset: 0; display: none; flex-direction: column; background: linear-gradient(180deg, #1d0b28, #0f0616); }
.phoneApp.show { display: flex; }
.appTop { display: flex; align-items: center; gap: 8px; padding: 14px 50px 8px 12px; border-bottom: 1.5px solid var(--line); } .appTop button { border: 0; background: #ffffff14; border-radius: 50%; width: 36px; height: 36px; font-size: 22px; }
.appTop b { font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ffc9f3; text-shadow: 0 0 8px var(--pink); }
.appBody { position: relative; flex: 1; overflow-y: auto; padding: 10px; }
.phoneClose { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #fff5; background: rgba(20, 8, 30, .8); z-index: 3; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gal button { aspect-ratio: .86; border: 2px solid rgba(255, 79, 216, .4); border-radius: 10px; background-size: cover; background-position: center; } .gal button:last-child { grid-column: span 3; aspect-ratio: 1.8; }
.viewer { position: absolute; inset: 0; background: #0a0410; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer button { position: absolute; border: 0; background: rgba(20, 8, 30, .7); border-radius: 50%; width: 42px; height: 42px; font-size: 24px; } .vp { left: 6px; } .vn { right: 6px; } .vx { top: 8px; right: 8px; font-size: 18px !important; }
.viewer span { position: absolute; bottom: 10px; font-size: 13px; opacity: .8; }
.snakeTop { display: flex; justify-content: space-between; padding: 0 6px 6px; font-size: 15px; }
#snakeCv { display: block; margin: 0 auto; border-radius: 12px; border: 2px solid var(--line); box-shadow: 0 0 14px rgba(255, 79, 216, .3); touch-action: none; }
.snakeMsg { position: absolute; left: 10%; right: 10%; top: 22%; text-align: center; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 14px; }
.snakeMsg b { font-size: 20px; color: #ffc9f3; }
.pad { display: flex; flex-direction: column; align-items: center; margin-top: 8px; gap: 4px; } .pad div { display: flex; gap: 60px; }
.pad button { width: 58px; height: 46px; border-radius: 14px; border: 2px solid rgba(63, 242, 226, .6); background: rgba(63, 242, 226, .12); font-size: 20px; }

@media (max-height: 600px) { .pad { margin-top: 4px; gap: 3px; } .pad div { gap: 46px; } .pad button { width: 50px; height: 36px; } .snakeTop { font-size: 13px; padding-bottom: 3px; } }
#toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; transition: all .25s; background: var(--panel); border: 2px solid var(--teal); border-radius: 16px; padding: 10px 16px; z-index: 60; pointer-events: none; max-width: 92vw; text-align: center; box-shadow: 0 0 16px rgba(63, 242, 226, .35); }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { margin-left: 8px; border: 0; border-radius: 10px; background: var(--pink); padding: 4px 10px; font-weight: 600; }
/* Shazzz World account gate + owner tester mode */
#gate { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 50% 30%, rgba(157, 91, 255, .35), rgba(13, 6, 24, .97) 70%), url(img/scene/menu.webp) center/cover; overflow: auto; }
#gate .gbox { width: min(420px, 100%); background: var(--panel); border: 2px solid var(--line); border-radius: 22px; padding: 18px; text-align: center; box-shadow: 0 0 26px rgba(255, 79, 216, .35); }
#gate h2 { margin: 6px 0; color: var(--pink); } #gate p { margin: 6px 0 10px; line-height: 1.35; }
#gate .glogo { width: 72px; height: 72px; border-radius: 18px; }
#gate .set { text-align: left; }
#testerBadge { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 97; display: none; background: #ffcc00; color: #1a0b2e; font-weight: 800; letter-spacing: .12em; font-size: 12px; padding: 3px 12px; border-radius: 999px; border: 2px solid #1a0b2e; box-shadow: 0 0 12px #ffcc00; pointer-events: none; }
#testerBadge.show { display: block; }
.tog.tester { border: 1px dashed #ffcc00; border-radius: 12px; padding: 6px 8px; } .tog.tester span { font-size: 13px; }