:root {
  --ink: #3a2a35;
  --ink-2: #7a6670;
  --paper: #fffaf2;
  --card: #ffffff;
  --line: #f0e2d6;
  --sun: #ffb830;
  --sun-dk: #e08a00;
  --pink: #ff5fa2;
  --pink-dk: #d63a7e;
  --mint: #34c38f;
  --mint-dk: #1f9a6c;
  --sky: #4fb3ff;
  --sky-dk: #2b86d6;
  --red: #ff5b5b;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7fd3f5; color: var(--ink); font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font-family: inherit; }
.hidden { display: none !important; }
.ic { display: block; flex: none; }
.ic-wrap { display: inline-flex; }

/* ---------- HUD ---------- */
#hud { position: absolute; top: calc(var(--st) + 10px); left: calc(var(--sl) + 10px); right: calc(var(--sr) + 10px); display: flex; justify-content: space-between; pointer-events: none; z-index: 5; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 7px 14px 7px 10px; font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 rgba(58,42,53,.18), 0 6px 18px rgba(0,40,80,.12); }
.coins { color: #a86a00; }
.coins .ic { color: var(--sun); }
#clock .ic { color: var(--sun-dk); }
#dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + 10px); display: flex; gap: 4px; background: rgba(255,255,255,.95); padding: 6px; border-radius: 26px; box-shadow: 0 4px 0 rgba(58,42,53,.18), 0 10px 30px rgba(0,40,80,.18); z-index: 5; }
#dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 7px 0 5px; border-radius: 20px; font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
#dock button:active { background: #fff1d6; transform: scale(.95); }
#dock button .ic { color: var(--ink); }
#dock button[data-act=create] .ic-wrap { background: var(--pink); color: #fff; border-radius: 12px; padding: 2px; }
#dock button[data-act=create] .ic { color: #fff; }
.dot { position: absolute; top: 5px; right: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.round { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(58,42,53,.2), 0 6px 16px rgba(0,40,80,.14); }
.round.small { width: 38px; height: 38px; box-shadow: 0 2px 0 rgba(58,42,53,.15); background: #fff4e6; }
.round:active { transform: translateY(2px); }
#back { position: absolute; left: calc(var(--sl) + 12px); top: calc(var(--st) + 58px); z-index: 5; }

/* ---------- pal pins ---------- */
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pin .tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -4px) translateY(-100%); background: rgba(255,255,255,.88); padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 11px; white-space: nowrap; color: var(--ink); box-shadow: 0 1px 0 rgba(58,42,53,.15); }
.pin.far .tag { font-size: 10px; opacity: .85; }
.pin.talking .tag { opacity: 0; }
.thought { pointer-events: auto; position: absolute; left: 0; top: 0; transform: translate(-50%, -150%); width: 44px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--pink-dk); box-shadow: 0 3px 0 rgba(58,42,53,.2), 0 0 0 3px rgba(255,95,162,.35); animation: bob 1.2s ease-in-out infinite; }
.thought::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 10px; height: 10px; margin-left: -9px; border-radius: 50%; background: #fff; }
.thought::before { content: ""; position: absolute; bottom: -15px; left: 50%; width: 5px; height: 5px; margin-left: -8px; border-radius: 50%; background: #fff; }
.thought.p-hungry, .thought.p-craving { color: #e07b00; }
.thought.p-fight { color: var(--red); }
.thought.p-friend { color: var(--sky-dk); }
.thought.p-bored { color: #7a5cff; }
.pin.far .thought { transform: translate(-50%, -140%) scale(.85); }
@keyframes bob { 0%,100% { margin-top: 0; } 50% { margin-top: -5px; } }
.speech { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px)); max-width: 210px; width: max-content; background: #fff; border-radius: 16px; padding: 8px 12px; font-weight: 700; font-size: 14px; line-height: 1.25; text-align: center; box-shadow: 0 3px 0 rgba(58,42,53,.2), 0 8px 20px rgba(0,40,80,.12); animation: pop .18s ease-out; z-index: 2; }
.speech::after { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.room-speech { position: absolute; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, calc(-100% - 2px)) scale(.8); } }

/* ---------- sheet ---------- */
#sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; pointer-events: none; }
.sheet-card { pointer-events: auto; width: 100%; max-width: 560px; margin: 0 auto; max-height: min(62vh, 560px); background: var(--paper); border-radius: 26px 26px 0 0; box-shadow: 0 -6px 30px rgba(0,40,80,.22); display: flex; flex-direction: column; padding-bottom: calc(var(--sb) + 8px); animation: up .22s cubic-bezier(.2,.9,.3,1.2); background-image: radial-gradient(#f6e8da 1.2px, transparent 1.2px); background-size: 16px 16px; }
#sheet.tall .sheet-card { max-height: min(78vh, 700px); }
@keyframes up { from { transform: translateY(40%); opacity: .4; } }
.sheet-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.sheet-top h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 900; text-align: center; }
#sheet-body { overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }

.rhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.face-dot { width: 52px; height: 52px; border-radius: 50%; flex: none; position: relative; background: var(--skin); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08), 0 2px 0 rgba(58,42,53,.2); overflow: hidden; }
.face-dot::before { content: ""; position: absolute; left: -10%; right: -10%; top: -30%; height: 58%; border-radius: 0 0 50% 50%; background: var(--hair); }
.face-dot::after { content: ""; position: absolute; left: 30%; top: 55%; width: 40%; height: 7px; background: radial-gradient(circle, var(--ink) 3px, transparent 3.5px) left/12px 7px no-repeat, radial-gradient(circle, var(--ink) 3px, transparent 3.5px) right/12px 7px no-repeat; }
.face-dot.sm { width: 38px; height: 38px; }
.face-dot.sm::after { height: 5px; background-size: 9px 5px, 9px 5px; }
.names { flex: 1; min-width: 0; }
.nick-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 900; max-width: 100%; }
.nick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nick-btn .ic { color: var(--pink); flex: none; }
.sub { color: var(--ink-2); font-size: 13px; font-weight: 700; margin-top: 1px; }
.lvl { background: var(--sun); color: #fff; font-weight: 900; border-radius: 14px; padding: 6px 10px; font-size: 14px; text-align: center; line-height: 1.05; box-shadow: 0 3px 0 var(--sun-dk); }
.lvl small { display: block; font-size: 10px; opacity: .9; }
.bars { display: grid; gap: 6px; margin: 4px 0 10px; }
.bar { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.bar .track { height: 12px; background: #f1e3d6; border-radius: 999px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 999px; background: var(--mint); transition: width .4s; }
.bar .fill.warn { background: var(--sun); }
.bar .fill.bad { background: var(--red); }
.bar .fill.pink { background: var(--pink); }
.problem { display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid #ffd0e4; border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; }
.problem .ic { color: var(--pink); }
.problem .ptext { flex: 1; font-weight: 800; font-size: 15px; }
.problem-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px; }
.btn { background: var(--pink); color: #fff; font-weight: 900; font-size: 15px; padding: 10px 16px; border-radius: 16px; box-shadow: 0 4px 0 var(--pink-dk); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-dk); }
.btn.alt { background: #fff; color: var(--ink); box-shadow: 0 4px 0 #e6d6c8; border: 2px solid #f0e2d6; }
.btn.alt:active { box-shadow: 0 1px 0 #e6d6c8; }
.btn.mint { background: var(--mint); box-shadow: 0 4px 0 var(--mint-dk); }
.btn.sky { background: var(--sky); box-shadow: 0 4px 0 var(--sky-dk); }
.btn.sun { background: var(--sun); box-shadow: 0 4px 0 var(--sun-dk); }
.btn.danger { background: #fff; color: var(--red); box-shadow: 0 3px 0 #f3d0d0; border: 2px solid #f7dcdc; font-size: 13px; padding: 7px 12px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.gift-banner { width: 100%; margin-bottom: 10px; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act { background: #fff; border-radius: 18px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 #eadbcd; border: 2px solid #f3e6da; }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 #eadbcd; }
.act .ic { color: var(--sky-dk); }
.act:nth-child(1) .ic { color: #e07b00; }
.act:nth-child(2) .ic { color: var(--pink); }
.act:nth-child(4) .ic { color: var(--mint-dk); }
.act:nth-child(5) .ic { color: #7a5cff; }
.foot { display: flex; justify-content: center; margin-top: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.item { position: relative; background: #fff; border-radius: 18px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 12.5px; text-align: center; box-shadow: 0 3px 0 #eadbcd; border: 2px solid #f3e6da; min-height: 104px; }
.item:active { transform: translateY(2px); }
.item.want { border-color: var(--pink); box-shadow: 0 3px 0 var(--pink-dk); }
.item .chip { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.item .chip .ic { filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.item .count { position: absolute; top: 6px; right: 8px; background: var(--ink); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 6px; }
.item .known { position: absolute; top: 6px; left: 6px; }
.item .known.fav { color: var(--pink); } .item .known.like { color: var(--mint); } .item .known.meh { color: var(--ink-2); } .item .known.hate { color: var(--red); }
.item .price { display: inline-flex; align-items: center; gap: 3px; color: #a86a00; font-size: 13px; }
.item .price .ic { color: var(--sun); }
.item.locked { opacity: .5; }
.item.wearing { border-color: var(--mint); }
.swatch-chip { width: 46px; height: 46px; border-radius: 14px; border: 3px solid rgba(0,0,0,.08); }
.section-h { font-weight: 900; font-size: 14px; color: var(--ink-2); margin: 14px 2px 8px; text-transform: uppercase; letter-spacing: .04em; }
.section-h:first-child { margin-top: 2px; }
.empty { text-align: center; color: var(--ink-2); font-weight: 700; padding: 18px 10px; }
.empty .btn { margin-top: 10px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; border: 2px solid #f0e2d6; }
.tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.shop-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: var(--ink-2); font-size: 13px; margin-bottom: 8px; }

.rows { display: grid; gap: 8px; }
.row { background: #fff; border-radius: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 2px solid #f3e6da; text-align: left; width: 100%; }
.row .rt { flex: 1; min-width: 0; }
.row .rt b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .rt small { color: var(--ink-2); font-weight: 700; font-size: 12.5px; }
.row .ric { color: var(--pink); }
.tier { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #f4ece4; color: var(--ink-2); }
.tier.friend { background: #dff5ea; color: var(--mint-dk); }
.tier.best { background: #fff0c9; color: #a86a00; }
.tier.sweet { background: #ffe0ee; color: var(--pink-dk); }
.tier.fight { background: #ffe1e1; color: var(--red); }
.rel { background: #fff; border-radius: 18px; padding: 10px 12px; border: 2px solid #f3e6da; }
.rel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rel-head b { flex: 1; font-size: 16px; }
.callrow { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-top: 6px; }
.field { width: 100%; font-size: 16px; font-weight: 800; color: var(--ink); background: #fff8ef; border: 2px solid #f0dcc8; border-radius: 12px; padding: 8px 10px; outline: none; -webkit-user-select: text; user-select: text; }
.field:focus { border-color: var(--pink); background: #fff; }
.hint { color: var(--ink-2); font-weight: 700; font-size: 13px; }
.news-row { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 2px dashed #f0e2d6; font-weight: 700; font-size: 14.5px; align-items: flex-start; }
.news-row .ic { color: var(--sky-dk); margin-top: 1px; }
.news-row small { display: block; color: var(--ink-2); font-size: 11.5px; margin-top: 2px; }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.door { background: #fff; border-radius: 16px 16px 8px 8px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 12.5px; border: 2px solid #f3e6da; border-top: 8px solid var(--wall); }
.door small { color: var(--ink-2); font-size: 11px; }

/* ---------- modal ---------- */
#modal { position: absolute; inset: 0; z-index: 55; background: rgba(40,30,40,.35); display: grid; place-items: center; padding: 20px; }
.modal-card { width: 100%; max-width: 380px; background: var(--paper); border-radius: 26px; padding: 20px 18px 18px; box-shadow: 0 8px 0 rgba(58,42,53,.18), 0 20px 50px rgba(0,0,0,.25); text-align: center; animation: popin .25s cubic-bezier(.2,.9,.3,1.3); max-height: calc(100vh - 60px); overflow-y: auto; }
@keyframes popin { from { transform: scale(.85); opacity: 0; } }
.modal-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.modal-card p { margin: 6px 0 14px; font-weight: 700; color: var(--ink-2); }
.modal-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.modal-btns.two { flex-direction: row; } .modal-btns.two > * { flex: 1; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 2px; }
.suggest button { background: #fff; border: 2px solid #f0e2d6; border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 13px; }
.gift-opt { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 2px solid #f3e6da; border-radius: 18px; padding: 10px 12px; font-weight: 800; box-shadow: 0 3px 0 #eadbcd; }
.gift-opt .chip { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.hands { display: flex; gap: 14px; justify-content: center; margin: 14px 0 6px; }
.hand { width: 110px; height: 110px; border-radius: 28px; background: #fff; border: 3px solid #f0e2d6; display: grid; place-items: center; color: var(--ink); box-shadow: 0 5px 0 #eadbcd; }
.hand:active { transform: translateY(3px); }
.hand.win { border-color: var(--mint); color: var(--mint-dk); }
.hand.lose { border-color: var(--red); color: var(--red); }
.hand.flip .ic { transform: scaleX(-1); }
.score-dots { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
.score-dots i { width: 14px; height: 14px; border-radius: 50%; background: #eee0d4; }
.score-dots i.w { background: var(--mint); } .score-dots i.l { background: var(--red); }

/* ---------- creator ---------- */
#creator { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; pointer-events: none; }
.cr-top { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--st) + 10px) calc(var(--sr) + 12px) 0 calc(var(--sl) + 12px); }
.cr-title { background: rgba(255,255,255,.94); border-radius: 999px; padding: 8px 16px; font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 rgba(58,42,53,.15); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-panel { pointer-events: auto; margin-top: auto; width: 100%; max-width: 560px; align-self: center; height: 54%; background: var(--paper); border-radius: 26px 26px 0 0; box-shadow: 0 -6px 30px rgba(0,40,80,.22); display: flex; flex-direction: column; padding: 12px 14px calc(var(--sb) + 10px); background-image: radial-gradient(#f6e8da 1.2px, transparent 1.2px); background-size: 16px 16px; }
.cr-body { flex: 1; overflow-y: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.big-btn { width: 100%; background: var(--pink); color: #fff; font-weight: 900; font-size: 18px; padding: 14px; border-radius: 20px; box-shadow: 0 5px 0 var(--pink-dk); flex: none; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pink-dk); }
.ctl { margin-bottom: 12px; }
.ctl > label, .ctl > .lab { display: flex; justify-content: space-between; font-weight: 900; font-size: 13px; color: var(--ink-2); margin: 0 2px 6px; text-transform: uppercase; letter-spacing: .03em; }
.ctl .lab b { color: var(--pink-dk); text-transform: none; letter-spacing: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #eadbcd; }
.sw.on { box-shadow: 0 0 0 3px var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 8px 13px; border-radius: 999px; background: #fff; border: 2px solid #f0e2d6; font-weight: 800; font-size: 14px; }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.slider { display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; }
.slider span:last-child { text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; background: #f1e3d6; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); border: 4px solid #fff; box-shadow: 0 2px 0 var(--pink-dk), 0 2px 6px rgba(0,0,0,.2); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pink); border: 4px solid #fff; }
.ptype { text-align: center; font-weight: 900; font-size: 18px; color: var(--pink-dk); margin: 2px 0 10px; }

/* ---------- welcome and toasts ---------- */
#welcome { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: linear-gradient(180deg, rgba(127,211,245,.2), rgba(255,250,242,.55)); }
.welcome-card { max-width: 360px; width: 100%; text-align: center; background: var(--paper); border-radius: 30px; padding: 26px 22px 22px; box-shadow: 0 8px 0 rgba(58,42,53,.16), 0 24px 60px rgba(0,40,80,.25); animation: popin .4s cubic-bezier(.2,.9,.3,1.3); }
.logo { font-weight: 900; font-size: 52px; line-height: .92; color: var(--pink); letter-spacing: -.02em; text-shadow: 0 4px 0 var(--pink-dk), 0 8px 0 rgba(58,42,53,.12); margin-bottom: 14px; transform: rotate(-3deg); }
.welcome-card p { font-weight: 700; color: var(--ink-2); line-height: 1.4; margin: 8px 0; }
.welcome-card .hint { color: var(--pink-dk); font-weight: 900; margin-bottom: 18px; }
#toasts { position: absolute; top: calc(var(--st) + 60px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 60; }
.toast { background: var(--ink); color: #fff; font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); display: flex; align-items: center; gap: 8px; animation: toastin .25s cubic-bezier(.2,.9,.3,1.3); max-width: 90vw; }
.toast .ic { color: var(--sun); }
.toast.out { opacity: 0; transform: translateY(-8px); transition: all .3s; }
@keyframes toastin { from { transform: translateY(-12px) scale(.9); opacity: 0; } }

/* ---------- room bar ---------- */
#roombar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + 10px); background: rgba(255,255,255,.96); border-radius: 26px; padding: 8px 10px 10px; box-shadow: 0 4px 0 rgba(58,42,53,.18), 0 10px 30px rgba(0,40,80,.18); z-index: 5; text-align: center; }
.room-name { font-weight: 900; font-size: 15px; margin-bottom: 6px; }
.room-btns { display: flex; gap: 4px; }
.room-btns button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 6px 0; border-radius: 16px; font-weight: 800; font-size: 11.5px; color: var(--ink-2); }
.room-btns button:active { background: #fff1d6; }
.room-btns .ic { color: var(--ink); }

/* ---------- landscape: iPad first, iPhone sideways too ---------- */
@media (orientation: landscape) {
  #sheet { align-items: stretch; justify-content: flex-end; }
  .sheet-card { width: min(440px, 46vw); max-width: none; margin: 0; max-height: none; height: 100%; border-radius: 26px 0 0 26px; padding-top: var(--st); padding-right: var(--sr); animation: side .24s cubic-bezier(.2,.9,.3,1.1); }
  #sheet.tall .sheet-card { max-height: none; }
  @keyframes side { from { transform: translateX(40%); opacity: .4; } }
  #creator { flex-direction: row; }
  .cr-top { position: absolute; left: 0; right: min(460px, 48vw); top: 0; }
  .cr-panel { margin: 0 0 0 auto; height: 100%; width: min(460px, 48vw); max-width: none; border-radius: 26px 0 0 26px; padding-top: calc(var(--st) + 12px); padding-right: calc(var(--sr) + 14px); align-self: stretch; }
  #dock { bottom: calc(var(--sb) + 12px); }
  #toasts { top: calc(var(--st) + 14px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .sheet-card { width: min(400px, 52vw); }
  .cr-panel { width: min(420px, 54vw); }
  .cr-top { right: min(420px, 54vw); }
  #dock button { width: 58px; padding: 5px 0 4px; }
  .actions { grid-template-columns: repeat(3, 1fr); }
  .act { padding: 8px 4px 6px; }
  .rhead { margin-bottom: 6px; }
  .welcome-card { padding: 16px 18px; } .logo { font-size: 38px; margin-bottom: 6px; } .welcome-card p { margin: 4px 0; font-size: 14px; }
}
@media (min-width: 900px) and (min-height: 600px) {
  .pin .tag { font-size: 13px; }
  .speech { font-size: 16px; max-width: 260px; }
  .thought { width: 52px; height: 48px; }
  #dock button { width: 76px; font-size: 13px; }
}

.famchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: transparent; border: 2px dashed #e6d6c8; color: #b3a39a; }
.famchip.on { background: #e9e3ff; border-color: #7a5cff; color: #5a3ed0; }
.callin { display: flex; gap: 6px; align-items: center; }
.callin .hear { flex: none; color: var(--pink-dk); }
.rhead .round.small { flex: none; }
#stats { position: absolute; left: 8px; bottom: 8px; z-index: 99; background: rgba(0,0,0,.6); color: #fff; font: 700 12px ui-monospace, monospace; padding: 4px 8px; border-radius: 8px; pointer-events: none; }
.save-code { width: 100%; height: 96px; font: 12px ui-monospace, monospace; border: 2px solid #f0dcc8; border-radius: 12px; padding: 8px; background: #fff8ef; -webkit-user-select: text; user-select: text; }
.a2hs { text-align: left; }
.a2hs ol { margin: 8px 0 0 18px; padding: 0; font-weight: 700; color: var(--ink-2); line-height: 1.5; }

/* ---------- builder ---------- */
#buildbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--sb) + 10px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(96vw, 820px); pointer-events: none; }
#buildbar > * { pointer-events: auto; }
.build-tools { display: flex; gap: 2px; background: rgba(255,255,255,.96); padding: 6px; border-radius: 24px; box-shadow: 0 4px 0 rgba(58,42,53,.18), 0 10px 30px rgba(0,40,80,.18); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.build-tools::-webkit-scrollbar { display: none; }
.build-tools button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 7px 0 5px; border-radius: 18px; font-weight: 800; font-size: 11.5px; color: var(--ink-2); }
.build-tools button.on { background: var(--ink); color: #fff; }
.build-tools button.on .ic { color: #fff; }
.build-tools button.done { background: var(--mint); color: #fff; }
.build-tools button.done .ic { color: #fff; }
.build-hint { background: rgba(58,42,53,.82); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; pointer-events: none !important; }
.build-sel { background: var(--paper); border-radius: 20px; padding: 10px 12px; box-shadow: 0 4px 0 rgba(58,42,53,.18), 0 10px 30px rgba(0,40,80,.18); width: min(96vw, 460px); }
.sel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.sel-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.build-sel .sw { width: 30px; height: 30px; }
@media (orientation: landscape) and (max-height: 500px) { .build-tools button { width: 52px; font-size: 10.5px; padding: 5px 0 4px; } .build-sel { padding: 8px; } }

#turn { position: absolute; right: calc(var(--sr) + 12px); top: calc(var(--st) + 60px); z-index: 5; display: flex; flex-direction: column; gap: 8px; }
#turn .round { width: 44px; height: 44px; }

/* ---------- item art: 3D portraits on a soft tinted card ---------- */
.art { position: relative; width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #ffffff 0%, color-mix(in srgb, var(--tint) 28%, #fff) 58%, color-mix(in srgb, var(--tint) 55%, #fff) 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,.05), inset 0 2px 0 rgba(255,255,255,.8); overflow: hidden; }
.art img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(60,30,40,.18)); }
.art img:not([src]) { visibility: hidden; }
.art.sm { width: 52px; height: 52px; border-radius: 16px; flex: none; } .art.sm img { width: 60px; height: 60px; }
.art.locked img { filter: grayscale(1) opacity(.45); }
.art .lock { position: absolute; right: 6px; bottom: 6px; background: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; color: #cfa02f; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.item { padding: 8px 6px 10px; gap: 6px; min-height: 0; border-radius: 22px; }
.item .price { background: #fff5dc; padding: 2px 9px; border-radius: 999px; }