:root{--pink:#ff7fae;--pink2:#ffabc8;--pink3:#fff0f6;--ink:#4d333f;--muted:#9b7386;--line:#f6bdd2;--white:rgba(255,255,255,.94);--shadow:0 12px 34px rgba(93,53,71,.15);--deep-shadow:0 22px 70px rgba(69,38,52,.23)} *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f8f2f4;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif}button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}em{font-style:normal}.screen{position:fixed;inset:0;display:none;overflow:hidden}.screen.active{display:block}.overlay{position:fixed;inset:0;z-index:100;display:none}.overlay.open{display:flex}.backdrop{position:fixed;inset:0;z-index:70;background:rgba(58,31,44,.28);opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(3px)}.backdrop.open{opacity:1;pointer-events:auto}.wide{width:100%} .primary-button,.secondary-button{border:0;border-radius:22px;padding:13px 20px;font-weight:900;box-shadow:0 8px 22px rgba(91,50,68,.12);transition:.15s}.primary-button{background:linear-gradient(135deg,#ff7fac,#ff9abd);color:#fff}.secondary-button{background:rgba(255,255,255,.95);border:2px solid #ffd0df}.primary-button:active,.secondary-button:active{transform:scale(.98)}.primary-button span{margin-right:7px}.primary-button small,.secondary-button small{display:block;font-size:9px;opacity:.8;margin-top:2px}.pill-button,.sound-button{border:0;background:rgba(255,255,255,.86);border-radius:999px;padding:9px 14px;font-size:12px;font-weight:800;box-shadow:0 6px 20px rgba(77,45,59,.08)}.hamburger{width:54px;height:54px;border:4px solid rgba(255,255,255,.88);background:linear-gradient(#ff8bb4,#ff76a7);border-radius:50%;display:grid;align-content:center;justify-items:center;gap:5px;box-shadow:0 6px 18px rgba(121,56,83,.17)}.hamburger i{display:block;width:24px;height:3px;border-radius:999px;background:#fff}.back-button{width:48px;height:48px;border:0;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:20px;font-weight:900} /* TOP */ .top-screen{background:#e8c1c5}.top-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.92)}.top-glow{position:absolute;inset:0;background:linear-gradient(180deg,rgba(68,38,53,.06),rgba(246,155,187,.17)),radial-gradient(circle at 50% 48%,rgba(255,255,255,.06),rgba(89,43,63,.16));backdrop-filter:blur(.25px)}.top-header{position:absolute;z-index:4;top:20px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:11px;font-weight:900;letter-spacing:.13em;text-shadow:0 2px 10px rgba(69,36,50,.3)}.top-actions{display:flex;gap:9px;align-items:center}.top-actions .hamburger{width:48px;height:48px}.top-logo-stage{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);width:min(86vw,1320px);text-align:center}.top-logo{display:block;width:100%;height:auto;max-height:64vh;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 8px 22px rgba(67,36,49,.17));opacity:.98}.top-logo-stage p{margin:-34px 0 12px;color:#fff;font-size:clamp(22px,2.4vw,38px);font-weight:900;text-shadow:0 3px 15px rgba(74,37,54,.24)}.debut-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(255,255,255,.43);border-radius:999px;background:rgba(255,255,255,.15);backdrop-filter:blur(14px);color:#fff}.debut-chip span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#31242a;color:#ff86b1;font-size:8px;animation:spin 4s linear infinite}.debut-chip b{font-size:13px}.debut-chip small{font-size:9px;opacity:.78}.top-cta{position:absolute;z-index:4;left:50%;bottom:5.2vh;transform:translateX(-50%);display:flex;gap:12px}.top-cta .primary-button{min-width:290px}.top-cta .secondary-button{min-width:150px}@keyframes spin{to{transform:rotate(360deg)}} /* common pages */ .lobby-screen,.pass-screen{background:#faf4f2}.page-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.page-soft{position:absolute;inset:0;background:rgba(255,250,248,.82);backdrop-filter:blur(2px)}.page-head,.cast-head{position:relative;z-index:4;height:92px;padding:18px 4vw;display:flex;align-items:center;gap:18px}.page-brand{display:flex;align-items:center;gap:11px}.page-brand img{width:82px;max-height:54px;object-fit:contain}.page-brand small,.cast-head small{display:block;font-size:9px;letter-spacing:.14em;color:#bd7797;font-weight:900}.page-brand b{font-size:17px}.head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.rank-chip{background:#fff;border:2px solid #ffd4e2;border-radius:999px;padding:10px 14px;font-size:10px;font-weight:900}.lobby-content{position:relative;z-index:2;margin:20px 6vw 0;display:grid;grid-template-columns:.85fr 1.2fr;gap:28px;height:calc(100vh - 145px)}.welcome-card,.today-board,.paper-card{background:rgba(255,255,255,.94);border:2px solid #fff;border-radius:34px;box-shadow:var(--shadow)}.welcome-card{padding:42px;align-self:stretch}.welcome-card>span,.sticker{display:inline-block;background:#ff82ae;color:#fff;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:900}.welcome-card h1{font-size:clamp(30px,3.1vw,54px);line-height:1.06;margin:22px 0 16px}.welcome-card h1 em{color:#ff6fa5}.welcome-card p{font-size:14px;line-height:1.8;color:#725a65;max-width:520px}.welcome-card .primary-button{margin-top:24px}.today-board{padding:28px}.today-board header{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.today-board header span{font-size:22px;font-weight:900}.today-board header small{color:#c783a1;font-weight:900}.lobby-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lobby-card{min-height:150px;border:0;border-radius:25px;padding:24px;text-align:left;box-shadow:0 7px 16px rgba(87,49,66,.07)}.lobby-card span{font-size:30px}.lobby-card b{display:block;font-size:17px;margin:9px 0 2px}.lobby-card small{font-size:10px;color:#8e7280}.lobby-card.pink{background:#ffeaf2}.lobby-card.mint{background:#e7faf4}.lobby-card.lemon{background:#fff6d1}.lobby-card.blue{background:#eaf5ff}.pass-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:28px;width:min(1080px,88vw);margin:50px auto}.paper-card{padding:36px}.paper-card h2{font-size:28px;margin:17px 0}.paper-card p{color:#765d69;line-height:1.7}.mint-sticker{background:#69cbb3}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.plan{border:2px solid #f1dce5;background:#fff;border-radius:24px;padding:22px}.plan.selected{border-color:#ff81ad;box-shadow:0 0 0 4px #ffe3ed}.plan span{display:block;font-size:10px;color:#b97695}.plan b{display:block;font-size:27px;margin:8px 0}.plan strong{color:#ff659d}.rank-form{display:flex;gap:8px}.rank-form input{flex:1;border:2px solid #f0d9e3;border-radius:15px;padding:13px}.rank-form button{border:0;background:#ff7cab;color:#fff;border-radius:15px;padding:0 20px;font-weight:900}.rank-result{font-weight:800;font-size:12px}.rank-result.ok{color:#39a284} /* cast select */ .cast-screen{background:linear-gradient(135deg,#fff7fa,#fffdf4)}.cast-head{height:105px;background:rgba(255,255,255,.88);box-shadow:0 5px 20px rgba(80,44,61,.06)}.cast-head h2{margin:3px 0;font-size:25px}.cast-head p{margin:0;font-size:11px;color:#8d7180}.polaroid-grid{height:calc(100vh - 105px);overflow:auto;padding:28px 4vw 45px;display:grid;grid-template-columns:repeat(6,minmax(145px,1fr));gap:20px;align-items:start}.polaroid{--rot:0deg;transform:rotate(var(--rot));border:0;background:#fff;padding:10px 10px 15px;box-shadow:0 10px 22px rgba(80,47,62,.12);border-radius:5px;text-align:left;transition:.15s}.polaroid:hover{transform:translateY(-5px) rotate(0)}.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.polaroid small{display:block;margin-top:8px;color:#c9789a;font-size:8px;font-weight:900}.polaroid b{display:block;font-size:18px}.polaroid em{font-size:8px;color:#997987}.polaroid.center{outline:3px solid #ff8bb5;outline-offset:4px} /* ROOM — visual source of truth */ .corner-ribbon{position:absolute;left:23px;top:-19px;font-size:34px}.music-toggle,.random-btn{border:2px solid #ffabc5;background:#fff;border-radius:999px;color:#d85d8e;font-size:10px;font-weight:900}.music-toggle{grid-column:1}.random-btn{grid-column:2}.talk-dock{position:absolute;z-index:16;left:50%;bottom:131px;transform:translateX(-50%);width:475px;border:3px solid #ffd0df;background:rgba(255,255,255,.95);border-radius:33px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(13px);transition:.18s}.talk-dock>header{height:79px;display:flex;align-items:center;padding:0 24px;gap:15px}.talk-heart{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff1f6;color:#ff6fa2}.talk-dock small{display:block;color:#d16e98;font-size:9px;letter-spacing:.12em;font-weight:900}.talk-dock b{font-size:15px}.talk-dock>header button{margin-left:auto;width:48px;height:48px;border:0;border-radius:50%;background:#ffdfea;font-size:28px}.talk-content{display:none;padding:0 18px 16px;border-top:1px solid #f7dce5}.talk-dock.open{width:min(760px,calc(100vw - 40px))}.talk-dock.open .talk-content{display:block}.talk-dock.open>header button{font-size:20px}.chat-log{display:flex;gap:7px;overflow-x:auto;padding:10px 0;max-height:88px}.msg{flex:0 0 auto;max-width:70%;border-radius:15px;padding:8px 11px;font-size:12px;line-height:1.45}.msg.cast{background:#fff0f5}.msg.user{background:#e9f6ff}.msg b{display:block;font-size:9px;color:#c36d94}.talk-chips{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px}.talk-chips button{flex:0 0 auto;border:0;border-radius:999px;background:#f7edf2;padding:7px 11px;font-size:10px}.talk-content form{display:flex;gap:7px}.talk-content input{flex:1;border:2px solid #efd8e2;border-radius:15px;padding:11px 13px;outline:0}.talk-content form>button:last-child{border:0;border-radius:15px;background:#ff78aa;color:#fff;padding:0 18px;font-weight:900}.mic-btn{width:44px;border:0!important;border-radius:15px!important;background:#e8f7ff!important}.mic-btn.listening{background:#ffe1ec!important;animation:pulse .7s alternate infinite}@keyframes heartfly{from{opacity:1;transform:translate(0,0) scale(.6)}to{opacity:0;transform:translate(var(--x),var(--y)) scale(1.4)}}@keyframes pulse{to{transform:scale(1.06)}} /* drawer + sheet */ .nav-drawer{position:fixed;z-index:80;right:0;top:0;bottom:0;width:min(430px,94vw);background:#fffafc;transform:translateX(104%);transition:.24s;box-shadow:-25px 0 70px rgba(66,38,51,.18);padding:20px;overflow:auto}.nav-drawer.open{transform:translateX(0)}.nav-drawer>header{display:flex;justify-content:space-between;align-items:center}.nav-drawer>header>div{display:flex;align-items:center;gap:10px}.nav-drawer>header img{width:76px}.nav-drawer>header small{display:block;color:#c27697;font-size:9px}.nav-drawer>header b{font-size:19px}.nav-drawer>header>button,.sheet>header>button,.menu-overlay>header>button,.event-overlay>header>button{border:0;width:43px;height:43px;border-radius:50%;background:#ffeaf2;font-size:23px}.nav-profile{margin:18px 0;background:#ffeef4;border-radius:24px;padding:17px;display:grid;grid-template-columns:1fr auto}.nav-profile span{font-size:10px;color:#b95d89;font-weight:900}.nav-profile b{font-size:15px}.nav-profile small{grid-column:1/3;margin-top:5px;color:#8c6d7b}.nav-profile em{font-style:normal}.nav-drawer nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.nav-drawer nav button{border:0;background:#fff;border-radius:18px;padding:12px;text-align:left;box-shadow:0 4px 12px rgba(73,43,55,.06)}.nav-drawer nav button span{font-size:19px}.nav-drawer nav button b{display:block;font-size:12px;margin-top:4px}.nav-drawer nav button small{font-size:8px;color:#9d7d8b}.nav-drawer footer{display:flex;gap:8px;margin-top:14px}.nav-drawer footer button{flex:1;border:0;border-radius:15px;padding:11px;background:#f7eaf0;font-size:10px;font-weight:900}.sheet{position:fixed;z-index:90;right:0;top:0;bottom:0;width:min(620px,96vw);background:#fffafc;transform:translateX(104%);transition:.24s;box-shadow:-20px 0 65px rgba(67,39,51,.18);padding:22px;overflow:auto}.sheet.open{transform:translateX(0)}.sheet>header,.menu-overlay>header,.event-overlay>header{display:flex;justify-content:space-between;align-items:flex-start}.sheet>header small,.menu-overlay>header small,.event-overlay>header small{color:#c36e95;font-size:9px;letter-spacing:.12em;font-weight:900}.sheet>header h2,.menu-overlay>header h2,.event-overlay>header h2{margin:3px 0;font-size:26px}.sheet-body{padding-top:12px}.sheet-tabs,.menu-tabs{display:flex;gap:7px;overflow:auto;margin:12px 0}.sheet-tabs button,.menu-tabs button{border:0;border-radius:999px;background:#f4e6ed;padding:8px 13px;font-size:10px;font-weight:900}.sheet-tabs button.active,.menu-tabs button.active{background:#ff82ad;color:#fff}.card-list,.menu-grid,.staff-grid,.music-list,.memo-list,.support-grid,.gift-grid{display:grid;gap:10px}.menu-grid{grid-template-columns:1fr 1fr}.menu-card,.support-card,.gift-card,.staff-card,.track-card,.memo-card{border:0;background:#fff;border-radius:20px;padding:14px;text-align:left;box-shadow:0 5px 14px rgba(79,45,60,.07)}.menu-card{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center}.menu-card>span{font-size:27px}.menu-card b,.support-card b,.gift-card b,.staff-card b{display:block;font-size:13px}.menu-card small,.support-card small,.gift-card small,.staff-card small{display:block;color:#967483;font-size:9px;line-height:1.45}.menu-card strong{color:#dc6493;font-size:11px}.staff-card{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center}.staff-card img{width:58px;height:58px;border-radius:16px;object-fit:cover}.staff-card button{border:0;border-radius:999px;background:#ffe7f0;padding:8px 10px;font-size:9px;font-weight:900}.staff-card.locked{filter:grayscale(.8)}.track-card{display:flex;justify-content:space-between;align-items:center}.track-card.active{outline:2px solid #ff8bb4}.memo-card small{display:block;color:#a37d8f;margin-top:4px} /* dedicated menu */ .menu-overlay{background:radial-gradient(circle at 15px 15px,#ffe2ed 2px,transparent 2.5px) 0 0/30px 30px,linear-gradient(135deg,#fff8fb,#fffdf0 50%,#f2fffb);padding:24px;flex-direction:column;overflow:auto}.menu-overlay>header{background:rgba(255,255,255,.9);border-radius:28px;padding:20px 24px;box-shadow:var(--shadow)}.menu-overlay>header p{margin:5px 0 0;color:#8b7180;font-size:11px}.menu-book-body{width:min(1120px,94vw);margin:18px auto}.menu-book-body .menu-grid{grid-template-columns:repeat(3,1fr)} /* tutorial */ .tutorial-overlay{align-items:center;justify-content:center;background:rgba(76,42,57,.35);backdrop-filter:blur(6px)}.tutorial-card{width:min(900px,92vw);background:#fffafc;border-radius:34px;box-shadow:var(--deep-shadow);display:grid;grid-template-columns:42% 58%;overflow:hidden}.tutorial-photos{display:grid;grid-template-columns:1fr 1fr;background:#ffe8f1;padding:28px;gap:10px}.tutorial-photos img{width:100%;height:100%;object-fit:cover;border-radius:22px}.tutorial-copy{padding:38px}.tutorial-copy>span{color:#cc7098;font-size:10px;font-weight:900}.tutorial-copy h2{font-size:31px;margin:9px 0}.tutorial-copy p{white-space:pre-line;line-height:1.75;color:#6e5661}.tutorial-copy footer{display:flex;gap:9px;margin-top:22px}.tutorial-copy footer button{flex:1}.buddy-choice{display:flex;gap:10px;margin-top:18px}.buddy-choice button{flex:1;border:2px solid #f1d4e0;background:#fff;border-radius:18px;padding:12px}.buddy-choice button.active{border-color:#ff83ad;background:#fff0f6} /* events */ .event-overlay{background:#fff9fc;flex-direction:column;padding:24px;overflow:auto}.event-overlay>nav{display:flex;gap:8px;margin:14px 0}.event-overlay>nav button{border:0;border-radius:999px;padding:10px 16px;background:#f3e7ed;font-weight:900}.event-overlay>nav button.active{background:#ff82ad;color:#fff}.event-body{width:min(1180px,94vw);margin:0 auto 40px}.road-grid,.calendar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stage-card,.calendar-card,.story-card,.dice-panel{border:0;background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow)}.stage-card.locked,.calendar-card.locked{filter:grayscale(.65);opacity:.68}.stage-card small,.calendar-card span{color:#c77198;font-size:9px;font-weight:900}.stage-card h3,.calendar-card h4{margin:8px 0}.stage-card p,.calendar-card p{font-size:11px;color:#806672;line-height:1.6}.stage-card button{border:0;border-radius:999px;background:#ff82ad;color:#fff;padding:9px 13px;font-weight:900}.calendar-head{margin:12px 0 16px}.calendar-head small{color:#c36e96;font-weight:900}.sugoroku-wrap{display:grid;grid-template-columns:1fr 260px;gap:18px}.sugoroku-board{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.sugoroku-cell{min-height:90px;background:#fff;border-radius:18px;padding:10px;box-shadow:0 4px 12px rgba(75,44,56,.07)}.sugoroku-cell.current{outline:3px solid #ff80ad;background:#fff0f5}.sugoroku-cell small{font-size:8px;color:#c47598}.sugoroku-cell b{display:block;margin-top:6px;font-size:10px}.dice{font-size:70px;text-align:center}.dice-panel button{width:100%;border:0;border-radius:18px;padding:12px;background:#ff82ad;color:#fff;font-weight:900}.event-scene{position:relative;min-height:330px;border-radius:28px;overflow:hidden;background:#eee;margin:12px 0}.event-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.event-scene>div{position:absolute;inset:auto 0 0;padding:50px 24px 24px;background:linear-gradient(transparent,rgba(39,25,32,.75));color:#fff}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-grid button{border:0;border-radius:18px;padding:16px;background:#fff;box-shadow:var(--shadow);text-align:left}.choice-grid b{display:block}.choice-grid small{color:#9b7486} /* media/time/memory/result */ .time-overlay,.memory-overlay{align-items:center;justify-content:center;background:rgba(75,42,56,.33);backdrop-filter:blur(5px)}.time-card,.memory-card{width:min(560px,90vw);background:#fff;border-radius:34px;padding:38px;text-align:center;box-shadow:var(--deep-shadow)}.time-card>span,.memory-card>span{color:#d76796;font-size:10px;font-weight:900;letter-spacing:.12em}.time-card h2,.memory-card h2{font-size:29px}.time-card>div{display:flex;gap:10px;margin-top:22px}.time-card>div button{flex:1}.memory-card div{font-size:38px;margin-top:12px}.memory-card p{color:#765d69}.result-screen{background:linear-gradient(135deg,#fff0f6,#fffdf5);overflow:auto}.result-card{width:min(650px,90vw);margin:50px auto;background:#fff;border-radius:36px;padding:35px;box-shadow:var(--deep-shadow);text-align:center}.result-sticker{background:#ff80ad;color:#fff;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:900}.result-card h1{font-size:34px}.result-card>img{width:230px;aspect-ratio:4/5;object-fit:cover;border-radius:22px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.result-stats span{background:#fff0f5;border-radius:16px;padding:10px;font-size:9px}.result-stats b{display:block;font-size:18px}.result-history{max-height:160px;overflow:auto;text-align:left;background:#faf6f8;border-radius:17px;padding:10px}.result-history div{font-size:10px;padding:6px;border-bottom:1px solid #eadce2}.toast{position:fixed;z-index:200;left:50%;bottom:35px;transform:translate(-50%,20px);background:#3f3038;color:#fff;border-radius:999px;padding:11px 18px;font-size:11px;font-weight:900;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:1100px){.polaroid-grid{grid-template-columns:repeat(4,1fr)}.lobby-content{grid-template-columns:1fr}.today-board{display:none}} @media(max-width:760px){.top-logo-stage{width:96vw}.top-logo-stage p{margin:-12px 0 10px;font-size:20px}.top-cta{width:92vw}.top-cta .primary-button{min-width:0;flex:1}.top-cta .secondary-button{min-width:0}.talk-dock{bottom:105px;width:300px}.talk-dock>header{height:60px}.polaroid-grid{grid-template-columns:repeat(2,1fr)}.pass-content{grid-template-columns:1fr;margin:20px auto;height:calc(100vh - 110px);overflow:auto}.menu-book-body .menu-grid{grid-template-columns:1fr}.road-grid,.calendar-grid{grid-template-columns:1fr}.sugoroku-wrap{grid-template-columns:1fr}.sugoroku-board{grid-template-columns:repeat(4,1fr)}} /* ========================================================= NYAAS MAJOR REBUILD 2026-08-11 Consolidated visual system for the final build. ========================================================= */ :root{ --pop-pink:#ff7fa9;--pop-pink2:#ffabc5;--pop-blush:#fff1f6;--pop-cream:#fffaf5; --pop-gold:#f0c66f;--pop-mint:#b9f1df;--pop-blue:#c7e4ff;--pop-lilac:#dbc8ff; --pop-border:#ffc6d8;--pop-ink:#513641;--ui-scale:.82; } /* Preserve original media quality. No blur/filter/effect over the cast. */ /* Main room UI — roughly 80% of the supplied design proportions. */ .talk-dock{zoom:var(--ui-scale)} /* POP buddy window */ @keyframes buddyPop{0%{transform:scale(1)}35%{transform:scale(1.045) rotate(-.4deg)}100%{transform:scale(1)}} /* Oshi status — clearer relationship feedback */ /* Music controls — direct, clickable, visible. */ .random-btn.active{background:#ff79a6!important;color:#fff!important} /* Bottom action bar: same family as the supplied POP design. */ /* Keep the room visually quiet: no passive decorations over the performer. */ /* Chat: buddy is visibly a separate guide. */ .msg.buddy{background:linear-gradient(135deg,#fff8d9,#fff2bf)!important;border:1px solid #f1cd72!important;color:#655029!important} .msg.buddy b{color:#b67b20!important} /* Order / gift / cheer unified window */ .menu-overlay{background:rgba(82,47,63,.28)!important;backdrop-filter:blur(5px);padding:5vh 5vw!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .order-window-head{position:absolute!important;z-index:4!important;top:5.8vh!important;right:5.8vw!important;left:auto!important;background:transparent!important;border:0!important;padding:0!important} .order-window-head>div{display:none}.order-window-head button{width:46px!important;height:46px!important;border:3px solid #fff!important;outline:2px solid #ffb7cd!important;border-radius:50%!important;background:#fff7fa!important;color:#dc638d!important;font-size:25px!important;box-shadow:0 8px 18px rgba(90,48,66,.13)} .menu-book-body{width:min(1320px,92vw)!important;height:min(820px,88vh)!important;margin:0!important;border:4px solid #fff!important;outline:2px solid #ffc2d5;border-radius:38px!important;overflow:hidden!important;background:linear-gradient(135deg,#fff9fc,#fffdf8)!important;box-shadow:0 25px 80px rgba(64,35,49,.25)!important} .order-layout{display:grid;grid-template-columns:28% 72%;height:100%} .order-cast{position:relative;background:linear-gradient(180deg,#f8f1f5,#fff);border-right:2px solid #ffd3e1;overflow:hidden} .order-cast:before{content:"にゃ〜ず";position:absolute;z-index:2;left:20px;top:18px;font-size:27px;font-weight:950;color:#423238;text-shadow:0 2px #fff} .order-cast img{width:100%;height:70%;object-fit:cover;object-position:center top;display:block} .order-cast>div{position:absolute;left:15px;right:15px;bottom:18px;background:rgba(255,255,255,.96);border:2px solid #ffd1df;border-radius:25px;padding:15px 17px;box-shadow:0 8px 22px rgba(93,49,68,.10)} .order-cast small{display:block;color:#e16b97;font-weight:900;letter-spacing:.12em}.order-cast b{display:block;font-size:24px;margin:3px 0}.order-cast em{display:block;color:#886d79;font-size:11px}.order-cast span{display:block;margin-top:10px;font-size:11px;font-weight:900;color:#d45889} .order-main{padding:29px 34px 24px;overflow:auto;background:radial-gradient(circle at 80% 10%,rgba(255,220,232,.35),transparent 27%),linear-gradient(#fff,#fffafc)} .order-main>header{text-align:center;border-bottom:2px solid #ffd5e2;margin-bottom:18px;padding-bottom:13px}.order-main>header small{color:#e35f8d;font-weight:900;letter-spacing:.16em}.order-main>header h2{font-family:Georgia,"Times New Roman",serif;font-size:34px;margin:3px 0;color:#42332e;letter-spacing:.06em}.order-main>header p{margin:0;color:#8b6d7b;font-size:11px} .menu-tabs,.shop-switch{display:flex;gap:7px;justify-content:center;margin:13px 0 18px}.menu-tabs button,.shop-switch button{border:0;background:#fff;border:2px solid #f3d9e3;border-radius:17px;padding:11px 17px;font-weight:900}.menu-tabs button.active,.shop-switch button.active{background:linear-gradient(#ff8fb3,#ff729f);color:#fff;border-color:#ff8db2} .pop-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important} .pop-card{min-height:116px!important;background:linear-gradient(145deg,#fff,#fff9fb)!important;border:2px solid #ffd8e5!important;border-radius:23px!important;padding:12px 14px!important;text-align:left!important;box-shadow:0 7px 15px rgba(102,56,75,.08)!important;position:relative;transition:.14s}.pop-card:hover{transform:translateY(-2px);box-shadow:0 11px 20px rgba(102,56,75,.12)!important}.pop-card.favorite{border-color:#ff9cbc!important;background:linear-gradient(145deg,#fff4f8,#fff)!important}.pop-icon{font-size:29px!important;display:block!important}.pop-card b{display:block;font-size:14px;margin:5px 0 2px}.pop-card small{display:block;font-size:9px;color:#937481;line-height:1.35}.pop-card strong{position:absolute;right:13px;bottom:11px;color:#d65385;font-size:11px} /* Staff, compatibility, music */ .staff-intro,.compat-hero,.music-console{background:linear-gradient(135deg,#fff3f8,#fffdf8);border:2px solid #ffd0df;border-radius:25px;padding:18px;margin-bottom:15px;box-shadow:0 8px 18px rgba(90,50,67,.07)} .staff-intro{display:grid;grid-template-columns:1fr auto;gap:4px 20px}.staff-intro b{font-size:20px}.staff-intro span{grid-column:1;color:#826874;font-size:11px}.staff-intro button{grid-column:2;grid-row:1/3;border:0;border-radius:18px;background:#ff82ab;color:#fff;padding:0 17px;font-weight:900} .staff-card em{display:block;color:#e27099;font-size:10px;font-style:normal;font-weight:900;margin-top:4px} .staff-card.buddy{outline:3px solid #ff9fbe!important} .compat-hero{display:flex;gap:18px;align-items:center}.compat-hero img{width:130px;height:130px;object-fit:cover;border-radius:22px;border:4px solid #fff;outline:2px solid #ffc1d5}.compat-hero h3{font-size:24px;margin:4px 0}.compat-hero p{line-height:1.7;color:#765f69} .compat-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.compat-list>div{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;background:#fff;border:2px solid #f6d9e4;border-radius:19px;padding:8px 12px}.compat-list img{width:48px;height:48px;border-radius:50%;object-fit:cover}.compat-list b,.compat-list small{display:block}.compat-list small{color:#8d7380}.compat-list strong{color:#ec78a1;letter-spacing:.06em} .music-console{display:flex;align-items:center;justify-content:space-between}.music-console h3{margin:3px 0;font-size:22px}.music-console>div:last-child{display:flex;gap:7px}.music-console button{border:0;border-radius:999px;padding:9px 12px;background:#fff;border:2px solid #ffd4e2;font-weight:900}.music-console button.active{background:#ff79a5;color:#fff} /* IDOL ROAD — place-based, buddy accompanied, game-like */ .event-overlay{background:linear-gradient(#fff8fb,#fffdf7)!important} .event-body{width:min(1240px,95vw)!important} .story-hero{min-height:330px;border-radius:32px;background-size:cover;background-position:center;display:grid;grid-template-columns:220px 1fr;align-items:end;overflow:hidden;box-shadow:0 18px 42px rgba(80,44,60,.18);margin-bottom:15px;border:4px solid #fff;outline:2px solid #ffc1d5} .story-hero img{width:205px;max-height:300px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 8px 14px rgba(35,20,28,.25))} .story-hero>div{color:#fff;padding:34px 34px 29px;text-shadow:0 2px 8px rgba(35,20,28,.45)}.story-hero h2{font-size:30px;margin:6px 0}.story-hero p{font-size:14px}.story-hero em{display:block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);border-radius:17px;padding:10px 13px;margin:12px 0 15px;font-style:normal}.story-hero button{border:0;border-radius:999px;padding:12px 22px;background:#ff7ca8;color:#fff;font-weight:950;box-shadow:0 7px 20px rgba(0,0,0,.15)} .road-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.road-stats span{background:#fff;border:2px solid #ffd8e5;border-radius:20px;padding:11px 14px;color:#d65d89;font-weight:900}.road-stats b{float:right;font-size:20px;color:#563d48} .road-grid{grid-template-columns:repeat(2,1fr)!important}.stage-card{padding:0!important;overflow:hidden;display:grid!important;grid-template-columns:180px 1fr;min-height:170px}.stage-card>img{width:100%;height:100%;object-fit:cover}.stage-card>div{padding:18px}.stage-card h3{margin:5px 0}.stage-card button{border:0;border-radius:999px;padding:9px 13px;background:#ff7da9;color:#fff;font-weight:900} .choice-grid button{border-radius:22px!important;border:2px solid #ffd0df!important;background:#fff!important;box-shadow:0 7px 15px rgba(95,49,69,.08)!important} /* Calendar — matches the pink lace / ribbon direction of supplied design. */ .nyaas-calendar{background:linear-gradient(135deg,#fff6f6,#fffdf7);border:6px double #ffb5c9;border-radius:34px;padding:24px 28px;box-shadow:0 18px 50px rgba(93,50,69,.14);position:relative;overflow:hidden} .nyaas-calendar:before,.nyaas-calendar:after{content:"🎀";position:absolute;font-size:54px}.nyaas-calendar:before{left:12px;top:5px;transform:rotate(-12deg)}.nyaas-calendar:after{right:14px;bottom:5px;transform:rotate(12deg)} .nyaas-calendar>header{display:flex;justify-content:center;position:relative;text-align:center;padding:5px 0 17px}.nyaas-calendar>header>div small{font-size:22px;color:#e65f8d;font-weight:950}.nyaas-calendar>header h2{font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:.85;margin:0;color:#d76686;text-shadow:0 3px #fff}.nyaas-calendar>header em{display:inline-block;margin-top:10px;background:#f28fae;color:#fff;border-radius:999px;padding:5px 15px;font-style:normal;font-size:11px}.nyaas-calendar>header aside{position:absolute;right:10px;top:8px;border:2px solid #f3b4c7;border-radius:18px;background:#fff;padding:10px 18px;box-shadow:0 4px 0 #ffe1e9}.nyaas-calendar>header aside small,.nyaas-calendar>header aside b{display:block}.nyaas-calendar>header aside small{color:#b86e57;font-weight:900}.nyaas-calendar>header aside b{color:#df628b;margin-top:4px} .calendar-month{display:flex;align-items:center;gap:14px}.calendar-month h3{font-size:27px;margin:5px 0}.calendar-month button{width:40px;height:40px;border-radius:50%;border:0;background:#ee759a;color:#fff;font-size:24px}.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}.cal-week{margin-top:7px}.cal-week b{text-align:center;padding:8px;color:#6e514e;border-bottom:2px solid #f3afc0}.cal-week b:first-child{color:#e95785}.cal-week b:last-child{color:#7564ca}.cal-grid{border-left:1px solid #f2cbd5;border-top:1px solid #f2cbd5}.cal-cell{min-height:82px;border-right:1px solid #f2cbd5;border-bottom:1px solid #f2cbd5;padding:8px;background:rgba(255,255,255,.72);position:relative}.cal-cell.blank{background:rgba(255,245,247,.42)}.cal-cell b{font-size:18px}.cal-cell i{position:absolute;right:6px;bottom:4px;font-style:normal;opacity:.14}.cal-cell span{display:block;margin-top:18px;background:#f7a0b9;border-radius:999px;padding:5px 6px;color:#fff;text-align:center;font-size:9px;font-weight:900}.cal-cell.today{background:#fff0f4;box-shadow:inset 0 0 0 3px #ffb7ca}.cal-cell.today:after{content:"🎀";position:absolute;right:4px;top:-10px}.nyaas-calendar footer{margin-top:18px;border-top:2px dashed #f0b8c7;padding-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.nyaas-calendar footer h3{grid-column:1/-1;text-align:center;margin:0 0 5px;color:#dc6488}.nyaas-calendar footer div{display:flex;gap:10px;background:#fff;border:1px solid #f2cfda;border-radius:14px;padding:8px 12px}.nyaas-calendar footer div b{color:#d75d86} /* Dice game: unmistakably clickable */ .dice-panel button{border:0;border-radius:999px;background:linear-gradient(#ff8eb3,#ff6d9e);color:#fff;padding:13px 19px;font-weight:950;box-shadow:0 8px 17px rgba(155,67,104,.2)} .dice{font-size:78px!important;line-height:1;filter:drop-shadow(0 5px 4px rgba(83,47,62,.14))} .sugoroku-cell.current{outline:4px solid #ff7da9!important;background:#fff0f5!important;animation:currentCell 1s ease infinite alternate}@keyframes currentCell{to{transform:translateY(-3px)}} /* Sheet and drawer carry the same POP window language. */ .nav-drawer,.sheet{background:linear-gradient(160deg,#fff,#fff8fb)!important;border-left:3px solid #ffc3d6!important} .nav-drawer nav button,.sheet button{border-radius:18px} @media(max-width:1100px){ .order-layout{grid-template-columns:32% 68%}.pop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.road-grid{grid-template-columns:1fr!important} } .buddy-scene{min-height:240px;background-size:cover;background-position:center;border-radius:28px;display:grid!important;grid-template-columns:190px 1fr!important;align-items:end!important;overflow:hidden;border:4px solid #fff!important;outline:2px solid #ffc1d5!important;box-shadow:0 13px 30px rgba(73,40,54,.15)!important;margin:18px 0!important} .buddy-scene>img{width:180px!important;height:215px!important;object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(0 8px 10px rgba(30,18,24,.25))} .buddy-scene>div{color:#fff;padding:24px;text-shadow:0 2px 7px rgba(30,18,24,.5)}.buddy-scene h3{font-size:26px;margin:4px 0}.buddy-scene p{font-size:13px;line-height:1.6} @keyframes oshiRankUp{0%{transform:scale(1)}28%{transform:scale(1.06) rotate(.4deg);box-shadow:0 0 0 7px rgba(255,137,176,.22),0 16px 38px rgba(111,58,82,.20)!important}100%{transform:scale(1)}} /* ========================================================== NYAAS REFERENCE DESIGN SYSTEM — FINAL SOURCE Based on the approved room / calendar / menu references. All interaction windows use the same POP / lace / ribbon language. Character video itself is NOT scaled by --ui-scale. ========================================================== */ :root{--ui-scale:.80;--pink:#ff7fab;--pink2:#ffb8cd;--rose:#d85f88;--ink:#553a46;--paper:#fffdfb;--cream:#fff8ef;--mint:#dff7f2;--lemon:#fff3c8;--lav:#eee6ff;--sky:#e6f1ff;--line:#f6cbd9;--deep:0 18px 46px rgba(96,50,69,.16);--soft:0 10px 25px rgba(96,50,69,.11)} *{box-sizing:border-box}button{font-family:inherit;cursor:pointer}button:disabled{cursor:not-allowed}body{color:var(--ink);background:#fff8fb} /* Video: native source pixels, no blur filter, no GPU scale transform. */ /* Approved 80% room UI scale. Character remains 100%. */ @keyframes buddyPop{45%{transform:scale(1.035)}} .corner-ribbon{display:none} .music-toggle,.random-btn{grid-column:auto!important} .talk-dock{bottom:145px;width:520px;border-radius:36px!important}.talk-dock>header{height:82px}.talk-dock.open{width:min(800px,calc(100vw - 60px))} /* First moment / action typography. No permanent MEMORY window. */ @keyframes momentIn{from{opacity:0;transform:translateY(-25px) scale(.92)}to{opacity:1;transform:none}}@keyframes actionPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}10%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-58%) scale(.98)}} /* Menu / Gift / Cheer — approved MENU案7 direction. */ .menu-overlay{background:rgba(247,241,246,.95)!important;backdrop-filter:blur(10px);padding:18px}.order-window-head{display:none!important}.menu-book-body{width:min(1240px,88vw)!important;height:min(850px,88vh)!important;margin:auto;border-radius:38px;overflow:hidden;background:#fff;border:4px solid #fff;outline:2px solid #f2dbe3;box-shadow:var(--deep)}.order-layout.ref-order{height:100%;display:grid!important;grid-template-columns:31% 69%!important;background:linear-gradient(90deg,#f7f5fa 0 31%,#fff 31%)}.order-cast{height:100%;padding:18px 18px 20px;display:flex!important;flex-direction:column;gap:10px;overflow:auto;border-right:1px solid #eee6ec;background:linear-gradient(160deg,#f5f4f9,#fff9fb)!important}.order-brand{display:flex;flex-direction:column;align-items:center}.order-brand img{width:190px;height:68px;object-fit:contain}.order-brand span{font-size:8px;color:#9b7987;background:#ffdce8;border-radius:999px;padding:4px 12px}.order-live{display:flex;align-items:center;gap:9px}.order-live span{background:#f46f91;color:#fff;padding:6px 12px;border-radius:8px;font-weight:950}.order-live b{background:#fff;border-radius:8px;padding:6px 12px;font-size:12px}.order-photo{position:relative;flex:1;min-height:280px;max-height:410px;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 9px 22px rgba(80,44,60,.10)}.order-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}.order-oshi{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:9px 11px;box-shadow:0 5px 12px rgba(83,47,62,.07)}.order-oshi img{width:48px;height:48px;border-radius:50%;object-fit:cover}.order-oshi b,.order-oshi small{display:block}.order-oshi small{font-size:9px;color:#90727f}.order-level{background:#fff;border-radius:18px;padding:10px 12px}.order-level span,.order-level b{font-size:10px}.order-level b{float:right}.order-level i{display:block;clear:both;height:9px;background:#f4e3e9;border-radius:999px;margin-top:8px;overflow:hidden}.order-level em{display:block;height:100%;background:linear-gradient(90deg,#ff799f,#ffb8cc)}.order-mini-chat{background:linear-gradient(145deg,#fff,#fff5f8);border:1px solid #f5dde5;border-radius:18px;padding:9px 11px}.order-mini-chat b{color:#cc6288}.order-mini-chat p{font-size:10px;line-height:1.5;margin:4px 0}.order-mini-chat small{font-size:8px;color:#9b7d88}.order-main{height:100%;padding:28px 34px 24px;overflow:auto;background:#fff!important}.order-main>header{text-align:center;border-bottom:1px solid #ffd4e1;padding-bottom:12px}.order-main>header small{color:#f0789e;font-weight:950}.order-main>header h2{margin:4px 0;font-family:Georgia,"Times New Roman",serif;font-size:40px;letter-spacing:.05em;color:#5e4b3f}.order-main>header p{margin:3px 0;font-size:11px;color:#8a6f7a}.ref-tabs{display:flex!important;align-items:stretch;justify-content:center;gap:0;margin:16px 0 17px;border:2px solid #ffcbd9;border-radius:19px;overflow:hidden;background:#fff}.ref-tabs button{flex:1;min-height:68px;border:0!important;border-right:1px solid #f2dedf!important;border-radius:0!important;background:#fff!important;color:#5c474f!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800}.ref-tabs button:last-child{border-right:0!important}.ref-tabs button span{font-size:19px}.ref-tabs button b{font-size:10px}.ref-tabs button.active{background:linear-gradient(145deg,#ff8fac,#ff7399)!important;color:#fff!important}.ref-tabs.mini{max-width:520px;min-height:48px;margin:14px auto}.ref-tabs.mini button{min-height:48px;display:block}.system-guide,.catalog-panel{border:2px solid #f1cfe0;border-radius:22px;background:linear-gradient(145deg,#fffafd,#fff);padding:20px 24px;margin-bottom:90px}.system-guide h3,.catalog-panel h3{color:#8e64b6;margin:0 0 14px}.system-guide>div{display:grid;grid-template-columns:1fr auto auto;gap:18px;padding:12px;border-bottom:1px dashed #e8d5dd}.system-guide>div strong{color:#d15c84}.system-guide p,.catalog-panel>p{font-size:10px;text-align:center;color:#8b6e7a}.menu-list-ref,.catalog-list{display:flex;flex-direction:column;gap:8px;padding-bottom:105px}.menu-row-ref{display:grid;grid-template-columns:48px 1fr 105px 118px;gap:12px;align-items:center;min-height:66px;border:1px solid #f0dce4;border-radius:16px;padding:8px 12px;background:#fff}.menu-food-icon{font-size:30px;text-align:center}.menu-row-ref b,.menu-row-ref small{display:block}.menu-row-ref small{font-size:9px;color:#957581}.menu-row-ref strong{text-align:right;color:#b95b7d;font-size:12px}.qty{display:grid;grid-template-columns:34px 34px 34px;align-items:center;justify-content:end}.qty button{height:34px;border:1px solid #f1c8d5;background:#fff;color:#dc6d95;font-size:20px}.qty button:first-child{border-radius:14px 0 0 14px}.qty button:last-child{border-radius:0 14px 14px 0}.qty b{text-align:center;height:34px;line-height:34px;border-top:1px solid #f1c8d5;border-bottom:1px solid #f1c8d5}.order-submit{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:1fr auto;gap:4px 15px;align-items:center;background:linear-gradient(#fff,#fff7fa);border:2px solid #ffc0d3;border-radius:22px;padding:12px 16px;box-shadow:0 -8px 22px rgba(101,54,74,.08)}.order-submit span{font-size:10px}.order-submit strong{font-size:18px;color:#d4517c}.order-submit button{grid-column:1/3;height:50px;border:0;border-radius:17px;background:linear-gradient(90deg,#ff78a2,#ff5e8f);color:#fff;font-size:18px;font-weight:950}.order-submit button:disabled{opacity:.4}.catalog-panel.pink{border-color:#ffc9d9}.catalog-panel.purple{border-color:#dacdf7}.catalog-row{display:grid;grid-template-columns:48px 1fr 110px 80px;gap:11px;align-items:center;text-align:left;border:1px solid #efdce5;border-radius:17px;background:#fff;padding:10px 12px}.catalog-row>span{font-size:28px}.catalog-row b,.catalog-row small{display:block}.catalog-row small{font-size:9px;color:#947580}.catalog-row strong{color:#c75c83;font-size:11px}.catalog-row em{font-style:normal;color:#df6b95;font-size:10px;font-weight:950}.catalog-row.favorite{background:linear-gradient(90deg,#fff2f7,#fff);border-color:#ffadc5} /* Sheet / drawer / all secondary windows use same POP language. */ .nav-drawer,.sheet{background:linear-gradient(155deg,#fff,#fff7fb)!important;border-left:5px double #ffbfd4!important}.nav-drawer header,.sheet>header{background:linear-gradient(90deg,#fff7fb,#fff);border-bottom:2px dashed #f1c7d5}.nav-drawer nav button{border-radius:20px!important;border:1px solid #f0dce4!important;background:#fff!important;margin-bottom:6px}.nav-drawer nav button:hover{background:#fff2f7!important}.sheet{border-radius:30px 0 0 30px;box-shadow:var(--deep)}.sheet button{border-radius:16px}.staff-card,.compat-list>div,.memo-card{border:2px solid #f2d8e2!important;border-radius:22px!important;background:#fff!important}.staff-intro,.compat-hero,.music-console,.status-guide-head,.next-unlock-card{border:3px double #ffc7d8!important;border-radius:28px!important;background:linear-gradient(145deg,#fff6fa,#fff)!important;box-shadow:var(--soft)!important}.status-guide-head{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;padding:18px}.status-guide-head img{width:130px;height:130px;object-fit:cover;border-radius:25px}.status-guide-head h3{font-size:24px;margin:3px 0}.status-guide-head p{line-height:1.6;font-size:11px}.status-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.status-guide-grid article{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:start;border:2px solid #f1dce4;border-radius:22px;background:#fff;padding:14px}.status-guide-grid article>span{display:grid;place-items:center;width:50px;height:50px;border-radius:18px;background:#fff2f6;font-size:24px}.status-guide-grid b{font-size:15px}.status-guide-grid b strong{float:right;color:#d55e89;font-size:21px}.status-guide-grid p{font-size:10px;line-height:1.6;color:#846874}.next-unlock-card{padding:18px}.next-unlock-card h3{margin:5px 0}.next-unlock-card button{border:0;background:#ff7ea9;color:#fff;padding:9px 15px;font-weight:950} /* IDOL ROAD / STORY / random events. */ .event-overlay{background:linear-gradient(155deg,#fff7fa,#fffaf1)!important}.event-overlay>header,.event-overlay>nav{background:rgba(255,255,255,.94)}.event-overlay>nav button{border-radius:999px!important}.event-overlay>nav button.active{background:#ff82a9!important;color:#fff!important}.event-body{width:min(1220px,92vw)!important}.road-guide{display:grid;grid-template-columns:1fr 260px;align-items:center;gap:20px;background:linear-gradient(110deg,#fff0f6,#fff9ee);border:3px double #ffc3d6;border-radius:28px;padding:16px 22px;margin-bottom:13px}.road-guide small{color:#d45f87;font-weight:950}.road-guide h3{margin:4px 0}.road-guide p{font-size:10px}.road-guide>i{height:17px;background:#f2dce5;border-radius:999px;overflow:hidden}.road-guide>i b{display:block;height:100%;background:linear-gradient(90deg,#ff719d,#ffc1d5)}.pending-event{border:4px solid #fff;outline:2px solid #ff9fbe;border-radius:28px;background:linear-gradient(135deg,#fff0f5,#fff);padding:18px 22px;margin-bottom:14px;box-shadow:var(--soft);animation:eventGlow 1.3s alternate infinite}.pending-event small{color:#e65786;font-weight:950}.pending-event h3{margin:4px 0}.pending-event div{display:flex;gap:8px}.pending-event button{border:0;border-radius:999px;background:#ff7ea7;color:#fff;padding:9px 16px;font-weight:950}@keyframes eventGlow{to{box-shadow:0 0 0 6px rgba(255,143,177,.12),var(--soft)}}.story-hero{min-height:315px;border:5px solid #fff!important;outline:2px solid #ffc0d4;border-radius:34px!important}.road-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:13px 0}.road-stats button{border:2px solid #f0d8e2;border-radius:20px;background:#fff;padding:10px 13px;text-align:left;color:#d45c87;font-weight:950}.road-stats button b{float:right;font-size:20px;color:#513a44}.road-stats button small{display:block;clear:both;color:#8f727d;font-size:8px}.unlock-strip{display:grid;grid-template-columns:240px repeat(3,1fr);gap:8px;align-items:stretch;margin:14px 0}.unlock-strip header{padding:13px 15px;border-radius:22px;background:#fff1f6}.unlock-strip h3{margin:4px 0}.unlock-strip button{border:2px solid #f0d7e0;border-radius:22px;background:#fff;padding:12px;text-align:left}.unlock-strip button.open{border-color:#ffabc3;background:linear-gradient(145deg,#fff3f7,#fff)}.unlock-strip button>span{font-size:27px}.unlock-strip button b,.unlock-strip button small{display:block}.unlock-strip button small{font-size:9px;color:#8f707d}.stage-card{border:3px solid #fff!important;outline:1px solid #f0d3df;border-radius:26px!important;overflow:hidden;background:#fff}.story-arc-head{text-align:center;background:linear-gradient(145deg,#fff1f6,#fff);border:3px double #ffc2d5;border-radius:28px;padding:19px;margin-bottom:14px}.story-arc-head small{color:#d65b87;font-weight:950}.story-arc-head h3{font-size:26px;margin:4px 0}.story-arc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.story-arc-card{display:grid;grid-template-columns:75px 1fr;gap:12px;border:3px solid #fff;outline:2px solid #f0d5df;border-radius:28px;background:#fff;padding:17px;box-shadow:var(--soft)}.story-arc-card>span{font-size:50px}.story-arc-card small{color:#d7608b;font-weight:950}.story-arc-card h3{margin:4px 0}.story-arc-card p{font-size:10px;line-height:1.6}.story-arc-card button{border:0;border-radius:999px;background:#ff7da7;color:#fff;padding:9px 14px;font-weight:950}.story-arc-card.locked{opacity:.45}.buddy-scene{border-radius:28px!important}.choice-grid button{border:3px solid #fff!important;outline:2px solid #ffd0df!important;border-radius:24px!important;background:linear-gradient(#fff,#fff8fb)!important}.fight-game{margin-top:15px;border:4px solid #fff;outline:2px solid #f3b4c8;border-radius:32px;background:linear-gradient(145deg,#fff3f7,#fff);padding:22px}.fight-game header{text-align:center}.fight-bars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.fight-bars>div{background:#fff;border-radius:20px;padding:12px}.fight-bars span,.fight-bars strong{font-size:10px;font-weight:950}.fight-bars strong{float:right}.fight-bars i{display:block;height:15px;background:#eee0e6;border-radius:999px;overflow:hidden;margin-top:7px}.fight-bars i b{display:block;height:100%;background:linear-gradient(90deg,#ff718f,#ffb1c5)}.fight-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.fight-actions button{border:0;border-radius:20px;background:#fff;border:2px solid #ffc6d7;padding:13px;font-weight:950}.fight-actions small{display:block;font-size:8px;color:#8e7280;margin-top:4px}.fight-buddy{display:flex;gap:10px;align-items:center;margin-top:13px;background:#fff;border-radius:20px;padding:10px}.fight-buddy img{width:58px;height:58px;border-radius:18px;object-fit:cover}.fight-buddy p{font-size:9px;line-height:1.5} /* Calendar — approved lace/ribbon calendar design. */ .nyaas-calendar{background:linear-gradient(135deg,#fff6f4,#fffdf7);border:8px double #ffb7ca!important;outline:5px solid #fff;border-radius:38px!important;padding:25px 30px!important;box-shadow:var(--deep);position:relative;overflow:hidden}.nyaas-calendar:before,.nyaas-calendar:after{content:"🎀";position:absolute;font-size:57px;filter:drop-shadow(0 3px 2px #fff)}.nyaas-calendar:before{left:8px;top:7px;transform:rotate(-14deg)}.nyaas-calendar:after{right:9px;bottom:5px;transform:rotate(12deg)}.nyaas-calendar>header{display:flex;justify-content:center;position:relative;text-align:center;padding:7px 0 18px}.nyaas-calendar>header small{font-size:19px;color:#df6389;font-weight:950}.nyaas-calendar>header h2{font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:.88;margin:0;color:#dc6c88;text-shadow:0 3px #fff}.nyaas-calendar>header em{display:inline-block;margin-top:10px;background:#ef8dab;color:#fff;border-radius:999px;padding:5px 16px;font-style:normal;font-size:10px}.nyaas-calendar>header aside{position:absolute;right:12px;top:8px;border:3px double #f0b7c7;border-radius:18px;background:#fff;padding:10px 18px;box-shadow:0 4px 0 #ffe4eb}.nyaas-calendar>header aside small,.nyaas-calendar>header aside b{display:block}.calendar-month{display:flex;align-items:center;gap:14px}.calendar-month h3{font-size:26px}.calendar-month button{width:40px;height:40px;border:0;border-radius:50%;background:#ef7599;color:#fff}.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}.cal-week b{text-align:center;padding:8px;border-bottom:2px solid #f4b2c2}.cal-week b:first-child{color:#e95583}.cal-week b:last-child{color:#7564ca}.cal-grid{border-left:1px solid #f2cbd5;border-top:1px solid #f2cbd5}.cal-cell{appearance:none;text-align:left;min-height:78px;border:0;border-right:1px solid #f2cbd5;border-bottom:1px solid #f2cbd5;padding:8px;background:rgba(255,255,255,.74);position:relative;color:#6a4f50}.cal-cell.blank{background:rgba(255,245,247,.45)}.cal-cell b{font-size:17px}.cal-cell i{position:absolute;right:6px;bottom:4px;opacity:.13;font-style:normal}.cal-cell span{display:block;margin-top:18px;border-radius:999px;padding:5px 5px;background:#f5a2ba;color:#fff;text-align:center;font-size:8px;font-weight:950}.cal-cell.event:hover{background:#fff2f6}.cal-cell.today{background:#fff0f4;box-shadow:inset 0 0 0 3px #ffb8cb}.cal-cell.today:after{content:"🎀";position:absolute;right:4px;top:-10px}.nyaas-calendar footer{margin-top:16px;border-top:2px dashed #eeb8c7;padding-top:13px;display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}.nyaas-calendar footer h3{grid-column:1/-1;text-align:center;color:#d96288;margin:0}.nyaas-calendar footer button{display:grid;grid-template-columns:70px 1fr;gap:8px;text-align:left;border:1px solid #f0d1da;border-radius:14px;background:#fff;padding:8px 11px}.nyaas-calendar footer button>b{color:#d45a84}.nyaas-calendar footer span strong,.nyaas-calendar footer span small{display:block}.nyaas-calendar footer span small{font-size:8px;color:#8d717a;line-height:1.4} /* Sugoroku: reward-forward game presentation. */ .sugoroku-wrap{border:4px solid #fff;outline:2px solid #ffc1d4;border-radius:30px;padding:18px;background:linear-gradient(145deg,#fff4f8,#fff)}.sugoroku-cell{border-radius:18px!important;border:2px solid #f0d6e0!important;background:#fff!important}.sugoroku-cell.current{outline:5px solid #ff83aa!important;background:#fff0f5!important;animation:currentCell .9s ease infinite alternate}.dice-panel{border-radius:25px!important;background:#fff!important;border:3px double #ffb8cd!important}.dice-panel button{background:linear-gradient(#ff8eb3,#ff6d9e)!important;font-size:15px!important}.dice{font-size:82px!important}@keyframes currentCell{to{transform:translateY(-3px)}} /* Responsive */ @media(max-width:1100px){:root{--ui-scale:.70}.menu-book-body{width:92vw!important;height:86vh!important}.order-layout.ref-order{grid-template-columns:30% 70%!important}.order-main{padding:20px}.unlock-strip{grid-template-columns:1fr 1fr}.unlock-strip header{grid-column:1/-1}.story-arc-grid{grid-template-columns:1fr}.road-grid{grid-template-columns:1fr!important}} @media(max-width:760px){:root{--ui-scale:.62}.menu-book-body{width:95vw!important;height:91vh!important}.order-layout.ref-order{display:block!important}.order-cast{display:none!important}.order-main{height:100%;padding:16px}.order-main>header h2{font-size:30px}.ref-tabs button{min-height:55px}.ref-tabs button b{font-size:8px}.menu-row-ref{grid-template-columns:36px 1fr 82px 104px}.menu-food-icon{font-size:23px}.unlock-strip{grid-template-columns:1fr}.fight-bars,.fight-actions,.status-guide-grid{grid-template-columns:1fr}.nyaas-calendar{padding:15px!important}.nyaas-calendar>header h2{font-size:40px}.nyaas-calendar>header aside{display:none}.cal-cell{min-height:62px;padding:5px}.cal-cell span{font-size:6px}.nyaas-calendar footer{grid-template-columns:1fr}} /* === TOTAL RECOVERY FINAL OVERRIDES 2026-08-11 === Approved reference UI is authoritative. UI chrome ~80%; service video is NOT scaled. */ @media(min-width:1101px){ .menu-book-body{width:min(1060px,84vw)!important;height:min(760px,82vh)!important} .event-body{width:min(1120px,86vw)!important} .sheet{width:min(900px,78vw)!important;max-height:82vh!important} .nav-drawer{width:min(360px,30vw)!important} } /* Never soften the cast movie through CSS transforms or filters. */ #castVideo{transform:none!important;filter:none!important;will-change:auto!important;image-rendering:auto!important} /* Static decorations stay on UI frames; hearts over the cast appear only after an action. */ .room-stage:before,.room-stage:after{pointer-events:none} /* FIX3: cast-aware menu + correct premium bottle presentation */ .menu-cast-hint{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:11px 14px;border:2px solid #ffd2e2;border-radius:18px;background:linear-gradient(135deg,#fff8fc,#fff1f7);box-shadow:0 7px 18px rgba(198,91,132,.10)} .menu-cast-hint b{color:#e44f89;font-size:13px;white-space:nowrap}.menu-cast-hint span{color:#7c5263;font-size:11px;font-weight:800;line-height:1.5} .menu-row-ref.favorite{border-color:#ff9fc1!important;background:linear-gradient(135deg,#fff8fc,#fff0f7)!important;box-shadow:0 8px 20px rgba(226,79,137,.12)} .fav-badge{display:inline-flex;margin-left:6px;padding:3px 7px;border-radius:999px;background:#ff7faa;color:#fff;font-size:9px;font-style:normal;vertical-align:middle;box-shadow:0 3px 8px rgba(226,79,137,.2)} /* ========================================================== FIX4 — APPROVED POP ROOM UI / VIDEO GHOST FIX 2026-08-11. This block is authoritative and must remain last. ========================================================== */ :root{--ui-scale:.80;--fx-pink:#ff7ba8;--fx-pink2:#ffb6cc;--fx-line:#f7c4d6;--fx-ink:#533a46;--fx-lav:#f0e7ff;--fx-mint:#e4f8f2;--fx-gold:#fff0c7} /* Never reveal a second still image around the 16:9 service movie. */ #castVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;background:#f8eef2!important;z-index:2!important;opacity:0;transition:opacity .18s ease!important} #castFallback{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 20%!important;z-index:1!important;opacity:1;transition:opacity .12s ease!important} /* Reference layout: POP, light, smaller UI; cast movie remains full size. */ /* PRIVATE is one of the bottom icons. The large talk panel exists only while opened. */ .talk-dock:not(.open){display:none!important}.talk-dock.open{display:block!important;left:50%!important;bottom:155px!important;transform:translateX(-50%)!important;width:min(820px,82vw)!important;border-radius:38px!important;background:linear-gradient(145deg,#fff,#fff5f9)!important} /* TOP must never lose its background. */ .top-screen{background:#f8e7ed url("assets/ui/background.png") center/cover no-repeat!important}.top-bg{display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover!important}.top-glow{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,163,195,.07))!important}.top-logo-stage{width:min(62vw,900px)!important;top:42%!important}.top-logo{opacity:1!important;filter:drop-shadow(0 9px 25px rgba(95,47,67,.16))!important} /* Near-square desktop windows: keep every panel inside the frame without shrinking the movie. */ @media (max-aspect-ratio:6/5) and (min-width:900px){ :root{--ui-scale:.70} } @media(max-width:1100px){:root{--ui-scale:.70}} @media(max-width:760px){:root{--ui-scale:.62}} /* ========================================================= NYAAS POP FINAL — CANONICAL UI 2026-08-11 This block is the visual source of truth for ROOM / TOP / MENU / CALENDAR. Old room chrome is completely overridden. ========================================================= */ :root{ --pop-pink:#ff79a8;--pop-pink2:#ff9fbd;--pop-pale:#fff4f8; --pop-cream:#fffaf4;--pop-lav:#eee6ff;--pop-mint:#e8faf5; --pop-line:#ffc3d6;--pop-ink:#513742;--pop-shadow:0 15px 40px rgba(101,53,75,.15); } /* ---------- TOP ---------- */ #top.top-screen{background:#f4dfe5 url("assets/ui/background.png") center/cover no-repeat!important} #top .top-bg{display:block!important;visibility:visible!important;opacity:1!important;filter:none!important;object-fit:cover!important} #top .top-glow{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,141,178,.08))!important;backdrop-filter:none!important} #top .top-logo-stage{top:43%!important;width:min(70vw,1050px)!important} #top .top-logo{filter:drop-shadow(0 10px 28px rgba(91,45,64,.18))!important;opacity:1!important;max-height:58vh!important} #top .top-logo-stage p{margin:-16px 0 12px!important;color:#fff!important;text-shadow:0 3px 15px rgba(87,44,63,.35)!important} #top .top-header{color:#fff!important} #top .top-cta .primary-button{border:5px solid #fff!important;outline:2px solid #ff9fbe!important;border-radius:32px!important;background:linear-gradient(145deg,#ff8eb4,#ff70a0)!important;box-shadow:0 10px 0 rgba(238,123,163,.20),0 20px 42px rgba(88,45,64,.18)!important} #top .top-cta .secondary-button{border:4px solid #fff!important;outline:2px solid #ffd0df!important;border-radius:28px!important} /* ---------- ROOM: one media layer only ---------- */ #room #castFallback{z-index:0!important;opacity:1;visibility:visible;transition:opacity .12s ease!important} #room #castVideo{z-index:1!important;opacity:0;transition:opacity .12s ease!important;background:#f8eff2!important} /* common kawaii window treatment */ /* top bar */ /* buddy */ @keyframes buddyPop{50%{transform:scale(1.025);filter:drop-shadow(0 0 10px rgba(255,112,161,.3))}} /* music */ /* relation / stats */ #room .corner-ribbon{position:absolute!important;left:25px!important;top:-28px!important;font-size:38px!important;filter:drop-shadow(0 3px 0 #fff)!important} /* bottom action dock */ #room .talk-dock:not(.open){display:none!important} #room .talk-dock.open{display:block!important;position:absolute!important;z-index:45!important;left:50%!important;bottom:160px!important;transform:translateX(-50%)!important;width:min(760px,80vw)!important;border-radius:34px!important;overflow:hidden!important} #room .talk-dock.open>header{height:70px!important} /* action-only celebration; never passive over the cast */ /* ---------- MENU / ORDER ---------- */ .menu-overlay.open{display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,239,246,.72)!important;backdrop-filter:blur(12px)!important;padding:22px!important} .menu-book-body{width:min(1120px,90vw)!important;height:min(820px,90vh)!important;border:7px double #ffbfd3!important;outline:5px solid #fff!important;border-radius:38px!important;background:linear-gradient(135deg,#fff8fb,#fff)!important;box-shadow:0 28px 75px rgba(80,42,60,.25)!important;overflow:hidden!important} .order-layout.ref-order{height:100%!important;display:grid!important;grid-template-columns:34% 66%!important;background:linear-gradient(90deg,#fff5f9 0 34%,#fff 34%)!important} .order-cast{border-right:3px double #f5cedb!important;background:linear-gradient(150deg,#fff5f9,#fffaf8)!important;padding:20px!important} .order-brand{position:relative!important}.order-brand:before{content:"🎀";position:absolute;left:7px;top:-8px;font-size:27px}.order-brand img{width:210px!important;height:78px!important;filter:none!important}.order-brand span{background:#ffcfde!important;color:#7c4e60!important;font-weight:900!important;border:2px solid #fff!important} .order-photo{border:5px solid #fff!important;outline:2px solid #ffbfd2!important;border-radius:28px!important;box-shadow:0 11px 24px rgba(87,45,64,.14)!important} .order-main{padding:27px 30px 24px!important;background:linear-gradient(160deg,#fff,#fffafb)!important} .order-main>header{position:relative!important;border-bottom:2px solid #ffd3e1!important;padding-bottom:14px!important}.order-main>header:after{content:"🎀";display:block;margin:-2px auto -30px;font-size:32px}.order-main>header h2{font-family:Georgia,"Times New Roman",serif!important;font-size:42px!important;color:#5a4136!important;letter-spacing:.04em!important}.order-main>header small{color:#e66892!important}.order-main>header p{color:#8b6574!important} .ref-tabs{margin-top:24px!important;border:3px solid #ffc4d6!important;border-radius:22px!important}.ref-tabs button{min-height:72px!important}.ref-tabs button.active{background:linear-gradient(145deg,#ff91b2,#ff729d)!important} .menu-cast-hint{border:3px double #ffc4d7!important;border-radius:20px!important;background:linear-gradient(135deg,#fff3f8,#fff)!important}.menu-cast-hint b{font-size:13px!important} .menu-row-ref{min-height:72px!important;border:2px solid #f0d4df!important;border-radius:20px!important;padding:10px 13px!important}.menu-row-ref.favorite{border:3px solid #ff9dbe!important;box-shadow:0 8px 20px rgba(224,80,136,.13)!important}.menu-food-icon{font-size:34px!important}.menu-row-ref strong{color:#b94e75!important;font-size:13px!important} .qty button,.qty b{height:36px!important}.order-submit{border:3px solid #ffb8cf!important;border-radius:23px!important}.order-submit button{height:54px!important;border:4px solid #fff!important;outline:2px solid #ff9fbe!important;border-radius:19px!important;background:linear-gradient(90deg,#ff75a0,#ff5d8e)!important;font-size:19px!important} /* ---------- CALENDAR ---------- */ .nyaas-calendar{border:9px double #ffb4ca!important;outline:6px solid #fff!important;border-radius:38px!important;background:linear-gradient(135deg,#fff7f5,#fffdf8)!important;box-shadow:0 24px 65px rgba(95,47,68,.20)!important;padding:22px 28px!important} .nyaas-calendar>header h2{font-size:61px!important;color:#d96a87!important;text-shadow:0 3px #fff,0 7px 18px rgba(199,94,127,.12)!important}.nyaas-calendar>header small{font-size:18px!important}.nyaas-calendar>header aside{border:4px double #efafc2!important;border-radius:20px!important;background:#fff!important;box-shadow:0 5px 0 #ffe0e9!important}.calendar-month h3{font-size:27px!important;color:#7c4e5c!important}.calendar-month button{border:4px solid #fff!important;outline:2px solid #f08baa!important;box-shadow:0 4px 0 #f0c2cf!important}.cal-week{border:2px solid #f2b3c4!important;border-radius:999px!important;overflow:hidden!important}.cal-week b{border:0!important;background:#fff8fa!important}.cal-grid{margin-top:4px!important;border:2px solid #f0c5d1!important;border-radius:18px!important;overflow:hidden!important}.cal-cell{min-height:78px!important;background:rgba(255,255,255,.82)!important}.cal-cell.event span{background:linear-gradient(145deg,#ff91b4,#f37ca1)!important;border:2px solid #fff!important;box-shadow:0 3px 0 #f5ccd7!important}.cal-cell.today{box-shadow:inset 0 0 0 4px #ffb2ca!important}.nyaas-calendar footer{border-top:3px double #efb2c5!important}.nyaas-calendar footer button{border:2px solid #efd0db!important;border-radius:16px!important;background:linear-gradient(135deg,#fff,#fff8fa)!important} /* secondary windows follow same POP family */ .nav-drawer,.sheet{border-left:7px double #ffb8cf!important;background:linear-gradient(150deg,#fff,#fff7fb)!important}.sheet{border-radius:34px 0 0 34px!important}.event-overlay{background:linear-gradient(145deg,#fff5fa,#fff9ef)!important}.event-overlay>header{border-bottom:3px double #ffc5d6!important}.event-overlay>nav button.active{background:linear-gradient(145deg,#ff8eb1,#ff6f9e)!important;color:#fff!important} /* Responsive without shrinking the media itself */ @media (max-width:1250px){ } @media (max-width:980px){ } /* Canonical dimensions above already encode the requested ~80% chrome size. */ /* Remove legacy pseudo-widgets that duplicated real POP components. */ /* ============================================================ NYAAS — FINAL APPROVED POP UI Source of truth: 2026-08-11 17:56 supplied room reference. This file intentionally loads AFTER styles.css and replaces the older plain / previous-reference room chrome. ============================================================ */ :root{ --ref-pink:#ff6f9f; --ref-pink-2:#ff91b4; --ref-pink-3:#ffc1d3; --ref-blush:#fff0f5; --ref-cream:#fffaf6; --ref-ink:#4b303b; --ref-muted:#9a7180; --ref-mint:#dff7ef; --ref-lemon:#fff0be; --ref-blue:#e5efff; --ref-lav:#eee4ff; --ref-shadow:0 12px 30px rgba(101,54,74,.17); --ref-deep-shadow:0 20px 58px rgba(76,38,55,.22); } /* ---------- TOP: background survives + logo is actually white ---------- */ #top.top-screen{background:#efd6de url("assets/ui/background.png") center/cover no-repeat!important} #top .top-bg{display:block!important;opacity:1!important;visibility:visible!important;filter:none!important} #top .top-glow{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(245,126,166,.10))!important;backdrop-filter:none!important} #top .top-logo-stage{top:44%!important;width:min(82vw,1180px)!important} #top .top-logo{width:100%!important;max-height:70vh!important;filter:brightness(0) invert(1) drop-shadow(0 10px 28px rgba(74,36,53,.25))!important;opacity:1!important} #top .top-logo-stage p{margin:-46px 0 13px!important;color:white!important;font-size:clamp(22px,2.2vw,36px)!important;text-shadow:0 3px 15px rgba(65,31,47,.35)!important} #top .debut-chip{border:2px solid rgba(255,255,255,.60)!important;background:rgba(255,255,255,.20)!important;box-shadow:0 8px 22px rgba(74,36,53,.12)!important} /* ---------- ROOM base / exact final direction ---------- */ /* Perimeter lace. It is chrome only: no effect over the performer. */ #room:before{content:"";position:absolute;z-index:20;inset:4px;pointer-events:none;border:18px solid transparent;border-image:url("assets/ui_pop/lace-frame.svg") 28 round;filter:drop-shadow(0 2px 2px rgba(199,89,129,.20))} #room:after{content:"";position:absolute;z-index:19;inset:17px;pointer-events:none;border:2px dotted rgba(255,255,255,.92);border-radius:22px;box-shadow:inset 0 0 0 2px rgba(255,157,190,.45)} /* One visual language for every room window. */ /* ---------- top room HUD: compact (~80%) ---------- */ /* ---------- buddy: compact, ornate, cast-specific text retained ---------- */ /* ---------- music: final reference has ON/OFF + prev/play/next/random ---------- */ #room #roomTrackPlay{font-size:20px!important;background:linear-gradient(#ff8cb1,#ff6c9b)!important;color:#fff!important} #room #roomTrackPrev,#room #roomTrackNext{font-size:16px!important} #room #randomTrack{font-size:9px!important;letter-spacing:.02em!important} /* ---------- relation / stats: lace + ribbon, smaller ---------- */ #room .corner-ribbon{left:15px!important;top:-31px!important;width:70px!important;height:45px!important;font-size:0!important;background:url("assets/ui_pop/bow.svg") center/contain no-repeat!important;filter:none!important} /* ---------- no legacy lower-left paw / no passive girl effect ---------- */ /* ---------- bottom dock: PRIVATE is a normal peer action ---------- */ /* oshi-life above memory, matching the final supplied room reference */ /* Talk / private only appears after user presses its bottom icon. */ #room .talk-dock:not(.open){display:none!important} #room .talk-dock.open{z-index:48!important;width:min(650px,72vw)!important;bottom:165px!important;border-radius:29px!important;overflow:hidden!important} #room .talk-dock.open>header{height:58px!important;background:linear-gradient(90deg,#fff7fb,#fff)!important} /* ---------- MENU / ORDER: same rounded POP family, clearly not old plain UI ---------- */ #menuOverlay.menu-overlay.open{display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,236,244,.72)!important;backdrop-filter:blur(11px)!important;padding:26px!important} #menuOverlay .order-window-head{top:30px!important;right:34px!important} #menuOverlay .order-window-head button{width:50px!important;height:50px!important;border:4px solid #fff!important;outline:2px solid #ff9dbd!important;background:#fff5f9!important;color:#dc5b89!important;box-shadow:0 7px 0 rgba(255,187,209,.25),0 14px 24px rgba(88,43,62,.14)!important} #menuBookBody.menu-book-body{width:min(1060px,88vw)!important;height:min(790px,88vh)!important;border:8px double #ffb4cb!important;outline:6px solid #fff!important;border-radius:38px!important;background:linear-gradient(145deg,#fff8fb,#fffdf9)!important;box-shadow:0 25px 72px rgba(77,38,55,.24)!important;position:relative!important} #menuBookBody:before{content:"";position:absolute;inset:-13px;pointer-events:none;border:2px dotted #fff;border-radius:46px;box-shadow:0 0 0 2px rgba(255,167,197,.42);z-index:9} #menuBookBody:after{content:"";position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:79px;height:50px;background:url("assets/ui_pop/bow.svg") center/contain no-repeat;z-index:10} .order-layout.ref-order{grid-template-columns:31% 69%!important;background:linear-gradient(90deg,#fff4f8 0 31%,#fff 31%)!important} .order-cast{padding:16px!important;border-right:3px double #f3cbd8!important;background:linear-gradient(155deg,#fff3f8,#fffaf8)!important} .order-brand img{width:176px!important;height:64px!important;object-fit:contain!important}.order-brand:before{display:none!important}.order-brand span{font-size:8px!important;padding:4px 8px!important;border-radius:999px!important} .order-photo{border:4px solid #fff!important;outline:2px solid #ffbdd1!important;border-radius:25px!important;box-shadow:0 9px 20px rgba(84,42,59,.13)!important} .order-main{padding:22px 25px 20px!important;background:linear-gradient(150deg,#fff,#fff9fb)!important} .order-main>header h2{font-size:36px!important;line-height:1.1!important}.order-main>header:after{content:""!important;width:64px;height:38px;margin:-2px auto -25px!important;background:url("assets/ui_pop/bow.svg") center/contain no-repeat!important} .ref-tabs{margin-top:22px!important;border:2px solid #ffbfd2!important;border-radius:20px!important;overflow:hidden!important;background:#fff!important}.ref-tabs button{min-height:62px!important;border-radius:16px!important}.ref-tabs button.active{background:linear-gradient(145deg,#ff91b3,#ff739e)!important;color:#fff!important} .menu-cast-hint{border:2px solid #ffc5d7!important;border-radius:17px!important;padding:10px 12px!important;background:linear-gradient(130deg,#fff1f6,#fff)!important} .menu-row-ref{min-height:62px!important;border:2px solid #efd3de!important;border-radius:17px!important;padding:8px 11px!important;background:#fff!important}.menu-row-ref.favorite{border:2px solid #ff90b4!important;background:linear-gradient(100deg,#fff0f5,#fff)!important;box-shadow:0 6px 14px rgba(220,78,129,.10)!important}.menu-food-icon{font-size:28px!important}.menu-row-ref b{font-size:12px!important}.menu-row-ref small{font-size:8px!important}.menu-row-ref strong{font-size:12px!important} .qty button,.qty b{height:32px!important}.order-submit{border:2px solid #ffafc8!important;border-radius:19px!important}.order-submit button{height:49px!important;border:3px solid #fff!important;outline:2px solid #ff8fb4!important;border-radius:16px!important;background:linear-gradient(90deg,#ff789f,#f35c8d)!important;font-size:17px!important} /* ---------- CALENDAR: the calendar itself becomes the screen ---------- */ #eventOverlay.calendar-mode{display:block!important;background:linear-gradient(145deg,#fff2f6,#fff8f2)!important;padding:22px!important;overflow:auto!important} #eventOverlay.calendar-mode>header,#eventOverlay.calendar-mode>nav{display:none!important} #eventOverlay.calendar-mode .event-body{width:min(1040px,92vw)!important;max-width:none!important;margin:0 auto!important;padding:0!important} #eventOverlay.calendar-mode .nyaas-calendar{position:relative!important;width:100%!important;min-height:calc(100vh - 44px)!important;border:9px double #ffabc5!important;outline:6px solid #fff!important;border-radius:35px!important;background: radial-gradient(circle at 18% 15%,rgba(255,255,255,.8),transparent 25%), linear-gradient(145deg,#fff4f2,#fffaf5)!important;box-shadow:0 22px 60px rgba(89,44,62,.19)!important;padding:34px 45px 30px!important;overflow:hidden!important} #eventOverlay.calendar-mode .nyaas-calendar:before{content:"";position:absolute;inset:6px;pointer-events:none;border:13px solid transparent;border-image:url("assets/ui_pop/lace-frame.svg") 28 round;opacity:.85} #eventOverlay.calendar-mode .nyaas-calendar:after{content:"";position:absolute;right:17px;top:12px;width:60px;height:38px;background:url("assets/ui_pop/bow.svg") center/contain no-repeat;transform:rotate(5deg);pointer-events:none} #eventOverlay.calendar-mode .nyaas-calendar>header{position:relative!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;min-height:135px!important;border:0!important;padding:0 10px 10px!important;text-align:left!important;z-index:1} #eventOverlay.calendar-mode .nyaas-calendar>header>div{text-align:center!important} #eventOverlay.calendar-mode .nyaas-calendar>header small{font-size:17px!important;color:#dd6b91!important;font-weight:950!important;letter-spacing:.06em!important} #eventOverlay.calendar-mode .nyaas-calendar>header h2{font-family:Georgia,"Times New Roman",serif!important;font-size:64px!important;line-height:.95!important;margin:0!important;color:#d86d88!important;text-shadow:0 3px #fff,0 7px 17px rgba(197,93,125,.12)!important;letter-spacing:.03em!important} #eventOverlay.calendar-mode .nyaas-calendar>header em{display:inline-block!important;margin-top:10px!important;padding:5px 16px!important;border:2px solid #fff!important;outline:1px solid #ffadc6!important;border-radius:999px!important;background:#ef88a8!important;color:#fff!important;font-size:10px!important;font-weight:900!important} #eventOverlay.calendar-mode .nyaas-calendar>header aside{min-width:205px!important;padding:14px 18px!important;border:4px double #efafc2!important;border-radius:18px!important;background:#fff!important;box-shadow:0 5px 0 #ffe0e9!important;text-align:center!important} #eventOverlay.calendar-mode .nyaas-calendar>header aside small{display:block!important;font-size:10px!important;color:#a96978!important}#eventOverlay.calendar-mode .nyaas-calendar>header aside b{display:block!important;margin-top:5px!important;color:#d65c83!important;font-size:17px!important} #eventOverlay.calendar-mode .calendar-month{height:58px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:22px!important;padding:0 14px!important} #eventOverlay.calendar-mode .calendar-month h3{font-size:24px!important;color:#7b4e5c!important;margin:0!important} #eventOverlay.calendar-mode .calendar-month button{width:42px!important;height:42px!important;border:3px solid #fff!important;outline:2px solid #ed86a6!important;border-radius:50%!important;background:linear-gradient(#ff93b3,#f36b96)!important;color:#fff!important;box-shadow:0 4px 0 #efc1ce!important;font-size:22px!important} #eventOverlay.calendar-mode .cal-week{height:35px!important;border:2px solid #efb4c5!important;border-radius:999px!important;overflow:hidden!important;background:#fff9fb!important} #eventOverlay.calendar-mode .cal-week b{font-size:10px!important;background:transparent!important} #eventOverlay.calendar-mode .cal-grid{border:2px solid #efc1cf!important;border-radius:15px!important;overflow:hidden!important;background:rgba(255,255,255,.72)!important} #eventOverlay.calendar-mode .cal-cell{min-height:64px!important;background:rgba(255,255,255,.80)!important;border-color:#efc7d2!important;padding:7px!important} #eventOverlay.calendar-mode .cal-cell>b{font-family:Georgia,"Times New Roman",serif!important;font-size:17px!important;color:#64454f!important} #eventOverlay.calendar-mode .cal-cell>i{font-size:8px!important;opacity:.24!important} #eventOverlay.calendar-mode .cal-cell.event span{padding:5px 7px!important;border:2px solid #fff!important;border-radius:999px!important;background:linear-gradient(#ff99b6,#f27aa1)!important;color:#fff!important;font-size:8px!important;box-shadow:0 3px 0 #f5ccd7!important} #eventOverlay.calendar-mode .cal-cell.today{box-shadow:inset 0 0 0 3px #ff9fbc!important;background:#fff4f8!important} #eventOverlay.calendar-mode .nyaas-calendar footer{margin-top:16px!important;padding-top:12px!important;border-top:3px double #efb2c5!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px 10px!important} #eventOverlay.calendar-mode .nyaas-calendar footer h3{grid-column:1/3!important;text-align:center!important;color:#d86489!important;margin:0 0 5px!important;font-size:19px!important} #eventOverlay.calendar-mode .nyaas-calendar footer button{min-height:48px!important;border:2px solid #efcbd7!important;border-radius:14px!important;background:linear-gradient(135deg,#fff,#fff8fa)!important;padding:7px 11px!important;text-align:left!important;display:grid!important;grid-template-columns:58px 1fr!important;gap:8px!important} #eventOverlay.calendar-mode .nyaas-calendar footer button>b{color:#fff!important;background:#ed7fa3!important;border-radius:999px!important;padding:6px 7px!important;text-align:center!important;font-size:10px!important;align-self:center!important}#eventOverlay.calendar-mode .nyaas-calendar footer strong{display:block!important;color:#b85a7a!important;font-size:11px!important}#eventOverlay.calendar-mode .nyaas-calendar footer small{display:block!important;color:#7f6670!important;font-size:8px!important;margin-top:2px!important} /* Calendar close button in the same location as the supplied design. */ #eventOverlay.calendar-mode .calendar-close{position:fixed;z-index:130;right:33px;top:29px;width:48px;height:48px;display:grid;place-items:center;border:4px solid #fff;outline:2px solid #e58aa8;border-radius:50%;background:#fff9fb;color:#d65a84;font-size:27px;font-weight:500;box-shadow:0 6px 14px rgba(83,41,58,.12)} /* ---------- secondary UI family ---------- */ .nav-drawer,.sheet{border-left:7px double #ffafc8!important;background:linear-gradient(155deg,#fff,#fff5fa)!important;box-shadow:-18px 0 48px rgba(77,38,55,.17)!important}.sheet{border-radius:31px 0 0 31px!important} .nav-drawer header,.sheet header{border-bottom:3px double #ffc5d6!important} .nav-drawer nav button,.sheet button{border-radius:17px!important} /* ---------- responsive: shrink chrome, never crop/zoom the cast media ---------- */ @media (max-width:1320px){ } @media (max-width:1080px){ } @media (max-height:760px){ } /* ============================================================ NYAAS FIX6.2 — UX / CALENDAR / START FLOW HOTFIX 2026-08-11 Loads last. Character video size is intentionally untouched. ============================================================ */ :root{ --f62-pink:#ff7ea8; --f62-pink2:#ffa7c2; --f62-pale:#fff3f7; --f62-cream:#fffaf5; --f62-ink:#543b45; --f62-line:#f2bdcd; --f62-purple:#b184d7; --f62-orange:#e99d62; } /* ---------- TOP: keep the logo large, move only copy + music downward ---------- */ #top .top-logo-stage{top:40%!important;width:min(82vw,1180px)!important} #top .top-logo{transform:translateY(-8px)!important} #top .top-logo-stage p{ margin:16px 0 12px!important; transform:translateY(26px)!important; color:#fff!important; font-size:clamp(20px,2vw,34px)!important; line-height:1.1!important; text-shadow:0 3px 14px rgba(57,30,43,.45)!important; } #top .debut-chip{ transform:translateY(26px)!important; margin-top:4px!important; } #top .top-cta{bottom:4.2vh!important} /* ---------- POP START / CONTINUE ---------- */ .start-overlay{ z-index:170!important; align-items:center!important; justify-content:center!important; padding:28px!important; background:rgba(72,39,54,.36)!important; backdrop-filter:blur(8px)!important; } .start-card{ position:relative; width:min(920px,92vw); min-height:520px; padding:54px 58px 46px; overflow:hidden; text-align:center; border:9px double #ffadc5; outline:6px solid #fff; border-radius:44px; background: linear-gradient(135deg,rgba(255,255,255,.91),rgba(255,246,249,.93)), repeating-linear-gradient(45deg,rgba(255,177,202,.08) 0 2px,transparent 2px 22px), #fff7fa; box-shadow:0 28px 80px rgba(74,37,53,.28); } .start-card:before{ content:""; position:absolute; inset:8px; border:14px solid transparent; border-image:url("assets/ui_pop/lace-frame.svg") 28 round; pointer-events:none; opacity:.95; } .start-card:after{ content:""; position:absolute; width:110px;height:70px; left:50%;top:-19px; transform:translateX(-50%); background:url("assets/ui_pop/bow.svg") center/contain no-repeat; pointer-events:none; } .start-close{ position:absolute;z-index:3;right:24px;top:22px; width:52px;height:52px;border-radius:50%; border:4px solid #fff;outline:2px solid #e887a7; background:#fff9fb;color:#d65e86;font-size:30px; box-shadow:0 6px 14px rgba(83,41,58,.12); } .start-kicker{margin-top:8px;color:#d86a90;font-size:13px;font-weight:950;letter-spacing:.14em} .start-card>h2{margin:10px 0 8px;font-size:clamp(34px,4vw,58px);color:#d85d87;letter-spacing:.02em} .start-summary{margin:0 auto 27px;max-width:700px;color:#805f6c;font-weight:800;font-size:13px;line-height:1.7} .start-choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative;z-index:2} .start-choice-buttons>button{ min-height:220px; padding:28px 24px; border:5px solid #fff; outline:2px solid #ffc0d4; border-radius:34px; box-shadow:0 12px 25px rgba(92,48,67,.13); transition:.15s; } .start-choice-buttons>button:hover{transform:translateY(-4px)} .start-choice-buttons span{display:block;font-size:54px;margin-bottom:10px} .start-choice-buttons b{display:block;font-size:25px;margin-bottom:8px} .start-choice-buttons small{display:block;font-size:11px;line-height:1.6;color:#7f6570} .continue-choice{background:linear-gradient(145deg,#fff,#ffeaf2)!important;color:#d45081!important} .new-choice{background:linear-gradient(145deg,#fffdf8,#fff0f6)!important;color:#b45c83!important} .start-choice-buttons>button[hidden]{display:none!important} .start-choice-buttons:has(.continue-choice[hidden]){grid-template-columns:minmax(300px,620px);justify-content:center} .new-game-panel{position:relative;z-index:2;width:min(690px,100%);margin:10px auto 0;padding:30px 34px 24px;border:4px solid #fff;outline:2px solid #ffc0d2;border-radius:30px;background:linear-gradient(145deg,#fff,#fff5f8);box-shadow:0 12px 26px rgba(96,49,70,.13)} .new-game-panel[hidden]{display:none!important} .invite-ribbon{display:inline-block;margin-top:-51px;margin-bottom:14px;padding:9px 24px;border:4px solid #fff;outline:2px solid #ffaec7;border-radius:999px;background:linear-gradient(135deg,#ff83ad,#ef6f9a);color:#fff;font-size:10px;font-weight:950;letter-spacing:.13em} .new-game-panel h3{margin:4px 0 6px;font-size:28px;color:#d95f87} .new-game-panel>p{margin:0 0 16px;color:#775d68;font-size:12px} .new-game-code-form{display:grid;grid-template-columns:1fr 180px;gap:10px} .new-game-code-form input{min-height:56px;border:3px solid #f2ced9;border-radius:18px;background:#fff;padding:0 18px;font-size:16px;font-weight:850;outline:none} .new-game-code-form input:focus{border-color:#ff8fb4;box-shadow:0 0 0 4px #ffe4ed} .new-game-code-form button,.beginner-start{border:3px solid #fff;outline:2px solid #ff9fbc;border-radius:18px;background:linear-gradient(135deg,#ff80a9,#f16998);color:#fff;font-weight:950;box-shadow:0 7px 14px rgba(151,63,99,.17)} .new-game-code-form button{min-height:56px} .new-game-code-result{min-height:20px!important;margin:8px 0 10px!important;color:#c85a7f!important;font-size:11px!important;font-weight:900!important} .new-game-code-result.ok{color:#37a787!important} .beginner-start{width:100%;min-height:62px;padding:9px 15px} .beginner-start b,.beginner-start small{display:block}.beginner-start b{font-size:15px}.beginner-start small{font-size:9px;margin-top:3px;opacity:.9} .new-game-cancel{margin:13px auto 3px;border:0;background:transparent;color:#a87084;font-size:11px;font-weight:900} .reset-warning{display:block;margin-top:7px;color:#9a7482;font-size:9px;line-height:1.5} /* ---------- Rank clarity ---------- */ .rank-guide-head{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding:18px;border:3px solid #fff;outline:2px solid #ffc8d8;border-radius:26px;background:linear-gradient(145deg,#fff,#fff3f7)} .rank-guide-head img{width:110px;height:125px;object-fit:cover;border-radius:20px;border:4px solid #fff;outline:2px solid #ffc2d5} .rank-guide-head small{color:#c46689;font-weight:950;letter-spacing:.12em}.rank-guide-head h3{margin:4px 0 7px;font-size:22px}.rank-guide-head p{margin:0;color:#755a65;font-size:11px;line-height:1.7} .rank-guide-current{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.rank-guide-current span{padding:15px 18px;border:2px solid #f2d0dc;border-radius:20px;background:#fff}.rank-guide-current small,.rank-guide-current b,.rank-guide-current em{display:block}.rank-guide-current small{font-size:9px;color:#9b7382}.rank-guide-current b{font-size:19px;color:#d45d86;margin:3px 0}.rank-guide-current em{font-size:10px;color:#725763} .rank-ladder,.rep-ladder{margin-top:16px;border:2px solid #f1cfda;border-radius:22px;overflow:hidden;background:#fff}.rank-ladder header,.rep-ladder header{padding:13px 16px;background:#fff2f6;border-bottom:2px solid #f1cfda}.rank-ladder header b,.rank-ladder header small,.rep-ladder header b,.rep-ladder header small{display:block}.rank-ladder header small,.rep-ladder header small{font-size:9px;color:#92717d;margin-top:2px} .rank-ladder>div{display:grid;grid-template-columns:38px 1fr 120px 55px;gap:8px;align-items:center;padding:9px 13px;border-bottom:1px dashed #f0d6df}.rank-ladder>div:last-child{border-bottom:0}.rank-ladder>div.current{background:linear-gradient(90deg,#fff0f5,#fff)}.rank-ladder>div>span{font-size:9px;color:#c7839e}.rank-ladder>div>b{font-size:12px}.rank-ladder>div>small{font-size:9px;color:#9a7683}.rank-ladder>div>em{justify-self:end;padding:4px 8px;border-radius:999px;background:#ff7fa8;color:#fff;font-size:8px;font-weight:950} .rep-ladder{display:grid;grid-template-columns:1fr 1fr}.rep-ladder header{grid-column:1/-1}.rep-ladder>div{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px dashed #efd6df}.rep-ladder>div:nth-last-child(-n/**/+2){border-bottom:0}.rep-ladder>div.current{background:#fff1f6}.rep-ladder>div b{font-size:11px}.rep-ladder>div small{font-size:9px;color:#987481} /* ---------- Calendar: rebuilt to match the supplied pink lace reference ---------- */ #eventOverlay.calendar-mode{ display:block!important; padding:18px!important; overflow:auto!important; background: radial-gradient(circle at 12% 7%,rgba(255,255,255,.9),transparent 28%), linear-gradient(145deg,#ffeef3,#fff6ef)!important; } #eventOverlay.calendar-mode>header,#eventOverlay.calendar-mode>nav{display:none!important} #eventOverlay.calendar-mode .event-body{width:min(960px,94vw)!important;margin:0 auto!important;padding:0 0 24px!important} #eventOverlay.calendar-mode .nyaas-calendar{ position:relative!important; min-height:calc(100vh - 36px)!important; padding:58px 54px 42px!important; overflow:hidden!important; border:10px double #ffacc4!important; outline:7px solid #fff!important; border-radius:42px!important; background: linear-gradient(45deg,rgba(255,180,201,.08) 25%,transparent 25%,transparent 75%,rgba(255,180,201,.08) 75%), linear-gradient(-45deg,rgba(255,180,201,.08) 25%,transparent 25%,transparent 75%,rgba(255,180,201,.08) 75%), linear-gradient(145deg,#fff7f2,#fffdf9)!important; background-size:38px 38px,38px 38px,auto!important; background-position:0 0,19px 19px,0 0!important; box-shadow:0 28px 70px rgba(91,43,63,.22)!important; } #eventOverlay.calendar-mode .nyaas-calendar:before{ content:""!important; position:absolute!important; inset:7px!important; border:17px solid transparent!important; border-image:url("assets/ui_pop/lace-frame.svg") 28 round!important; pointer-events:none!important; opacity:1!important; filter:drop-shadow(0 2px 1px rgba(219,113,149,.18))!important; } #eventOverlay.calendar-mode .nyaas-calendar:after{ content:""!important; position:absolute!important; left:20px!important; top:18px!important; width:118px!important; height:78px!important; background:url("assets/ui_pop/bow.svg") center/contain no-repeat!important; transform:rotate(-8deg)!important; pointer-events:none!important; } .calendar-pearls{position:absolute;z-index:0;left:150px;right:135px;top:30px;height:25px;background:radial-gradient(circle,#fff 0 5px,#f2d0c7 6px 7px,transparent 8px) 0 0/30px 18px repeat-x;opacity:.95;filter:drop-shadow(0 2px 1px rgba(173,103,96,.14));pointer-events:none} .calendar-pearls:after{content:"";position:absolute;left:35px;right:10px;top:10px;height:14px;border-bottom:2px solid rgba(226,184,174,.55);border-radius:50%} #eventOverlay.calendar-mode .calendar-close{position:fixed!important;z-index:180!important;right:35px!important;top:28px!important;width:54px!important;height:54px!important;border:5px solid #fff!important;outline:2px solid #df779a!important;border-radius:50%!important;background:#fff8fa!important;color:#d45c83!important;font-size:30px!important;box-shadow:0 7px 16px rgba(83,41,58,.16)!important} #eventOverlay.calendar-mode .nyaas-calendar>header{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:1fr 230px!important;align-items:center!important;min-height:155px!important;padding:0 8px 15px 78px!important;border:0!important} #eventOverlay.calendar-mode .calendar-title{text-align:center!important} #eventOverlay.calendar-mode .calendar-title small{display:block!important;color:#e0648e!important;font-size:23px!important;font-weight:950!important;letter-spacing:.06em!important;text-shadow:0 2px #fff!important} #eventOverlay.calendar-mode .calendar-title h2{margin:-3px 0 1px!important;font-family:Georgia,"Times New Roman",serif!important;font-size:70px!important;font-weight:500!important;letter-spacing:.025em!important;line-height:.95!important;color:#d86a86!important;text-shadow:0 3px #fff,0 6px 0 rgba(255,217,226,.8),0 10px 22px rgba(182,79,112,.15)!important} #eventOverlay.calendar-mode .calendar-title em{display:inline-block!important;margin-top:8px!important;padding:6px 21px!important;border:4px solid #fff!important;outline:1px solid #f092ae!important;border-radius:999px!important;background:linear-gradient(#f39bb6,#e97e9f)!important;color:#fff!important;font-size:10px!important;font-weight:950!important;box-shadow:0 4px 0 rgba(238,177,196,.6)!important} #eventOverlay.calendar-mode .nyaas-calendar>header aside{position:relative!important;right:auto!important;top:auto!important;min-width:0!important;padding:18px 20px!important;border:5px double #eba6ba!important;border-radius:22px!important;background:rgba(255,255,255,.91)!important;box-shadow:0 5px 0 #ffe0e7!important;text-align:center!important} #eventOverlay.calendar-mode .nyaas-calendar>header aside:before{content:"🎀";position:absolute;left:-20px;top:-23px;font-size:34px;transform:rotate(-10deg)} #eventOverlay.calendar-mode .nyaas-calendar>header aside small{display:block!important;color:#9f5c4c!important;font-size:10px!important;font-weight:950!important;letter-spacing:.18em!important} #eventOverlay.calendar-mode .nyaas-calendar>header aside b{display:block!important;margin-top:6px!important;color:#d95c82!important;font-size:17px!important} .calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:4px 10px 8px!important;position:relative!important;z-index:1!important} #eventOverlay.calendar-mode .calendar-month{display:flex!important;align-items:center!important;gap:22px!important;height:auto!important;margin:0!important;padding:0!important} #eventOverlay.calendar-mode .calendar-month h3{margin:0!important;font-family:Georgia,"Times New Roman",serif!important;font-size:28px!important;color:#704d57!important;letter-spacing:.04em!important} #eventOverlay.calendar-mode .calendar-month button{width:45px!important;height:45px!important;border:4px solid #fff!important;outline:2px solid #e77d9d!important;border-radius:50%!important;background:linear-gradient(#ff94b3,#ec688f)!important;color:#fff!important;font-size:26px!important;font-weight:500!important;box-shadow:0 5px 0 #f1c4cf!important} .calendar-today-btn{height:40px;padding:0 24px;border:4px solid #fff;outline:2px solid #e77d9d;border-radius:999px;background:linear-gradient(#ff94b3,#ec688f);color:#fff;font-weight:950;letter-spacing:.08em;box-shadow:0 4px 0 #f1c4cf} #eventOverlay.calendar-mode .cal-week{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(7,1fr)!important;height:40px!important;margin:0 6px!important;border:3px solid #edacbf!important;border-radius:999px!important;overflow:hidden!important;background:#fffafb!important} #eventOverlay.calendar-mode .cal-week b{display:grid!important;place-items:center!important;padding:0!important;border:0!important;background:transparent!important;font-size:11px!important;color:#5e494d!important} #eventOverlay.calendar-mode .cal-week b:first-child{color:#df4d79!important}#eventOverlay.calendar-mode .cal-week b:last-child{color:#765dce!important} #eventOverlay.calendar-mode .cal-grid{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:repeat(7,1fr)!important;margin:5px 6px 0!important;border:2px solid #efc0cd!important;border-radius:17px!important;overflow:hidden!important;background:rgba(255,255,255,.76)!important} #eventOverlay.calendar-mode .cal-cell{min-height:88px!important;padding:8px!important;border:0!important;border-right:1px solid #efc7d1!important;border-bottom:1px solid #efc7d1!important;background:rgba(255,255,255,.78)!important;color:#6d5056!important;text-align:left!important;position:relative!important} #eventOverlay.calendar-mode .cal-cell:nth-child(7n){border-right:0!important} #eventOverlay.calendar-mode .cal-cell.blank{background:rgba(255,247,246,.45)!important} #eventOverlay.calendar-mode .cal-cell>b{font-family:Georgia,"Times New Roman",serif!important;font-size:19px!important;color:#64484f!important} #eventOverlay.calendar-mode .cal-cell>i{position:absolute!important;right:7px!important;bottom:5px!important;font-size:9px!important;opacity:.15!important;font-style:normal!important} #eventOverlay.calendar-mode .cal-cell.event span{display:block!important;margin-top:22px!important;padding:6px 5px!important;border:3px solid #fff!important;border-radius:999px!important;color:#fff!important;text-align:center!important;font-size:8px!important;font-weight:950!important;box-shadow:0 3px 0 rgba(235,191,204,.75)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #eventOverlay.calendar-mode .cal-cell.event.friday span{background:linear-gradient(#ff9ab5,#ed799f)!important} #eventOverlay.calendar-mode .cal-cell.event.birthday span{background:linear-gradient(#dca7f3,#b980d8)!important} #eventOverlay.calendar-mode .cal-cell.event.catday span{background:linear-gradient(#ffc07f,#e89a57)!important} #eventOverlay.calendar-mode .cal-cell.event.monthend span{background:linear-gradient(#cf9be9,#a976c6)!important} #eventOverlay.calendar-mode .cal-cell.today{background:linear-gradient(145deg,#fff,#fff1f5)!important;box-shadow:inset 0 0 0 4px #ff9fba!important} #eventOverlay.calendar-mode .cal-cell.today:after{content:"🎀"!important;position:absolute!important;right:4px!important;top:-13px!important;font-size:25px!important} #eventOverlay.calendar-mode .nyaas-calendar footer{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 12px!important;margin:22px 4px 0!important;padding-top:16px!important;border-top:4px double #eeb2c3!important} #eventOverlay.calendar-mode .nyaas-calendar footer h3{grid-column:1/-1!important;margin:0 0 6px!important;text-align:center!important;color:#d95c83!important;font-size:22px!important;letter-spacing:.05em!important} #eventOverlay.calendar-mode .nyaas-calendar footer h3 span{color:#e7779c!important;font-size:16px!important} #eventOverlay.calendar-mode .nyaas-calendar footer button{position:relative!important;display:grid!important;grid-template-columns:68px 1fr 24px!important;align-items:center!important;min-height:58px!important;padding:8px 12px!important;border:3px solid #fff!important;outline:1px solid #efc4d1!important;border-radius:17px!important;background:linear-gradient(145deg,#fff,#fff9fa)!important;text-align:left!important;box-shadow:0 4px 8px rgba(115,66,85,.06)!important} #eventOverlay.calendar-mode .nyaas-calendar footer button>b{justify-self:center!important;min-width:58px!important;padding:7px 9px!important;border-radius:999px!important;background:#ef83a4!important;color:#fff!important;font-size:10px!important;text-align:center!important} #eventOverlay.calendar-mode .nyaas-calendar footer button strong{display:block!important;font-size:12px!important;color:#c35b7d!important} #eventOverlay.calendar-mode .nyaas-calendar footer button small{display:block!important;margin-top:2px!important;font-size:8px!important;line-height:1.35!important;color:#776069!important} #eventOverlay.calendar-mode .nyaas-calendar footer button>i{font-style:normal!important;color:#e584a5!important;opacity:.55!important;text-align:center!important} #eventOverlay.calendar-mode .nyaas-calendar footer button.birthday>b{background:#b986d6!important}#eventOverlay.calendar-mode .nyaas-calendar footer button.birthday strong{color:#9165b6!important} #eventOverlay.calendar-mode .nyaas-calendar footer button.catday>b{background:#e89d63!important}#eventOverlay.calendar-mode .nyaas-calendar footer button.catday strong{color:#c6753c!important} #eventOverlay.calendar-mode .nyaas-calendar footer button.monthend>b{background:#a97ac7!important}#eventOverlay.calendar-mode .nyaas-calendar footer button.monthend strong{color:#8e61ae!important} /* ---------- Tutorial is now unmistakable ---------- */ .tutorial-overlay{background:rgba(67,36,50,.36)!important;backdrop-filter:blur(7px)!important} .tutorial-card{border:8px double #ffabc6!important;outline:6px solid #fff!important;box-shadow:0 25px 70px rgba(73,37,52,.25)!important} .tutorial-copy>span{display:inline-block!important;padding:7px 13px!important;border-radius:999px!important;background:#ff80a8!important;color:#fff!important;font-weight:950!important} .tutorial-copy h2{color:#d85d87!important;font-size:30px!important} .tutorial-copy p{white-space:pre-line!important;line-height:1.8!important} @media(max-width:900px){ #top .top-logo-stage{top:38%!important} #top .top-logo-stage p,#top .debut-chip{transform:translateY(18px)!important} .start-card{padding:48px 28px 34px}.start-choice-buttons{grid-template-columns:1fr}.start-choice-buttons>button{min-height:150px}.new-game-code-form{grid-template-columns:1fr} #eventOverlay.calendar-mode .nyaas-calendar{padding:48px 22px 30px!important}.calendar-pearls{left:105px;right:80px}.nyaas-calendar>header{grid-template-columns:1fr!important;padding-left:0!important}.nyaas-calendar>header aside{display:none!important}.calendar-title h2{font-size:52px!important}.cal-cell{min-height:68px!important}.nyaas-calendar footer{grid-template-columns:1fr!important}.nyaas-calendar footer h3{grid-column:1!important} } /* NYAAS FIX6.5 — CLEAN ROOM MASTER / FULL SCREEN CAST / POP 80% — 2026-08-11 */ /* ====================================================================== NYAAS MASTER V10 — TRUE STRUCTURAL POP ROOM Exactly one active room design. No legacy FIX6 selectors are loaded. Cast video remains full-screen; only UI is compacted to ~80%. ====================================================================== */ :root{--n10-pink:#f45f91;--n10-pink2:#ff91b3;--n10-pale:#fff5f9;--n10-line:#f7a9c3;--n10-ink:#52313d;--n10-shadow:0 8px 25px rgba(111,52,75,.16);--n10-white:rgba(255,252,253,.96)} #room.room-screen{position:fixed;inset:0;background:#f9eef2;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif} #room.room-screen::before{content:"";position:absolute;z-index:44;inset:2px;pointer-events:none;background:url('assets/ui_pop/lace-frame.svg') center/100% 100% no-repeat;filter:drop-shadow(0 2px 1px rgba(224,92,137,.18))} #room.room-screen::after{content:"";position:absolute;z-index:43;inset:9px;border:2px solid rgba(255,255,255,.98);outline:2px solid rgba(244,119,158,.72);border-radius:27px;pointer-events:none;box-shadow:inset 0 0 0 5px rgba(255,213,227,.18)} #room .room-vignette{display:none!important} #room .room-visual{position:absolute;z-index:1;inset:0;overflow:hidden;background:#f8edef} #room .service-video,#room .cast-fallback{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;transform:none!important;scale:1!important;filter:none!important;transition:opacity .14s linear!important} #room .service-video{z-index:2;opacity:0;background:transparent}#room .cast-fallback{z-index:1;opacity:1} #room .room-visual.video-ready .service-video{opacity:1!important}#room .room-visual.video-ready .cast-fallback{opacity:0!important;visibility:hidden!important} /* Header — ornate POP cards, all inside safe area. */ #room .room-head{position:absolute;z-index:50;top:15px;left:22px;right:22px;height:74px;display:grid;grid-template-columns:252px auto minmax(20px,1fr) auto 66px;align-items:start;gap:10px;pointer-events:none;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important} #room .room-head>*{pointer-events:auto} #room .room-name-card{position:relative;height:69px;padding:10px 20px;border:4px solid #fff;outline:1.5px solid var(--n10-line);border-radius:28px;background:var(--n10-white);box-shadow:0 5px 0 rgba(246,185,207,.38),var(--n10-shadow);overflow:visible} #room .room-name-card::before{content:"";position:absolute;right:12px;top:-12px;width:38px;height:25px;background:url('assets/ui_pop/bow.svg') center/contain no-repeat} #room .room-name-card::after{content:"";position:absolute;right:19px;bottom:8px;width:22px;height:22px;background:url('assets/ui_pop/paw.svg') center/contain no-repeat;opacity:.38} #room .room-name-card small{display:block;color:#d4658e;font-size:7px;font-weight:950;letter-spacing:.18em;line-height:1} #room .room-name-card>div{display:flex;align-items:center;gap:8px;margin-top:4px}#room .room-name-card b{font-size:24px;line-height:1.05;color:#3e2931;white-space:nowrap}#room .room-name-card em{font-size:8px;color:#119c79;font-weight:950;white-space:nowrap} #room .mini-bow{display:none} #room .room-visit-actions{display:flex;gap:9px}#room .room-visit-actions button{height:58px;padding:0 20px;border:4px solid #fff;outline:1.5px solid #f6b2ca;border-radius:23px;background:rgba(255,251,252,.97);box-shadow:0 5px 0 rgba(246,188,208,.36),var(--n10-shadow);font-size:11px;font-weight:950;white-space:nowrap}#room .room-visit-actions button:first-child{color:#dc4d7d} #room .room-hud{justify-self:end;display:flex;gap:9px}#room .room-hud span{min-width:132px;height:62px;padding:8px 14px;text-align:center;border:4px solid #fff;outline:1.5px solid #f6b7cc;border-radius:25px;background:rgba(255,251,252,.97);box-shadow:0 5px 0 rgba(246,189,209,.34),var(--n10-shadow)}#room .room-hud small{display:block;color:#95727f;font-size:7px;letter-spacing:.13em;font-weight:950;line-height:1.2}#room .room-hud b{display:block;margin-top:2px;color:#49323b;font-size:19px;line-height:1.1} #room .room-hamburger{position:relative;width:62px!important;height:62px!important;border-radius:23px!important;border:5px solid #fff!important;outline:2px solid #f7a9c4!important;background:linear-gradient(#ff8eb1,#f46493)!important;box-shadow:0 5px 0 #f7c7d7,var(--n10-shadow)!important}#room .room-hamburger::before{content:"";position:absolute;left:50%;top:-14px;width:34px;height:22px;transform:translateX(-50%);background:url('assets/ui_pop/bow.svg') center/contain no-repeat}#room .room-hamburger i{width:27px!important;height:4px!important;background:#fff!important} /* Left UI stack — compact, non-blocking. */ #room .left-ui-stack{position:absolute;z-index:30;left:25px;top:178px;width:315px;display:flex;flex-direction:column;gap:18px;pointer-events:none} #room .left-ui-stack>*{pointer-events:auto} #room .buddy-bubble{position:relative!important;left:auto!important;top:auto!important;width:100%!important;min-height:126px!important;margin:0!important;display:grid!important;grid-template-columns:58px 1fr!important;gap:12px!important;align-items:center!important;padding:31px 17px 14px!important;border:4px solid #fff!important;outline:1.5px solid #f6aec6!important;border-radius:26px!important;background:var(--n10-white)!important;box-shadow:0 6px 0 rgba(246,190,210,.34),var(--n10-shadow)!important;text-align:left!important;overflow:visible!important} #room .buddy-bubble::after{content:"";position:absolute;right:10px;bottom:7px;width:24px;height:24px;background:url('assets/ui_pop/paw.svg') center/contain no-repeat;opacity:.28} #room .buddy-ribbon{position:absolute!important;left:-11px!important;top:-16px!important;min-width:212px!important;padding:7px 27px 7px 20px!important;border:4px solid #fff!important;outline:1.5px solid #f49cbc!important;border-radius:7px 24px 24px 7px!important;background:linear-gradient(90deg,#ef5f8e,#ff8eb2)!important;color:#fff!important;font-size:10px!important;font-weight:950!important;box-shadow:0 3px 0 #f7c8d7!important;white-space:nowrap!important} #room .buddy-ribbon::after{content:"";position:absolute;right:-17px;top:-8px;width:34px;height:26px;background:url('assets/ui_pop/bow.svg') center/contain no-repeat} #room .buddy-bubble img{width:58px!important;height:58px!important;border:3px solid #fff!important;outline:1px solid #f6b7cc!important;border-radius:16px!important;object-fit:cover!important}#room .buddy-copy{min-width:0}#room .buddy-copy b{display:block;color:#d64c7b;font-size:15px;line-height:1.1;margin-bottom:5px}#room .buddy-copy em{display:block;color:#5b444d;font-size:10px;line-height:1.35;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#room .buddy-meta{display:block;margin-top:7px;color:#ab7489;font-size:7px;font-weight:900} /* MUSIC: no giant record. Only a small music-note badge and readable title. */ #room .music-widget{position:relative!important;left:auto!important;top:auto!important;width:100%!important;min-height:128px!important;margin:0!important;padding:14px 15px 13px!important;border:4px solid #fff!important;outline:1.5px solid #e4b9dc!important;border-radius:27px!important;background:rgba(255,251,253,.97)!important;box-shadow:0 6px 0 rgba(226,194,231,.32),var(--n10-shadow)!important;overflow:visible!important} #room .music-widget::before{content:"";position:absolute;left:-6px;top:-9px;width:30px;height:30px;background:url('assets/ui_pop/heart.svg') center/contain no-repeat;opacity:.9} #room .music-now{width:100%!important;min-height:51px!important;padding:0 2px!important;border:0!important;background:transparent!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;text-align:left!important} #room .music-note-icon{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border:3px solid #fff!important;outline:1px solid #d8bfeb!important;border-radius:50%!important;background:linear-gradient(145deg,#9f75c6,#6c4c98)!important;color:#fff!important;font-size:15px!important;font-weight:950!important;box-shadow:0 3px 9px rgba(65,44,76,.17)!important;animation:none!important;transform:none!important} #room .music-note-icon.playing{animation:n10MusicPulse 1.4s ease-in-out infinite!important}@keyframes n10MusicPulse{50%{transform:scale(1.08)}} #room .music-copy{min-width:0!important}#room .music-copy small{display:block;color:#9d70ba;font-size:7px;letter-spacing:.15em;font-weight:950}#room .music-copy b{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important;max-width:244px!important;color:#49333d!important;font-size:14px!important;line-height:1.08!important;font-weight:950!important}#room .music-copy em{display:block;margin-top:3px;color:#ee648f;font-size:7px;font-weight:950} #room .music-room-controls{display:grid!important;grid-template-columns:44px 44px 44px 62px 1fr!important;gap:7px!important;margin-top:8px!important}#room .music-room-controls button{height:31px!important;min-width:0!important;padding:0 6px!important;border:3px solid #fff!important;outline:1px solid #edbdd0!important;border-radius:999px!important;background:#fff!important;color:#d65d87!important;box-shadow:0 2px 0 #f3d4df!important;font-size:9px!important;font-weight:950!important}#room .music-room-controls .room-track-play{background:#f56d99!important;color:#fff!important;font-size:13px!important}#room .music-room-controls .music-toggle{background:#f6efff!important;color:#8d63b4!important}#room .music-room-controls .random-btn{background:#fff0f5!important;color:#d85883!important;font-size:7px!important} /* Right rank panel — clear rank + next rank, bug-proof meter. */ #room .oshi-float{position:absolute!important;z-index:30!important;right:24px!important;top:181px!important;width:318px!important;padding:35px 19px 17px!important;border:4px solid #fff!important;outline:1.5px solid #f6aec7!important;border-radius:31px!important;background:var(--n10-white)!important;box-shadow:0 6px 0 rgba(246,190,211,.33),var(--n10-shadow)!important;overflow:visible!important} #room .oshi-float::before{content:"";position:absolute;left:19px;top:-18px;width:44px;height:32px;background:url('assets/ui_pop/bow.svg') center/contain no-repeat}#room .oshi-float::after{content:"";position:absolute;right:7px;bottom:5px;width:30px;height:30px;background:url('assets/ui_pop/paw.svg') center/contain no-repeat;opacity:.24} #room .oshi-ribbon{display:inline-block!important;color:#e25382!important;font-size:14px!important;font-weight:950!important;line-height:1!important}#room .rank-guide-mini{position:absolute!important;left:19px!important;top:58px!important;width:23px!important;height:23px!important;padding:0!important;border:2px solid #f5b5ca!important;border-radius:50%!important;background:#fff!important;color:#e45c88!important;font-size:9px!important;font-weight:950!important}#room .oshi-float>b{display:block!important;margin:-16px 0 0 58px!important;text-align:right!important;color:#dc4e7d!important;font-size:22px!important;line-height:1.05!important}#room .oshi-float>em{display:block!important;margin:5px 0 0!important;text-align:right!important;color:#6e5660!important;font-size:8px!important;font-weight:900!important} #room .meter{position:relative!important;height:13px!important;margin:12px 0 14px!important;border:2px solid #f7c4d6!important;border-radius:999px!important;background:#fff0f5!important;overflow:hidden!important}#room .meter>i{display:block!important;height:100%!important;width:0;border-radius:999px!important;background:linear-gradient(90deg,#f35f8f,#ff9ebc)!important;transition:width .35s ease!important;transform:none!important}#room .meter::before,#room .meter::after{content:none!important} #room .mini-stats{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:7px!important}#room .mini-stats button{height:68px!important;padding:4px!important;border:3px solid #fff!important;outline:1px solid #f8cadd!important;border-radius:21px!important;background:linear-gradient(#fff,#fff7fa)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;box-shadow:0 2px 0 #f5d7e1!important}#room .mini-stats button span{font-size:15px!important;line-height:1!important}#room .mini-stats button small{margin-top:2px;color:#d1658c!important;font-size:6px!important;font-weight:950!important}#room .mini-stats button b{font-size:16px!important;line-height:1.05!important} #room .mission-chip{position:relative!important;width:100%!important;min-height:55px!important;margin-top:11px!important;padding:9px 12px!important;border:2px solid #f7c6d8!important;border-radius:16px!important;background:linear-gradient(100deg,#fff7fa,#fff9ed)!important;text-align:left!important;overflow:hidden!important}#room .mission-chip small{display:block!important;color:#ed6a92!important;font-size:6px!important;letter-spacing:.13em!important;font-weight:950!important}#room .mission-chip b{display:block!important;font-size:9px!important;line-height:1.25!important}#room .mission-chip em{display:block!important;margin-top:2px!important;color:#8f707d!important;font-size:6px!important}#room .mission-chip i{position:absolute!important;left:0!important;bottom:0!important;height:4px!important;background:#f580a5!important} /* Chat is NOT always on top of the cast. It opens only when TALK / PRIVATE is tapped. */ #room .talk-dock{display:none!important;position:absolute!important;z-index:55!important;left:50%!important;bottom:121px!important;transform:translateX(-50%)!important;width:min(570px,70vw)!important;border:4px solid #fff!important;outline:1.5px solid #f6b5cc!important;border-radius:25px!important;background:rgba(255,252,253,.98)!important;box-shadow:var(--n10-shadow)!important;overflow:hidden!important;zoom:1!important}#room .talk-dock.open{display:block!important}#room .talk-dock>header{height:60px!important;padding:0 17px!important}#room .talk-dock .talk-content{max-height:210px!important;overflow:auto!important} /* Bottom menu — approved POP family at ~80%. */ #room .quick-actions{position:absolute!important;z-index:38!important;left:50%!important;bottom:23px!important;transform:translateX(-50%)!important;width:auto!important;height:96px!important;display:flex!important;align-items:stretch!important;gap:7px!important;padding:9px 12px!important;border:4px solid #fff!important;outline:1.5px solid #f7b6cc!important;border-radius:33px!important;background:rgba(255,251,253,.97)!important;box-shadow:0 6px 0 rgba(247,194,212,.38),var(--n10-shadow)!important;overflow:visible!important;zoom:1!important} #room .quick-actions::before{content:"";position:absolute;left:50%;top:-17px;width:45px;height:30px;transform:translateX(-50%);background:url('assets/ui_pop/bow.svg') center/contain no-repeat}#room .quick-actions::after{content:"";position:absolute;left:-25px;bottom:-17px;width:47px;height:47px;background:url('assets/ui_pop/paw.svg') center/contain no-repeat;opacity:.85} #room .qa{width:88px!important;min-width:88px!important;height:73px!important;padding:5px!important;border:3px solid #fff!important;outline:1px solid #efcbd9!important;border-radius:21px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;box-shadow:0 3px 0 rgba(215,174,190,.23)!important;font-weight:950!important;transform:none!important}.qa span{font-size:20px!important;line-height:1!important}.qa b{font-size:10px!important;line-height:1.15!important}.qa small{font-size:5.5px!important;letter-spacing:.05em!important}.qa.talk{background:linear-gradient(#fff,#ffe6ef)!important}.qa.private{background:linear-gradient(#fff,#ffe9ef)!important}.qa.menu{background:linear-gradient(#fff,#e4f8f2)!important}.qa.cheers{background:linear-gradient(#fff,#fff0ce)!important}.qa.cheer{background:linear-gradient(#fff,#e7f0ff)!important}.qa.gift{background:linear-gradient(#fff,#eee6ff)!important}.qa.idol{background:linear-gradient(#fff,#fff1f4)!important}.qa.more{width:34px!important;min-width:34px!important;background:#ffe8ef!important;color:#d85e86!important} #room .quick-actions.collapsed .qa:not(.more){display:none!important}#room .quick-actions.collapsed{height:55px!important} /* Oshi notebook — visible relationship/game progress, not a plain log. */ #room .right-bottom-tools{position:absolute!important;z-index:37!important;right:22px!important;bottom:22px!important;width:190px!important;height:190px!important;pointer-events:none!important}#room .right-bottom-tools>*{pointer-events:auto!important} #room .oshi-life{position:absolute!important;right:3px!important;top:-8px!important;width:87px!important;height:87px!important;border:5px solid #fff!important;outline:2px solid #f78faf!important;border-radius:50%!important;background:linear-gradient(145deg,#ff91b4,#f26795)!important;color:#fff!important;box-shadow:0 6px 0 #f7c7d6,var(--n10-shadow)!important;font-weight:950!important;z-index:2!important}#room .oshi-life::before{content:"";position:absolute;left:50%;top:-14px;width:36px;height:24px;transform:translateX(-50%);background:url('assets/ui_pop/bow.svg') center/contain no-repeat}#room .oshi-life b{display:block!important;font-size:15px!important}#room .oshi-life small{display:block!important;font-size:6px!important} #room .memory-quick{position:absolute!important;right:0!important;bottom:0!important;width:188px!important;height:94px!important;padding:13px 14px 10px 31px!important;border:4px solid #fff!important;outline:1.5px solid #f4abc4!important;border-radius:14px 22px 19px 14px!important;background:repeating-linear-gradient(0deg,rgba(245,111,151,.08) 0 1px,transparent 1px 18px),linear-gradient(145deg,#fff8fb,#fff)!important;color:#5a3944!important;box-shadow:0 6px 0 #f6cfdb,var(--n10-shadow)!important;text-align:left!important;overflow:visible!important}#room .memory-quick::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:10px;background:repeating-linear-gradient(0deg,#d4a2b4 0 3px,transparent 3px 10px)}#room .memory-quick::after{content:"";position:absolute;right:9px;top:-14px;width:35px;height:25px;background:url('assets/ui_pop/bow.svg') center/contain no-repeat}#room .memory-book-label{display:block!important;color:#dc5987!important;font-size:8px!important;font-weight:950!important}#room .memory-quick b{display:block!important;margin-top:4px!important;color:#d64e7c!important;font-size:14px!important}#room .memory-quick small,#room .memory-quick em{display:block!important;color:#8b6876!important;font-size:7px!important;line-height:1.35!important} /* Action feedback — hearts + points, never an opaque modal over her face. */ #room .heart-burst{position:absolute!important;z-index:72!important;left:13%!important;top:57%!important;width:320px!important;height:170px!important;pointer-events:none!important;opacity:0!important}#room .heart-burst.play{opacity:1!important}#room .heart-score{position:absolute!important;left:0!important;top:28px!important;transform:rotate(-7deg)!important;font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif!important;color:#ef5288!important;text-align:center!important;text-shadow:0 3px 0 #fff,0 0 12px #fff!important;animation:n10Score 1.9s ease both!important}#room .heart-score strong{display:block!important;font-size:29px!important;-webkit-text-stroke:4px #fff!important;paint-order:stroke fill!important}#room .heart-score b{display:block!important;font-size:47px!important;line-height:.9!important;-webkit-text-stroke:5px #fff!important;paint-order:stroke fill!important}#room .heart-burst i{position:absolute!important;left:145px!important;top:80px!important;color:#ff6f9e!important;font-size:24px!important;text-shadow:0 2px 0 #fff!important;animation:n10Heart 1.65s ease-out both!important;animation-delay:calc(var(--n)*.025s)!important}@keyframes n10Score{0%{opacity:0;transform:translateY(18px) rotate(-7deg) scale(.78)}18%,70%{opacity:1;transform:translateY(0) rotate(-7deg) scale(1)}100%{opacity:0;transform:translateY(-8px) rotate(-7deg) scale(1.04)}}@keyframes n10Heart{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc((var(--n) - 5)*13px),calc(-80px - (var(--n)%4)*14px)) scale(1.15)}} #room .first-text-burst{position:absolute!important;z-index:74!important;left:8%!important;top:63%!important;max-width:520px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important;opacity:0!important;color:#ee5587!important;font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold","Yu Gothic",sans-serif!important;font-size:33px!important;line-height:1.1!important;font-weight:950!important;letter-spacing:.015em!important;-webkit-text-stroke:5px #fff!important;paint-order:stroke fill!important;text-shadow:0 4px 0 #f4bfd0,0 9px 18px rgba(91,44,63,.13)!important}#room .first-text-burst.show{animation:n10First 2.8s ease both!important}@keyframes n10First{0%{opacity:0;transform:translateY(18px) scale(.88)}15%,72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(1.02)}} #room .action-banner{position:absolute!important;z-index:70!important;left:50%!important;top:auto!important;bottom:135px!important;transform:translateX(-50%)!important;min-width:250px!important;max-width:420px!important;padding:8px 15px!important;border:3px solid #fff!important;outline:1px solid #f7bdd1!important;border-radius:999px!important;background:rgba(255,249,252,.95)!important;box-shadow:var(--n10-shadow)!important;text-align:center!important;opacity:0!important;pointer-events:none!important}#room .action-banner.show{animation:n10Banner 2.45s ease both!important}#room .action-banner small{display:none!important}#room .action-banner b{display:block!important;color:#df527f!important;font-size:12px!important}#room .action-banner span{display:block!important;color:#725762!important;font-size:7px!important}@keyframes n10Banner{0%{opacity:0;transform:translate(-50%,8px) scale(.94)}15%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px) scale(1)}} /* Memory / LIVE / scene viewer: never oversized. */ .media-overlay{position:fixed!important;z-index:360!important;inset:0!important;align-items:center!important;justify-content:center!important;background:rgba(35,23,29,.88)!important;backdrop-filter:blur(8px)!important}.media-overlay video{display:block;width:min(84vw,1120px)!important;height:auto!important;max-width:84vw!important;max-height:76vh!important;object-fit:contain!important;border-radius:22px!important;background:#000!important;box-shadow:0 20px 70px rgba(0,0,0,.3)!important}.media-overlay>button{position:absolute!important;right:25px!important;top:25px!important;width:48px!important;height:48px!important;border:4px solid #fff!important;border-radius:50%!important;background:#f26a98!important;color:#fff!important;font-size:22px!important;z-index:5!important}.media-badge{position:absolute!important;left:25px!important;top:25px!important;padding:8px 13px!important;border:3px solid #fff!important;border-radius:999px!important;background:#f26a98!important;color:#fff!important;font-size:8px!important;font-weight:950!important}.travel-viewer{display:none!important;position:absolute!important;inset:0!important;align-items:center!important;justify-content:center!important}.travel-viewer.open{display:flex!important}.still-stage{display:flex!important;align-items:center!important;justify-content:center!important;width:min(82vw,1080px)!important;height:min(72vh,650px)!important;padding:12px!important;border:4px solid #fff!important;outline:1.5px solid #f5afc7!important;border-radius:24px!important;background:#fff!important;box-shadow:0 20px 65px rgba(0,0,0,.27)!important;overflow:hidden!important}.still-stage img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;border-radius:14px!important}.travel-caption{position:absolute!important;left:50%!important;bottom:25px!important;transform:translateX(-50%)!important;max-width:66vw!important;padding:8px 15px!important;border:3px solid #fff!important;border-radius:999px!important;background:rgba(255,248,252,.96)!important;text-align:center!important}.travel-caption small{display:block!important;color:#cd688f!important;font-size:6px!important}.travel-caption b{font-size:10px!important} /* Memory cards in the side sheet should be thumbnails, not full-screen images. */ #sheet .memory-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}#sheet .memory-card{width:auto!important;min-height:116px!important;padding:10px!important;border:2px solid #f4d1dd!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 12px rgba(80,45,61,.07)!important;text-align:left!important;display:grid!important;grid-template-columns:94px 1fr!important;gap:10px!important;align-items:center!important}#sheet .memory-card img{width:94px!important;height:86px!important;object-fit:cover!important;border-radius:12px!important}#sheet .memory-card span small,#sheet .memory-card span b,#sheet .memory-card span em,#sheet .memory-card span strong{display:block!important}#sheet .memory-card span b{font-size:11px!important}#sheet .memory-card span small,#sheet .memory-card span em,#sheet .memory-card span strong{font-size:7px!important;color:#8c6c79!important}#sheet .memory-card.locked{opacity:.65!important;filter:none!important}#sheet .memory-card .lock-icon,#sheet .memory-card .movie-icon{font-size:28px!important;text-align:center!important}.reward-progress{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin:12px 0!important}.reward-progress>span{padding:10px!important;border-radius:15px!important;background:#fff0f5!important}.reward-progress b,.reward-progress em,.reward-progress small{display:block!important}.reward-progress i{display:block!important;height:7px!important;margin:5px 0!important;border-radius:999px!important;background:#f3d9e3!important;overflow:hidden!important}.reward-progress u{display:block!important;height:100%!important;background:#f3769e!important} /* Moment unlock overlay = text-only unless explicit buttons exist. */ .moment-overlay{position:fixed!important;z-index:340!important;inset:0!important;display:block!important;background:transparent!important;pointer-events:none!important;opacity:0!important}.moment-overlay.open{opacity:1!important}.moment-card{position:absolute!important;left:8%!important;bottom:18%!important;max-width:390px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none!important}.moment-card>span,.moment-card p{display:none!important}.moment-card h2{margin:0!important;color:#e65384!important;font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif!important;font-size:30px!important;font-weight:950!important;-webkit-text-stroke:5px #fff!important;paint-order:stroke fill!important;text-shadow:0 4px 0 #f4bfd0!important}.moment-actions{pointer-events:auto!important;margin-top:8px!important}.moment-actions button{border:3px solid #fff!important;border-radius:999px!important;background:#ef739b!important;color:#fff!important;padding:7px 11px!important;font-size:8px!important;font-weight:950!important} /* Responsive: retain the whole cast; compact UI only. */ @media(max-width:1100px){#room .room-head{grid-template-columns:210px auto minmax(10px,1fr) auto 58px;left:12px;right:12px}#room .room-name-card{height:62px;padding:9px 15px}#room .room-name-card b{font-size:20px}#room .room-visit-actions button{height:52px;padding:0 13px}#room .room-hud span{min-width:106px;height:56px;padding:7px 10px}#room .room-hud b{font-size:16px}#room .room-hamburger{width:55px!important;height:55px!important}#room .left-ui-stack{left:14px;top:153px;width:282px}#room .oshi-float{right:14px!important;top:157px!important;width:286px!important}#room .quick-actions{height:86px!important;bottom:17px!important}.qa{width:77px!important;min-width:77px!important;height:64px!important}.qa span{font-size:17px!important}#room .right-bottom-tools{right:12px!important;bottom:12px!important;transform:scale(.88);transform-origin:bottom right}#room .first-text-burst{font-size:28px!important}} @media(max-width:820px){#room .room-visit-actions button:nth-child(2){display:none}#room .room-hud span{min-width:88px}#room .left-ui-stack{width:244px}#room .oshi-float{width:244px!important}#room .mini-stats button{height:60px!important}.qa{width:65px!important;min-width:65px!important}#room .right-bottom-tools{display:none!important}} /* === NYAAS 2026-08-12 FINAL UI CORRECTION === */ :root{--nyaas-round:"Hiragino Maru Gothic ProN","M PLUS Rounded 1c","Arial Rounded MT Bold","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif} html,body,button,input,select,textarea,.screen,.overlay,.menu-overlay,#room,#eventOverlay,.nyaas-calendar,.order-main{font-family:var(--nyaas-round)!important} #room.room-screen,#room.room-screen *{font-family:var(--nyaas-round)!important} #room.room-screen{font-weight:700!important} .order-main>header h2,.nyaas-calendar>header h2,#eventOverlay.calendar-mode .nyaas-calendar>header h2,#eventOverlay.calendar-mode .calendar-title h2,#eventOverlay.calendar-mode .calendar-month h3,#eventOverlay.calendar-mode .cal-cell>b{font-family:var(--nyaas-round)!important;font-weight:900!important} /* FIX: the previous full-screen stretched SVG created giant white/pink circles. Use only a thin border-image. */ #room.room-screen::before{ content:""!important; position:absolute!important; z-index:44!important; inset:3px!important; pointer-events:none!important; background:none!important; border:12px solid transparent!important; border-image-source:url('assets/ui_pop/lace-frame.svg')!important; border-image-slice:22!important; border-image-width:12px!important; border-image-repeat:round!important; filter:drop-shadow(0 2px 1px rgba(224,92,137,.16))!important; }