.room{--cream: #fff8ec;--paper: #fbf1df;--line: #e5d3b5;--maroon: #6e1f2c;--gold: #c9a54a;--ink: #3a2318;--muted: #8a7462;--en: Fredoka, "Trebuchet MS", "Segoe UI", sans-serif;--bo: "Noto Serif Tibetan", "Microsoft Himalaya", "Kailasa", "Jomolhari", serif;position:fixed;inset:0;z-index:10;display:grid;grid-template-areas:"bar" "stage" "wardrobe" "supporter";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#f2dfbd;color:var(--ink);font-family:var(--en);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.room>*{min-width:0}.room button{font:inherit;color:inherit;cursor:pointer}.room .bo{font-family:var(--bo)}.room .bar{grid-area:bar;display:flex;align-items:center;gap:6px;padding:8px 10px}.room .title{flex:1;margin:0;display:flex;flex-direction:column;line-height:1.05;color:var(--maroon);min-width:0}.room .title .en{font-size:clamp(17px,5vw,22px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room .title .bo{font-size:16px;line-height:1.5;font-weight:400}.room .pill{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border:2px solid var(--gold);border-radius:999px;background:var(--cream);color:var(--maroon);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}.room .pill.round{width:44px;justify-content:center;padding:0;font-size:20px}.room .pill.round[aria-pressed=false]{color:var(--muted);border-color:var(--line);text-decoration:line-through}.room .pill.genla b{font-size:24px;line-height:1}.room .pill.genla>span{display:flex;flex-direction:column;line-height:1.05;font-size:12px}.room .pill.genla .bo{font-size:13px;line-height:1.5}.room .stage{grid-area:stage;position:relative;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#fff7e6,#f5e3c2 55%,#e8cc9e)}.room .her{position:absolute;inset:6px 0 0;width:100%;height:calc(100% - 6px);display:block;touch-action:none;cursor:grab}.room .her:active{cursor:grabbing}.room .namecard{position:absolute;left:10px;top:10px;transform:translateY(-12px);opacity:0;pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:12px;padding:8px 20px 8px 10px;background:var(--cream);border:3px solid var(--gold);border-radius:24px;box-shadow:0 6px 18px #46230f2e;transition:opacity .25s,transform .25s}.room .namecard.show{opacity:1;transform:translateY(0)}.room .namecard i{width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);flex:none}.room .namecard>span{display:flex;flex-direction:column;line-height:1.1}.room .namecard b{font-size:26px;color:var(--ink)}.room .namecard .bo{font-size:26px;line-height:1.6;color:var(--maroon)}.room .wardrobe{grid-area:wardrobe;min-height:0;max-height:48dvh;display:flex;flex-direction:column;background:var(--paper);border-top:3px solid var(--gold);border-radius:22px 22px 0 0;box-shadow:0 -6px 18px #3c1e0a1f}.room .tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 10px 4px}.room .tab{appearance:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:64px;padding:4px 2px;background:transparent;border:2px solid transparent;border-radius:16px}.room .tab[aria-selected=true]{background:var(--cream);border-color:var(--gold)}.room .pic{display:block;width:100%}.room .pic svg{display:block;width:100%;height:100%}.room .tab .pic{height:40px}.room .words{display:flex;flex-direction:column;align-items:center;line-height:1.1}.room .words .en{font-weight:600;font-size:14px;color:var(--maroon)}.room .words .bo{font-size:14px;line-height:1.6;color:var(--muted)}.room .options{display:flex;gap:8px;padding:4px 10px 8px;overflow-x:auto;scroll-snap-type:x proximity;flex:none}.room .card{appearance:none;flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;background:var(--cream);border:2px solid var(--line);border-radius:16px;scroll-snap-align:start}.room .card[aria-pressed=true]{border-color:var(--maroon);box-shadow:0 0 0 3px #6e1f2c2e}.room .card .pic{height:62px}.room .palette-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;padding:2px 14px 4px}.room .palette-head .what{display:flex;gap:6px;align-items:baseline}.room .palette-head .what .en{font-weight:600}.room .palette-head .what .bo{font-size:14px;color:var(--muted)}.room .palette-head .current{display:flex;align-items:center;gap:6px}.room .palette-head .current i{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink)}.room .palette-head .current .bo{font-size:16px;line-height:1.5}.room .palette-head .hint{display:flex;flex-wrap:wrap;gap:0 8px;color:var(--muted);font-size:14px}.room .palette{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:4px;padding:4px 10px 12px}.room .palette[hidden]{display:none}.room .palette{touch-action:pan-y}.room .options{touch-action:pan-x}.room .swatch{appearance:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 4px;background:none;border:0;border-radius:14px}.room .swatch i{width:46px;height:46px;border-radius:50%;border:3px solid rgba(58,35,24,.85);box-shadow:inset 0 -6px #0000001f}.room .swatch i.match{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px)!important}.room .swatch[aria-pressed=true]{background:var(--cream)}.room .swatch[aria-pressed=true] i{outline:3px solid var(--maroon);outline-offset:3px}.room .swatch .en{font-size:12px;font-weight:600;text-align:center;line-height:1.15}.room .swatch .bo{font-size:14px;line-height:1.55;color:var(--muted);text-align:center}.room .swatch.wide{grid-column:span 2}.room .supporter{grid-area:supporter;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px 6px;background:var(--paper);color:var(--muted);font-size:11px}.room .supporter img{height:18px}@media(max-width:480px){.room .pill{padding:6px 10px;font-size:14px}.room .pill .label{display:none}.room .pill[data-act=surprise]{width:44px;justify-content:center;padding:0;font-size:20px}.room .pill.genla{padding:2px 10px 2px 6px;gap:4px}.room .pill.genla .bo{line-height:1.3}.room .bar.with-genla .title{visibility:hidden}.room .title .bo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room .tabs{gap:2px;padding:8px 6px 2px}.room .words .en{font-size:13px}.room .palette{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.room .swatch i{width:42px;height:42px}.room .namecard{gap:8px;padding:6px 12px 6px 8px;border-radius:18px}.room .namecard i{width:30px;height:30px}.room .namecard b,.room .namecard .bo{font-size:18px}}@media(max-aspect-ratio:1/1)and (max-height:760px){.room .wardrobe{max-height:58dvh}.room .tabs{padding-top:6px}.room .tab{min-height:50px}.room .tab .pic{height:24px}.room .card{width:74px;padding:4px}.room .card .pic{height:36px}.room .words .bo{font-size:12px;line-height:1.45}.room .palette{min-height:150px}.room .supporter{display:none}}@media(min-aspect-ratio:1/1){.room{grid-template-areas:"bar bar" "stage wardrobe" "stage supporter";grid-template-columns:minmax(0,1fr) clamp(300px,40vw,540px);grid-template-rows:auto minmax(0,1fr) auto}.room .wardrobe{max-height:none;border-top:0;border-left:3px solid var(--gold);border-radius:22px 0 0;box-shadow:-6px 0 18px #3c1e0a1a}.room .supporter{border-left:3px solid var(--gold)}.room .wardrobe{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.room .options{flex-wrap:wrap;overflow-x:visible;touch-action:pan-y}.room .palette{flex:none;min-height:auto;overflow:visible}}@media(min-aspect-ratio:1/1)and (max-height:520px){.room{grid-template-areas:"stage bar" "stage wardrobe";grid-template-columns:minmax(0,1fr) clamp(320px,56vw,560px);grid-template-rows:auto minmax(0,1fr)}.room .bar{background:var(--paper);border-left:3px solid var(--gold);border-radius:22px 0 0;padding-left:8px}.room .wardrobe{border-radius:0;box-shadow:none}.room .pill .label{display:none}.room .pill[data-act=surprise]{width:44px;justify-content:center;padding:0;font-size:20px}.room .tabs{padding-top:2px}.room .namecard{top:auto;bottom:8px;gap:8px;padding:6px 12px 6px 8px;border-radius:18px}.room .namecard i{width:30px;height:30px}}@media(max-height:520px){.room .bar{padding:4px 10px}.room .title .en{font-size:17px}.room .title .bo{display:none}.room .tab{min-height:48px}.room .tab .pic{height:26px}.room .words .bo{display:none}.room .card{width:76px}.room .card .pic{height:42px}.room .supporter{display:none}.room .namecard b,.room .namecard .bo{font-size:20px}}@media(min-width:1000px)and (min-height:700px){.room .title .en{font-size:28px}.room .title .bo{font-size:18px}.room .tab .pic{height:52px}.room .card{width:112px}.room .card .pic{height:82px}.room .palette{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}.room .swatch i{width:54px;height:54px}.room .swatch .en{font-size:13px}}