*{box-sizing:border-box;margin:0}
html,body{height:100%;background:radial-gradient(circle at 50% 30%,#2a2340,#0b0a12);font-family:"Hiragino Sans","Noto Sans CJK JP","Noto Sans JP",sans-serif;overflow:hidden}
#phone{position:absolute;left:50%;top:50%;width:min(400px,100vw);height:min(820px,100vh);transform:translate(-50%,-50%) translate(var(--sx,0px),var(--sy,0px));background:#8cabd8;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;box-shadow:0 0 60px #000a}
@media (max-width:600px),(pointer:coarse){
 html,body{position:fixed;inset:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#8cabd8}
 #phone{position:fixed;left:0;right:0;top:var(--vvtop,0px);width:auto;height:100vh;height:100dvh;height:var(--app-h,100dvh);max-height:100dvh;border-radius:0;box-shadow:none;transform:translate(var(--sx,0px),var(--sy,0px))}
 header{padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
 footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
header,#hold,footer{flex:none}#log{min-height:0}
header{display:flex;align-items:center;gap:8px;padding:12px;background:#24305e;color:#fff;z-index:3}
.back{font-size:28px;line-height:1}.who{flex:1}.name{font-weight:700}.st{font-size:11px;opacity:.7}
header button{background:#ffffff22;color:#fff;border:0;border-radius:14px;padding:6px 10px;font-size:13px;cursor:pointer}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff9a5a,#ff5a8a);color:#fff;font-weight:900;display:grid;place-items:center;font-size:16px;flex:none}
.av.hd{width:32px;height:32px}
/* 保留ランプ */
#hold{display:flex;align-items:center;gap:9px;padding:6px 14px;background:linear-gradient(#111,#2a2a2a);color:#ccc;font-weight:900;font-size:12px;z-index:3}
#hold i{width:20px;height:20px;border-radius:50%;background:#333;box-shadow:inset 0 -3px 4px #000a;transition:.15s}
#hold b{margin-left:auto;font:900 18px Impact,"Arial Black",sans-serif;color:#fff}
#hold i.on{box-shadow:inset 0 -3px 5px #0006,0 0 10px var(--c),0 0 18px var(--c);background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,var(--d))}
#hold.L0{--c:#2b7bff;--d:#0a2a80}#hold.L1{--c:#22d34a;--d:#0a6020}#hold.L2{--c:#ff2a2a;--d:#7a0000}#hold.L3{--c:#ffd21a;--d:#8a5a00}
#hold.L4 i.on{background:repeating-linear-gradient(45deg,#111 0 4px,#ff9a00 4px 9px);box-shadow:0 0 12px #ff9a00,0 0 22px #fff;animation:tig .3s infinite}
#hold.L5 i.on{background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red);box-shadow:0 0 14px #fff,0 0 26px #f0f;animation:spin .6s linear infinite}
#hold.L4 b,#hold.L5 b{color:#ffd21a;text-shadow:0 0 8px #f80}
#hold i.chg{animation:chg .5s}
@keyframes chg{0%{transform:scale(2.2)}100%{transform:scale(1)}}
@keyframes tig{50%{transform:scale(1.15)}}@keyframes spin{to{transform:rotate(360deg)}}
#log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.day{align-self:center;background:#0003;color:#fff;font-size:11px;padding:2px 10px;border-radius:10px}
.row{display:flex;align-items:flex-end;gap:6px}.row.me{justify-content:flex-end}
.b{max-width:72%;padding:9px 13px;border-radius:18px;font-size:15px;line-height:1.45;word-break:break-word}
.me .b{background:#6de06b;border-top-right-radius:4px}.you .b{background:#fff;border-top-left-radius:4px}
.meta{font-size:10px;color:#fffd;text-align:right;line-height:1.3}
.read{color:#fff;font-weight:700;opacity:0}.read.on{animation:readpop .6s forwards}
@keyframes readpop{0%{opacity:0;transform:scale(3)}60%{opacity:1;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
.fly{animation:fly .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes fly{0%{transform:translate(40px,120px) scale(.2) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.you .b.fly{animation:burst .6s cubic-bezier(.2,1.8,.4,1)}
@keyframes burst{0%{transform:scale(0) rotate(10deg);filter:brightness(4)}100%{transform:none;filter:none}}
/* typing indicator escalation */
.typing .b{display:flex;gap:5px;padding:12px 14px}.typing .b span{width:9px;height:9px;border-radius:50%;background:#999;animation:dot .6s infinite}
.typing .b span:nth-child(2){animation-delay:.15s}.typing .b span:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-5px)}}
.typing.t1 .b span{background:#2b7bff}.typing.t2 .b span{background:#22d34a}.typing.t3 .b span{background:#ff2a2a;box-shadow:0 0 8px #f00}
.typing.t4 .b{background:#222}.typing.t4 .b span{background:#ffd21a;box-shadow:0 0 10px #fc0}
footer{display:flex;gap:8px;padding:10px;background:#fff;align-items:flex-end;z-index:3}
#inwrap{flex:1;border-radius:20px;padding:2px;background:#ddd}
#inwrap.on{background:linear-gradient(90deg,#c9a000,#fff3a0,#c9a000,#fff3a0);background-size:300% 100%;animation:rb 1s linear infinite;box-shadow:0 0 10px #fc0}
@keyframes rb{to{background-position:300% 0}}
#inp{width:100%;border:0;border-radius:18px;padding:9px 12px;font:inherit;font-size:15px;resize:none;outline:none;display:block}
#send{background:#06c755;color:#fff;border:0;border-radius:20px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer}
#fx,#slam,#banners,#reels,#rainbow{position:absolute;inset:0;pointer-events:none}
#fx{z-index:10;width:100%;height:100%}#rainbow{z-index:9}#slam{z-index:11}#banners{z-index:12}#reels{z-index:13}
/* rainbow burst */
#rainbow.on{background:conic-gradient(from 0deg,#f00a,#fa0a,#ff0a,#0f0a,#0ffa,#00fa,#f0fa,#f00a);-webkit-mask:radial-gradient(circle,transparent 8%,#000 9%,transparent 70%);animation:rbb 1.3s ease-out forwards}
@keyframes rbb{0%{transform:scale(.2) rotate(0);opacity:1}100%{transform:scale(2.2) rotate(200deg);opacity:0}}
.flash{position:absolute;inset:0;z-index:14;pointer-events:none;animation:fl .45s forwards}
.flash.gold{background:radial-gradient(circle,#fff 0,#ffe066 40%,#c98a00)}.flash.white{background:#fff}
@keyframes fl{to{opacity:0}}
/* cut-in banners */
.banner{position:absolute;left:-10%;width:120%;top:var(--y);height:110px;transform:rotate(-8deg);display:grid;place-items:center;overflow:hidden;animation:bin 1s cubic-bezier(.2,1.2,.3,1) forwards;
 background:var(--bg);border-top:5px solid #fff;border-bottom:5px solid #fff;box-shadow:0 0 30px var(--gl)}
.banner span{font:900 76px "Noto Sans CJK JP",sans-serif;letter-spacing:4px;color:transparent;background:linear-gradient(#fff,#fff6b0 40%,#d99a00 60%,#fff2a0);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:2px #400;filter:drop-shadow(0 4px 0 #000);white-space:nowrap;line-height:1}
@keyframes bin{0%{transform:translateX(110%) rotate(-8deg)}18%{transform:translateX(-3%) rotate(-8deg)}28%,78%{transform:translateX(0) rotate(-8deg)}100%{transform:translateX(-120%) rotate(-8deg)}}
.banner.chance{--bg:linear-gradient(90deg,#002a8a,#2b7bff,#002a8a);--gl:#2b7bff}
.banner.reach{--bg:linear-gradient(90deg,#4a0000,#e00000,#4a0000);--gl:#f00}
.banner.hot{--bg:repeating-linear-gradient(60deg,#c00 0 30px,#700 30px 60px);--gl:#f40}
.banner.kakuhen,.banner.fever{--bg:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,magenta);--gl:#fff}
.banner.fever{--bg:repeating-linear-gradient(45deg,#111 0 24px,#ff9a00 24px 48px)}
.banner.oatari{--bg:radial-gradient(circle,#fff6b0,#d99a00 60%,#7a4a00);--gl:#ffd21a}.banner.oatari span{background:linear-gradient(#ff3030,#900);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:3px #fff}
.banner.ok{--bg:linear-gradient(90deg,#004a20,#22d34a,#004a20);--gl:#2f2}
/* punctuation slam */
.sl{position:absolute;left:50%;top:50%;font:900 var(--fs) Impact,"Arial Black","Noto Sans CJK JP",sans-serif;line-height:1;white-space:nowrap;color:var(--c);-webkit-text-stroke:6px #000;text-shadow:0 0 30px var(--g),0 0 60px var(--g);animation:slam .9s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes slam{0%{transform:translate(-50%,-50%) scale(4) rotate(var(--r));opacity:0}15%{transform:translate(-50%,-50%) scale(.9) rotate(var(--r));opacity:1}25%{transform:translate(-50%,-50%) scale(1.05) rotate(var(--r))}80%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:0}}
/* reels */
#reels{display:none;place-items:center;background:#0008}#reels.on{display:grid}
.frame{display:flex;gap:8px;padding:12px;border-radius:16px;background:linear-gradient(#ffe066,#c98a00);box-shadow:0 0 40px #ffd21a,inset 0 0 0 4px #7a4a00}
.reel{width:96px;height:120px;overflow:hidden;background:#fff;border-radius:8px;box-shadow:inset 0 10px 14px #0006,inset 0 -10px 14px #0006}
.strip div{height:120px;display:grid;place-items:center;font:900 92px Impact,"Arial Black",sans-serif;-webkit-text-stroke:3px #000}
.reel.hit{animation:hit .4s}@keyframes hit{50%{transform:scale(1.15);box-shadow:0 0 30px #fff}}
.sl{letter-spacing:-.06em}
.cp{position:absolute;left:50%;top:42%;font:900 var(--fs)/1 "Noto Sans CJK JP",sans-serif;white-space:nowrap;color:transparent;background:var(--bg);-webkit-background-clip:text;background-clip:text;
 -webkit-text-stroke:var(--sw) #1a0a00;filter:drop-shadow(0 0 14px var(--gl)) drop-shadow(0 6px 0 #000);animation:cp .6s cubic-bezier(.2,1.4,.3,1) forwards}
.cp.rb{background-size:200% 100%;animation:cp .6s cubic-bezier(.2,1.4,.3,1) forwards,rb .5s linear infinite}
.cp.old{opacity:.0;transition:opacity .15s}
@keyframes cp{0%{transform:translate(-50%,-50%) scale(2.6) rotate(var(--r));opacity:0}18%{transform:translate(-50%,-50%) scale(.92) rotate(var(--r));opacity:1}30%{transform:translate(-50%,-50%) scale(1.05) rotate(var(--r))}62%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.08);opacity:.3}}
.ms{position:absolute;left:50%;top:45%;font-weight:900;line-height:1.08;text-align:center;word-break:break-all;color:transparent;-webkit-background-clip:text;background-clip:text;
 -webkit-text-stroke:.05em #000;filter:drop-shadow(0 0 16px var(--gl)) drop-shadow(0 5px 0 #000);animation:ms .9s cubic-bezier(.2,1.3,.3,1) forwards}
.ms.me{background-image:linear-gradient(#fffbe0,#ffd21a 45%,#c98a00 60%,#fff2a0);--gl:#ff9a00}
.ms.you{background-image:linear-gradient(#fff,#ff8ad8 45%,#b03cff 65%,#e0c8ff);--gl:#00e5ff;-webkit-text-stroke-color:#1a0040}
@keyframes ms{0%{transform:translate(-50%,-50%) translateX(110%) scale(1.4) rotate(var(--r));opacity:0}20%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:1}75%{transform:translate(-50%,-50%) scale(1.04) rotate(var(--r));opacity:1}100%{transform:translate(-50%,-50%) translateY(40%) scale(.3);opacity:0}}

html,body{overscroll-behavior:none}
/* screens */
.screen{position:absolute;inset:0;z-index:20;background:linear-gradient(#24305e,#8cabd8);display:flex;flex-direction:column;gap:12px;padding:calc(24px + env(safe-area-inset-top)) 22px 22px;overflow-y:auto;color:#fff}
.screen[hidden]{display:none}
.screen h1{font-size:30px;font-weight:900;text-align:center;margin:16px 0 4px;background:linear-gradient(#fffbe0,#ffd21a 50%,#c98a00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #400}
.screen input{width:100%;padding:12px 14px;border-radius:12px;border:0;font:inherit;font-size:16px}
.screen button{padding:12px;border-radius:12px;border:0;font:inherit;font-weight:700;font-size:16px;background:#06c755;color:#fff;cursor:pointer}
.screen button.sub{background:#ffffff33}
.screen .msg{min-height:1.4em;font-size:14px;text-align:center;color:#fff6a0}
.card{background:#ffffff22;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.code{font:900 22px Impact,"Arial Black",monospace;letter-spacing:2px;color:#ffd21a;word-break:break-all;flex:1}
.rowc{display:flex;gap:8px}.rowc input{flex:1}.rowc button{flex:none}
.room{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#fff;color:#222;cursor:pointer}
.room .nm{font-weight:700}.room .lm{font-size:12px;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.room .dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:#f33}
#ren{position:absolute;right:12px;top:110px;z-index:15;pointer-events:none;opacity:0;font:900 italic 40px Impact,"Arial Black",sans-serif;color:#fff;-webkit-text-stroke:2px #000;text-align:right;line-height:.9}
#ren.on{opacity:1;animation:renb .18s}#ren span{font:900 22px "Noto Sans CJK JP",sans-serif;margin-left:2px}
#ren b{background:linear-gradient(#fff,#2b7bff);-webkit-background-clip:text;background-clip:text;color:transparent}
#ren.t1 b{background-image:linear-gradient(#fff,#22d34a)}#ren.t2 b{background-image:linear-gradient(#fff,#ff2a2a)}#ren.t2{font-size:52px}
#ren.t3 b{background-image:linear-gradient(#fffbe0,#ffd21a 50%,#c98a00)}#ren.t3{font-size:62px;filter:drop-shadow(0 0 10px #ffd21a)}
#ren.t4 b{background-image:linear-gradient(90deg,#f33,#fa0,#ff0,#3f3,#3ff,#36f,#f3f)}#ren.t4{font-size:72px;filter:drop-shadow(0 0 14px #fff)}
@keyframes renb{0%{transform:scale(1.5) rotate(-6deg)}100%{transform:none}}
#emoBtn{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:#f1f1f1;font-size:22px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
#emoBtn:active{transform:scale(.88);background:#ffe066}
.hitfx{animation:hitfx .6s}@keyframes hitfx{0%,100%{transform:none;filter:none}10%{transform:translate(-8px,3px) rotate(-6deg);filter:brightness(3) saturate(0)}30%{transform:translate(7px,-3px) rotate(5deg);filter:brightness(1.5) hue-rotate(-40deg)}50%{transform:translate(-5px,2px)}70%{transform:translate(3px,-1px)}}

.screen select.langSel{width:100%;padding:12px 14px;border-radius:12px;border:0;font:inherit;font-size:16px;background:#fff;color:#222}
#langBtns button{font-size:20px;padding:16px}
.screen .rowc h1{margin:8px 0}

/* ===== THEME: gaming-PC RGB (v10) ===== */
:root{--rgb:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00ff6a,#00e5ff,#2b5bff,#c400ff,#ff004c);--bg0:#07070c;--bg1:#0f0f18;--bg2:#171726;--neon:#00f0ff;--neon2:#ff2bd6;--txt:#eef2ff}
html,body{background:var(--bg0)}
@media (max-width:600px),(pointer:coarse){html,body{background:var(--bg0)}}
#phone{background:radial-gradient(120% 60% at 50% 0%,#1a1030 0%,var(--bg0) 60%);color:var(--txt)}
.rgbb{border:2px solid transparent;background:linear-gradient(var(--fill,var(--bg1)),var(--fill,var(--bg1))) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%;animation:rgbmove 4s linear infinite}
@keyframes rgbmove{to{background-position:0 0,300% 0}}
header{background:linear-gradient(var(--bg1),var(--bg1)) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%;border-bottom:2px solid transparent;animation:rgbmove 4s linear infinite;box-shadow:0 2px 16px #c400ff55}
header .name{color:#fff;text-shadow:0 0 6px var(--neon),0 0 14px var(--neon)}
header .st{color:var(--neon);opacity:.9}
header button{background:var(--bg2);color:var(--txt);border:1px solid #ffffff22;box-shadow:0 0 8px #00f0ff44 inset}
#hold{background:linear-gradient(#0a0a12,#141420);border-bottom:1px solid #ffffff14}
#log{position:relative;background:transparent}
.day{background:#ffffff14;color:var(--neon);border:1px solid #00f0ff55}
.b{color:var(--txt)}
.me .b{--fill:#16102a;border:2px solid transparent;background:linear-gradient(#1b1236,#1b1236) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%;box-shadow:0 0 12px #ff2bd655}
.row.me:last-of-type .b{animation:rgbmove 4s linear infinite} /* perf: only the newest own bubble keeps the moving rainbow border */
.you .b{border:2px solid #00f0ff88;background:#0f1a24;box-shadow:0 0 10px #00f0ff44}
.me .b.fly{animation:fly .55s cubic-bezier(.2,1.6,.4,1)}.row.me:last-of-type .b.fly{animation:fly .55s cubic-bezier(.2,1.6,.4,1),rgbmove 4s linear infinite}
.meta{color:#aab3d6}.read{color:var(--neon);text-shadow:0 0 6px var(--neon)}
.typing .b{background:#141420}
footer{background:var(--bg1);border-top:1px solid #ffffff14}
#inwrap{background:var(--rgb);background-size:300% 100%;animation:rgbmove2 4s linear infinite;box-shadow:0 0 10px #00f0ff44}
@keyframes rgbmove2{to{background-position:300% 0}}
#inwrap.on{background:var(--rgb);background-size:300% 100%;animation:rgbmove2 1s linear infinite;box-shadow:0 0 14px #ff2bd6aa}
#inp{background:var(--bg2);color:var(--txt)}#inp::placeholder{color:#8a92b8}
#send{background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%;border:2px solid transparent;animation:rgbmove 3s linear infinite;color:#fff;text-shadow:0 0 6px var(--neon2);box-shadow:0 0 12px #ff2bd666}
#emoBtn{background:var(--bg2);border:1px solid #00f0ff66;box-shadow:0 0 8px #00f0ff44}
.screen{background:radial-gradient(120% 60% at 50% 0%,#1d1036,var(--bg0) 65%);color:var(--txt)}
.screen h1{background:var(--rgb);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;animation:rgbmove2 4s linear infinite;filter:drop-shadow(0 0 8px #c400ff88)}
.screen button{background:linear-gradient(#1a1430,#1a1430) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%;border:2px solid transparent;animation:rgbmove 4s linear infinite;color:#fff;box-shadow:0 0 10px #c400ff44}
.screen button.sub{background:var(--bg2);border:1px solid #00f0ff55;animation:none;box-shadow:none}
.screen input,.screen select.langSel{background:var(--bg2);color:var(--txt);border:1px solid #ffffff22}
.screen .msg{color:var(--neon)}
.card{background:#ffffff0a;border:1px solid #ffffff1a}
.code{color:var(--neon);text-shadow:0 0 8px var(--neon)}
.room{background:var(--bg1);color:var(--txt);border:1px solid #ffffff1a}.room .lm{color:#8a92b8}.room.ai{border-color:#ff2bd6aa;box-shadow:0 0 10px #ff2bd633}
/* sparkles: two static dot layers, only opacity/transform animated (compositor-only) */
#phone::before,#phone::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#00f0ff,transparent),radial-gradient(1.5px 1.5px at 40% 66%,#ff2bd6,transparent),radial-gradient(1px 1px at 88% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 22% 88%,#ffe600,transparent),radial-gradient(1px 1px at 60% 38%,#fff,transparent);animation:twinkle 3.2s ease-in-out infinite;will-change:opacity}
#phone::after{background-image:radial-gradient(1px 1px at 30% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 55%,#00ff6a,transparent),radial-gradient(1px 1px at 50% 12%,#ff8a00,transparent),radial-gradient(1.5px 1.5px at 8% 60%,#00e5ff,transparent),radial-gradient(1px 1px at 92% 35%,#fff,transparent);animation-delay:-1.6s}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.85}}
header,#hold,footer,#log,.screen{position:relative;z-index:2}.screen{position:absolute;z-index:20}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}#phone::before,#phone::after{opacity:.4}}

/* sheet modal, menus, legal */
.sheetbg{position:absolute;inset:0;z-index:40;background:#000a;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-height:92%;overflow-y:auto;background:var(--bg1);color:var(--txt);border-top:2px solid #c400ff;border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -6px 30px #c400ff44}
.sheet h2{font-size:18px;color:#fff;text-shadow:0 0 8px var(--neon)}.sheet p{font-size:14px;line-height:1.5}
.sheet input[type=number],.sheet input[type=text],.sheet textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #ffffff22;background:var(--bg2);color:var(--txt);font:inherit;font-size:16px}
.sheetbtns{display:flex;flex-direction:column;gap:8px}.sheetbtns button{padding:12px;border-radius:12px;border:2px solid transparent;font:inherit;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(#1a1430,#1a1430) padding-box,var(--rgb) border-box;background-size:100% 100%,300% 100%}
.sheetbtns button.sub{background:var(--bg2);border:1px solid #00f0ff55}
.chk{display:flex;gap:10px;align-items:center;font-size:14px}.chk input{width:22px;height:22px;flex:none;accent-color:#c400ff}
.legal{text-align:center;font-size:13px}.legal a{color:var(--neon)}
.sharePrev{width:100%;border-radius:12px;border:1px solid #ffffff22}.shareText{color:var(--neon);white-space:pre-line}
.pack{display:flex;justify-content:space-between;align-items:center;gap:10px}.pack .soon{font-size:12px;color:var(--neon2)}
#menuBtn{font-size:18px;line-height:1}

#wfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:16}
.wshake{animation:wshake .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes wshake{10%{transform:translate(calc(-6px*var(--wp,1)),calc(2px*var(--wp,1))) rotate(-8deg)}25%{transform:translate(calc(7px*var(--wp,1)),calc(-3px*var(--wp,1))) rotate(7deg)}40%{transform:translate(calc(-5px*var(--wp,1)),2px) rotate(-4deg)}60%{transform:translate(3px,-1px) rotate(2deg)}80%{transform:translate(-1px,0)}}

#emoPick{flex:none;width:22px;height:42px;margin-left:-6px;border:0;background:transparent;color:#00f0ff;font-size:14px;cursor:pointer}
#qpBtn{flex:none;max-width:96px;height:42px;padding:0 10px;border-radius:20px;border:1px solid #ff2bd6aa;background:var(--bg2);color:#ffb3ee;font:inherit;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;cursor:pointer;box-shadow:0 0 8px #ff2bd655}
#qpBtn:active{transform:scale(.92)}
#emoPanel{position:absolute;left:8px;right:8px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:30;max-height:46%;overflow-y:auto;background:var(--bg1);border:1px solid #00f0ff66;border-radius:16px;padding:10px;box-shadow:0 0 20px #00f0ff33}
#emoPanel[hidden]{display:none}.emoH{font-size:12px;color:var(--neon);margin:4px 2px}
.emoG{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoG button{font-size:24px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer}.emoG button.sel{background:#c400ff44;outline:1px solid #c400ff}
footer{gap:6px}

.pname{font-size:11px;color:#9fdcff;margin:4px 0 -6px 46px;text-shadow:0 0 6px #00f0ff88;display:inline-block;align-self:flex-start}

button[aria-busy="true"]{opacity:.6;cursor:progress}
/* small phones (≤380px): keep the input usable and let button rows wrap */
.rowc{flex-wrap:wrap}.rowc input{min-width:0}
#inwrap{min-width:0}
@media (max-width:380px){
  footer{gap:6px;padding:8px}
  #emoBtn{width:38px;height:38px;font-size:20px}
  #qpBtn{max-width:72px;padding:0 8px;font-size:12px}
  #send{padding:10px 12px}
  #inp{padding:9px 10px}
  #inp::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
#log .emptyHint{text-align:center;color:#aab3d9;font-size:13px;margin:24px 16px}#log .emptyHint:not(:last-child){display:none}
.room:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #00f0ff;outline-offset:2px}
.linkbtn{background:none;border:none;color:#7fe7ff;text-decoration:underline;padding:6px;font-size:14px;box-shadow:none;width:auto;align-self:center;cursor:pointer}