:root { --bg:#0f1115; --panel:#151823; --text:#e6e8ef; --muted:#9aa3b2; --border:#23283a; } *{box-sizing:border-box} body{margin:0;min-width:195px;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif} header{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:center;flex-wrap:wrap} .room{margin-right:auto;color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center} .status{font-weight:600;color:#c7d2fe} .bar{width:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bar input{height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:#0f1422;color:var(--text);outline:none;} .bar input#roomInput{min-width:160px;flex:1} .bar input#nameInput{min-width:160px} .bar button{height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:#172035;color:var(--text);cursor:pointer;} .bar button:hover{filter:brightness(1.06)} main{max-width:900px;margin:16px auto;padding:0 16px} .chat{position:relative;border:1px solid var(--border);border-radius:12px;background:#131826;overflow:hidden} .chatlog{height:40vh;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;transition:background-color .25s ease} .message{display:flex;flex-direction:column;align-items:flex-start;max-width:78%} .message.mine{align-self:flex-end;align-items:flex-end} .message-meta{margin:0 6px 3px;color:var(--muted);font-size:12px;line-height:1.3} .message-bubble{position:relative;padding:9px 13px;border-radius:16px 16px 16px 4px;background:#232b3d;color:var(--text);overflow-wrap:anywhere;white-space:pre-wrap} .message.mine .message-bubble{border-radius:16px 16px 4px 16px;background:#315da8;color:#fff} .inputrow{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#101525} .inputrow input{flex:1;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:#0f1422;color:var(--text);outline:none;} .inputrow button{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border);background:#1b2742;color:var(--text);cursor:pointer;} .muted{color:var(--muted)} @media(max-width:680px){header{padding:10px}.bar{display:grid}.row{display:flex;gap:6px}.row input{min-width:0;flex:1}main{padding:0 10px}.chatlog{height:calc(100dvh - 340px);min-height:300px}} @media(max-width:300px){ header{padding:7px}.room{gap:5px;font-size:11px}.bar{gap:5px}.row{gap:4px}.bar input{min-width:0!important;height:36px;padding:0 7px;border-radius:8px;font-size:12px}.bar button{height:36px;padding:0 7px;border-radius:8px;font-size:11px} main{margin:8px auto;padding:0 7px}.muted{font-size:11px}.chat{border-radius:10px}.chatlog{height:calc(100dvh - 295px);min-height:220px;padding:8px;gap:7px}.message{max-width:96%}.message-meta{font-size:9px}.message-bubble{padding:7px 9px;font-size:12px}.inputrow{gap:4px;padding:5px}.inputrow input{height:36px;padding:0 7px;border-radius:8px;font-size:12px}.inputrow button{height:36px;padding:0 6px;border-radius:8px;font-size:11px} } /* chat command visual effects */ #effectLayer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999} .fx-word{position:absolute;white-space:nowrap;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.35);will-change:transform;line-height:1} @keyframes fxLeft{from{transform:translateX(0) rotate(var(--rot))}to{transform:translateX(calc(-100vw - 120%)) rotate(var(--rot))}} @keyframes fxRight{from{transform:translateX(0) rotate(var(--rot))}to{transform:translateX(calc(100vw + 120%)) rotate(var(--rot))}} @keyframes fxDown{from{transform:translateY(0) rotate(var(--rot))}to{transform:translateY(calc(100vh + 120%)) rotate(var(--rot))}} @keyframes fxUp{from{transform:translateY(0) rotate(var(--rot))}to{transform:translateY(calc(-100vh - 120%)) rotate(var(--rot))}} @media (prefers-reduced-motion:reduce){.fx-word{animation-duration:.01ms!important;animation-iteration-count:1!important}} /* toast command */ #toastLayer{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:10001; display:flex; flex-direction:column; gap:8px; width:min(92vw,520px); pointer-events:none; } .chat-toast{ align-self:center; max-width:100%; padding:10px 14px; border-radius:12px; background:rgba(17,24,39,.94); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(0,0,0,.28); font-weight:700; overflow-wrap:anywhere; white-space:pre-line; animation:toastIn .18s ease-out, toastOut .22s ease-in 4.1s forwards; } @keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateY(-8px) scale(.98)}} @keyframes chatShake{0%,100%{transform:translate(0)}25%{transform:translate(-7px,3px) rotate(-.5deg)}50%{transform:translate(7px,-3px) rotate(.5deg)}75%{transform:translate(-5px,-2px)}} .chat.is-shaking{animation:chatShake .11s linear infinite} #bigEffectLayer{position:fixed;inset:0;z-index:10000;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden} .big-effect-text{max-width:94vw;text-align:center;overflow-wrap:anywhere;font-weight:1000;line-height:1.05;color:#fff;font-size:clamp(46px,13vw,150px);text-shadow:0 4px 12px rgba(0,0,0,.75);animation:bigPop 1.45s ease forwards} @keyframes bigPop{0%{opacity:0;transform:scale(.25) rotate(-5deg)}20%{opacity:1;transform:scale(1.12) rotate(2deg)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}} .fx-spin-word{position:absolute;left:50%;top:50%;white-space:nowrap;font-weight:900;line-height:1;will-change:transform,opacity;text-shadow:0 2px 5px rgba(0,0,0,.45);animation:spinFly var(--dur) ease-out var(--delay) forwards} @keyframes spinFly{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--spin)) scale(var(--scale))}} /* help / YouTube embed */ .help-panel{ align-self:center;max-width:min(92%,620px);padding:13px 15px;border-radius:14px; background:#172033;border:1px solid var(--border);color:var(--text); box-shadow:0 10px 30px rgba(0,0,0,.22);font-size:13px;white-space:pre-line; } .youtube-bubble{width:min(420px,78vw);max-width:100%} .youtube-frame-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000} .youtube-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media(max-width:300px){ .help-panel{max-width:96%;padding:8px;font-size:10px} .youtube-bubble{width:100%} .youtube-frame-wrap{border-radius:8px} } /* command modal */ .command-btn{flex:0 0 auto;height:40px;padding:0 11px;border-radius:10px;border:1px solid var(--border);background:#172035;color:var(--text);cursor:pointer;font-weight:800} .command-modal-backdrop{position:fixed;inset:0;z-index:11000;background:rgba(0,0,0,.58);display:none;align-items:center;justify-content:center;padding:16px} .command-modal-backdrop.open{display:flex} .command-modal{width:min(92vw,560px);max-height:min(78vh,680px);background:#111827;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden} .command-modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:#151823} .command-modal-title{font-weight:800}.command-modal-close{border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer} .command-modal-list{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain} .command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border-radius:11px;background:#172033;border:1px solid #263149} .command-code{display:block;font-family:monospace;font-weight:800;overflow-wrap:anywhere}.command-desc{display:block;margin-top:2px;color:var(--muted);font-size:12px} .command-copy{min-width:58px;height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--border);background:#1b2742;color:var(--text);cursor:pointer;font-size:12px;font-weight:700} @media(max-width:300px){.command-btn{height:33px;padding:0 7px;font-size:11px}.command-modal-backdrop{padding:6px}.command-modal{width:98vw;max-height:88vh;border-radius:10px}.command-modal-head{padding:8px}.command-modal-list{padding:6px;gap:5px}.command-row{padding:6px}.command-code{font-size:10px}.command-desc{font-size:9px}.command-copy{min-width:44px;height:28px;padding:0 5px;font-size:9px}} /* /hanten — 全画面色反転トグル filterをbodyへ直接掛けず、白いdifferenceレイヤーで視覚的に反転。 fixed要素やエフェクトの配置への副作用を抑える。 */ #hantenLayer{ position:fixed; inset:0; z-index:2147483646; display:none; pointer-events:none; background:#fff; mix-blend-mode:difference; } body.hanten-mode #hantenLayer{display:block} /* fireworks */ #fireworksLayer{ position:fixed;inset:0;z-index:10500;pointer-events:none;overflow:hidden; } .fw-particle{ position:absolute;width:7px;height:7px;border-radius:50%; background:currentColor;box-shadow:0 0 8px currentColor,0 0 16px currentColor; animation:fwBurst var(--dur) ease-out var(--delay) forwards; } @keyframes fwBurst{ 0%{opacity:1;transform:translate(0,0) scale(1)} 75%{opacity:1} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25)} } .fw-core{ position:absolute;width:12px;height:12px;border-radius:50%; background:#fff;box-shadow:0 0 18px #fff; animation:fwCore .45s ease-out forwards; } @keyframes fwCore{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(3.2)}} /* smoke */ #smokeLayer{ position:fixed;inset:0;z-index:10600;pointer-events:none;overflow:hidden; } .smoke-puff{ position:absolute;bottom:-80px;border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.34),rgba(180,185,195,.18) 45%,rgba(80,85,95,.06) 72%,transparent 78%); filter:blur(6px);opacity:0; animation:smokeRise var(--dur) ease-out var(--delay) forwards; will-change:transform,opacity; } @keyframes smokeRise{ 0%{opacity:0;transform:translate3d(0,0,0) scale(.55)} 16%{opacity:.72} 70%{opacity:.45} 100%{opacity:0;transform:translate3d(var(--drift),calc(-100vh - 180px),0) scale(2.1)} } /* aqua — Aqua Mirror 3D water */ #aquaLayer{position:fixed;inset:0;z-index:10700;display:none;pointer-events:auto;touch-action:none;overflow:hidden;background:#063548} #aquaLayer.active{display:block;animation:aquaFade 2s ease forwards} #aquaCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair} #aquaLayer::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(1,32,49,.12),transparent 22%,transparent 72%,rgba(2,23,37,.18)),radial-gradient(circle at 18% 0%,rgba(255,255,255,.12),transparent 34%);mix-blend-mode:multiply} @keyframes aquaFade{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}} /* /e shared drawing canvas */ #drawLayer{ position:fixed;inset:0;z-index:10800;display:none; background:rgba(4,8,16,.82);backdrop-filter:blur(2px); touch-action:none;pointer-events:auto;overflow:hidden; } #drawLayer.active{display:block} #drawCanvas{ position:absolute;inset:0;width:100%;height:100%;display:block; touch-action:none;cursor:crosshair; } #drawCloseBtn{ position:absolute;top:14px;right:14px;left:auto;transform:none; padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.48); color:#fff;font-weight:900;font-size:14px;pointer-events:auto;z-index:7;border:0;cursor:pointer;appearance:none;-webkit-appearance:none; } #drawCloseBtn:active{transform:scale(.97)} #drawCloseBtn:hover{filter:brightness(.98)} #drawTools{ position:absolute;left:12px;top:12px;z-index:4;display:flex;flex-direction:column;gap:8px; max-width:min(92vw,430px);padding:10px;border-radius:18px; background:linear-gradient(180deg,rgba(22,29,41,.82),rgba(10,15,24,.66)); border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); } .draw-tools-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .draw-tool-btn,.draw-size-btn{ min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08);color:#eef4ff;font-weight:850;font-size:12px; appearance:none;-webkit-appearance:none;cursor:pointer; } .draw-tool-btn.is-active,.draw-size-btn.is-active{ background:linear-gradient(180deg,#5a8ae0,#3a6ec8 58%,#2f5cad); border-color:rgba(79,128,214,.85);color:#fff; box-shadow:0 8px 16px rgba(58,110,200,.22),inset 0 1px 0 rgba(255,255,255,.20); } .draw-tool-btn.draw-tool-clear{background:rgba(255,255,255,.06)} .draw-color-btn{ width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.45); background:var(--sw,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); appearance:none;-webkit-appearance:none;cursor:pointer;padding:0; } .draw-color-btn.is-active{outline:3px solid rgba(255,255,255,.86);outline-offset:1px} .draw-size-btn{min-width:44px;padding:0 10px} #drawHint{ position:absolute;left:50%;bottom:14px;transform:translateX(-50%); color:rgba(255,255,255,.82);font-size:12px;pointer-events:none; white-space:nowrap;z-index:2; } @media(max-width:430px){ #drawTools{left:8px;top:8px;right:8px;max-width:none;padding:8px;border-radius:16px} .draw-tool-btn,.draw-size-btn{min-height:32px;padding:0 10px;font-size:11px} .draw-color-btn{width:26px;height:26px} #drawCloseBtn{top:auto;bottom:14px;right:14px;left:auto;transform:none} #drawHint{bottom:58px;font-size:10px} } @media(max-width:300px){ #drawTools{gap:6px;padding:7px} #drawCloseBtn{bottom:8px;right:8px;font-size:11px;padding:5px 8px} #drawHint{bottom:46px;font-size:9px} .draw-tool-btn,.draw-size-btn{min-height:29px;padding:0 8px;font-size:10px} .draw-color-btn{width:22px;height:22px} } #arasiModalBackdrop{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:16px} #arasiModalBackdrop.open{display:flex}.arasi-modal{width:min(92vw,520px);max-height:80vh;background:#111827;border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;overflow:hidden} .arasi-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}.arasi-title{font-weight:900}.arasi-close{border:0;background:transparent;color:var(--text);font-size:24px} .arasi-sub{padding:9px 14px;color:var(--muted);font-size:12px}.arasi-list{overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.arasi-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 10px;background:#172033;border:1px solid #263149;border-radius:11px} .arasi-bad,.arasi-abstain{height:32px;border-radius:8px;border:1px solid var(--border);background:#2b1f26;color:#ffd5df;font-weight:800}.arasi-foot{padding:10px 14px;border-top:1px solid var(--border);text-align:right} .chat-ban-note{padding:7px 10px;text-align:center;font-size:12px;color:#ffd6dd;background:#351c24;border-top:1px solid #5a2b3b} /* kaminari */#kaminariLayer{position:fixed;inset:0;z-index:10950;pointer-events:none;overflow:hidden}.storm-cloud{position:absolute;left:50%;top:50%;width:min(58vw,520px);height:min(25vw,220px);transform:translate(-50%,-50%) scale(.86);opacity:0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.52));animation:cloudEnter 1s cubic-bezier(.2,.8,.2,1) forwards}.storm-cloud.rise{animation:cloudRise .72s cubic-bezier(.2,.8,.2,1) forwards}.cloud-puff{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.92),rgba(205,214,226,.88) 35%,rgba(105,118,138,.95) 68%,rgba(44,54,70,.98) 100%);box-shadow:inset -18px -18px 30px rgba(20,28,42,.34),inset 10px 10px 24px rgba(255,255,255,.28),0 16px 28px rgba(0,0,0,.32)}.cloud-puff.p1{width:44%;height:74%;left:4%;top:22%}.cloud-puff.p2{width:48%;height:88%;left:27%;top:2%}.cloud-puff.p3{width:42%;height:70%;right:4%;top:26%}.cloud-puff.p4{width:34%;height:62%;left:18%;top:4%}.cloud-puff.p5{width:36%;height:64%;right:20%;top:10%}.cloud-base{position:absolute;left:10%;right:10%;bottom:5%;height:44%;border-radius:50%;background:linear-gradient(180deg,rgba(110,123,145,.96),rgba(36,44,58,.98));box-shadow:inset 0 12px 18px rgba(255,255,255,.08),0 18px 30px rgba(0,0,0,.34)}@keyframes cloudEnter{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes cloudRise{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.96;transform:translate(-50%,-145%) scale(.9)}}.lightning-wrap{position:absolute;top:13%;left:50%;width:7px;height:74vh;transform-origin:top center;opacity:0}.lightning-wrap.show{opacity:1}.lightning-main,.lightning-branch{position:absolute;top:0;left:0;width:7px;height:100%;background:linear-gradient(180deg,#fff,#dff6ff 38%,#a7ddff 100%);box-shadow:0 0 8px #fff,0 0 18px #9fdcff,0 0 28px rgba(117,194,255,.9);clip-path:polygon(46% 0,66% 0,54% 10%,76% 10%,44% 22%,63% 22%,36% 36%,58% 36%,28% 52%,49% 52%,18% 69%,40% 69%,0 100%,22% 73%,8% 73%,33% 57%,17% 57%,45% 41%,28% 41%,55% 27%,38% 27%,64% 14%,48% 14%)}.lightning-branch{width:5px;height:48%;top:28%;left:3px;transform:rotate(var(--branch-rot)) scaleX(.8);transform-origin:top center;opacity:.78}.screen-flash{position:fixed;inset:0;background:#fff;z-index:10960;opacity:0;pointer-events:none}.screen-flash.go{animation:screenFlash .11s ease-out forwards}@keyframes screenFlash{0%{opacity:0}15%{opacity:.95}55%{opacity:.65}100%{opacity:0}}@media(max-width:300px){.storm-cloud{width:78vw;height:34vw}.lightning-wrap{height:68vh}} /* v300 drawing image placement */ #drawImagePlacement{ position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%); width:min(46vw,420px);min-width:120px;max-width:88vw; border:2px solid rgba(255,255,255,.9);border-radius:12px; box-shadow:0 16px 42px rgba(0,0,0,.45);touch-action:none;user-select:none; background:rgba(8,12,20,.26); } #drawImagePlacement[hidden]{display:none!important} #drawImagePlacement img{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px;pointer-events:none} #drawImageResizeHandle{ position:absolute;right:-13px;bottom:-13px;width:34px;height:34px;border-radius:50%; border:2px solid #fff;background:#2563eb;color:#fff;font-size:17px;font-weight:900;cursor:nwse-resize;touch-action:none; } .draw-image-actions{position:absolute;left:50%;bottom:-48px;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap} .draw-image-actions button{height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(15,23,42,.92);color:#fff;font-weight:850} #drawImageConfirmBtn{background:#2563eb}.draw-image-actions #drawImageCancelBtn{background:rgba(15,23,42,.92)} /* /wallpaper v305: viewport-fixed wallpaper layer. The chat log itself stays transparent and scrolls independently. */ #for314WallpaperLayer{ position:fixed;inset:0;width:100vw;height:100dvh;z-index:0;overflow:hidden; pointer-events:none;opacity:0;visibility:hidden;background:#0b0f16; transition:opacity .22s ease,visibility .22s ease; } #for314WallpaperLayer.active{opacity:1;visibility:visible} #for314WallpaperLayer::before, #for314WallpaperLayer::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:var(--for314-wallpaper-image); background-position:center center;background-repeat:no-repeat; } /* PC / landscape: keep the whole image visible. A blurred cover layer fills any side/top bands. */ #for314WallpaperLayer::before{ inset:-3.5%;background-size:cover; filter:blur(22px) saturate(1.06) brightness(.82); transform:scale(1.07);opacity:.72; } #for314WallpaperLayer::after{ background-size:contain; filter:none;opacity:1; } html.for314-wallpaper-enabled body{background:transparent!important} html.for314-wallpaper-enabled main>.chat{background:transparent!important} html.for314-wallpaper-enabled main .chatlog{background-color:transparent!important;background-image:none!important} /* Smartphone/coarse portrait screens: fill the screen and crop from the center, like a phone wallpaper. */ @media (max-width:680px), ((hover:none) and (pointer:coarse) and (orientation:portrait)){ #for314WallpaperLayer::before{inset:0;filter:none;transform:none;opacity:1;background-size:cover;background-position:center center} #for314WallpaperLayer::after{display:none} } /* kaminari v2: denser rolling cloud + thicker lightning */ .storm-cloud{ width:min(68vw,620px); height:min(30vw,270px); filter:blur(.15px) drop-shadow(0 28px 36px rgba(0,0,0,.58)); } .cloud-puff{ background: radial-gradient(circle at 32% 26%, rgba(245,248,252,.95) 0%, rgba(190,200,214,.92) 30%, rgba(105,117,137,.96) 58%, rgba(48,57,73,.98) 78%, rgba(25,31,43,.98) 100%); box-shadow: inset -22px -22px 38px rgba(10,17,29,.42), inset 12px 10px 26px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.28); animation:cloudMoku 1.15s ease-in-out infinite alternate; } .cloud-puff.p1{width:48%;height:76%;left:0%;top:24%;animation-delay:-.2s} .cloud-puff.p2{width:50%;height:92%;left:25%;top:0%;animation-delay:-.7s} .cloud-puff.p3{width:46%;height:74%;right:0%;top:27%;animation-delay:-.45s} .cloud-puff.p4{width:38%;height:68%;left:13%;top:2%;animation-delay:-.9s} .cloud-puff.p5{width:40%;height:70%;right:13%;top:7%;animation-delay:-.35s} .cloud-puff.p6{width:32%;height:58%;left:35%;top:-9%;animation-delay:-.6s} .cloud-puff.p7{width:34%;height:60%;left:5%;top:43%;animation-delay:-.1s} .cloud-puff.p8{width:34%;height:60%;right:5%;top:43%;animation-delay:-.8s} @keyframes cloudMoku{ from{transform:translate3d(-2px,2px,0) scale(.98)} to{transform:translate3d(3px,-3px,0) scale(1.045)} } .cloud-base{ left:5%;right:5%;bottom:0;height:48%; filter:blur(2px); } .lightning-wrap{width:16px} .lightning-main{ width:16px; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #bdeaff); box-shadow:0 0 12px #fff,0 0 28px #9fdcff,0 0 48px rgba(117,194,255,.95); } .lightning-branch{ width:10px;left:7px; box-shadow:0 0 10px #fff,0 0 22px #9fdcff; } @media(max-width:300px){ .storm-cloud{width:88vw;height:40vw} .lightning-wrap,.lightning-main{width:11px} .lightning-branch{width:7px;left:5px} } /* /cloud — translucent cotton-like 3D cloud drifting for 60 seconds */ #cloudEffectLayer{ position:fixed;inset:0;z-index:10680;pointer-events:none;overflow:hidden; perspective:900px; } .dream-cloud{ --cloudW:min(58vw,720px); position:absolute; left:0;top:var(--cloudTop,28%); width:var(--cloudW); height:calc(var(--cloudW) * .43); opacity:0; transform-style:preserve-3d; will-change:transform,opacity; filter:drop-shadow(0 26px 34px rgba(20,32,52,.16)); } .dream-cloud.running{ animation:cloudCrossScreen 60s linear forwards; } .dream-cloud-core{ position:absolute;inset:7% 4% 5%; transform-style:preserve-3d; animation:cloudFloat3D 7s ease-in-out infinite alternate; } .dream-cloud .cotton{ position:absolute;border-radius:50%; transform-style:preserve-3d; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.88) 0%, rgba(250,252,255,.72) 22%, rgba(220,231,243,.55) 48%, rgba(164,184,207,.34) 70%, rgba(103,126,154,.17) 86%, rgba(65,86,112,.05) 100%); box-shadow: inset -18px -22px 38px rgba(61,83,111,.12), inset 13px 10px 28px rgba(255,255,255,.55), 0 12px 28px rgba(76,103,137,.10); backdrop-filter:blur(.5px); animation:cottonBreathe var(--breathe,6s) ease-in-out infinite alternate; } .dream-cloud .c1{width:35%;height:70%;left:0;top:28%;--z:10px;--breathe:6.4s} .dream-cloud .c2{width:38%;height:82%;left:17%;top:8%;--z:34px;--breathe:7.2s} .dream-cloud .c3{width:34%;height:88%;left:36%;top:0;--z:52px;--breathe:5.8s} .dream-cloud .c4{width:39%;height:78%;left:55%;top:14%;--z:26px;--breathe:6.8s} .dream-cloud .c5{width:31%;height:65%;right:0;top:31%;--z:8px;--breathe:5.5s} .dream-cloud .c6{width:30%;height:62%;left:9%;top:4%;--z:-12px;--breathe:7.7s} .dream-cloud .c7{width:31%;height:64%;left:30%;top:25%;--z:70px;--breathe:6.1s} .dream-cloud .c8{width:29%;height:60%;right:14%;top:2%;--z:-18px;--breathe:7.4s} .dream-cloud .c9{width:27%;height:56%;left:48%;top:40%;--z:86px;--breathe:5.9s} .dream-cloud .c10{width:25%;height:53%;left:2%;top:48%;--z:42px;--breathe:6.9s} .dream-cloud .c11{width:25%;height:52%;right:2%;top:49%;--z:48px;--breathe:6.3s} .dream-cloud .c12{width:24%;height:50%;left:26%;top:-5%;--z:22px;--breathe:8s} .dream-cloud-haze{ position:absolute;left:4%;right:4%;bottom:5%;height:43%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(245,250,255,.42),rgba(202,218,236,.25) 48%,rgba(143,166,192,.08) 76%,transparent); filter:blur(8px); transform:translateZ(-25px); } @keyframes cottonBreathe{ 0%{transform:translate3d(-3px,2px,var(--z)) scale(.97)} 100%{transform:translate3d(5px,-5px,var(--z)) scale(1.055)} } @keyframes cloudFloat3D{ 0%{transform:rotateX(1deg) rotateY(-3deg) translateY(3px)} 100%{transform:rotateX(-2deg) rotateY(4deg) translateY(-5px)} } @keyframes cloudCrossScreen{ 0%{transform:translate3d(var(--cloudStart),0,0) scale(.92);opacity:0} 4%{opacity:.72} 50%{transform:translate3d(var(--cloudMid),-10px,35px) scale(1.04);opacity:.78} 94%{opacity:.70} 100%{transform:translate3d(var(--cloudEnd),4px,0) scale(.94);opacity:0} } @media(max-width:300px){ .dream-cloud{--cloudW:min(82vw,300px)} } /* /rainbow — shared 60 second rainbow background */ body.rainbow-mode{ animation:rainbowBackground 7s linear infinite !important; } body.rainbow-mode main, body.rainbow-mode .wrap, body.rainbow-mode .chat, body.rainbow-mode #log{ background-color:transparent !important; } @keyframes rainbowBackground{ 0%{background-color:hsl(0 78% 55%)} 14%{background-color:hsl(45 88% 56%)} 28%{background-color:hsl(100 70% 48%)} 42%{background-color:hsl(170 72% 45%)} 57%{background-color:hsl(210 80% 54%)} 71%{background-color:hsl(260 75% 58%)} 85%{background-color:hsl(315 76% 56%)} 100%{background-color:hsl(360 78% 55%)} } /* local /dark and /light */ body.local-dark{ --bg:#0b0f14;--panel:#111827;--panel2:#151b28;--text:#eef2f7; --muted:#9aa4b2;--border:#263043;--accent:#4f7ddf; background:#0b0f14 !important;color:#eef2f7 !important; } body.local-light{ --bg:#f4f6fa;--panel:#ffffff;--panel2:#eef2f7;--text:#18202b; --muted:#667085;--border:#d8dee9;--accent:#3b6fd8; background:#f4f6fa !important;color:#18202b !important; } /* local theme v2: do NOT change chat/log background */ body.local-dark{ background:#0b0f14 !important; color:#eef2f7 !important; } body.local-dark main, body.local-dark .wrap{ background:#0b0f14 !important; } body.local-light{ background:#f4f6fa !important; color:#18202b !important; } body.local-light main, body.local-light .wrap{ background:#f4f6fa !important; } /* keep chat/log background under bgc control */ body.local-dark .chat, body.local-dark #log, body.local-light .chat, body.local-light #log{ background-color:var(--chatbg) !important; } /* light mode controls: white surface, black border/text */ body.local-light button, body.local-light input, body.local-light select, body.local-light .inputrow button, body.local-light .command-btn{ background:#fff !important; color:#111 !important; border-color:#111 !important; } body.local-light input::placeholder{color:#555 !important} body.local-light .inputrow{ background:#fff !important; border-color:#111 !important; } /* retain readable chrome in dark mode */ body.local-dark button, body.local-dark input, body.local-dark select{ color:#eef2f7; } /* light theme v3: modal/toast/user-list/vote surfaces */ body.local-light .modal, body.local-light .modal-content, body.local-light .command-modal, body.local-light .command-panel, body.local-light .arasi-modal, body.local-light [role="dialog"]{ background:#fff !important;color:#111 !important;border-color:#111 !important; } /* /usdjpy /yenyasu — responsive TradingView mini chart card */ .message.tradingview-message{ width:min(470px,94%); max-width:94%; } .message.tradingview-message.with-avatar .message-content{ flex:1 1 auto; width:calc(100% - 37px); max-width:calc(100% - 37px); } .message.tradingview-message .tradingview-bubble{ box-sizing:border-box; display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; padding:4px!important; overflow:hidden!important; white-space:normal!important; -webkit-line-clamp:unset!important; } .tradingview-mini-wrap{ display:block; width:100%; height:220px; min-width:0; overflow:hidden; border-radius:12px; background:#131722; color-scheme:dark; } .tradingview-mini-wrap tv-mini-chart{ display:block; width:100%; height:100%; } .message.tradingview-message .tradingview-mini-placeholder{ height:100%; display:flex; align-items:center; justify-content:center; padding:12px; color:#cbd5e1!important; font-size:12px; text-align:center; } body.local-light .tradingview-mini-wrap{ background:#fff; color-scheme:light; } body.local-light .message.tradingview-message .tradingview-mini-placeholder{ color:#475569!important; } @media(max-width:300px){ .message.tradingview-message{width:98%;max-width:98%} .tradingview-mini-wrap{height:170px;border-radius:8px} } @media(max-width:210px){ .tradingview-mini-wrap{height:145px} } /* map:場所 — APIキー不要のGoogleマップカード */ .message.map-message{width:min(470px,94%);max-width:94%} .message.map-message.with-avatar .message-content{ flex:1 1 auto;width:calc(100% - 37px);max-width:calc(100% - 37px) } .message.map-message .map-bubble{ box-sizing:border-box;display:block!important;width:100%!important;max-width:100%!important; min-width:0!important;padding:5px!important;overflow:hidden!important; white-space:normal!important;-webkit-line-clamp:unset!important } .map-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:7px 8px 9px} .map-place-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:850;font-size:13px} .map-open-link{ flex:0 0 auto;border-radius:9px;padding:6px 8px;background:#2563eb;color:#fff; font-size:11px;font-weight:800;text-decoration:none } body.local-light .message.map-message:not(.mine) .map-place-label{ color:#111!important; -webkit-text-fill-color:#111!important } .google-map-frame-wrap{position:relative;width:100%;height:250px;overflow:hidden;border-radius:12px;background:#dbe2ea} .google-map-frame-wrap iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0} @media(max-width:300px){ .message.map-message{width:98%;max-width:98%} .map-card-head{align-items:stretch;flex-direction:column;padding:5px 5px 7px} .map-place-label{font-size:11px} .map-open-link{text-align:center;font-size:10px;padding:5px 6px} .google-map-frame-wrap{height:190px;border-radius:8px} } @media(max-width:210px){.google-map-frame-wrap{height:155px}} body.local-light .modal-header, body.local-light .modal-body, body.local-light .modal-footer, body.local-light .command-head, body.local-light .command-list, body.local-light .arasi-head, body.local-light .arasi-sub, body.local-light .arasi-list, body.local-light .arasi-foot{ background:#fff !important;color:#111 !important;border-color:#111 !important; } body.local-light .command-item, body.local-light .cmd-row, body.local-light .arasi-row{ background:#fff !important;color:#111 !important;border-color:#111 !important; } body.local-light .command-item *, body.local-light .cmd-row *, body.local-light .arasi-row *, body.local-light .arasi-title, body.local-light .arasi-sub{ color:#111 !important; } body.local-light .toast, body.local-light .toast-item, body.local-light #toast, body.local-light #toastContainer > *, body.local-light .user-list-toast, body.local-light .online-toast{ background:#fff !important;color:#111 !important;border:1px solid #111 !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; } body.local-light .arasi-bad, body.local-light .arasi-abstain, body.local-light .arasi-close, body.local-light .copy-btn, body.local-light .modal button, body.local-light .command-modal button{ background:#fff !important;color:#111 !important;border:1px solid #111 !important; } /* LIGHT v4 — actual help/list selectors + generated overlays */ body.local-light #commandModalBackdrop .command-modal, body.local-light #commandModalBackdrop .command-head, body.local-light #commandModalBackdrop .command-list, body.local-light #commandModalBackdrop .command-row, body.local-light #commandModalBackdrop .cmd-row, body.local-light #commandModalBackdrop .command-item, body.local-light #commandModalBackdrop [class*="command"]{ background:#fff !important;color:#111 !important;border-color:#111 !important; } body.local-light #commandModalBackdrop .command-row *, body.local-light #commandModalBackdrop .cmd-row *, body.local-light #commandModalBackdrop .command-item *, body.local-light #commandModalBackdrop [class*="command"] *{ color:#111 !important; } body.local-light #commandModalBackdrop button{ background:#fff !important;color:#111 !important;border:1px solid #111 !important; } /* /ls is generated as a toast; cover all toast containers and descendants */ body.local-light #toastContainer, body.local-light #toastContainer > div, body.local-light #toastHost, body.local-light #toastHost > div, body.local-light .toast-container > div, body.local-light .toastHost > div, body.local-light .toast, body.local-light [class*="toast"]{ color:#111 !important; } body.local-light #toastContainer > div, body.local-light #toastHost > div, body.local-light .toast-container > div, body.local-light .toastHost > div, body.local-light .toast{ background:#fff !important;border:1px solid #111 !important; } body.local-light #toastContainer *, body.local-light #toastHost *, body.local-light .toast-container *, body.local-light .toastHost *, body.local-light .toast *{ color:#111 !important; } /* generated local-only overlays: class is added by JS below */ body.local-light .light-theme-popup{ background:#fff !important;color:#111 !important;border:1px solid #111 !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; } body.local-light .light-theme-popup *{color:#111 !important} /* LIGHT v5 — /ls /dir uses .help-panel inside the chat log */ body.local-light .help-panel{ background:#fff !important; color:#111 !important; border:1px solid #111 !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; } body.local-light .help-panel *{ color:#111 !important; } /* LIGHT v6 — message bubbles/toasts need light text on their dark surfaces. Do not touch the chat background (bgc remains independent). */ body.local-light .bubble, body.local-light .msg-bubble, body.local-light .message-bubble, body.local-light .message .bubble, body.local-light .msg .bubble{ color:#fff !important; } body.local-light .bubble *, body.local-light .msg-bubble *, body.local-light .message-bubble *, body.local-light .message .bubble *, body.local-light .msg .bubble *{ color:#fff !important; } /* toast uses a dark/navy surface in the existing UI, so keep its text white */ body.local-light .toast, body.local-light #toastContainer > *, body.local-light #toastHost > *, body.local-light .toast-container > *, body.local-light .toastHost > *, body.local-light [class*="toast"]{ color:#fff !important; } body.local-light .toast *, body.local-light #toastContainer > * *, body.local-light #toastHost > * *, body.local-light .toast-container > * *, body.local-light .toastHost > * *, body.local-light [class*="toast"] *{ color:#fff !important; } /* Dynamic-theme helper added earlier must not force toast descendants black. */ body.local-light .light-theme-popup.toast, body.local-light .toast.light-theme-popup, body.local-light [class*="toast"].light-theme-popup{ color:#fff !important; } body.local-light .light-theme-popup.toast *, body.local-light .toast.light-theme-popup *, body.local-light [class*="toast"].light-theme-popup *{ color:#fff !important; } /* /rainbow FIX v7 — animate the actual chat background for 60 sec */ body.rainbow-mode .chat, body.rainbow-mode #log{ animation:rainbowChatBackground 7s linear infinite; } @keyframes rainbowChatBackground{ 0%{background-color:#ff4d4d} 14%{background-color:#ffca3a} 28%{background-color:#7bdc48} 42%{background-color:#35d0ba} 57%{background-color:#4d8dff} 71%{background-color:#8b5cf6} 85%{background-color:#f052b5} 100%{background-color:#ff4d4d} } body.rainbow-mode .chat, body.rainbow-mode #log{ animation:rainbowChatBackground 7s linear infinite !important; } /* /rainbow v8 — 60 sec readable rainbow TEXT, background untouched */ body.rainbow-mode .bubble, body.rainbow-mode .msg-bubble, body.rainbow-mode .message-bubble, body.rainbow-mode .message .bubble, body.rainbow-mode .msg .bubble, body.rainbow-mode #log .bubble, body.rainbow-mode #log .msg-bubble, body.rainbow-mode #log .message-bubble{ animation:rainbowReadableText 5.6s linear infinite !important; -webkit-text-fill-color:currentColor; } body.rainbow-mode .bubble *, body.rainbow-mode .msg-bubble *, body.rainbow-mode .message-bubble *, body.rainbow-mode .message .bubble *, body.rainbow-mode .msg .bubble *{ animation:rainbowReadableText 5.6s linear infinite !important; -webkit-text-fill-color:currentColor; } @keyframes rainbowReadableText{ 0%{color:#2878d8} 14%{color:#e33b3b} 28%{color:#b58a00} 42%{color:#238a4b} 56%{color:#d83b8d} 70%{color:#8052c7} 84%{color:#d96b18} 100%{color:#2878d8} } /* cancel the older rainbow background animation */ body.rainbow-mode, body.rainbow-mode .chat, body.rainbow-mode #log{ animation:none !important; } /* /rainbow v9 — explicit light + dark support */ body.rainbow-mode .message-bubble, body.local-light.rainbow-mode .message-bubble, body.local-dark.rainbow-mode .message-bubble, body.rainbow-mode .message.mine .message-bubble, body.local-light.rainbow-mode .message.mine .message-bubble, body.local-dark.rainbow-mode .message.mine .message-bubble{ animation:rainbowReadableTextV9 5.6s linear infinite !important; -webkit-text-fill-color:currentColor !important; } body.rainbow-mode .message-bubble *, body.local-light.rainbow-mode .message-bubble *, body.local-dark.rainbow-mode .message-bubble *{ animation:rainbowReadableTextV9 5.6s linear infinite !important; -webkit-text-fill-color:currentColor !important; } @keyframes rainbowReadableTextV9{ 0%{color:#2474d2} 14%{color:#d93636} 28%{color:#a77b00} 42%{color:#168447} 56%{color:#cf3181} 70%{color:#7548bd} 84%{color:#cf6114} 100%{color:#2474d2} } #antLayer{position:fixed;inset:0;z-index:10880;pointer-events:none;overflow:hidden} .ant{position:absolute;width:22px;height:12px;transform-origin:center;will-change:transform,opacity;animation:antTravel 10s linear forwards} .ant-body{position:absolute;left:7px;top:4px;width:8px;height:5px;background:#16120f;border-radius:50%;box-shadow:-5px 0 0 -1px #16120f,6px 0 0 -1px #16120f} .ant-body:before,.ant-body:after{content:"";position:absolute;left:2px;top:2px;width:11px;height:1px;background:#16120f;transform-origin:2px center} .ant-body:before{transform:rotate(28deg);box-shadow:0 4px 0 #16120f,0 -4px 0 #16120f} .ant-body:after{transform:rotate(-28deg);box-shadow:0 4px 0 #16120f,0 -4px 0 #16120f} .ant-antenna{position:absolute;left:14px;top:2px;width:7px;height:1px;background:#16120f;transform-origin:left center;transform:rotate(-28deg)} .ant-antenna:after{content:"";position:absolute;left:0;top:0;width:7px;height:1px;background:#16120f;transform-origin:left center;transform:rotate(56deg)} @keyframes antTravel{ 0%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--r0)) scale(var(--scale))} 5%{opacity:1} 25%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) scale(var(--scale))} 50%{transform:translate(var(--x2),var(--y2)) rotate(var(--r2)) scale(var(--scale))} 75%{transform:translate(var(--x3),var(--y3)) rotate(var(--r3)) scale(var(--scale))} 95%{opacity:1} 100%{opacity:0;transform:translate(var(--ex),var(--ey)) rotate(var(--r4)) scale(var(--scale))} } /* /ari v16 — animated legs + antennae */ .ant-body::before,.ant-body::after{display:none!important} .ant-leg{ position:absolute;left:9px;top:5px;width:10px;height:1.5px; background:#16120f;border-radius:2px;transform-origin:1px 50%; } .ant-leg.l1{transform:rotate(-42deg);animation:antLeg1 .18s ease-in-out infinite alternate} .ant-leg.l2{top:7px;transform:rotate(0deg);animation:antLeg2 .18s ease-in-out infinite alternate} .ant-leg.l3{top:9px;transform:rotate(42deg);animation:antLeg3 .18s ease-in-out infinite alternate} .ant-leg.r1{left:4px;transform-origin:9px 50%;transform:rotate(42deg);animation:antLeg3 .18s ease-in-out infinite alternate} .ant-leg.r2{left:4px;top:7px;transform-origin:9px 50%;transform:rotate(0deg);animation:antLeg2 .18s ease-in-out infinite alternate-reverse} .ant-leg.r3{left:4px;top:9px;transform-origin:9px 50%;transform:rotate(-42deg);animation:antLeg1 .18s ease-in-out infinite alternate-reverse} @keyframes antLeg1{from{transform:rotate(-58deg)}to{transform:rotate(-20deg)}} @keyframes antLeg2{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}} @keyframes antLeg3{from{transform:rotate(20deg)}to{transform:rotate(58deg)}} .ant-antenna{animation:antFeel1 .32s ease-in-out infinite alternate} .ant-antenna::after{animation:antFeel2 .28s ease-in-out infinite alternate} @keyframes antFeel1{from{transform:rotate(-38deg)}to{transform:rotate(-17deg)}} @keyframes antFeel2{from{transform:rotate(42deg)}to{transform:rotate(70deg)}} .ant-body{animation:antBodyBob .16s ease-in-out infinite alternate} @keyframes antBodyBob{from{transform:translateY(-.5px)}to{transform:translateY(.8px)}} /* /ari v17 — canvas ants based on the uploaded "ありさん" movement */ #antLayer{ position:fixed;inset:0;z-index:10880;pointer-events:none;overflow:hidden; } #antCanvas{ position:absolute;inset:0;width:100%;height:100%;display:block; pointer-events:none; } #sharedPopupLayer{position:fixed;inset:0;z-index:11900;pointer-events:none;overflow:hidden} .shared-popup{position:absolute;width:min(200px,calc(100vw - 12px));height:min(200px,calc(100vh - 12px));min-width:120px;min-height:110px;border-radius:10px;overflow:hidden;pointer-events:auto;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.55);box-shadow:2px 2px 12px rgba(0,0,0,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#151515} .shared-popup-head{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;padding:0 43px 0 10px;background:#7d7d7d;color:#fff;font-size:12px;font-weight:800;cursor:move;user-select:none;touch-action:none} .shared-popup-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shared-popup-close{position:absolute;right:4px;top:3px;width:34px;height:34px;padding:0;border-radius:5px;border:1px solid #900;background:#f01818!important;color:#fff!important;font-size:17px;font-weight:900;cursor:pointer} .shared-popup-body{position:absolute;left:0;right:0;top:40px;bottom:0;padding:11px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5;color:#181818;background:rgba(255,255,255,.22)} @media(max-width:230px),(max-height:230px){.shared-popup{width:calc(100vw - 8px);height:calc(100vh - 8px);min-width:0;min-height:0;border-radius:7px}.shared-popup-head{height:31px;padding:0 34px 0 7px;font-size:10px}.shared-popup-close{width:27px;height:27px;right:2px;top:2px;font-size:14px}.shared-popup-body{top:31px;padding:7px;font-size:10px;line-height:1.35}} /* masugame: 10x10 one-different-character game */ #masuGameLayer{position:fixed;inset:0;z-index:12150;display:none;align-items:center;justify-content:center;padding:12px;background:rgba(4,8,16,.82);backdrop-filter:blur(4px);pointer-events:auto} #masuGameLayer.active{display:flex} .masu-game-card{width:min(94vw,660px);max-height:96dvh;overflow:auto;padding:14px;border:1px solid var(--border);border-radius:18px;background:#111827;box-shadow:0 22px 70px rgba(0,0,0,.5)} .masu-game-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .masu-game-title{font-weight:1000;font-size:18px}.masu-game-timer{min-width:74px;text-align:center;padding:6px 10px;border-radius:999px;background:#1b2742;font-weight:1000;font-variant-numeric:tabular-nums} .masu-game-hint{margin:0 0 10px;color:var(--muted);font-size:13px;text-align:center} .masu-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;width:min(88vw,570px);aspect-ratio:1;margin:auto} .masu-cell{min-width:0;min-height:0;padding:0;border:1px solid #34415d;border-radius:7px;background:#172033;color:var(--text);font:900 clamp(15px,4.2vw,31px)/1 system-ui,-apple-system,"Segoe UI",Meiryo,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:manipulation} .masu-cell:hover{filter:brightness(1.16)}.masu-cell.wrong{animation:masuWrong .24s ease;background:#61242c!important}.masu-cell.correct{background:#17643b!important;transform:scale(1.06)} .masu-game-status{min-height:24px;margin-top:10px;text-align:center;font-weight:900;color:#dbeafe} @keyframes masuWrong{0%,100%{transform:none}35%{transform:translateX(-4px)}70%{transform:translateX(4px)}} @media(max-width:430px){#masuGameLayer{padding:6px}.masu-game-card{padding:9px;border-radius:12px}.masu-game-title{font-size:14px}.masu-game-timer{font-size:12px;min-width:62px}.masu-game-hint{font-size:11px}.masu-grid{gap:2px;width:min(94vw,520px)}.masu-cell{border-radius:4px;font-size:clamp(12px,7.2vw,25px)}} /* masugame light mode: countdown/status readability */ body.local-light .masu-game-timer{ background:#fff !important; color:#111 !important; border:1px solid #111 !important; box-shadow:0 2px 8px rgba(0,0,0,.08); } body.local-light .masu-game-status{ color:#111 !important; } /* /yomiage — local browser text-to-speech */ .yomiage-indicator{ position:absolute;left:9px;top:9px;z-index:30;display:none;align-items:center;gap:7px; height:34px;padding:0 5px 0 10px;border-radius:999px; background:rgba(17,24,39,.94);color:#fff;border:1px solid rgba(255,255,255,.2); box-shadow:0 5px 18px rgba(0,0,0,.25);font-size:12px;font-weight:800; backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); } .yomiage-indicator.active{display:flex} .yomiage-stop{ width:25px;height:25px;padding:0;border:0;border-radius:50%;cursor:pointer; background:#ef4444!important;color:#fff!important;font-size:16px;line-height:1;font-weight:900; display:flex;align-items:center;justify-content:center; } .chat.yomiage-active .chatlog{padding-top:52px} body.local-light .yomiage-indicator{background:#fff;color:#111;border:1px solid #111} body.local-light .yomiage-stop{background:#ef4444!important;color:#fff!important;border:0!important} @media(max-width:430px){ .yomiage-indicator{left:6px;top:6px;height:30px;padding-left:8px;font-size:11px} .yomiage-stop{width:22px;height:22px;font-size:14px} .chat.yomiage-active .chatlog{padding-top:44px} } /* form:質問,回答1,回答2... — 60秒共有アンケート（通常版のみ） */ .poll-card{ align-self:center; width:min(100%,640px); padding:13px 14px; border:1px solid #2c3852; border-radius:14px; background:#172033; color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.18); } .poll-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .poll-label{font-size:12px;font-weight:900;color:#a5b4fc} .poll-timer{ flex:0 0 auto; min-width:55px; padding:3px 8px; border-radius:999px; background:#10182a; border:1px solid #31405e; text-align:center; font-size:11px; font-weight:900; font-variant-numeric:tabular-nums; } .poll-question{ margin:2px 0 10px; font-size:15px; line-height:1.45; font-weight:900; overflow-wrap:anywhere; white-space:pre-wrap; } .poll-options{display:flex;flex-direction:column;gap:7px} .poll-option{ position:relative; overflow:hidden; border:1px solid #303d59; border-radius:10px; background:#111827; } .poll-option-main{ position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; min-height:39px; padding:7px 9px; cursor:pointer; } .poll-option-main input{ width:17px; height:17px; margin:0; accent-color:#60a5fa; cursor:pointer; } .poll-option-text{ min-width:0; font-size:13px; font-weight:750; overflow-wrap:anywhere; } .poll-option-count{ min-width:50px; text-align:right; color:var(--muted); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } .poll-progress{ position:absolute; left:0; bottom:0; width:0%; height:4px; background:linear-gradient(90deg,#3b82f6,#8b5cf6); transition:width .28s ease; pointer-events:none; } .poll-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; } .poll-status{ min-width:0; color:var(--muted); font-size:11px; font-weight:700; overflow-wrap:anywhere; } .poll-submit{ flex:0 0 auto; height:34px; padding:0 12px; border-radius:9px; border:1px solid #3d4d70; background:#1b5fbf; color:#fff; font-size:12px; font-weight:900; cursor:pointer; } .poll-submit:disabled{opacity:.48;cursor:default} .poll-card.closed .poll-option-main{cursor:default} .poll-card.closed .poll-option-main input{cursor:default} .poll-result{ margin-top:8px; padding-top:8px; border-top:1px solid #2c3852; font-size:12px; line-height:1.45; font-weight:850; overflow-wrap:anywhere; } body.local-light .poll-card{ background:#fff !important; color:#111 !important; border:1px solid #111 !important; box-shadow:0 8px 24px rgba(0,0,0,.12) !important; } body.local-light .poll-label, body.local-light .poll-question, body.local-light .poll-option-text, body.local-light .poll-result{color:#111 !important} body.local-light .poll-timer{ background:#fff !important; color:#111 !important; border:1px solid #111 !important; } body.local-light .poll-option{ background:#fff !important; border-color:#999 !important; } body.local-light .poll-option-count, body.local-light .poll-status{color:#444 !important} body.local-light .poll-submit{ background:#111 !important; color:#fff !important; border:1px solid #111 !important; } body.local-light .poll-result{border-top-color:#bbb !important} @media(max-width:430px){ .poll-card{padding:10px;border-radius:11px} .poll-question{font-size:13px;margin-bottom:8px} .poll-option-main{min-height:36px;padding:6px 7px;gap:6px} .poll-option-text{font-size:12px} .poll-option-count{min-width:43px;font-size:10px} .poll-submit{height:32px;padding:0 10px;font-size:11px} .poll-status,.poll-result,.poll-label,.poll-timer{font-size:10px} } /* /chatclear — 90%承認が必要な赤い全削除投票 */ .chat-clear-vote-card{ align-self:center; box-sizing:border-box; width:min(100%,640px); padding:14px; border:2px solid #fca5a5; border-radius:14px; background:linear-gradient(145deg,#991b1b,#7f1d1d 58%,#450a0a); color:#fff !important; box-shadow:0 10px 28px rgba(127,29,29,.42); } .chat-clear-vote-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; font-weight:950; } .chat-clear-vote-timer{ flex:0 0 auto; min-width:54px; padding:4px 8px; border:1px solid rgba(255,255,255,.62); border-radius:999px; background:rgba(69,10,10,.74); color:#fff !important; text-align:center; font-size:11px; font-weight:900; font-variant-numeric:tabular-nums; } .chat-clear-vote-description{ margin:9px 0 11px; color:#fee2e2 !important; font-size:12px; line-height:1.55; font-weight:750; } .chat-clear-vote-choices{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .chat-clear-vote-choice{ display:flex !important; align-items:center !important; justify-content:space-between !important; min-width:0; min-height:42px; padding:0 12px !important; border:1px solid rgba(255,255,255,.7) !important; border-radius:10px !important; background:rgba(69,10,10,.58) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:13px; font-weight:950; cursor:pointer; } .chat-clear-vote-choice:hover:not(:disabled){background:rgba(127,29,29,.9) !important} .chat-clear-vote-choice.selected{ background:#fff !important; color:#7f1d1d !important; -webkit-text-fill-color:#7f1d1d !important; border-color:#fff !important; box-shadow:0 0 0 2px rgba(255,255,255,.25); } .chat-clear-vote-choice:disabled{cursor:default;opacity:.56} .chat-clear-vote-count{ display:inline-flex; align-items:center; justify-content:center; min-width:25px; height:25px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.18); font-size:11px; font-variant-numeric:tabular-nums; } .chat-clear-vote-choice.selected .chat-clear-vote-count{background:#fee2e2} .chat-clear-vote-track{ height:7px; margin-top:11px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.2); } .chat-clear-vote-progress{ width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fecaca,#fff); transition:width .28s ease; } .chat-clear-vote-status{ margin-top:7px; color:#fff !important; font-size:11px; line-height:1.4; font-weight:850; } .chat-clear-vote-card.closed{filter:saturate(.72)} body.local-light .chat-clear-vote-card{ border-color:#b91c1c !important; background:linear-gradient(145deg,#dc2626,#991b1b 62%,#7f1d1d) !important; color:#fff !important; } body.local-light .chat-clear-vote-choice{ border-color:#fff !important; background:#fff !important; color:#7f1d1d !important; -webkit-text-fill-color:#7f1d1d !important; } body.local-light .chat-clear-vote-choice.selected{ border-color:#fecaca !important; background:#fee2e2 !important; color:#7f1d1d !important; -webkit-text-fill-color:#7f1d1d !important; } body.local-light .chat-clear-vote-count{ background:#fee2e2 !important; color:#7f1d1d !important; -webkit-text-fill-color:#7f1d1d !important; } @media(max-width:430px){ .chat-clear-vote-card{padding:11px;border-radius:12px} .chat-clear-vote-head{font-size:12px} .chat-clear-vote-description{font-size:11px} .chat-clear-vote-choice{min-height:38px;padding:0 9px !important;font-size:12px} .chat-clear-vote-status,.chat-clear-vote-timer{font-size:10px} } /* oproom: — 5分間だけ表示できるルーム移動リンク */ .open-room-invite-card{ align-self:center; box-sizing:border-box; width:min(100%,640px); padding:13px 14px; border:1px solid #60a5fa; border-radius:14px; background:linear-gradient(145deg,#102a4b,#13213a 62%,#101827); color:#f8fafc; box-shadow:0 8px 24px rgba(15,23,42,.24); transition:opacity .22s ease,transform .22s ease; } .open-room-invite-card.is-expiring{opacity:0;transform:translateY(-5px) scale(.985)} .open-room-invite-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:950; } .open-room-invite-timer{ flex:0 0 auto; min-width:52px; padding:3px 8px; border:1px solid rgba(147,197,253,.7); border-radius:999px; background:rgba(15,23,42,.58); color:#dbeafe; text-align:center; font-size:11px; font-weight:900; font-variant-numeric:tabular-nums; } .open-room-invite-from{ margin-top:7px; color:#bfdbfe; font-size:11px; line-height:1.45; font-weight:750; } .open-room-invite-room{ margin:9px 0; padding:8px 10px; border:1px solid rgba(147,197,253,.42); border-radius:9px; background:rgba(15,23,42,.58); color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.4; font-weight:850; overflow-wrap:anywhere; } .open-room-invite-link{ box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; min-height:38px; padding:0 12px; border:1px solid #93c5fd; border-radius:9px; background:#2563eb; appearance:none; -webkit-appearance:none; color:#fff !important; -webkit-text-fill-color:#fff !important; font-family:inherit; font-size:12px; font-weight:900; text-align:center; text-decoration:none; cursor:pointer; } .open-room-invite-link:hover{background:#1d4ed8;text-decoration:none} .open-room-invite-note{ margin-top:7px; color:#93c5fd; font-size:10px; line-height:1.35; font-weight:750; text-align:right; } body.local-light .open-room-invite-card{ border-color:#2563eb !important; background:#fff !important; color:#111827 !important; box-shadow:0 8px 22px rgba(37,99,235,.14) !important; } body.local-light .open-room-invite-from{color:#1e3a8a !important} body.local-light .open-room-invite-timer{ border-color:#2563eb !important;background:#eff6ff !important;color:#1e3a8a !important; } body.local-light .open-room-invite-room{ border-color:#93c5fd !important;background:#eff6ff !important;color:#111827 !important; } body.local-light .open-room-invite-note{color:#1d4ed8 !important} @media(max-width:430px){ .open-room-invite-card{padding:11px;border-radius:12px} .open-room-invite-head{font-size:12px} .open-room-invite-from{font-size:10px} .open-room-invite-room{font-size:11px} .open-room-invite-link{min-height:35px;font-size:11px} .open-room-invite-note,.open-room-invite-timer{font-size:9px} } .open-room-invite-card.is-locked{ border-color:#c084fc; background:linear-gradient(145deg,#32165b,#21153f 62%,#171329); box-shadow:0 9px 26px rgba(88,28,135,.32); } .open-room-invite-card.is-locked .open-room-invite-timer{ border-color:rgba(216,180,254,.72); color:#f3e8ff; } .open-room-invite-card.is-locked .open-room-invite-from{color:#e9d5ff} .open-room-invite-card.is-locked .open-room-invite-room{ border-color:rgba(216,180,254,.44); background:rgba(46,16,101,.42); color:#f3e8ff; font-family:inherit; } .open-room-invite-card.is-locked .open-room-invite-link{ border-color:#d8b4fe; background:#7e22ce; } .open-room-invite-card.is-locked .open-room-invite-link:hover{background:#6b21a8} .open-room-invite-card.is-locked .open-room-invite-note{color:#d8b4fe} body.local-light .open-room-invite-card.is-locked{ border-color:#9333ea!important; background:#faf5ff!important; box-shadow:0 8px 22px rgba(126,34,206,.16)!important; } body.local-light .open-room-invite-card.is-locked .open-room-invite-from{color:#581c87!important} body.local-light .open-room-invite-card.is-locked .open-room-invite-timer{ border-color:#9333ea!important;background:#f3e8ff!important;color:#581c87!important; } body.local-light .open-room-invite-card.is-locked .open-room-invite-room{ border-color:#c084fc!important;background:#f3e8ff!important;color:#3b0764!important; } body.local-light .open-room-invite-card.is-locked .open-room-invite-link{ border-color:#7e22ce!important; background:#7e22ce!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } body.local-light .open-room-invite-card.is-locked .open-room-invite-link:hover{ background:#6b21a8!important; } body.local-light .open-room-invite-card.is-locked .open-room-invite-note{color:#7e22ce!important} .open-room-invite-card.is-expired{ border-color:#64748b; background:#1e293b; color:#e2e8f0; box-shadow:none; } .open-room-invite-card.is-expired .open-room-invite-from, .open-room-invite-card.is-expired .open-room-invite-note{color:#94a3b8} .open-room-invite-card.is-expired .open-room-invite-timer, .open-room-invite-card.is-expired .open-room-invite-room{ border-color:#64748b; background:#0f172a; color:#cbd5e1; } .open-room-invite-card.is-expired .open-room-invite-link{ border-color:#64748b; background:#475569; cursor:default; pointer-events:none; } body.local-light .open-room-invite-card.is-expired{ border-color:#94a3b8!important; background:#f1f5f9!important; color:#475569!important; box-shadow:none!important; } body.local-light .open-room-invite-card.is-expired .open-room-invite-from, body.local-light .open-room-invite-card.is-expired .open-room-invite-note{color:#64748b!important} body.local-light .open-room-invite-card.is-expired .open-room-invite-timer, body.local-light .open-room-invite-card.is-expired .open-room-invite-room{ border-color:#cbd5e1!important;background:#e2e8f0!important;color:#475569!important; } body.local-light .open-room-invite-card.is-expired .open-room-invite-link{ border-color:#94a3b8!important;background:#94a3b8!important;color:#fff!important; } /* oproom: 招待リンクのパスワード設定・表示ロック */ .open-room-password-backdrop{ position:fixed; inset:0; z-index:2147483400; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:18px; visibility:hidden; opacity:0; pointer-events:none; background:rgba(2,6,23,.74); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:opacity .2s ease,visibility 0s linear .2s; } .open-room-password-backdrop.open{ visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; } .open-room-password-card{ box-sizing:border-box; width:min(94vw,470px); max-height:min(90dvh,700px); overflow:auto; padding:19px; border:1px solid #7e22ce; border-radius:17px; background:#111827; color:#f8fafc; box-shadow:0 28px 78px rgba(0,0,0,.52); opacity:0; transform:translateY(13px) scale(.975); transition:opacity .2s ease,transform .24s cubic-bezier(.2,.82,.25,1); } .open-room-password-backdrop.open .open-room-password-card{ opacity:1; transform:translateY(0) scale(1); } .open-room-password-eyebrow{ color:#d8b4fe; font-size:10px; line-height:1.3; font-weight:950; letter-spacing:.04em; } .open-room-password-title{ margin:5px 0 0; color:inherit; font-size:18px; line-height:1.42; font-weight:1000; } .open-room-password-message{ margin:9px 0 0; color:#dbe4f0; font-size:12px; line-height:1.65; font-weight:700; } .open-room-password-body{margin-top:13px} .open-room-password-room,.open-room-password-unlocked{ display:grid; gap:4px; padding:9px 10px; border:1px solid rgba(216,180,254,.5); border-radius:10px; background:rgba(88,28,135,.22); } .open-room-password-room span,.open-room-password-unlocked span{ color:#e9d5ff; font-size:9px; font-weight:900; } .open-room-password-room strong,.open-room-password-unlocked strong{ color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.4; font-weight:900; overflow-wrap:anywhere; } .open-room-password-choice{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; } .open-room-password-choice button, .open-room-password-form-actions button, .open-room-password-actions button, .open-room-password-generate, .open-room-password-unlock{ appearance:none; -webkit-appearance:none; min-height:41px; padding:0 11px; border:1px solid #64748b; border-radius:10px; background:#263348; color:#fff; font-size:11px; line-height:1.3; font-weight:950; cursor:pointer; } .open-room-password-choice .open-room-password-yes, .open-room-password-send, .open-room-password-unlock, .open-room-password-open{ border-color:#a855f7; background:#7e22ce; } .open-room-password-form{ display:grid; gap:10px; margin-top:13px; } .open-room-password-form[hidden], .open-room-password-choice[hidden], .open-room-entry-form[hidden], .open-room-password-unlocked[hidden], .open-room-password-open[hidden]{display:none!important} .open-room-password-label{ display:grid; gap:5px; color:#e2e8f0; font-size:10px; line-height:1.4; font-weight:900; } .open-room-password-input{ box-sizing:border-box; width:100%; height:42px; padding:0 11px; border:1px solid #64748b; border-radius:9px; outline:none; background:#0b1220; color:#fff; -webkit-text-fill-color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; font-weight:800; } .open-room-password-input:focus{ border-color:#c084fc; box-shadow:0 0 0 3px rgba(192,132,252,.2); } .open-room-password-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .open-room-password-generate{min-height:34px!important;font-size:10px!important} .open-room-password-reveal{ display:inline-flex; align-items:center; gap:5px; color:#dbe4f0; font-size:10px; font-weight:850; white-space:nowrap; } .open-room-password-hint{ padding:9px 10px; border:1px solid rgba(251,191,36,.5); border-radius:9px; background:rgba(120,53,15,.25); color:#fde68a; font-size:10px; line-height:1.6; font-weight:750; } .open-room-password-form-actions,.open-room-password-actions{ display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:4px; } .open-room-password-actions{margin-top:14px} .open-room-password-status{ margin-top:11px; padding:8px 9px; border:1px solid rgba(74,222,128,.48); border-radius:9px; background:rgba(20,83,45,.28); color:#bbf7d0; white-space:pre-wrap; font-size:10px; line-height:1.55; font-weight:850; } .open-room-password-status[hidden]{display:none!important} .open-room-password-status.is-error{ border-color:rgba(248,113,113,.6); background:rgba(127,29,29,.3); color:#fecaca; } .open-room-password-timer{ margin-bottom:10px; color:#d8b4fe; font-size:11px; line-height:1.4; font-weight:900; text-align:center; } .open-room-entry-form{display:grid;gap:10px} .open-room-password-unlocked{margin-top:4px} .open-room-password-actions .open-room-password-open{ color:#fff; -webkit-text-fill-color:#fff; } .open-room-password-actions button:only-child{grid-column:1/-1} .open-room-password-card button:disabled, .open-room-password-card input:disabled{opacity:.5;cursor:default} .open-room-password-card button:focus-visible{ outline:3px solid rgba(216,180,254,.68); outline-offset:2px; } body.local-light .open-room-password-card{ border-color:#9333ea!important; background:#fff!important; color:#111827!important; box-shadow:0 24px 65px rgba(15,23,42,.24)!important; } body.local-light .open-room-password-eyebrow{color:#7e22ce!important} body.local-light .open-room-password-message, body.local-light .open-room-password-label, body.local-light .open-room-password-reveal{color:#334155!important} body.local-light .open-room-password-room, body.local-light .open-room-password-unlocked{ border-color:#c084fc!important;background:#faf5ff!important; } body.local-light .open-room-password-room span, body.local-light .open-room-password-unlocked span{color:#7e22ce!important} body.local-light .open-room-password-room strong, body.local-light .open-room-password-unlocked strong{color:#111827!important} body.local-light .open-room-password-input{ border-color:#aab3bd!important;background:#fff!important;color:#111!important; -webkit-text-fill-color:#111!important; } body.local-light .open-room-password-no, body.local-light .open-room-password-back, body.local-light .open-room-password-close, body.local-light .open-room-password-generate{ border-color:#aab3bd!important;background:#eef1f4!important;color:#111!important; } body.local-light .open-room-password-hint{ border-color:#d97706!important;background:#fffbeb!important;color:#78350f!important; } body.local-light .open-room-password-status{ border-color:#16a34a!important;background:#f0fdf4!important;color:#166534!important; } body.local-light .open-room-password-status.is-error{ border-color:#dc2626!important;background:#fef2f2!important;color:#991b1b!important; } body.local-light .open-room-password-timer{color:#7e22ce!important} @media(max-width:430px){ .open-room-password-backdrop{padding:10px} .open-room-password-card{width:min(96vw,440px);padding:14px;border-radius:14px} .open-room-password-title{font-size:15px} .open-room-password-message{font-size:11px} .open-room-password-choice{grid-template-columns:1fr;gap:7px} .open-room-password-choice button, .open-room-password-form-actions button, .open-room-password-actions button, .open-room-password-unlock{min-height:38px;font-size:10px} .open-room-password-tools{align-items:stretch;flex-direction:column} .open-room-password-reveal{min-height:28px} } @media(prefers-reduced-motion:reduce){ .open-room-password-backdrop,.open-room-password-card{transition:none!important} } /* ---------- image chat ---------- */ .image-btn{ flex:0 0 auto; width:42px; height:40px; padding:0!important; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:#172035; color:var(--text); cursor:pointer; font-size:19px; line-height:1; } .image-btn:disabled{opacity:.45;cursor:default} .image-message-bubble{ padding:5px; overflow:hidden; background:#232b3d; border-radius:16px 16px 16px 4px; max-width:min(440px,78vw); } .message.mine .image-message-bubble{ background:#315da8; border-radius:16px 16px 4px 16px; } .chat-image{ display:block; width:auto; height:auto; max-width:100%; max-height:420px; border-radius:11px; object-fit:contain; cursor:zoom-in; background:#0b0d12; } .image-info{ padding:4px 5px 1px; color:var(--muted); font-size:10px; line-height:1.3; } .message.mine .image-info{color:rgba(255,255,255,.78)} .ai-image-check-badge{ margin-top:5px; font-size:10px; line-height:1.25; opacity:.68; text-align:right; user-select:none; } #imageLightbox{ position:fixed; inset:0; z-index:13000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.88); cursor:zoom-out; } #imageLightbox.open{display:flex} #imageLightbox img{ display:block; max-width:96vw; max-height:92vh; object-fit:contain; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.45); } .image-sending-note{ position:fixed; left:50%; bottom:18px; z-index:13010; transform:translateX(-50%); padding:8px 12px; border-radius:999px; background:rgba(17,24,39,.94); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:12px; font-weight:800; pointer-events:none; } body.local-light .image-btn{ background:#fff!important; color:#111!important; border-color:#111!important; } body.local-light .image-message-bubble{ background:#fff!important; border:1px solid #999!important; } body.local-light .message.mine .image-message-bubble{ background:#315da8!important; border-color:#315da8!important; } body.local-light .image-info{color:#444!important} body.local-light .message.mine .image-info{color:rgba(255,255,255,.78)!important} @media(max-width:430px){ .image-btn{width:36px;height:36px;font-size:17px;border-radius:8px} .image-message-bubble{max-width:min(330px,82vw)} .chat-image{max-height:360px;border-radius:9px} } @media(max-width:300px){ .image-btn{width:32px;height:36px;font-size:15px;padding:0!important} .image-message-bubble{max-width:88vw} } /* ---------- /moe / /pyoko ---------- */ .pyoko-peek-character{ position:fixed; left:50%; bottom:-14px; /* v564: character pop-up returned to the normal chat-effect layer. Full-screen games cover it; the toast layer remains above those games. */ z-index:12000; width:min(320px,56vw); pointer-events:none; transform:translate(-50%,108%); transform-origin:50% 100%; will-change:transform; } .pyoko-peek-character img{ display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none; } .pyoko-peek-speech{ position:absolute; top:-10%; right:-24%; padding:10px 15px; border:2px solid #66537f; border-radius:18px 18px 18px 5px; background:#fff; box-shadow:0 5px 0 rgba(102,83,127,.12); color:#66537f; font-size:clamp(.72rem,2.3vw,.9rem); font-weight:900; line-height:1.2; white-space:nowrap; opacity:0; transform:scale(.6) rotate(5deg); } .pyoko-peek-character.is-peeking{animation:pyokoPeekIn 420ms cubic-bezier(.22,1.35,.5,1) forwards;} .pyoko-peek-character.is-leaving{animation:pyokoPeekOut 440ms cubic-bezier(.55,0,.85,.5) forwards;} .pyoko-peek-character.is-peeking .pyoko-peek-speech{animation:pyokoBubbleIn 260ms 390ms cubic-bezier(.22,1.5,.5,1) forwards;} @keyframes pyokoPeekIn{ 0%{transform:translate(-50%,108%) scale(.96)} 72%{transform:translate(-50%,-3%) scale(1.02)} 100%{transform:translate(-50%,0) scale(1)} } @keyframes pyokoPeekOut{ 0%{transform:translate(-50%,0)} 18%{transform:translate(-50%,-3%) rotate(-2deg)} 100%{transform:translate(-50%,108%) rotate(2deg)} } @keyframes pyokoBubbleIn{to{opacity:1;transform:scale(1) rotate(5deg)}} @media (max-width:640px){ .pyoko-peek-character{width:min(270px,70vw)} .pyoko-peek-speech{top:-5%;right:-18%;padding:8px 12px} } @media (max-width:300px){ .pyoko-peek-character{width:min(160px,82vw);bottom:-8px} .pyoko-peek-speech{top:-2%;right:-8%;padding:6px 9px;border-width:1.5px;border-radius:14px 14px 14px 4px;font-size:11px} } @media (max-width:210px){ .pyoko-peek-character{width:min(144px,84vw)} .pyoko-peek-speech{right:-2%;font-size:10px;padding:5px 8px} } /* ---------- /virus : 赤い×マークが画面を埋め尽くす ---------- */ #virusEffectLayer{ position:fixed; inset:0; z-index:12500; pointer-events:none; overflow:hidden; contain:layout paint style; } .virus-mark{ position:absolute; width:20px; height:20px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #ff6666 0 17%, #ef3737 36%, #c90808 72%, #870000 100%); border:2px solid rgba(255,255,255,.96); box-shadow: 0 0 0 1px rgba(85,0,0,.75), 0 1px 2px rgba(0,0,0,.34); opacity:0; transform:scale(.12) rotate(var(--vr,0deg)); animation:virusAppear 240ms cubic-bezier(.15,.9,.25,1.25) var(--vd,0ms) forwards; will-change:transform,opacity; } .virus-mark::before, .virus-mark::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:4px; border-radius:3px; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.14); transform-origin:center; } .virus-mark::before{transform:translate(-50%,-50%) rotate(45deg)} .virus-mark::after{transform:translate(-50%,-50%) rotate(-45deg)} #virusEffectLayer.is-clearing{ animation:virusLayerOut .5s ease forwards; } @keyframes virusAppear{ 0%{opacity:0;transform:scale(.12) rotate(var(--vr,0deg))} 72%{opacity:1;transform:scale(1.12) rotate(var(--vr,0deg))} 100%{opacity:1;transform:scale(1) rotate(var(--vr,0deg))} } @keyframes virusLayerOut{ to{opacity:0;filter:blur(2px)} } /* ---------- language-neutral send button ---------- */ #sendBtn{ flex:0 0 44px; width:44px; height:40px; padding:0 !important; border:0 !important; border-radius:10px; background:#315da8 !important; color:#fff !important; font-size:0 !important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; line-height:1; } #sendBtn::after{ content:'➤'; display:block; color:#fff; font-size:19px; line-height:1; transform:translateX(1px); } #sendBtn:hover{filter:brightness(1.08)} #sendBtn:active{transform:translateY(1px)} #sendBtn:disabled{ opacity:.48; cursor:default; transform:none; } body.local-light #sendBtn{ background:#315da8 !important; color:#fff !important; } @media(max-width:680px){ #sendBtn{ flex-basis:40px; width:40px; height:40px; } #sendBtn::after{font-size:18px} } @media(max-width:300px){ #sendBtn{ flex:0 0 36px; width:36px; height:36px; padding:0 !important; border-radius:8px; } #sendBtn::after{font-size:17px} } /* ---------- /piano : 60秒みんなでピアノ ---------- */ .piano-session-card{ width:min(420px,92%); margin:8px auto; padding:10px 12px; border:1px solid rgba(125,140,175,.42); border-radius:14px; background:rgba(255,255,255,.95); box-shadow:0 8px 22px rgba(15,23,42,.12); color:#263044; font-size:13px; } .piano-session-card.is-ended{opacity:.66} .piano-card-head,.piano-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .piano-card-head{font-weight:900;margin-bottom:6px} .piano-card-meta{color:#697386;font-size:11px;margin-bottom:8px} .piano-join-btn{ width:100%;min-height:34px;border:0;border-radius:9px; background:#315da8;color:#fff;font-weight:900;cursor:pointer; } .piano-join-btn:disabled{opacity:.5;cursor:default} .piano-panel{ position:fixed; left:50%; bottom:10px; z-index:13000; width:min(520px,calc(100vw - 20px)); padding:8px; border:1px solid rgba(255,255,255,.28); border-radius:14px; background:rgba(20,26,38,.97); box-shadow:0 14px 40px rgba(0,0,0,.38); color:#fff; transform:translateX(-50%); user-select:none; -webkit-user-select:none; touch-action:none; } .piano-topbar{ display:flex;align-items:center;justify-content:space-between; gap:8px;height:28px;margin-bottom:6px; } .piano-title{ display:flex;align-items:center;gap:6px;min-width:0; font-size:12px;font-weight:900;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .piano-time{opacity:.72;font-size:10px;font-weight:800} .piano-close{ flex:0 0 26px;width:26px;height:26px;padding:0;border:0; border-radius:7px;background:rgba(255,255,255,.13); color:#fff;font-size:18px;line-height:1;cursor:pointer; } .piano-keyboard{ position:relative;height:104px;overflow:hidden;border-radius:9px; background:#10141d;touch-action:none; } .piano-white-keys{ display:grid;grid-template-columns:repeat(7,1fr);height:100%; } .piano-key{ -webkit-tap-highlight-color:transparent; touch-action:none;cursor:pointer; } .piano-key.white{ position:relative;min-width:0;border:1px solid #a9afb9;border-top:0; border-radius:0 0 5px 5px;background:linear-gradient(#fff,#f3f4f6); box-shadow:inset 0 -7px 9px rgba(0,0,0,.06);color:#6a7281; } .piano-key.white .piano-note-label{ position:absolute;left:50%;bottom:7px;transform:translateX(-50%); font-size:10px;font-weight:900;pointer-events:none; } .piano-key.black{ position:absolute;top:0;z-index:4;width:8.4%;height:62%; border:1px solid #050608;border-radius:0 0 4px 4px; background:linear-gradient(90deg,#101217,#2b2f38 48%,#090a0d); box-shadow:0 4px 5px rgba(0,0,0,.42); } .piano-key.white.is-down{ background:linear-gradient(#dce8ff,#c8dcff); transform:translateY(2px); } .piano-key.black.is-down{ background:linear-gradient(90deg,#243a63,#4267a6 48%,#17243d); transform:translateY(2px); } @media(max-width:300px){ .piano-session-card{ width:calc(100% - 10px);margin:5px auto;padding:7px; border-radius:9px;font-size:11px; } .piano-card-meta{font-size:9px;margin-bottom:6px} .piano-join-btn{min-height:30px;font-size:11px} .piano-panel{ width:calc(100vw - 8px);bottom:4px;padding:5px;border-radius:9px; } .piano-topbar{height:24px;margin-bottom:4px} .piano-title{font-size:10px} .piano-time{font-size:9px} .piano-close{ flex-basis:22px;width:22px;height:22px;border-radius:6px;font-size:16px; } .piano-keyboard{height:82px;border-radius:6px} .piano-key.white .piano-note-label{bottom:4px;font-size:8px} .piano-key.black{width:9.2%} } /* ========================================================= /watergame - みんなでコップに水を入れるターン制ゲーム ========================================================= */ .watergame-card{ position:relative; width:min(430px,94%); margin:9px auto; padding:10px 11px 11px; overflow:hidden; border:1px solid rgba(94,145,185,.42); border-radius:15px; background: radial-gradient(circle at 50% 18%,rgba(218,246,255,.94),rgba(255,255,255,.97) 58%,rgba(235,247,255,.97)); box-shadow:0 9px 25px rgba(26,68,103,.13); color:#20344b; } .watergame-card.is-ended{opacity:.88} .watergame-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:900; } .watergame-count{ color:#678197; font-size:10px; font-weight:800; white-space:nowrap; } .watergame-turn{ min-height:20px; margin:6px 0 1px; text-align:center; color:#264b6d; font-size:13px; font-weight:900; } .watergame-turn.is-mine{ color:#0872c9; animation:waterTurnPulse .8s ease-in-out infinite alternate; } .watergame-sub{ min-height:16px; text-align:center; color:#70859a; font-size:10px; font-weight:700; } .watergame-scene{ position:relative; height:174px; margin:2px auto 7px; overflow:visible; } /* 注ぐ側の透明ピッチャー */ .water-jug{ position:absolute; z-index:7; top:3px; left:calc(50% + 43px); width:43px; height:34px; opacity:0; pointer-events:none; border:2px solid rgba(95,132,157,.67); border-radius:7px 7px 11px 11px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(198,233,249,.52)); box-shadow: inset 0 -11px 0 rgba(55,167,232,.36), 0 4px 8px rgba(0,0,0,.08); transform-origin:8px 31px; } .water-jug::before{ content:""; position:absolute; right:-15px; top:6px; width:17px; height:18px; border:4px solid rgba(95,132,157,.57); border-left:0; border-radius:0 14px 14px 0; } .water-jug::after{ content:""; position:absolute; left:-9px; top:4px; width:12px; height:8px; border-top:3px solid rgba(95,132,157,.65); transform:skewX(-28deg); } .water-stream{ position:absolute; z-index:6; left:calc(50% + 15px); top:38px; width:var(--water-stream-width,6px); height:77px; opacity:0; pointer-events:none; border-radius:99px; background: linear-gradient(90deg,rgba(209,246,255,.4),rgba(61,181,239,.94) 42%,rgba(193,243,255,.68)); filter:drop-shadow(0 0 3px rgba(56,189,248,.35)); transform:scaleY(.08); transform-origin:50% 0; } /* ガラス */ .water-glass{ position:absolute; z-index:3; left:50%; bottom:4px; width:116px; height:126px; overflow:hidden; transform:translateX(-50%); clip-path:polygon(8% 0,92% 0,83% 100%,17% 100%); border:3px solid rgba(112,153,180,.66); border-top:4px solid rgba(83,132,164,.74); border-radius:4px 4px 22px 22px; background: linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.05) 24%,rgba(255,255,255,.18) 72%,rgba(255,255,255,.48)), linear-gradient(180deg,rgba(217,242,255,.18),rgba(187,226,246,.08)); box-shadow: inset 8px 0 12px rgba(255,255,255,.42), inset -7px 0 11px rgba(126,181,210,.12), 0 8px 14px rgba(43,91,122,.13); } .water-glass::after{ content:""; position:absolute; z-index:5; left:18%; top:9px; width:11%; height:72%; pointer-events:none; border-radius:99px; background:linear-gradient(rgba(255,255,255,.68),rgba(255,255,255,.04)); transform:rotate(2deg); } .water-liquid{ position:absolute; z-index:1; left:-8%; right:-8%; bottom:-2px; height:0%; background:linear-gradient(90deg,rgba(30,160,229,.76),rgba(89,204,247,.84) 42%,rgba(28,147,220,.84)); transition:height .72s cubic-bezier(.18,.78,.22,1); filter:saturate(1.04); } .water-liquid::before{ content:""; position:absolute; left:0; top:-7px; width:100%; height:14px; border-radius:50%; background: radial-gradient(ellipse at 50% 35%,rgba(231,251,255,.88) 0 18%,rgba(85,205,248,.94) 49%,rgba(24,147,220,.95) 73%); box-shadow:0 -1px 5px rgba(255,255,255,.45); } .water-liquid.slosh{animation:waterBodySlosh .68s ease-in-out 2} .water-liquid.slosh::before{animation:waterSlosh .68s ease-in-out 2} /* 溢れ */ .water-splash{ position:absolute; z-index:9; left:50%; bottom:111px; width:70px; height:42px; opacity:0; pointer-events:none; transform:translateX(-50%); } .water-splash::before, .water-splash::after{ content:"💧"; position:absolute; font-size:18px; opacity:0; } .water-splash::before{left:3px;top:9px} .water-splash::after{right:2px;top:2px} .watergame-card.is-overflow .water-splash{opacity:1} .watergame-card.is-overflow .water-splash::before{animation:waterDropLeft .85s ease-out forwards} .watergame-card.is-overflow .water-splash::after{animation:waterDropRight .9s .05s ease-out forwards} .water-puddle{ position:absolute; z-index:2; left:50%; bottom:0; width:135px; height:17px; opacity:0; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse,rgba(39,166,229,.56),rgba(103,208,247,.2) 62%,transparent 70%); transform:translateX(-50%) scale(.2); } .watergame-card.is-overflow .water-puddle{animation:waterPuddle .9s .23s ease-out forwards} .watergame-card.is-pouring .water-jug{animation:waterJugPour 1.05s ease-in-out forwards} .watergame-card.is-pouring .water-stream{animation:waterStream 1.05s ease-in-out forwards} .watergame-controls{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:6px; } .watergame-amount{ min-width:0; min-height:34px; padding:0 3px; border:1px solid #a9cce4; border-radius:8px; background:linear-gradient(#fff,#eaf6fd); color:#176da9; font-size:11px; font-weight:900; cursor:pointer; touch-action:manipulation; } .watergame-amount:disabled{opacity:.38;cursor:default} .watergame-amount:not(:disabled):active{transform:translateY(1px);background:#d9f1ff} .watergame-spectator{ margin-top:6px; padding:7px 8px; border-radius:9px; background:rgba(31,122,181,.08); color:#5c7890; text-align:center; font-size:10px; font-weight:800; line-height:1.45; } .watergame-result-line, .watergame-spectator-line{ width:min(430px,94%); margin:7px auto; padding:9px 11px; border-radius:11px; text-align:center; font-size:12px; font-weight:900; } .watergame-result-line{ border:1px solid rgba(226,73,73,.28); background:rgba(255,232,232,.95); color:#b42323; } .watergame-spectator-line{ border:1px solid rgba(46,139,192,.22); background:rgba(230,247,255,.94); color:#3f728e; } @keyframes waterJugPour{ 0%{opacity:0;transform:translate(9px,-8px) rotate(0deg)} 14%{opacity:1} 33%{opacity:1;transform:translate(-2px,4px) rotate(-53deg)} 72%{opacity:1;transform:translate(-2px,4px) rotate(-53deg)} 100%{opacity:0;transform:translate(9px,-8px) rotate(0deg)} } @keyframes waterStream{ 0%,22%{opacity:0;transform:scaleY(.08)} 32%{opacity:.97;transform:scaleY(1)} 73%{opacity:.97;transform:scaleY(1)} 88%,100%{opacity:0;transform:scaleY(.08)} } @keyframes waterSlosh{ 0%,100%{transform:translateX(0) rotate(0)} 28%{transform:translateX(-7%) rotate(-3deg)} 62%{transform:translateX(6%) rotate(2.5deg)} } @keyframes waterBodySlosh{ 0%,100%{transform:translateX(0)} 35%{transform:translateX(-2.5%)} 68%{transform:translateX(2.5%)} } @keyframes waterTurnPulse{from{transform:scale(1)}to{transform:scale(1.035)}} @keyframes waterDropLeft{ 0%{opacity:0;transform:translate(14px,5px) scale(.4)} 28%{opacity:1} 100%{opacity:0;transform:translate(-28px,42px) rotate(-25deg) scale(1.2)} } @keyframes waterDropRight{ 0%{opacity:0;transform:translate(-10px,6px) scale(.4)} 28%{opacity:1} 100%{opacity:0;transform:translate(30px,46px) rotate(28deg) scale(1.15)} } @keyframes waterPuddle{to{opacity:1;transform:translateX(-50%) scale(1)}} @media(max-width:300px){ .watergame-card{ width:calc(100% - 8px); margin:5px auto; padding:6px; border-radius:10px; } .watergame-head{font-size:10px} .watergame-count{font-size:8px} .watergame-turn{min-height:16px;margin-top:4px;font-size:10px} .watergame-sub{min-height:13px;font-size:8px} .watergame-scene{height:132px;margin-bottom:4px} .water-glass{width:79px;height:96px;bottom:3px;border-width:2px} .water-jug{left:calc(50% + 27px);width:31px;height:24px} .water-jug::before{right:-11px;width:12px;height:13px;border-width:3px} .water-jug::after{left:-7px;width:9px} .water-stream{left:calc(50% + 10px);top:29px;height:57px} .water-splash{bottom:82px;width:54px} .water-puddle{width:94px} .watergame-controls{grid-template-columns:repeat(3,1fr);gap:4px} .watergame-amount{min-height:28px;font-size:9px;border-radius:6px} .watergame-spectator{padding:5px;font-size:8px} .watergame-result-line,.watergame-spectator-line{ width:calc(100% - 8px); padding:6px; font-size:9px; } } /* ---------- Water Game button visibility FIX ---------- */ .watergame-controls{ position:relative !important; z-index:20 !important; width:100% !important; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px !important; margin:8px 0 7px !important; visibility:visible; opacity:1; } .watergame-amount{ display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:38px !important; padding:0 4px !important; border:1px solid #79b8df !important; border-radius:8px !important; background:linear-gradient(#ffffff,#dff3ff) !important; color:#075f9d !important; font-size:12px !important; font-weight:900 !important; line-height:1 !important; opacity:1; } .watergame-amount:disabled{ opacity:.38 !important; } /* コップの輪郭をPCでも見やすくする */ .water-glass{ border-color:rgba(58,119,160,.88) !important; border-top-color:rgba(34,101,146,.96) !important; background: linear-gradient(90deg,rgba(209,239,255,.30),rgba(255,255,255,.08) 26%,rgba(205,238,255,.20) 72%,rgba(207,239,255,.34)), rgba(225,246,255,.12) !important; box-shadow: inset 8px 0 12px rgba(255,255,255,.46), inset -7px 0 11px rgba(74,157,203,.18), 0 8px 14px rgba(43,91,122,.16) !important; } @media(max-width:300px){ .watergame-controls{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:4px !important; margin:5px 0 5px !important; } .watergame-amount{ min-height:30px !important; font-size:9px !important; padding:0 2px !important; border-radius:6px !important; } } /* ========================================================= Water Game FIXED PANEL chatlogの高さ/overflowに影響されない独立固定表示 ========================================================= */ .watergame-card{ position:fixed !important; z-index:13200 !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; width:min(430px,calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; margin:0 !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform:translate(-50%,-50%) !important; box-sizing:border-box !important; } .watergame-head, .watergame-turn, .watergame-sub, .watergame-controls, .watergame-scene, .watergame-spectator{ flex:0 0 auto !important; } .watergame-scene{ min-height:174px !important; } @supports not (height:100dvh){ .watergame-card{ max-height:calc(100vh - 24px) !important; } } /* WID / ultra narrow: 入力欄を避けて、その上の領域へ固定する */ @media(max-width:300px){ .watergame-card{ left:4px !important; right:4px !important; top:4px !important; bottom:48px !important; width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; margin:0 !important; padding:6px !important; overflow-y:auto !important; overflow-x:hidden !important; transform:none !important; border-radius:10px !important; } .watergame-scene{ min-height:132px !important; height:132px !important; } .watergame-controls{ position:relative !important; z-index:30 !important; flex:0 0 auto !important; } } /* ========================================================= Water Game JOIN LOBBY ========================================================= */ .watergame-lobby-card{ width:min(430px,94%); margin:8px auto; padding:10px 11px; border:1px solid rgba(68,145,194,.32); border-radius:13px; background:linear-gradient(180deg,rgba(241,251,255,.97),rgba(224,244,255,.96)); box-shadow:0 7px 20px rgba(27,94,135,.12); color:#274b64; font-size:12px; } .watergame-lobby-card.is-started{opacity:.72} .watergame-lobby-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; font-weight:900; } .watergame-lobby-time{ font-size:10px; color:#5e7e94; white-space:nowrap; } .watergame-lobby-info{ margin-bottom:7px; color:#698397; font-size:10px; font-weight:700; line-height:1.45; } .watergame-lobby-members{ max-height:58px; overflow:auto; margin:0 0 7px; padding:6px 7px; border-radius:8px; background:rgba(255,255,255,.7); color:#43647a; font-size:10px; line-height:1.5; } .watergame-lobby-join{ width:100%; min-height:34px; border:0; border-radius:9px; background:#2689c7; color:#fff; font-weight:900; cursor:pointer; } .watergame-lobby-join.is-joined{ background:#536b7c; } .watergame-lobby-join:disabled{ opacity:.52; cursor:default; } @media(max-width:300px){ .watergame-lobby-card{ width:calc(100% - 8px); margin:4px auto; padding:6px; border-radius:9px; font-size:9px; } .watergame-lobby-head{font-size:9px} .watergame-lobby-time,.watergame-lobby-info,.watergame-lobby-members{font-size:8px} .watergame-lobby-members{max-height:42px;padding:4px} .watergame-lobby-join{min-height:29px;font-size:9px} } /* ========================================================= Water Game spectator opt-in + close button ========================================================= */ .watergame-head{ position:relative; padding-right:31px; } .watergame-head-right{ display:flex; align-items:center; gap:5px; margin-left:auto; } .watergame-close{ position:absolute; top:-3px; right:-3px; width:27px; height:27px; padding:0; border:0; border-radius:7px; background:rgba(40,67,88,.11); color:#36546a; font-size:18px; font-weight:900; line-height:1; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:40; } .watergame-close:hover{ background:rgba(40,67,88,.19); } .watergame-spectator-line{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; text-align:left !important; } .watergame-spectator-message{ flex:1 1 auto; min-width:0; line-height:1.4; } .watergame-watch-btn{ flex:0 0 auto; min-height:31px; padding:0 12px; border:0; border-radius:8px; background:#2689c7; color:#fff; font-size:11px; font-weight:900; cursor:pointer; white-space:nowrap; } .watergame-watch-btn.is-watching{ background:#536b7c; } .watergame-watch-btn:disabled{ opacity:.52; cursor:default; } @media(max-width:300px){ .watergame-head{ padding-right:25px; } .watergame-close{ top:-2px; right:-2px; width:22px; height:22px; border-radius:6px; font-size:15px; } .watergame-spectator-line{ gap:5px; padding:6px !important; } .watergame-spectator-message{ font-size:8px; } .watergame-watch-btn{ min-height:26px; padding:0 7px; border-radius:6px; font-size:8px; } } /* ========================================================= /call - 複数通話部屋・1部屋最大10人 WebRTC ボイスチャット（通常版のみ） ========================================================= */ .voice-call-card{ margin:8px 0; padding:10px; border:1px solid rgba(125,211,252,.30); border-radius:12px; background:rgba(14,30,48,.94); color:#eef9ff; box-shadow:0 8px 24px rgba(0,0,0,.18); } body.local-light .voice-call-card{ background:#f4fbff; color:#152638; border-color:#b9dced; } .voice-call-card.is-ended{opacity:.68} .voice-call-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:900; font-size:13px; } .voice-call-card-meta{ margin-top:5px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#a9bfd0; font-size:10px; } body.local-light .voice-call-card-meta{color:#607486} .voice-call-join{ width:100%; min-height:34px; margin-top:8px; border:0; border-radius:9px; background:#2588c4; color:#fff; font-weight:900; cursor:pointer; } .voice-call-join:disabled{ opacity:.52; cursor:default; } .voice-call-backdrop{ position:fixed; inset:0; z-index:15050; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(4,10,18,.56); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .voice-call-modal{ width:min(92vw,380px); max-height:min(86vh,560px); overflow:auto; border:1px solid rgba(125,211,252,.32); border-radius:20px; background:linear-gradient(180deg,#12283b,#0c1b2a); color:#f5fbff; box-shadow:0 24px 80px rgba(0,0,0,.48); padding:14px; } body.local-light .voice-call-modal{ background:linear-gradient(180deg,#f8fdff,#eaf7ff); color:#152638; border-color:#b9dced; } .voice-call-top{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:50px; padding:0 34px; text-align:center; } .voice-call-title{ font-size:16px; font-weight:1000; letter-spacing:.01em; } .voice-call-countdown{ margin-top:3px; font-size:11px; opacity:.72; font-weight:800; } .voice-call-x{ position:absolute; top:-3px; right:-3px; width:30px; height:30px; border:0; border-radius:9px; background:rgba(255,255,255,.10); color:inherit; font-size:20px; font-weight:900; cursor:pointer; } body.local-light .voice-call-x{background:rgba(30,70,100,.09)} .voice-call-users{ display:flex; flex-direction:column; gap:7px; margin:12px 0; } .voice-call-user{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.065); font-size:12px; font-weight:850; } body.local-light .voice-call-user{background:rgba(50,120,160,.08)} .voice-call-user-state{ flex:0 0 auto; font-size:15px; } .voice-call-controls{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; } .voice-call-control{ min-height:70px; border:0; border-radius:14px; background:rgba(255,255,255,.09); color:inherit; cursor:pointer; font-weight:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } body.local-light .voice-call-control{background:rgba(40,100,140,.09)} .voice-call-control .ico{font-size:23px;line-height:1} .voice-call-control .lbl{font-size:10px} .voice-call-control.is-off{ background:rgba(245,80,80,.19); } .voice-call-control.leave{ background:rgba(225,56,75,.84); color:#fff; } .voice-call-ended{ display:none; margin-top:10px; padding:9px; border-radius:10px; text-align:center; font-weight:900; background:rgba(255,255,255,.08); } .voice-call-modal.is-ended .voice-call-ended{display:block} .voice-call-modal.is-ended .voice-call-controls{opacity:.42;pointer-events:none} .voice-call-remote-audio{ position:absolute!important; width:1px!important; height:1px!important; opacity:.001!important; pointer-events:none!important; } @media(max-width:420px){ .voice-call-modal{ width:min(94vw,360px); border-radius:17px; padding:12px; } .voice-call-control{min-height:64px} } /* ========================================================= /arasi — この端末の表示履歴から発言状況を表示 ========================================================= */ .arasi-user-info{ min-width:0; display:flex; flex-direction:column; gap:2px; } .arasi-user-name{ min-width:0; font-weight:900; overflow-wrap:anywhere; } .arasi-user-stats{ display:flex; flex-wrap:wrap; gap:3px 8px; color:var(--muted); font-size:10px; line-height:1.35; font-weight:700; } .arasi-user-stats span{ white-space:nowrap; } .arasi-user-stats .arasi-recent-hot{ color:#f59e0b; font-weight:900; } body.local-light .arasi-user-name{ color:#111!important; } body.local-light .arasi-user-stats{ color:#555!important; } body.local-light .arasi-user-stats .arasi-recent-hot{ color:#a85b00!important; } @media(max-width:430px){ .arasi-user-stats{ font-size:9px; gap:2px 6px; } } /* ========================================================= Avatar only — existing room/name UI is intentionally kept. ========================================================= */ .room-avatar-btn{ position:relative; flex:0 0 auto; width:34px; height:34px; padding:0!important; border-radius:50%!important; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#23324a!important; color:#fff!important; border:1px solid #3b4b65!important; cursor:pointer; appearance:none; -webkit-appearance:none; } .room-avatar-btn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; } .room-avatar-fallback{ font-size:13px; font-weight:1000; line-height:1; } body.local-light .room-avatar-btn{ background:#eef3f7!important; color:#253747!important; border-color:#9ba9b5!important; } .avatar-editor-backdrop{ position:fixed; inset:0; z-index:11450; display:none; align-items:center; justify-content:center; padding:14px; background:rgba(0,0,0,.54); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .avatar-editor-backdrop.open{display:flex} .avatar-editor{ width:min(92vw,340px); padding:13px; border:1px solid #2f3c55; border-radius:16px; background:#111827; color:#eef2f7; box-shadow:0 18px 60px rgba(0,0,0,.48); } .avatar-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; } .avatar-editor-title{ font-size:14px; font-weight:1000; } .avatar-editor-close{ width:30px; height:30px; padding:0!important; border-radius:9px!important; border:1px solid #34445e!important; background:#17243a!important; color:#eef4ff!important; font-size:19px; line-height:1; cursor:pointer; appearance:none; -webkit-appearance:none; } .avatar-editor-body{ display:flex; align-items:center; gap:12px; padding:11px; border:1px solid #29364d; border-radius:13px; background:#162033; } .avatar-editor-preview{ position:relative; flex:0 0 auto; width:72px; height:72px; padding:0!important; border-radius:50%!important; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid #49627e!important; background:#243652!important; color:#fff!important; cursor:pointer; appearance:none; -webkit-appearance:none; } .avatar-editor-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; } .avatar-editor-preview span{ font-size:26px; line-height:1; font-weight:1000; } .avatar-editor-copy{ min-width:0; flex:1; } .avatar-editor-copy strong{ display:block; margin-bottom:3px; font-size:12px; } .avatar-editor-copy small{ display:block; color:#9aa4b2; font-size:9px; line-height:1.45; } .avatar-editor-actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; } .avatar-editor-actions button{ min-height:35px; border-radius:10px!important; border:1px solid #34445e!important; background:#17243a!important; color:#eef4ff!important; font-weight:900; cursor:pointer; appearance:none; -webkit-appearance:none; } #avatarChooseBtn{ background:#245fa8!important; border-color:#3976c4!important; color:#fff!important; } body.local-light .avatar-editor{ background:#fff!important; color:#111!important; border-color:#aab5bf!important; } body.local-light .avatar-editor-body{ background:#f4f7fa!important; border-color:#c6d0d9!important; } body.local-light .avatar-editor-copy small{color:#555!important} body.local-light .avatar-editor-close, body.local-light .avatar-editor-actions button{ background:#fff!important; color:#111!important; border-color:#7e8994!important; } body.local-light #avatarChooseBtn{ background:#2765ad!important; color:#fff!important; border-color:#2765ad!important; } .message.with-avatar{ max-width:84%; display:flex!important; flex-direction:row!important; align-items:flex-end!important; gap:7px!important; } .message.mine.with-avatar{ align-self:flex-end; flex-direction:row-reverse!important; } .message.with-avatar .message-content{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; } .message.mine.with-avatar .message-content{ align-items:flex-end; } .message-avatar{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); background:#263650; color:#fff; font-size:11px; font-weight:1000; line-height:1; user-select:none; -webkit-user-select:none; } .message-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .message-avatar.ai-comment-avatar{ background:linear-gradient(145deg,#dffcff,#82e9ff)!important; border-color:#42cce9!important; box-shadow:0 0 0 1px rgba(44,186,218,.16); } .message-avatar.ai-comment-avatar img{ object-position:50% 60%; transform:scale(1.2); transform-origin:center; } body.local-light .message-avatar{ background:#edf3f8!important; color:#273849!important; border-color:#b9c6d0!important; } @media(max-width:430px){ .room-avatar-btn{width:31px;height:31px} .message.with-avatar{max-width:91%;gap:5px!important} .message-avatar{width:28px;height:28px;font-size:10px} .avatar-editor{width:min(94vw,330px)} } /* ========================================================= Compact identity header + settings inside thumbnail modal ========================================================= */ header.profile-compact-header{ padding:9px 14px!important; display:flex!important; align-items:center!important; flex-wrap:nowrap!important; gap:9px!important; } .profile-compact-header .room{ width:100%; margin:0!important; min-width:0; display:flex; align-items:center; gap:8px; } .header-identity{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; line-height:1.25; } .header-room-line{ min-width:0; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; } .header-room-list-btn{ min-width:0; max-width:100%; padding:2px 5px!important; display:flex; align-items:center; gap:4px; border:0!important; border-radius:6px!important; background:transparent!important; color:inherit!important; font:inherit; line-height:1.2; cursor:pointer; appearance:none; -webkit-appearance:none; } .header-room-list-btn:hover{background:rgba(255,255,255,.07)!important} .header-room-list-btn:focus-visible{ outline:2px solid rgba(94,164,255,.72); outline-offset:1px; } .header-room-line code{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c7d2fe; font-family:inherit; font-weight:900; } .header-handle-status{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:13px; font-weight:900; } body.local-light .header-room-line code{color:#245a91!important} body.local-light .header-room-list-btn{ background:transparent!important; color:inherit!important; border:0!important; } body.local-light .header-room-list-btn:hover{background:rgba(36,90,145,.08)!important} body.local-light .header-handle-status{color:#111!important} .avatar-editor-profile-fields{ display:flex; flex-direction:column; gap:9px; margin-top:11px; } .avatar-editor-field{ display:flex; flex-direction:column; gap:4px; } .avatar-editor-field-label{ margin-left:2px; color:#9aa4b2; font-size:10px; font-weight:800; } .avatar-editor-field-row{ display:flex; align-items:center; gap:6px; } .avatar-editor-field-row input{ min-width:0; flex:1; height:37px; padding:0 9px; border:1px solid #34445e; border-radius:10px; background:#0e1625; color:#eef2f7; outline:none; } .avatar-editor-field-row button{ flex:0 0 auto; height:37px; padding:0 10px!important; border:1px solid #34445e!important; border-radius:10px!important; background:#17243a!important; color:#eef4ff!important; font-size:11px; font-weight:900; cursor:pointer; appearance:none; -webkit-appearance:none; } .avatar-editor-field-row #saveNameBtn{ min-width:78px; background:#245fa8!important; border-color:#3976c4!important; color:#fff!important; } .avatar-editor-field-row #goBtn, .avatar-editor-field-row #shareBtn{ width:39px; padding:0!important; font-size:16px; } .avatar-editor-field-row #shareBtn{ display:inline-grid; place-items:center; } .avatar-editor-field-row #shareBtn .room-copy-icon{ width:18px; height:18px; display:block; } .avatar-editor-notification-row{ display:flex; align-items:center; gap:8px; min-width:0; } .avatar-editor-notification-row #notificationToggleBtn{ flex:0 0 auto; min-width:122px; height:37px; padding:0 11px; border:1px solid #3976c4; border-radius:10px; background:#245fa8; color:#fff; font-size:11px; font-weight:900; cursor:pointer; appearance:none; -webkit-appearance:none; } .avatar-editor-notification-row #notificationToggleBtn.is-on{ background:#177245; border-color:#28935d; } .avatar-editor-notification-row #notificationToggleBtn:disabled{ cursor:default; opacity:.55; } .avatar-editor-notification-hint{ min-width:0; color:#8f9aac; font-size:9px; line-height:1.45; } body.local-light .avatar-editor-notification-row #notificationToggleBtn{ background:#2765ad; color:#fff; border-color:#2765ad; } body.local-light .avatar-editor-notification-row #notificationToggleBtn.is-on{ background:#177245!important; border-color:#177245!important; color:#fff!important; } body.local-light .avatar-editor-notification-hint{color:#555!important} body.local-light .avatar-editor-field-label{color:#555!important} body.local-light .avatar-editor-field-row input{ background:#fff!important; color:#111!important; border-color:#8996a2!important; } body.local-light .avatar-editor-field-row button{ background:#fff!important; color:#111!important; border-color:#7e8994!important; } body.local-light .avatar-editor-field-row #saveNameBtn{ background:#2765ad!important; color:#fff!important; border-color:#2765ad!important; } @media(max-width:430px){ header.profile-compact-header{padding:7px 9px!important} .header-room-line{font-size:10px} .header-handle-status{font-size:12px} .avatar-editor-field-row #saveNameBtn{min-width:68px;font-size:10px} } .activity-join-card{align-self:center;width:min(100%,620px);padding:11px 12px;border:1px solid #30405b;border-radius:13px;background:#172033;color:var(--text);box-shadow:0 7px 20px rgba(0,0,0,.17)} .activity-join-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:1000} .activity-join-time{flex:0 0 auto;color:#a5b4fc;font-size:10px;font-weight:900} .activity-join-desc{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.45} .activity-join-people{margin-top:6px;font-size:10px;font-weight:800;overflow-wrap:anywhere} .activity-join-btn{width:100%;min-height:34px;margin-top:8px;border:1px solid #3b6aa0!important;border-radius:9px!important;background:#2367ad!important;color:#fff!important;font-size:11px;font-weight:1000;cursor:pointer} .activity-join-btn.is-joined{background:#42566e!important;border-color:#596e86!important} .activity-join-btn:disabled{opacity:.5;cursor:default} body.local-light .activity-join-card{background:#fff!important;color:#111!important;border-color:#aab7c4!important} body.local-light .activity-join-desc{color:#555!important} body.local-light .activity-join-time{color:#315f9d!important} body.local-light .activity-join-people{color:#222!important} body.local-light .activity-join-btn{background:#2765ad!important;color:#fff!important;border-color:#2765ad!important} .arasi-user-main{min-width:0;display:flex;align-items:center;gap:8px} .arasi-user-avatar{width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:10px!important} /* ========================================================= 投稿通報 / 画像投稿ルール確認（通常版のみ） ========================================================= */ /* AI翻訳: 通報とは反対（左）に表示 */ .message-action-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-top:3px; min-height:12px; } .message-action-row .message-report-action{margin:0 2px 0 auto!important} .message-translate-action{ appearance:none; -webkit-appearance:none; display:block; width:max-content; margin:0 auto 0 2px; padding:1px 2px; border:0; background:transparent; color:#6f8fe8; font-size:9px; line-height:1.2; font-weight:800; text-decoration:underline; text-underline-offset:2px; cursor:pointer; opacity:.82; } .message-translate-action:hover{opacity:1} .message-translate-action:focus-visible{ outline:2px solid rgba(111,143,232,.42); outline-offset:2px; border-radius:3px; } .message-translation-result{ margin-top:5px; padding:7px 9px; border:1px solid rgba(111,143,232,.30); border-radius:10px; background:rgba(93,120,194,.10); color:var(--text); overflow-wrap:anywhere; } .message-translation-result-label{ margin-bottom:3px; color:#91a9ec; font-size:8px; line-height:1.2; font-weight:900; letter-spacing:.02em; } .message-translation-result-text{ white-space:pre-wrap; font-size:11px; line-height:1.55; } body.local-light .message-translate-action{color:#3f64b6!important} body.local-light .message-translation-result{ background:#f3f6ff!important; border-color:#cbd7f6!important; color:#111!important; } body.local-light .message-translation-result-label{color:#4668b5!important} .message-translation-backdrop{ position:fixed; inset:0; z-index:2147483300; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(7,12,22,.58); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .message-translation-backdrop.open{display:flex} .message-translation-card{ width:min(92vw,460px); max-height:min(86vh,620px); overflow:auto; box-sizing:border-box; border:1px solid rgba(160,180,220,.28); border-radius:18px; padding:15px; background:linear-gradient(145deg,rgba(28,39,58,.91),rgba(18,27,43,.86)); color:#f4f7fb; box-shadow:0 22px 70px rgba(0,0,0,.40); backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%); } .message-translation-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .message-translation-head strong{font-size:15px;font-weight:1000} .message-translation-close{ width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);color:inherit;font-size:20px;line-height:1;cursor:pointer; } .message-translation-original{ margin-top:11px; max-height:120px; overflow:auto; padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10); white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; line-height:1.55; } .message-translation-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px} .message-translation-field{display:grid;gap:5px;min-width:0} .message-translation-field span{font-size:9px;font-weight:900;color:#b7c5dd} .message-translation-field select{ width:100%;min-width:0;height:38px;padding:0 9px;border-radius:10px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff; font-size:11px;font-weight:800; } .message-translation-status{min-height:18px;margin-top:9px;font-size:9px;line-height:1.45;color:#b8c9ef} .message-translation-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .message-translation-actions button{ min-height:39px;border-radius:10px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);color:#fff;font-size:11px;font-weight:900;cursor:pointer; } .message-translation-actions .message-translation-run{background:#3971cf;border-color:#4d83dd;color:#fff} .message-translation-actions button:disabled{opacity:.55;cursor:default} body.local-light .message-translation-card{background:rgba(255,255,255,.94)!important;color:#111!important;border-color:#cad3df!important} body.local-light .message-translation-close{background:#f2f4f7!important;color:#111!important;border-color:#cbd3dc!important} body.local-light .message-translation-original{background:#f5f7fa!important;color:#111!important;border-color:#d8dee7!important} body.local-light .message-translation-field span{color:#555!important} body.local-light .message-translation-field select{background:#fff!important;color:#111!important;border-color:#b9c3ce!important} body.local-light .message-translation-status{color:#4565a7!important} body.local-light .message-translation-actions button{background:#eef1f5!important;color:#111!important;border-color:#b9c3ce!important} body.local-light .message-translation-actions .message-translation-run{background:#2765ad!important;color:#fff!important;border-color:#2765ad!important} .message-report-action{ appearance:none; -webkit-appearance:none; display:block; width:max-content; margin:3px 2px 0 auto; padding:1px 2px; border:0; background:transparent; color:#ef6b6b; font-size:9px; line-height:1.2; font-weight:800; text-decoration:underline; text-underline-offset:2px; cursor:pointer; opacity:.78; } .message-report-action:hover{opacity:1} .message-report-action:focus-visible{ outline:2px solid rgba(239,107,107,.45); outline-offset:2px; border-radius:3px; } .moderation-confirm-backdrop{ position:fixed; inset:0; z-index:2147483100; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.62); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .moderation-confirm-backdrop.open{display:flex} .moderation-confirm-card{ width:min(92vw,430px); max-height:min(82vh,560px); overflow:auto; box-sizing:border-box; border:1px solid #3a485e; border-radius:14px; padding:16px; background:#172033; color:#f3f6fb; box-shadow:0 18px 50px rgba(0,0,0,.42); } .moderation-confirm-title{ margin:0; font-size:15px; line-height:1.4; font-weight:1000; } .moderation-confirm-text{ margin:10px 0 0; white-space:pre-wrap; font-size:12px; line-height:1.7; color:#d4dbe7; } .moderation-confirm-note{ margin-top:10px; padding:8px 9px; border-radius:9px; background:rgba(239,107,107,.10); color:#ffc4c4; font-size:10px; line-height:1.55; } .moderation-confirm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; } .moderation-confirm-actions button{ appearance:none; -webkit-appearance:none; min-height:39px; border-radius:9px; border:1px solid #4a596d; background:#263348; color:#fff; font-size:11px; font-weight:900; cursor:pointer; } .moderation-confirm-actions .moderation-confirm-ok{ border-color:#b84d4d; background:#b83f47; } .moderation-confirm-actions .moderation-confirm-ok.upload-ok{ border-color:#3e6fa7; background:#2765ad; } body.local-light .moderation-confirm-card{ background:#fff!important; color:#111!important; border-color:#aab3bd!important; } body.local-light .moderation-confirm-text{color:#333!important} body.local-light .moderation-confirm-note{ background:#fff0f0!important; color:#8d2525!important; } body.local-light .moderation-confirm-actions button{ background:#eef1f4!important; color:#111!important; border-color:#aab3bd!important; } body.local-light .moderation-confirm-actions .moderation-confirm-ok{ background:#b83f47!important; color:#fff!important; border-color:#b83f47!important; } body.local-light .moderation-confirm-actions .moderation-confirm-ok.upload-ok{ background:#2765ad!important; color:#fff!important; border-color:#2765ad!important; } @media(max-width:430px){ .message-report-action{font-size:8px;margin-top:2px} .message-action-row{margin-top:2px} .message-translate-action{font-size:8px} .message-translation-result-text{font-size:10px} .message-translation-backdrop{padding:10px} .message-translation-card{width:min(96vw,440px);padding:13px;border-radius:15px} .message-translation-controls{grid-template-columns:1fr} .moderation-confirm-backdrop{padding:11px} .moderation-confirm-card{width:min(96vw,420px);padding:13px;border-radius:12px} .moderation-confirm-title{font-size:13px} .moderation-confirm-text{font-size:11px} .moderation-confirm-note{font-size:9px} .moderation-confirm-actions button{min-height:37px;font-size:10px} } /* ========================================================= FOR314 GLASS CHAT UI — 通常版のみ ========================================================= */ :root{ --for314-ad-safe-gap:82px; --for314-header-z:7200; --for314-title-z:7100; --for314-composer-z:7150; } html,body{ width:100%;height:100%;min-height:100%;overflow:hidden; } body{ min-height:100dvh; background: radial-gradient(circle at 20% -10%,rgba(49,93,168,.13),transparent 34%), radial-gradient(circle at 84% 20%,rgba(53,178,116,.07),transparent 28%), var(--bg); } header.profile-compact-header{ position:fixed!important; top:0;left:0;right:0; z-index:var(--for314-header-z)!important; min-height:56px; padding:calc(8px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))!important; border-bottom:1px solid rgba(255,255,255,.10)!important; background:rgba(13,17,25,.68)!important; backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:0 5px 22px rgba(0,0,0,.12); } header.profile-compact-header .room{ width:min(900px,100%)!important; margin:0 auto!important; } main>#roomTitleText{ position:fixed; z-index:var(--for314-title-z); top:calc(65px + env(safe-area-inset-top)); left:50%; width:min(860px,calc(100vw - 28px)); max-height:48px; margin:0!important; padding:8px 13px; transform:translateX(-50%); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(19,25,37,.55); color:#c8d0dc!important; font-size:11px; line-height:1.4; text-align:left; box-shadow:0 8px 28px rgba(0,0,0,.16); backdrop-filter:blur(16px) saturate(145%); -webkit-backdrop-filter:blur(16px) saturate(145%); cursor:pointer; user-select:none; -webkit-user-select:none; } main>#roomTitleText.title-expanded{ max-height:min(40dvh,260px); display:block; overflow:auto; -webkit-line-clamp:unset; user-select:text; -webkit-user-select:text; } main{ position:fixed!important; inset:0!important; z-index:1; width:100%!important; max-width:none!important; height:100dvh!important; margin:0!important; padding:0!important; overflow:hidden!important; } main>.chat{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; border:0!important; border-radius:0!important; background:transparent!important; overflow:hidden!important; box-shadow:none!important; } main .chatlog{ position:absolute!important; top:calc(121px + env(safe-area-inset-top))!important; /* 入力バーの背後までチャットを通し、ガラス越しに内容が見えるようにする */ bottom:calc(var(--for314-ad-safe-gap) + env(safe-area-inset-bottom))!important; left:50%!important; width:min(900px,100%)!important; height:auto!important; min-height:0!important; /* 最終メッセージは入力バーに隠れないよう、下側に逃げを確保 */ padding:18px 20px 104px!important; transform:translateX(-50%); overflow-y:auto!important; overflow-x:hidden!important; border:0!important; background:transparent!important; scrollbar-gutter:stable; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 8px)); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 8px)); } main .message-bubble{ border-radius:19px 19px 19px 6px; background:rgba(40,49,67,.92); box-shadow:0 3px 12px rgba(0,0,0,.08); } main .message.mine .message-bubble{ border-radius:19px 19px 6px 19px; background:#315da8; } main .image-message-bubble{border-radius:19px 19px 19px 6px} main .message.mine .image-message-bubble{border-radius:19px 19px 6px 19px} main .inputrow{ position:fixed!important; left:50%!important; right:auto!important; bottom:calc(var(--for314-ad-safe-gap) + env(safe-area-inset-bottom))!important; z-index:var(--for314-composer-z)!important; width:min(860px,calc(100vw - 24px))!important; min-height:58px; margin:0!important; padding:8px!important; transform:translateX(-50%); display:flex!important; align-items:center!important; gap:7px!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:27px!important; /* 濃い板ではなく、背後のチャットが透けてにじむガラス感 */ background:linear-gradient(135deg,rgba(25,32,45,.46),rgba(14,19,28,.34))!important; box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.035)!important; backdrop-filter:blur(13px) saturate(185%) brightness(1.04); -webkit-backdrop-filter:blur(13px) saturate(185%) brightness(1.04); } main .inputrow #msgInput{ flex:1 1 auto!important; min-width:0!important; height:42px!important; padding:0 15px!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:21px!important; outline:none!important; background:rgba(255,255,255,.055)!important; color:var(--text)!important; box-shadow:inset 0 1px 2px rgba(0,0,0,.10); } main .inputrow #msgInput::placeholder{color:rgba(220,227,239,.45)} main .inputrow #msgInput:focus{ border-color:rgba(111,157,229,.55)!important; background:rgba(255,255,255,.075)!important; box-shadow:0 0 0 3px rgba(58,108,180,.12); } main .inputrow #imageBtn, main .inputrow #commandBtn, main .inputrow #sendBtn{ flex:0 0 42px!important; width:42px!important; height:42px!important; min-width:42px!important; padding:0!important; border-radius:50%!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } main .inputrow #imageBtn{ border:1px solid rgba(255,255,255,.10)!important; background:rgba(255,255,255,.075)!important; color:#e7edf6!important; font-size:18px!important; } main .inputrow #commandBtn{ border:1px solid rgba(255,255,255,.10)!important; background:rgba(255,255,255,.075)!important; color:#e7edf6!important; font-size:0!important; } main .inputrow #commandBtn::before{ content:'/';font-size:21px;font-weight:900;line-height:1; } main .inputrow #sendBtn{ border:0!important; background:#315da8!important; box-shadow:0 5px 16px rgba(49,93,168,.34); } #chatBanNote{ position:fixed!important; left:50%!important; bottom:calc(var(--for314-ad-safe-gap) + 67px + env(safe-area-inset-bottom))!important; z-index:calc(var(--for314-composer-z) + 1)!important; width:min(720px,calc(100vw - 44px)); transform:translateX(-50%); border:1px solid rgba(255,120,145,.22)!important; border-radius:12px!important; background:rgba(53,28,36,.82)!important; backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); } body.local-light header.profile-compact-header{ background:rgba(248,250,253,.72)!important; border-bottom-color:rgba(46,62,80,.12)!important; box-shadow:0 5px 22px rgba(31,48,67,.08); } body.local-light main>#roomTitleText{ background:rgba(249,251,253,.70)!important; color:#4d5b69!important; border-color:rgba(55,70,88,.11)!important; box-shadow:0 8px 25px rgba(45,61,80,.08); } body.local-light main .inputrow{ background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(244,248,252,.38))!important; border-color:rgba(58,73,91,.16)!important; box-shadow:0 18px 42px rgba(43,61,80,.11),inset 0 1px 0 rgba(255,255,255,.72)!important; } body.local-light main .inputrow #msgInput{ background:rgba(255,255,255,.46)!important; color:#111!important; border-color:rgba(56,71,88,.14)!important; } body.local-light main .inputrow #msgInput::placeholder{color:#8b96a2} body.local-light main .inputrow #imageBtn, body.local-light main .inputrow #commandBtn{ background:rgba(255,255,255,.48)!important; color:#202a35!important; border-color:rgba(50,65,82,.14)!important; } body.local-light main .message-bubble{ background:rgba(246,248,251,.96)!important; color:#111!important; border:1px solid rgba(40,55,70,.08); } body.local-light main .message.mine .message-bubble{ background:#315da8!important;color:#fff!important;border-color:#315da8!important; } @media(max-width:680px){ :root{--for314-ad-safe-gap:76px} header.profile-compact-header{ min-height:50px; padding:calc(6px + env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) 6px max(9px,env(safe-area-inset-left))!important; } main>#roomTitleText{ top:calc(56px + env(safe-area-inset-top)); width:calc(100vw - 20px); max-height:43px; padding:7px 11px; border-radius:13px; font-size:10px; } main .chatlog{ top:calc(105px + env(safe-area-inset-top))!important; bottom:calc(var(--for314-ad-safe-gap) + env(safe-area-inset-bottom))!important; width:100%!important; padding:15px 11px 96px!important; gap:9px!important; } main .inputrow{ width:calc(100vw - 18px)!important; min-height:54px; padding:6px!important; gap:5px!important; border-radius:25px!important; } main .inputrow #msgInput{ height:41px!important; padding:0 12px!important; font-size:16px!important; } main .inputrow #imageBtn, main .inputrow #commandBtn, main .inputrow #sendBtn{ flex-basis:40px!important;width:40px!important;min-width:40px!important;height:40px!important; } #chatBanNote{ bottom:calc(var(--for314-ad-safe-gap) + 62px + env(safe-area-inset-bottom))!important; } } @media(max-width:360px){ :root{--for314-ad-safe-gap:72px} main .inputrow{width:calc(100vw - 12px)!important;gap:4px!important} main .inputrow #imageBtn, main .inputrow #commandBtn, main .inputrow #sendBtn{ flex-basis:36px!important;width:36px!important;min-width:36px!important;height:36px!important; } main .inputrow #commandBtn::before{font-size:18px} main .inputrow #imageBtn{font-size:16px!important} main .inputrow #msgInput{height:38px!important;padding:0 10px!important} } @supports not (height:100dvh){main{height:100vh!important}} /* Glass UI BGC priority fix: bgc: コマンド時はJSのinline !importantがこのtransparent指定より優先される。 未指定時は従来どおり透明のガラス背景。 */ main>.chat, main .chatlog{ transition:background-color .25s ease, background .25s ease; } /* ========================================================= Glass UI /yomiage indicator restore フローティング入力バーの左上に表示する。 ========================================================= */ .yomiage-indicator{ position:fixed!important; top:auto!important; left:max(14px,calc((100vw - 860px)/2 + 6px))!important; bottom:calc(var(--for314-ad-safe-gap) + 68px + env(safe-area-inset-bottom))!important; z-index:calc(var(--for314-composer-z) + 6)!important; transform:none!important; height:32px!important; padding:0 5px 0 9px!important; gap:6px!important; border-radius:999px!important; background:rgba(17,22,32,.80)!important; border:1px solid rgba(255,255,255,.13)!important; color:#fff!important; box-shadow:0 8px 24px rgba(0,0,0,.25)!important; backdrop-filter:blur(18px) saturate(150%)!important; -webkit-backdrop-filter:blur(18px) saturate(150%)!important; } .yomiage-indicator.active{display:flex!important} .yomiage-stop{ width:23px!important; height:23px!important; min-width:23px!important; border-radius:50%!important; background:#ef4444!important; color:#fff!important; border:0!important; font-size:14px!important; } body.local-light .yomiage-indicator{ background:rgba(250,252,255,.84)!important; color:#1d2733!important; border-color:rgba(38,52,68,.15)!important; box-shadow:0 8px 22px rgba(37,52,69,.13)!important; } @media(max-width:680px){ .yomiage-indicator{ left:14px!important; bottom:calc(var(--for314-ad-safe-gap) + 61px + env(safe-area-inset-bottom))!important; height:29px!important; padding-left:8px!important; font-size:10px!important; } .yomiage-stop{ width:21px!important; height:21px!important; min-width:21px!important; font-size:13px!important; } } @media(max-width:360px){ .yomiage-indicator{ left:10px!important; bottom:calc(var(--for314-ad-safe-gap) + 56px + env(safe-area-inset-bottom))!important; } } /* ========================================================= Glass UI — chat under floating composer チャットログを画面最下部まで伸ばし、入力バーは上に重ねるだけにする。 ========================================================= */ main .chatlog{ /* chatlog自体は画面最下部まで伸ばす。 iOS Safariではflex + padding-bottomの末尾余白が不安定なため、 下余白は ::after の実体flex itemで作る。 */ bottom:0!important; padding-bottom:12px!important; } main .chatlog::after{ content:""; display:block; flex:0 0 calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 116px ); width:100%; min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 116px ); pointer-events:none; visibility:hidden; } /* BGC使用時も一番下まで同じチャット背景が続く */ main>.chat{ background-color:inherit; } /* 入力バーのガラス感を少しだけ強化。 下には専用背景を置かず、chatlogがそのまま透ける。 */ main .inputrow{ background:rgba(17,22,32,.66)!important; backdrop-filter:blur(26px) saturate(160%)!important; -webkit-backdrop-filter:blur(26px) saturate(160%)!important; box-shadow: 0 16px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07)!important; } body.local-light main .inputrow{ background:rgba(248,250,253,.68)!important; backdrop-filter:blur(26px) saturate(150%)!important; -webkit-backdrop-filter:blur(26px) saturate(150%)!important; } @media(max-width:680px){ main .chatlog{ bottom:0!important; padding-bottom:8px!important; } main .chatlog::after{ flex-basis: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 108px ); min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 108px ); } } @media(max-width:360px){ main .chatlog::after{ flex-basis: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 100px ); min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 100px ); } } /* ========================================================= Floating composer safe-touch zone 入力バーより下は見えるが、チャットUIへのタップを通さない。 ========================================================= */ #composerLowerTouchShield{ position:fixed; left:0; right:0; bottom:0; top:100dvh; /* JSで入力バー下端へ更新 */ z-index:calc(var(--for314-composer-z) - 1); display:block; background:transparent; pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; } /* shield自体は完全透明。ガラス背面のチャット/BGC表示はそのまま見える。 */ #composerLowerTouchShield::before{ content:""; position:absolute; inset:0; background:transparent; pointer-events:none; } @supports not (height:100dvh){ #composerLowerTouchShield{top:100vh} } /* ========================================================= /tokei — 世界アナログ時計カード ========================================================= */ .world-clock-card{ align-self:center; width:min(680px,94%); padding:13px 14px 14px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(20,27,39,.78); color:var(--text); box-shadow:0 10px 28px rgba(0,0,0,.18); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); } .world-clock-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .world-clock-title{ font-size:12px; font-weight:900; letter-spacing:.02em; } .world-clock-live{ padding:2px 7px; border-radius:999px; background:rgba(66,153,225,.15); border:1px solid rgba(96,165,250,.24); color:#a9d2ff; font-size:9px; font-weight:900; } .world-clock-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; } .world-clock-item{ min-width:0; text-align:center; } .world-clock-face{ position:relative; width:min(138px,100%); aspect-ratio:1; margin:0 auto 7px; border-radius:50%; border:2px solid rgba(255,255,255,.34); background: radial-gradient(circle at center,rgba(255,255,255,.08) 0 4%,transparent 4.5%), repeating-conic-gradient( from -1.5deg, rgba(255,255,255,.55) 0deg 1.2deg, transparent 1.2deg 30deg ), radial-gradient(circle at 38% 30%,rgba(255,255,255,.10),rgba(255,255,255,.025) 56%,rgba(0,0,0,.14)); box-shadow: inset 0 0 0 6px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.16); } .world-clock-center{ position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); z-index:5; box-shadow:0 0 0 2px rgba(0,0,0,.18); } .world-clock-hand{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:999px; transform:translateX(-50%) rotate(0deg); will-change:transform; } .world-clock-hour{ width:4px; height:28%; background:#f5f7fb; z-index:2; } .world-clock-minute{ width:3px; height:37%; background:#d8dee9; z-index:3; } .world-clock-second{ width:1.5px; height:41%; background:#ff6b6b; z-index:4; } .world-clock-city{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:900; } .world-clock-time{ margin-top:1px; font-variant-numeric:tabular-nums; color:var(--muted); font-size:10px; } body.local-light .world-clock-card{ background:rgba(250,252,255,.82); color:#111; border-color:rgba(38,53,70,.14); box-shadow:0 9px 24px rgba(35,50,67,.10); } body.local-light .world-clock-face{ border-color:rgba(34,48,64,.30); background: radial-gradient(circle at center,rgba(35,48,63,.10) 0 4%,transparent 4.5%), repeating-conic-gradient( from -1.5deg, rgba(35,48,63,.50) 0deg 1.2deg, transparent 1.2deg 30deg ), radial-gradient(circle at 38% 30%,rgba(255,255,255,.95),rgba(235,240,246,.80) 60%,rgba(212,220,230,.78)); } body.local-light .world-clock-hour{background:#17212c} body.local-light .world-clock-minute{background:#344252} body.local-light .world-clock-center{background:#17212c} body.local-light .world-clock-time{color:#5a6673} @media(max-width:680px){ .world-clock-card{ width:calc(100% - 10px); padding:10px 8px 11px; border-radius:14px; } .world-clock-grid{gap:7px} .world-clock-face{ width:min(102px,100%); margin-bottom:5px; } .world-clock-title{font-size:11px} .world-clock-city{font-size:9px} .world-clock-time{font-size:8px} } @media(max-width:300px){ .world-clock-card{ width:100%; padding:7px 5px 8px; border-radius:10px; } .world-clock-head{margin-bottom:6px} .world-clock-title{font-size:9px} .world-clock-live{font-size:7px;padding:1px 5px} .world-clock-grid{gap:3px} .world-clock-face{ width:min(58px,100%); border-width:1px; box-shadow:inset 0 0 0 3px rgba(0,0,0,.05); } .world-clock-center{width:5px;height:5px} .world-clock-hour{width:3px} .world-clock-minute{width:2px} .world-clock-second{width:1px} .world-clock-city{font-size:7px} .world-clock-time{font-size:7px} } /* ========================================================= 地震情報カード / 自動監視 ========================================================= */ .earthquake-info-card{ align-self:center; width:min(620px,94%); padding:12px 14px 13px; border:1px solid rgba(255,167,79,.28); border-radius:15px; background:rgba(43,31,24,.84); color:var(--text); box-shadow:0 10px 28px rgba(0,0,0,.18); backdrop-filter:blur(17px) saturate(140%); -webkit-backdrop-filter:blur(17px) saturate(140%); transform-origin:center; } .earthquake-info-card.is-quake-shaking{ animation:earthquakeCardShake .68s cubic-bezier(.36,.07,.19,.97); } @keyframes earthquakeCardShake{ 0%,100%{transform:translate3d(0,0,0) rotate(0)} 12%{transform:translate3d(-7px,1px,0) rotate(-.7deg)} 24%{transform:translate3d(7px,-1px,0) rotate(.7deg)} 36%{transform:translate3d(-6px,0,0) rotate(-.5deg)} 48%{transform:translate3d(6px,1px,0) rotate(.5deg)} 60%{transform:translate3d(-4px,-1px,0) rotate(-.35deg)} 72%{transform:translate3d(4px,0,0) rotate(.35deg)} 84%{transform:translate3d(-2px,0,0) rotate(-.2deg)} } .earthquake-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; } .earthquake-card-title{ font-size:12px; font-weight:1000; letter-spacing:.02em; } .earthquake-card-badge{ flex:0 0 auto; padding:2px 7px; border-radius:999px; border:1px solid rgba(255,174,91,.30); background:rgba(255,146,51,.14); color:#ffc58d; font-size:8px; font-weight:1000; } .earthquake-card-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; } .earthquake-card-cell{ min-width:0; } .earthquake-card-label{ display:block; color:var(--muted); font-size:8px; line-height:1.2; } .earthquake-card-value{ display:block; margin-top:2px; overflow-wrap:anywhere; font-size:11px; font-weight:800; line-height:1.35; } .earthquake-card-scale{ color:#ffca8a; font-size:14px; font-weight:1000; } .earthquake-card-source{ margin-top:8px; color:var(--muted); font-size:7px; text-align:right; } body.local-light .earthquake-info-card{ background:rgba(255,249,241,.92); color:#202020; border-color:rgba(190,104,28,.22); box-shadow:0 8px 24px rgba(59,41,25,.10); } body.local-light .earthquake-card-badge{ background:rgba(224,113,15,.10); color:#a95308; border-color:rgba(190,104,28,.20); } body.local-light .earthquake-card-scale{color:#a84f06} body.local-light .earthquake-card-label, body.local-light .earthquake-card-source{color:#70665c} @media(max-width:680px){ .earthquake-info-card{ width:calc(100% - 10px); padding:10px 11px 11px; border-radius:13px; } .earthquake-card-title{font-size:11px} .earthquake-card-value{font-size:10px} .earthquake-card-scale{font-size:13px} } @media(max-width:300px){ .earthquake-info-card{ width:100%; padding:7px 7px 8px; border-radius:9px; } .earthquake-card-head{margin-bottom:6px} .earthquake-card-title{font-size:8px} .earthquake-card-badge{font-size:6px;padding:1px 4px} .earthquake-card-grid{gap:4px 6px} .earthquake-card-label{font-size:6px} .earthquake-card-value{font-size:7px} .earthquake-card-scale{font-size:9px} .earthquake-card-source{font-size:6px;margin-top:5px} } /* ========================================================= /kurohige — 黒ひげ危機一発 10秒ロビー → 参加者だけキーボード → ターン制 ========================================================= */ .kurohige-lobby-card, .kurohige-game-card{ align-self:center; width:min(700px,94%); border:1px solid rgba(255,255,255,.13); border-radius:17px; background:rgba(19,25,37,.82); color:var(--text); box-shadow:0 12px 32px rgba(0,0,0,.22); backdrop-filter:blur(19px) saturate(145%); -webkit-backdrop-filter:blur(19px) saturate(145%); overflow:hidden; } .kurohige-lobby-card{padding:13px 14px 14px} .kurohige-game-card{padding:13px 14px 14px} .kurohige-head, .kurohige-lobby-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:1000; } .kurohige-lobby-time, .kurohige-round{ flex:0 0 auto; padding:2px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); color:var(--muted); font-size:8px; font-weight:900; } .kurohige-lobby-desc{ margin-top:7px; color:var(--muted); font-size:9px; line-height:1.45; } .kurohige-lobby-members, .kurohige-player-chips, .kurohige-used-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; } .kurohige-lobby-members{min-height:25px} .kurohige-chip{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); font-size:8px; } .kurohige-chip.is-turn{ border-color:rgba(48,209,88,.40); background:rgba(48,209,88,.13); color:#a9f7bb; } .kurohige-chip.is-me{ box-shadow:inset 0 0 0 1px rgba(96,165,250,.34); } .kurohige-chip.is-spectator{ opacity:.48; text-decoration:line-through; } .kurohige-lobby-join{ width:100%; min-height:36px; margin-top:9px; border:1px solid rgba(96,165,250,.30); border-radius:11px; background:rgba(59,130,246,.17); color:#dcecff; font-size:10px; font-weight:1000; cursor:pointer; } .kurohige-lobby-join.is-joined{ border-color:rgba(48,209,88,.35); background:rgba(48,209,88,.15); color:#c9ffd7; } .kurohige-lobby-join:disabled{opacity:.45;cursor:default} .kurohige-status{ margin-top:8px; min-height:21px; text-align:center; font-size:12px; font-weight:1000; line-height:1.4; } .kurohige-status.is-mine{color:#72e991} .kurohige-status.is-out{color:#ff7188} .kurohige-substatus{ min-height:16px; margin-top:2px; text-align:center; color:var(--muted); font-size:8px; } .kurohige-keyboard{ margin-top:11px; display:grid; gap:7px; } .kurohige-key-row{ display:flex; justify-content:center; gap:7px; flex-wrap:nowrap; } .kurohige-key{ flex:1 1 0; max-width:52px; min-width:0; min-height:43px; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.07); color:var(--text); box-shadow:0 5px 15px rgba(0,0,0,.17); font-size:12px; font-weight:1000; cursor:pointer; user-select:none; text-transform:uppercase; } .kurohige-key:not(:disabled):active{ transform:translateY(1px) scale(.985); } .kurohige-key.is-used{ opacity:.24; box-shadow:none; } .kurohige-key:disabled{ cursor:default; opacity:.18; box-shadow:none; } .kurohige-used-title{ margin-top:9px; color:var(--muted); font-size:7px; font-weight:900; } .kurohige-used-chips .kurohige-chip{ min-width:22px; padding:3px 5px; text-align:center; } .kurohige-spectator{ margin-top:10px; padding:8px; border:1px dashed rgba(255,255,255,.13); border-radius:10px; color:var(--muted); text-align:center; font-size:9px; } .kurohige-controller-end{ flex:0 0 auto; width:27px; height:27px; min-width:27px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.06); color:var(--muted); font-size:12px; cursor:pointer; } .kurohige-result-line{ align-self:center; width:min(700px,94%); margin:2px 0 5px; padding:8px 10px; border:1px solid rgba(255,77,109,.25); border-radius:11px; background:rgba(90,22,38,.32); color:#ffadb9; text-align:center; font-size:9px; font-weight:900; } /* OUT演出：元HTMLのスクリーンシェイク + RGB/走査線系を軽量化して統合 */ @keyframes kurohigeScreenShake{ 0%,100%{transform:translate3d(0,0,0) rotate(0)} 10%{transform:translate3d(-4px,1px,0) rotate(-.35deg)} 20%{transform:translate3d(4px,-1px,0) rotate(.35deg)} 30%{transform:translate3d(-5px,-2px,0) rotate(-.45deg)} 40%{transform:translate3d(5px,2px,0) rotate(.40deg)} 50%{transform:translate3d(-4px,3px,0) rotate(-.30deg)} 60%{transform:translate3d(4px,-3px,0) rotate(.30deg)} 70%{transform:translate3d(-3px,4px,0) rotate(-.20deg)} 80%{transform:translate3d(3px,-4px,0) rotate(.20deg)} 90%{transform:translate3d(-3px,2px,0) rotate(-.30deg)} } body.kurohige-out-shake main, body.kurohige-out-shake header.profile-compact-header, body.kurohige-out-shake .kurohige-game-card{ animation:kurohigeScreenShake .105s infinite; } #kurohigeGlitchOverlay{ position:fixed; inset:0; z-index:2147483644; pointer-events:none; opacity:0; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.11) 0 1px, transparent 2px 7px ), radial-gradient(circle at 25% 70%,rgba(255,0,75,.18),transparent 48%), radial-gradient(circle at 78% 35%,rgba(0,170,255,.18),transparent 50%); mix-blend-mode:screen; } #kurohigeGlitchOverlay.is-showing{ animation:kurohigeGlitchFlash 2.7s ease-out forwards; } @keyframes kurohigeGlitchFlash{ 0%{opacity:0;filter:hue-rotate(0deg) saturate(1)} 8%{opacity:.92} 18%{opacity:.22} 28%{opacity:.88;filter:hue-rotate(80deg) saturate(2.3)} 42%{opacity:.30} 58%{opacity:.83;filter:hue-rotate(175deg) saturate(2.7)} 74%{opacity:.18} 88%{opacity:.58;filter:hue-rotate(270deg) saturate(2.1)} 100%{opacity:0;filter:hue-rotate(340deg) saturate(1)} } body.local-light .kurohige-lobby-card, body.local-light .kurohige-game-card{ background:rgba(250,252,255,.90); color:#18222e; border-color:rgba(38,53,70,.14); box-shadow:0 10px 26px rgba(37,52,69,.11); } body.local-light .kurohige-chip, body.local-light .kurohige-lobby-time, body.local-light .kurohige-round{ background:rgba(35,48,63,.04); border-color:rgba(35,48,63,.12); } body.local-light .kurohige-key{ background:rgba(35,48,63,.055); color:#18222e; border-color:rgba(35,48,63,.14); box-shadow:0 4px 12px rgba(35,48,63,.08); } @media(max-width:680px){ .kurohige-lobby-card, .kurohige-game-card{ width:calc(100% - 10px); padding:10px 9px 11px; border-radius:14px; } .kurohige-keyboard{gap:5px} .kurohige-key-row{gap:5px} .kurohige-key{ max-width:43px; min-height:39px; border-radius:10px; font-size:11px; } .kurohige-status{font-size:11px} } /* ========================================================= /kurohige FULLSCREEN MODE 参加受付はチャット内、ゲーム開始後だけ全画面。 PC / iPhone / Android / 小画面すべてで26キーを収める。 ========================================================= */ body.kurohige-fullscreen-open{ overflow:hidden!important; } .kurohige-game-card{ position:fixed!important; inset:0!important; z-index:2147483600!important; width:100vw!important; max-width:none!important; height:100dvh!important; max-height:none!important; margin:0!important; padding: calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; border:0!important; border-radius:0!important; background: radial-gradient(circle at 50% -15%,rgba(38,62,111,.42),transparent 48%), rgba(10,14,23,.965)!important; box-shadow:none!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; justify-content:flex-start!important; backdrop-filter:blur(24px) saturate(150%)!important; -webkit-backdrop-filter:blur(24px) saturate(150%)!important; } body.local-light .kurohige-game-card{ background: radial-gradient(circle at 50% -15%,rgba(172,202,255,.62),transparent 48%), rgba(246,249,255,.975)!important; } .kurohige-game-card .kurohige-head{ flex:0 0 auto; min-height:38px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); } body.local-light .kurohige-game-card .kurohige-head{ border-bottom-color:rgba(35,48,63,.10); } .kurohige-game-card .kurohige-head>span:first-child{ font-size:clamp(13px,2vw,18px); } .kurohige-game-card .kurohige-status{ flex:0 0 auto; min-height:24px; margin-top:8px; font-size:clamp(15px,2.5vw,22px); } .kurohige-game-card .kurohige-substatus{ flex:0 0 auto; min-height:18px; margin-top:2px; font-size:clamp(10px,1.6vw,13px); } .kurohige-game-card .kurohige-player-chips{ flex:0 0 auto; justify-content:center; margin-top:7px; max-height:72px; overflow:auto; scrollbar-width:thin; } .kurohige-game-card .kurohige-chip{ font-size:clamp(8px,1.3vw,11px); padding:4px 8px; } .kurohige-game-card .kurohige-keyboard{ flex:1 1 auto; min-height:0; width:min(980px,100%); margin:clamp(8px,2vh,18px) auto 0; display:flex; flex-direction:column; justify-content:center; gap:clamp(5px,1.4vh,11px); overflow:hidden; } .kurohige-game-card .kurohige-key-row{ flex:1 1 0; min-height:0; display:grid!important; gap:clamp(3px,.8vw,8px)!important; width:100%; margin:0 auto; align-items:stretch; justify-content:center; } .kurohige-game-card .kurohige-key-row:nth-child(1){ grid-template-columns:repeat(10,minmax(0,1fr)); width:100%; } .kurohige-game-card .kurohige-key-row:nth-child(2){ grid-template-columns:repeat(9,minmax(0,1fr)); width:92%; } .kurohige-game-card .kurohige-key-row:nth-child(3){ grid-template-columns:repeat(7,minmax(0,1fr)); width:76%; } .kurohige-game-card .kurohige-key{ width:100%!important; max-width:none!important; height:100%!important; min-height:0!important; padding:0!important; border-radius:clamp(7px,1.5vw,14px)!important; font-size:clamp(13px,3vw,26px)!important; line-height:1!important; display:flex!important; align-items:center!important; justify-content:center!important; touch-action:manipulation; } .kurohige-game-card .kurohige-used-title{ flex:0 0 auto; margin-top:8px; text-align:center; font-size:9px; } .kurohige-game-card .kurohige-used-chips{ flex:0 0 auto; justify-content:center; margin-top:5px; max-height:48px; overflow:auto; } .kurohige-game-card .kurohige-spectator{ flex:0 0 auto; margin:8px auto 0; width:min(680px,100%); } .kurohige-game-card .kurohige-controller-end{ width:34px; height:34px; min-width:34px; font-size:16px; display:inline-grid; place-items:center; } /* 高さが厳しいスマホ横向き / 小型端末 */ @media(max-height:650px){ .kurohige-game-card{ padding: calc(6px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important; } .kurohige-game-card .kurohige-head{min-height:30px;padding-bottom:3px} .kurohige-game-card .kurohige-status{margin-top:4px;min-height:20px} .kurohige-game-card .kurohige-substatus{min-height:14px} .kurohige-game-card .kurohige-player-chips{ margin-top:3px; max-height:40px; } .kurohige-game-card .kurohige-keyboard{ margin-top:4px; gap:4px; } .kurohige-game-card .kurohige-used-title{margin-top:3px} .kurohige-game-card .kurohige-used-chips{ margin-top:2px; max-height:27px; } .kurohige-game-card .kurohige-spectator{margin-top:3px;padding:4px} } /* かなり狭いスマホ */ @media(max-width:420px){ .kurohige-game-card{ padding: calc(8px + env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important; } .kurohige-game-card .kurohige-player-chips{ max-height:58px; } .kurohige-game-card .kurohige-keyboard{ width:100%; } .kurohige-game-card .kurohige-key-row{ gap:3px!important; } .kurohige-game-card .kurohige-key-row:nth-child(2){width:96%} .kurohige-game-card .kurohige-key-row:nth-child(3){width:82%} .kurohige-game-card .kurohige-key{ border-radius:8px!important; font-size:clamp(12px,5vw,20px)!important; } } @supports not (height:100dvh){ .kurohige-game-card{height:100vh!important} } /* ========================================================= /kurohige MOBILE LOBBY FIX chatlogは縦flexなので、スマホで空き高さが少ないと lobby cardがflex-shrinkで細い帯まで潰れることがあった。 参加受付カードだけ絶対に縮ませない。 ========================================================= */ main .chatlog > .kurohige-lobby-card, .chatlog > .kurohige-lobby-card{ flex:0 0 auto!important; flex-shrink:0!important; height:auto!important; min-height:max-content!important; max-height:none!important; overflow:hidden!important; align-self:center!important; } .kurohige-lobby-card .kurohige-lobby-head, .kurohige-lobby-card .kurohige-lobby-desc, .kurohige-lobby-card .kurohige-lobby-members, .kurohige-lobby-card .kurohige-lobby-join{ flex:0 0 auto!important; } @media(max-width:680px){ main .chatlog > .kurohige-lobby-card, .chatlog > .kurohige-lobby-card{ width:calc(100% - 8px)!important; height:auto!important; min-height:148px!important; max-height:none!important; margin:6px auto!important; padding:11px 10px 12px!important; border-radius:14px!important; } .kurohige-lobby-head{ min-height:25px!important; align-items:center!important; font-size:12px!important; } .kurohige-lobby-time{ font-size:9px!important; padding:3px 7px!important; white-space:nowrap!important; } .kurohige-lobby-desc{ display:block!important; margin-top:7px!important; min-height:28px!important; font-size:10px!important; line-height:1.45!important; overflow:visible!important; } .kurohige-lobby-members{ display:flex!important; min-height:29px!important; max-height:72px!important; margin-top:7px!important; padding:1px 0!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; } .kurohige-lobby-join{ display:block!important; width:100%!important; min-height:38px!important; height:38px!important; margin-top:8px!important; font-size:11px!important; visibility:visible!important; opacity:1; } .kurohige-lobby-join:disabled{ opacity:.45!important; } } @media(max-width:360px){ main .chatlog > .kurohige-lobby-card, .chatlog > .kurohige-lobby-card{ width:calc(100% - 4px)!important; min-height:142px!important; padding:9px 8px 10px!important; } .kurohige-lobby-head{font-size:11px!important} .kurohige-lobby-desc{font-size:9px!important} .kurohige-lobby-members{max-height:62px!important} .kurohige-lobby-join{ min-height:36px!important; height:36px!important; font-size:10px!important; } } /* ========================================================= Chat composer multiline / IME fix Smartphone: Return = newline, send button = send Desktop: Enter = send, Shift+Enter = newline ========================================================= */ :root{ --for314-composer-extra-height:0px; } main .inputrow #msgInput{ box-sizing:border-box!important; height:42px!important; min-height:42px!important; max-height:112px!important; padding:9px 15px!important; line-height:1.35!important; resize:none!important; overflow-y:hidden; overscroll-behavior-y:contain; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit!important; } /* textareaが伸びた分だけ、最新メッセージ用の透明スペーサーも伸ばす */ main .chatlog::after{ flex-basis: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 116px + var(--for314-composer-extra-height) )!important; min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 116px + var(--for314-composer-extra-height) )!important; } #chatBanNote{ bottom: calc( var(--for314-ad-safe-gap) + 67px + var(--for314-composer-extra-height) + env(safe-area-inset-bottom) )!important; } .yomiage-indicator{ bottom: calc( var(--for314-ad-safe-gap) + 68px + var(--for314-composer-extra-height) + env(safe-area-inset-bottom) )!important; } @media(max-width:680px){ main .inputrow #msgInput{ height:41px!important; min-height:41px!important; max-height:100px!important; padding:9px 12px!important; font-size:16px!important; line-height:1.35!important; } main .chatlog::after{ flex-basis: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 108px + var(--for314-composer-extra-height) )!important; min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 108px + var(--for314-composer-extra-height) )!important; } #chatBanNote{ bottom: calc( var(--for314-ad-safe-gap) + 62px + var(--for314-composer-extra-height) + env(safe-area-inset-bottom) )!important; } .yomiage-indicator{ bottom: calc( var(--for314-ad-safe-gap) + 61px + var(--for314-composer-extra-height) + env(safe-area-inset-bottom) )!important; } } @media(max-width:360px){ main .inputrow #msgInput{ height:38px!important; min-height:38px!important; max-height:88px!important; padding:8px 10px!important; } main .chatlog::after{ flex-basis: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 100px + var(--for314-composer-extra-height) )!important; min-height: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 100px + var(--for314-composer-extra-height) )!important; } .yomiage-indicator{ bottom: calc( var(--for314-ad-safe-gap) + 56px + var(--for314-composer-extra-height) + env(safe-area-inset-bottom) )!important; } } /* ========================================================= iPhone caret / send-button hit-test fix ========================================================= */ /* iOS標準の長押し選択・カーソル移動・スペース長押しトラックパッドを邪魔しない */ main .inputrow #msgInput{ position:relative!important; z-index:2!important; pointer-events:auto!important; touch-action:auto!important; user-select:text!important; -webkit-user-select:text!important; -webkit-touch-callout:default!important; } /* 入力中でも各操作ボタンを必ずhit-test対象にする */ main .inputrow #imageBtn, main .inputrow #commandBtn, main .inputrow #sendBtn{ position:relative!important; z-index:3!important; pointer-events:auto!important; touch-action:manipulation!important; } /* composer全体は誤タップ防止レイヤーより必ず上 */ main .inputrow{ pointer-events:auto!important; isolation:isolate; } /* shieldはJSでmain内へ移動する。 main内なら composer-z-1 が本当に「入力バーの1段下」として効く。 */ main > #composerLowerTouchShield{ z-index:calc(var(--for314-composer-z) - 1)!important; } /* ========================================================= Chat scrollbar hide スクロール機能は残し、PCの見えるスクロールバーだけ非表示。 ========================================================= */ main .chatlog{ scrollbar-width:none!important; /* Firefox */ -ms-overflow-style:none!important; /* old Edge / IE */ } main .chatlog::-webkit-scrollbar{ width:0!important; height:0!important; display:none!important; /* Chrome / Edge / Safari */ } /* ========================================================= Custom photo icon button ========================================================= */ #imageBtn{ line-height:1!important; } #imageBtn .for314-photo-icon{ width:20px; height:20px; display:block; overflow:visible; } #imageBtn .for314-photo-icon rect, #imageBtn .for314-photo-icon path, #imageBtn .for314-photo-icon circle{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #imageBtn .for314-photo-icon-dot{ fill:currentColor; stroke:none; } @media(max-width:360px){ #imageBtn .for314-photo-icon{ width:18px; height:18px; } } /* ========================================================= /piano position — floating composer の少し上へ ========================================================= */ .piano-panel{ bottom: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 70px + var(--for314-composer-extra-height, 0px) )!important; } @media(max-width:680px){ .piano-panel{ bottom: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 64px + var(--for314-composer-extra-height, 0px) )!important; } } @media(max-width:360px){ .piano-panel{ bottom: calc( var(--for314-ad-safe-gap) + env(safe-area-inset-bottom) + 58px + var(--for314-composer-extra-height, 0px) )!important; } } /* ========================================================= qr:文字列 — QR画像 / 内容モーダル ========================================================= */ #qrContentModalBackdrop{ position:fixed; inset:0; z-index:2147483647; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.54); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } #qrContentModalBackdrop.open{display:flex} .qr-content-modal{ width:min(520px,calc(100vw - 28px)); max-height:min(76dvh,620px); overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(18,24,34,.94); color:#fff; box-shadow:0 24px 60px rgba(0,0,0,.42); } .qr-content-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .qr-content-head strong{ font-size:14px; font-weight:900; } #qrContentClose{ width:32px; height:32px; min-width:32px; padding:0; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font-size:18px; cursor:pointer; } .qr-content-text{ width:100%; max-height:330px; overflow:auto; padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.045); color:#f5f7fb; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; } .qr-content-actions{ display:flex; gap:8px; margin-top:11px; } .qr-content-actions button{ flex:1 1 0; min-height:40px; padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(255,255,255,.07); color:#fff; font-weight:900; cursor:pointer; } #qrContentCopy{ background:#315da8; border-color:#315da8; } .chat-image.is-qr-image{ image-rendering:auto; background:#fff; padding:5px; cursor:pointer; } body.local-light .qr-content-modal{ background:rgba(250,252,255,.97); color:#19232e; border-color:rgba(40,55,70,.15); } body.local-light #qrContentClose, body.local-light .qr-content-actions button{ background:rgba(35,48,63,.06); color:#19232e; border-color:rgba(35,48,63,.13); } body.local-light #qrContentCopy{ background:#315da8; color:#fff; border-color:#315da8; } body.local-light .qr-content-text{ background:rgba(35,48,63,.045); color:#19232e; border-color:rgba(35,48,63,.12); } @media(max-width:680px){ #qrContentModalBackdrop{padding:12px} .qr-content-modal{ width:calc(100vw - 20px); max-height:70dvh; padding:12px; border-radius:16px; } .qr-content-text{ max-height:260px; font-size:12px; } .qr-content-actions button{min-height:42px} } /* ========================================================= b64:文字列 — tap to decode for 5 seconds ========================================================= */ .message-bubble.b64-bubble{ cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; } .message-bubble.b64-bubble:focus-visible{ outline:2px solid rgba(120,170,255,.85); outline-offset:2px; } .b64-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:18px; margin:0 6px 3px 0; padding:1px 6px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.09); font-size:9px; font-weight:900; line-height:1.25; vertical-align:middle; letter-spacing:.05em; } .b64-message-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; } .message-bubble.b64-bubble.is-decoded{ box-shadow:inset 0 0 0 1px rgba(121,187,255,.22); } .message-bubble.b64-bubble.is-decoded .b64-badge{ background:rgba(86,155,255,.20); border-color:rgba(121,187,255,.38); } body.local-light .b64-badge{ background:rgba(35,55,80,.06); border-color:rgba(35,55,80,.14); } body.local-light .message-bubble.b64-bubble.is-decoded{ box-shadow:inset 0 0 0 1px rgba(49,93,168,.22); } body.local-light main .message:not(.mine) .message-bubble.b64-bubble{ background:#f6f8fb!important; color:#17212b!important; -webkit-text-fill-color:#17212b!important; border-color:rgba(40,55,70,.12)!important; } body.local-light main .message:not(.mine) .message-bubble.b64-bubble .b64-message-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; } body.local-light main .message:not(.mine) .message-bubble.b64-bubble .b64-badge{ background:#e6ebf1!important; color:#334155!important; -webkit-text-fill-color:#334155!important; border-color:#aeb8c4!important; } body.local-light main .message.mine .message-bubble.b64-bubble{ color:#fff!important; -webkit-text-fill-color:#fff!important; } body.local-light main .message.mine .message-bubble.b64-bubble .b64-message-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; } body.local-light main .message.mine .message-bubble.b64-bubble .b64-badge{ background:rgba(255,255,255,.14)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:rgba(255,255,255,.38)!important; } @media(max-width:680px){ .b64-badge{ min-height:17px; margin-right:5px; padding:1px 5px; font-size:8px; } } /* ========================================================= /keygame — 20秒募集 → 5英単語タイピング競争 ========================================================= */ .keygame-lobby-card{ width:min(680px,calc(100% - 8px)); margin:8px auto; padding:13px 14px 14px; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:rgba(15,20,29,.86); box-shadow:0 12px 30px rgba(0,0,0,.22); color:#edf3fb; flex:0 0 auto!important; flex-shrink:0!important; height:auto!important; min-height:max-content!important; max-height:none!important; overflow:hidden!important; align-self:center!important; } .keygame-lobby-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; font-size:13px; font-weight:900; } .keygame-lobby-time{ flex:0 0 auto; padding:4px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.07); font-size:10px; font-weight:900; white-space:nowrap; } .keygame-lobby-desc{ margin-top:7px; color:#aab7c7; font-size:11px; line-height:1.5; } .keygame-lobby-members, .keygame-player-progress{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; min-height:26px; } .keygame-chip{ display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:3px 8px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.055); font-size:10px; font-weight:800; white-space:nowrap; } .keygame-chip.is-me{ border-color:rgba(94,157,255,.45); background:rgba(70,125,215,.16); } .keygame-chip.is-finished{ border-color:rgba(96,220,145,.42); background:rgba(70,180,115,.14); } .keygame-lobby-join{ display:block; width:100%; min-height:38px; margin-top:9px; padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:#315da8; color:#fff; font-size:12px; font-weight:900; cursor:pointer; } .keygame-lobby-join.is-joined{ background:rgba(53,147,93,.88); } .keygame-lobby-join:disabled{ opacity:.48; cursor:default; } body.keygame-fullscreen-open{ overflow:hidden!important; } .keygame-game-card{ position:fixed!important; left:0!important; right:0!important; top:0; z-index:2147483590!important; width:100vw!important; height:100dvh; max-width:none!important; margin:0!important; padding: calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; border:0!important; border-radius:0!important; background: radial-gradient(circle at 50% -18%,rgba(49,93,168,.33),transparent 48%), rgba(9,13,20,.975)!important; color:#eef4fc; display:flex!important; flex-direction:column!important; overflow:auto!important; overscroll-behavior:none; -webkit-overflow-scrolling:touch; box-sizing:border-box!important; } .keygame-game-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:min(900px,100%); margin:0 auto; min-height:38px; flex:0 0 auto; } .keygame-game-title{ font-size:14px; font-weight:950; } .keygame-game-timer{ padding:5px 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.07); font-size:11px; font-weight:900; white-space:nowrap; } .keygame-main{ width:min(900px,100%); margin:auto; padding:14px 0 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; flex:1 1 auto; min-height:0; } .keygame-stage{ color:#9caabd; font-size:11px; font-weight:850; letter-spacing:.08em; } .keygame-word-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; width:100%; min-height:29px; } .keygame-word-chip{ padding:4px 8px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.045); color:#7f8c9d; font-size:10px; font-weight:900; } .keygame-word-chip.is-done{ color:#75df9a; border-color:rgba(91,219,139,.25); text-decoration:line-through; } .keygame-word-chip.is-current{ color:#fff; border-color:rgba(98,161,255,.43); background:rgba(49,93,168,.24); } .keygame-current-word{ margin:2px 0; font-size:clamp(34px,8vw,72px); line-height:1.05; font-weight:950; letter-spacing:.04em; text-align:center; word-break:break-word; } .keygame-type-input{ width:min(620px,100%); height:58px; min-height:58px; padding:0 18px; border:2px solid rgba(109,165,255,.34); border-radius:16px; outline:none; background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:24px; font-weight:900; letter-spacing:.04em; text-align:center; caret-color:#8bb9ff; box-sizing:border-box; } .keygame-type-input:focus{ border-color:rgba(111,170,255,.90); box-shadow:0 0 0 4px rgba(49,93,168,.16); background:rgba(255,255,255,.09); } .keygame-type-input.is-wrong{ border-color:rgba(255,100,120,.80); box-shadow:0 0 0 4px rgba(180,50,70,.12); } .keygame-start-input{ display:none; width:min(420px,100%); min-height:46px; padding:9px 13px; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:#315da8; color:#fff; font-size:13px; font-weight:950; cursor:pointer; } .keygame-help{ max-width:680px; color:#8795a8; font-size:10px; line-height:1.45; text-align:center; } .keygame-finish-note{ min-height:22px; color:#76e49e; font-size:13px; font-weight:950; text-align:center; } .keygame-player-progress{ width:min(760px,100%); justify-content:center; margin-top:2px; } body.local-light .keygame-lobby-card{ background:rgba(250,252,255,.96); color:#17212d; border-color:rgba(42,58,75,.12); box-shadow:0 12px 28px rgba(40,60,80,.10); } body.local-light .keygame-lobby-desc{color:#657385} body.local-light .keygame-chip, body.local-light .keygame-lobby-time{ background:rgba(35,52,72,.05); border-color:rgba(35,52,72,.12); } body.local-light .keygame-game-card{ background: radial-gradient(circle at 50% -18%,rgba(49,93,168,.13),transparent 48%), rgba(247,250,253,.985)!important; color:#17212d; } body.local-light .keygame-type-input{ background:#fff; color:#111; border-color:rgba(49,93,168,.28); } body.local-light .keygame-word-chip{ background:rgba(35,52,72,.045); border-color:rgba(35,52,72,.10); color:#778596; } body.local-light .keygame-word-chip.is-current{color:#17212d} @media(max-width:680px){ .keygame-lobby-card{ width:calc(100% - 8px)!important; min-height:154px!important; height:auto!important; max-height:none!important; margin:6px auto!important; padding:11px 10px 12px!important; border-radius:14px!important; } .keygame-lobby-head{ min-height:25px!important; font-size:12px!important; } .keygame-lobby-time{ padding:3px 7px!important; font-size:9px!important; } .keygame-lobby-desc{ display:block!important; min-height:31px!important; margin-top:6px!important; font-size:10px!important; line-height:1.45!important; overflow:visible!important; } .keygame-lobby-members{ display:flex!important; min-height:29px!important; max-height:68px!important; margin-top:7px!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; } .keygame-lobby-join{ display:block!important; visibility:visible!important; width:100%!important; min-height:38px!important; height:38px!important; margin-top:8px!important; font-size:11px!important; } .keygame-game-card{ padding: calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important; } .keygame-game-head{min-height:32px} .keygame-game-title{font-size:12px} .keygame-game-timer{font-size:9px;padding:4px 7px} .keygame-main{ gap:9px; padding:8px 0 12px; justify-content:flex-start; } .keygame-stage{font-size:9px} .keygame-current-word{ font-size:clamp(31px,12vw,54px); margin:0; } .keygame-type-input{ height:52px; min-height:52px; border-radius:14px; font-size:22px; } .keygame-start-input{ display:block; min-height:44px; font-size:12px; } .keygame-help{font-size:9px} .keygame-player-progress{ max-height:74px; overflow:auto; -webkit-overflow-scrolling:touch; } } @media(max-width:360px){ .keygame-lobby-card{ width:calc(100% - 4px)!important; min-height:148px!important; padding:9px 8px 10px!important; } .keygame-lobby-desc{font-size:9px!important} .keygame-lobby-members{max-height:60px!important} .keygame-lobby-join{ min-height:36px!important; height:36px!important; font-size:10px!important; } .keygame-current-word{font-size:34px} .keygame-type-input{ height:48px; min-height:48px; padding:0 12px; font-size:20px; } .keygame-word-chip{font-size:8px;padding:3px 6px} .keygame-chip{font-size:8px;padding:2px 6px} } @supports not (height:100dvh){ .keygame-game-card{height:100vh} } /* ========================================================= KEY GAME: 5秒 READY + "test" 入力確認 ========================================================= */ .keygame-ready-wrap{ width:min(760px,100%); margin:auto; padding:18px 0; display:flex; flex:1 1 auto; min-height:0; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:11px; } .keygame-ready-kicker{ color:#8da0b8; font-size:11px; font-weight:900; letter-spacing:.10em; } .keygame-ready-title{ font-size:clamp(28px,6vw,54px); line-height:1.12; font-weight:950; letter-spacing:.02em; } .keygame-ready-mobile{ max-width:620px; color:#aebbd0; font-size:clamp(13px,3vw,18px); line-height:1.45; font-weight:800; } .keygame-ready-count{ min-width:92px; margin:1px 0; font-size:clamp(54px,14vw,102px); line-height:.95; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:-.04em; } .keygame-practice-label{ color:#9baabd; font-size:10px; font-weight:900; letter-spacing:.05em; } .keygame-practice-word{ font-size:26px; line-height:1; font-weight:950; letter-spacing:.08em; } .keygame-practice-input{ width:min(420px,100%); height:50px; min-height:50px; padding:0 15px; border:2px solid rgba(109,165,255,.34); border-radius:14px; outline:none; background:rgba(255,255,255,.07); color:#fff; font-family:inherit; font-size:21px; font-weight:900; letter-spacing:.05em; text-align:center; caret-color:#8bb9ff; box-sizing:border-box; } .keygame-practice-input:focus{ border-color:rgba(111,170,255,.90); box-shadow:0 0 0 4px rgba(49,93,168,.16); } .keygame-practice-input.is-wrong{ border-color:rgba(255,100,120,.80); box-shadow:0 0 0 4px rgba(180,50,70,.12); } .keygame-practice-input.is-ok{ border-color:rgba(82,222,133,.90); box-shadow:0 0 0 4px rgba(58,180,100,.13); } .keygame-practice-status{ min-height:20px; color:#8a9aaf; font-size:11px; font-weight:900; } .keygame-practice-status.is-ok{color:#72e29a} .keygame-ready-note{ color:#8190a4; font-size:10px; line-height:1.45; } body.local-light .keygame-ready-kicker, body.local-light .keygame-ready-mobile, body.local-light .keygame-practice-label, body.local-light .keygame-practice-status, body.local-light .keygame-ready-note{ color:#68788b; } body.local-light .keygame-practice-input{ background:#fff; color:#111; border-color:rgba(49,93,168,.28); } body.local-light .keygame-practice-status.is-ok{color:#228b50} @media(max-width:680px){ .keygame-ready-wrap{ justify-content:flex-start; padding:clamp(15px,4.5vh,34px) 4px 10px; gap:9px; } .keygame-ready-title{ font-size:clamp(26px,8.5vw,40px); } .keygame-ready-mobile{ font-size:13px; } .keygame-ready-count{ font-size:clamp(50px,18vw,82px); } .keygame-practice-word{font-size:23px} .keygame-practice-input{ width:min(360px,100%); height:48px; min-height:48px; font-size:20px; } .keygame-ready-note{font-size:9px} } @media(max-height:560px) and (max-width:680px){ .keygame-ready-wrap{ padding:7px 3px 6px; gap:5px; } .keygame-ready-title{font-size:24px} .keygame-ready-mobile{font-size:11px} .keygame-ready-count{font-size:46px} .keygame-practice-word{font-size:20px} .keygame-practice-input{ height:42px; min-height:42px; font-size:18px; } } /* ========================================================= /kurohige OPTIONAL WATCH 非参加者はチャットに残り、「観戦する」を押した時だけ全画面表示。 ========================================================= */ .kurohige-lobby-join.is-watch{ background:rgba(75,112,168,.92)!important; border-color:rgba(125,166,225,.32)!important; } .kurohige-watch-close{ display:none; width:30px; height:30px; min-width:30px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(255,255,255,.07); color:inherit; font-size:18px; line-height:1; cursor:pointer; } .kurohige-game-card.is-optional-watch .kurohige-watch-close{ display:inline-grid; } body.local-light .kurohige-watch-close{ background:rgba(35,52,72,.06); border-color:rgba(35,52,72,.13); } /* ========================================================= /siritori — 任意参加 / 任意観戦 / 途中離脱 ========================================================= */ .siritori-lobby-card{ width:min(700px,calc(100% - 8px)); margin:8px auto; padding:13px 14px 14px; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:rgba(15,20,29,.86); box-shadow:0 12px 30px rgba(0,0,0,.22); color:#edf3fb; flex:0 0 auto!important; flex-shrink:0!important; height:auto!important; min-height:max-content!important; max-height:none!important; overflow:hidden!important; align-self:center!important; } .siritori-lobby-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; min-height:28px;font-size:13px;font-weight:900; } .siritori-lobby-time{ flex:0 0 auto;padding:4px 8px;border:1px solid rgba(255,255,255,.12); border-radius:999px;background:rgba(255,255,255,.07);font-size:10px; font-weight:900;white-space:nowrap; } .siritori-lobby-desc{margin-top:7px;color:#aab7c7;font-size:11px;line-height:1.5} .siritori-lobby-members{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:26px} .siritori-chip{ display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:3px 8px; border:1px solid rgba(255,255,255,.10);border-radius:999px; background:rgba(255,255,255,.055);font-size:10px;font-weight:800;white-space:nowrap; } .siritori-chip.is-me{border-color:rgba(94,157,255,.45);background:rgba(70,125,215,.16)} .siritori-chip.is-out{opacity:.64;text-decoration:line-through} .siritori-chip.is-turn{border-color:rgba(95,218,145,.45);background:rgba(62,160,105,.15)} .siritori-lobby-action{ display:block;width:100%;min-height:38px;margin-top:9px;padding:8px 12px; border:1px solid rgba(255,255,255,.12);border-radius:11px;background:#315da8; color:#fff;font-size:12px;font-weight:900;cursor:pointer; } .siritori-lobby-action.is-joined{background:rgba(53,147,93,.88)} .siritori-lobby-action.is-watch{background:rgba(75,112,168,.92)} .siritori-lobby-action:disabled{opacity:.48;cursor:default} body.siritori-fullscreen-open{overflow:hidden!important} .siritori-game-card{ position:fixed!important;left:0!important;right:0!important;top:0;z-index:2147483588!important; width:100vw!important;height:100dvh;max-width:none!important;margin:0!important; padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; border:0!important;border-radius:0!important; background:radial-gradient(circle at 50% -18%,rgba(71,125,99,.30),transparent 48%),rgba(9,13,20,.98)!important; color:#eef4fc;display:flex!important;flex-direction:column!important;overflow:auto!important; overscroll-behavior:none;-webkit-overflow-scrolling:touch;box-sizing:border-box!important; } .siritori-game-head{ display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(920px,100%); margin:0 auto;min-height:40px;flex:0 0 auto; } .siritori-game-title{font-size:14px;font-weight:950} .siritori-game-right{display:flex;align-items:center;gap:7px} .siritori-turn-timer{ padding:5px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px; background:rgba(255,255,255,.07);font-size:11px;font-weight:900;white-space:nowrap; font-variant-numeric:tabular-nums; } .siritori-close{ width:32px;height:32px;min-width:32px;padding:0;border:1px solid rgba(255,255,255,.13); border-radius:50%;background:rgba(255,255,255,.07);color:inherit;font-size:19px;line-height:1; cursor:pointer;display:grid;place-items:center; } .siritori-main{ width:min(920px,100%);margin:auto;padding:14px 0 18px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:11px;flex:1 1 auto;min-height:0; } .siritori-turn-name{font-size:clamp(18px,4vw,30px);font-weight:950;text-align:center} .siritori-chain{ width:min(720px,100%);padding:10px 12px;border:1px solid rgba(255,255,255,.09); border-radius:14px;background:rgba(255,255,255,.045);text-align:center; } .siritori-prev-label{color:#8d9caf;font-size:10px;font-weight:800} .siritori-prev-word{margin-top:3px;font-size:clamp(22px,5vw,38px);font-weight:950;overflow-wrap:anywhere} .siritori-required{margin-top:4px;color:#7ce2a0;font-size:14px;font-weight:950} .siritori-input-row{ width:min(700px,100%);display:flex;align-items:stretch;gap:8px; } .siritori-input{ flex:1 1 auto;min-width:0;height:54px;min-height:54px;padding:0 15px; border:2px solid rgba(109,185,145,.32);border-radius:14px;outline:none; background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:22px;font-weight:850; text-align:center;caret-color:#83e1aa;box-sizing:border-box; } .siritori-input:focus{border-color:rgba(103,220,149,.86);box-shadow:0 0 0 4px rgba(60,170,105,.13)} .siritori-input:disabled{opacity:.48} .siritori-submit{ flex:0 0 auto;min-width:100px;height:54px;padding:0 18px;border:1px solid rgba(255,255,255,.12); border-radius:14px;background:#2f8a59;color:#fff;font-size:13px;font-weight:950;cursor:pointer; } .siritori-submit:disabled{opacity:.45;cursor:default} .siritori-help{max-width:760px;color:#8998ac;font-size:10px;line-height:1.5;text-align:center} .siritori-history{ width:min(760px,100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px; min-height:30px; } .siritori-word-chip{ max-width:180px;padding:4px 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px; background:rgba(255,255,255,.045);color:#b1bdcc;font-size:10px;font-weight:850; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .siritori-players{ width:min(780px,100%);display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-height:88px; overflow:auto;-webkit-overflow-scrolling:touch; } .siritori-spectator-note{color:#9baabd;font-size:12px;font-weight:850;text-align:center} body.local-light .siritori-lobby-card{ background:rgba(250,252,255,.96);color:#17212d;border-color:rgba(42,58,75,.12); box-shadow:0 12px 28px rgba(40,60,80,.10) } body.local-light .siritori-lobby-desc{color:#657385} body.local-light .siritori-chip,body.local-light .siritori-lobby-time{ background:rgba(35,52,72,.05);border-color:rgba(35,52,72,.12) } body.local-light .siritori-game-card{ background:radial-gradient(circle at 50% -18%,rgba(71,125,99,.13),transparent 48%),rgba(247,250,253,.99)!important; color:#17212d; } body.local-light .siritori-input{background:#fff;color:#111;border-color:rgba(47,138,89,.28)} body.local-light .siritori-chain,body.local-light .siritori-word-chip{ background:rgba(35,52,72,.045);border-color:rgba(35,52,72,.10) } body.local-light .siritori-help,body.local-light .siritori-spectator-note,body.local-light .siritori-prev-label{color:#68788b} @media(max-width:680px){ .siritori-lobby-card{ width:calc(100% - 8px)!important;min-height:164px!important;height:auto!important;max-height:none!important; margin:6px auto!important;padding:11px 10px 12px!important;border-radius:14px!important; } .siritori-lobby-head{min-height:25px!important;font-size:12px!important} .siritori-lobby-time{padding:3px 7px!important;font-size:9px!important} .siritori-lobby-desc{display:block!important;min-height:42px!important;margin-top:6px!important;font-size:10px!important;line-height:1.45!important;overflow:visible!important} .siritori-lobby-members{display:flex!important;min-height:29px!important;max-height:70px!important;margin-top:7px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch} .siritori-lobby-action{display:block!important;visibility:visible!important;width:100%!important;min-height:38px!important;height:38px!important;margin-top:8px!important;font-size:11px!important} .siritori-game-card{ padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important; } .siritori-game-head{min-height:34px}.siritori-game-title{font-size:12px}.siritori-turn-timer{font-size:9px;padding:4px 7px} .siritori-close{width:30px;height:30px;min-width:30px;font-size:18px} .siritori-main{justify-content:flex-start;gap:8px;padding:10px 0 12px} .siritori-turn-name{font-size:20px} .siritori-chain{padding:8px 9px;border-radius:12px}.siritori-prev-word{font-size:25px}.siritori-required{font-size:12px} .siritori-input-row{gap:6px}.siritori-input{height:50px;min-height:50px;padding:0 10px;font-size:20px;border-radius:12px} .siritori-submit{min-width:78px;height:50px;padding:0 12px;border-radius:12px;font-size:12px} .siritori-help{font-size:9px}.siritori-history{max-height:62px;overflow:auto}.siritori-word-chip{font-size:9px;padding:3px 6px} .siritori-players{max-height:70px}.siritori-chip{font-size:9px;padding:2px 6px} } @media(max-width:360px){ .siritori-lobby-card{width:calc(100% - 4px)!important;min-height:158px!important;padding:9px 8px 10px!important} .siritori-lobby-desc{font-size:9px!important}.siritori-lobby-action{min-height:36px!important;height:36px!important;font-size:10px!important} .siritori-turn-name{font-size:18px}.siritori-prev-word{font-size:22px} .siritori-input{height:46px;min-height:46px;font-size:18px}.siritori-submit{height:46px;min-width:70px;padding:0 10px;font-size:11px} } @supports not (height:100dvh){.siritori-game-card{height:100vh}} /* ========================================================= slide:文字列 — classic iPhone inspired "slide to unlock" ========================================================= */ .message-bubble.slide-lock-bubble{ padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; min-width:min(310px,78vw); max-width:min(360px,82vw); } .slide-lock-shell{ position:relative; width:100%; box-sizing:border-box; overflow:hidden; border-radius:19px; padding:12px 11px 11px; color:#fff; background: radial-gradient(circle at 50% -25%,rgba(255,255,255,.24),transparent 46%), linear-gradient(180deg,#34383d 0%,#111316 48%,#050607 100%); border:1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.85), 0 8px 22px rgba(0,0,0,.24); user-select:none; -webkit-user-select:none; } .slide-lock-top{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:22px; margin-bottom:9px; font-size:11px; font-weight:650; letter-spacing:.05em; color:rgba(255,255,255,.72); text-shadow:0 1px 1px #000; } .slide-lock-icon{ position:relative; display:inline-block; width:11px; height:9px; border-radius:2px; background:linear-gradient(180deg,#f2f2f2,#9d9d9d); box-shadow:0 1px 1px rgba(0,0,0,.75); } .slide-lock-icon::before{ content:""; position:absolute; left:2px; top:-7px; width:7px; height:8px; box-sizing:border-box; border:2px solid #d8d8d8; border-bottom:0; border-radius:7px 7px 0 0; } .slide-lock-track{ --slide-x:0px; position:relative; height:52px; border-radius:13px; overflow:hidden; background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(30,30,30,.92)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 2px 5px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08); touch-action:pan-y; } .slide-lock-label{ position:absolute; inset:0 8px 0 58px; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:17px; font-weight:400; letter-spacing:.015em; color:rgba(255,255,255,.37); text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.10); pointer-events:none; } .slide-lock-label::after{ content:"slide to unlock"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:transparent; background:linear-gradient( 105deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.20) 34%, rgba(255,255,255,.98) 46%, rgba(255,255,255,.98) 53%, rgba(255,255,255,.20) 66%, rgba(255,255,255,.20) 100% ); background-size:230% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text; animation:slideUnlockShimmer 2.35s linear infinite; } @keyframes slideUnlockShimmer{ from{background-position:135% 0} to{background-position:-90% 0} } .slide-lock-thumb{ position:absolute; z-index:3; left:4px; top:4px; width:44px; height:42px; padding:0; border:1px solid rgba(255,255,255,.75); border-radius:10px; background:linear-gradient(180deg,#f9f9f9 0%,#dadada 47%,#9d9d9d 51%,#c7c7c7 100%); color:#3a3a3a; box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.95); transform:translateX(var(--slide-x)); transition:transform .22s cubic-bezier(.2,.75,.3,1); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .slide-lock-thumb:active{cursor:grabbing} .slide-lock-thumb::before, .slide-lock-thumb::after{ content:""; position:absolute; top:13px; width:12px; height:12px; border-top:3px solid rgba(63,63,63,.90); border-right:3px solid rgba(63,63,63,.90); transform:rotate(45deg); filter:drop-shadow(0 1px 0 rgba(255,255,255,.65)); } .slide-lock-thumb::before{left:9px} .slide-lock-thumb::after{left:17px} .slide-unlocked-text{ display:none; color:inherit!important; -webkit-text-fill-color:currentColor!important; white-space:pre-wrap; overflow-wrap:anywhere; } .message-bubble.slide-lock-bubble.is-unlocked{ min-width:0; max-width:min(420px,78vw); padding:9px 13px!important; border-radius:16px 16px 16px 4px!important; background:#232b3d!important; color:var(--text)!important; box-shadow:none!important; overflow-wrap:anywhere!important; white-space:pre-wrap!important; } .message.mine .message-bubble.slide-lock-bubble.is-unlocked{ border-radius:16px 16px 4px 16px!important; background:#315da8!important; color:#fff!important; } .message-bubble.slide-lock-bubble.is-unlocked .slide-lock-shell{display:none} .message-bubble.slide-lock-bubble.is-unlocked .slide-unlocked-text{ display:block; animation:slideTextReveal .30s ease both; } @keyframes slideTextReveal{ from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} } body.local-light .message-bubble.slide-lock-bubble.is-unlocked{ background:rgba(255,255,255,.92)!important; color:#18202c!important; -webkit-text-fill-color:#18202c!important; border:1px solid rgba(40,50,65,.09)!important; } body.local-light .message:not(.mine) .message-bubble.slide-lock-bubble.is-unlocked .slide-unlocked-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; } body.local-light .message.mine .message-bubble.slide-lock-bubble.is-unlocked{ background:#3276d2!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:transparent!important; } body.local-light .message.mine .message-bubble.slide-lock-bubble.is-unlocked .slide-unlocked-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; } @media (max-width:680px){ .message-bubble.slide-lock-bubble{ min-width:min(300px,84vw); max-width:88vw; } .slide-lock-label{font-size:16px} } @media (max-width:360px){ .message-bubble.slide-lock-bubble{ min-width:min(270px,87vw); max-width:90vw; } .slide-lock-track{height:48px} .slide-lock-thumb{width:41px;height:38px} .slide-lock-thumb::before, .slide-lock-thumb::after{top:11px} .slide-lock-label{inset:0 6px 0 53px;font-size:14px} } /* ============================================================ 写真 / 動画 選択 + 15秒動画トリミング ============================================================ */ .media-choice-backdrop, .video-editor-backdrop{ position:fixed; inset:0; z-index:26000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(3,7,14,.58); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .media-choice-backdrop.open, .video-editor-backdrop.open{display:flex} .media-choice-sheet{ width:min(360px,calc(100vw - 28px)); padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(24,29,39,.94); box-shadow:0 20px 70px rgba(0,0,0,.42); } .media-choice-title{ padding:4px 8px 12px; font-size:15px; font-weight:760; text-align:center; } .media-choice-actions{ display:grid; gap:9px; } .media-choice-btn{ min-height:52px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.075); color:inherit; font:inherit; font-weight:720; cursor:pointer; touch-action:manipulation; } .media-choice-btn:hover{background:rgba(255,255,255,.11)} .media-choice-btn.cancel{ margin-top:2px; background:transparent; font-weight:650; opacity:.82; } .media-choice-sub{ display:block; margin-top:3px; font-size:11px; font-weight:500; opacity:.62; } .video-editor-panel{ width:min(620px,calc(100vw - 20px)); max-height:min(860px,calc(100dvh - 20px)); overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(18,22,30,.97); box-shadow:0 24px 80px rgba(0,0,0,.5); overscroll-behavior:contain; } .video-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .video-editor-title{ font-size:15px; font-weight:800; } .video-editor-close{ width:34px; height:34px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.07); color:inherit; font-size:20px; line-height:1; cursor:pointer; touch-action:manipulation; } .video-editor-preview-wrap{ position:relative; overflow:hidden; border-radius:16px; background:#000; aspect-ratio:16/9; } .video-editor-preview{ width:100%; height:100%; object-fit:contain; display:block; background:#000; } .video-editor-loading{ position:absolute; inset:0; display:none; place-items:center; padding:20px; text-align:center; background:rgba(0,0,0,.72); color:#fff; font-size:13px; line-height:1.55; } .video-editor-loading.open{display:grid} .video-editor-progress{ width:min(360px,90%); height:8px; margin:10px auto 0; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.15); } .video-editor-progress > span{ display:block; width:0%; height:100%; border-radius:inherit; background:currentColor; transition:width .15s linear; } .video-editor-controls{ padding:14px 3px 2px; } .video-editor-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:12px; } .video-editor-times{ font-variant-numeric:tabular-nums; font-weight:750; } .video-editor-range{ width:100%; min-height:34px; accent-color:currentColor; touch-action:pan-x; cursor:pointer; } .video-editor-selection{ position:relative; height:8px; margin:0 2px 10px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); } .video-editor-selection > span{ position:absolute; top:0; bottom:0; border-radius:inherit; background:rgba(255,255,255,.62); } .video-editor-note{ margin:8px 0 0; font-size:11px; line-height:1.5; opacity:.65; } .video-editor-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; } .video-editor-btn{ min-height:44px; border:1px solid rgba(255,255,255,.13); border-radius:13px; background:rgba(255,255,255,.08); color:inherit; font:inherit; font-weight:740; cursor:pointer; touch-action:manipulation; } .video-editor-btn.primary{ background:#2f74d0; border-color:transparent; color:#fff; } .video-editor-btn:disabled{ opacity:.45; cursor:default; } .video-message-bubble{ width:min(420px,76vw); max-width:100%; overflow:hidden; border-radius:16px; background:rgba(18,23,32,.94); border:1px solid rgba(255,255,255,.10); } .chat-video{ display:block; width:100%; max-height:min(58vh,520px); background:#000; object-fit:contain; } .video-info{ padding:7px 9px 8px; font-size:10px; opacity:.7; } .video-sending-note{ position:fixed; z-index:28000; left:50%; bottom:calc(var(--for314-ad-safe-bottom,82px) + 84px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100vw - 24px); padding:9px 13px; border-radius:999px; background:rgba(15,20,28,.92); color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.28); font-size:12px; white-space:nowrap; } body.local-light .media-choice-sheet, body.local-light .video-editor-panel{ background:rgba(248,250,253,.98); color:#18202c; border-color:rgba(20,30,45,.12); } body.local-light .media-choice-btn, body.local-light .video-editor-close, body.local-light .video-editor-btn{ border-color:rgba(20,30,45,.12); background:rgba(20,30,45,.055); } body.local-light .video-editor-btn.primary{ background:#2f74d0; color:#fff; } body.local-light .video-message-bubble{ background:rgba(255,255,255,.94); border-color:rgba(20,30,45,.10); } @media (max-width:680px){ .media-choice-backdrop, .video-editor-backdrop{ align-items:flex-end; padding:8px; } .media-choice-sheet{ width:100%; border-radius:22px 22px calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-bottom)); padding-bottom:calc(14px + env(safe-area-inset-bottom)); } .video-editor-panel{ width:100%; max-height:calc(100dvh - 8px); border-radius:20px 20px 12px 12px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); } .video-message-bubble{width:min(92vw,420px)} } /* ============================================================ /saigai - 気象庁 重大災害情報カード ============================================================ */ .saigai-info-card{ width:min(560px,calc(100% - 18px)); margin:9px auto; padding:13px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background: linear-gradient(145deg,rgba(73,20,37,.94),rgba(26,26,36,.96)); box-shadow:0 10px 32px rgba(0,0,0,.24); color:#fff; } .saigai-info-card.is-clear{ background: linear-gradient(145deg,rgba(21,58,48,.94),rgba(25,31,34,.96)); } .saigai-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .saigai-card-title{ font-size:14px; font-weight:850; letter-spacing:.01em; } .saigai-card-top-badge{ flex:0 0 auto; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); font-size:9px; font-weight:850; } .saigai-card-list{ display:grid; gap:7px; } .saigai-card-item{ padding:9px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.17); } .saigai-card-item.severity-5{ box-shadow:inset 4px 0 0 rgba(239,97,163,.95); } .saigai-card-item.severity-4{ box-shadow:inset 4px 0 0 rgba(179,92,224,.95); } .saigai-card-item-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .saigai-card-level{ padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.12); font-size:8px; font-weight:850; } .severity-5 .saigai-card-level{ background:rgba(222,67,135,.28); } .severity-4 .saigai-card-level{ background:rgba(151,67,202,.3); } .saigai-card-warning-name{ font-size:11px; line-height:1.35; } .saigai-card-region{ display:grid; gap:3px; margin-top:6px; } .saigai-card-office{ font-size:9px; font-weight:800; opacity:.9; } .saigai-card-areas{ font-size:9px; line-height:1.5; opacity:.78; overflow-wrap:anywhere; } .saigai-card-clear{ padding:12px; border-radius:12px; background:rgba(255,255,255,.06); font-size:11px; line-height:1.6; } .saigai-card-more, .saigai-card-caution{ margin-top:8px; font-size:9px; line-height:1.5; } .saigai-card-more{opacity:.8} .saigai-card-caution{ padding:7px 8px; border-radius:10px; background:rgba(255,255,255,.07); } .saigai-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.1); } .saigai-card-source{ font-size:8px; opacity:.62; } .saigai-card-link{ color:inherit; font-size:8px; font-weight:800; text-decoration:underline; text-underline-offset:2px; } body.local-light .saigai-info-card{ color:#22202a; border-color:rgba(30,30,45,.12); background:linear-gradient(145deg,rgba(255,236,243,.98),rgba(249,247,252,.98)); box-shadow:0 8px 26px rgba(45,25,40,.1); } body.local-light .saigai-info-card.is-clear{ background:linear-gradient(145deg,rgba(232,249,242,.98),rgba(248,251,250,.98)); } body.local-light .saigai-card-item, body.local-light .saigai-card-clear, body.local-light .saigai-card-caution, body.local-light .saigai-card-top-badge{ background:rgba(30,30,45,.045); border-color:rgba(30,30,45,.08); } body.local-light .saigai-card-foot{ border-top-color:rgba(30,30,45,.09); } @media(max-width:680px){ .saigai-info-card{ width:calc(100% - 12px); padding:11px; border-radius:15px; } .saigai-card-title{font-size:12px} .saigai-card-warning-name{font-size:10px} .saigai-card-areas{font-size:8px} } /* ============================================================ Toast position v2 — composerの少し上に浮く透明ブラー ============================================================ */ #toastLayer{ top:auto !important; bottom:calc( var(--for314-ad-safe-gap,82px) + 72px + var(--for314-composer-extra-height,0px) + env(safe-area-inset-bottom) ) !important; left:50% !important; transform:translateX(-50%) !important; z-index:calc(var(--for314-composer-z,7150) + 12) !important; width:min(560px,calc(100vw - 28px)) !important; gap:6px !important; align-items:center; pointer-events:none; } .chat-toast{ align-self:center !important; max-width:min(100%,520px) !important; padding:9px 14px !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:16px !important; background:rgba(16,22,32,.40) !important; color:#fff !important; box-shadow: 0 8px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter:blur(20px) saturate(155%); -webkit-backdrop-filter:blur(20px) saturate(155%); font-weight:700; text-align:center; line-height:1.4; } @keyframes toastIn{ from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes toastOut{ to{opacity:0;transform:translateY(6px) scale(.98)} } body.local-light .chat-toast{ background:rgba(248,250,253,.46) !important; color:#1c2632 !important; border-color:rgba(48,64,82,.14) !important; box-shadow: 0 8px 24px rgba(40,55,72,.12), inset 0 1px 0 rgba(255,255,255,.72) !important; } @media(max-width:680px){ #toastLayer{ bottom:calc( var(--for314-ad-safe-gap,76px) + 66px + var(--for314-composer-extra-height,0px) + env(safe-area-inset-bottom) ) !important; width:calc(100vw - 22px) !important; } .chat-toast{ max-width:94% !important; padding:8px 12px !important; border-radius:15px !important; font-size:12px; } } @media(max-width:360px){ #toastLayer{ bottom:calc( var(--for314-ad-safe-gap,72px) + 60px + var(--for314-composer-extra-height,0px) + env(safe-area-inset-bottom) ) !important; width:calc(100vw - 14px) !important; } .chat-toast{ padding:7px 10px !important; font-size:11px; } } /* ============================================================ Header Push Notification Switch — iPhone風ON/OFF 通常版のみ ============================================================ */ .header-notification-control{ flex:0 0 auto; display:flex; align-items:center; gap:7px; min-width:0; margin-left:auto; } .header-notification-label{ color:#aab4c1; font-size:9px; font-weight:850; white-space:nowrap; transition:color .18s ease,opacity .18s ease; } .header-notification-switch{ flex:0 0 auto; width:48px; height:28px; padding:0; border:0; border-radius:999px; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .header-notification-switch-track{ position:relative; display:block; width:48px; height:28px; border-radius:999px; background:rgba(116,126,139,.48); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.05); transition: background .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, box-shadow .2s ease; } .header-notification-switch-thumb{ position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.12); transition: transform .22s cubic-bezier(.22,.84,.27,1.08), opacity .18s ease; } .header-notification-switch.is-on .header-notification-switch-track{ background:#34c759; border-color:rgba(52,199,89,.72); box-shadow: inset 0 1px 2px rgba(0,0,0,.10), 0 0 0 2px rgba(52,199,89,.08); } .header-notification-switch.is-on .header-notification-switch-thumb{ transform:translateX(20px); } .header-notification-switch.is-busy .header-notification-switch-track{ background:rgba(81,113,157,.58); } .header-notification-switch.is-busy .header-notification-switch-thumb{ opacity:.72; animation:headerNotificationPulse .8s ease-in-out infinite alternate; } .header-notification-switch.is-denied .header-notification-switch-track{ background:rgba(166,72,82,.52); } .header-notification-switch:focus-visible{ outline:3px solid rgba(104,157,232,.38); outline-offset:3px; } .header-notification-switch:disabled{ cursor:default; opacity:.58; } @keyframes headerNotificationPulse{ from{transform:translateX(3px) scale(.93)} to{transform:translateX(9px) scale(1)} } body.local-light .header-notification-label{ color:#596775; } body.local-light .header-notification-switch-track{ background:rgba(118,128,139,.34); border-color:rgba(36,52,68,.10); box-shadow:inset 0 1px 2px rgba(35,48,60,.12); } body.local-light .header-notification-switch.is-on .header-notification-switch-track{ background:#34c759; border-color:#34c759; } body.local-light .header-notification-switch.is-denied .header-notification-switch-track{ background:rgba(191,76,88,.48); } @media(max-width:680px){ .header-notification-control{gap:5px} .header-notification-label{font-size:8px} .header-notification-switch, .header-notification-switch-track{ width:44px; height:26px; } .header-notification-switch-thumb{ width:20px; height:20px; top:2px; left:2px; } .header-notification-switch.is-on .header-notification-switch-thumb{ transform:translateX(18px); } } @media(max-width:400px){ .header-notification-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .header-notification-control{gap:0} .header-notification-switch, .header-notification-switch-track{ width:42px; height:25px; } .header-notification-switch-thumb{ width:19px; height:19px; } .header-notification-switch.is-on .header-notification-switch-thumb{ transform:translateX(17px); } } /* ============================================================ Shared Calendar + Shared Calculator ============================================================ */ .shared-calendar-card, .shared-calc-card{ width:min(520px,calc(100% - 18px)); margin:9px auto; border:1px solid rgba(255,255,255,.12); border-radius:20px; background: linear-gradient(180deg,rgba(24,31,44,.94),rgba(14,20,30,.94)); color:#f6f8fb; box-shadow:0 12px 32px rgba(0,0,0,.22); backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%); overflow:hidden; } .shared-calendar-card{ padding:14px; } .shared-calendar-head, .shared-calc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .shared-calendar-title, .shared-calc-title{ font-weight:900; font-size:14px; letter-spacing:.01em; } .shared-calendar-badge, .shared-calc-owner{ flex:0 0 auto; font-size:9px; font-weight:800; color:#aeb8c7; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:4px 8px; } .shared-calendar-weekdays, .shared-calendar-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; } .shared-calendar-weekdays{ margin-top:13px; margin-bottom:5px; } .shared-calendar-weekday{ text-align:center; color:#8793a5; font-size:9px; font-weight:850; } .shared-calendar-weekday.is-sunday, .shared-calendar-day.is-sunday{ color:#ff8079; } .shared-calendar-weekday.is-saturday, .shared-calendar-day.is-saturday{ color:#79a9ff; } .shared-calendar-day{ min-height:38px; display:flex; align-items:center; justify-content:center; position:relative; font-size:11px; font-weight:800; color:#e8edf4; } .shared-calendar-day>span{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .shared-calendar-day.is-selected>span{ color:#fff; background:#ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.14), 0 5px 14px rgba(255,59,48,.25); font-weight:950; } .shared-calendar-day.is-empty{ pointer-events:none; } .shared-calendar-foot{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.07); text-align:right; color:#8f9bac; font-size:8px; } .shared-calc-card{ padding:12px; } .shared-calc-screen{ margin-top:10px; padding:11px 12px; min-height:110px; border-radius:15px; background: linear-gradient(180deg,rgba(4,10,16,.88),rgba(8,15,22,.78)); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 5px rgba(0,0,0,.36); } .shared-calc-screen-label{ color:#7f8b9a; font-size:8px; font-weight:850; letter-spacing:.08em; } .shared-calc-screen-label.result-label{ margin-top:7px; } .shared-calc-expression{ min-height:26px; margin-top:3px; color:#adb7c5; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:15px; line-height:1.45; text-align:right; overflow-wrap:anywhere; } .shared-calc-result{ min-height:38px; color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:29px; font-weight:900; line-height:1.25; text-align:right; overflow-wrap:anywhere; } .shared-calc-result.is-error{ color:#ff8a83; font-size:16px; padding-top:6px; } .shared-calc-keypad{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:10px; } .shared-calc-key{ min-width:0; height:43px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.075); color:#eef3fa; font-size:15px; font-weight:850; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 7px rgba(0,0,0,.15); transition:transform .08s ease,background .12s ease,box-shadow .12s ease; } .shared-calc-key.is-operator{ background:rgba(255,149,0,.22); color:#ffc36b; } .shared-calc-key.is-equals{ background:rgba(52,199,89,.24); color:#8de9a5; } .shared-calc-key.is-clear, .shared-calc-key.is-back{ background:rgba(255,255,255,.12); color:#ffaaa5; } .shared-calc-key:active, .shared-calc-key.is-pressed{ transform:translateY(2px) scale(.96); background:rgba(96,165,250,.38); box-shadow:0 0 0 3px rgba(96,165,250,.12); } .shared-calc-activity{ height:20px; display:flex; align-items:flex-end; justify-content:center; color:#8390a0; font-size:8px; font-weight:750; } body.local-light .shared-calendar-card, body.local-light .shared-calc-card{ color:#18212c; background:rgba(255,255,255,.94); border-color:rgba(31,44,58,.12); box-shadow:0 10px 26px rgba(38,51,66,.10); } body.local-light .shared-calendar-badge, body.local-light .shared-calc-owner{ color:#657180; background:rgba(42,58,76,.055); border-color:rgba(42,58,76,.08); } body.local-light .shared-calendar-day{ color:#273441; } body.local-light .shared-calendar-day.is-sunday{color:#d94841} body.local-light .shared-calendar-day.is-saturday{color:#356fd2} body.local-light .shared-calendar-foot{ color:#718090; border-color:rgba(28,42,55,.08); } body.local-light .shared-calc-screen{ background:linear-gradient(180deg,#f4f7fa,#eef2f6); border-color:rgba(32,45,58,.10); box-shadow:inset 0 1px 4px rgba(36,50,64,.08); } body.local-light .shared-calc-expression{color:#697786} body.local-light .shared-calc-result{color:#18212c} body.local-light .shared-calc-result.is-error{color:#c63d35} body.local-light .shared-calc-key{ color:#273441; background:#f1f4f7; border-color:rgba(31,44,58,.10); } body.local-light .shared-calc-key.is-operator{ color:#a85b00; background:#fff1dc; } body.local-light .shared-calc-key.is-equals{ color:#167134; background:#e5f7ea; } body.local-light .shared-calc-key.is-clear, body.local-light .shared-calc-key.is-back{ color:#b23a34; background:#f6eeee; } body.local-light .shared-calc-key:active, body.local-light .shared-calc-key.is-pressed{ background:#dcecff; } body.local-light .shared-calc-activity{color:#7a8795} @media(max-width:420px){ .shared-calendar-card, .shared-calc-card{ width:calc(100% - 10px); border-radius:16px; } .shared-calendar-card{padding:10px} .shared-calendar-day{min-height:34px} .shared-calendar-day>span{width:28px;height:28px} .shared-calc-card{padding:9px} .shared-calc-screen{min-height:98px;padding:9px 10px} .shared-calc-expression{font-size:13px} .shared-calc-result{font-size:25px} .shared-calc-key{height:40px;border-radius:10px} } @media(max-width:300px){ .shared-calendar-card, .shared-calc-card{ width:calc(100% - 4px); margin:5px auto; border-radius:11px; } .shared-calendar-card{padding:7px} .shared-calendar-title,.shared-calc-title{font-size:10px} .shared-calendar-badge,.shared-calc-owner{font-size:6px;padding:2px 5px} .shared-calendar-weekdays{margin-top:8px} .shared-calendar-weekday{font-size:7px} .shared-calendar-weekdays,.shared-calendar-grid{gap:1px} .shared-calendar-day{min-height:25px;font-size:8px} .shared-calendar-day>span{width:21px;height:21px} .shared-calendar-foot{font-size:6px} .shared-calc-card{padding:6px} .shared-calc-screen{min-height:72px;padding:6px 7px;border-radius:8px} .shared-calc-screen-label{font-size:6px} .shared-calc-expression{min-height:18px;font-size:9px} .shared-calc-result{min-height:25px;font-size:17px} .shared-calc-result.is-error{font-size:9px;padding-top:3px} .shared-calc-keypad{gap:3px;margin-top:6px} .shared-calc-key{height:29px;border-radius:7px;font-size:10px} .shared-calc-activity{height:15px;font-size:6px} } /* ============================================================ Shared Calendar / Calculator flex-collapse fix chatlog は column flex かつ末尾に大きな spacer(::after) があるため、 flex-shrink:1 のカードが縦に潰れていた。 カードは必ず内容の自然高を保持させる。 ============================================================ */ main .chatlog > .shared-calendar-card, main .chatlog > .shared-calc-card, .chatlog > .shared-calendar-card, .chatlog > .shared-calc-card{ flex:0 0 auto !important; flex-shrink:0 !important; height:auto !important; min-height:max-content !important; max-height:none !important; align-self:center !important; overflow:visible !important; } /* 角丸内の見た目だけは内側要素で保つため、カード自身は切らない */ .shared-calendar-card, .shared-calc-card{ box-sizing:border-box !important; contain:none !important; } /* カレンダーは最大6週を必ず描画できる */ .shared-calendar-weekdays, .shared-calendar-grid{ flex:0 0 auto !important; } .shared-calendar-grid{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } .shared-calendar-day{ flex:0 0 auto !important; } /* 電卓も画面・キー盤・操作表示を縮ませない */ .shared-calc-head, .shared-calc-screen, .shared-calc-keypad, .shared-calc-activity{ flex:0 0 auto !important; } .shared-calc-keypad{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } /* カードの角丸クリップが必要な背景は擬似的に保持 */ .shared-calendar-card, .shared-calc-card{ background-clip:padding-box; } @media(max-width:680px){ main .chatlog > .shared-calendar-card, main .chatlog > .shared-calc-card, .chatlog > .shared-calendar-card, .chatlog > .shared-calc-card{ height:auto !important; min-height:max-content !important; max-height:none !important; margin:7px auto !important; } } /* ============================================================ /roulette — Shared Member Roulette ============================================================ */ .shared-roulette-card{ flex:0 0 auto !important; flex-shrink:0 !important; align-self:center; box-sizing:border-box; width:min(530px,calc(100% - 18px)); height:auto !important; max-height:none !important; margin:10px auto; padding:13px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background: linear-gradient(180deg,rgba(24,31,44,.96),rgba(14,20,30,.96)); color:#f6f8fb; box-shadow:0 14px 34px rgba(0,0,0,.24); overflow:visible !important; } .shared-roulette-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .shared-roulette-title{ font-size:14px; font-weight:900; } .shared-roulette-count{ flex:0 0 auto; padding:4px 8px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.07); color:#aeb8c7; font-size:9px; font-weight:850; } .shared-roulette-stage{ display:block; width:min(100%,430px); margin:0 auto; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .shared-roulette-stage:disabled{ cursor:default; } .shared-roulette-canvas{ display:block; width:100%; height:auto; aspect-ratio:1/1; margin:0 auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)); } .shared-roulette-stage:not(:disabled):active .shared-roulette-canvas{ transform:scale(.985); } .shared-roulette-stage .shared-roulette-canvas{ transition:transform .08s ease,filter .18s ease; } .shared-roulette-stage.is-stopping .shared-roulette-canvas{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)) saturate(1.05); } .shared-roulette-stage.is-ended .shared-roulette-canvas{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)) drop-shadow(0 0 12px rgba(255,204,68,.12)); } .shared-roulette-status{ min-height:29px; display:flex; align-items:center; justify-content:center; padding:4px 6px 1px; color:#aeb8c7; font-size:10px; font-weight:800; text-align:center; } .shared-roulette-status.is-ended{ color:#ffd36b; font-size:12px; font-weight:950; } .shared-roulette-members{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:6px; padding-top:7px; border-top:1px solid rgba(255,255,255,.07); } .shared-roulette-member-chip{ display:inline-flex; max-width:150px; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.065); color:#9eaabc; font-size:8px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shared-roulette-member-chip.is-winner{ color:#201500; background:#ffd05c; box-shadow:0 0 0 2px rgba(255,208,92,.12); font-weight:950; } body.local-light .shared-roulette-card{ color:#18212c; background:rgba(255,255,255,.96); border-color:rgba(31,44,58,.12); box-shadow:0 10px 26px rgba(38,51,66,.12); } body.local-light .shared-roulette-count{ color:#657180; background:rgba(42,58,76,.055); border-color:rgba(42,58,76,.08); } body.local-light .shared-roulette-status{ color:#647180; } body.local-light .shared-roulette-status.is-ended{ color:#8b5d00; } body.local-light .shared-roulette-members{ border-color:rgba(31,44,58,.08); } body.local-light .shared-roulette-member-chip{ color:#566473; background:rgba(40,54,69,.07); } body.local-light .shared-roulette-member-chip.is-winner{ color:#442d00; background:#ffd05c; } @media(max-width:520px){ .shared-roulette-card{ width:calc(100% - 10px); padding:10px; border-radius:18px; } .shared-roulette-stage{ width:min(100%,390px); } } @media(max-width:360px){ .shared-roulette-card{ width:calc(100% - 6px); padding:7px; border-radius:14px; } .shared-roulette-title{font-size:11px} .shared-roulette-count{font-size:7px;padding:3px 6px} .shared-roulette-status{font-size:8px;min-height:24px} .shared-roulette-status.is-ended{font-size:9px} .shared-roulette-members{gap:3px;margin-top:4px;padding-top:5px} .shared-roulette-member-chip{ max-width:100px; padding:2px 5px; font-size:6.5px; } } /* ============================================================ /call — PC風 最小化 通話画面自体は既存のまま。 最小化時のみ [📞 2:34] をメッセージ入力欄の左へ表示。 ============================================================ */ /* backdropごと隠すので、最小化中もチャットを普通に操作できる */ .voice-call-backdrop.is-minimized{ display:none !important; } /* Xの左隣にPC風 _ */ .voice-call-minimize{ position:absolute; top:-3px; right:31px; width:30px; height:30px; border:0; border-radius:9px; background:rgba(255,255,255,.10); color:inherit; font-size:18px; font-weight:900; line-height:1; padding:0 0 7px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .voice-call-minimize:hover{ background:rgba(255,255,255,.16); } .voice-call-minimize:active{ transform:translateY(1px); } body.local-light .voice-call-minimize{ background:rgba(30,70,100,.09); } body.local-light .voice-call-minimize:hover{ background:rgba(30,70,100,.15); } /* 入力欄の一番左へ差し込む小さな通話タスク */ main .inputrow > .voice-call-minimized-task{ flex:0 0 auto !important; width:auto !important; min-width:78px !important; max-width:104px !important; height:42px !important; min-height:42px !important; margin:0 !important; padding:0 10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:15px !important; background: linear-gradient(180deg,rgba(31,41,57,.94),rgba(18,26,38,.94)) !important; color:#f5f8fc !important; box-shadow:0 4px 14px rgba(0,0,0,.16) !important; cursor:pointer; pointer-events:auto !important; touch-action:manipulation !important; -webkit-tap-highlight-color:transparent; white-space:nowrap; z-index:3; } main .inputrow > .voice-call-minimized-task:hover{ border-color:rgba(105,160,240,.48) !important; background: linear-gradient(180deg,rgba(38,52,72,.98),rgba(21,31,46,.98)) !important; } main .inputrow > .voice-call-minimized-task:active{ transform:translateY(1px) scale(.985); } .voice-call-minimized-icon{ flex:0 0 auto; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; line-height:1; } .voice-call-minimized-icon svg{ display:block; width:100%; height:100%; fill:currentColor; } .voice-call-minimized-time{ min-width:34px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; font-weight:950; line-height:1; letter-spacing:-.03em; } /* taskが入った分だけtextareaが自然に縮む */ body.voice-call-is-minimized main .inputrow #msgInput{ flex:1 1 0 !important; min-width:0 !important; } body.local-light main .inputrow > .voice-call-minimized-task{ color:#17212c !important; border-color:rgba(45,60,78,.14) !important; background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,244,249,.98)) !important; box-shadow:0 4px 12px rgba(38,51,66,.09) !important; } @media(max-width:680px){ main .inputrow > .voice-call-minimized-task{ min-width:68px !important; max-width:86px !important; height:40px !important; min-height:40px !important; padding:0 7px !important; gap:4px !important; border-radius:13px !important; } .voice-call-minimized-icon{width:13px;height:13px} .voice-call-minimized-time{ min-width:30px; font-size:10px; } } @media(max-width:360px){ main .inputrow > .voice-call-minimized-task{ min-width:56px !important; max-width:64px !important; height:36px !important; min-height:36px !important; padding:0 5px !important; gap:3px !important; border-radius:11px !important; } .voice-call-minimized-icon{width:11px;height:11px} .voice-call-minimized-time{ min-width:27px; font-size:9px; } } @media(max-width:300px){ main .inputrow > .voice-call-minimized-task{ min-width:42px !important; max-width:48px !important; padding:0 4px !important; } .voice-call-minimized-icon{display:none} .voice-call-minimized-time{ min-width:0; font-size:9px; } } /* LIGHT — command help: keep only soft structural borders */ body.local-light #commandModalBackdrop.command-modal-backdrop{ background:rgba(241,245,249,.78) !important; border:0 !important; } body.local-light #commandModalBackdrop .light-theme-popup{ background:transparent !important; border:0 !important; box-shadow:none !important; } body.local-light #commandModalBackdrop .command-modal{ background:#fff !important; color:#17212c !important; border:1px solid #cbd5e1 !important; box-shadow:0 18px 50px rgba(51,65,85,.18) !important; } body.local-light #commandModalBackdrop .command-modal-head{ background:#f8fafc !important; border:0 !important; border-bottom:1px solid #dbe3eb !important; box-shadow:none !important; } body.local-light #commandModalBackdrop .command-modal-list{ background:#f1f5f9 !important; border:0 !important; box-shadow:none !important; scrollbar-color:#94a3b8 #f1f5f9; } body.local-light #commandModalBackdrop .command-row{ background:#fff !important; color:#17212c !important; border:1px solid #d8e0e8 !important; box-shadow:0 2px 7px rgba(51,65,85,.06) !important; } body.local-light #commandModalBackdrop .command-row > div, body.local-light #commandModalBackdrop .command-modal-title, body.local-light #commandModalBackdrop .command-code, body.local-light #commandModalBackdrop .command-desc{ background:transparent !important; border:0 !important; box-shadow:none !important; } body.local-light #commandModalBackdrop .command-code{color:#17212c !important} body.local-light #commandModalBackdrop .command-desc{color:#64748b !important} body.local-light #commandModalBackdrop .command-copy, body.local-light #commandModalBackdrop .command-modal-close{ background:#fff !important; color:#1f2937 !important; border:1px solid #cbd5e1 !important; box-shadow:none !important; } body.local-light #commandModalBackdrop .command-copy:hover, body.local-light #commandModalBackdrop .command-modal-close:hover{ background:#f1f5f9 !important; border-color:#94a3b8 !important; } body.local-light #commandModalBackdrop .command-modal-list::-webkit-scrollbar-track{ background:#f1f5f9; } body.local-light #commandModalBackdrop .command-modal-list::-webkit-scrollbar-thumb{ background:#94a3b8; border:2px solid #f1f5f9; border-radius:999px; } /* Modal motion — profile/settings and command help */ .avatar-editor-backdrop, .command-modal-backdrop{ display:flex; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .24s ease, visibility 0s linear .28s; } .avatar-editor-backdrop.open, .command-modal-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; } .avatar-editor, .command-modal{ opacity:0; transform:translateY(10px) scale(.965); transform-origin:center center; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); will-change:opacity,transform; } .avatar-editor-backdrop.open .avatar-editor, .command-modal-backdrop.open .command-modal{ opacity:1; transform:translateY(0) scale(1); } @media(prefers-reduced-motion:reduce){ .avatar-editor-backdrop, .command-modal-backdrop, .avatar-editor, .command-modal{ transition:none !important; } } /* Motion — photo/video chooser and newly arriving chat bubbles */ .media-choice-backdrop{ display:flex; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .22s ease, visibility 0s linear .32s; } .media-choice-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; } .media-choice-sheet{ opacity:0; transform:translateY(18px) scale(.97); transform-origin:center bottom; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); will-change:opacity,transform; } .media-choice-backdrop.open .media-choice-sheet{ opacity:1; transform:translateY(0) scale(1); } .chatlog > .message:not(.history-message){ transform-origin:left bottom; animation:for314MessageInLeft .28s cubic-bezier(.22,1,.36,1) both; } .chatlog > .message.mine:not(.history-message){ transform-origin:right bottom; animation-name:for314MessageInRight; } @keyframes for314MessageInLeft{ from{opacity:0;transform:translate3d(-12px,6px,0) scale(.975)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} } @keyframes for314MessageInRight{ from{opacity:0;transform:translate3d(12px,6px,0) scale(.975)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} } @media(prefers-reduced-motion:reduce){ .media-choice-backdrop, .media-choice-sheet{ transition:none !important; } .chatlog > .message:not(.history-message){ animation:none !important; } } /* Composer-to-bubble flight for the sender's plain-text messages */ .composer-flight-ghost{ position:fixed; z-index:2147483605; margin:0; box-sizing:border-box; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; transform-origin:center center; will-change:transform,opacity,filter; contain:layout paint style; } .chatlog > .message.composer-flight-message{ animation:none !important; } .chatlog > .message.composer-flight-message.composer-flight-target{ opacity:0 !important; } @media(prefers-reduced-motion:reduce){ .composer-flight-ghost{ display:none !important; } .chatlog > .message.composer-flight-message.composer-flight-target{ opacity:1 !important; } } /* textcolor: — synchronized bubble text color */ html.for314-textcolor-active .chatlog .message-bubble:not(.site-security-review-bubble), html.for314-textcolor-active .chatlog .message-bubble:not(.site-security-review-bubble) *{ color:var(--for314-chat-text-color) !important; -webkit-text-fill-color:currentColor !important; } /* bubblecolor: — synchronized bubble background with automatic contrast */ html.for314-bubblecolor-active .chatlog .message-bubble:not(.site-security-review-bubble):not(.slide-lock-bubble):not(.youtube-bubble){ background:var(--for314-chat-bubble-color) !important; background-color:var(--for314-chat-bubble-color) !important; } /* ============================================================ Per-room notification list — profile/settings modal ============================================================ */ .notification-rooms-open-btn{ width:100%; min-height:39px; margin-top:7px; padding:0 12px !important; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; border:1px solid #34445e !important; border-radius:11px !important; background:#17243a !important; color:#eef4ff !important; font-size:11px; font-weight:900; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none; } .notification-rooms-open-btn > :last-child{ font-size:22px; line-height:1; color:#8eb9ef; } .notification-rooms-backdrop{ position:fixed; inset:0; z-index:11470; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(0,0,0,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,visibility 0s linear .28s; } .notification-rooms-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; } .notification-rooms-modal{ width:min(94vw,390px); max-height:min(82vh,620px); padding:13px; display:flex; flex-direction:column; border:1px solid #33435b; border-radius:17px; background:#111827; color:#eef2f7; box-shadow:0 20px 70px rgba(0,0,0,.52); opacity:0; transform:translateY(11px) scale(.965); transform-origin:center center; transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1); } .notification-rooms-backdrop.open .notification-rooms-modal{ opacity:1; transform:translateY(0) scale(1); } .notification-rooms-head{ display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:8px; margin-bottom:7px; } .notification-rooms-title{ min-width:0; text-align:center; font-size:14px; font-weight:1000; } .notification-rooms-back, .notification-rooms-close{ width:32px; height:32px; padding:0 !important; display:flex; align-items:center; justify-content:center; border:1px solid #3b4a61 !important; border-radius:9px !important; background:#17243a !important; color:#eef4ff !important; font-size:21px; line-height:1; cursor:pointer; appearance:none; -webkit-appearance:none; } .notification-rooms-description{ margin:0 2px 10px; color:#aab4c1; font-size:10px; line-height:1.55; } .notification-permission-btn{ width:100%; min-height:40px; margin:0 0 10px; border:1px solid #3976c4 !important; border-radius:11px !important; background:#2765ad !important; color:#fff !important; font-size:11px; font-weight:950; cursor:pointer; appearance:none; -webkit-appearance:none; } .notification-permission-btn:disabled{ background:#56323a !important; border-color:#8a4b56 !important; opacity:.8; cursor:default; } .notification-rooms-list{ min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .notification-room-item{ padding:11px; border:1px solid #314056; border-radius:13px; background:#162033; box-shadow:0 5px 16px rgba(0,0,0,.13); } .notification-room-item.is-on{ border-color:rgba(52,199,89,.48); } .notification-room-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .notification-room-identity{ min-width:0; display:flex; align-items:center; gap:8px; } .notification-room-bell{ flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:#243652; font-size:14px; } .notification-room-name-wrap{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; } .notification-room-name{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef4ff; font-family:inherit; font-size:12px; font-weight:950; } .notification-room-labels{ max-width:100%; display:flex; align-items:center; gap:4px; min-width:0; } .notification-room-current{ flex:0 0 auto; padding:2px 6px; border-radius:999px; background:#294b77; color:#cfe5ff; font-size:8px; font-weight:900; } .notification-room-title{ min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 7px; border-radius:999px; background:rgba(139,92,246,.18); color:#d9ccff; font-size:8px; font-weight:900; } .notification-room-status{ flex:0 0 auto; padding:4px 8px; border-radius:999px; background:#27344a; color:#aeb8c6; font-size:9px; font-weight:950; white-space:nowrap; } .notification-room-item.is-on .notification-room-status{ background:rgba(31,134,78,.24); color:#77e2a3; } .notification-room-actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; } .notification-room-actions button{ min-height:35px; padding:0 8px !important; border-radius:10px !important; font-size:10px; font-weight:950; cursor:pointer; appearance:none; -webkit-appearance:none; } .notification-room-toggle{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #4c647e !important; background:#26384e !important; color:#eef4ff !important; } .notification-room-toggle-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .notification-room-toggle-track{ position:relative; flex:0 0 auto; width:38px; height:22px; border-radius:999px; background:#687789; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background-color .2s ease; } .notification-room-toggle-thumb{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .22s cubic-bezier(.2,.8,.2,1); } .notification-room-access{ grid-column:1 / -1; border:1px solid #3976c4 !important; background:#2765ad !important; color:#fff !important; } .notification-room-item.is-on .notification-room-toggle{ border-color:#3d7358 !important; } .notification-room-item.is-on .notification-room-toggle-track{ background:#23ad62; } .notification-room-item.is-on .notification-room-toggle-thumb{ transform:translateX(16px); } .notification-room-remove{ border:1px solid #8b4652 !important; background:#3c2028 !important; color:#ffbdc6 !important; } .notification-room-actions button:disabled{ opacity:.52; cursor:default; } .notification-rooms-empty{ padding:30px 12px; border:1px dashed #3b4a61; border-radius:13px; color:#9aa4b2; text-align:center; font-size:11px; } body.local-light .notification-rooms-open-btn, body.local-light .notification-rooms-back, body.local-light .notification-rooms-close{ background:#fff !important; color:#17212c !important; border-color:#aeb9c3 !important; } body.local-light .notification-rooms-open-btn > :last-child{color:#2765ad} body.local-light .notification-rooms-modal{ background:#f8fafc !important; color:#111827 !important; border-color:#b7c2cc !important; } body.local-light .notification-rooms-description{color:#566473 !important} body.local-light .notification-room-item{ background:#fff !important; border-color:#cbd5df !important; box-shadow:0 4px 14px rgba(51,65,85,.08); } body.local-light .notification-room-item.is-on{border-color:#6fbd8a !important} body.local-light .notification-room-bell{background:#edf3f8 !important} body.local-light .notification-room-name{color:#17212c !important} body.local-light .notification-room-current{ background:#dbeafe !important; color:#245a91 !important; } body.local-light .notification-room-title{ background:#eee8ff !important; color:#6742a5 !important; } body.local-light .notification-room-status{ background:#e8edf2 !important; color:#4b5967 !important; } body.local-light .notification-room-item.is-on .notification-room-status{ background:#dff5e7 !important; color:#12683c !important; } body.local-light .notification-room-toggle, body.local-light .notification-room-item.is-on .notification-room-toggle{ background:#fff !important; color:#1f2937 !important; border-color:#8c9aa8 !important; } body.local-light .notification-room-toggle-track{ background:#aab4bf !important; box-shadow:inset 0 0 0 1px rgba(31,41,55,.12); } body.local-light .notification-room-item.is-on .notification-room-toggle-track{ background:#20a95d !important; } body.local-light .notification-room-access{ background:#2765ad !important; color:#fff !important; border-color:#2765ad !important; } body.local-light .notification-room-remove{ background:#fff4f5 !important; color:#9f2638 !important; border-color:#d898a2 !important; } body.local-light .notification-rooms-empty{ color:#64748b !important; border-color:#aeb9c3 !important; } @media(max-width:430px){ .notification-rooms-backdrop{align-items:flex-end;padding:8px} .notification-rooms-modal{ width:100%; max-height:min(84vh,680px); border-radius:18px; padding-bottom:calc(13px + env(safe-area-inset-bottom)); } .notification-room-name{max-width:52vw} } @media(prefers-reduced-motion:reduce){ .notification-rooms-backdrop, .notification-rooms-modal{ transition:none !important; } } /* ========================================================= /balloongame — shared balloon popping game ========================================================= */ .balloon-lobby-card{ margin:10px 8px; padding:13px 14px 14px; border:1px solid #435168; border-radius:16px; background:linear-gradient(145deg,#172132,#101722); color:#f5f7fb; box-shadow:0 12px 30px rgba(0,0,0,.22); } .balloon-lobby-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:800; } .balloon-lobby-time{ flex:0 0 auto; padding:4px 8px; border:1px solid #53627a; border-radius:999px; background:#202b3d; color:#dfe7f4; font-size:10px; font-weight:800; } .balloon-lobby-desc{ margin-top:8px; color:#b9c5d5; font-size:11px; line-height:1.65; } .balloon-lobby-members{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; min-height:24px; } .balloon-chip{ display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border:1px solid #42516a; border-radius:999px; background:#1a2535; color:#dbe5f3; font-size:10px; } .balloon-chip.is-me{ border-color:#46b7ff; background:#12344c; color:#dff4ff; } .balloon-lobby-join{ width:100%; min-height:40px; margin-top:11px; border:1px solid #4f9fdf; border-radius:12px; background:#246fae; color:#fff; font:inherit; font-size:12px; font-weight:800; cursor:pointer; } .balloon-lobby-join.is-joined{ border-color:#54b17c; background:#23734b; } .balloon-lobby-join:disabled{opacity:.5;cursor:default} body.balloon-fullscreen-open{overflow:hidden!important} .balloon-game-card{ position:fixed; inset:0; z-index:2147482500; display:flex; flex-direction:column; overflow:hidden; background: radial-gradient(circle at 50% 16%,rgba(46,106,166,.22),transparent 40%), linear-gradient(180deg,#08111e,#03070c 74%); color:#fff; overscroll-behavior:none; touch-action:manipulation; } .balloon-game-head{ position:relative; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; min-height:58px; padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.12); background:rgba(4,9,16,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .balloon-game-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:900; letter-spacing:.02em; } .balloon-game-hud{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; } .balloon-game-timer,.balloon-game-score{ display:inline-flex; align-items:center; min-height:30px; padding:4px 9px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.08); } .balloon-game-controls{display:flex;align-items:center;gap:6px} .balloon-game-close,.balloon-game-sound{ min-height:32px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer; } .balloon-game-close{padding:5px 10px} .balloon-game-sound{width:36px;padding:4px} .balloon-game-sound.is-on{border-color:#48bf7a;background:rgba(49,139,88,.3)} .balloon-ready-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px 18px calc(24px + env(safe-area-inset-bottom)); text-align:center; } .balloon-ready-kicker{ color:#8fcfff; font-size:11px; font-weight:900; letter-spacing:.14em; } .balloon-ready-count{ font-size:clamp(72px,18vw,128px); line-height:.9; font-weight:1000; text-shadow:0 10px 35px rgba(37,154,255,.28); } .balloon-sound-toggle{ min-width:min(320px,86vw); min-height:52px; padding:10px 18px; border:1px solid #657183; border-radius:16px; background:#171f2c; color:#fff; font:inherit; font-size:15px; font-weight:900; cursor:pointer; } .balloon-sound-toggle.is-on{ border-color:#4fcb83; background:#18492f; box-shadow:0 0 0 3px rgba(79,203,131,.09); } .balloon-ready-note{ max-width:520px; color:#b7c4d4; font-size:12px; line-height:1.7; } .balloon-game-body{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); } .balloon-game-board{ position:relative; width:min(100%,calc((100vh - 84px) * .5625)); width:min(100%,calc((100dvh - 84px) * .5625)); max-width:620px; aspect-ratio:9 / 16; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:18px; background: radial-gradient(circle at 25% 18%,rgba(255,255,255,.07),transparent 22%), radial-gradient(circle at 76% 40%,rgba(80,157,255,.08),transparent 28%), linear-gradient(180deg,#13243b 0%,#0b1625 56%,#07101b 100%); box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 50px rgba(68,134,210,.08); user-select:none; -webkit-user-select:none; touch-action:manipulation; } .balloon-game-board::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%,transparent 82%,rgba(0,0,0,.15)); } .balloon-target{ position:absolute; z-index:4; display:block; height:auto; transform-origin:50% 58%; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 7px 7px rgba(0,0,0,.28)); will-change:left,top,transform; } .balloon-target:active{filter:brightness(1.18) drop-shadow(0 5px 5px rgba(0,0,0,.24))} .balloon-live-ranking{ position:absolute; z-index:12; top:14px; left:14px; width:min(240px,44vw); pointer-events:none; } .balloon-live-row{ margin-bottom:4px; overflow:hidden; padding:4px 7px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(3,8,14,.62); color:#eaf1fa; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); } .balloon-live-row.is-me{border-color:#4cb9ff;color:#dff5ff} .balloon-red-explosion{ position:absolute; z-index:15; width:1px; height:1px; pointer-events:none; } .balloon-red-flash{ position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle,#fff 0 6%,#ffdc72 7% 17%,#ff3b30 30% 55%,rgba(210,0,0,.72) 56% 68%,transparent 72%); transform:translate(-50%,-50%) scale(.2); filter:drop-shadow(0 0 10px rgba(255,41,33,.8)); animation:balloon-red-flash .42s ease-out forwards; } .balloon-red-particle{ --bx:30px; --by:0px; --bd:0ms; position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#ff2c20; box-shadow:0 0 7px rgba(255,40,25,.8); animation:balloon-red-particle .5s cubic-bezier(.15,.75,.25,1) var(--bd) forwards; } @keyframes balloon-red-flash{ 0%{opacity:1;transform:translate(-50%,-50%) scale(.18)} 45%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)} } @keyframes balloon-red-particle{ 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(.18)} } .balloon-finish-overlay{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(3,7,12,.7); color:#fff; font-size:clamp(24px,7vw,48px); font-weight:1000; text-align:center; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); } .balloon-finish-overlay[hidden]{display:none!important} body.local-light .balloon-lobby-card{ border-color:#c7d2df; background:linear-gradient(145deg,#fff,#f3f7fb); color:#17212d; box-shadow:0 10px 26px rgba(51,65,85,.1); } body.local-light .balloon-lobby-time, body.local-light .balloon-chip{ border-color:#c2cfdd; background:#eef3f8; color:#334155; } body.local-light .balloon-lobby-desc{color:#617083} body.local-light .balloon-chip.is-me{border-color:#4c9ed7;background:#e4f4ff;color:#184d73} @media(max-width:680px){ .balloon-game-head{ min-height:52px; grid-template-columns:minmax(0,1fr) auto auto; gap:5px; padding-top:6px; padding-bottom:6px; } .balloon-game-title{font-size:11px} .balloon-game-hud{gap:4px;font-size:9px} .balloon-game-timer,.balloon-game-score{min-height:27px;padding:3px 6px} .balloon-game-close{min-height:29px;padding:4px 7px;font-size:9px} .balloon-game-sound{width:31px;min-height:29px;font-size:11px} .balloon-game-body{padding:4px 4px calc(4px + env(safe-area-inset-bottom))} .balloon-game-board{ width:min(100%,calc((100vh - 68px) * .5625)); width:min(100%,calc((100dvh - 68px) * .5625)); border-radius:12px; } .balloon-live-ranking{top:8px;left:8px;width:min(180px,48vw)} .balloon-live-row{padding:3px 5px;font-size:8px} .balloon-ready-wrap{padding:18px 14px calc(18px + env(safe-area-inset-bottom))} .balloon-ready-note{font-size:10px} } @media(max-height:540px){ .balloon-game-head{min-height:44px;padding-top:4px;padding-bottom:4px} .balloon-game-board{width:min(100%,calc((100vh - 52px) * .5625));width:min(100%,calc((100dvh - 52px) * .5625))} .balloon-ready-wrap{gap:9px;padding:10px} .balloon-ready-count{font-size:54px} .balloon-sound-toggle{min-height:42px;font-size:12px} } @media(prefers-reduced-motion:reduce){ .balloon-red-flash,.balloon-red-particle{animation-duration:.18s!important} } /* ========================================================= /slidegame — shared slide-to-unlock game ========================================================= */ .slide-lobby-card{ margin:10px 8px; padding:13px 14px 14px; border:1px solid #435168; border-radius:16px; background:linear-gradient(145deg,#171d28,#0e131c); color:#f5f7fb; box-shadow:0 12px 30px rgba(0,0,0,.22); } .slide-lobby-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800} .slide-lobby-time{flex:0 0 auto;padding:4px 8px;border:1px solid #53627a;border-radius:999px;background:#202733;color:#dfe7f4;font-size:10px;font-weight:800} .slide-lobby-desc{margin-top:8px;color:#b9c5d5;font-size:11px;line-height:1.65} .slide-lobby-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:24px} .slide-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid #42516a;border-radius:999px;background:#19212d;color:#dbe5f3;font-size:10px} .slide-chip.is-me{border-color:#69a9ff;background:#16324f;color:#e7f3ff} .slide-lobby-join{width:100%;min-height:40px;margin-top:11px;border:1px solid #6298dd;border-radius:12px;background:#315f9d;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer} .slide-lobby-join.is-joined{border-color:#54b17c;background:#23734b} .slide-lobby-join:disabled{opacity:.5;cursor:default} body.slide-fullscreen-open{overflow:hidden!important} .slide-game-card{ position:fixed; inset:0; z-index:2147482520; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(180deg,#090b0f,#020304 78%); color:#fff; overscroll-behavior:none; touch-action:none; } .slide-game-head{ position:relative; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; min-height:58px; padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.12); background:rgba(4,5,8,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .slide-game-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:900;letter-spacing:.02em} .slide-game-hud{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900} .slide-game-timer,.slide-game-score{display:inline-flex;align-items:center;min-height:30px;padding:4px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08)} .slide-game-controls{display:flex;align-items:center;gap:6px} .slide-game-close,.slide-game-sound{min-height:32px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:11px;font-weight:800;cursor:pointer} .slide-game-close{padding:5px 10px} .slide-game-sound{width:36px;padding:4px} .slide-game-sound.is-on{border-color:#48bf7a;background:rgba(49,139,88,.3)} .slide-ready-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 18px calc(24px + env(safe-area-inset-bottom));text-align:center} .slide-ready-kicker{color:#b5c7e8;font-size:11px;font-weight:900;letter-spacing:.14em} .slide-ready-count{font-size:clamp(72px,18vw,128px);line-height:.9;font-weight:1000;text-shadow:0 10px 35px rgba(100,150,255,.25)} .slide-sound-toggle{min-width:min(320px,86vw);min-height:52px;padding:10px 18px;border:1px solid #657183;border-radius:16px;background:#171b22;color:#fff;font:inherit;font-size:15px;font-weight:900;cursor:pointer} .slide-sound-toggle.is-on{border-color:#4fcb83;background:#18492f;box-shadow:0 0 0 3px rgba(79,203,131,.09)} .slide-ready-note{max-width:520px;color:#b7c4d4;font-size:12px;line-height:1.7} .slide-game-body{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px 0 calc(8px + env(safe-area-inset-bottom));touch-action:none} .slide-game-board{ position:relative; flex:0 0 auto; width:min(calc(100vw - 16px),calc((100vh - 84px) * .5625)); width:min(calc(100vw - 16px),calc((100dvh - 84px) * .5625)); max-width:620px; margin-inline:auto; aspect-ratio:9 / 16; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; background: radial-gradient(circle at 50% 8%,rgba(255,255,255,.07),transparent 28%), linear-gradient(180deg,#171a1f 0%,#0b0d11 52%,#030405 100%); box-shadow:0 20px 60px rgba(0,0,0,.48),inset 0 0 70px rgba(100,120,160,.07); user-select:none; -webkit-user-select:none; touch-action:none; } .slide-game-board::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.018),transparent 12%,transparent 88%,rgba(255,255,255,.018)); } .slide-lanes{ position:absolute; inset:6% 4% 5%; z-index:5; display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); gap:0; align-content:stretch; align-items:stretch; touch-action:none; } .slide-lanes::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, transparent calc(20% - .5px), rgba(205,219,243,.14) calc(20% - .5px), rgba(205,219,243,.14) calc(20% + .5px), transparent calc(20% + .5px), transparent calc(40% - .5px), rgba(205,219,243,.14) calc(40% - .5px), rgba(205,219,243,.14) calc(40% + .5px), transparent calc(40% + .5px), transparent calc(60% - .5px), rgba(205,219,243,.14) calc(60% - .5px), rgba(205,219,243,.14) calc(60% + .5px), transparent calc(60% + .5px), transparent calc(80% - .5px), rgba(205,219,243,.14) calc(80% - .5px), rgba(205,219,243,.14) calc(80% + .5px), transparent calc(80% + .5px) ); } .slide-lane{ --slide-progress:0; position:relative; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:4px 0; opacity:1; visibility:visible; transform:translateZ(0); transition:opacity .12s ease,transform .12s ease; touch-action:none; } .slide-lane.is-empty{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.965)} .slide-lane.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)} .slide-lane.is-spawning{animation:slidegame-lock-in .18s cubic-bezier(.2,.9,.3,1.18)} .slide-lane.is-clearing{pointer-events:none;animation:slidegame-lock-out .13s ease-in forwards} @keyframes slidegame-lock-in{from{opacity:0;transform:scale(.9) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes slidegame-lock-out{to{opacity:0;transform:scale(.94) translateX(8px)}} .slide-lane-label{padding-left:5px;color:rgba(220,227,238,.58);font-size:8px;font-weight:800;letter-spacing:.14em} .slide-track{ position:relative; width:100%; height:clamp(48px,6.2vh,54px); overflow:hidden; border:1px solid rgba(255,255,255,.23); border-radius:13px; background: linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.025) 45%,rgba(0,0,0,.28) 52%,rgba(255,255,255,.035)), #23262c; box-shadow:inset 0 1px rgba(255,255,255,.14),inset 0 -1px rgba(0,0,0,.65),0 6px 14px rgba(0,0,0,.18); touch-action:none; } .slide-track::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.42; transform:scaleX(var(--slide-progress)); transform-origin:left center; background:linear-gradient(90deg,rgba(75,185,105,.15),rgba(90,220,120,.3)); } .slide-track-text{ position:absolute; inset:0 8px 0 60px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:rgba(255,255,255,.72); font-size:clamp(14px,3.9vw,22px); font-weight:500; letter-spacing:.015em; text-shadow:0 -1px rgba(0,0,0,.75); white-space:nowrap; pointer-events:none; } .slide-track-text::after{ content:"slide to unlock"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:transparent; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 65%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; animation:slidegame-shimmer 1.7s linear infinite; } @keyframes slidegame-shimmer{from{background-position:120% 0}to{background-position:-120% 0}} .slide-knob{ position:absolute; z-index:4; left:4px; top:4px; width:calc(clamp(48px,6.2vh,54px) - 8px); height:calc(100% - 8px); margin:0; padding:0; border:1px solid rgba(255,255,255,.72); border-radius:10px; background: linear-gradient(180deg,#fbfbfb 0%,#d7d9dc 48%,#aeb1b6 51%,#ebedef 100%); color:#62676f; box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.24) inset,0 2px 5px rgba(0,0,0,.42); font:inherit; font-size:0; line-height:1; font-weight:400; display:grid; place-items:center; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; will-change:transform; } .slide-knob:active{cursor:grabbing} .slide-knob span{ position:relative; display:block; width:14px; height:18px; font-size:0; line-height:0; } .slide-knob span::before{ content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; border-top:3px solid #111; border-right:3px solid #111; transform:translate(-62%,-50%) rotate(45deg); transform-origin:center; border-radius:1px; } .slide-knob.is-returning{transition:transform .16s cubic-bezier(.2,.75,.3,1)} .slide-lane.is-dragging .slide-track{border-color:rgba(170,200,255,.58)} .slide-lane.is-unlocked .slide-track{border-color:rgba(80,230,122,.8);box-shadow:0 0 0 2px rgba(80,230,122,.12),inset 0 1px rgba(255,255,255,.15)} .slide-lane.is-unlocked .slide-knob{color:#23834a;background:linear-gradient(180deg,#f5fff8,#cdebd5 48%,#9bcbaa 51%,#eaffef)} .slide-lane.is-unlocked .slide-track-text{opacity:.3} .slide-live-ranking{position:absolute;z-index:12;top:14px;left:14px;width:min(240px,44vw);pointer-events:none} .slide-live-row{margin-bottom:4px;overflow:hidden;padding:4px 7px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(3,4,6,.64);color:#eaf1fa;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .slide-live-row.is-me{border-color:#6eafff;color:#e6f2ff} .slide-finish-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(3,4,6,.76);color:#fff;font-size:clamp(24px,7vw,48px);font-weight:1000;text-align:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .slide-finish-overlay[hidden]{display:none!important} .slide-finish-overlay>div{display:flex;flex-direction:column;align-items:center;gap:12px} .slide-finish-overlay strong{display:block;font-size:clamp(30px,9vw,58px);letter-spacing:.04em} .slide-finish-overlay small{display:block;color:#d9e3ef;font-size:clamp(12px,3.4vw,18px);line-height:1.65;font-weight:800} .slide-game-card.is-gameover .slide-game-board{box-shadow:0 20px 60px rgba(0,0,0,.48),inset 0 0 90px rgba(190,35,35,.16)} body.local-light .slide-lobby-card{border-color:#c7d2df;background:linear-gradient(145deg,#fff,#f3f7fb);color:#17212d;box-shadow:0 10px 26px rgba(51,65,85,.1)} body.local-light .slide-lobby-time,body.local-light .slide-chip{border-color:#c2cfdd;background:#eef3f8;color:#334155} body.local-light .slide-lobby-desc{color:#617083} body.local-light .slide-chip.is-me{border-color:#4c9ed7;background:#e4f4ff;color:#184d73} body.local-light .slide-lanes::before{ background: linear-gradient(to bottom, transparent calc(20% - .5px), rgba(98,116,143,.18) calc(20% - .5px), rgba(98,116,143,.18) calc(20% + .5px), transparent calc(20% + .5px), transparent calc(40% - .5px), rgba(98,116,143,.18) calc(40% - .5px), rgba(98,116,143,.18) calc(40% + .5px), transparent calc(40% + .5px), transparent calc(60% - .5px), rgba(98,116,143,.18) calc(60% - .5px), rgba(98,116,143,.18) calc(60% + .5px), transparent calc(60% + .5px), transparent calc(80% - .5px), rgba(98,116,143,.18) calc(80% - .5px), rgba(98,116,143,.18) calc(80% + .5px), transparent calc(80% + .5px) ); } @media(max-width:680px){ .slide-game-head{min-height:52px;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;padding-top:6px;padding-bottom:6px} .slide-game-title{font-size:11px} .slide-game-hud{gap:4px;font-size:9px} .slide-game-timer,.slide-game-score{min-height:27px;padding:3px 6px} .slide-game-close{min-height:29px;padding:4px 7px;font-size:9px} .slide-game-sound{width:31px;min-height:29px;font-size:11px} .slide-game-body{padding:4px 0 calc(4px + env(safe-area-inset-bottom))} .slide-game-board{width:min(calc(100vw - 8px),calc((100vh - 68px) * .5625));width:min(calc(100vw - 8px),calc((100dvh - 68px) * .5625));border-radius:12px} .slide-live-ranking{top:8px;left:8px;width:min(180px,48vw)} .slide-live-row{padding:3px 5px;font-size:8px} .slide-ready-wrap{padding:18px 14px calc(18px + env(safe-area-inset-bottom))} .slide-ready-note{font-size:10px} .slide-lanes{inset:5% 3.5% 4%;gap:0} .slide-lane-label{font-size:7px} .slide-track-text{left:56px;font-size:clamp(13px,4.2vw,19px)} } @media(max-height:540px){ .slide-game-head{min-height:44px;padding-top:4px;padding-bottom:4px} .slide-game-board{width:min(100%,calc((100vh - 52px) * .5625));width:min(100%,calc((100dvh - 52px) * .5625))} .slide-ready-wrap{gap:9px;padding:10px} .slide-ready-count{font-size:54px} .slide-sound-toggle{min-height:42px;font-size:12px} .slide-lanes{inset:4% 3% 3%;gap:0} .slide-track{height:44px} .slide-knob{width:36px} .slide-knob span{width:12px;height:16px} .slide-knob span::before{width:9px;height:9px;border-top-width:3px;border-right-width:3px} .slide-track-text{left:48px;font-size:13px} } @media(prefers-reduced-motion:reduce){ .slide-track-text::after{animation:none} .slide-knob.is-returning{transition-duration:.08s} .slide-lane.is-spawning,.slide-lane.is-clearing{animation-duration:.06s!important} } /* /slidegame: taller slide lanes for easier play on iPhone */ .slide-lane-label{ display:none!important; } .slide-lane{ padding:4px 0!important; gap:0!important; } .slide-track{ height:calc(100% - 8px)!important; min-height:0!important; border-radius:16px; } .slide-knob{ top:4px!important; height:calc(100% - 8px)!important; width:auto!important; aspect-ratio:1 / 1; border-radius:14px; } .slide-knob span{ width:20px!important; height:26px!important; } .slide-knob span::before{ width:14px!important; height:14px!important; border-top-width:4px!important; border-right-width:4px!important; } .slide-track-text{ inset:0 4% 0 18%!important; font-size:clamp(17px,4.7vw,26px)!important; } @media (max-width:420px){ .slide-lane{padding:3px 0!important} .slide-track{height:calc(100% - 6px)!important} .slide-knob{top:3px!important;height:calc(100% - 6px)!important;border-radius:13px} .slide-knob span{width:18px!important;height:24px!important} .slide-knob span::before{width:13px!important;height:13px!important;border-top-width:4px!important;border-right-width:4px!important} .slide-track-text{inset:0 3% 0 19%!important;font-size:clamp(16px,4.9vw,23px)!important} } /* ========================================================= FOR314 HEADER / TITLE / COMPOSER GLASS POLISH ヘッダーを全面フェードではなく、浮いたガラスカード風に調整 ========================================================= */ header.profile-compact-header{ min-height:auto!important; padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left))!important; border-bottom:0!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } header.profile-compact-header .room{ width:min(900px,calc(100vw - 14px))!important; margin:0 auto!important; padding:10px 14px!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:24px!important; background: linear-gradient(180deg,rgba(46,57,79,.24),rgba(12,16,24,.06)), linear-gradient(180deg,rgba(18,24,35,.86),rgba(8,12,18,.82))!important; box-shadow: 0 18px 40px rgba(0,0,0,.24), 0 5px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.24)!important; backdrop-filter:blur(24px) saturate(165%)!important; -webkit-backdrop-filter:blur(24px) saturate(165%)!important; } main>#roomTitleText{ top:calc(68px + env(safe-area-inset-top))!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:18px!important; background: linear-gradient(180deg,rgba(49,60,82,.22),rgba(14,20,28,.04)), linear-gradient(180deg,rgba(31,39,56,.82),rgba(15,20,31,.78))!important; color:#d4dcea!important; box-shadow: 0 16px 36px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.18)!important; backdrop-filter:blur(22px) saturate(160%)!important; -webkit-backdrop-filter:blur(22px) saturate(160%)!important; } main .chatlog{ top:calc(126px + env(safe-area-inset-top))!important; } main .inputrow{ border-color:rgba(255,255,255,.13)!important; background: linear-gradient(180deg,rgba(50,62,86,.16),rgba(12,18,25,.02)), linear-gradient(180deg,rgba(34,43,60,.80),rgba(15,21,31,.84))!important; box-shadow: 0 22px 52px rgba(0,0,0,.34), 0 7px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.22)!important; backdrop-filter:blur(26px) saturate(165%)!important; -webkit-backdrop-filter:blur(26px) saturate(165%)!important; } main .inputrow #msgInput{ border-color:rgba(255,255,255,.10)!important; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045))!important; box-shadow: inset 0 1px 1px rgba(255,255,255,.04), inset 0 -1px 2px rgba(0,0,0,.18)!important; } main .inputrow #imageBtn, main .inputrow #commandBtn{ background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important; border-color:rgba(255,255,255,.12)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 10px rgba(0,0,0,.12)!important; } main .inputrow #sendBtn{ background:linear-gradient(180deg,#4975c2,#315da8 58%,#23498b)!important; box-shadow: 0 9px 18px rgba(49,93,168,.34), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(17,44,89,.40)!important; } body.local-light header.profile-compact-header{ background:transparent!important; border-bottom:0!important; box-shadow:none!important; } body.local-light header.profile-compact-header .room{ border-color:rgba(86,103,127,.16)!important; background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,248,252,.92))!important; box-shadow: 0 18px 38px rgba(38,58,81,.11), 0 5px 12px rgba(38,58,81,.06), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(160,176,194,.18)!important; } body.local-light main>#roomTitleText{ border-color:rgba(86,103,127,.14)!important; background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(242,247,252,.92))!important; color:#5a6877!important; box-shadow: 0 14px 30px rgba(45,61,80,.10), 0 4px 10px rgba(45,61,80,.05), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(163,177,194,.14)!important; } body.local-light main .inputrow{ border-color:rgba(76,93,116,.14)!important; background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,245,250,.90))!important; box-shadow: 0 22px 46px rgba(43,61,80,.14), 0 7px 16px rgba(43,61,80,.06), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(170,184,199,.18)!important; } body.local-light main .inputrow #msgInput{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,249,252,.92))!important; border-color:rgba(72,88,110,.12)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 1px rgba(147,162,180,.16)!important; } body.local-light main .inputrow #imageBtn, body.local-light main .inputrow #commandBtn{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,246,251,.92))!important; border-color:rgba(72,88,110,.13)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 4px 10px rgba(60,79,102,.08)!important; } body.local-light main .inputrow #sendBtn{ background:linear-gradient(180deg,#5a8ae0,#3a6ec8 58%,#2f5cad)!important; box-shadow: 0 10px 18px rgba(58,110,200,.28), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(28,71,144,.28)!important; } @media(max-width:680px){ header.profile-compact-header{ padding:calc(4px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left))!important; } header.profile-compact-header .room{ width:calc(100vw - 10px)!important; padding:8px 10px!important; border-radius:22px!important; } main>#roomTitleText{ top:calc(61px + env(safe-area-inset-top))!important; width:calc(100vw - 18px)!important; border-radius:16px!important; } main .chatlog{ top:calc(112px + env(safe-area-inset-top))!important; } main .inputrow{ width:calc(100vw - 14px)!important; min-height:54px!important; padding:6px!important; border-radius:27px!important; } } /* ========================================================= FOR314 HEADER / TITLE GLASS TUNE v2 透け感を強め、背後チャットがぼかしでうっすら見えるように調整 ========================================================= */ header.profile-compact-header .room{ border:1px solid rgba(255,255,255,.13)!important; background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)), rgba(12,18,28,.50)!important; box-shadow: 0 18px 38px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.17), inset 0 -1px 0 rgba(0,0,0,.18)!important; backdrop-filter:blur(28px) saturate(170%) brightness(1.02)!important; -webkit-backdrop-filter:blur(28px) saturate(170%) brightness(1.02)!important; } header.profile-compact-header .room::before{ content:""; position:absolute; inset:1px; border-radius:23px; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 38%,rgba(255,255,255,.00) 60%); opacity:.95; } main>#roomTitleText{ border:1px solid rgba(255,255,255,.12)!important; background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)), rgba(18,25,37,.42)!important; color:#dce4ef!important; box-shadow: 0 15px 34px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.16)!important; backdrop-filter:blur(24px) saturate(170%) brightness(1.03)!important; -webkit-backdrop-filter:blur(24px) saturate(170%) brightness(1.03)!important; } main>#roomTitleText::before{ content:""; position:absolute; inset:1px; border-radius:17px; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 70%); } body.local-light header.profile-compact-header .room{ border-color:rgba(92,109,132,.16)!important; background: linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.30)), rgba(246,249,253,.48)!important; box-shadow: 0 18px 36px rgba(42,62,84,.10), 0 5px 12px rgba(42,62,84,.04), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(159,174,193,.12)!important; backdrop-filter:blur(24px) saturate(155%) brightness(1.03)!important; -webkit-backdrop-filter:blur(24px) saturate(155%) brightness(1.03)!important; } body.local-light header.profile-compact-header .room::before{ background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.18) 40%,rgba(255,255,255,0) 72%); } body.local-light main>#roomTitleText{ border-color:rgba(92,109,132,.14)!important; background: linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.28)), rgba(248,250,253,.44)!important; color:#5b6876!important; box-shadow: 0 14px 28px rgba(45,61,80,.09), 0 4px 10px rgba(45,61,80,.04), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(163,177,194,.10)!important; backdrop-filter:blur(22px) saturate(150%) brightness(1.03)!important; -webkit-backdrop-filter:blur(22px) saturate(150%) brightness(1.03)!important; } body.local-light main>#roomTitleText::before{ background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.15) 48%,rgba(255,255,255,0) 72%); } /* ========================================================= FOR314 HEADER GLASS TUNE v3 chatlog上部のフェード用マスクを無効化して、 ヘッダー/タイトルのぼかし越しに背後チャットが見えるようにする ========================================================= */ main .chatlog{ mask-image:none!important; -webkit-mask-image:none!important; } /* ========================================================= FOR314 HEADER GLASS TUNE v4 ヘッダー/タイトル背後の空きレイヤー感をなくすため、 chatlogを上端から流してガラス越しにチャットが見えるようにする ========================================================= */ main .chatlog{ top:0!important; padding-top:12px!important; scroll-padding-top:calc(118px + env(safe-area-inset-top)); } @media(max-width:680px){ main .chatlog{ top:0!important; padding-top:10px!important; scroll-padding-top:calc(104px + env(safe-area-inset-top)); } } /* ========================================================= FOR314 COMPOSER GLASS TUNE v2 入力バーの透明感を少し強める ========================================================= */ main .inputrow{ background: linear-gradient(180deg,rgba(58,72,98,.10),rgba(12,18,25,.01)), rgba(22,29,40,.54)!important; border-color:rgba(255,255,255,.12)!important; box-shadow: 0 20px 48px rgba(0,0,0,.28), 0 6px 14px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.18)!important; backdrop-filter:blur(28px) saturate(170%)!important; -webkit-backdrop-filter:blur(28px) saturate(170%)!important; } main .inputrow #msgInput{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important; border-color:rgba(255,255,255,.09)!important; } main .inputrow #imageBtn, main .inputrow #commandBtn{ background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035))!important; border-color:rgba(255,255,255,.11)!important; } body.local-light main .inputrow{ background: linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.20)), rgba(246,249,252,.36)!important; border-color:rgba(76,93,116,.13)!important; box-shadow: 0 20px 42px rgba(43,61,80,.11), 0 6px 12px rgba(43,61,80,.05), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(170,184,199,.14)!important; backdrop-filter:blur(28px) saturate(155%)!important; -webkit-backdrop-filter:blur(28px) saturate(155%)!important; } body.local-light main .inputrow #msgInput{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.72))!important; border-color:rgba(72,88,110,.10)!important; } body.local-light main .inputrow #imageBtn, body.local-light main .inputrow #commandBtn{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,249,252,.70))!important; border-color:rgba(72,88,110,.11)!important; } /* ========================================================= FOR314 MODAL GLASS TUNE v1 コマンド一覧 / 写真・動画送信メニュー / プロフィール設定 / 各種一覧モーダルをガラス風に統一 ========================================================= */ .command-modal-backdrop, .avatar-editor-backdrop, .media-choice-backdrop, .video-editor-backdrop, .notification-rooms-backdrop, #qrContentModalBackdrop, #arasiModalBackdrop{ background:rgba(6,10,18,.34)!important; backdrop-filter:blur(16px) saturate(145%)!important; -webkit-backdrop-filter:blur(16px) saturate(145%)!important; } .command-modal, .avatar-editor, .media-choice-sheet, .video-editor-panel, .notification-rooms-modal, .qr-content-modal, .arasi-modal, .modal, .modal-content, [role="dialog"]{ border:1px solid rgba(255,255,255,.13)!important; background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)), rgba(17,24,35,.62)!important; color:#eef3fa!important; box-shadow: 0 26px 80px rgba(0,0,0,.36), 0 8px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.18)!important; backdrop-filter:blur(26px) saturate(170%)!important; -webkit-backdrop-filter:blur(26px) saturate(170%)!important; } .command-modal-head, .avatar-editor-body, .qr-content-text, .command-row, .notification-room-item, .video-editor-loading, .video-editor-selection, .arasi-row, .media-choice-btn, .video-editor-btn, .video-editor-close, .qr-content-actions button, #qrContentClose, .avatar-editor-close, .avatar-editor-actions button, .avatar-editor-field-row input, .avatar-editor-field-row button, .notification-rooms-open-btn, .notification-rooms-back, .notification-rooms-close, .notification-permission-btn{ border-color:rgba(255,255,255,.12)!important; } .command-modal-head, .avatar-editor-body, .qr-content-text, .command-row, .notification-room-item, .arasi-row{ background:rgba(255,255,255,.06)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.10)!important; } .command-copy, .media-choice-btn, .video-editor-btn, .video-editor-close, .qr-content-actions button, #qrContentClose, .avatar-editor-close, .avatar-editor-actions button, .avatar-editor-field-row button, .notification-rooms-open-btn, .notification-rooms-back, .notification-rooms-close{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))!important; color:#eef4ff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.10)!important; } .avatar-editor-field-row input, .qr-content-text{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important; color:#f5f8fc!important; } .command-desc, .avatar-editor-copy small, .notification-rooms-description, .notification-room-meta, .media-choice-sub, .video-editor-note, .qr-content-text, .arasi-sub, .arasi-foot{ color:rgba(220,229,240,.80)!important; } #avatarChooseBtn, .notification-permission-btn, #qrContentCopy, .video-editor-btn.primary, .command-copy.is-copied{ background:linear-gradient(180deg,#5a8ae0,#3a6ec8 58%,#2f5cad)!important; border-color:rgba(79,128,214,.85)!important; color:#fff!important; box-shadow:0 10px 18px rgba(58,110,200,.26), inset 0 1px 0 rgba(255,255,255,.24)!important; } .avatar-editor-preview, .notification-room-bell{ background:linear-gradient(180deg,rgba(96,129,177,.42),rgba(45,63,93,.78))!important; border-color:rgba(157,192,235,.34)!important; } body.local-light .command-modal-backdrop, body.local-light .avatar-editor-backdrop, body.local-light .media-choice-backdrop, body.local-light .video-editor-backdrop, body.local-light .notification-rooms-backdrop, body.local-light #qrContentModalBackdrop, body.local-light #arasiModalBackdrop{ background:rgba(232,238,244,.30)!important; backdrop-filter:blur(16px) saturate(130%)!important; -webkit-backdrop-filter:blur(16px) saturate(130%)!important; } body.local-light .command-modal, body.local-light .avatar-editor, body.local-light .media-choice-sheet, body.local-light .video-editor-panel, body.local-light .notification-rooms-modal, body.local-light .qr-content-modal, body.local-light .arasi-modal, body.local-light .modal, body.local-light .modal-content, body.local-light [role="dialog"]{ border:1px solid rgba(86,103,127,.15)!important; background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.24)), rgba(246,249,253,.42)!important; color:#17222e!important; box-shadow: 0 22px 52px rgba(43,61,80,.13), 0 7px 16px rgba(43,61,80,.05), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(166,180,196,.14)!important; backdrop-filter:blur(24px) saturate(150%)!important; -webkit-backdrop-filter:blur(24px) saturate(150%)!important; } body.local-light .command-modal-head, body.local-light .avatar-editor-body, body.local-light .qr-content-text, body.local-light .command-row, body.local-light .notification-room-item, body.local-light .arasi-row{ background:rgba(255,255,255,.36)!important; border-color:rgba(86,103,127,.12)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(166,180,196,.10)!important; } body.local-light .command-copy, body.local-light .media-choice-btn, body.local-light .video-editor-btn, body.local-light .video-editor-close, body.local-light .qr-content-actions button, body.local-light #qrContentClose, body.local-light .avatar-editor-close, body.local-light .avatar-editor-actions button, body.local-light .avatar-editor-field-row button, body.local-light .notification-rooms-open-btn, body.local-light .notification-rooms-back, body.local-light .notification-rooms-close{ background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,247,251,.68))!important; color:#1b2734!important; border-color:rgba(86,103,127,.12)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(60,79,102,.07)!important; } body.local-light .avatar-editor-field-row input, body.local-light .qr-content-text{ background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(246,249,252,.70))!important; color:#17222e!important; border-color:rgba(86,103,127,.11)!important; } body.local-light .command-desc, body.local-light .avatar-editor-copy small, body.local-light .notification-rooms-description, body.local-light .notification-room-meta, body.local-light .media-choice-sub, body.local-light .video-editor-note, body.local-light .arasi-sub, body.local-light .arasi-foot{ color:#607080!important; } body.local-light .avatar-editor-preview, body.local-light .notification-room-bell{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(233,240,247,.76))!important; border-color:rgba(86,103,127,.14)!important; color:#27405c!important; } /* ========================================================= FOR314 COMMAND MODAL GLASS TUNE v2 コマンド一覧だけ、さらに透明感を強める ========================================================= */ #commandModalBackdrop.command-modal-backdrop{ background:rgba(6,10,18,.22)!important; backdrop-filter:blur(14px) saturate(138%)!important; -webkit-backdrop-filter:blur(14px) saturate(138%)!important; } #commandModalBackdrop .command-modal{ border-color:rgba(255,255,255,.12)!important; background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)), rgba(17,24,35,.46)!important; box-shadow: 0 24px 72px rgba(0,0,0,.30), 0 7px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.16)!important; backdrop-filter:blur(30px) saturate(180%)!important; -webkit-backdrop-filter:blur(30px) saturate(180%)!important; } #commandModalBackdrop .command-modal-head{ background:rgba(255,255,255,.035)!important; border-bottom-color:rgba(255,255,255,.10)!important; } #commandModalBackdrop .command-modal-list{ background:transparent!important; } #commandModalBackdrop .command-row{ background:rgba(255,255,255,.038)!important; border-color:rgba(255,255,255,.09)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.08)!important; } #commandModalBackdrop .command-copy, #commandModalBackdrop .command-modal-close{ background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025))!important; border-color:rgba(255,255,255,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.08)!important; } #commandModalBackdrop .command-desc{ color:rgba(223,231,240,.78)!important; } body.local-light #commandModalBackdrop.command-modal-backdrop{ background:rgba(232,238,244,.18)!important; backdrop-filter:blur(14px) saturate(125%)!important; -webkit-backdrop-filter:blur(14px) saturate(125%)!important; } body.local-light #commandModalBackdrop .command-modal{ border-color:rgba(86,103,127,.14)!important; background: linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.18)), rgba(246,249,253,.30)!important; box-shadow: 0 22px 48px rgba(43,61,80,.11), 0 6px 14px rgba(43,61,80,.04), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(170,184,199,.12)!important; backdrop-filter:blur(28px) saturate(150%)!important; -webkit-backdrop-filter:blur(28px) saturate(150%)!important; } body.local-light #commandModalBackdrop .command-modal-head{ background:rgba(255,255,255,.22)!important; border-bottom-color:rgba(86,103,127,.10)!important; } body.local-light #commandModalBackdrop .command-modal-list{ background:transparent!important; } body.local-light #commandModalBackdrop .command-row{ background:rgba(255,255,255,.24)!important; border-color:rgba(86,103,127,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(170,184,199,.08)!important; } body.local-light #commandModalBackdrop .command-copy, body.local-light #commandModalBackdrop .command-modal-close{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,247,251,.56))!important; border-color:rgba(86,103,127,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 4px 10px rgba(60,79,102,.05)!important; } body.local-light #commandModalBackdrop .command-desc{ color:#6b7b8d!important; } /* ========================================================= FOR314 HEADER SAFE FIRST MESSAGE TUNE v1 ヘッダー背後にはチャットを流しつつ、最初のメッセージが ヘッダー/タイトルに隠れないよう、chatlog内側の上余白を戻す ========================================================= */ main .chatlog{ top:0!important; padding-top:calc(126px + env(safe-area-inset-top) + var(--for314-bookmark-offset,0px))!important; scroll-padding-top:calc(126px + env(safe-area-inset-top) + var(--for314-bookmark-offset,0px))!important; } @media(max-width:680px){ main .chatlog{ top:0!important; padding-top:calc(112px + env(safe-area-inset-top) + var(--for314-bookmark-offset,0px))!important; scroll-padding-top:calc(112px + env(safe-area-inset-top) + var(--for314-bookmark-offset,0px))!important; } } /* ========================================================= FOR314 SLIDE TEXT TUNE v1 slide to unlock の文字つぶれ感を軽減 ========================================================= */ .slide-lock-label{ font-size:16px!important; font-weight:400!important; letter-spacing:.01em!important; color:rgba(255,255,255,.52)!important; text-shadow: 0 1px 1px rgba(0,0,0,.88), 0 0 1px rgba(0,0,0,.40)!important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .slide-lock-label::after{ background:linear-gradient( 105deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.08) 36%, rgba(255,255,255,.92) 48%, rgba(255,255,255,.92) 54%, rgba(255,255,255,.10) 67%, rgba(255,255,255,.10) 100% )!important; background-size:210% 100%!important; } .slide-track-text{ font-size:clamp(14px,3.7vw,21px)!important; font-weight:400!important; letter-spacing:.01em!important; color:rgba(255,255,255,.82)!important; text-shadow: 0 1px 1px rgba(0,0,0,.86), 0 0 1px rgba(0,0,0,.38)!important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .slide-track-text::after{ background:linear-gradient( 105deg, rgba(255,255,255,.00) 30%, rgba(255,255,255,.88) 48%, rgba(255,255,255,.00) 64% )!important; background-size:205% 100%!important; } @media(max-width:430px){ .slide-lock-label{font-size:15px!important} .slide-track-text{font-size:clamp(13px,3.8vw,19px)!important} } /* ========================================================= FOR314 DRAW UI TUNE v2 ライトモードの色パレット崩れ修正 + スマホ向けUI最適化 ========================================================= */ #drawTools{ width:min(92vw,430px); } .draw-tools-mode, .draw-tools-sizes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .draw-tools-colors{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); } .draw-tool-btn, .draw-size-btn{ justify-content:center; text-align:center; } .draw-color-btn{ justify-self:center; background:var(--sw,#fff)!important; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.18)!important; } .draw-color-btn.is-active{ outline:3px solid rgba(255,255,255,.92)!important; outline-offset:1px; box-shadow:0 0 0 2px rgba(28,126,255,.30), inset 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.24)!important; } .draw-color-btn[data-draw-color="#ffffff"]{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.32),0 1px 2px rgba(0,0,0,.18)!important; } body.local-light #drawLayer{ background:rgba(233,239,246,.52)!important; backdrop-filter:blur(3px)!important; -webkit-backdrop-filter:blur(3px)!important; } body.local-light #drawTools{ background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,248,252,.72))!important; border:1px solid rgba(83,101,126,.16)!important; box-shadow:0 18px 44px rgba(43,61,80,.16), inset 0 1px 0 rgba(255,255,255,.96)!important; } body.local-light .draw-tool-btn, body.local-light .draw-size-btn{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,247,251,.84))!important; border-color:rgba(86,103,127,.14)!important; color:#1e2b39!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 2px 6px rgba(43,61,80,.07)!important; } body.local-light .draw-tool-btn.is-active, body.local-light .draw-size-btn.is-active{ background:linear-gradient(180deg,#5a8ae0,#3a6ec8 58%,#2f5cad)!important; border-color:rgba(79,128,214,.86)!important; color:#fff!important; } body.local-light .draw-tool-btn.draw-tool-clear{ background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,245,249,.76))!important; } body.local-light .draw-color-btn{ border-color:rgba(86,103,127,.32)!important; background:var(--sw,#fff)!important; } body.local-light .draw-color-btn.is-active{ outline:3px solid rgba(35,55,84,.88)!important; box-shadow:0 0 0 2px rgba(58,110,200,.18), inset 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(43,61,80,.16)!important; } body.local-light #drawCloseBtn{ background:rgba(255,255,255,.84)!important; color:#1c2836!important; box-shadow:0 8px 18px rgba(43,61,80,.12)!important; } body.local-light #drawHint{ color:#4f6175!important; } @media(max-width:768px){ #drawTools{ left:8px!important; right:8px!important; top:auto!important; bottom:calc(env(safe-area-inset-bottom) + 70px)!important; width:auto!important; max-width:none!important; padding:10px!important; gap:9px!important; border-radius:22px!important; } .draw-tools-row{gap:9px!important} .draw-tool-btn, .draw-size-btn{ min-height:40px!important; font-size:13px!important; padding:0 12px!important; } .draw-tools-colors{ grid-template-columns:repeat(4,minmax(0,1fr))!important; row-gap:10px!important; } .draw-color-btn{ width:34px!important; height:34px!important; } .draw-size-btn{min-width:0!important} #drawCloseBtn{ top:10px!important; right:10px!important; bottom:auto!important; left:auto!important; transform:none!important; } #drawHint{ bottom:calc(env(safe-area-inset-bottom) + 40px)!important; font-size:10px!important; white-space:normal!important; max-width:76vw!important; text-align:center!important; } } @media(max-width:420px){ #drawTools{ bottom:calc(env(safe-area-inset-bottom) + 64px)!important; padding:9px!important; border-radius:20px!important; } .draw-tool-btn, .draw-size-btn{ min-height:38px!important; font-size:12px!important; padding:0 10px!important; } .draw-color-btn{ width:32px!important; height:32px!important; } } /* ========================================================= FOR314 SLIDE TEXT REVERT v1 slide to unlock 文字を前回の見た目へ戻す ========================================================= */ .slide-lock-label{ font-size:17px!important; font-weight:400!important; letter-spacing:.015em!important; color:rgba(255,255,255,.37)!important; text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.10)!important; -webkit-font-smoothing:auto; text-rendering:auto; } .slide-lock-label::after{ background:linear-gradient( 105deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.20) 34%, rgba(255,255,255,.98) 46%, rgba(255,255,255,.98) 53%, rgba(255,255,255,.20) 66%, rgba(255,255,255,.20) 100% )!important; background-size:230% 100%!important; } .slide-track-text{ font-size:clamp(14px,3.9vw,22px)!important; font-weight:500!important; letter-spacing:.015em!important; color:rgba(255,255,255,.72)!important; text-shadow:0 -1px rgba(0,0,0,.75)!important; -webkit-font-smoothing:auto; text-rendering:auto; } .slide-track-text::after{ background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 48%,transparent 65%)!important; background-size:220% 100%!important; } @media(max-width:430px){ .slide-lock-label{font-size:17px!important} .slide-track-text{font-size:clamp(14px,3.9vw,22px)!important} } /* ========================================================= FOR314 SLIDE OLD IPHONE STYLE v1 ロックメッセージの slide to unlock を昔のiPhone風に調整 右側の白い流れる模様は廃止 ========================================================= */ .slide-lock-track{ background: linear-gradient(180deg,rgba(7,7,8,.96) 0%,rgba(24,24,24,.94) 50%,rgba(10,10,10,.98) 100%)!important; border-color:rgba(255,255,255,.12)!important; box-shadow: inset 0 2px 6px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.03)!important; } .slide-lock-label{ color:rgba(245,245,245,.42)!important; text-shadow: 0 -1px 0 rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.08)!important; } .slide-lock-label::after{ background:linear-gradient( 180deg, rgba(255,255,255,.58) 0%, rgba(230,230,230,.34) 46%, rgba(160,160,160,.20) 100% )!important; background-size:100% 100%!important; background-position:0 0!important; animation:none!important; opacity:.72!important; } /* ========================================================= FOR314 SLIDE COMMAND REVERT v1 slide: コマンドのロックメッセージだけを 20260817_1 版へ戻す /slidegame 側は変更しない ========================================================= */ .message-bubble.slide-lock-bubble .slide-lock-track{ background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(30,30,30,.92))!important; border:1px solid rgba(255,255,255,.14)!important; box-shadow:inset 0 2px 5px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)!important; } .message-bubble.slide-lock-bubble .slide-lock-label{ font-size:17px!important; font-weight:400!important; letter-spacing:.015em!important; color:rgba(255,255,255,.37)!important; text-shadow:0 -1px 0 #000,0 1px 0 rgba(255,255,255,.10)!important; -webkit-font-smoothing:auto!important; text-rendering:auto!important; } .message-bubble.slide-lock-bubble .slide-lock-label::after{ background:linear-gradient( 105deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.20) 34%, rgba(255,255,255,.98) 46%, rgba(255,255,255,.98) 53%, rgba(255,255,255,.20) 66%, rgba(255,255,255,.20) 100% )!important; background-size:230% 100%!important; background-position:120% 0!important; -webkit-background-clip:text!important; background-clip:text!important; animation:slideUnlockShimmer 2.35s linear infinite!important; opacity:1!important; } @media(max-width:430px){ .message-bubble.slide-lock-bubble .slide-lock-label{font-size:16px!important} } @media(max-width:300px){ .message-bubble.slide-lock-bubble .slide-lock-label{font-size:14px!important} } /* ========================================================= FOR314 MASUGAME MOBILE + GLASS TUNE v1 - スマホでの横スクロール抑制 - ますゲームをガラス調に ========================================================= */ #masuGameLayer{ overflow:hidden!important; overscroll-behavior:contain; } .masu-game-card{ box-sizing:border-box; width:min(94vw,660px)!important; max-width:calc(100vw - 24px)!important; max-height:calc(100dvh - 24px)!important; overflow-x:hidden!important; overflow-y:auto!important; padding:14px!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:22px!important; background:linear-gradient(180deg,rgba(20,28,43,.78),rgba(7,13,24,.70))!important; box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10)!important; backdrop-filter:blur(22px) saturate(145%)!important; -webkit-backdrop-filter:blur(22px) saturate(145%)!important; } .masu-game-head{ gap:12px!important; } .masu-game-timer{ border:1px solid rgba(255,255,255,.12)!important; background:rgba(59,92,183,.34)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important; } .masu-grid{ width:100%!important; max-width:100%!important; min-width:0!important; aspect-ratio:1 / 1; gap:4px!important; margin:0 auto!important; overflow:hidden!important; } .masu-cell{ min-width:0!important; width:100%!important; aspect-ratio:1 / 1; border:1px solid rgba(109,133,194,.38)!important; border-radius:8px!important; background:linear-gradient(180deg,rgba(29,42,70,.44),rgba(20,31,55,.24))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.16)!important; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); } .masu-cell:hover{filter:brightness(1.08)!important} .masu-game-status{ color:#e7eefc!important; } body.local-light #masuGameLayer{ background:rgba(232,238,246,.50)!important; backdrop-filter:blur(5px)!important; -webkit-backdrop-filter:blur(5px)!important; } body.local-light .masu-game-card{ border:1px solid rgba(92,110,135,.16)!important; background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(244,248,252,.68))!important; box-shadow:0 22px 54px rgba(43,61,80,.16), inset 0 1px 0 rgba(255,255,255,.96)!important; } body.local-light .masu-game-title{color:#192636!important} body.local-light .masu-game-hint{color:#607186!important} body.local-light .masu-game-timer{ color:#18304f!important; border-color:rgba(92,110,135,.12)!important; background:rgba(93,129,214,.18)!important; } body.local-light .masu-cell{ border-color:rgba(93,116,168,.34)!important; background:linear-gradient(180deg,rgba(226,235,252,.72),rgba(208,222,248,.46))!important; color:#1b2a3b!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 3px rgba(43,61,80,.10)!important; } body.local-light .masu-game-status{color:#23415e!important} @media(max-width:430px){ #masuGameLayer{padding:6px!important} .masu-game-card{ width:calc(100vw - 12px)!important; max-width:calc(100vw - 12px)!important; max-height:calc(100dvh - 12px)!important; padding:10px!important; border-radius:18px!important; } .masu-game-title{font-size:15px!important} .masu-game-timer{min-width:68px!important;font-size:12px!important;padding:6px 8px!important} .masu-game-hint{font-size:11px!important;margin-bottom:8px!important} .masu-grid{ gap:3px!important; } .masu-cell{ border-radius:6px!important; font-size:clamp(11px,6.7vw,24px)!important; } } /* ========================================================= FOR314 COMMAND + DRAW ADJUST TUNE v1 - コマンド一覧は「ちょい透明」に調整 - お絵描きツールはライト/ダーク共通で白背景、デフォルト黒ペン ========================================================= */ #commandModalBackdrop.command-modal-backdrop{ background:rgba(6,10,18,.28)!important; } #commandModalBackdrop .command-modal{ background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)), rgba(17,24,35,.58)!important; } #commandModalBackdrop .command-modal-head{ background:rgba(255,255,255,.050)!important; } #commandModalBackdrop .command-row{ background:rgba(255,255,255,.050)!important; border-color:rgba(255,255,255,.10)!important; } #commandModalBackdrop .command-copy, #commandModalBackdrop .command-modal-close{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important; } body.local-light #commandModalBackdrop.command-modal-backdrop{ background:rgba(232,238,244,.22)!important; } body.local-light #commandModalBackdrop .command-modal{ background: linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.24)), rgba(246,249,253,.40)!important; } body.local-light #commandModalBackdrop .command-modal-head{ background:rgba(255,255,255,.28)!important; } body.local-light #commandModalBackdrop .command-row{ background:rgba(255,255,255,.28)!important; } #drawLayer{ background:rgba(9,14,22,.20)!important; backdrop-filter:blur(2px)!important; -webkit-backdrop-filter:blur(2px)!important; } #drawCanvas{ background:#ffffff!important; } #drawTools, body.local-light #drawTools{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,252,.94))!important; border:1px solid rgba(86,103,127,.14)!important; box-shadow:0 18px 44px rgba(43,61,80,.16), inset 0 1px 0 rgba(255,255,255,.98)!important; } .draw-tool-btn, .draw-size-btn, body.local-light .draw-tool-btn, body.local-light .draw-size-btn{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,246,250,.88))!important; border-color:rgba(86,103,127,.14)!important; color:#1e2b39!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 2px 6px rgba(43,61,80,.07)!important; } .draw-tool-btn.is-active, .draw-size-btn.is-active, body.local-light .draw-tool-btn.is-active, body.local-light .draw-size-btn.is-active{ background:linear-gradient(180deg,#5a8ae0,#3a6ec8 58%,#2f5cad)!important; border-color:rgba(79,128,214,.86)!important; color:#fff!important; } .draw-tool-btn.draw-tool-clear, body.local-light .draw-tool-btn.draw-tool-clear{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(241,244,248,.80))!important; } .draw-color-btn, body.local-light .draw-color-btn{ background:var(--sw,#fff)!important; border-color:rgba(86,103,127,.32)!important; } .draw-color-btn.is-active, body.local-light .draw-color-btn.is-active{ outline:3px solid rgba(35,55,84,.88)!important; box-shadow:0 0 0 2px rgba(58,110,200,.18), inset 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(43,61,80,.16)!important; } .draw-color-btn[data-draw-color="#111111"]{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.20)!important; } #drawCloseBtn, body.local-light #drawCloseBtn{ background:rgba(255,255,255,.92)!important; color:#1c2836!important; box-shadow:0 8px 18px rgba(43,61,80,.12)!important; } #drawHint, body.local-light #drawHint{ color:#405063!important; } /* ========================================================= FOR314 SLIDEGAME AUDIO + STYLE FIX v1 - /slidegame の click 音を iPhone で再び鳴りやすく - 右側の白い変なハイライトを除去 ========================================================= */ .slide-game-card .slide-track-text{ color:rgba(238,238,238,.70)!important; text-shadow:0 -1px 0 rgba(0,0,0,.88),0 1px 0 rgba(255,255,255,.06)!important; -webkit-font-smoothing:auto!important; text-rendering:auto!important; } .slide-game-card .slide-track-text::after{ content:none!important; display:none!important; animation:none!important; background:none!important; } .slide-game-card .slide-track{ background: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 46%,rgba(0,0,0,.28) 54%,rgba(255,255,255,.04)), #23262c!important; } /* ========================================================= FOR314 CALL STRONG GLASS v1 /call 画面をより強い透明感のあるガラスUIへ ========================================================= */ .voice-call-backdrop{ background:rgba(4,10,18,.22)!important; backdrop-filter:blur(12px) saturate(135%)!important; -webkit-backdrop-filter:blur(12px) saturate(135%)!important; } .voice-call-modal{ border:1px solid rgba(180,220,255,.18)!important; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)), linear-gradient(180deg,rgba(15,29,48,.50),rgba(7,15,28,.34))!important; box-shadow: 0 24px 72px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04)!important; backdrop-filter:blur(24px) saturate(145%)!important; -webkit-backdrop-filter:blur(24px) saturate(145%)!important; } body.local-light .voice-call-backdrop{ background:rgba(229,236,244,.18)!important; backdrop-filter:blur(12px) saturate(135%)!important; -webkit-backdrop-filter:blur(12px) saturate(135%)!important; } body.local-light .voice-call-modal{ color:#152638!important; border-color:rgba(93,122,160,.12)!important; background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.22)), linear-gradient(180deg,rgba(244,248,252,.26),rgba(228,238,248,.16))!important; box-shadow: 0 24px 72px rgba(43,61,80,.14), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.24)!important; } .voice-call-top{ border-radius:16px!important; background:rgba(255,255,255,.045)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important; } body.local-light .voice-call-top{ background:rgba(255,255,255,.22)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.82)!important; } .voice-call-countdown{ opacity:.82!important; } .voice-call-x, .voice-call-minimize{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important; } body.local-light .voice-call-x, body.local-light .voice-call-minimize{ background:rgba(255,255,255,.30)!important; border:1px solid rgba(93,122,160,.10)!important; } .voice-call-users{ gap:8px!important; } .voice-call-user{ background:rgba(255,255,255,.048)!important; border:1px solid rgba(255,255,255,.075)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important; backdrop-filter:blur(10px) saturate(135%); -webkit-backdrop-filter:blur(10px) saturate(135%); } body.local-light .voice-call-user{ background:rgba(255,255,255,.30)!important; border:1px solid rgba(93,122,160,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.90)!important; } .voice-call-control{ background:rgba(255,255,255,.055)!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important; backdrop-filter:blur(10px) saturate(135%); -webkit-backdrop-filter:blur(10px) saturate(135%); } body.local-light .voice-call-control{ background:rgba(255,255,255,.28)!important; border:1px solid rgba(93,122,160,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.90)!important; } .voice-call-control.is-off{ background:rgba(245,80,80,.16)!important; border-color:rgba(255,120,120,.18)!important; } .voice-call-control.leave{ background:linear-gradient(180deg,rgba(255,110,126,.92),rgba(214,52,72,.76))!important; border-color:rgba(255,160,170,.20)!important; box-shadow:0 8px 18px rgba(160,35,52,.20), inset 0 1px 0 rgba(255,255,255,.20)!important; } .voice-call-ended{ background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.08)!important; } body.local-light .voice-call-ended{ background:rgba(255,255,255,.30)!important; border:1px solid rgba(93,122,160,.10)!important; } main .inputrow > .voice-call-minimized-task{ background:rgba(255,255,255,.07)!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important; backdrop-filter:blur(12px) saturate(135%); -webkit-backdrop-filter:blur(12px) saturate(135%); } body.local-light main .inputrow > .voice-call-minimized-task{ background:rgba(255,255,255,.34)!important; border:1px solid rgba(93,122,160,.10)!important; } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v1 参加制・同期YouTube視聴ルーム ========================================================= */ .youtube-room-card{ margin:10px 8px; padding:13px 14px 14px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)), rgba(17,24,35,.60); color:#f1f6fd; box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(20px) saturate(155%); -webkit-backdrop-filter:blur(20px) saturate(155%); } .youtube-room-card.is-ended{opacity:.58} .youtube-room-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .youtube-room-card-title{font-size:14px;font-weight:950;letter-spacing:.01em} .youtube-room-card-badge{flex:0 0 auto;padding:4px 8px;border:1px solid rgba(111,166,255,.34);border-radius:999px;background:rgba(61,109,190,.22);color:#cfe0ff;font-size:9px;font-weight:950;letter-spacing:.12em} .youtube-room-card-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;margin-top:7px;color:#aebbd0;font-size:10px;font-weight:700} .youtube-room-card-video{display:flex;align-items:center;justify-content:flex-start;margin-top:9px;min-height:0;color:#d9e5f5;font-size:10px;overflow:hidden} .youtube-room-card-thumb{display:block;width:min(176px,52%);aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:#000;box-shadow:0 5px 14px rgba(0,0,0,.18)} .youtube-room-card-thumb-fallback{display:block;max-width:100%;padding:7px 9px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .youtube-room-card-status{margin-top:8px;color:#b9c7da;font-size:10px;line-height:1.55} .youtube-room-card-participants{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:24px} .youtube-room-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.05);color:#e4edf9;font-size:9px;font-weight:800} .youtube-room-empty{color:#8f9bae;font-size:9px;align-self:center} .youtube-room-join{width:100%;min-height:42px;margin-top:10px;border:1px solid rgba(107,153,232,.62);border-radius:13px;background:linear-gradient(180deg,#4779c6,#315fa8);color:#fff;font:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(33,77,145,.22),inset 0 1px 0 rgba(255,255,255,.18)} .youtube-room-join:disabled{opacity:.68;cursor:default} .youtube-room-panel{ position:fixed; z-index:15450; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,780px); max-height:min(76dvh,680px); overflow:auto; border:1px solid rgba(255,255,255,.16); border-radius:22px; background: linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025)), rgba(9,15,26,.66); color:#f4f8ff; box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%); overscroll-behavior:contain; } .youtube-room-panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)} .youtube-room-panel-title{display:flex;flex-direction:column;min-width:0} .youtube-room-panel-title strong{font-size:13px;font-weight:950} .youtube-room-panel-title span{margin-top:2px;color:#aebbd0;font-size:9px;font-weight:700} .youtube-room-panel-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto} .youtube-room-panel-actions button{min-height:32px;padding:4px 9px;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.065);color:#f4f8ff;font:inherit;font-size:9px;font-weight:850;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} .youtube-room-panel-actions .youtube-room-leave{background:rgba(214,59,76,.70);border-color:rgba(255,130,140,.20)} .youtube-room-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden} .youtube-room-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .youtube-room-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 42px 9px 11px;color:#b6c3d5;font-size:9px;font-weight:700} .youtube-room-panel-status{min-width:0;overflow-wrap:anywhere} .youtube-room-panel-people{flex:0 0 auto;white-space:nowrap;color:#d7e4f6} body.local-light .youtube-room-card{ border-color:rgba(88,107,132,.14); background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(245,249,253,.64)); color:#172434; box-shadow:0 16px 36px rgba(43,61,80,.12),inset 0 1px 0 rgba(255,255,255,.95); } body.local-light .youtube-room-card-badge{background:rgba(72,116,188,.12);border-color:rgba(72,116,188,.20);color:#365d98} body.local-light .youtube-room-card-meta,body.local-light .youtube-room-card-status{color:#627287} body.local-light .youtube-room-card-video{color:#30445e} body.local-light .youtube-room-card-thumb{border-color:rgba(88,107,132,.12);box-shadow:0 5px 14px rgba(43,61,80,.10)} body.local-light .youtube-room-card-thumb-fallback{background:rgba(255,255,255,.46);border-color:rgba(88,107,132,.10);color:#30445e} body.local-light .youtube-room-chip{background:rgba(255,255,255,.50);border-color:rgba(88,107,132,.10);color:#2d415a} body.local-light .youtube-room-empty{color:#748397} body.local-light .youtube-room-panel{ border-color:rgba(88,107,132,.14); background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(241,247,252,.62)); color:#172434; box-shadow:0 28px 72px rgba(43,61,80,.18),inset 0 1px 0 rgba(255,255,255,.96); } body.local-light .youtube-room-panel-top{border-bottom-color:rgba(88,107,132,.10);background:rgba(255,255,255,.22)} body.local-light .youtube-room-panel-title span{color:#65758a} body.local-light .youtube-room-panel-actions button{background:rgba(255,255,255,.48);border-color:rgba(88,107,132,.11);color:#24364b} body.local-light .youtube-room-panel-actions .youtube-room-leave{background:rgba(218,69,84,.84);color:#fff;border-color:rgba(180,60,75,.18)} body.local-light .youtube-room-panel-foot{color:#627287} body.local-light .youtube-room-panel-people{color:#314a67} @media(max-width:680px){ .youtube-room-card{margin:8px 3px;padding:11px 11px 12px;border-radius:16px} .youtube-room-panel{width:calc(100vw - 12px);max-height:72dvh;border-radius:18px} .youtube-room-panel-top{align-items:flex-start;padding:8px} .youtube-room-panel-title strong{font-size:11px} .youtube-room-panel-actions{gap:3px} .youtube-room-panel-actions button{min-height:30px;padding:4px 7px;font-size:8px;border-radius:9px} .youtube-room-panel-foot{padding:7px 8px;font-size:8px;align-items:flex-start} } @media(max-width:360px){ .youtube-room-panel-title span{display:none} .youtube-room-panel-actions .youtube-room-resync{display:none} .youtube-room-panel-actions button{padding:3px 6px} } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v2 PC: D&D + composer task minimize / Mobile: video + chat vertical layout ========================================================= */ .youtube-room-panel-top{ cursor:move; user-select:none; -webkit-user-select:none; touch-action:none; } .youtube-room-panel-top button{cursor:pointer;touch-action:manipulation} .youtube-room-panel.is-dragging{transition:none!important;box-shadow:0 34px 100px rgba(0,0,0,.50),0 0 0 1px rgba(111,166,255,.16),inset 0 1px 0 rgba(255,255,255,.15)} .youtube-room-panel.is-minimized{display:none!important} .youtube-room-minimize{min-width:32px!important;font-size:15px!important;line-height:1!important;padding-bottom:7px!important} .youtube-room-mini-chat{display:none} main .inputrow > .youtube-room-minimized-task{ position:relative!important; flex:0 0 42px!important; width:42px!important; min-width:42px!important; max-width:42px!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0!important; display:inline-grid!important; place-items:center!important; overflow:visible!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:15px!important; background:linear-gradient(180deg,rgba(68,107,172,.74),rgba(36,70,126,.72))!important; color:#fff!important; box-shadow:0 5px 16px rgba(22,49,96,.20),inset 0 1px 0 rgba(255,255,255,.14)!important; backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); cursor:pointer!important; z-index:3; } .youtube-room-minimized-icon{width:18px;height:18px;display:grid;place-items:center;line-height:1} .youtube-room-minimized-icon svg{display:block;width:100%;height:100%} .youtube-room-minimized-dot{position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px rgba(12,18,28,.72)} main .inputrow > .youtube-room-minimized-task:hover{filter:brightness(1.08)} main .inputrow > .youtube-room-minimized-task:active{transform:translateY(1px) scale(.985)} body.local-light main .inputrow > .youtube-room-minimized-task{ border-color:rgba(72,96,128,.14)!important; background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(226,236,249,.74))!important; color:#315c96!important; box-shadow:0 5px 14px rgba(53,78,110,.10),inset 0 1px 0 rgba(255,255,255,.95)!important; } body.local-light .youtube-room-minimized-dot{box-shadow:0 0 0 2px rgba(246,249,253,.82)} @media(min-width:681px){ .youtube-room-panel{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)} } @media(max-width:680px){ .youtube-room-panel{ inset:6px!important; left:6px!important; top:6px!important; transform:none!important; width:auto!important; height:calc(100dvh - 12px)!important; max-height:none!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; border-radius:20px!important; } .youtube-room-panel-top{ flex:0 0 auto; cursor:default!important; touch-action:auto!important; } .youtube-room-minimize{display:none!important} .youtube-room-frame{flex:0 0 auto;width:100%;aspect-ratio:16/9} .youtube-room-panel-foot{flex:0 0 auto;padding:6px 8px!important} .youtube-room-panel-status{max-height:30px;overflow:hidden} .youtube-room-mini-chat{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.08); } .youtube-room-mini-chat-head{ flex:0 0 auto; padding:7px 9px 5px; color:#cbd8ea; font-size:9px; font-weight:900; } .youtube-room-mini-chat-log{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:5px 8px 7px; display:flex; flex-direction:column; gap:5px; } .youtube-room-mini-chat-log>.message{max-width:88%;font-size:10px} .youtube-room-mini-chat-log .message-meta{font-size:8px!important} .youtube-room-mini-chat-log .message-bubble{font-size:10px!important;padding:5px 8px!important} .youtube-room-mini-chat-composer{ flex:0 0 auto; display:flex; gap:6px; padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border-top:1px solid rgba(255,255,255,.09); background:rgba(15,21,32,.46); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); } .youtube-room-mini-chat-composer input{ min-width:0;flex:1;height:38px;padding:0 12px;border:1px solid rgba(255,255,255,.11);border-radius:19px; background:rgba(255,255,255,.07);color:#f4f8ff;outline:none;font:inherit;font-size:12px; } .youtube-room-mini-chat-composer button{ flex:0 0 38px;width:38px;height:38px;padding:0;border:1px solid rgba(97,145,225,.50);border-radius:50%; background:linear-gradient(180deg,#4d7fd0,#315fa8);color:#fff;font-size:16px;font-weight:900; } body.local-light .youtube-room-mini-chat{border-top-color:rgba(88,107,132,.10);background:rgba(255,255,255,.12)} body.local-light .youtube-room-mini-chat-head{color:#50647d} body.local-light .youtube-room-mini-chat-composer{border-top-color:rgba(88,107,132,.10);background:rgba(246,249,253,.50)} body.local-light .youtube-room-mini-chat-composer input{background:rgba(255,255,255,.72);border-color:rgba(88,107,132,.13);color:#172434} main .inputrow > .youtube-room-minimized-task{display:none!important} } @media(max-width:390px){ .youtube-room-panel-top{padding:7px!important} .youtube-room-panel-actions button{min-height:28px!important;padding:3px 6px!important;font-size:8px!important} .youtube-room-panel-title strong{font-size:10px!important} .youtube-room-panel-foot{font-size:7px!important} } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v3 — PC RESIZE PCのみ右下ドラッグで自由にサイズ変更。動画は16:9を維持。 ========================================================= */ .youtube-room-resize-handle{display:none} @media(min-width:681px){ .youtube-room-panel{ min-width:360px; width:min(92vw,780px); } .youtube-room-panel.is-resizing{ transition:none!important; user-select:none!important; -webkit-user-select:none!important; } .youtube-room-panel.is-resizing iframe{ pointer-events:none!important; } body.youtube-room-resizing, body.youtube-room-resizing *{ cursor:nwse-resize!important; user-select:none!important; -webkit-user-select:none!important; } .youtube-room-resize-handle{ position:absolute; right:3px; bottom:3px; z-index:60; display:block; width:27px; height:27px; min-width:27px; min-height:27px; margin:0; padding:0; border:0; border-radius:0 0 17px 0; background:transparent; color:transparent; cursor:nwse-resize!important; touch-action:none; -webkit-tap-highlight-color:transparent; } .youtube-room-resize-handle::before, .youtube-room-resize-handle::after{ content:""; position:absolute; right:5px; bottom:5px; pointer-events:none; border-right:2px solid rgba(220,232,250,.62); border-bottom:2px solid rgba(220,232,250,.62); border-radius:0 0 2px 0; } .youtube-room-resize-handle::before{width:13px;height:13px} .youtube-room-resize-handle::after{width:7px;height:7px;right:9px;bottom:9px;opacity:.62} .youtube-room-resize-handle:hover::before, .youtube-room-resize-handle:hover::after{border-color:rgba(255,255,255,.94)} body.local-light .youtube-room-resize-handle::before, body.local-light .youtube-room-resize-handle::after{border-color:rgba(57,82,116,.50)} body.local-light .youtube-room-resize-handle:hover::before, body.local-light .youtube-room-resize-handle:hover::after{border-color:rgba(36,67,108,.90)} } @media(max-width:680px){ .youtube-room-resize-handle{display:none!important} } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v4 - empty room rejoin: JS resumes from last position - mobile: fixed directly below room title, normal chat stays in place - mobile minimized activities float above composer instead of shrinking it ========================================================= */ @media(max-width:680px){ .youtube-room-panel{ position:fixed!important; z-index:7095!important; top:calc(111px + env(safe-area-inset-top))!important; left:7px!important; right:7px!important; bottom:auto!important; inset:auto 7px auto 7px!important; transform:none!important; width:auto!important; height:auto!important; max-height:none!important; min-width:0!important; display:block!important; overflow:hidden!important; border-radius:17px!important; } .youtube-room-panel.is-minimized{display:none!important} .youtube-room-panel-top{ min-height:36px!important; padding:5px 7px!important; cursor:default!important; touch-action:auto!important; } .youtube-room-panel-title{flex:1 1 auto!important} .youtube-room-panel-title strong{font-size:10px!important} .youtube-room-panel-title span{display:none!important} .youtube-room-panel-actions{gap:3px!important} .youtube-room-panel-actions button{ min-height:27px!important; height:27px!important; padding:2px 6px!important; font-size:8px!important; border-radius:8px!important; } .youtube-room-minimize{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:28px!important; width:28px!important; padding:0 0 5px!important; font-size:14px!important; } .youtube-room-panel-actions .youtube-room-resync{display:none!important} .youtube-room-frame{width:100%!important;aspect-ratio:16/9!important} .youtube-room-panel-foot{ min-height:24px!important; padding:4px 7px!important; font-size:7px!important; gap:6px!important; } .youtube-room-panel-status{ max-height:22px!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } .youtube-room-panel-people{font-size:7px!important} .youtube-room-mini-chat{display:none!important} .youtube-room-resize-handle{display:none!important} body.youtube-room-mobile-inline main .chatlog{ padding-top:var(--youtube-room-mobile-chat-pad,390px)!important; scroll-padding-top:var(--youtube-room-mobile-chat-pad,390px)!important; } /* 最小化タスクは入力欄の上へ。入力欄の横幅を一切消費しない。 */ main .inputrow{overflow:visible!important} main .inputrow > .voice-call-minimized-task, main .inputrow > .youtube-room-minimized-task{ position:absolute!important; bottom:calc(100% + 7px)!important; top:auto!important; right:auto!important; margin:0!important; z-index:25!important; } main .inputrow > .voice-call-minimized-task{ left:6px!important; width:auto!important; min-width:62px!important; max-width:76px!important; height:34px!important; min-height:34px!important; padding:0 7px!important; border-radius:12px!important; } .voice-call-minimized-icon{width:12px!important;height:12px!important} .voice-call-minimized-time{min-width:28px!important;font-size:9px!important} main .inputrow > .youtube-room-minimized-task{ display:inline-grid!important; place-items:center!important; left:6px!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:34px!important; min-height:34px!important; border-radius:12px!important; } main .inputrow:has(> .voice-call-minimized-task) > .youtube-room-minimized-task{ left:76px!important; } main .inputrow:has(> .direct-chat-invite-task:not([hidden])) > .youtube-room-minimized-task{ left:48px!important; } main .inputrow:has(> .voice-call-minimized-task):has(> .direct-chat-invite-task:not([hidden])) > .youtube-room-minimized-task{ left:118px!important; } .youtube-room-minimized-icon{width:15px!important;height:15px!important} .youtube-room-minimized-dot{right:4px!important;top:4px!important;width:5px!important;height:5px!important} } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v5 — MOBILE TITLE ORDER + COMPACT header -> room title -> YouTube controls/video -> normal chat ========================================================= */ @media(max-width:680px){ .youtube-room-panel{ top:var(--youtube-room-mobile-top,calc(116px + env(safe-area-inset-top)))!important; left:50%!important; right:auto!important; width:min(calc(100vw - 24px),430px)!important; max-width:calc(100vw - 24px)!important; transform:translateX(-50%)!important; border-radius:16px!important; } .youtube-room-panel-top{ min-height:34px!important; padding:4px 6px!important; border-radius:15px 15px 0 0!important; } .youtube-room-panel-title strong{ font-size:9px!important; } .youtube-room-panel-actions{ gap:2px!important; } .youtube-room-panel-actions button{ min-height:26px!important; height:26px!important; padding:2px 5px!important; font-size:7px!important; border-radius:8px!important; } .youtube-room-minimize{ min-width:26px!important; width:26px!important; padding:0 0 5px!important; font-size:13px!important; } .youtube-room-frame{ width:100%!important; aspect-ratio:16/9!important; } .youtube-room-panel-foot{ min-height:22px!important; padding:3px 6px!important; font-size:7px!important; } } @media(max-width:390px){ .youtube-room-panel{ width:calc(100vw - 26px)!important; max-width:calc(100vw - 26px)!important; } } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v6 — MOBILE FLOAT / RESIZE Default mobile position/size stays unchanged. Dragging the title bar or grabbing the bottom-right handle switches the player to a floating layout. ========================================================= */ @media(max-width:680px){ .youtube-room-panel-top{ cursor:move!important; touch-action:none!important; } .youtube-room-panel.is-mobile-manual{ max-width:calc(100vw - 12px)!important; } .youtube-room-panel.is-resizing{ transition:none!important; user-select:none!important; -webkit-user-select:none!important; } .youtube-room-panel.is-resizing iframe{pointer-events:none!important} .youtube-room-panel-foot{ padding-right:38px!important; } .youtube-room-resize-handle{ position:absolute!important; right:2px!important; bottom:2px!important; z-index:80!important; display:block!important; width:31px!important; height:31px!important; min-width:31px!important; min-height:31px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0 0 14px 0!important; background:transparent!important; color:transparent!important; cursor:nwse-resize!important; touch-action:none!important; -webkit-tap-highlight-color:transparent; } .youtube-room-resize-handle::before, .youtube-room-resize-handle::after{ content:""; position:absolute; pointer-events:none; border-right:2px solid rgba(220,232,250,.72); border-bottom:2px solid rgba(220,232,250,.72); border-radius:0 0 2px 0; } .youtube-room-resize-handle::before{right:5px;bottom:5px;width:13px;height:13px} .youtube-room-resize-handle::after{right:9px;bottom:9px;width:7px;height:7px;opacity:.62} body.local-light .youtube-room-resize-handle::before, body.local-light .youtube-room-resize-handle::after{border-color:rgba(57,82,116,.55)} } /* ========================================================= FOR314 /birthday ========================================================= */ .birthday-setup-backdrop{position:fixed;inset:0;z-index:2147482700;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(4,9,17,.30);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%)} .birthday-setup-modal{width:min(94vw,520px);max-height:90dvh;overflow:auto;border:1px solid rgba(255,255,255,.15);border-radius:24px;background:linear-gradient(180deg,rgba(30,38,52,.80),rgba(13,20,32,.72));color:#f5f7fb;box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%)} .birthday-setup-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(15,22,34,.42);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.birthday-setup-head strong{font-size:16px}.birthday-setup-close{width:34px;height:34px;border:1px solid rgba(255,255,255,.10);border-radius:11px;background:rgba(255,255,255,.07);color:inherit;font-size:22px}.birthday-setup-body{padding:14px}.birthday-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.birthday-setup-field{display:flex;flex-direction:column;gap:6px;min-width:0}.birthday-setup-field>span{font-size:11px;color:#bac4d3;font-weight:800}.birthday-setup-field input,.birthday-setup-field select{width:100%;min-width:0;height:42px;padding:0 11px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.075);color:#fff;outline:none}.birthday-setup-field select option{background:#fff;color:#111}.birthday-setup-preview{display:flex;align-items:center;gap:12px;margin-top:13px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.045)}.birthday-setup-preview strong,.birthday-setup-preview small{display:block}.birthday-setup-preview small{margin-top:2px;color:#aeb9c8}.birthday-setup-mini{width:70px;height:55px;display:flex;align-items:flex-end;justify-content:center}.birthday-setup-mini-layer,.birthday-card-mini-layer{position:relative;width:64px;height:34px;border-radius:12px 12px 8px 8px;background:var(--base)}.birthday-setup-mini-layer:before,.birthday-card-mini-layer:before{content:"";position:absolute;left:4px;right:4px;top:-8px;height:15px;border-radius:50%;background:var(--top)}.birthday-setup-mini-layer:after,.birthday-card-mini-layer:after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:7px;border-radius:99px;background:var(--stripe)}.birthday-setup-note{margin:12px 1px 0;color:#aeb9c8;font-size:11px;line-height:1.7}.birthday-setup-create{width:100%;min-height:46px;margin-top:13px;border:1px solid rgba(255,164,185,.35);border-radius:15px;background:linear-gradient(180deg,#ff7696,#e94e76);color:#fff;font:inherit;font-weight:900} body.local-light .birthday-setup-backdrop{background:rgba(235,239,245,.32)}body.local-light .birthday-setup-modal{color:#1f2937;border-color:rgba(86,103,127,.12);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,249,252,.78));box-shadow:0 28px 70px rgba(43,61,80,.16),inset 0 1px #fff}body.local-light .birthday-setup-head{background:rgba(255,255,255,.62);border-color:rgba(86,103,127,.10)}body.local-light .birthday-setup-field>span,body.local-light .birthday-setup-preview small,body.local-light .birthday-setup-note{color:#69788b}body.local-light .birthday-setup-field input,body.local-light .birthday-setup-field select{background:rgba(255,255,255,.82);border-color:rgba(86,103,127,.14);color:#172231}body.local-light .birthday-setup-preview{background:rgba(255,255,255,.56);border-color:rgba(86,103,127,.10)} .birthday-card{align-self:center;width:min(100%,620px);padding:12px;border:1px solid rgba(255,158,185,.24);border-radius:18px;background:linear-gradient(145deg,rgba(71,31,51,.58),rgba(31,25,45,.64));color:var(--text);box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}.birthday-card.is-ended{opacity:.58}.birthday-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.birthday-card-head strong{font-size:13px}.birthday-card-badge{padding:4px 8px;border-radius:999px;background:rgba(255,105,143,.17);border:1px solid rgba(255,130,164,.24);color:#ffd9e4;font-size:9px;font-weight:900;letter-spacing:.08em}.birthday-card-name{margin-top:9px;font-size:16px;font-weight:950}.birthday-card-sub,.birthday-card-status{margin-top:3px;color:var(--muted);font-size:10px}.birthday-card-cake{height:52px;margin-top:8px;display:flex;align-items:flex-end;justify-content:center}.birthday-card-mini-layer{width:72px;height:38px}.birthday-card-participants{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;min-height:24px}.birthday-card-chip,.birthday-card-empty{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.055);font-size:10px}.birthday-card-empty{color:var(--muted)}.birthday-card-join{width:100%;min-height:40px;margin-top:9px;border:1px solid rgba(255,157,184,.32);border-radius:13px;background:linear-gradient(180deg,rgba(255,103,145,.90),rgba(224,68,110,.88));color:#fff;font:inherit;font-size:12px;font-weight:900}.birthday-card-join:disabled{opacity:.5}body.local-light .birthday-card{background:linear-gradient(145deg,rgba(255,245,249,.90),rgba(244,248,255,.82));border-color:rgba(218,125,155,.20);color:#1f2937;box-shadow:0 12px 28px rgba(56,70,88,.10),inset 0 1px #fff}body.local-light .birthday-card-badge{color:#a82e55;background:rgba(255,113,153,.10)}body.local-light .birthday-card-chip,body.local-light .birthday-card-empty{background:rgba(255,255,255,.66);border-color:rgba(86,103,127,.10)} body.birthday-stage-open{overflow:hidden!important}.birthday-stage{position:fixed;inset:0;z-index:2147482600;overflow:hidden;color:#27303c;background:radial-gradient(circle at 18% 8%,rgba(255,221,232,.92),transparent 32%),radial-gradient(circle at 88% 12%,rgba(220,234,255,.92),transparent 31%),linear-gradient(180deg,#fff8fb,#f5f9ff);display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));touch-action:manipulation}.birthday-stage-top{position:absolute;z-index:10;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between}.birthday-stage-mini-title{padding:7px 11px;border:1px solid rgba(70,83,105,.10);border-radius:999px;background:rgba(255,255,255,.58);font-size:11px;font-weight:850;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.birthday-stage-close{width:38px;height:38px;border:1px solid rgba(70,83,105,.12);border-radius:13px;background:rgba(255,255,255,.74);color:#26313f;font:800 25px/1 system-ui}.birthday-stage-title{position:absolute;z-index:4;top:clamp(64px,10vh,92px);left:16px;right:16px;text-align:center}.birthday-stage-name{font-size:clamp(23px,6vw,42px);font-weight:950}.birthday-stage-age{margin-top:4px;color:#69717f;font-size:13px;font-weight:700}.birthday-cake-wrap{position:relative;width:min(88vw,520px);height:min(48vh,390px);min-height:300px;display:flex;align-items:flex-end;justify-content:center;margin-top:62px}.birthday-plate{position:absolute;bottom:27px;width:78%;height:30px;border-radius:50%;background:linear-gradient(#e5e8ee,#fff);box-shadow:0 8px 18px rgba(0,0,0,.12)}.birthday-stage-cake{--base:#f7d9d9;--top:#fff9f2;--stripe:#ef6b7c;position:absolute;bottom:50px;width:70%;max-width:360px;height:185px}.birthday-cake-body{position:absolute;bottom:0;left:0;right:0;height:145px;border-radius:30px 30px 22px 22px;background:var(--base);box-shadow:inset 0 -16px rgba(0,0,0,.04),0 16px 30px rgba(0,0,0,.12)}.birthday-cake-top{position:absolute;left:0;right:0;top:18px;height:50px;border-radius:50%;background:var(--top);box-shadow:0 6px rgba(0,0,0,.04)}.birthday-cake-stripe{position:absolute;left:0;right:0;top:88px;height:22px;background:var(--stripe)}.birthday-decorations{position:absolute;left:0;right:0;top:8px;height:75px;pointer-events:none}.birthday-deco{position:absolute;font-size:28px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.10));transform:translate(-50%,-50%)}.birthday-candles{position:absolute;left:5%;right:5%;top:-3px;height:92px;pointer-events:none}.birthday-candle{position:absolute;bottom:0;width:9px;height:45px;padding:0;border:0;border-radius:4px;background:repeating-linear-gradient(135deg,#fff 0 5px,#ff7895 5px 10px);appearance:none;-webkit-appearance:none;pointer-events:none;transform-origin:50% 100%}.birthday-candle.can-touch{pointer-events:auto;cursor:pointer}.birthday-flame{position:absolute;left:50%;top:-22px;width:15px;height:23px;transform:translateX(-50%);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 65%,#fff9aa 0 18%,#ffd14b 20% 52%,#ff7b37 55% 100%);box-shadow:0 0 13px #ffb43b;animation:birthdayFlicker .16s infinite alternate;transform-origin:50% 100%}.birthday-candle.is-off .birthday-flame{opacity:0;animation:none}@keyframes birthdayFlicker{from{transform:translateX(-50%) rotate(-4deg) scale(.96)}to{transform:translateX(-50%) rotate(4deg) scale(1.07)}}.birthday-stage-status{position:absolute;z-index:4;left:14px;right:14px;bottom:max(18px,env(safe-area-inset-bottom));margin:auto;max-width:620px;padding:10px 13px;border:1px solid rgba(75,89,110,.10);border-radius:15px;background:rgba(255,255,255,.70);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center;font-size:12px;font-weight:800}.birthday-blow-meter{position:absolute;z-index:5;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 52px);transform:translateX(-50%);width:min(68vw,360px);height:9px;border-radius:999px;overflow:hidden;background:rgba(93,104,121,.16)}.birthday-blow-meter>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#71d989,#ffd34c,#ff617a);transition:width .06s}.birthday-confetti{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.birthday-confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;background:hsl(var(--h),90%,60%);transform:rotate(var(--r));animation:birthdayFall 2.9s linear forwards}.birthday-stage.is-complete .birthday-stage-name{animation:birthdayPop .55s cubic-bezier(.2,.9,.25,1.25)}@keyframes birthdayFall{to{transform:translate(var(--x),110vh) rotate(680deg);opacity:.08}}@keyframes birthdayPop{0%{transform:scale(.92)}65%{transform:scale(1.06)}100%{transform:scale(1)}} @media(max-width:680px){.birthday-setup-backdrop{padding:8px}.birthday-setup-modal{width:100%;max-height:94dvh;border-radius:21px}.birthday-setup-grid{gap:9px}.birthday-setup-field input,.birthday-setup-field select{height:40px;font-size:12px}.birthday-stage-title{top:72px}.birthday-cake-wrap{width:min(94vw,500px);height:390px;min-height:330px;margin-top:50px}.birthday-stage-cake{width:76%;max-width:330px;transform:scale(.92);transform-origin:50% 100%}.birthday-stage-status{font-size:11px}}@media(max-width:390px){.birthday-setup-grid{grid-template-columns:1fr}.birthday-cake-wrap{height:360px}.birthday-stage-cake{width:80%;transform:scale(.86)}.birthday-stage-name{font-size:24px}} /* === FOR314 Cloudflare room password / DB auth v1 === */ .cf-room-password-field{ gap:7px; } .cf-room-password-row{ display:flex; align-items:center; gap:7px; width:100%; } .cf-room-password-row[hidden], .cf-room-password-field[hidden], .cf-room-password-policy-row[hidden]{ display:none!important; } .cf-room-password-policy-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:38px; margin-top:2px; padding:7px 9px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(255,255,255,.055); cursor:pointer; user-select:none; -webkit-user-select:none; } .cf-room-password-policy-text{ min-width:0; font-size:12px; line-height:1.35; font-weight:700; } .cf-room-password-policy-switch{ position:relative; flex:0 0 auto; width:42px; height:24px; } .cf-room-password-policy-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .cf-room-password-policy-knob{ position:absolute; inset:0; pointer-events:none; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.13); transition:background .18s ease,border-color .18s ease; } .cf-room-password-policy-knob::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.24); transition:transform .18s cubic-bezier(.2,.8,.2,1); } .cf-room-password-policy-switch input:checked + .cf-room-password-policy-knob{ background:rgba(255,85,98,.82); border-color:rgba(255,125,135,.72); } .cf-room-password-policy-switch input:checked + .cf-room-password-policy-knob::after{ transform:translateX(18px); } .cf-room-password-policy-switch input:disabled + .cf-room-password-policy-knob{ opacity:.48; } .cf-room-password-row input{ flex:1 1 auto; min-width:0; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:0 11px; background:rgba(255,255,255,.09); color:inherit; outline:none; } .cf-room-password-row input:focus{ border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.13); } .cf-room-password-row button{ flex:0 0 auto; min-width:58px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:0 12px; background:rgba(255,255,255,.12); color:inherit; font:inherit; cursor:pointer; } .cf-room-password-row button:disabled{ opacity:.55; cursor:default; } .cf-room-password-hint{ display:block; margin-top:5px; font-size:11px; line-height:1.45; opacity:.72; } body.local-light .cf-room-password-row input, body.local-light .cf-room-password-row button{ border-color:rgba(0,0,0,.12); background:rgba(255,255,255,.72); color:#111; } body.local-light .cf-room-password-policy-row{ border-color:rgba(0,0,0,.10); background:rgba(255,255,255,.58); } body.local-light .cf-room-password-policy-knob{ border-color:rgba(0,0,0,.12); background:rgba(65,72,82,.15); } .cf-room-auth-backdrop{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(5,8,14,.42); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility .18s ease; } .cf-room-auth-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; } .cf-room-auth-modal{ width:min(390px,calc(100vw - 28px)); border:1px solid rgba(255,255,255,.22); border-radius:20px; padding:18px; background: linear-gradient(145deg,rgba(30,34,44,.80),rgba(12,15,22,.68)); box-shadow:0 22px 70px rgba(0,0,0,.34); -webkit-backdrop-filter:blur(24px) saturate(1.28); backdrop-filter:blur(24px) saturate(1.28); color:#fff; } .cf-room-auth-title{ font-size:17px; font-weight:800; letter-spacing:.01em; } .cf-room-auth-room{ margin-top:7px; font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; opacity:.72; overflow-wrap:anywhere; } .cf-room-auth-desc{ margin-top:13px; font-size:13px; line-height:1.55; opacity:.88; } .cf-room-auth-input{ box-sizing:border-box; width:100%; height:44px; margin-top:13px; padding:0 13px; border:1px solid rgba(255,255,255,.24); border-radius:13px; background:rgba(255,255,255,.10); color:#fff; font:inherit; outline:none; } .cf-room-auth-input:focus{ border-color:rgba(255,255,255,.56); background:rgba(255,255,255,.14); } .cf-room-auth-error{ min-height:18px; margin-top:7px; font-size:12px; line-height:1.4; color:#ffd2d2; } .cf-room-auth-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; } .cf-room-auth-actions button{ min-height:38px; border:1px solid rgba(255,255,255,.20); border-radius:11px; padding:0 13px; background:rgba(255,255,255,.11); color:#fff; font:inherit; font-weight:700; cursor:pointer; } .cf-room-auth-enter{ background:rgba(255,255,255,.22)!important; } .cf-room-auth-actions button:disabled{ opacity:.55; } body.local-light .cf-room-auth-backdrop{ background:rgba(225,230,238,.42); } body.local-light .cf-room-auth-modal{ border-color:rgba(0,0,0,.10); background: linear-gradient(145deg,rgba(255,255,255,.90),rgba(245,247,251,.78)); box-shadow:0 22px 70px rgba(30,40,60,.18); color:#111; } body.local-light .cf-room-auth-input{ border-color:rgba(0,0,0,.14); background:rgba(255,255,255,.82); color:#111; } body.local-light .cf-room-auth-error{ color:#a72525; } body.local-light .cf-room-auth-actions button{ border-color:rgba(0,0,0,.12); background:rgba(255,255,255,.76); color:#111; } body.local-light .cf-room-auth-enter{ background:rgba(225,229,238,.95)!important; } /* Global room marker: room ID "room" only */ .global-room-icon{ flex:0 0 auto; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; color:#6ea8ff; vertical-align:middle; } .global-room-icon[hidden]{display:none!important} .global-room-icon svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } body.local-light .global-room-icon{color:#245a91} /* ============================================================ Toast final priority v3 - composer/input bar の直下 - キャラ演出より下（その他の最前面UIと同順位） - display time +1s ============================================================ */ #toastLayer{ position:fixed !important; top:calc(100dvh - var(--for314-ad-safe-gap,82px) - env(safe-area-inset-bottom) + 8px) !important; bottom:auto !important; left:50% !important; transform:translateX(-50%) !important; z-index:2147483646 !important; pointer-events:none !important; } .chat-toast{ animation:toastIn .18s ease-out, toastOut .22s ease-in 4.1s forwards !important; } /* FOR314 BIRTHDAY SIMPLE CHAT CARD v2 2分だけ参加 / 作成から5分で封鎖 / 終了後は小さい結果カードとして残す */ .birthday-card.birthday-result-card.is-result{ width:min(100%,560px); min-height:0; padding:11px 14px; border:1px solid rgba(255,124,164,.30); border-radius:16px; background:linear-gradient(145deg,rgba(255,116,157,.22),rgba(245,82,135,.12)); box-shadow:0 8px 20px rgba(89,25,52,.12),inset 0 1px rgba(255,255,255,.10); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); opacity:1; } .birthday-result-text{ color:#ffd7e5; font-size:13px; line-height:1.55; font-weight:900; text-align:center; letter-spacing:.01em; } body.local-light .birthday-card.birthday-result-card.is-result{ background:linear-gradient(145deg,rgba(255,225,236,.94),rgba(255,241,246,.88)); border-color:rgba(218,91,136,.22); box-shadow:0 8px 20px rgba(91,44,62,.08),inset 0 1px #fff; } body.local-light .birthday-result-text{color:#a62f59} /* FOR314 YOUTUBE ENDED CHAT CARD v1 終了後は大きいプレイヤー募集カードを畳み、通常チャットに流れる小さい結果カードへ。 */ .youtube-room-card.youtube-room-result-card.is-result{ width:min(100%,560px)!important; min-height:0!important; padding:9px 13px!important; border:1px solid rgba(112,157,222,.22)!important; border-radius:14px!important; background:linear-gradient(145deg,rgba(74,111,166,.15),rgba(43,68,106,.09))!important; box-shadow:0 6px 16px rgba(0,0,0,.08),inset 0 1px rgba(255,255,255,.06)!important; backdrop-filter:blur(12px) saturate(120%)!important; -webkit-backdrop-filter:blur(12px) saturate(120%)!important; opacity:.78!important; } .youtube-room-result-text{ color:#b8c5d8; font-size:11px; line-height:1.45; font-weight:750; text-align:center; letter-spacing:.005em; } body.local-light .youtube-room-card.youtube-room-result-card.is-result{ background:linear-gradient(145deg,rgba(235,241,249,.88),rgba(244,247,251,.76))!important; border-color:rgba(75,105,145,.14)!important; box-shadow:0 6px 16px rgba(43,61,80,.06),inset 0 1px #fff!important; opacity:.82!important; } body.local-light .youtube-room-result-text{color:#66768a} /* ========================================================= FOR314 LIGHT CHAT CARDS v1 Birthday / YouTube は特別な常駐UIではなく、通常チャット内の軽いカードとして扱う。 ========================================================= */ .youtube-room-card, .birthday-card{ flex:0 0 auto!important; flex-shrink:0!important; align-self:center!important; width:min(620px,calc(100% - 16px))!important; margin:7px auto!important; box-sizing:border-box!important; } .youtube-room-card{ padding:10px 12px 11px!important; border-radius:15px!important; box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.07)!important; } .youtube-room-card-title{font-size:12px!important} .youtube-room-card-meta{margin-top:5px!important} .youtube-room-card-video{margin-top:6px!important;padding:0!important} .youtube-room-card-status{margin-top:6px!important} .youtube-room-card-participants{margin-top:6px!important;min-height:20px!important} .youtube-room-chip{min-height:20px!important;padding:2px 7px!important} .youtube-room-join{min-height:36px!important;margin-top:7px!important;border-radius:11px!important} .youtube-room-card.is-ended{opacity:.72!important} .youtube-room-card.is-ended .youtube-room-card-participants{display:none!important} .youtube-room-card.is-ended .youtube-room-card-video{opacity:.72} .birthday-card{ padding:10px 12px!important; border-radius:15px!important; box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.06)!important; } .birthday-card-head strong{font-size:12px!important} .birthday-card-name{margin-top:6px!important;font-size:14px!important} .birthday-card-cake{height:44px!important;margin-top:5px!important} .birthday-card-participants{margin-top:6px!important;min-height:20px!important} .birthday-card-chip,.birthday-card-empty{min-height:20px!important;padding:2px 7px!important} .birthday-card-join{min-height:36px!important;margin-top:7px!important;border-radius:11px!important} @media(max-width:680px){ .youtube-room-card,.birthday-card{width:calc(100% - 8px)!important;margin:6px auto!important} .youtube-room-card-thumb{width:min(154px,50%)!important;border-radius:9px} } /* ========================================================= FOR314 YOUTUBE WATCH ROOM v7 — FRONTMOST DRAG + MOBILE RESET - 初期スマホ配置は従来どおりヘッダー/プロフィールUIの下 - D&D / resizeで手動配置へ切り替わったYouTubeは最前面へ - スマホ手動配置時だけ、退出の左に「元の位置・サイズへ戻す」SVGボタン ========================================================= */ .youtube-room-reset-mobile{ display:none!important; } .youtube-room-reset-mobile svg{ display:block; width:14px; height:14px; pointer-events:none; } /* PCもドラッグ位置へ移した後は、通常のプロフィール/ヘッダーより上へ。 */ .youtube-room-panel.is-drag-positioned{ z-index:2147483550!important; } @media(max-width:680px){ /* スマホはドラッグ/リサイズ後だけ最前面。初期配置のz-indexは従来のまま。 */ .youtube-room-panel.is-mobile-manual{ z-index:2147483550!important; } .youtube-room-panel.is-mobile-manual .youtube-room-reset-mobile{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:27px!important; min-width:27px!important; height:27px!important; min-height:27px!important; padding:0!important; } .youtube-room-panel.is-mobile-manual .youtube-room-reset-mobile svg{ width:13px!important; height:13px!important; } } /* FOR314 YOUTUBE CARD THUMBNAIL v1 — video ID line replaced by small 16:9 thumbnail; ID fallback on image error. */ /* FOR314 command categories v1 */ #commandModalBackdrop .command-category{ display:flex; align-items:center; gap:9px; margin:8px 2px 0; padding:4px 3px 2px; color:#b8c7ff; font-size:11px; line-height:1.2; font-weight:900; letter-spacing:.045em; } #commandModalBackdrop .command-category:first-child{margin-top:0} #commandModalBackdrop .command-category::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(184,199,255,.5),rgba(184,199,255,0)); } body.local-light #commandModalBackdrop .command-category{color:#52657c !important} body.local-light #commandModalBackdrop .command-category::after{ background:linear-gradient(90deg,rgba(82,101,124,.35),rgba(82,101,124,0)); } @media(max-width:300px){ #commandModalBackdrop .command-category{font-size:9px;margin-top:5px;padding-top:3px;gap:6px} } /* ========================================================= FOR314 COMPOSER IMAGE PASTE v1 Ctrl/Cmd+V 画像を複数キュー。1画像=1チャット、動画pasteは非対応。 ========================================================= */ main .inputrow{overflow:visible!important} main .inputrow .paste-image-tray{ position:absolute; left:8px; right:8px; bottom:calc(100% + 7px); z-index:30; box-sizing:border-box; padding:7px 8px 8px; border:1px solid rgba(255,255,255,.14); border-radius:15px; background: linear-gradient(180deg,rgba(54,67,91,.18),rgba(12,18,25,.04)), rgba(20,28,39,.78); box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(22px) saturate(155%); -webkit-backdrop-filter:blur(22px) saturate(155%); color:#eaf0f7; } main .inputrow .paste-image-tray[hidden]{display:none!important} .paste-image-tray-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; margin-bottom:6px; font-size:10px; font-weight:800; color:rgba(235,242,250,.82); } .paste-image-clear{ appearance:none; min-height:24px!important; height:24px!important; padding:0 8px!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:9px!important; background:rgba(255,255,255,.07)!important; color:inherit!important; font:inherit!important; font-size:9px!important; cursor:pointer; } .paste-image-tray-list{ display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; padding:1px 1px 2px; } .paste-image-chip{ position:relative; flex:0 0 62px; width:62px; height:48px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(0,0,0,.22); box-shadow:inset 0 1px rgba(255,255,255,.06); } .paste-image-chip img{ width:100%; height:100%; display:block; object-fit:cover; pointer-events:none; } .paste-image-number{ position:absolute; left:4px; bottom:4px; display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:rgba(0,0,0,.64); color:#fff; font-size:9px; font-weight:900; line-height:1; pointer-events:none; } .paste-image-remove{ position:absolute!important; top:3px!important; right:3px!important; width:20px!important; min-width:20px!important; height:20px!important; min-height:20px!important; padding:0!important; border:1px solid rgba(255,255,255,.20)!important; border-radius:50%!important; background:rgba(10,14,20,.74)!important; color:#fff!important; font-size:15px!important; line-height:18px!important; font-weight:800!important; cursor:pointer; } .paste-image-tray.is-sending{opacity:.78} .paste-image-tray.is-sending .paste-image-chip{filter:saturate(.75)} body.local-light main .inputrow .paste-image-tray{ border-color:rgba(71,88,109,.14); background:rgba(249,251,253,.90); box-shadow:0 12px 28px rgba(50,68,89,.14),inset 0 1px #fff; color:#334252; } body.local-light .paste-image-tray-head{color:#536273} body.local-light .paste-image-clear{ border-color:rgba(71,88,109,.14)!important; background:rgba(255,255,255,.84)!important; color:#465666!important; } body.local-light .paste-image-chip{ border-color:rgba(71,88,109,.14); background:#eef2f6; } @media(max-width:680px){ main .inputrow .paste-image-tray{ left:3px; right:3px; bottom:calc(100% + 5px); padding:6px 7px 7px; border-radius:14px; } .paste-image-chip{ flex-basis:56px; width:56px; height:44px; } .paste-image-tray-head{font-size:9px} } /* ===== for314 transport badge: Cloudflare / Achex ===== */ .transport-badge{ display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; min-width:34px; height:18px; padding:0 5px 0 4px; border:1px solid rgba(148,163,184,.28); border-radius:999px; background:rgba(15,23,42,.42); color:#c7d2fe; font-size:9px; line-height:1; font-weight:800; letter-spacing:.04em; vertical-align:middle; opacity:.94; } .transport-signal-icon{ width:12px; height:12px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .transport-signal-icon circle{fill:currentColor;stroke:none} .transport-badge[data-transport="achex"]{color:#86efac;border-color:rgba(134,239,172,.30)} .transport-badge[data-transport="cloudflare"]{color:#93c5fd;border-color:rgba(147,197,253,.30)} .transport-badge[data-transport="achex"].is-connecting, .transport-badge[data-transport="cloudflare"].is-connecting{ color:#fbbf24; border-color:rgba(251,191,36,.36); } .transport-badge.is-connecting{ opacity:.94; color:#fbbf24; border-color:rgba(251,191,36,.36); background:rgba(66,47,5,.36); } .transport-offline-x{display:none} .transport-badge[data-transport="offline"]{ min-width:26px; padding:0 4px; color:#fb4b4b; border-color:rgba(251,75,75,.42); background:rgba(69,10,10,.42); } .transport-badge[data-transport="offline"] .transport-offline-x{display:block;stroke-width:2.6} .transport-badge[data-transport="offline"] .transport-badge-label{display:none} body.local-light .transport-badge[data-transport="offline"]{ color:#d81f2a; border-color:rgba(216,31,42,.30); background:rgba(255,240,241,.88); } body.local-light .transport-badge{ background:rgba(255,255,255,.58); color:#245a91; border-color:rgba(36,90,145,.20); } body.local-light .transport-badge[data-transport="achex"]{color:#16803f;border-color:rgba(22,128,63,.22)} body.local-light .transport-badge.is-connecting{ color:#a16207; border-color:rgba(161,98,7,.28); background:rgba(255,251,235,.88); } @media(max-width:520px){ .transport-badge{height:17px;min-width:31px;padding:0 4px;font-size:8px;gap:2px} .transport-signal-icon{width:11px;height:11px} } /* ---------- /speedtest card ---------- */ .message.speedtest-message{max-width:min(94%,430px)} .message.speedtest-message .speedtest-bubble{ width:min(100%,380px); box-sizing:border-box; padding:13px 14px; white-space:normal; overflow:visible; border:1px solid rgba(255,255,255,.13); background:linear-gradient(145deg,rgba(30,38,54,.96),rgba(19,25,37,.96)); color:#f6f8fc; box-shadow:0 10px 28px rgba(0,0,0,.16); } .message.mine.speedtest-message .speedtest-bubble{ background:linear-gradient(145deg,rgba(37,79,145,.98),rgba(31,61,112,.98)); } .speedtest-head{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.25} .speedtest-signal-icon{width:21px;height:21px;flex:none;color:#8cc9ff} .message.mine .speedtest-signal-icon{color:#d5ebff} .speedtest-divider{height:1px;background:rgba(255,255,255,.14);margin:10px 0} .speedtest-owner{font-weight:700;font-size:13px;margin-bottom:8px} .speedtest-metrics{display:grid;gap:4px;font-variant-numeric:tabular-nums} .speedtest-metric-row,.speedtest-use-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0} .speedtest-metric-row{font-size:12.5px;line-height:1.45} .speedtest-metric-row span{opacity:.78} .speedtest-metric-row strong{font-weight:700;white-space:nowrap} .speedtest-uses{display:grid;gap:5px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.13)} .speedtest-use-row{font-size:12.5px} .speedtest-use-row span{opacity:.9} .speedtest-use-row strong{font-weight:700;white-space:nowrap} .speedtest-overall{display:flex;align-items:baseline;gap:4px;font-size:14px} .speedtest-overall strong{font-size:17px;letter-spacing:.01em} .speedtest-progress{padding:8px 0 2px;font-size:13px;font-weight:700} .speedtest-progress::before{content:'●';display:inline-block;margin-right:7px;animation:speedtestPulse .9s ease-in-out infinite alternate;opacity:.55} .speedtest-progress-failed{line-height:1.55;font-weight:650} .speedtest-progress-failed::before{content:'⚠️';animation:none;opacity:1} @keyframes speedtestPulse{from{transform:scale(.75);opacity:.35}to{transform:scale(1);opacity:1}} body.local-light .message.speedtest-message .speedtest-bubble{ background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,246,252,.98)); border-color:rgba(26,41,64,.14); color:#182033; box-shadow:0 8px 24px rgba(25,45,76,.10); } body.local-light .message.mine.speedtest-message .speedtest-bubble{ background:linear-gradient(145deg,rgba(68,119,194,.98),rgba(47,91,158,.98)); color:#fff; } body.local-light .message:not(.mine).speedtest-message .speedtest-signal-icon{color:#2875c7} @media(max-width:300px){ .message.speedtest-message{max-width:100%} .message.speedtest-message .speedtest-bubble{width:100%;padding:9px 10px} .speedtest-head{font-size:12px;gap:5px} .speedtest-signal-icon{width:17px;height:17px} .speedtest-owner,.speedtest-metric-row,.speedtest-use-row,.speedtest-progress{font-size:10px} .speedtest-metric-row,.speedtest-use-row{gap:6px} .speedtest-overall{font-size:11px}.speedtest-overall strong{font-size:13px} .speedtest-divider{margin:7px 0}.speedtest-uses{margin-top:8px;padding-top:7px;gap:3px} } /* ---------- /speedtest light-mode readability fix v2 ---------- */ body.local-light main .message:not(.mine).speedtest-message .speedtest-bubble, body.local-light main .message:not(.mine).speedtest-message .speedtest-bubble *{ color:#182033 !important; } body.local-light main .message:not(.mine).speedtest-message .speedtest-signal-icon{ color:#2875c7 !important; } body.local-light main .message:not(.mine).speedtest-message .speedtest-divider{ background:rgba(24,32,51,.16) !important; } body.local-light main .message:not(.mine).speedtest-message .speedtest-uses{ border-top-color:rgba(24,32,51,.16) !important; } body.local-light main .message:not(.mine).speedtest-message .speedtest-metric-row span, body.local-light main .message:not(.mine).speedtest-message .speedtest-use-row span{ color:#49566c !important; } body.local-light main .message:not(.mine).speedtest-message .speedtest-metric-row strong, body.local-light main .message:not(.mine).speedtest-message .speedtest-use-row strong, body.local-light main .message:not(.mine).speedtest-message .speedtest-overall, body.local-light main .message:not(.mine).speedtest-message .speedtest-overall strong, body.local-light main .message:not(.mine).speedtest-message .speedtest-owner, body.local-light main .message:not(.mine).speedtest-message .speedtest-head{ color:#111827 !important; } /* FOR314 typing indicator v1 */ main .inputrow{ overflow:visible!important; } main .inputrow .for314-typing-indicator{ position:absolute; left:20px; right:146px; bottom:1px; z-index:12; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; user-select:none; -webkit-user-select:none; font-size:8px; font-weight:650; line-height:9px; letter-spacing:.01em; color:rgba(214,224,239,.66); text-shadow:0 1px 2px rgba(0,0,0,.28); } main .inputrow .for314-typing-indicator[hidden]{display:none!important} body.local-light main .inputrow .for314-typing-indicator{ color:rgba(64,78,96,.62); text-shadow:0 1px 0 rgba(255,255,255,.72); } @media(max-width:680px){ main .inputrow .for314-typing-indicator{ left:16px; right:132px; font-size:7.5px; line-height:8px; } } @media(max-width:360px){ main .inputrow .for314-typing-indicator{ left:13px; right:116px; font-size:7px; } } /* ---------- /superchat : free color-message card v1 ---------- */ .superchat-message{ width:100%; max-width:100%!important; display:flex!important; justify-content:center!important; padding:4px 0 8px!important; } .superchat-message .superchat-content{ width:min(100%,520px); max-width:520px!important; margin:0!important; } .superchat-card{ --sc-head:#1f6fc1; --sc-body:#2d82d4; --sc-text:#fff; width:100%; overflow:hidden; border-radius:14px; color:var(--sc-text); background:var(--sc-body); box-shadow:0 7px 22px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.14); text-align:left; isolation:isolate; } .superchat-tier-blue{--sc-head:#216bc0;--sc-body:#2b7fd0;--sc-text:#fff} .superchat-tier-cyan{--sc-head:#08b8cc;--sc-body:#17d0e1;--sc-text:#071a20} .superchat-tier-green{--sc-head:#10bca5;--sc-body:#27d9b9;--sc-text:#07231d} .superchat-tier-yellow{--sc-head:#ffb300;--sc-body:#ffc72c;--sc-text:#241800} .superchat-tier-orange{--sc-head:#ef5900;--sc-body:#ff7900;--sc-text:#fff} .superchat-tier-magenta{--sc-head:#c2185b;--sc-body:#ec1763;--sc-text:#fff} .superchat-tier-red{--sc-head:#df0000;--sc-body:#ef231b;--sc-text:#fff} .superchat-card-head{ min-height:78px; display:flex; align-items:center; gap:12px; padding:12px 15px; background:var(--sc-head); } .superchat-avatar{ width:54px; height:54px; flex:0 0 54px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:rgba(0,0,0,.68); color:#fff; font-weight:900; font-size:22px; box-shadow:0 0 0 1px rgba(255,255,255,.18); } .superchat-avatar img{width:100%;height:100%;object-fit:cover;display:block} .superchat-card-info{min-width:0;flex:1} .superchat-card-name{ font-size:15px; line-height:1.2; font-weight:800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .superchat-card-amount{ margin-top:4px; font-size:20px; line-height:1.05; font-weight:900; font-variant-numeric:tabular-nums; } .superchat-card-time{ align-self:flex-start; padding-top:2px; font-size:10px; font-weight:700; opacity:.7; white-space:nowrap; } .superchat-card-body{ min-height:58px; display:flex; align-items:center; padding:14px 16px 16px; background:var(--sc-body); color:var(--sc-text); font-size:18px; line-height:1.45; font-weight:750; white-space:pre-wrap; overflow-wrap:anywhere; } .superchat-message .message-action-row.superchat-action-row{padding:4px 5px 0} .superchat-message.mine .superchat-card{box-shadow:0 8px 24px rgba(0,0,0,.2),0 0 0 2px rgba(255,255,255,.10)} .superchat-tier-magenta,.superchat-tier-red{position:relative} .superchat-tier-magenta::after,.superchat-tier-red::after{ content:''; position:absolute; inset:-35% auto -35% -45%; width:34%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); pointer-events:none; animation:for314SuperChatShine 1.15s ease-out 1; } @keyframes for314SuperChatShine{to{left:120%}} .superchat-modal-backdrop{ position:fixed; inset:0; z-index:2147482500; display:grid; place-items:center; padding:16px; background:rgba(7,12,22,.48); -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px); } .superchat-modal-backdrop[hidden]{display:none!important} .superchat-modal{ width:min(94vw,460px); max-height:min(88vh,760px); overflow:auto; padding:18px; border:1px solid rgba(255,255,255,.28); border-radius:24px; background:linear-gradient(145deg,rgba(27,35,50,.91),rgba(20,27,39,.83)); color:#f7f9fc; box-shadow:0 28px 80px rgba(0,0,0,.42); -webkit-backdrop-filter:blur(24px) saturate(1.2); backdrop-filter:blur(24px) saturate(1.2); } body.local-light .superchat-modal{ background:linear-gradient(145deg,rgba(250,252,255,.94),rgba(233,238,245,.91)); border-color:rgba(255,255,255,.78); color:#172033; box-shadow:0 24px 70px rgba(27,40,62,.24); } .superchat-modal-head{display:flex;align-items:flex-start;gap:14px;justify-content:space-between} .superchat-modal-head h2{margin:0;font-size:22px;line-height:1.15;font-weight:900} .superchat-modal-head p{margin:5px 0 0;font-size:12px;line-height:1.4;opacity:.68} .superchat-modal-close{ width:44px;height:44px;flex:0 0 44px;border-radius:14px;border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08);color:inherit;font-size:30px;line-height:1;cursor:pointer; } body.local-light .superchat-modal-close{background:rgba(66,78,96,.07);border-color:rgba(40,55,78,.12)} .superchat-free-note{ margin-top:14px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.07); font-size:11px;line-height:1.35;font-weight:700;opacity:.86; } body.local-light .superchat-free-note{background:rgba(49,70,101,.07)} .superchat-field-label{display:flex;justify-content:space-between;gap:10px;margin:16px 2px 8px;font-size:12px;font-weight:800;opacity:.82} .superchat-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .superchat-preset{ min-height:42px;padding:7px 4px;border:0;border-radius:11px;background:var(--sc-head);color:var(--sc-text); font-size:13px;font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .superchat-preset.selected{outline:3px solid rgba(255,255,255,.93);outline-offset:1px;transform:translateY(-1px)} body.local-light .superchat-preset.selected{outline-color:#182033} .superchat-custom-row{ display:flex;align-items:center;gap:8px;margin-top:9px;padding:0 12px;border-radius:12px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-weight:900; } body.local-light .superchat-custom-row{background:rgba(255,255,255,.72);border-color:rgba(46,63,89,.12)} .superchat-custom-row input{ width:100%;height:42px;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-weight:800; } .superchat-message-input{ width:100%;min-height:82px;resize:vertical;box-sizing:border-box;border-radius:13px;padding:11px 12px; border:1px solid rgba(255,255,255,.13);outline:none;background:rgba(255,255,255,.08);color:inherit; font:inherit;font-size:14px;line-height:1.5; } .superchat-message-input:focus,.superchat-custom-row:focus-within{border-color:rgba(110,181,255,.82);box-shadow:0 0 0 3px rgba(71,151,239,.16)} body.local-light .superchat-message-input{background:rgba(255,255,255,.76);border-color:rgba(46,63,89,.13)} .superchat-preview-label{margin-top:13px} .superchat-modal-preview{min-height:118px;display:flex;align-items:center} .superchat-preview-card{box-shadow:none} .superchat-preview-card .superchat-card-head{min-height:64px;padding:9px 12px} .superchat-preview-card .superchat-avatar{width:44px;height:44px;flex-basis:44px;font-size:18px} .superchat-preview-card .superchat-card-body{min-height:44px;padding:10px 13px 12px;font-size:15px} .superchat-modal-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:15px} .superchat-modal-actions button{min-height:46px;border-radius:14px;font-size:14px;font-weight:900;cursor:pointer} .superchat-cancel{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:inherit} .superchat-send{border:0;background:#1677ff;color:#fff;box-shadow:0 7px 18px rgba(22,119,255,.26)} body.local-light .superchat-cancel{border-color:rgba(44,61,86,.12);background:rgba(255,255,255,.7)} @media(max-width:520px){ .superchat-message{padding-inline:2px!important} .superchat-message .superchat-content{width:100%} .superchat-card{border-radius:12px} .superchat-card-head{min-height:68px;padding:10px 12px;gap:10px} .superchat-avatar{width:48px;height:48px;flex-basis:48px;font-size:19px} .superchat-card-name{font-size:14px}.superchat-card-amount{font-size:18px} .superchat-card-body{min-height:50px;padding:12px 13px 14px;font-size:16px} .superchat-modal-backdrop{padding:10px} .superchat-modal{width:min(96vw,460px);padding:16px;border-radius:21px} } @media(max-width:330px){ .superchat-presets{grid-template-columns:repeat(2,minmax(0,1fr))} .superchat-modal-head h2{font-size:18px} .superchat-modal{padding:12px;border-radius:17px} .superchat-card-head{min-height:58px;padding:8px;gap:8px} .superchat-avatar{width:38px;height:38px;flex-basis:38px;font-size:15px} .superchat-card-name{font-size:11px}.superchat-card-amount{font-size:15px}.superchat-card-time{font-size:8px} .superchat-card-body{min-height:40px;padding:9px 10px;font-size:13px} .superchat-modal-actions{grid-template-columns:1fr} } @media(max-width:220px){ .superchat-modal-backdrop{padding:4px} .superchat-modal{width:calc(100vw - 8px);padding:9px;border-radius:13px} .superchat-modal-head p,.superchat-free-note,.superchat-preview-label{display:none} .superchat-field-label{margin-top:10px} .superchat-preset{min-height:34px;font-size:10px} .superchat-custom-row input{height:34px} .superchat-message-input{min-height:62px;font-size:11px} } @media(prefers-reduced-motion:reduce){.superchat-tier-magenta::after,.superchat-tier-red::after{animation:none}} /* ---------- /for314 : local text amplifier ---------- */ .for314-amplifier-tool-card{ width:min(560px,calc(100% - 18px));margin:12px auto 16px;padding:14px; border:1px solid rgba(255,255,255,.16);border-radius:20px;color:var(--text,#eef3ff); background:linear-gradient(145deg,rgba(26,34,48,.80),rgba(18,24,35,.68)); box-shadow:0 15px 40px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10); -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%); } body.local-light .for314-amplifier-tool-card{color:#172033;border-color:rgba(38,55,80,.12);background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,245,252,.78));box-shadow:0 14px 36px rgba(45,64,91,.12),inset 0 1px 0 rgba(255,255,255,.92)} .for314-amplifier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .for314-amplifier-title{font-size:18px;font-weight:900;letter-spacing:.01em}.for314-amplifier-subtitle{margin-top:2px;font-size:10px;opacity:.55} .for314-amplifier-close{width:34px;height:34px;flex:0 0 34px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:inherit;font-size:23px;line-height:1;cursor:pointer} body.local-light .for314-amplifier-close{border-color:rgba(39,55,80,.12);background:rgba(60,80,110,.06)} .for314-amplifier-label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;opacity:.92} .for314-amplifier-input,.for314-amplifier-output,.for314-amplifier-count-input{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.13);outline:none;color:inherit;background:rgba(5,10,18,.30);font:inherit;-webkit-appearance:none;appearance:none} body.local-light .for314-amplifier-input,body.local-light .for314-amplifier-output,body.local-light .for314-amplifier-count-input{border-color:rgba(40,57,82,.13);background:rgba(255,255,255,.72)} .for314-amplifier-input{min-height:58px;resize:vertical;border-radius:13px;padding:10px 11px;font-size:14px;line-height:1.45} .for314-amplifier-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:11px 0 12px} .for314-amplifier-count-field,.for314-amplifier-newline-field{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800}.for314-amplifier-count-input{height:40px;border-radius:12px;padding:0 11px;font-size:14px;font-variant-numeric:tabular-nums}.for314-amplifier-newline-field{min-width:88px} .for314-amplifier-toggle{height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:inherit;font-size:12px;font-weight:900;cursor:pointer} .for314-amplifier-toggle.on{background:#1677ff;border-color:#1677ff;color:#fff;box-shadow:0 5px 15px rgba(22,119,255,.24)}body.local-light .for314-amplifier-toggle:not(.on){border-color:rgba(40,57,82,.13);background:rgba(255,255,255,.70)} .for314-amplifier-output-label{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.for314-amplifier-status{font-size:9px;font-weight:700;opacity:.55;text-align:right}.for314-amplifier-status.error{color:#ff6675;opacity:1} .for314-amplifier-output{min-height:154px;margin-top:7px;resize:vertical;border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere} .for314-amplifier-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.for314-amplifier-actions button{min-height:42px;border-radius:13px;font-size:13px;font-weight:900;cursor:pointer} .for314-amplifier-copy{border:0;background:#1677ff;color:#fff;box-shadow:0 6px 16px rgba(22,119,255,.22)}.for314-amplifier-clear{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:inherit}body.local-light .for314-amplifier-clear{border-color:rgba(40,57,82,.13);background:rgba(255,255,255,.72)} .for314-amplifier-input:focus,.for314-amplifier-output:focus,.for314-amplifier-count-input:focus{border-color:rgba(92,165,255,.85);box-shadow:0 0 0 3px rgba(40,130,245,.14)} @media(max-width:520px){.for314-amplifier-tool-card{width:calc(100% - 12px);margin:9px auto 13px;padding:12px;border-radius:18px}.for314-amplifier-title{font-size:16px}.for314-amplifier-input{font-size:13px}.for314-amplifier-output{min-height:138px;font-size:12px}} @media(max-width:260px){.for314-amplifier-tool-card{width:calc(100% - 6px);padding:8px;border-radius:13px}.for314-amplifier-subtitle{display:none}.for314-amplifier-controls{grid-template-columns:1fr;gap:7px}.for314-amplifier-newline-field{min-width:0}.for314-amplifier-actions{grid-template-columns:1fr}.for314-amplifier-output{min-height:106px}} .for314-amplifier-shared-card{position:relative} .for314-amplifier-shared-activity{min-height:16px;margin-top:8px;font-size:9px;font-weight:700;line-height:1.35;opacity:.52;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.local-light .for314-amplifier-shared-activity{opacity:.58} /* ---------- /chat : ephemeral chat-in-chat ---------- */ .ephemeral-mini-chat-card{ /* chatlog は flex-column。flex-shrink を止めないと、ログ量が多い時にカードが線まで潰れる。 */ flex:0 0 auto!important; flex-shrink:0!important; align-self:center; box-sizing:border-box; min-height:228px; width:min(520px,calc(100% - 18px));margin:12px auto 16px;overflow:hidden; border:1px solid rgba(255,255,255,.15);border-radius:21px;color:var(--text,#eef3ff); background:linear-gradient(145deg,rgba(25,33,47,.82),rgba(13,19,29,.72)); box-shadow:0 15px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.09); -webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%); } body.local-light .ephemeral-mini-chat-card{color:#172033;border-color:rgba(38,55,80,.12);background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,245,252,.84));box-shadow:0 14px 34px rgba(45,64,91,.12),inset 0 1px 0 rgba(255,255,255,.94)} .ephemeral-mini-chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 10px;border-bottom:1px solid rgba(255,255,255,.08)} body.local-light .ephemeral-mini-chat-head{border-bottom-color:rgba(40,57,82,.09)} .ephemeral-mini-chat-title{font-size:14px;font-weight:900;letter-spacing:.01em}.ephemeral-mini-chat-note{margin-top:2px;font-size:8px;font-weight:700;opacity:.46} .ephemeral-mini-chat-badge{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:rgba(86,152,255,.15);border:1px solid rgba(86,152,255,.22);font-size:9px;font-weight:900;color:#9bc7ff} body.local-light .ephemeral-mini-chat-badge{background:rgba(35,116,235,.08);border-color:rgba(35,116,235,.13);color:#276bc9} .ephemeral-mini-chat-log{box-sizing:border-box;min-height:128px;max-height:230px;overflow:auto;padding:11px 11px 8px;scrollbar-width:thin;overscroll-behavior:contain} .ephemeral-mini-chat-empty{display:flex;align-items:center;justify-content:center;min-height:100px;font-size:10px;font-weight:700;opacity:.38;text-align:center}.ephemeral-mini-chat-empty[hidden]{display:none} .ephemeral-mini-chat-row{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 8px;max-width:88%}.ephemeral-mini-chat-row.mine{align-items:flex-end;margin-left:auto} .ephemeral-mini-chat-meta{display:flex;align-items:center;gap:5px;margin:0 5px 3px;font-size:8px;line-height:1.2;opacity:.48}.ephemeral-mini-chat-row.mine .ephemeral-mini-chat-meta{flex-direction:row-reverse}.ephemeral-mini-chat-name{font-weight:800;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ephemeral-mini-chat-time{font-variant-numeric:tabular-nums} .ephemeral-mini-chat-bubble{max-width:100%;padding:7px 9px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word} .ephemeral-mini-chat-row.mine .ephemeral-mini-chat-bubble{border-radius:13px 13px 4px 13px;background:#1677ff;border-color:#1677ff;color:#fff;box-shadow:0 4px 12px rgba(22,119,255,.18)} body.local-light .ephemeral-mini-chat-row:not(.mine) .ephemeral-mini-chat-bubble{background:rgba(42,61,89,.07);border-color:rgba(42,61,89,.08)} .ephemeral-mini-chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:7px;padding:8px;border-top:1px solid rgba(255,255,255,.08);background:rgba(5,9,15,.10)} body.local-light .ephemeral-mini-chat-composer{border-top-color:rgba(40,57,82,.09);background:rgba(255,255,255,.34)} .ephemeral-mini-chat-input{box-sizing:border-box;width:100%;min-height:34px;max-height:92px;resize:none;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px;outline:none;padding:8px 10px;background:rgba(5,10,18,.28);color:inherit;font:inherit;font-size:12px;line-height:1.35;-webkit-appearance:none;appearance:none} body.local-light .ephemeral-mini-chat-input{border-color:rgba(40,57,82,.12);background:rgba(255,255,255,.72)}.ephemeral-mini-chat-input:focus{border-color:rgba(79,151,255,.78);box-shadow:0 0 0 3px rgba(40,130,245,.12)} .ephemeral-mini-chat-send{height:34px;min-width:54px;padding:0 11px;border:0;border-radius:11px;background:#1677ff;color:#fff;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(22,119,255,.20)} .ephemeral-mini-chat-send:active{transform:translateY(1px)} @media(max-width:520px){.ephemeral-mini-chat-card{width:calc(100% - 12px);margin:9px auto 13px;border-radius:18px}.ephemeral-mini-chat-log{min-height:116px;max-height:205px}.ephemeral-mini-chat-title{font-size:13px}.ephemeral-mini-chat-bubble{font-size:11px}.ephemeral-mini-chat-input{font-size:11px}} @media(max-width:260px){.ephemeral-mini-chat-card{width:calc(100% - 6px);min-height:190px;border-radius:13px}.ephemeral-mini-chat-note{display:none}.ephemeral-mini-chat-head{padding:8px}.ephemeral-mini-chat-badge{display:none}.ephemeral-mini-chat-log{min-height:94px;max-height:170px;padding:7px}.ephemeral-mini-chat-composer{grid-template-columns:1fr;padding:6px}.ephemeral-mini-chat-send{width:100%}} /* ---------- /dos : ephemeral Browser DOS card ---------- */ .for314-dos-card{ flex:0 0 auto!important; flex-shrink:0!important; align-self:center; box-sizing:border-box; width:min(760px,calc(100% - 18px)); margin:12px auto 16px; overflow:hidden; border:1px solid rgba(120,255,140,.20); border-radius:21px; color:#d9ffdd; background:linear-gradient(145deg,rgba(10,18,12,.94),rgba(3,8,4,.91)); box-shadow:0 16px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(180,255,192,.06); -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); } body.local-light .for314-dos-card{ color:#13351a; border-color:rgba(45,110,58,.20); background:linear-gradient(145deg,rgba(247,255,248,.96),rgba(226,244,230,.92)); box-shadow:0 14px 34px rgba(45,85,55,.13),inset 0 1px 0 rgba(255,255,255,.96); } .for314-dos-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 10px;border-bottom:1px solid rgba(120,255,140,.11)} body.local-light .for314-dos-card-head{border-bottom-color:rgba(45,110,58,.12)} .for314-dos-card-title-wrap{min-width:0}.for314-dos-card-title{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:900;letter-spacing:.03em}.for314-dos-card-note{margin-top:2px;max-width:390px;font-size:8px;font-weight:700;opacity:.50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-dos-card-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}.for314-dos-card-badge{padding:4px 7px;border-radius:999px;background:rgba(91,230,111,.11);border:1px solid rgba(91,230,111,.20);color:#a8efb2;font-size:9px;font-weight:900}body.local-light .for314-dos-card-badge{background:rgba(40,137,61,.08);border-color:rgba(40,137,61,.15);color:#26733a} .for314-dos-card-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.06);color:inherit;font-size:18px;line-height:1;cursor:pointer}body.local-light .for314-dos-card-close{border-color:rgba(30,75,40,.12);background:rgba(255,255,255,.68)}.for314-dos-card-close:active{transform:scale(.96)} .for314-dos-frame-wrap{background:#000;padding:0;overflow:hidden}.for314-dos-iframe{display:block;width:100%;height:clamp(360px,calc(75vw + 120px),620px);border:0;background:#000;color-scheme:dark} .for314-dos-card-foot{padding:8px 11px 10px;border-top:1px solid rgba(120,255,140,.09);font-size:9px;line-height:1.35;opacity:.50;text-align:center}body.local-light .for314-dos-card-foot{border-top-color:rgba(45,110,58,.11)} @media(max-width:520px){.for314-dos-card{width:calc(100% - 12px);margin:9px auto 13px;border-radius:18px}.for314-dos-card-head{padding:9px 10px}.for314-dos-card-title{font-size:13px}.for314-dos-card-note{max-width:240px}.for314-dos-iframe{height:clamp(350px,calc(75vw + 110px),610px)}.for314-dos-card-foot{font-size:8px}} @media(max-width:300px){.for314-dos-card{width:calc(100% - 6px);border-radius:13px}.for314-dos-card-head{padding:8px}.for314-dos-card-note{display:none}.for314-dos-card-badge{display:none}.for314-dos-iframe{height:360px}.for314-dos-card-foot{padding:6px;font-size:7px}} /* ===== Long text: collapse after 200 characters ===== */ .message-bubble .message-collapsible-text{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; } .message-bubble .message-more-toggle{ display:block; appearance:none; -webkit-appearance:none; margin:6px 0 0; padding:2px 0; border:0; background:transparent; color:inherit; font:inherit; font-size:11px; font-weight:700; line-height:1.25; text-decoration:underline; text-underline-offset:2px; opacity:.72; cursor:pointer; } .message-bubble .message-more-toggle:active{opacity:1} /* ===== Long text: light-mode readability fix ===== LIGHT v6 の子要素一括白文字指定と、ライト用button白背景を打ち消す。 */ body.local-light main .message-bubble .message-collapsible-text{ color:inherit!important; -webkit-text-fill-color:currentColor!important; } body.local-light main .message-bubble .message-more-toggle{ appearance:none!important; -webkit-appearance:none!important; background:transparent!important; background-color:transparent!important; background-image:none!important; border:0!important; border-color:transparent!important; box-shadow:none!important; outline:0!important; color:inherit!important; -webkit-text-fill-color:currentColor!important; } body.local-light main .message:not(.mine) .message-bubble .message-more-toggle{ color:#315da8!important; -webkit-text-fill-color:#315da8!important; opacity:.9; } body.local-light main .message.mine .message-bubble .message-collapsible-text, body.local-light main .message.mine .message-bubble .message-more-toggle{ color:#fff!important; -webkit-text-fill-color:#fff!important; } /* Native-alert inspired alert: command dialog */ .native-like-alert-backdrop{ position:fixed;inset:0;z-index:2147483646; display:grid;place-items:center;padding:20px; background:rgba(0,0,0,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); opacity:0;transition:opacity .12s ease; } .native-like-alert-backdrop.open{opacity:1} .native-like-alert-backdrop.closing{opacity:0;pointer-events:none} .native-like-alert-dialog{ width:min(320px,calc(100vw - 40px));overflow:hidden; color:#111;background:rgba(250,250,250,.98); border:1px solid rgba(0,0,0,.12);border-radius:14px; box-shadow:0 18px 55px rgba(0,0,0,.32); text-align:center;transform:scale(.96);transition:transform .12s ease; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .native-like-alert-backdrop.open .native-like-alert-dialog{transform:scale(1)} .native-like-alert-message{ min-height:78px;display:grid;place-items:center; padding:24px 22px 20px;font-size:15px;font-weight:500;line-height:1.45; white-space:pre-wrap;overflow-wrap:anywhere; } .native-like-alert-ok{ display:block;width:100%;min-height:46px;margin:0;padding:10px 16px; border:0;border-top:1px solid rgba(0,0,0,.13);border-radius:0; color:#007aff;background:transparent;font:600 16px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer;-webkit-tap-highlight-color:transparent; } .native-like-alert-ok:hover{background:rgba(0,122,255,.07)} .native-like-alert-ok:active{background:rgba(0,122,255,.14)} .native-like-alert-ok:focus-visible{outline:3px solid rgba(0,122,255,.32);outline-offset:-3px} body:not(.local-light) .native-like-alert-dialog{ color:#fff;background:rgba(42,42,44,.98);border-color:rgba(255,255,255,.16); } body:not(.local-light) .native-like-alert-ok{border-top-color:rgba(255,255,255,.17);color:#0a84ff} @media (prefers-reduced-motion:reduce){ .native-like-alert-backdrop,.native-like-alert-dialog{transition:none} } /* ===== for314 startup splash / transport check ===== */ .for314-splash{ --for314-splash-logo-scale:24; position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; overflow:hidden; isolation:isolate; pointer-events:auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .for314-splash::before{ content:""; position:absolute; inset:-24px; z-index:-1; background:rgba(8,12,20,.48); -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%); opacity:1; } body.local-light .for314-splash::before{ background:rgba(247,249,252,.48); } .for314-splash-shell{ position:relative; z-index:1; width:min(330px,calc(100vw - 20px)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transform:translateY(-1.5vh); } .for314-splash-logo-wrap{ position:relative; z-index:3; width:104px; height:104px; flex:0 0 104px; display:grid; place-items:center; margin-bottom:4px; will-change:transform,opacity; } .for314-splash-logo{ display:block; width:104px; height:104px; object-fit:contain; transform:translateZ(0) scale(1); transform-origin:center center; filter:drop-shadow(0 12px 28px rgba(0,0,0,.24)); will-change:transform,opacity,filter; } .for314-splash-status{ position:relative; z-index:2; min-height:24px; max-width:310px; padding:3px 10px; color:rgba(255,255,255,.92); font-size:13px; font-weight:650; line-height:1.45; letter-spacing:.01em; text-align:center; text-shadow:0 1px 8px rgba(0,0,0,.35); transition:opacity .18s ease,transform .18s ease,color .18s ease; will-change:opacity,transform; } body.local-light .for314-splash-status{ color:rgba(20,25,34,.88); text-shadow:0 1px 8px rgba(255,255,255,.55); } .for314-splash-online{ position:relative; z-index:2; min-height:22px; padding:2px 10px; color:rgba(222,230,242,.76); font-size:12px; font-weight:700; line-height:1.45; letter-spacing:.015em; text-align:center; opacity:0; transform:translateY(5px); transition:opacity .20s ease,transform .20s ease; will-change:opacity,transform; } .for314-splash-online.is-visible{ opacity:1; transform:translateY(0); } .for314-splash-online strong{ display:inline-block; min-width:1.2em; margin:0 2px; color:#fff; font-size:1.22em; font-weight:950; font-variant-numeric:tabular-nums; text-shadow:0 1px 10px rgba(0,0,0,.30); } body.local-light .for314-splash-online{ color:rgba(42,54,70,.68); } body.local-light .for314-splash-online strong{ color:#172231; text-shadow:0 1px 8px rgba(255,255,255,.60); } .for314-splash-status.is-ok::before{ content:"✓"; display:inline-block; margin-right:6px; font-weight:900; } /* 起動完了: 通信情報を先に消し、最後にアイコンが画面いっぱいまで迫って消える */ .for314-splash.is-launching{ pointer-events:none; } .for314-splash.is-launching::before{ animation:for314SplashBackdropOut 1.18s cubic-bezier(.2,.72,.22,1) forwards; } .for314-splash.is-launching .for314-splash-status, .for314-splash.is-launching .for314-splash-online{ animation:for314SplashDetailsOut .20s ease forwards; } .for314-splash.is-launching .for314-splash-logo-wrap{ z-index:5; } .for314-splash.is-launching .for314-splash-logo{ animation:for314SplashLogoRush 1.18s cubic-bezier(.18,.74,.16,1) forwards; } @keyframes for314SplashDetailsOut{ to{opacity:0;transform:translateY(8px) scale(.98)} } @keyframes for314SplashBackdropOut{ 0%,76%{opacity:1;-webkit-backdrop-filter:blur(16px) saturate(118%);backdrop-filter:blur(16px) saturate(118%)} 100%{opacity:0;-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%)} } /* X風: ほんの少し奥へ引いてから、一気に手前へ迫り、最後だけ柔らかくフェードアウト */ @keyframes for314SplashLogoRush{ 0%{transform:translateZ(0) scale(1);opacity:1;filter:drop-shadow(0 12px 28px rgba(0,0,0,.24))} 17%{transform:translateZ(0) scale(.86);opacity:1;filter:drop-shadow(0 9px 22px rgba(0,0,0,.20))} 24%{transform:translateZ(0) scale(.88);opacity:1} 82%{transform:translateZ(0) scale(var(--for314-splash-logo-scale));opacity:1;filter:drop-shadow(0 0 0 rgba(0,0,0,0))} 100%{transform:translateZ(0) scale(var(--for314-splash-logo-scale));opacity:0;filter:drop-shadow(0 0 0 rgba(0,0,0,0))} } @media(max-height:650px){ .for314-splash-shell{gap:9px;transform:translateY(0)} .for314-splash-logo-wrap,.for314-splash-logo{width:82px;height:82px} .for314-splash-logo-wrap{flex-basis:82px;margin-bottom:0} .for314-splash-status{font-size:12px} .for314-splash-online{font-size:11px} } @media(max-width:310px){ .for314-splash-shell{width:100vw} } @media(prefers-reduced-motion:reduce){ .for314-splash.is-launching::before, .for314-splash.is-launching .for314-splash-status, .for314-splash.is-launching .for314-splash-online, .for314-splash.is-launching .for314-splash-logo{ animation-duration:.16s!important; } .for314-splash.is-launching .for314-splash-logo{ animation-name:for314SplashLogoReduced; } @keyframes for314SplashLogoReduced{ to{opacity:0;transform:scale(1.08)} } } /* ========================================================= /addpw + /rmpw — room password vote event ========================================================= */ .pw-event-card{align-self:center;width:min(100%,620px);padding:13px;border:1px solid rgba(126,173,255,.22);border-radius:19px;background:linear-gradient(145deg,rgba(24,38,63,.72),rgba(15,23,38,.70));color:var(--text);box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)} .pw-event-card.is-ended{opacity:.72}.pw-event-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.pw-event-card-head strong{font-size:13px}.pw-event-badge{flex:none;padding:4px 8px;border:1px solid rgba(122,170,255,.25);border-radius:999px;background:rgba(92,145,255,.12);font-size:9px;font-weight:900}.pw-event-card-title{margin-top:10px;font-size:15px;font-weight:950}.pw-event-card-progress{margin-top:5px;font-size:11px;line-height:1.55;color:var(--muted)}.pw-event-card-members{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}.pw-event-card-open{width:100%;min-height:41px;margin-top:10px;border:1px solid rgba(115,166,255,.30);border-radius:13px;background:linear-gradient(180deg,rgba(70,129,244,.96),rgba(46,100,220,.92));color:#fff;font:inherit;font-size:12px;font-weight:900}.pw-event-card-open:disabled{opacity:.5} body.pw-event-modal-open{overflow:hidden!important}.pw-event-backdrop{position:fixed;inset:0;z-index:2147483300;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:rgba(5,10,19,.30);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}.pw-event-modal{width:min(94vw,520px);max-height:88dvh;overflow:auto;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(180deg,rgba(27,36,53,.88),rgba(13,20,31,.82));color:#f6f8fc;box-shadow:0 30px 90px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.10);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%)}.pw-event-modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(14,21,33,.52);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.pw-event-modal-head strong{font-size:15px}.pw-event-modal-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.07);color:inherit;font:inherit;font-size:22px;line-height:1}.pw-event-modal-body{padding:16px}.pw-event-question{text-align:center;font-size:19px;font-weight:950;line-height:1.4}.pw-event-note{margin-top:9px;text-align:center;color:#b9c5d5;font-size:11px;line-height:1.7}.pw-event-timer{margin-top:12px;text-align:center;font-size:12px;font-weight:900;color:#c9d7ec}.pw-vote-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.pw-vote-stats>div{padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045)}.pw-vote-stats span{font-size:11px;font-weight:900}.pw-vote-stats strong{float:right;font-size:12px}.pw-vote-bar{clear:both;height:6px;margin-top:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.pw-vote-bar i{display:block;height:100%;border-radius:inherit;background:rgba(75,151,255,.95)}.pw-vote-bar.no i{background:rgba(255,104,116,.90)}.pw-event-actions{display:flex;gap:10px;margin-top:14px}.pw-event-actions.two>*{flex:1}.pw-event-vote,.pw-event-primary,.pw-event-secondary,.pw-owner-choice{min-height:45px;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:#fff;font:inherit;font-size:12px;font-weight:900}.pw-event-vote.yes,.pw-event-primary{background:linear-gradient(180deg,rgba(65,139,255,.98),rgba(38,101,225,.94))}.pw-event-vote.no{background:linear-gradient(180deg,rgba(237,89,104,.92),rgba(197,56,75,.90))}.pw-event-secondary{width:100%;margin-top:9px;background:rgba(255,255,255,.06)}.pw-owner-list{display:grid;gap:8px;margin-top:14px}.pw-owner-choice{width:100%;text-align:left;padding:0 13px;background:rgba(255,255,255,.055)}.pw-owner-choice.selected{border-color:rgba(102,160,255,.7);background:rgba(70,129,244,.24)}.pw-owner-countdown{text-align:center;font-size:58px;font-weight:1000;line-height:1;margin-top:10px}.pw-owner-winner{text-align:center;margin-top:14px;font-size:26px;font-weight:1000;animation:pwOwnerPop .55s cubic-bezier(.2,.9,.25,1.25)}@keyframes pwOwnerPop{0%{transform:scale(.72);opacity:.25}100%{transform:scale(1);opacity:1}}.pw-event-input{width:100%;height:47px;margin-top:10px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font:inherit;outline:none}.pw-event-input:focus{border-color:rgba(105,162,255,.65);box-shadow:0 0 0 3px rgba(73,134,244,.12)}.pw-event-primary{width:100%;margin-top:13px}.pw-event-wait{text-align:center;margin-top:24px;font-size:17px;font-weight:950;line-height:1.6}.pw-event-dots{text-align:center;margin:16px 0 10px;font-size:18px;letter-spacing:.3em;animation:pwDots 1.15s ease-in-out infinite}@keyframes pwDots{50%{opacity:.35}}.pw-event-secret{margin:18px 0 6px;padding:17px 12px;border:1px solid rgba(110,168,255,.30);border-radius:17px;background:rgba(76,133,238,.13);text-align:center;font-size:26px;font-weight:1000;letter-spacing:.08em;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text} body.local-light .pw-event-card{background:linear-gradient(145deg,rgba(250,252,255,.94),rgba(239,245,255,.86));border-color:rgba(77,113,172,.16);color:#1f2937;box-shadow:0 14px 30px rgba(50,70,98,.10),inset 0 1px #fff}body.local-light .pw-event-card-members,body.local-light .pw-event-card-progress{color:#6b7889}body.local-light .pw-event-backdrop{background:rgba(229,235,245,.34)}body.local-light .pw-event-modal{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,248,255,.89));border-color:rgba(76,98,130,.13);color:#1e2937;box-shadow:0 30px 80px rgba(50,70,98,.16),inset 0 1px #fff}body.local-light .pw-event-modal-head{background:rgba(255,255,255,.66);border-color:rgba(76,98,130,.10)}body.local-light .pw-event-modal-close{background:rgba(235,240,248,.8);border-color:rgba(76,98,130,.12);color:#263445}body.local-light .pw-event-note,body.local-light .pw-event-timer{color:#66768b}body.local-light .pw-vote-stats>div,body.local-light .pw-owner-choice{background:rgba(255,255,255,.72);border-color:rgba(76,98,130,.11);color:#263445}body.local-light .pw-event-input{background:#fff;border-color:rgba(76,98,130,.16);color:#172231}body.local-light .pw-event-secondary{background:rgba(224,231,241,.66);border-color:rgba(76,98,130,.10);color:#263445}body.local-light .pw-event-secret{background:rgba(82,137,237,.08);border-color:rgba(82,137,237,.20);color:#172231} @media(max-width:430px){.pw-event-modal-body{padding:14px}.pw-event-question{font-size:17px}.pw-owner-winner{font-size:23px}.pw-event-secret{font-size:22px}.pw-event-card{padding:11px}} /* ========================================================= /ad — chat-style room-wide 300x250 sponsor message ========================================================= */ .message.room-ad-message.with-avatar{ width:min(370px,94%); max-width:94%; } .message.room-ad-message .message-content{ width:min(326px,calc(100vw - 70px)); max-width:100%; } .message.room-ad-message .room-ad-bubble{ width:100%; max-width:100%; padding:8px 9px 10px; box-sizing:border-box; white-space:normal; overflow:hidden; } .room-ad-chat-text{ margin:1px 3px 7px; font-size:12px; font-weight:950; line-height:1.35; display:block; width:max-content; max-width:100%; animation:roomAdBoredShake .62s steps(2,end) infinite; transform-origin:50% 50%; will-change:transform; } @keyframes roomAdBoredShake{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 16%{transform:translate3d(-1px,0,0) rotate(-.25deg)} 32%{transform:translate3d(1px,0,0) rotate(.25deg)} 48%{transform:translate3d(-1px,1px,0) rotate(0deg)} 64%{transform:translate3d(1px,-1px,0) rotate(.2deg)} 80%{transform:translate3d(-1px,0,0) rotate(-.2deg)} } @media (prefers-reduced-motion:reduce){.room-ad-chat-text{animation:none!important}} .room-ad-card-head{ width:300px; max-width:100%; min-height:20px; margin:0 auto 6px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:rgba(255,255,255,.74); font-size:10px; line-height:1.3; } body.local-light .message:not(.mine).room-ad-message .room-ad-card-head{color:rgba(20,25,34,.62)} /* LIGHT: the generic light-mode rule makes every bubble descendant white. /ad uses a pale incoming bubble, so explicitly restore readable dark text. */ body.local-light main .message.room-ad-message .message-meta{ color:#4f5f72!important; text-shadow:none!important; } body.local-light main .message:not(.mine).room-ad-message .room-ad-chat-text{ color:#172231!important; } body.local-light main .message:not(.mine).room-ad-message .room-ad-card-head, body.local-light main .message:not(.mine).room-ad-message .room-ad-card-head *{ color:#526174!important; } body.local-light main .message.mine.room-ad-message .room-ad-chat-text, body.local-light main .message.mine.room-ad-message .room-ad-card-head, body.local-light main .message.mine.room-ad-message .room-ad-card-head *{ color:#fff!important; } .room-ad-card-label{font-weight:800;letter-spacing:.04em} .room-ad-card-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right} .room-ad-card-frame{ display:block; width:300px; height:250px; max-width:100%; margin:0 auto; border:0; overflow:hidden; background:transparent; } @media(max-width:360px){ .message.room-ad-message.with-avatar{width:96%;max-width:96%} .message.room-ad-message .message-content{width:calc(100vw - 58px)} .message.room-ad-message .room-ad-bubble{padding-left:5px;padding-right:5px} .room-ad-card-head{padding:0 4px;box-sizing:border-box} } /* /font — room-shared, device-aware Japanese font presets */ html.for314-room-font-active body{ font-family:var(--for314-room-font-family)!important; font-weight:var(--for314-room-font-weight,400); letter-spacing:var(--for314-room-font-letter-spacing,normal); } html.for314-room-font-active body input, html.for314-room-font-active body textarea, html.for314-room-font-active body button, html.for314-room-font-active body select{ font-family:var(--for314-room-font-family)!important; letter-spacing:var(--for314-room-font-letter-spacing,normal); } /* Command/code surfaces should remain monospaced even when the room UI font changes. */ html.for314-room-font-active body code, html.for314-room-font-active body pre, html.for314-room-font-active body kbd, html.for314-room-font-active body samp, html.for314-room-font-active body .command-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important; } .room-font-backdrop{ position:fixed;inset:0;z-index:2147483400;display:none;align-items:center;justify-content:center; padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); background:rgba(5,10,19,.34);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%); } .room-font-backdrop.open{display:flex} .room-font-modal{ width:min(94vw,560px);max-height:88dvh;overflow:auto;border:1px solid rgba(255,255,255,.14);border-radius:24px; background:linear-gradient(180deg,rgba(27,36,53,.90),rgba(13,20,31,.84));color:#f6f8fc; box-shadow:0 30px 90px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.10); backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%); } .room-font-modal-head{ position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(14,21,33,.58); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } .room-font-modal-head strong{font-size:16px} .room-font-modal-close{ width:36px;height:36px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.07); color:inherit;font-size:22px;line-height:1;cursor:pointer; } .room-font-modal-body{padding:15px} .room-font-modal-note{color:#b9c5d5;font-size:11px;line-height:1.7;margin:0 1px 13px} .room-font-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .room-font-option{ position:relative;min-width:0;min-height:108px;padding:12px 12px 11px;text-align:left;border:1px solid rgba(255,255,255,.10); border-radius:16px;background:rgba(255,255,255,.055);color:#f6f8fc;cursor:pointer;overflow:hidden; transition:transform .14s ease,border-color .14s ease,background .14s ease; } .room-font-option:hover{transform:translateY(-1px);background:rgba(255,255,255,.085)} .room-font-option:focus-visible{outline:2px solid rgba(102,160,255,.95);outline-offset:2px} .room-font-option.selected{border-color:rgba(105,164,255,.75);background:rgba(70,129,244,.20);box-shadow:inset 0 0 0 1px rgba(105,164,255,.18)} .room-font-option-title{display:block;font-size:14px;font-weight:900} .room-font-option-sample{display:block;margin-top:6px;font-size:17px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .room-font-option-desc{display:block;margin-top:6px;color:#b9c5d5;font-size:9px;line-height:1.45} .room-font-option-current{ display:none;position:absolute;right:8px;top:8px;padding:2px 6px;border-radius:999px;background:rgba(82,143,255,.28); border:1px solid rgba(122,174,255,.34);font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:8px;font-weight:900; } .room-font-option.selected .room-font-option-current{display:inline-flex} body.local-light .room-font-modal{background:linear-gradient(180deg,rgba(250,252,255,.94),rgba(239,244,251,.90));color:#182235;border-color:rgba(70,91,125,.16)} body.local-light .room-font-modal-head{background:rgba(247,250,255,.72);border-color:rgba(70,91,125,.10)} body.local-light .room-font-modal-note,body.local-light .room-font-option-desc{color:#617087} body.local-light .room-font-option{background:rgba(255,255,255,.68);color:#182235;border-color:rgba(70,91,125,.12)} body.local-light .room-font-option.selected{background:rgba(71,130,232,.12);border-color:rgba(71,130,232,.42)} @media(max-width:420px){ .room-font-backdrop{padding:8px}.room-font-modal{width:98vw;border-radius:18px}.room-font-modal-head{padding:11px 12px} .room-font-modal-body{padding:10px}.room-font-grid{grid-template-columns:1fr;gap:7px}.room-font-option{min-height:88px;padding:10px} .room-font-option-sample{font-size:15px}.room-font-option-desc{font-size:8px} } /* fontsize:1-100 — shared normal chat text size only */ html.for314-room-fontsize-active .message-bubble.room-fontsize-target{ font-size:var(--for314-room-font-size)!important; line-height:1.35; } /* Keep the "show more" control usable even when chat text is huge. */ html.for314-room-fontsize-active .message-bubble.room-fontsize-target .message-collapse-toggle{ font-size:clamp(10px,0.42em,16px)!important; } /* confirm: shared YES/NO modal + result card */ .confirm-choice-backdrop{position:fixed;inset:0;z-index:2147483100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.56);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .16s ease} .confirm-choice-backdrop.open{opacity:1} .confirm-choice-modal{width:min(92vw,430px);padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--panel);background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.38);text-align:center} .confirm-choice-badge{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(91,140,255,.16);font-size:11px;font-weight:900;letter-spacing:.12em} .confirm-choice-by{margin-top:10px;color:var(--muted);font-size:12px;font-weight:700} .confirm-choice-question{margin:12px 0 8px;font-size:clamp(18px,4vw,26px);font-weight:900;line-height:1.35;overflow-wrap:anywhere} .confirm-choice-timer{color:var(--muted);font-size:12px} .confirm-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .confirm-choice-button{min-height:48px;border-radius:14px;border:1px solid var(--border);font-size:16px;font-weight:900;cursor:pointer;color:#fff} .confirm-choice-button.yes{background:#218b52}.confirm-choice-button.no{background:#b3404a}.confirm-choice-button:disabled{opacity:.48;cursor:default} .confirm-choice-reaction{min-height:0;margin-top:0;font-weight:900;opacity:0;transform:translateY(4px);transition:.18s ease;overflow-wrap:anywhere}.confirm-choice-reaction.show{min-height:24px;margin-top:14px;opacity:1;transform:none} .confirm-result-card{align-self:center;width:min(94%,520px);padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.18)} .confirm-result-title{font-size:13px;font-weight:900}.confirm-result-by{margin-top:2px;color:var(--muted);font-size:11px}.confirm-result-question{margin:9px 0 12px;font-size:15px;font-weight:900;overflow-wrap:anywhere}.confirm-result-row{margin-top:9px}.confirm-result-row-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800}.confirm-result-track{height:8px;margin-top:5px;border-radius:999px;background:rgba(127,127,127,.2);overflow:hidden}.confirm-result-bar{height:100%;border-radius:inherit;transition:width .3s ease}.confirm-result-bar.yes{background:#38a169}.confirm-result-bar.no{background:#d65b66}.confirm-result-foot{margin-top:10px;color:var(--muted);font-size:11px} @media(max-width:300px){.confirm-choice-backdrop{padding:6px}.confirm-choice-modal{width:98vw;padding:12px;border-radius:14px}.confirm-choice-question{font-size:16px}.confirm-choice-actions{gap:6px;margin-top:12px}.confirm-choice-button{min-height:40px;font-size:13px}.confirm-result-card{width:98%;padding:9px;border-radius:11px}.confirm-result-question{font-size:12px}.confirm-result-row-top,.confirm-result-foot{font-size:9px}} /* /abe shared homepage widget ------------------------------------------------ */ .for314-abe-card{ position:relative; width:min(300px,calc(100% - 8px)); aspect-ratio:1/1; flex:0 0 auto!important; flex-shrink:0!important; align-self:center; margin:8px auto; overflow:hidden; border:1px solid rgba(128,128,128,.34); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.16); isolation:isolate; } .for314-abe-frame-layer{ position:absolute; inset:0; overflow:hidden; background:#fff; } .for314-abe-iframe{ position:absolute; left:0; top:0; width:333.333333%; height:333.333333%; border:0; margin:0; padding:0; background:#fff; transform:scale(.3); transform-origin:0 0; } .for314-abe-chrome{ position:absolute; z-index:3; top:7px; left:7px; right:7px; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; pointer-events:none; } .for314-abe-label{ min-width:0; max-width:calc(100% - 72px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:5px 9px; border:1px solid rgba(255,255,255,.52); border-radius:999px; background:rgba(24,24,27,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff; font:600 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.18); } .for314-abe-actions{ display:flex; gap:4px; pointer-events:auto; } .for314-abe-open,.for314-abe-close{ width:30px; height:30px; display:grid; place-items:center; box-sizing:border-box; border:1px solid rgba(255,255,255,.52); border-radius:999px; background:rgba(24,24,27,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff!important; text-decoration:none!important; font:700 16px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.18); cursor:pointer; } .for314-abe-close{appearance:none;-webkit-appearance:none;padding:0;} .for314-abe-open:active,.for314-abe-close:active{transform:scale(.94);} @media (max-width:360px){ .for314-abe-card{width:min(300px,calc(100% - 4px));border-radius:15px;} .for314-abe-chrome{top:5px;left:5px;right:5px;} .for314-abe-label{font-size:10px;padding:4px 7px;max-width:calc(100% - 64px);} .for314-abe-open,.for314-abe-close{width:27px;height:27px;font-size:14px;} } /* ---------- /aiai shared AI discussion ---------- */ .aiai-topic-backdrop,.aiai-backdrop{position:fixed;inset:0;z-index:2147482400;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(18,22,32,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .18s ease}.aiai-topic-backdrop.open,.aiai-backdrop.open{opacity:1;pointer-events:auto}.aiai-topic-dialog{width:min(430px,calc(100vw - 20px));padding:20px;border:1px solid rgba(127,136,158,.24);border-radius:22px;background:color-mix(in srgb,var(--panel,#fff) 94%,transparent);box-shadow:0 22px 70px rgba(0,0,0,.22);color:var(--text,#151821)}.aiai-topic-dialog>strong{display:block;font-size:18px;line-height:1.4}.aiai-topic-desc{margin:7px 0 14px;color:var(--muted,var(--sub,#6b7280));font-size:12px;line-height:1.55}.aiai-topic-dialog input{width:100%;min-height:46px;padding:10px 12px;border:1px solid rgba(127,136,158,.26);border-radius:14px;outline:0;background:rgba(127,136,158,.08);color:inherit;font:inherit}.aiai-topic-dialog input:focus{border-color:rgba(80,140,255,.62);box-shadow:0 0 0 3px rgba(80,140,255,.12)}.aiai-topic-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.aiai-topic-actions button{min-height:40px;padding:0 15px;border:0;border-radius:12px;background:#111827;color:#fff;font:inherit;font-weight:800;cursor:pointer}.aiai-topic-actions button.secondary{border:1px solid rgba(127,136,158,.22);background:rgba(127,136,158,.10);color:inherit} .aiai-modal{width:min(820px,100%);height:min(780px,calc(100dvh - 20px));min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(127,136,158,.22);border-radius:24px;background:color-mix(in srgb,var(--panel,#fff) 92%,transparent);box-shadow:0 26px 90px rgba(0,0,0,.24);color:var(--text,#151821);transform:translateY(8px) scale(.985);transition:transform .18s ease}.aiai-backdrop.open .aiai-modal{transform:none}.aiai-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 12px 7px;flex:0 0 auto}.aiai-topbar-text{min-width:0}.aiai-topbar-text>strong{display:block;font-size:15px}.aiai-topbar-topic{margin-top:2px;max-width:680px;color:var(--muted,var(--sub,#6b7280));font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aiai-close{width:34px;height:34px;flex:none;border:1px solid rgba(127,136,158,.18);border-radius:50%;background:rgba(127,136,158,.08);color:inherit;font-size:22px;line-height:1;cursor:pointer}.aiai-composer{display:flex;gap:7px;margin:0 12px 8px;padding:7px;border:1px solid rgba(127,136,158,.18);border-radius:16px;background:rgba(127,136,158,.07);flex:0 0 auto}.aiai-composer input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:inherit;padding:8px 9px;font:inherit;font-size:14px}.aiai-composer button{border:0;border-radius:11px;padding:0 15px;min-height:38px;background:#111827;color:#fff;font-weight:800;cursor:pointer}.aiai-composer button:disabled,.aiai-composer input:disabled{opacity:.45}.aiai-summary-card{margin:0 12px 7px;padding:9px 11px 10px;border:1px solid rgba(127,136,158,.18);border-radius:14px;background:rgba(127,136,158,.055);flex:0 0 auto;overflow:hidden}.aiai-summary-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:11px;font-weight:850}.aiai-summary-badge{padding:2px 7px;border-radius:999px;background:rgba(127,136,158,.11);color:var(--muted,var(--sub,#6b7280));font-size:9px}.aiai-summary-text{max-height:72px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:inherit;font-size:11.5px;line-height:1.5}.aiai-summary-card.updated{animation:aiaiSummaryFlash .7s ease}@keyframes aiaiSummaryFlash{38%{transform:translateY(-1px);box-shadow:0 8px 24px rgba(80,130,255,.15)}} .aiai-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;padding:2px 10px 0;min-height:155px;flex:0 0 auto}.aiai-character{position:relative;text-align:center;min-width:0;transition:transform .2s ease,filter .2s ease}.aiai-character.speaking{transform:translateY(-3px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.11))}.aiai-portrait{height:125px;display:flex;justify-content:center;align-items:flex-end;overflow:visible}.aiai-character img{display:block;width:min(160px,37vw);height:auto;max-height:136px;object-fit:contain;user-select:none;-webkit-user-drag:none}.aiai-character.py img{transform:scaleX(-1)}.aiai-name{display:inline-flex;align-items:center;gap:5px;position:relative;z-index:2;margin-top:-6px;padding:4px 9px;border:1px solid rgba(127,136,158,.18);border-radius:999px;background:color-mix(in srgb,var(--panel,#fff) 94%,transparent);font-size:10.5px;font-weight:800}.aiai-dot{width:6px;height:6px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.13)}.aiai-live{position:absolute;z-index:3;top:-4px;left:3px;max-width:min(290px,68vw);padding:8px 10px;border:1px solid #9cc9ff;border-radius:15px;background:#e9f3ff;color:#172033;box-shadow:0 8px 26px rgba(0,0,0,.10);font-size:12px;font-weight:650;line-height:1.45;text-align:left;opacity:0;transform:translateY(6px) scale(.98);pointer-events:none;transition:.16s ease;overflow-wrap:anywhere}.aiai-character.py .aiai-live{left:auto;right:3px;border-color:#f4accf;background:#fff0f7;color:#362130}.aiai-live.show{opacity:1;transform:none}.aiai-typing{display:inline-flex;gap:4px;align-items:center;height:16px}.aiai-typing i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:aiaiBounce 1s infinite}.aiai-typing i:nth-child(2){animation-delay:.15s}.aiai-typing i:nth-child(3){animation-delay:.3s}@keyframes aiaiBounce{35%{transform:translateY(-4px);opacity:.9}} .aiai-controls{display:flex;justify-content:center;gap:7px;margin:4px 12px 2px;flex:0 0 auto}.aiai-controls[hidden]{display:none!important}.aiai-controls button{border:1px solid rgba(127,136,158,.18);border-radius:11px;background:rgba(127,136,158,.08);color:inherit;padding:6px 11px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.aiai-controls button.danger{color:#d13b4b}.aiai-status{min-height:17px;margin:3px 12px 5px;text-align:center;color:var(--muted,var(--sub,#6b7280));font-size:10.5px;flex:0 0 auto}.aiai-log{display:flex;flex:1 1 0;min-height:90px;flex-direction:column;gap:7px;margin:0 10px;padding:9px 7px 13px;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;border:1px solid rgba(127,136,158,.16);border-radius:16px;background:rgba(127,136,158,.035)}.aiai-log-row{display:flex;flex:0 0 auto}.aiai-log-row.ai{justify-content:flex-start}.aiai-log-row.py{justify-content:flex-end}.aiai-log-row.user{justify-content:center}.aiai-log-msg{max-width:min(78%,560px);padding:8px 11px;border:1px solid rgba(127,136,158,.15);border-radius:15px;background:color-mix(in srgb,var(--panel,#fff) 94%,transparent);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.aiai-log-row.ai .aiai-log-msg{border-color:#9cc9ff;background:#e9f3ff;color:#172033;border-bottom-left-radius:5px}.aiai-log-row.py .aiai-log-msg{border-color:#f4accf;background:#fff0f7;color:#362130;border-bottom-right-radius:5px}.aiai-log-row.user .aiai-log-msg{background:rgba(127,136,158,.10);text-align:center;max-width:88%}.aiai-log-who{display:block;margin-bottom:2px;color:#687084;font-size:9px;font-weight:850}.aiai-log-row.py .aiai-log-who{text-align:right}.aiai-note{padding:5px 12px 9px;text-align:center;color:var(--muted,var(--sub,#6b7280));font-size:9px;line-height:1.4;flex:0 0 auto} .aiai-chat-card{width:min(420px,calc(100% - 16px));margin:8px auto;padding:12px;border:1px solid rgba(127,136,158,.18);border-radius:18px;background:color-mix(in srgb,var(--panel,#fff) 90%,transparent);box-shadow:0 7px 24px rgba(0,0,0,.07);color:var(--text,#151821)}.aiai-chat-card-head{display:flex;align-items:center;gap:7px;font-size:13px}.aiai-chat-card-topic{margin-top:7px;font-size:12px;font-weight:750;overflow-wrap:anywhere}.aiai-chat-card-summary{margin-top:5px;max-height:62px;overflow:hidden;color:var(--muted,var(--sub,#6b7280));font-size:10.5px;line-height:1.45}.aiai-chat-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}.aiai-chat-card-status{font-size:10px;color:var(--muted,var(--sub,#6b7280))}.aiai-chat-card-open{border:0;border-radius:10px;background:#111827;color:#fff;padding:7px 12px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer} @media(prefers-color-scheme:dark){.aiai-live{background:#172b43;color:#eef6ff;border-color:#35699d}.aiai-character.py .aiai-live{background:#3d2031;color:#fff2f7;border-color:#874d6b}.aiai-log-row.ai .aiai-log-msg{background:#172b43;color:#eef6ff;border-color:#35699d}.aiai-log-row.py .aiai-log-msg{background:#3d2031;color:#fff2f7;border-color:#874d6b}.aiai-topic-actions button:not(.secondary),.aiai-composer button,.aiai-chat-card-open{background:#f5f7fb;color:#111827}} @media(max-width:520px){.aiai-backdrop{padding:5px}.aiai-modal{height:calc(100dvh - 10px);border-radius:19px}.aiai-topbar{padding:9px 9px 5px}.aiai-composer{margin:0 8px 6px}.aiai-summary-card{margin:0 8px 5px}.aiai-summary-text{max-height:54px}.aiai-stage{min-height:126px;gap:4px;padding:0 3px}.aiai-portrait{height:101px}.aiai-character img{max-height:110px;width:min(145px,45vw)}.aiai-live{font-size:10.5px;max-width:76vw;padding:6px 8px}.aiai-controls{margin-top:2px}.aiai-status{margin-bottom:3px}.aiai-log{margin:0 6px;padding:7px 5px 10px}.aiai-log-msg{max-width:84%;font-size:11px}.aiai-note{display:none}} @media(max-width:330px),(max-height:430px){.aiai-modal{border-radius:14px}.aiai-topbar-text>strong{font-size:12px}.aiai-topbar-topic{font-size:9px}.aiai-composer{padding:4px}.aiai-composer input{font-size:11px;padding:5px}.aiai-composer button{min-height:31px;padding:0 9px;font-size:10px}.aiai-summary-card{padding:5px 7px}.aiai-summary-text{max-height:32px;font-size:9px}.aiai-stage{min-height:64px}.aiai-portrait{height:52px}.aiai-character img{max-height:58px;width:min(84px,42vw)}.aiai-name{margin-top:-3px;padding:2px 5px;font-size:8px}.aiai-live{top:-8px;font-size:8px;padding:4px 5px}.aiai-controls button{padding:4px 7px;font-size:9px}.aiai-status{font-size:8px;min-height:12px}.aiai-log{min-height:50px}.aiai-log-msg{font-size:9px;padding:5px 7px}.aiai-note{display:none}.aiai-chat-card{width:calc(100% - 8px);margin:4px auto;padding:7px;border-radius:12px}.aiai-chat-card-summary{display:none}.aiai-chat-card-topic{font-size:9px}.aiai-chat-card-head{font-size:10px}.aiai-chat-card-foot{margin-top:5px}.aiai-chat-card-open{padding:5px 7px;font-size:8px}} /* ===== v146 /janken survival tournament ===== */ .janken-card{width:min(460px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(120,132,155,.22);border-radius:18px;background:color-mix(in srgb,var(--panel,#fff) 91%,transparent);box-shadow:0 9px 28px rgba(0,0,0,.10);color:var(--text,#151821)} .janken-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.janken-card-head strong{font-size:13px}.janken-card-clock{padding:3px 8px;border-radius:999px;background:rgba(127,136,158,.10);font-size:10px;font-weight:900}.janken-card-desc{margin-top:7px;font-size:11px;line-height:1.5;font-weight:700}.janken-card-people{margin-top:6px;max-height:52px;overflow:auto;color:var(--muted,var(--sub,#6b7280));font-size:10px;line-height:1.45}.janken-card-action{width:100%;min-height:38px;margin-top:9px;border:0;border-radius:12px;background:#111827;color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.janken-card-action:disabled{opacity:.48;cursor:default} .janken-backdrop{position:fixed;inset:0;z-index:2147482700;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(12,16,24,.30);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .16s ease}.janken-backdrop.open{opacity:1;pointer-events:auto}.janken-modal{width:min(680px,100%);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:auto;padding:12px;border:1px solid rgba(127,136,158,.22);border-radius:22px;background:color-mix(in srgb,var(--panel,#fff) 94%,transparent);box-shadow:0 24px 80px rgba(0,0,0,.24);color:var(--text,#151821)} .janken-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.janken-top>div{min-width:0}.janken-top strong{display:block;font-size:16px}.janken-top span{display:block;margin-top:2px;color:var(--muted,var(--sub,#6b7280));font-size:10px}.janken-top button{width:34px;height:34px;flex:none;border:1px solid rgba(127,136,158,.18);border-radius:50%;background:rgba(127,136,158,.08);color:inherit;font:700 22px/1 system-ui;cursor:pointer}.janken-status{min-height:22px;margin:9px 2px 7px;text-align:center;font-size:11px;font-weight:800;color:var(--muted,var(--sub,#6b7280))} .janken-hands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.janken-hand{min-width:0;padding:8px 5px 7px;border:2px solid transparent;border-radius:16px;background:rgba(127,136,158,.07);color:inherit;font:inherit;font-weight:900;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}.janken-hand:active{transform:scale(.97)}.janken-hand.selected{border-color:#5b8def;background:rgba(91,141,239,.12);transform:translateY(-2px)}.janken-hand img{display:block;width:100%;height:min(170px,28vw);object-fit:contain;user-select:none;-webkit-user-drag:none}.janken-hand span{display:block;margin-top:4px;font-size:12px}.janken-reveal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:7px;margin-top:4px}.janken-reveal-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:7px;border:1px solid rgba(127,136,158,.16);border-radius:13px;background:rgba(127,136,158,.05)}.janken-reveal-item.eliminated{opacity:.45;filter:grayscale(.45)}.janken-reveal-item.eliminated::after{content:'敗退';position:absolute;top:5px;right:5px;padding:2px 5px;border-radius:999px;background:rgba(190,42,55,.88);color:#fff;font-size:8px;font-weight:900}.janken-reveal-item img{width:72px;height:72px;object-fit:contain}.janken-reveal-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:850}.janken-reveal-item small{margin-top:2px;color:var(--muted,var(--sub,#6b7280));font-size:9px}.janken-result{margin:10px 2px 2px;text-align:center;font-size:14px;font-weight:950;line-height:1.5}.janken-note{margin-top:8px;text-align:center;color:var(--muted,var(--sub,#6b7280));font-size:9px;line-height:1.4} body.local-light .janken-card-action{background:#234f8d;color:#fff}.janken-card-action,.janken-hand{-webkit-tap-highlight-color:transparent} @media(prefers-color-scheme:dark){.janken-card-action{background:#f5f7fb;color:#111827}} @media(max-width:420px){.janken-modal{border-radius:18px;padding:9px}.janken-top strong{font-size:13px}.janken-hands{gap:5px}.janken-hand{padding:5px 3px;border-radius:12px}.janken-hand img{height:min(125px,27vw)}.janken-hand span{font-size:10px}.janken-reveal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.janken-reveal-item img{width:52px;height:52px}.janken-result{font-size:12px}} @media(max-width:260px),(max-height:360px){.janken-modal{padding:6px;border-radius:12px}.janken-status{margin:4px 0;font-size:8px}.janken-hand img{height:58px}.janken-note{display:none}.janken-reveal-item{padding:3px}.janken-reveal-item img{width:34px;height:34px}.janken-card{padding:7px;border-radius:12px}.janken-card-desc,.janken-card-people{font-size:8px}.janken-card-action{min-height:29px;font-size:9px}} /* ===== v148 iOS/Safari dark-mode shared action button contrast fix ===== iOS can combine prefers-color-scheme:dark with body.local-dark. The older generic body.local-dark button rule had higher specificity than the white primary-button rule, producing white text on a white button. */ .aiai-topic-actions button:not(.secondary), .aiai-composer button, .aiai-chat-card-open, .janken-card-action{ -webkit-appearance:none!important; appearance:none!important; background-clip:padding-box; } body.local-dark .aiai-topic-actions button:not(.secondary), body.local-dark .aiai-composer button, body.local-dark .aiai-chat-card-open, body.local-dark .janken-card-action{ background:#f5f7fb!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border-color:rgba(255,255,255,.22)!important; color-scheme:light; } body.local-light .aiai-topic-actions button:not(.secondary), body.local-light .aiai-composer button, body.local-light .aiai-chat-card-open, body.local-light .janken-card-action{ background:#fff!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border-color:rgba(17,24,39,.22)!important; color-scheme:light; } body.local-dark .aiai-composer button:disabled, body.local-dark .aiai-chat-card-open:disabled, body.local-dark .janken-card-action:disabled, body.local-light .aiai-composer button:disabled, body.local-light .aiai-chat-card-open:disabled, body.local-light .janken-card-action:disabled{ color:#4b5563!important; -webkit-text-fill-color:#4b5563!important; } /* v150 /otherroom official public room picker */ .other-room-backdrop{position:fixed;inset:0;z-index:100080;display:none;align-items:center;justify-content:center;padding:12px;background:rgba(4,8,18,.48);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .other-room-backdrop.open{display:flex} .other-room-modal{box-sizing:border-box;width:min(420px,calc(100vw - 24px));max-height:min(680px,calc(100vh - 24px));overflow:auto;padding:16px;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(248,250,252,.94);box-shadow:0 24px 70px rgba(0,0,0,.32);color:#111827;-webkit-overflow-scrolling:touch} .other-room-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.other-room-title{font-size:18px;font-weight:800;letter-spacing:.01em}.other-room-close{appearance:none;-webkit-appearance:none;width:34px;height:34px;border:0;border-radius:50%;background:rgba(15,23,42,.08);color:#111827;-webkit-text-fill-color:#111827;font-size:24px;line-height:1;cursor:pointer}.other-room-desc{margin:6px 0 14px;color:#64748b;font-size:13px;line-height:1.5}.other-room-field{display:grid;gap:6px;margin:10px 0}.other-room-field>span{font-size:12px;font-weight:800;color:#475569}.other-room-select{box-sizing:border-box;width:100%;min-height:44px;padding:0 38px 0 12px;border:1px solid rgba(15,23,42,.14);border-radius:14px;background:#fff;color:#111827;-webkit-text-fill-color:#111827;font:inherit;font-weight:700}.other-room-summary{margin-top:14px;padding:14px;border:1px solid rgba(15,23,42,.09);border-radius:18px;background:rgba(255,255,255,.72)}.other-room-summary-name{display:block;font-size:17px}.other-room-summary-meta{margin-top:5px;color:#64748b;font-size:12px;font-weight:700}.other-room-summary-online{margin-top:8px;color:#0f172a;font-size:13px;font-weight:800}.other-room-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:14px}.other-room-refresh,.other-room-move{appearance:none;-webkit-appearance:none;min-height:44px;border:0;border-radius:15px;padding:0 14px;font:inherit;font-weight:800;cursor:pointer}.other-room-refresh{background:rgba(15,23,42,.08);color:#111827;-webkit-text-fill-color:#111827}.other-room-move{background:#111827;color:#fff;-webkit-text-fill-color:#fff}.other-room-move:disabled{opacity:.45;cursor:default} html.dark .other-room-modal,body.local-dark .other-room-modal{background:rgba(15,23,42,.95);border-color:rgba(255,255,255,.13);color:#f8fafc}.local-dark .other-room-close,html.dark .other-room-close{background:rgba(255,255,255,.1);color:#f8fafc;-webkit-text-fill-color:#f8fafc}.local-dark .other-room-desc,html.dark .other-room-desc,.local-dark .other-room-field>span,html.dark .other-room-field>span,.local-dark .other-room-summary-meta,html.dark .other-room-summary-meta{color:#aeb9c8}.local-dark .other-room-select,html.dark .other-room-select{background:#f8fafc;color:#111827;-webkit-text-fill-color:#111827}.local-dark .other-room-summary,html.dark .other-room-summary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11)}.local-dark .other-room-summary-online,html.dark .other-room-summary-online{color:#f8fafc}.local-dark .other-room-refresh,html.dark .other-room-refresh{background:rgba(255,255,255,.1);color:#f8fafc;-webkit-text-fill-color:#f8fafc}.local-dark .other-room-move,html.dark .other-room-move{background:#f8fafc;color:#111827;-webkit-text-fill-color:#111827} @media(max-width:360px){.other-room-modal{padding:12px;border-radius:18px}.other-room-actions{grid-template-columns:1fr}.other-room-title{font-size:16px}} /* ===== v151 light-mode neutral chat accent ===== Dark mode keeps the existing purple/blue accent. Light mode uses a neutral gray accent for the sender bubble and send button. Custom bubblecolor:/textcolor: and rainbow mode keep priority. */ html:not(.for314-bubblecolor-active):not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .message.mine .message-bubble{ background:#e5e7eb!important; background-color:#e5e7eb!important; color:#111827!important; border-color:#d1d5db!important; -webkit-text-fill-color:#111827!important; } html:not(.for314-bubblecolor-active):not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .message.mine .message-bubble *{ color:#111827!important; -webkit-text-fill-color:currentColor!important; } body.local-light main .inputrow #sendBtn{ background:#d1d5db!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border:1px solid #c4c9d0!important; box-shadow:0 5px 16px rgba(55,65,81,.16)!important; } body.local-light main .inputrow #sendBtn::after{ color:#111827!important; -webkit-text-fill-color:#111827!important; } body.local-light main .inputrow #sendBtn:hover{ background:#c6cbd2!important; filter:none!important; } body.local-light main .inputrow #sendBtn:active{ background:#bcc2ca!important; } body.local-light main .message.mine .image-message-bubble{ background:#e5e7eb!important; border-color:#d1d5db!important; } body.local-light main .message.mine .image-info{ color:#4b5563!important; -webkit-text-fill-color:#4b5563!important; } /* v154: 趣味・その他では学年欄を確実に非表示 */ .other-room-field[hidden]{display:none!important} /* ===== v153 /otherroom light-mode button contrast + official-room marker ===== Keep dark mode untouched. iOS Safari gets explicit background/text-fill colors. */ body.local-light .other-room-refresh, html:not(.dark) body:not(.local-dark) .other-room-refresh{ background:#f3f4f6!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border:1px solid #d1d5db!important; opacity:1!important; box-shadow:0 2px 8px rgba(15,23,42,.08)!important; } body.local-light .other-room-move, html:not(.dark) body:not(.local-dark) .other-room-move{ background:#d1d5db!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border:1px solid #c4c9d0!important; opacity:1!important; box-shadow:0 2px 8px rgba(15,23,42,.10)!important; } body.local-light .other-room-move:not(:disabled):active, html:not(.dark) body:not(.local-dark) .other-room-move:not(:disabled):active{ background:#c4c9d0!important; } body.local-light .other-room-move:disabled, html:not(.dark) body:not(.local-dark) .other-room-move:disabled{ background:#e5e7eb!important; color:#6b7280!important; -webkit-text-fill-color:#6b7280!important; border-color:#d1d5db!important; opacity:1!important; box-shadow:none!important; } /* ===== v155 /otherroom: chat-inline local card ===== */ .other-room-inline-card{ box-sizing:border-box; width:min(460px,calc(100% - 12px)); margin:10px auto; padding:14px; border:1px solid rgba(15,23,42,.10); border-radius:20px; background:rgba(248,250,252,.94); box-shadow:0 8px 28px rgba(15,23,42,.10); color:#111827; flex:0 0 auto; } body.local-dark .other-room-inline-card, html.dark .other-room-inline-card{ background:rgba(15,23,42,.94); border-color:rgba(255,255,255,.13); color:#f8fafc; box-shadow:0 9px 30px rgba(0,0,0,.24); } .other-room-inline-card .other-room-header{margin-bottom:2px} .other-room-inline-card .other-room-close{flex:0 0 auto} @media(max-width:360px){ .other-room-inline-card{width:calc(100% - 8px);margin:6px auto;padding:11px;border-radius:16px} .other-room-inline-card .other-room-actions{grid-template-columns:1fr} } /* ===== v156 /otherroom: official-room lobby list ===== */ .other-room-list-card{width:min(460px,calc(100% - 12px));padding:14px 12px 12px} .other-room-list-card .other-room-header{padding:0 2px} .other-room-list-desc{margin:3px 2px 11px!important;font-size:12px!important;font-weight:700;color:#64748b!important} .other-room-list-section{margin-top:11px} .other-room-list-section-title{margin:0 3px 5px;font-size:12px;font-weight:900;letter-spacing:.02em;color:#475569} .other-room-list{overflow:hidden;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:rgba(255,255,255,.58)} .other-room-list-row{ -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box;width:100%;min-height:42px;margin:0!important;padding:7px 8px!important; display:grid!important;grid-template-columns:28px minmax(0,1fr) auto 22px;align-items:center;gap:5px; border:0!important;border-bottom:1px solid rgba(15,23,42,.07)!important;border-radius:0!important;background:transparent!important; color:#111827!important;-webkit-text-fill-color:#111827!important;font:inherit!important;text-align:left!important;box-shadow:none!important;cursor:pointer } .other-room-list-row:last-child{border-bottom:0!important} .other-room-list-row:active{background:rgba(15,23,42,.07)!important} .other-room-list-row.is-current{background:rgba(15,23,42,.045)!important} .other-room-list-icon{font-size:17px;line-height:1;text-align:center;-webkit-text-fill-color:initial} .other-room-list-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800} .other-room-list-count{min-width:36px;text-align:right;white-space:nowrap;font-size:12px;font-weight:800;color:#64748b!important;-webkit-text-fill-color:#64748b!important} .other-room-list-chevron{font-size:18px;font-weight:700;color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important;text-align:right} .other-room-study-section{margin-top:15px} .other-room-stage-block{margin-top:4px} .other-room-stage-toggle{ -webkit-appearance:none!important;appearance:none!important;width:100%;min-height:35px;margin:0!important;padding:5px 5px!important; display:flex!important;align-items:center;gap:7px;border:0!important;border-radius:10px!important;background:transparent!important; color:#1f2937!important;-webkit-text-fill-color:#1f2937!important;font:inherit!important;font-size:13px!important;font-weight:900!important;text-align:left!important;box-shadow:none!important;cursor:pointer } .other-room-stage-toggle:active{background:rgba(15,23,42,.06)!important} .other-room-stage-marker{width:15px;text-align:center;font-size:10px;color:#64748b!important;-webkit-text-fill-color:#64748b!important} .other-room-stage-panel{margin:0 0 4px 0} body.local-dark .other-room-list-desc,html.dark .other-room-list-desc{color:#aeb9c8!important} body.local-dark .other-room-list-section-title,html.dark .other-room-list-section-title{color:#cbd5e1} body.local-dark .other-room-list,html.dark .other-room-list{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)} body.local-dark .other-room-list-row,html.dark .other-room-list-row{color:#f8fafc!important;-webkit-text-fill-color:#f8fafc!important;border-bottom-color:rgba(255,255,255,.075)!important} body.local-dark .other-room-list-row:active,html.dark .other-room-list-row:active{background:rgba(255,255,255,.08)!important} body.local-dark .other-room-list-row.is-current,html.dark .other-room-list-row.is-current{background:rgba(255,255,255,.055)!important} body.local-dark .other-room-list-count,html.dark .other-room-list-count{color:#b8c4d4!important;-webkit-text-fill-color:#b8c4d4!important} body.local-dark .other-room-list-chevron,html.dark .other-room-list-chevron{color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important} body.local-dark .other-room-stage-toggle,html.dark .other-room-stage-toggle{color:#eef2f7!important;-webkit-text-fill-color:#eef2f7!important} body.local-dark .other-room-stage-toggle:active,html.dark .other-room-stage-toggle:active{background:rgba(255,255,255,.07)!important} body.local-dark .other-room-stage-marker,html.dark .other-room-stage-marker{color:#aeb9c8!important;-webkit-text-fill-color:#aeb9c8!important} @media(max-width:360px){ .other-room-list-card{padding:10px 8px}.other-room-list-row{min-height:39px;grid-template-columns:25px minmax(0,1fr) auto 18px;padding:6px 6px!important} .other-room-list-name{font-size:13px}.other-room-list-count{font-size:11px}.other-room-list-icon{font-size:16px} } /* ---------- /toy : shared wheel sound toy ---------- */ .toy-card{width:min(460px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(120,132,155,.22);border-radius:18px;background:color-mix(in srgb,var(--panel,#fff) 91%,transparent);box-shadow:0 9px 28px rgba(0,0,0,.10);color:var(--text,#151821)} .toy-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.toy-card-head strong{font-size:13px}.toy-card-badge{padding:3px 8px;border-radius:999px;background:rgba(127,136,158,.10);font-size:10px;font-weight:900}.toy-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:700;color:var(--muted,var(--sub,#6b7280))}.toy-card-action{width:100%;min-height:38px;margin-top:9px;border:0;border-radius:12px;background:#111827;color:#fff;-webkit-text-fill-color:#fff;-webkit-appearance:none;appearance:none;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.toy-card-action:disabled{opacity:.48;cursor:default} .toy-backdrop{position:fixed;inset:0;z-index:2147482750;display:flex;align-items:center;justify-content:center;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(12,16,24,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .15s ease}.toy-backdrop.open{opacity:1;pointer-events:auto}.toy-modal{width:min(520px,100%);max-height:calc(100dvh - 16px);overflow:auto;padding:12px;border:1px solid rgba(127,136,158,.24);border-radius:22px;background:color-mix(in srgb,var(--panel,#fff) 95%,transparent);box-shadow:0 24px 80px rgba(0,0,0,.25);color:var(--text,#151821)} .toy-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.toy-top strong{font-size:14px}.toy-top button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(127,136,158,.12);color:var(--text,#151821);-webkit-text-fill-color:var(--text,#151821);font-size:20px;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none}.toy-note{margin:8px 1px 10px;font-size:10px;line-height:1.55;color:var(--muted,var(--sub,#6b7280));font-weight:700}.toy-stage{padding:14px 10px;border-radius:18px;background:#222;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.toy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 10px;place-items:center}.toy-wheel{--rot:0deg;width:clamp(48px,13vw,72px);height:clamp(48px,13vw,72px);border-radius:50%;position:relative;user-select:none;touch-action:none;transform:rotate(var(--rot));box-shadow:inset 0 6px 12px rgba(0,0,0,.4),0 6px 10px rgba(0,0,0,.3);cursor:grab;-webkit-tap-highlight-color:transparent}.toy-wheel:active{cursor:grabbing}.toy-grip{position:absolute;top:12%;left:50%;width:14%;height:28%;border-radius:6px;background:rgba(255,255,255,.72);transform:translateX(-50%)}.toy-footer{margin-top:8px;text-align:center;font-size:9px;line-height:1.4;color:var(--muted,var(--sub,#6b7280));font-weight:700} body.local-light .toy-card-action{background:#d1d5db;color:#111827;-webkit-text-fill-color:#111827}body.local-dark .toy-card-action{background:#8b5cf6;color:#fff;-webkit-text-fill-color:#fff} @media(prefers-color-scheme:dark){body:not(.local-light) .toy-card-action{background:#8b5cf6;color:#fff;-webkit-text-fill-color:#fff}} @media(max-width:390px){.toy-modal{padding:9px;border-radius:18px}.toy-stage{padding:12px 7px}.toy-grid{gap:10px 6px}.toy-wheel{width:min(14vw,58px);height:min(14vw,58px)}} @media(max-width:260px),(max-height:360px){.toy-modal{padding:6px;border-radius:12px}.toy-note,.toy-footer{display:none}.toy-stage{padding:6px}.toy-grid{gap:5px}.toy-wheel{width:34px;height:34px}.toy-card{padding:7px;border-radius:12px}.toy-card-desc{font-size:8px}.toy-card-action{min-height:29px;font-size:9px}} /* v160 shared fortune events: /omikuji + /koiura */ .fortune-card{width:min(460px,calc(100% - 12px));margin:8px auto;padding:12px;border-radius:18px;border:1px solid rgba(130,138,160,.20);box-shadow:0 9px 28px rgba(0,0,0,.10);color:var(--text,#151821);overflow:hidden} .fortune-card.omikuji{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,247,238,.94));border-color:rgba(191,65,55,.20)} .fortune-card.koiura{background:linear-gradient(145deg,rgba(255,247,252,.97),rgba(255,226,241,.94));border-color:rgba(236,72,153,.22)} .fortune-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.fortune-card-head strong{font-size:13px;font-weight:950}.fortune-card-clock{flex:none;padding:3px 8px;border-radius:999px;background:rgba(127,136,158,.10);font-size:10px;font-weight:900}.fortune-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750}.fortune-card-people{margin-top:6px;color:var(--muted,var(--sub,#6b7280));font-size:10px;line-height:1.45;max-height:46px;overflow:auto}.fortune-card-action{width:100%;min-height:39px;margin-top:9px;border:0;border-radius:12px;-webkit-appearance:none;appearance:none;font:inherit;font-size:11px;font-weight:950;cursor:pointer}.fortune-card.omikuji .fortune-card-action{background:#b5372f;color:#fff;-webkit-text-fill-color:#fff}.fortune-card.koiura .fortune-card-action{background:#ec4899;color:#fff;-webkit-text-fill-color:#fff}.fortune-card-action:disabled{opacity:.54;cursor:default} body.local-dark .fortune-card{color:#f8fafc}.local-dark .fortune-card.omikuji{background:linear-gradient(145deg,rgba(60,26,30,.92),rgba(43,28,34,.94));border-color:rgba(251,191,36,.24)}.local-dark .fortune-card.koiura{background:linear-gradient(145deg,rgba(74,25,56,.93),rgba(46,27,48,.95));border-color:rgba(244,114,182,.30)} body.local-light .fortune-card-action{-webkit-text-fill-color:#fff} .fortune-backdrop{position:fixed;inset:0;z-index:2147483250;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(8,12,22,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .15s ease}.fortune-backdrop.open{opacity:1;pointer-events:auto}.fortune-modal{width:min(520px,calc(100vw - 22px));max-height:min(720px,calc(100dvh - 28px));overflow:auto;border-radius:24px;padding:16px;box-shadow:0 24px 80px rgba(0,0,0,.32);-webkit-overflow-scrolling:touch}.fortune-backdrop.omikuji .fortune-modal{background:linear-gradient(160deg,#fffdf8,#fff3e5);color:#311d1b;border:1px solid rgba(180,62,50,.18)}.fortune-backdrop.koiura .fortune-modal{background:linear-gradient(160deg,#fff9fc,#ffe4f1);color:#4b1835;border:1px solid rgba(236,72,153,.20)} .fortune-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.fortune-top>strong{font-size:17px;font-weight:950}.fortune-top-tools{display:flex;gap:7px}.fortune-top-tools button{width:36px;height:36px;border:0;border-radius:50%;-webkit-appearance:none;appearance:none;font:inherit;font-size:18px;font-weight:900;cursor:pointer}.fortune-backdrop.omikuji .fortune-top-tools button{background:#fff;color:#7f1d1d;-webkit-text-fill-color:#7f1d1d}.fortune-backdrop.koiura .fortune-top-tools button{background:#fff;color:#be185d;-webkit-text-fill-color:#be185d}.fortune-info-btn.active{box-shadow:0 0 0 3px rgba(236,72,153,.18)} .fortune-hero{text-align:center;margin:16px 0 12px;padding:18px 12px;border-radius:20px;background:rgba(255,255,255,.68)}.fortune-you{font-size:12px;font-weight:850;opacity:.8}.fortune-value{margin:6px 0;font-size:38px;line-height:1.2;font-weight:1000;letter-spacing:.06em}.fortune-backdrop.koiura .fortune-value{font-size:28px;letter-spacing:0}.fortune-copy{margin:10px auto 0;max-width:420px;font-size:13px;line-height:1.75;font-weight:750}.fortune-list-title{margin:12px 2px 7px;font-size:12px;font-weight:950}.fortune-result-list{display:grid;gap:6px}.fortune-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.66);font-size:12px}.fortune-result-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fortune-result-row strong{flex:none;font-weight:950}.fortune-backdrop.koiura .fortune-result-row strong{font-size:11px}.fortune-all-copy{margin-top:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.70)}.fortune-all-copy>strong{display:block;margin-bottom:8px;font-size:12px}.fortune-copy-row{display:grid;grid-template-columns:minmax(54px,auto) 1fr;gap:9px;padding:8px 0;border-top:1px solid rgba(120,90,100,.11);font-size:11px;line-height:1.55}.fortune-copy-row:first-of-type{border-top:0}.fortune-copy-row b{white-space:nowrap}.fortune-copy-row span{font-weight:650} @media(prefers-color-scheme:dark){body:not(.local-light) .fortune-card{color:#f8fafc}body:not(.local-light) .fortune-card.omikuji{background:linear-gradient(145deg,rgba(60,26,30,.92),rgba(43,28,34,.94));border-color:rgba(251,191,36,.24)}body:not(.local-light) .fortune-card.koiura{background:linear-gradient(145deg,rgba(74,25,56,.93),rgba(46,27,48,.95));border-color:rgba(244,114,182,.30)}} @media(max-width:340px){.fortune-modal{padding:11px;border-radius:18px}.fortune-value{font-size:31px}.fortune-card{padding:9px}.fortune-copy{font-size:11px}.fortune-result-row{padding:7px 9px}.fortune-top>strong{font-size:14px}} /* v161 fortune readability + heart love-fortune override iOS Safari / local theme high-contrast fix. */ .fortune-card, .fortune-card *{text-shadow:none!important} .fortune-card.omikuji{color:#311d1b!important;-webkit-text-fill-color:#311d1b!important} .fortune-card.koiura{color:#4b1835!important;-webkit-text-fill-color:#4b1835!important} .fortune-card-head strong,.fortune-card-desc{ color:inherit!important;-webkit-text-fill-color:currentColor!important;opacity:1!important } .fortune-card-people{color:#667085!important;-webkit-text-fill-color:#667085!important;opacity:1!important} .fortune-card-clock{ color:#344054!important;-webkit-text-fill-color:#344054!important; background:rgba(15,23,42,.07)!important } body.local-light .fortune-card.omikuji .fortune-card-action{ background:#b5372f!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important } body.local-light .fortune-card.koiura .fortune-card-action{ background:#ec4899!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important } .fortune-card.omikuji .fortune-card-action,.fortune-card.koiura .fortune-card-action{opacity:1!important} .fortune-card.omikuji .fortune-card-action:disabled,.fortune-card.koiura .fortune-card-action:disabled{opacity:.72!important} /* Result modal: light theme */ body.local-light .fortune-backdrop.omikuji .fortune-modal, body.local-light .fortune-backdrop.koiura .fortune-modal{ color:#172033!important;-webkit-text-fill-color:#172033!important } body.local-light .fortune-backdrop.omikuji .fortune-modal{background:linear-gradient(160deg,#fffdf8,#f3eee8)!important} body.local-light .fortune-backdrop.koiura .fortune-modal{background:linear-gradient(160deg,#fff9fc,#f7e8f0)!important} body.local-light .fortune-backdrop .fortune-top>strong, body.local-light .fortune-backdrop .fortune-you, body.local-light .fortune-backdrop .fortune-value, body.local-light .fortune-backdrop .fortune-copy, body.local-light .fortune-backdrop .fortune-list-title, body.local-light .fortune-backdrop .fortune-result-row, body.local-light .fortune-backdrop .fortune-all-copy, body.local-light .fortune-backdrop .fortune-copy-row{ color:#172033!important;-webkit-text-fill-color:#172033!important;opacity:1!important } body.local-light .fortune-backdrop .fortune-you{color:#475467!important;-webkit-text-fill-color:#475467!important} body.local-light .fortune-backdrop .fortune-hero, body.local-light .fortune-backdrop .fortune-result-row, body.local-light .fortune-backdrop .fortune-all-copy{background:rgba(255,255,255,.84)!important} body.local-light .fortune-backdrop .fortune-copy-row{border-top-color:rgba(23,32,51,.12)!important} body.local-light .fortune-backdrop.omikuji .fortune-top-tools button{ background:#fff!important;color:#7f1d1d!important;-webkit-text-fill-color:#7f1d1d!important;border-color:rgba(127,29,29,.18)!important } body.local-light .fortune-backdrop.koiura .fortune-top-tools button{ background:#fff!important;color:#be185d!important;-webkit-text-fill-color:#be185d!important;border-color:rgba(190,24,93,.18)!important } /* Result/card: dark theme */ body.local-dark .fortune-card.omikuji, html.dark body:not(.local-light) .fortune-card.omikuji{ background:linear-gradient(145deg,#352429,#251f24)!important;border-color:rgba(251,191,36,.22)!important; color:#fff8f3!important;-webkit-text-fill-color:#fff8f3!important } body.local-dark .fortune-card.koiura, html.dark body:not(.local-light) .fortune-card.koiura{ background:linear-gradient(145deg,#40263a,#281f2b)!important;border-color:rgba(244,114,182,.28)!important; color:#fff7fb!important;-webkit-text-fill-color:#fff7fb!important } body.local-dark .fortune-card-people, html.dark body:not(.local-light) .fortune-card-people{color:#d0d5dd!important;-webkit-text-fill-color:#d0d5dd!important} body.local-dark .fortune-card-clock, html.dark body:not(.local-light) .fortune-card-clock{ color:#f2f4f7!important;-webkit-text-fill-color:#f2f4f7!important;background:rgba(255,255,255,.10)!important } body.local-dark .fortune-card.omikuji .fortune-card-action, html.dark body:not(.local-light) .fortune-card.omikuji .fortune-card-action{ background:#c54a41!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important } body.local-dark .fortune-card.koiura .fortune-card-action, html.dark body:not(.local-light) .fortune-card.koiura .fortune-card-action{ background:#e84d9b!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important } body.local-dark .fortune-backdrop.omikuji .fortune-modal, html.dark body:not(.local-light) .fortune-backdrop.omikuji .fortune-modal{ background:linear-gradient(160deg,#202633,#151a23)!important;color:#fff8f3!important; -webkit-text-fill-color:#fff8f3!important;border-color:rgba(251,191,36,.18)!important } body.local-dark .fortune-backdrop.koiura .fortune-modal, html.dark body:not(.local-light) .fortune-backdrop.koiura .fortune-modal{ background:linear-gradient(160deg,#242633,#171922)!important;color:#fff7fb!important; -webkit-text-fill-color:#fff7fb!important;border-color:rgba(244,114,182,.24)!important } body.local-dark .fortune-backdrop .fortune-top>strong, body.local-dark .fortune-backdrop .fortune-value, body.local-dark .fortune-backdrop .fortune-copy, body.local-dark .fortune-backdrop .fortune-list-title, body.local-dark .fortune-backdrop .fortune-result-row, body.local-dark .fortune-backdrop .fortune-all-copy, body.local-dark .fortune-backdrop .fortune-copy-row, html.dark body:not(.local-light) .fortune-backdrop .fortune-top>strong, html.dark body:not(.local-light) .fortune-backdrop .fortune-value, html.dark body:not(.local-light) .fortune-backdrop .fortune-copy, html.dark body:not(.local-light) .fortune-backdrop .fortune-list-title, html.dark body:not(.local-light) .fortune-backdrop .fortune-result-row, html.dark body:not(.local-light) .fortune-backdrop .fortune-all-copy, html.dark body:not(.local-light) .fortune-backdrop .fortune-copy-row{ color:#f8fafc!important;-webkit-text-fill-color:#f8fafc!important;opacity:1!important } body.local-dark .fortune-backdrop .fortune-you, html.dark body:not(.local-light) .fortune-backdrop .fortune-you{ color:#d0d5dd!important;-webkit-text-fill-color:#d0d5dd!important;opacity:1!important } body.local-dark .fortune-backdrop .fortune-hero, html.dark body:not(.local-light) .fortune-backdrop .fortune-hero{background:#2a303c!important} body.local-dark .fortune-backdrop .fortune-result-row, html.dark body:not(.local-light) .fortune-backdrop .fortune-result-row{background:#2b323e!important} body.local-dark .fortune-backdrop .fortune-all-copy, html.dark body:not(.local-light) .fortune-backdrop .fortune-all-copy{background:#252c37!important} body.local-dark .fortune-backdrop .fortune-copy-row, html.dark body:not(.local-light) .fortune-backdrop .fortune-copy-row{border-top-color:rgba(255,255,255,.10)!important} body.local-dark .fortune-backdrop.omikuji .fortune-top-tools button, html.dark body:not(.local-light) .fortune-backdrop.omikuji .fortune-top-tools button{ background:#f8fafc!important;color:#7f1d1d!important;-webkit-text-fill-color:#7f1d1d!important;border-color:transparent!important } body.local-dark .fortune-backdrop.koiura .fortune-top-tools button, html.dark body:not(.local-light) .fortune-backdrop.koiura .fortune-top-tools button{ background:#f8fafc!important;color:#be185d!important;-webkit-text-fill-color:#be185d!important;border-color:transparent!important } /* Auto dark when /autotheme follows the OS. */ @media (prefers-color-scheme:dark){ body:not(.local-light) .fortune-card.omikuji{ background:linear-gradient(145deg,#352429,#251f24)!important;color:#fff8f3!important;-webkit-text-fill-color:#fff8f3!important } body:not(.local-light) .fortune-card.koiura{ background:linear-gradient(145deg,#40263a,#281f2b)!important;color:#fff7fb!important;-webkit-text-fill-color:#fff7fb!important } body:not(.local-light) .fortune-card-people{color:#d0d5dd!important;-webkit-text-fill-color:#d0d5dd!important} body:not(.local-light) .fortune-card-clock{ color:#f2f4f7!important;-webkit-text-fill-color:#f2f4f7!important;background:rgba(255,255,255,.10)!important } body:not(.local-light) .fortune-card.omikuji .fortune-card-action{ background:#c54a41!important;color:#fff!important;-webkit-text-fill-color:#fff!important } body:not(.local-light) .fortune-card.koiura .fortune-card-action{ background:#e84d9b!important;color:#fff!important;-webkit-text-fill-color:#fff!important } body:not(.local-light) .fortune-backdrop.omikuji .fortune-modal{ background:linear-gradient(160deg,#202633,#151a23)!important;color:#fff8f3!important;-webkit-text-fill-color:#fff8f3!important } body:not(.local-light) .fortune-backdrop.koiura .fortune-modal{ background:linear-gradient(160deg,#242633,#171922)!important;color:#fff7fb!important;-webkit-text-fill-color:#fff7fb!important } body:not(.local-light) .fortune-backdrop .fortune-top>strong, body:not(.local-light) .fortune-backdrop .fortune-value, body:not(.local-light) .fortune-backdrop .fortune-copy, body:not(.local-light) .fortune-backdrop .fortune-list-title, body:not(.local-light) .fortune-backdrop .fortune-result-row, body:not(.local-light) .fortune-backdrop .fortune-all-copy, body:not(.local-light) .fortune-backdrop .fortune-copy-row{ color:#f8fafc!important;-webkit-text-fill-color:#f8fafc!important;opacity:1!important } body:not(.local-light) .fortune-backdrop .fortune-you{ color:#d0d5dd!important;-webkit-text-fill-color:#d0d5dd!important;opacity:1!important } body:not(.local-light) .fortune-backdrop .fortune-hero{background:#2a303c!important} body:not(.local-light) .fortune-backdrop .fortune-result-row{background:#2b323e!important} body:not(.local-light) .fortune-backdrop .fortune-all-copy{background:#252c37!important} body:not(.local-light) .fortune-backdrop .fortune-copy-row{border-top-color:rgba(255,255,255,.10)!important} } /* v162 fortune card collapse fix */ .fortune-card{ display:block!important; position:relative!important; box-sizing:border-box!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; contain:none!important; } .fortune-card>.fortune-card-head, .fortune-card>.fortune-card-desc, .fortune-card>.fortune-card-people, .fortune-card>.fortune-card-action{ position:static!important; float:none!important; transform:none!important; max-height:none!important; } .fortune-card>.fortune-card-head{display:flex!important;width:100%!important;min-height:24px!important} .fortune-card>.fortune-card-desc{display:block!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important} .fortune-card>.fortune-card-people{display:block!important;width:100%!important;height:auto!important;max-height:46px!important} .fortune-card>.fortune-card-action{display:block!important;width:100%!important;height:auto!important;min-height:39px!important} /* v163 fortune timeline flex-shrink fix: keep cards full-height beside large shared objects */ main .chatlog > .fortune-card, .chatlog > .fortune-card, #log > .fortune-card, .fortune-card{ flex:0 0 auto!important; flex-shrink:0!important; align-self:center!important; height:auto!important; min-height:max-content!important; max-height:none!important; overflow:visible!important; } .fortune-card>.fortune-card-head, .fortune-card>.fortune-card-desc, .fortune-card>.fortune-card-people, .fortune-card>.fortune-card-action{ flex:0 0 auto!important; } /* ===== v164 /northkoreatv: compact live player while chatting ===== */ .northkorea-tv-card{ flex:0 0 auto!important;flex-shrink:0!important;width:min(94%,620px);height:auto!important;min-height:0!important;max-height:none!important; margin:10px auto;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(10,16,26,.66); color:#f4f8ff;box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); overflow:visible!important; } .northkorea-tv-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .northkorea-tv-card-head strong{font-size:14px;font-weight:950} .northkorea-tv-live{flex:0 0 auto;color:#ff6575;font-size:10px;font-weight:950;letter-spacing:.08em} .northkorea-tv-card-meta{margin-top:7px;color:#c1ccda;font-size:10px;font-weight:800} .northkorea-tv-card-desc{margin-top:7px;color:#aebbd0;font-size:10px;line-height:1.55} .northkorea-tv-card-action{width:100%;min-height:42px;margin-top:11px;border:1px solid rgba(107,153,232,.56);border-radius:13px;background:linear-gradient(180deg,#4779c6,#315fa8);color:#fff!important;-webkit-text-fill-color:#fff!important;font:inherit;font-size:12px;font-weight:950;cursor:pointer;appearance:none;-webkit-appearance:none} .northkorea-tv-card-action:disabled{opacity:.62;cursor:default} body.local-light .northkorea-tv-card{border-color:rgba(88,107,132,.14);background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,248,252,.72));color:#172434;box-shadow:0 16px 34px rgba(43,61,80,.12),inset 0 1px 0 rgba(255,255,255,.96)} body.local-light .northkorea-tv-card-meta{color:#51647b}body.local-light .northkorea-tv-card-desc{color:#65758a} .northkorea-tv-panel{ position:fixed;z-index:15440;right:14px;top:86px;width:min(520px,46vw);max-width:calc(100vw - 28px); border:1px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025)),rgba(9,15,26,.78);color:#f4f8ff; box-shadow:0 26px 76px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.13);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%); } .northkorea-tv-panel-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.08)} .northkorea-tv-panel-title{display:flex;flex-direction:column;min-width:0}.northkorea-tv-panel-title strong{font-size:12px;font-weight:950}.northkorea-tv-panel-title span{margin-top:1px;color:#acbbce;font-size:9px;font-weight:750} .northkorea-tv-panel-actions{display:flex;gap:5px;flex:0 0 auto}.northkorea-tv-panel-actions button{width:32px;height:32px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.07);color:#fff!important;-webkit-text-fill-color:#fff!important;font:inherit;font-weight:950;cursor:pointer;appearance:none;-webkit-appearance:none} .northkorea-tv-panel-body{display:block}.northkorea-tv-video{display:block;width:100%;aspect-ratio:16/9;background:#000}.northkorea-tv-status{padding:7px 9px 2px;color:#d5dfec;font-size:9px;font-weight:750;line-height:1.45}.northkorea-tv-note{padding:2px 9px 8px;color:#9faec2;font-size:8px;line-height:1.45} .northkorea-tv-panel.is-collapsed .northkorea-tv-panel-body{display:none} body.local-light .northkorea-tv-panel{border-color:rgba(88,107,132,.14);background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(239,245,250,.82));color:#172434;box-shadow:0 24px 64px rgba(43,61,80,.20),inset 0 1px 0 rgba(255,255,255,.98)} body.local-light .northkorea-tv-panel-top{border-bottom-color:rgba(88,107,132,.10)}body.local-light .northkorea-tv-panel-title span{color:#66768a}body.local-light .northkorea-tv-panel-actions button{background:rgba(255,255,255,.72);border-color:rgba(88,107,132,.14);color:#172434!important;-webkit-text-fill-color:#172434!important}body.local-light .northkorea-tv-status{color:#42566f}body.local-light .northkorea-tv-note{color:#6b7c90} @media(max-width:680px){ .northkorea-tv-card{width:calc(100% - 8px);margin:8px 4px;padding:11px;border-radius:16px} .northkorea-tv-panel{left:6px;right:6px;top:calc(env(safe-area-inset-top,0px) + 64px);width:auto;max-width:none;border-radius:16px} .northkorea-tv-panel-top{padding:6px 7px}.northkorea-tv-panel-title strong{font-size:10px}.northkorea-tv-panel-title span{font-size:8px}.northkorea-tv-panel-actions button{width:29px;height:29px;border-radius:9px} .northkorea-tv-status{padding:5px 7px 1px;font-size:8px}.northkorea-tv-note{padding:1px 7px 6px;font-size:7px} } @media(max-width:260px){.northkorea-tv-panel-title span,.northkorea-tv-note{display:none}.northkorea-tv-panel{top:4px;left:4px;right:4px}.northkorea-tv-panel-actions button{width:25px;height:25px}} /* ===== v165 /northkoreatv draggable + resizable on PC/mobile ===== */ .northkorea-tv-panel{ min-width:min(300px,calc(100vw - 12px)); max-width:calc(100vw - 12px)!important; right:auto!important; resize:none!important; user-select:none; -webkit-user-select:none; } .northkorea-tv-panel-top{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .northkorea-tv-panel.is-dragging .northkorea-tv-panel-top{cursor:grabbing} .northkorea-tv-panel.is-resizing{transition:none!important} .northkorea-tv-video{user-select:none;-webkit-user-select:none} .northkorea-tv-resize-handle{ position:absolute; right:0; bottom:0; width:34px; height:34px; z-index:4; cursor:nwse-resize; touch-action:none; user-select:none; -webkit-user-select:none; } .northkorea-tv-resize-handle::before, .northkorea-tv-resize-handle::after{ content:''; position:absolute; right:7px; bottom:7px; border-right:2px solid rgba(255,255,255,.72); border-bottom:2px solid rgba(255,255,255,.72); border-radius:0 0 2px 0; pointer-events:none; } .northkorea-tv-resize-handle::before{width:14px;height:14px} .northkorea-tv-resize-handle::after{right:11px;bottom:11px;width:7px;height:7px;opacity:.62} body.local-light .northkorea-tv-resize-handle::before, body.local-light .northkorea-tv-resize-handle::after{border-color:rgba(40,58,82,.60)} @media(max-width:680px){ .northkorea-tv-panel{ left:6px; right:auto!important; width:calc(100vw - 12px); max-width:calc(100vw - 12px)!important; min-width:min(220px,calc(100vw - 12px)); } .northkorea-tv-panel-top{cursor:grab;touch-action:none} .northkorea-tv-resize-handle{display:block;width:40px;height:40px} } @media(max-width:260px){ .northkorea-tv-panel{left:4px;width:calc(100vw - 8px);max-width:calc(100vw - 8px)!important;min-width:160px} } /* ===== v166 /northkoreatv light-mode card button contrast fix ===== */ body.local-light .northkorea-tv-card .northkorea-tv-card-action{ background:#d1d5db!important; border-color:#b8c0ca!important; color:#111827!important; -webkit-text-fill-color:#111827!important; opacity:1!important; } body.local-light .northkorea-tv-card .northkorea-tv-card-action:hover{ background:#c7cdd5!important; } body.local-light .northkorea-tv-card .northkorea-tv-card-action:active{ background:#bcc3cc!important; } body.local-light .northkorea-tv-card .northkorea-tv-card-action:disabled{ background:#e5e7eb!important; border-color:#cfd4dc!important; color:#6b7280!important; -webkit-text-fill-color:#6b7280!important; opacity:1!important; } body.local-dark .northkorea-tv-card .northkorea-tv-card-action, html.dark body:not(.local-light) .northkorea-tv-card .northkorea-tv-card-action{ background:linear-gradient(180deg,#4779c6,#315fa8)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } /* ---------- /flowergame : shared sunflower speed race ---------- */ .flowergame-card{flex:0 0 auto;width:min(500px,calc(100% - 12px));margin:8px auto;padding:13px;border:1px solid rgba(244,177,0,.32);border-radius:19px;background:rgba(255,250,225,.94);box-shadow:0 10px 30px rgba(80,60,0,.10);color:#33280f;-webkit-text-fill-color:#33280f} .flowergame-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.flowergame-card-head strong{font-size:13px;font-weight:900}.flowergame-card-clock{padding:3px 9px;border-radius:999px;background:#fff3b6;color:#5b4300;-webkit-text-fill-color:#5b4300;font-size:10px;font-weight:900}.flowergame-card-desc{margin-top:7px;font-size:11px;line-height:1.5;font-weight:800;color:#4a3810;-webkit-text-fill-color:#4a3810}.flowergame-card-people{margin-top:6px;max-height:48px;overflow:auto;font-size:10px;line-height:1.45;color:#756129;-webkit-text-fill-color:#756129}.flowergame-card-rank{display:grid;gap:4px;margin-top:7px;font-size:10px;font-weight:800;color:#3d3214;-webkit-text-fill-color:#3d3214}.flowergame-card-action{width:100%;min-height:40px;margin-top:9px;border:0;border-radius:13px;background:#e0b51f;color:#211900;-webkit-text-fill-color:#211900;-webkit-appearance:none;appearance:none;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.flowergame-card-action:disabled{opacity:.55;cursor:default} .flowergame-backdrop{position:fixed;inset:0;z-index:2147482001;display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));background:rgba(18,24,28,.48);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.flowergame-backdrop.open{display:flex}.flowergame-modal{width:min(720px,96vw);max-height:94vh;overflow:auto;border:1px solid rgba(255,255,255,.75);border-radius:26px;background:#f4f7fa;color:#17202a;-webkit-text-fill-color:#17202a;box-shadow:0 25px 75px rgba(0,0,0,.25);padding:16px}.flowergame-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:11px;border-bottom:1px solid rgba(100,110,120,.16)}.flowergame-top strong{font-size:17px;font-weight:950}.flowergame-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(60,70,80,.18);background:#fff;color:#17202a;-webkit-text-fill-color:#17202a;-webkit-appearance:none;appearance:none;font-size:25px;font-weight:800}.flowergame-status{padding:10px 4px 8px;text-align:center;font-size:12px;font-weight:850;color:#46505d;-webkit-text-fill-color:#46505d}.flowergame-stage{position:relative;min-height:min(68vh,620px);overflow:hidden;border-radius:22px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),transparent 25%),linear-gradient(180deg,#dff5ff 0%,#fff9df 100%);border:1px solid rgba(103,140,165,.16)}.flowergame-counter{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:30;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.88);color:#5f4b1d;-webkit-text-fill-color:#5f4b1d;font-size:13px;font-weight:950;box-shadow:0 5px 15px rgba(0,0,0,.08);white-space:nowrap}.flowergame-flower{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:min(80vmin,520px,88%);aspect-ratio:1}.flowergame-petals{position:absolute;inset:0;z-index:5}.flowergame-petal{position:absolute;left:50%;top:50%;width:23%;height:54%;transform-origin:50% 100%;cursor:pointer;filter:drop-shadow(0 3px 2px rgba(135,94,0,.16));transition:filter .15s,opacity .15s;will-change:transform,opacity;border:0;background:transparent;padding:0;touch-action:manipulation;-webkit-appearance:none;appearance:none}.flowergame-petal::before{content:"";position:absolute;inset:0;border-radius:58% 58% 46% 46%/72% 72% 35% 35%;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 35% 65%,rgba(190,115,0,.08)),linear-gradient(#ffd93b,#f6a900);border:1px solid rgba(177,105,0,.16)}.flowergame-petal.plucked{pointer-events:none;animation:flowergame-fall var(--fall,1.2s) cubic-bezier(.25,.7,.35,1) forwards}@keyframes flowergame-fall{0%{opacity:1;transform:translate(-50%,-100%) rotate(var(--rot)) translateY(var(--rad)) scale(var(--scale))}100%{opacity:.05;transform:translate(calc(-50% + var(--drift)),-100%) rotate(var(--rot)) translateY(calc(var(--rad) + 78vh)) rotate(var(--spin)) scale(calc(var(--scale)*.95))}}.flowergame-center{position:absolute;left:50%;top:50%;width:37%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:10;background:radial-gradient(circle at 45% 45%,#6c421f 0 2px,transparent 2.3px) 0 0/12px 12px,radial-gradient(circle at 50% 50%,#7a4d28,#553017 72%,#3e240f 100%);box-shadow:0 8px 18px rgba(69,43,11,.28),inset 0 0 0 8px rgba(255,180,0,.12),inset 0 -12px 20px rgba(0,0,0,.16)}.flowergame-center::after{content:"";position:absolute;inset:13%;border-radius:50%;border:2px dashed rgba(246,190,48,.18)}.flowergame-message{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;padding:9px 14px;border-radius:15px;background:rgba(255,255,255,.9);color:#3f3010;-webkit-text-fill-color:#3f3010;font-size:13px;font-weight:950;box-shadow:0 6px 18px rgba(0,0,0,.08);opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}.flowergame-message.show{opacity:1}.flowergame-results{display:grid;gap:8px;margin-top:10px}.flowergame-result-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#fff;color:#18202a;-webkit-text-fill-color:#18202a;border:1px solid rgba(80,90,105,.12);font-size:12px}.flowergame-result-row.mine{outline:2px solid #efbd1f;background:#fff9dc}.flowergame-result-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flowergame-result-row strong{font-variant-numeric:tabular-nums} body.local-dark .flowergame-card{background:#202733;border-color:rgba(255,210,68,.28);color:#fff5cf;-webkit-text-fill-color:#fff5cf}body.local-dark .flowergame-card-clock{background:#4a3c12;color:#ffe79a;-webkit-text-fill-color:#ffe79a}body.local-dark .flowergame-card-desc,body.local-dark .flowergame-card-rank{color:#fff1b8;-webkit-text-fill-color:#fff1b8}body.local-dark .flowergame-card-people{color:#d8c990;-webkit-text-fill-color:#d8c990}body.local-dark .flowergame-card-action{background:#8b5cf6;color:#fff;-webkit-text-fill-color:#fff}body.local-dark .flowergame-modal{background:#111925;color:#f8fafc;-webkit-text-fill-color:#f8fafc;border-color:rgba(255,255,255,.18)}body.local-dark .flowergame-close{background:#273140;color:#fff;-webkit-text-fill-color:#fff;border-color:rgba(255,255,255,.15)}body.local-dark .flowergame-status{color:#d8e0ea;-webkit-text-fill-color:#d8e0ea}body.local-dark .flowergame-result-row{background:#202a37;color:#f8fafc;-webkit-text-fill-color:#f8fafc;border-color:rgba(255,255,255,.10)}body.local-dark .flowergame-result-row.mine{background:#3a3216;outline-color:#f6c945} body.local-light .flowergame-card{background:#fffaf0;color:#33280f;-webkit-text-fill-color:#33280f}body.local-light .flowergame-card-action{background:#d1d5db;color:#111827;-webkit-text-fill-color:#111827}body.local-light .flowergame-modal{background:#f4f7fa;color:#17202a;-webkit-text-fill-color:#17202a}body.local-light .flowergame-close{background:#fff;color:#17202a;-webkit-text-fill-color:#17202a}body.local-light .flowergame-status{color:#46505d;-webkit-text-fill-color:#46505d}body.local-light .flowergame-result-row{background:#fff;color:#18202a;-webkit-text-fill-color:#18202a} @media(prefers-color-scheme:dark){body:not(.local-light) .flowergame-card{background:#202733;color:#fff5cf;-webkit-text-fill-color:#fff5cf}body:not(.local-light) .flowergame-card-desc,body:not(.local-light) .flowergame-card-rank{color:#fff1b8;-webkit-text-fill-color:#fff1b8}body:not(.local-light) .flowergame-card-people{color:#d8c990;-webkit-text-fill-color:#d8c990}body:not(.local-light) .flowergame-card-action{background:#8b5cf6;color:#fff;-webkit-text-fill-color:#fff}body:not(.local-light) .flowergame-modal{background:#111925;color:#f8fafc;-webkit-text-fill-color:#f8fafc}body:not(.local-light) .flowergame-close{background:#273140;color:#fff;-webkit-text-fill-color:#fff}body:not(.local-light) .flowergame-status{color:#d8e0ea;-webkit-text-fill-color:#d8e0ea}body:not(.local-light) .flowergame-result-row{background:#202a37;color:#f8fafc;-webkit-text-fill-color:#f8fafc}} @media(max-width:520px){.flowergame-modal{width:96vw;padding:10px;border-radius:20px}.flowergame-stage{min-height:62vh}.flowergame-flower{width:min(88vw,430px)}.flowergame-top strong{font-size:14px}.flowergame-close{width:40px;height:40px}.flowergame-result-row{grid-template-columns:46px minmax(0,1fr) auto;padding:9px;font-size:11px}} @media(max-width:260px),(max-height:360px){.flowergame-card{padding:7px;border-radius:12px}.flowergame-card-desc,.flowergame-card-people,.flowergame-card-rank{font-size:8px}.flowergame-card-action{min-height:30px;font-size:9px}.flowergame-modal{padding:6px;border-radius:13px}.flowergame-status{font-size:8px;padding:4px}.flowergame-stage{min-height:160px}.flowergame-counter{top:6px;font-size:8px;padding:4px 7px}.flowergame-top strong{font-size:10px}.flowergame-close{width:30px;height:30px;font-size:18px}.flowergame-results{gap:4px}.flowergame-result-row{grid-template-columns:30px minmax(0,1fr) auto;font-size:8px;padding:5px}} /* v168: flower game petals must stay transparent in light mode. Global light-mode button styling uses !important, so the petal buttons need a more specific exception or they render as white rectangles on iOS/Safari. */ body.local-light .flowergame-petal{ background:transparent !important; border:0 !important; box-shadow:none !important; } /* button:(title,text) interactive chat buttons */ .button-command-bubble{ padding:8px 10px !important; } .message-button-grid{ display:flex; flex-wrap:wrap; gap:7px; align-items:stretch; min-width:0; } .message-command-button{ -webkit-appearance:none !important; appearance:none !important; max-width:100%; min-height:34px; padding:7px 12px; border:1px solid rgba(255,255,255,.28) !important; border-radius:11px; background:rgba(255,255,255,.12) !important; background-image:none !important; color:inherit !important; box-shadow:none !important; font:inherit; font-weight:800; line-height:1.25; text-align:center; overflow-wrap:anywhere; cursor:pointer; touch-action:manipulation; } .message-command-button:active{transform:scale(.97)} body.local-light .message-bubble .message-command-button{ background:#fff !important; background-image:none !important; color:#111 !important; border-color:rgba(17,17,17,.28) !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important; } body.local-dark .message-bubble .message-command-button{ background:rgba(255,255,255,.12) !important; background-image:none !important; color:inherit !important; border-color:rgba(255,255,255,.28) !important; box-shadow:none !important; } @media(max-width:300px){ .message-button-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:5px} .message-command-button{width:100%;min-height:31px;padding:6px 8px;font-size:11px} } /* /age / /gender anonymous survey statistics */ .stats-survey-card{ align-self:center; width:min(94%,560px); box-sizing:border-box; margin:8px auto; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--panel); color:var(--text); box-shadow:0 10px 32px rgba(0,0,0,.14); } .stats-survey-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .stats-survey-title{font-size:14px;font-weight:900;letter-spacing:.01em} .stats-survey-timer{flex:none;color:var(--muted);font-size:11px;font-weight:800} .stats-survey-question{margin:9px 0 11px;font-size:17px;font-weight:900;line-height:1.35;overflow-wrap:anywhere} .stats-survey-options{display:flex;flex-direction:column;gap:7px} .stats-survey-option{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:38px; box-sizing:border-box; overflow:hidden; padding:8px 10px; border:1px solid color-mix(in srgb,var(--border) 85%,transparent) !important; border-radius:11px; background:color-mix(in srgb,var(--panel) 92%,var(--text) 8%) !important; color:var(--text) !important; text-align:left; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } .stats-survey-option:hover{filter:brightness(1.03)} .stats-survey-option.selected{border-color:#4f7cff !important;box-shadow:0 0 0 2px rgba(79,124,255,.16) inset} .stats-survey-option:disabled{cursor:default;opacity:.78} .stats-survey-progress{position:absolute;z-index:-1;inset:0 auto 0 0;width:0;background:rgba(79,124,255,.16);transition:width .28s ease} .stats-survey-label{min-width:0;font-size:12px;font-weight:850;line-height:1.25;overflow-wrap:anywhere} .stats-survey-count{white-space:nowrap;color:var(--muted);font-size:10px;font-weight:800} .stats-survey-option.selected .stats-survey-count{color:inherit} .stats-survey-foot{margin-top:10px;color:var(--muted);font-size:10px;line-height:1.4;text-align:center} .stats-survey-card.closed .stats-survey-option{opacity:.88} body.local-light .stats-survey-card{background:#fff;color:#111827} body.local-light .stats-survey-option{background:#f7f9fc !important;color:#111827 !important;border-color:#d7deea !important} body.local-light .stats-survey-option.selected{border-color:#356df3 !important} body.local-light .stats-survey-progress{background:rgba(53,109,243,.13)} @media(max-width:300px){ .stats-survey-card{width:98%;margin:5px auto;padding:9px;border-radius:12px} .stats-survey-title{font-size:11px}.stats-survey-timer{font-size:9px} .stats-survey-question{margin:6px 0 8px;font-size:13px} .stats-survey-options{gap:4px} .stats-survey-option{min-height:31px;padding:5px 7px;border-radius:8px;gap:6px} .stats-survey-label{font-size:10px}.stats-survey-count{font-size:8px} .stats-survey-foot{margin-top:7px;font-size:8px} } /* ========================================================= /callnow — 現在の音声通話一覧 ========================================================= */ .voice-callnow-backdrop{position:fixed;inset:0;z-index:15070;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(4,10,18,.30);backdrop-filter:blur(12px) saturate(135%);-webkit-backdrop-filter:blur(12px) saturate(135%)} .voice-callnow-modal{width:min(92vw,420px);max-height:min(84vh,620px);overflow:auto;padding:14px;border:1px solid rgba(180,220,255,.18);border-radius:20px;background:linear-gradient(180deg,rgba(25,42,63,.88),rgba(8,18,31,.82));color:#f5fbff;box-shadow:0 24px 72px rgba(0,0,0,.34);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)} .voice-callnow-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.voice-callnow-head strong{font-size:16px;font-weight:950}.voice-callnow-close{width:32px;height:32px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.08);color:inherit;font-size:20px;font-weight:900;line-height:1}.voice-callnow-status{margin:8px 0 10px;font-size:11px;opacity:.75}.voice-callnow-list{display:grid;gap:9px}.voice-callnow-item{padding:11px;border:1px solid rgba(160,210,255,.14);border-radius:15px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}.voice-callnow-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.voice-callnow-item-top strong{min-width:0;overflow-wrap:anywhere;font-size:13px}.voice-callnow-item-top span{flex:none;padding:3px 7px;border-radius:999px;background:rgba(80,160,235,.16);font-size:10px;font-weight:900}.voice-callnow-item-meta{margin-top:5px;font-size:10px;opacity:.72}.voice-callnow-join{width:100%;min-height:36px;margin-top:9px;border:1px solid rgba(100,185,255,.18);border-radius:10px;background:linear-gradient(180deg,rgba(45,151,220,.96),rgba(30,116,184,.92));color:#fff;font:inherit;font-size:12px;font-weight:950}.voice-callnow-join:disabled{opacity:.48}.voice-callnow-empty{padding:20px 10px;text-align:center;border:1px dashed rgba(180,220,255,.16);border-radius:14px;font-size:11px;opacity:.72} body.local-light .voice-callnow-backdrop{background:rgba(229,236,244,.22)}body.local-light .voice-callnow-modal{color:#152638;border-color:rgba(93,122,160,.12);background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(239,247,253,.82));box-shadow:0 24px 72px rgba(43,61,80,.16)}body.local-light .voice-callnow-close{background:rgba(255,255,255,.54);border-color:rgba(93,122,160,.12)}body.local-light .voice-callnow-item{background:rgba(255,255,255,.56);border-color:rgba(93,122,160,.11)}body.local-light .voice-callnow-item-top span{background:rgba(50,135,210,.10)}body.local-light .voice-callnow-empty{border-color:rgba(93,122,160,.16)} @media(max-width:360px){.voice-callnow-modal{padding:10px;border-radius:16px}.voice-callnow-item{padding:9px}.voice-callnow-item-top strong{font-size:11px}.voice-callnow-item-meta{font-size:9px}} /* ========================================================= FOR314 reply / mention v1 - 長押し / 右クリックで返信 - 入力欄先頭 @ で候補 ========================================================= */ .for314-reply-action-menu{ position:fixed;z-index:2147483600;width:min(270px,calc(100vw - 16px)); padding:7px;border:1px solid rgba(255,255,255,.15);border-radius:14px; background:rgba(20,27,38,.94);color:#eef3fa; box-shadow:0 16px 44px rgba(0,0,0,.34); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); } .for314-reply-action-menu[hidden]{display:none!important} .for314-reply-action-info{padding:3px 5px 7px;font-size:11px;line-height:1.35;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-reply-action-button{ width:100%!important;height:38px!important;margin:0!important;padding:0 12px!important; border:0!important;border-radius:10px!important;background:rgba(88,140,226,.20)!important; color:inherit!important;-webkit-text-fill-color:currentColor!important;text-align:left!important;font-weight:800!important; } body.local-light .for314-reply-action-menu{background:rgba(250,252,255,.96);color:#1a2430;border-color:rgba(70,88,110,.16);box-shadow:0 16px 38px rgba(40,58,78,.18)} body.local-light .for314-reply-action-button{background:rgba(58,110,200,.10)!important;color:#244d8f!important;-webkit-text-fill-color:#244d8f!important} .inputrow{position:relative} .for314-reply-composer-preview{ position:absolute;left:7px;right:7px;bottom:calc(100% + 6px);z-index:25; display:flex;align-items:stretch;gap:5px;padding:5px; border:1px solid rgba(255,255,255,.13);border-radius:13px; background:rgba(20,27,38,.92);box-shadow:0 12px 30px rgba(0,0,0,.22); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); } .for314-reply-composer-preview[hidden]{display:none!important} .for314-reply-composer-body{ flex:1 1 auto!important;min-width:0!important;height:auto!important;min-height:38px!important; display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important; padding:5px 8px!important;border:0!important;border-radius:9px!important;background:transparent!important; box-shadow:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;text-align:left!important; } .for314-reply-composer-label{display:block;max-width:100%;font-size:11px;font-weight:800;color:#77a8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-reply-composer-quote{display:block;max-width:100%;font-size:10px;line-height:1.3;opacity:.70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-reply-composer-close{ flex:0 0 34px!important;width:34px!important;height:34px!important;align-self:center!important; padding:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important; box-shadow:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;font-size:20px!important;line-height:1!important; } body.local-light .for314-reply-composer-preview{background:rgba(250,252,255,.96);border-color:rgba(72,88,110,.14);box-shadow:0 12px 28px rgba(43,61,80,.13);color:#17212b} body.local-light .for314-reply-composer-label{color:#315da8} body.local-light .for314-reply-composer-close{background:rgba(58,78,104,.08)!important;color:#2b3948!important;-webkit-text-fill-color:#2b3948!important} .for314-mention-menu{ position:absolute;left:7px;right:7px;bottom:calc(100% + 6px);z-index:24; max-height:min(230px,52vh);overflow:auto;padding:5px; border:1px solid rgba(255,255,255,.13);border-radius:13px; background:rgba(20,27,38,.94);box-shadow:0 16px 38px rgba(0,0,0,.28); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); } .inputrow.has-for314-reply .for314-mention-menu{bottom:calc(100% + 66px)} .for314-mention-menu[hidden]{display:none!important} .for314-mention-group{ position:sticky;top:-5px;z-index:1;margin:2px 2px 3px;padding:6px 8px 4px; font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; color:rgba(190,211,255,.82);background:rgba(20,27,38,.92); } .for314-mention-item{ width:100%!important;min-height:38px!important;height:auto!important;margin:0!important;padding:7px 9px!important; display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important; border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important; color:inherit!important;-webkit-text-fill-color:currentColor!important;text-align:left!important; } .for314-mention-item:hover,.for314-mention-item.is-active{background:rgba(83,133,218,.18)!important} .for314-mention-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:12px} .for314-mention-status{flex:0 0 auto;font-size:9px;opacity:.55} body.local-light .for314-mention-menu{background:rgba(250,252,255,.97);color:#17212b;border-color:rgba(72,88,110,.14);box-shadow:0 16px 34px rgba(43,61,80,.14)} body.local-light .for314-mention-group{color:#5c6d83;background:rgba(250,252,255,.96)} body.local-light .for314-mention-item{background:transparent!important;color:#17212b!important;-webkit-text-fill-color:#17212b!important;border:0!important} body.local-light .for314-mention-item:hover,body.local-light .for314-mention-item.is-active{background:rgba(58,110,200,.10)!important} .message.for314-reply-message .message-bubble{padding-top:7px} .for314-reply-quote-card{ margin:0 0 7px;padding:6px 8px;border-left:3px solid rgba(133,177,255,.90);border-radius:8px; background:rgba(0,0,0,.13);cursor:pointer;outline:none;user-select:none;-webkit-user-select:none; } .for314-reply-quote-card:focus-visible{box-shadow:0 0 0 2px rgba(132,178,255,.55)} .for314-reply-quote-name{font-size:10px;font-weight:800;line-height:1.25;color:#a8c8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-reply-quote-text{margin-top:2px;font-size:10px;line-height:1.3;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .for314-reply-body{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere} .message.mine .for314-reply-quote-card{background:rgba(0,0,0,.12);border-left-color:rgba(255,255,255,.82)} .message.mine .for314-reply-quote-name{color:#fff} body.local-light .message:not(.mine) .for314-reply-quote-card{background:rgba(42,65,94,.06);border-left-color:#5a84c7} body.local-light .message:not(.mine) .for314-reply-quote-name{color:#315da8} .message.for314-mentioned-me .message-bubble{ outline:2px solid rgba(255,188,76,.72);outline-offset:2px; box-shadow:0 0 0 4px rgba(255,188,76,.10),var(--for314-mention-base-shadow,none); } @keyframes for314ReplyJumpFlash{ 0%,100%{filter:none} 25%,70%{filter:brightness(1.22);transform:scale(1.012)} } .message.for314-reply-jump-highlight{animation:for314ReplyJumpFlash .8s ease 2} @media(max-width:360px){ .for314-reply-action-info{font-size:10px} .for314-reply-composer-preview,.for314-mention-menu{left:4px;right:4px} .for314-reply-composer-label{font-size:10px}.for314-reply-composer-quote{font-size:9px} .for314-mention-name{font-size:11px}.for314-mention-status{font-size:8px} } @media(max-width:220px){ .for314-reply-composer-preview{padding:3px;gap:3px;border-radius:10px} .for314-reply-composer-close{flex-basis:28px!important;width:28px!important;height:28px!important;font-size:17px!important} .for314-reply-composer-body{min-height:32px!important;padding:3px 5px!important} .for314-reply-composer-label{font-size:8.5px}.for314-reply-composer-quote{font-size:7.5px} .inputrow.has-for314-reply .for314-mention-menu{bottom:calc(100% + 54px)} } /* ===== FOR314 reply swipe + WEMAP v174 ===== */ /* ライトモードで返信引用が白文字のまま残らないよう明示 */ body.local-light .message:not(.mine) .for314-reply-quote-text{ color:#46586d!important; -webkit-text-fill-color:#46586d!important; opacity:.90!important; } body.local-light .message:not(.mine) .for314-reply-body{ color:#17212b!important; -webkit-text-fill-color:#17212b!important; } /* スマホ: 右スワイプ返信 */ .message[data-message-id] .message-bubble{ touch-action:pan-y; } .message.for314-swipe-reply-active .message-bubble{ transition:none!important; will-change:transform; } .message.for314-swipe-reply-reset .message-bubble{ transition:transform .18s cubic-bezier(.22,.8,.3,1)!important; } .for314-swipe-reply-indicator{ position:absolute; left:-42px; top:50%; width:36px; height:36px; margin-top:-18px; display:grid; place-items:center; border-radius:999px; font-size:20px; font-weight:900; color:#7aa8ff; opacity:0; transform:scale(.75); pointer-events:none; z-index:0; transition:opacity .08s linear,transform .08s linear; } .message.for314-swipe-reply-ready .for314-swipe-reply-indicator{ color:#4f8df7; transform:scale(1.05); } body.local-light .for314-swipe-reply-indicator{color:#315da8} .message[data-message-id]{position:relative} .message[data-message-id] .message-content{position:relative;z-index:1} .message[data-message-id] .message-avatar{position:relative;z-index:1} /* /wemap */ .for314-wemap-backdrop{ position:fixed; inset:0; z-index:2147482500; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(6,10,18,.68); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .for314-wemap-backdrop[hidden]{display:none!important} .for314-wemap-modal{ width:min(760px,96vw); height:min(740px,94dvh); max-height:94vh; display:flex; flex-direction:column; overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.14); background:#111824; color:#eef4ff; box-shadow:0 30px 90px rgba(0,0,0,.45); } .for314-wemap-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; min-height:54px; padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.10); } .for314-wemap-title{min-width:0;flex:1;font-weight:900;font-size:16px} .for314-wemap-close,.for314-wemap-tool,.for314-wemap-action{ appearance:none; border:1px solid rgba(255,255,255,.14)!important; background:rgba(255,255,255,.08)!important; color:inherit!important; -webkit-text-fill-color:currentColor!important; border-radius:12px; font:inherit; cursor:pointer; } .for314-wemap-close{width:38px;height:38px;padding:0!important;font-size:23px;line-height:1} .for314-wemap-body{flex:1;min-height:0;display:flex;flex-direction:column} .for314-wemap-setup{ margin:auto; width:min(590px,100%); padding:20px 18px 26px; overflow:auto; } .for314-wemap-setup h3{margin:0 0 7px;font-size:18px} .for314-wemap-setup p{margin:0 0 14px;line-height:1.6;opacity:.84} .for314-wemap-precision{display:grid;gap:8px;margin:14px 0} .for314-wemap-choice{ display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.045); cursor:pointer; } .for314-wemap-choice input{margin-top:3px} .for314-wemap-choice strong{display:block;font-size:13px} .for314-wemap-choice small{display:block;margin-top:2px;opacity:.66;line-height:1.4} .for314-wemap-privacy{ margin:12px 0!important; padding:10px 11px; border-radius:12px; background:rgba(79,141,247,.10); border:1px solid rgba(79,141,247,.22); font-size:12px; } .for314-wemap-setup-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px} .for314-wemap-action{padding:11px 12px!important;font-weight:800} .for314-wemap-action.primary{background:#4f8df7!important;border-color:#4f8df7!important;color:#fff!important} .for314-wemap-mapstage{flex:1;min-height:0;display:flex;flex-direction:column} .for314-wemap-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); } .for314-wemap-status{min-width:0;flex:1;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.82} .for314-wemap-tool{flex:0 0 auto;padding:7px 9px!important;font-size:11px} .for314-wemap-map{ flex:1; min-height:300px; background:#0b1220; } .for314-wemap-footer{ flex:0 0 auto; display:grid; grid-template-columns:1fr auto; gap:8px; padding:9px 10px max(9px,env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.09); } .for314-wemap-input{ min-width:0; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:inherit; border-radius:12px; padding:10px 12px; font:inherit; outline:none; } .for314-wemap-send{padding:9px 14px!important} .for314-wemap-input:disabled,.for314-wemap-send:disabled{opacity:.48} .for314-wemap-loading{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1200; max-width:86%; padding:9px 13px; border-radius:999px; background:rgba(15,24,38,.88); color:#fff; font-size:12px; box-shadow:0 8px 28px rgba(0,0,0,.28); pointer-events:none; } .for314-wemap-mapwrap{position:relative;flex:1;min-height:0;display:flex} .for314-wemap-popup{min-width:120px;max-width:230px;color:#17212b;line-height:1.45} .for314-wemap-popup-name{font-size:11px;font-weight:900;margin-bottom:3px} .for314-wemap-popup-text{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere} .for314-wemap-popup-place{margin-top:4px;font-size:10px;opacity:.62} .for314-wemap-map .leaflet-control-attribution{font-size:8px} body.local-light .for314-wemap-modal{ background:#f7f9fc; color:#17212b; border-color:rgba(55,70,90,.14); box-shadow:0 28px 80px rgba(32,45,60,.24); } body.local-light .for314-wemap-head, body.local-light .for314-wemap-toolbar, body.local-light .for314-wemap-footer{border-color:rgba(55,70,90,.12)} body.local-light .for314-wemap-choice{ background:#fff; border-color:rgba(55,70,90,.13); } body.local-light .for314-wemap-close, body.local-light .for314-wemap-tool, body.local-light .for314-wemap-action{ background:#fff!important; color:#17212b!important; -webkit-text-fill-color:#17212b!important; border-color:rgba(55,70,90,.15)!important; } body.local-light .for314-wemap-action.primary{ background:#397be6!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } body.local-light .for314-wemap-input{ background:#fff; color:#17212b; border-color:rgba(55,70,90,.16); } @media(max-width:620px){ .for314-wemap-backdrop{padding:0} .for314-wemap-modal{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0} .for314-wemap-setup{padding:18px 14px 24px} .for314-wemap-setup-actions{grid-template-columns:1fr} .for314-wemap-map{min-height:0} .for314-wemap-title{font-size:14px} .for314-wemap-tool{padding:7px!important;font-size:10px} } /* ===== FOR314 reply light fix + participatory WeMap v175 ===== */ /* LIGHT v6 の message-bubble * { color:#fff !important } より強く、返信引用だけを正しい色に戻す */ body.local-light main .message:not(.mine) .message-bubble .for314-reply-quote-card, body.local-light main .message:not(.mine) .message-bubble .for314-reply-quote-card *{ color:#46586d!important; -webkit-text-fill-color:#46586d!important; } body.local-light main .message:not(.mine) .message-bubble .for314-reply-quote-name{ color:#315da8!important; -webkit-text-fill-color:#315da8!important; opacity:1!important; } body.local-light main .message:not(.mine) .message-bubble .for314-reply-quote-text{ color:#46586d!important; -webkit-text-fill-color:#46586d!important; opacity:.92!important; } body.local-light main .message.mine .message-bubble .for314-reply-quote-card, body.local-light main .message.mine .message-bubble .for314-reply-quote-card *{ color:#fff!important; -webkit-text-fill-color:#fff!important; } .for314-wemap-session-card{ width:min(440px,calc(100% - 20px));align-self:center;margin:7px auto;padding:12px; border:1px solid rgba(126,161,216,.22);border-radius:16px; background:linear-gradient(145deg,rgba(31,42,60,.96),rgba(20,27,40,.96)); box-shadow:0 10px 28px rgba(0,0,0,.18);color:#eef4ff; } .for314-wemap-session-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .for314-wemap-session-card-head strong{font-size:14px;font-weight:900} .for314-wemap-session-card-state{font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(83,146,255,.18);color:#a9c9ff} .for314-wemap-session-card-desc{margin-top:7px;font-size:12px;font-weight:800;overflow-wrap:anywhere} .for314-wemap-session-card-people{margin-top:5px;font-size:11px;opacity:.86} .for314-wemap-session-card-note{margin-top:3px;font-size:9.5px;opacity:.62;line-height:1.4} .for314-wemap-session-card-action{ width:100%;margin-top:9px;padding:9px 12px!important;border-radius:11px!important; border:1px solid rgba(111,157,231,.35)!important;background:rgba(69,128,224,.22)!important; color:#eaf2ff!important;-webkit-text-fill-color:#eaf2ff!important;font-weight:900!important; } .for314-wemap-session-card.is-ended{opacity:.7} .for314-wemap-session-card.is-ended .for314-wemap-session-card-state{background:rgba(150,157,169,.16);color:#c5cad2} .for314-wemap-session-card.is-ended .for314-wemap-session-card-action{opacity:.55} body.local-light .for314-wemap-session-card{background:rgba(252,253,255,.97);color:#17212b;border-color:rgba(63,88,124,.15);box-shadow:0 10px 28px rgba(45,62,82,.12)} body.local-light .for314-wemap-session-card *{color:inherit} body.local-light .for314-wemap-session-card-state{background:rgba(58,110,200,.10);color:#315da8!important;-webkit-text-fill-color:#315da8!important} body.local-light .for314-wemap-session-card-action{background:#4f8df7!important;border-color:#4f8df7!important;color:#fff!important;-webkit-text-fill-color:#fff!important} @media(max-width:360px){ .for314-wemap-session-card{width:calc(100% - 10px);padding:9px;border-radius:13px} .for314-wemap-session-card-head strong{font-size:12px} .for314-wemap-session-card-desc{font-size:10.5px} .for314-wemap-session-card-people{font-size:9.5px} .for314-wemap-session-card-note{font-size:8.5px} .for314-wemap-session-card-action{padding:8px!important;font-size:10px!important} } /* ===== FOR314 mobile swipe actions v176 ===== touch: → reply / ← translate & report Desktop keeps the existing inline actions. */ .message.for314-swipe-actions-active .message-bubble{ transition:none!important; will-change:transform; } .for314-swipe-action-indicator{ position:absolute; right:-46px; top:50%; width:40px; height:36px; margin-top:-18px; display:grid; place-items:center; border-radius:999px; font-size:15px; letter-spacing:1px; font-weight:950; color:#9cb8e9; opacity:0; transform:scale(.75); pointer-events:none; z-index:0; transition:opacity .08s linear,transform .08s linear; } .message.for314-swipe-actions-ready .for314-swipe-action-indicator{ color:#6e9ff1; transform:scale(1.05); } body.local-light .for314-swipe-action-indicator{color:#315da8} .for314-swipe-action-menu{ position:fixed; z-index:2147483650; width:min(220px,calc(100vw - 16px)); padding:7px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(20,27,38,.96); color:#eef3fa; box-shadow:0 16px 44px rgba(0,0,0,.34); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); } .for314-swipe-action-menu[hidden]{display:none!important} .for314-swipe-action-info{ padding:3px 5px 7px; font-size:10px; line-height:1.3; opacity:.68; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .for314-swipe-action-row{display:grid;grid-template-columns:1fr 1fr;gap:6px} .for314-swipe-action-button{ min-width:0!important; height:38px!important; margin:0!important; padding:0 8px!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:10px!important; background:rgba(88,140,226,.16)!important; color:#eef4ff!important; -webkit-text-fill-color:#eef4ff!important; font-size:12px!important; font-weight:900!important; text-align:center!important; } .for314-swipe-action-button[hidden]{display:none!important} .for314-swipe-action-button.is-report{ background:rgba(225,83,91,.13)!important; color:#ffb3b8!important; -webkit-text-fill-color:#ffb3b8!important; } body.local-light .for314-swipe-action-menu{ background:rgba(250,252,255,.97); color:#17212b; border-color:rgba(70,88,110,.16); box-shadow:0 16px 38px rgba(40,58,78,.18); } body.local-light .for314-swipe-action-button{ background:rgba(58,110,200,.09)!important; color:#244d8f!important; -webkit-text-fill-color:#244d8f!important; border-color:rgba(58,110,200,.10)!important; } body.local-light .for314-swipe-action-button.is-report{ background:rgba(201,59,67,.08)!important; color:#b43039!important; -webkit-text-fill-color:#b43039!important; border-color:rgba(201,59,67,.10)!important; } /* LIGHT v6 の全子要素白文字指定を、通常版/WidのDOM差に依存せず打ち消す。 */ body.local-light .message:not(.mine) .message-bubble .for314-reply-quote-card, body.local-light .message:not(.mine) .message-bubble .for314-reply-quote-card *{ color:#46586d!important; -webkit-text-fill-color:#46586d!important; } body.local-light .message:not(.mine) .message-bubble .for314-reply-quote-name{ color:#315da8!important; -webkit-text-fill-color:#315da8!important; opacity:1!important; } body.local-light .message:not(.mine) .message-bubble .for314-reply-quote-text{ color:#46586d!important; -webkit-text-fill-color:#46586d!important; opacity:.92!important; } @media (max-width:820px) and (pointer:coarse){ /* 翻訳/通報の旧インラインリンクはDOMに残し、スワイプメニューから再利用する。 */ .message[data-message-id] .message-action-row:not(.superchat-action-row){ position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; margin:0!important; padding:0!important; } } /* ===== /notificationSettings : 通知モード ===== */ .for314-notification-mode-backdrop{ position:fixed; inset:0; z-index:2147483200; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.58); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .for314-notification-mode-backdrop.open{display:flex} .for314-notification-mode-modal{ width:min(92vw,460px); max-height:min(82vh,700px); overflow:auto; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#17191f; color:#f5f7fb; box-shadow:0 24px 70px rgba(0,0,0,.42); padding:16px; } .for314-notification-mode-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; } .for314-notification-mode-title{ margin:0; font-size:18px; line-height:1.3; font-weight:800; color:inherit; } .for314-notification-mode-close{ flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.14)!important; border-radius:999px!important; background:rgba(255,255,255,.08)!important; color:#fff!important; font-size:24px; line-height:1; } .for314-notification-mode-room{ margin:0 0 12px; color:#aeb7c7; font-size:12px; overflow-wrap:anywhere; } .for314-notification-mode-choices{ display:grid; gap:9px; } .for314-notification-mode-choice{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 13px!important; text-align:left; border:1px solid rgba(255,255,255,.12)!important; border-radius:15px!important; background:rgba(255,255,255,.055)!important; color:#f5f7fb!important; } .for314-notification-mode-choice strong{ display:block; font-size:14px; line-height:1.35; color:inherit!important; } .for314-notification-mode-choice span{ display:block; color:#b9c2d0!important; font-size:12px; line-height:1.5; } .for314-notification-mode-choice.is-active{ border-color:#66aefc!important; background:rgba(66,153,255,.16)!important; box-shadow:0 0 0 1px rgba(102,174,252,.25) inset; } .for314-notification-mode-choice:disabled{opacity:.65} .for314-notification-mode-status{ margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.055); color:#dce4ef; font-size:12px; line-height:1.5; } .for314-notification-mode-note{ margin:10px 2px 0; color:#9fa9ba; font-size:11px; line-height:1.55; } body.local-light .for314-notification-mode-backdrop{ background:rgba(15,25,35,.30)!important; } body.local-light .for314-notification-mode-modal{ background:#fff!important; color:#15202b!important; border-color:#d7dee7!important; box-shadow:0 22px 60px rgba(30,45,65,.22)!important; } body.local-light .for314-notification-mode-close{ background:#f3f6f9!important; color:#17212c!important; border-color:#d7dee7!important; } body.local-light .for314-notification-mode-room{color:#607080!important} body.local-light .for314-notification-mode-choice{ background:#f7f9fb!important; color:#17212c!important; border-color:#d9e0e8!important; } body.local-light .for314-notification-mode-choice span{color:#586879!important} body.local-light .for314-notification-mode-choice.is-active{ background:#eaf4ff!important; border-color:#4f9cec!important; } body.local-light .for314-notification-mode-status{ background:#f3f6f9!important; color:#344454!important; } body.local-light .for314-notification-mode-note{color:#657585!important} @media(max-width:640px){ .for314-notification-mode-backdrop{align-items:flex-end;padding:8px} .for314-notification-mode-modal{ width:100%; max-height:88vh; border-radius:22px 22px 14px 14px; padding:14px; } .for314-notification-mode-choice{padding:13px!important} } /* ===== FOR314 reply quote viewport fix v179 ===== Long reply-source text must never determine a bubble width beyond the viewport. */ .message.for314-reply-message{ min-width:0!important; max-width:min(78%,calc(100vw - 32px))!important; } .message.for314-reply-message .message-bubble, .message.for314-reply-message .for314-reply-bubble{ min-width:0!important; max-width:100%!important; overflow:hidden!important; } .message.for314-reply-message .for314-reply-quote-card{ box-sizing:border-box!important; width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; } .message.for314-reply-message .for314-reply-quote-name{ display:block!important; min-width:0!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; overflow-wrap:anywhere!important; } .message.for314-reply-message .for314-reply-quote-text{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; line-clamp:2; min-width:0!important; max-width:100%!important; white-space:normal!important; overflow:hidden!important; text-overflow:ellipsis!important; overflow-wrap:anywhere!important; word-break:break-word!important; } .message.for314-reply-message .for314-reply-body{ min-width:0!important; max-width:100%!important; overflow-wrap:anywhere!important; word-break:break-word!important; } @media(max-width:680px){ .message.for314-reply-message{ max-width:min(88%,calc(100vw - 24px))!important; } } @media(max-width:360px){ .message.for314-reply-message{ max-width:min(94%,calc(100vw - 16px))!important; } } /* Default light theme uses a pale own-message bubble; keep its quoted source readable. */ html:not(.for314-bubblecolor-active):not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-card, html:not(.for314-bubblecolor-active):not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-card *{ color:#374151!important; -webkit-text-fill-color:#374151!important; } html:not(.for314-bubblecolor-active):not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-name{ color:#315da8!important; -webkit-text-fill-color:#315da8!important; } /* ===== /os persistent inline OS count card ===== */ main .chatlog > .for314-os-card, .chatlog > .for314-os-card{ flex:0 0 auto !important; flex-shrink:0 !important; width:min(92%,520px) !important; height:auto !important; min-height:max-content !important; max-height:none !important; align-self:center !important; margin:8px auto !important; box-sizing:border-box !important; contain:none !important; } .for314-os-card{border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.14);background-clip:padding-box} .for314-os-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border);flex:0 0 auto} .for314-os-title-wrap{display:flex;flex-direction:column;min-width:0;max-width:100%}.for314-os-title{font-size:14px;line-height:1.25}.for314-os-by{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .for314-os-body{display:grid;grid-template-columns:minmax(120px,160px) minmax(130px,1fr);gap:14px;align-items:center;padding:14px;min-height:0;height:auto!important;max-height:none!important;overflow:visible!important;flex:0 0 auto} .for314-os-chart{display:flex;align-items:center;justify-content:center;min-width:0;flex:0 0 auto}.for314-os-donut{position:relative;width:148px;height:148px;min-width:118px;min-height:118px;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--border);transition:background .2s ease;flex:0 0 auto} .for314-os-donut::after{content:"";position:absolute;inset:24%;border-radius:50%;background:var(--panel);border:1px solid var(--border)} .for314-os-center{position:absolute;inset:27%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;min-width:0}.for314-os-online{font-size:13px;white-space:nowrap}.for314-os-center span{font-size:9px;color:var(--muted);margin-top:3px;max-width:88px} .for314-os-legend{display:flex;flex-direction:column;gap:6px;min-width:0;height:auto!important;max-height:none!important;overflow:visible!important}.for314-os-legend-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:7px;align-items:center;font-size:12px;min-width:0}.for314-os-dot{width:10px;height:10px;border-radius:50%}.for314-os-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.for314-os-count{font-variant-numeric:tabular-nums}.for314-os-empty{color:var(--muted);font-size:12px} body.local-light .for314-os-card{background:#fff!important;color:#111!important;border-color:#d9dee8!important}.local-light .for314-os-donut::after{background:#fff!important;border-color:#d9dee8!important}.local-light .for314-os-by,.local-light .for314-os-center span,.local-light .for314-os-empty{color:#687386!important} @media(max-width:420px){main .chatlog > .for314-os-card,.chatlog > .for314-os-card{width:calc(100% - 18px)!important;margin:7px 9px!important}.for314-os-body{grid-template-columns:118px minmax(0,1fr);gap:10px;padding:12px}.for314-os-donut{width:116px;height:116px;min-width:116px;min-height:116px}.for314-os-legend{gap:4px}.for314-os-legend-row{font-size:11px}} @media(max-width:300px){.for314-os-body{grid-template-columns:1fr;gap:9px;padding:9px}.for314-os-donut{width:108px;height:108px;min-width:108px;min-height:108px}.for314-os-legend{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px}.for314-os-head{padding:8px 9px}.for314-os-title{font-size:12px}.for314-os-by{font-size:9px}} /* /gamead — rainbow game advertisement */ .room-gamead-message .message-bubble.room-gamead-bubble{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(16,26,56,.96),rgba(10,17,39,.98)); border:1px solid rgba(116,160,255,.28); box-shadow:0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); color:#fff; padding:14px; } .room-gamead-glow{ position:absolute; inset:-35%; background:linear-gradient(120deg,#ff4d78,#ff9b3d,#ffef5a,#53f093,#42d0ff,#7f7bff,#ff5fda,#ff4d78); background-size:260% 260%; opacity:.23; filter:blur(26px); animation:roomGameAdWave 6s linear infinite; pointer-events:none; } .room-gamead-head,.room-gamead-sub,.room-gamead-frame-wrap{ position:relative; z-index:1; } .room-gamead-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .room-gamead-title{ font-weight:900; font-size:26px; line-height:1.08; letter-spacing:.03em; background:linear-gradient(90deg,#fff8d9,#ffd0f6,#dff5ff,#fff6ba,#ffd0f6,#fff8d9); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(255,255,255,.12),0 0 22px rgba(114,178,255,.18); animation:roomGameAdTextWave 3.5s linear infinite,roomGameAdWobble .58s steps(2,end) infinite; transform-origin:50% 58%; will-change:transform,background-position; } .room-gamead-badge{ flex:0 0 auto; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); font-size:12px; font-weight:800; letter-spacing:.04em; } .room-gamead-sub{ font-size:14px; font-weight:700; color:rgba(255,255,255,.97); margin-bottom:4px; } .room-gamead-frame-wrap{ border-radius:18px; padding:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(2px); } .room-gamead-frame{ display:block; width:300px; max-width:100%; height:250px; margin:0 auto; border:0; border-radius:12px; background:transparent; } @keyframes roomGameAdWave{ 0%{background-position:0% 50%;transform:translate3d(-2%,0,0) rotate(0deg)} 50%{background-position:100% 50%;transform:translate3d(2%,-1%,0) rotate(2deg)} 100%{background-position:0% 50%;transform:translate3d(-2%,0,0) rotate(0deg)} } @keyframes roomGameAdTextWave{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } @keyframes roomGameAdWobble{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg) skewX(0deg)} 14%{transform:translate3d(-1.5px,0,0) rotate(-1deg) skewX(-.8deg)} 28%{transform:translate3d(1.5px,-1px,0) rotate(.9deg) skewX(.6deg)} 42%{transform:translate3d(-1px,1px,0) rotate(-.6deg) skewX(.9deg)} 58%{transform:translate3d(1.2px,0,0) rotate(.8deg) skewX(-.7deg)} 72%{transform:translate3d(-1.2px,-1px,0) rotate(-.7deg) skewX(.5deg)} 86%{transform:translate3d(1px,1px,0) rotate(.5deg) skewX(-.5deg)} } @media (max-width: 560px){ .room-gamead-title{font-size:22px;} .room-gamead-sub{font-size:13px;} } @media (prefers-reduced-motion: reduce){ .room-gamead-glow,.room-gamead-title{animation:none !important;} } /* /ad v186 — colorful sponsor bubble */ .message.room-ad-message .message-bubble.room-ad-bubble{ position:relative; overflow:hidden; padding:13px 12px 12px; background:linear-gradient(180deg,rgba(23,24,58,.97),rgba(13,18,44,.98))!important; border:1px solid rgba(135,165,255,.30)!important; box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important; color:#fff!important; } .room-ad-glow{ position:absolute; inset:-38%; z-index:0; pointer-events:none; opacity:.25; filter:blur(28px); background:linear-gradient(115deg,#ff5a7b,#ff9f40,#ffe95a,#57ef9a,#46d4ff,#8178ff,#ff61dc,#ff5a7b); background-size:280% 280%; animation:roomAdRainbowWave 7s linear infinite; } .message.room-ad-message .room-ad-chat-text{ position:relative; z-index:1; margin:0 auto 9px; padding:2px 8px; width:max-content; max-width:100%; color:#fff!important; font-size:15px; font-weight:1000; line-height:1.3; letter-spacing:.025em; text-align:center; text-shadow:0 0 8px rgba(255,255,255,.18),0 0 16px rgba(111,185,255,.22); animation:roomAdBoredShake .52s steps(2,end) infinite; transform-origin:50% 58%; will-change:transform; } .message.room-ad-message .room-ad-card-head, .message.room-ad-message .room-ad-card-frame{ position:relative; z-index:1; } .message.room-ad-message .room-ad-card-head{ width:300px; max-width:100%; min-height:31px; margin:0 auto 8px; padding:0; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff!important; } .room-ad-title{ min-width:0; font-size:20px; line-height:1.1; font-weight:950; letter-spacing:.035em; background:linear-gradient(90deg,#fff6c8,#ffd2f5,#d9f5ff,#fff1ae,#ffd2f5,#fff6c8); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:roomAdRainbowText 3.8s linear infinite; filter:drop-shadow(0 0 8px rgba(255,255,255,.12)); } .message.room-ad-message .room-ad-card-label{ flex:0 0 auto; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.19); background:rgba(255,255,255,.14); color:#fff!important; font-size:11px; font-weight:900; letter-spacing:.06em; } @keyframes roomAdRainbowWave{ 0%{background-position:0% 50%;transform:translate3d(-2%,0,0) rotate(0deg)} 50%{background-position:100% 50%;transform:translate3d(2%,-1%,0) rotate(2deg)} 100%{background-position:0% 50%;transform:translate3d(-2%,0,0) rotate(0deg)} } @keyframes roomAdRainbowText{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } body.local-light main .message.room-ad-message .message-bubble.room-ad-bubble, body.local-light main .message.room-ad-message .room-ad-card-head, body.local-light main .message.room-ad-message .room-ad-card-head *{ color:#fff!important; } @media(prefers-reduced-motion:reduce){ .room-ad-glow,.room-ad-title,.room-ad-chat-text{animation:none!important} } /* /arasi v2 — optional recruitment + appeal cards */ .arasi-recruit-message{ width:min(100%,520px); margin:8px auto; box-sizing:border-box; } .arasi-recruit-card{ position:relative; overflow:hidden; border-radius:18px; padding:14px; color:#fff; background: radial-gradient(circle at 15% 0%,rgba(255,105,105,.24),transparent 34%), linear-gradient(145deg,#5f101d,#2c1018 72%); border:1px solid rgba(255,116,133,.46); box-shadow:0 10px 26px rgba(76,7,22,.28),inset 0 1px 0 rgba(255,255,255,.08); } .arasi-recruit-card::before{ content:""; position:absolute; inset:-70% -20%; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 47%,transparent 58%); animation:arasiRecruitSweep 4.8s linear infinite; pointer-events:none; } .arasi-recruit-card[data-phase="checking"]{ background:linear-gradient(145deg,#4b3210,#281d0d 72%); border-color:rgba(255,201,94,.46); } .arasi-recruit-card[data-phase="done"]{ background:linear-gradient(145deg,#252a35,#151821 72%); border-color:rgba(173,185,210,.30); } .arasi-recruit-title,.arasi-recruit-desc,.arasi-recruit-status,.arasi-recruit-join,.arasi-recruit-foot,.arasi-appeal-choices{ position:relative; z-index:1; } .arasi-recruit-title{font-size:17px;font-weight:900;letter-spacing:.01em;line-height:1.35} .arasi-recruit-desc{margin-top:7px;font-size:13px;line-height:1.55;color:rgba(255,241,244,.94)} .arasi-recruit-status{margin-top:10px;font-size:13px;font-weight:800;color:#fff} .arasi-recruit-foot{margin-top:8px;font-size:11px;line-height:1.45;color:rgba(255,225,231,.76)} .arasi-recruit-join{ width:100%; margin-top:11px; min-height:40px; border:1px solid rgba(255,255,255,.24)!important; border-radius:12px!important; background:rgba(255,255,255,.13)!important; color:#fff!important; font-weight:900!important; box-shadow:none!important; } .arasi-recruit-join:disabled{opacity:.58} .arasi-appeal-card{ background: radial-gradient(circle at 14% 0%,rgba(112,184,255,.22),transparent 35%), linear-gradient(145deg,#17345e,#101c34 72%); border-color:rgba(113,183,255,.46); } .arasi-appeal-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .arasi-appeal-choices[hidden]{display:none!important} .arasi-appeal-release,.arasi-appeal-keep{ min-height:40px;border-radius:12px!important;font-weight:900!important;box-shadow:none!important; } .arasi-appeal-release{border:1px solid rgba(116,232,173,.42)!important;background:rgba(38,150,94,.28)!important;color:#dcffec!important} .arasi-appeal-keep{border:1px solid rgba(255,149,160,.38)!important;background:rgba(145,45,60,.28)!important;color:#ffe2e6!important} .chat-ban-note{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .arasi-appeal-open{ border:1px solid rgba(255,255,255,.22)!important; border-radius:999px!important; padding:5px 10px!important; background:rgba(255,255,255,.10)!important; color:inherit!important; font-size:11px!important; font-weight:900!important; box-shadow:none!important; } body.local-light .arasi-recruit-card{ color:#4a1017!important; background:linear-gradient(145deg,#fff1f3,#ffe2e7 72%)!important; border-color:#ee9eaa!important; box-shadow:0 8px 22px rgba(126,40,55,.12)!important; } body.local-light .arasi-recruit-card[data-phase="checking"]{background:linear-gradient(145deg,#fff9e7,#fff0c6 72%)!important;border-color:#e6c46c!important;color:#49370e!important} body.local-light .arasi-recruit-card[data-phase="done"]{background:linear-gradient(145deg,#f4f6fa,#e9edf4 72%)!important;border-color:#cbd2df!important;color:#202735!important} body.local-light .arasi-appeal-card{background:linear-gradient(145deg,#edf6ff,#dceeff 72%)!important;border-color:#9cc8ee!important;color:#123459!important} body.local-light .arasi-recruit-desc,body.local-light .arasi-recruit-status,body.local-light .arasi-recruit-foot{color:inherit!important} body.local-light .arasi-recruit-foot{opacity:.72} body.local-light .arasi-recruit-join{background:rgba(255,255,255,.72)!important;color:inherit!important;border-color:rgba(67,73,91,.20)!important} body.local-light .arasi-appeal-release{background:#e7f8ef!important;color:#185c39!important;border-color:#a8d9bd!important} body.local-light .arasi-appeal-keep{background:#fff0f2!important;color:#7b2633!important;border-color:#e7b0b8!important} @keyframes arasiRecruitSweep{0%{transform:translateX(-35%) rotate(7deg)}100%{transform:translateX(35%) rotate(7deg)}} @media (max-width:420px){.arasi-recruit-message{width:100%}.arasi-recruit-card{border-radius:15px;padding:12px}.arasi-recruit-title{font-size:16px}} @media (prefers-reduced-motion:reduce){.arasi-recruit-card::before{animation:none!important}} /* Profile notification launcher: /notificationSettings への入口に統一 */ #notificationToggleBtn{ cursor:pointer; } #notificationToggleBtn::after{ content:"›"; margin-left:auto; font-size:1.25em; line-height:1; opacity:.72; } #notificationToggleBtn{ display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; } /* /satoruaniki — random YouTube bubble */ .satoru-aniki-message .message-bubble.satoru-aniki-bubble{ overflow:hidden; padding:12px; border-radius:20px; background:linear-gradient(145deg,rgba(30,35,48,.96),rgba(15,18,27,.98)); border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.22); } .satoru-aniki-intro{ font-weight:800; font-size:15px; line-height:1.45; margin:0 0 9px; color:inherit; overflow-wrap:anywhere; } .satoru-aniki-frame-wrap{ width:min(100%,420px); aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#000; box-shadow:0 4px 14px rgba(0,0,0,.24); } .satoru-aniki-frame-wrap iframe{ display:block; width:100%; height:100%; border:0; } body.local-light .satoru-aniki-message .message-bubble.satoru-aniki-bubble{ background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,245,251,.98)) !important; border-color:rgba(20,30,45,.12) !important; color:#17202b !important; } @media(max-width:560px){ .satoru-aniki-message .message-bubble.satoru-aniki-bubble{padding:10px;} .satoru-aniki-intro{font-size:14px;} } /* /dvd — classic bouncing DVD logo */ .for314-dvd-logo{ position:fixed; left:0; top:0; z-index:10880; width:clamp(92px,14vw,150px); height:auto; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; will-change:transform; opacity:.97; --for314-dvd-hue:0deg; filter:invert(72%) sepia(100%) saturate(5200%) hue-rotate(var(--for314-dvd-hue)) brightness(118%) contrast(112%) drop-shadow(0 0 5px rgba(255,255,255,.22)); mix-blend-mode:normal; transition:filter .08s linear; } @media(max-width:420px){.for314-dvd-logo{width:96px}} /* glitch:TEXT — broken-TV style text bubble */ .for314-glitch-message .message-bubble.for314-glitch-bubble{ position:relative; overflow:hidden; isolation:isolate; background:#090b10 !important; color:#f5f7ff !important; border:1px solid rgba(235,242,255,.20) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.32) inset, -3px 0 12px rgba(255,30,75,.14), 3px 0 12px rgba(0,218,255,.14) !important; } .for314-glitch-scan{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.18; background: repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px), linear-gradient(90deg,rgba(255,20,70,.06),transparent 35%,rgba(0,220,255,.07)); animation:for314GlitchScan .72s steps(2,end) infinite; } .for314-glitch-text{ position:relative; z-index:1; display:inline-block; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; color:#f7f8ff !important; font-weight:800; letter-spacing:.025em; text-shadow:1px 0 rgba(255,45,75,.58),-1px 0 rgba(0,220,255,.58); animation:for314GlitchMain 1.25s steps(1,end) infinite; } .for314-glitch-text::before, .for314-glitch-text::after{ content:attr(data-text); position:absolute; inset:0; width:100%; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; pointer-events:none; color:#f7f8ff; background:#090b10; } .for314-glitch-text::before{ transform:translateX(-2px); text-shadow:3px 0 #00dfff; clip-path:inset(7% 0 68% 0); animation:for314GlitchCutA .88s steps(1,end) infinite alternate-reverse; } .for314-glitch-text::after{ transform:translateX(2px); text-shadow:-3px 0 #ff315e; clip-path:inset(62% 0 11% 0); animation:for314GlitchCutB 1.08s steps(1,end) infinite alternate-reverse; } @keyframes for314GlitchMain{ 0%,84%,100%{transform:translate(0,0)} 85%{transform:translate(-1px,1px)} 87%{transform:translate(2px,-1px)} 89%{transform:translate(-1px,0)} 91%{transform:translate(0,0)} } @keyframes for314GlitchCutA{ 0%{clip-path:inset(4% 0 78% 0);transform:translateX(-3px)} 14%{clip-path:inset(46% 0 38% 0);transform:translateX(2px)} 31%{clip-path:inset(71% 0 8% 0);transform:translateX(-4px)} 48%{clip-path:inset(22% 0 57% 0);transform:translateX(3px)} 66%{clip-path:inset(81% 0 2% 0);transform:translateX(-2px)} 84%{clip-path:inset(35% 0 48% 0);transform:translateX(4px)} 100%{clip-path:inset(9% 0 69% 0);transform:translateX(-2px)} } @keyframes for314GlitchCutB{ 0%{clip-path:inset(68% 0 13% 0);transform:translateX(3px)} 18%{clip-path:inset(16% 0 67% 0);transform:translateX(-3px)} 37%{clip-path:inset(53% 0 25% 0);transform:translateX(5px)} 55%{clip-path:inset(2% 0 83% 0);transform:translateX(-2px)} 73%{clip-path:inset(77% 0 5% 0);transform:translateX(3px)} 91%{clip-path:inset(39% 0 43% 0);transform:translateX(-4px)} 100%{clip-path:inset(61% 0 18% 0);transform:translateX(2px)} } @keyframes for314GlitchScan{ 0%{transform:translateY(-2px);opacity:.15} 50%{transform:translateY(2px);opacity:.23} 100%{transform:translateY(0);opacity:.17} } body.local-light .for314-glitch-message .message-bubble.for314-glitch-bubble{ background:#090b10 !important; color:#f5f7ff !important; } @media (prefers-reduced-motion:reduce){ .for314-glitch-scan,.for314-glitch-text,.for314-glitch-text::before,.for314-glitch-text::after{animation:none !important} } /* /satorufish — admin YouTube channel card */ .satorufish-channel-message .message-bubble.satorufish-channel-bubble{ padding:0 !important; overflow:hidden; background:linear-gradient(145deg,rgba(20,24,34,.98),rgba(12,15,23,.98)) !important; border:1px solid rgba(255,255,255,.13) !important; box-shadow:0 10px 30px rgba(0,0,0,.24) !important; } .satorufish-channel-link{ display:flex; align-items:stretch; width:min(430px,82vw); max-width:100%; color:inherit; text-decoration:none; overflow:hidden; border-radius:inherit; -webkit-tap-highlight-color:transparent; } .satorufish-channel-image{ width:138px; min-width:138px; aspect-ratio:1/1; object-fit:cover; display:block; background:#ffef00; } .satorufish-channel-body{ min-width:0; flex:1; padding:15px 16px; display:flex; flex-direction:column; justify-content:center; gap:5px; } .satorufish-channel-eyebrow{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.06em; color:#fff; background:#ff0033; border-radius:999px; padding:4px 8px; } .satorufish-channel-title{ font-size:22px; line-height:1.12; font-weight:900; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .satorufish-channel-intro{ font-size:13px; line-height:1.5; color:rgba(235,240,250,.82); } .satorufish-channel-action{ margin-top:5px; font-size:13px; font-weight:800; color:#ff6680; } .satorufish-channel-link:active{transform:scale(.992)} body.local-light .satorufish-channel-message .message-bubble.satorufish-channel-bubble{ background:linear-gradient(145deg,#fff,#f5f7fb) !important; border-color:rgba(17,24,39,.12) !important; } body.local-light .satorufish-channel-title{color:#111827} body.local-light .satorufish-channel-intro{color:#5b6472} body.local-light .satorufish-channel-action{color:#d9002f} @media(max-width:520px){ .satorufish-channel-link{width:min(390px,86vw)} .satorufish-channel-image{width:112px;min-width:112px} .satorufish-channel-body{padding:12px 13px} .satorufish-channel-title{font-size:19px} } @media(max-width:360px){ .satorufish-channel-link{width:min(320px,88vw)} .satorufish-channel-image{width:92px;min-width:92px} .satorufish-channel-title{font-size:17px} .satorufish-channel-intro{font-size:12px} } /* v201: /satorufish light-mode text contrast fix. Override the older LIGHT v6 universal `.message-bubble * { color:#fff !important; }`. */ body.local-light main .satorufish-channel-message .message-bubble.satorufish-channel-bubble .satorufish-channel-title{ color:#111827 !important; -webkit-text-fill-color:#111827 !important; } body.local-light main .satorufish-channel-message .message-bubble.satorufish-channel-bubble .satorufish-channel-intro{ color:#5b6472 !important; -webkit-text-fill-color:#5b6472 !important; } body.local-light main .satorufish-channel-message .message-bubble.satorufish-channel-bubble .satorufish-channel-action{ color:#d9002f !important; -webkit-text-fill-color:#d9002f !important; } body.local-light main .satorufish-channel-message .message-bubble.satorufish-channel-bubble .satorufish-channel-eyebrow{ color:#fff !important; -webkit-text-fill-color:#fff !important; } /* ===== Reply SVG + persistent reply target v202 ===== */ .for314-reply-svg-icon{ width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; flex:0 0 16px !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:2.15 !important; stroke-linecap:round !important; stroke-linejoin:round !important; overflow:visible !important; } .for314-reply-label-text, .for314-reply-quote-name-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .for314-reply-composer-label{ display:flex!important; align-items:center!important; gap:5px!important; } .for314-reply-action-button{ display:flex!important; align-items:center!important; gap:7px!important; } .message.for314-reply-message .for314-reply-quote-name{ display:flex!important; align-items:center!important; gap:5px!important; } .message.for314-reply-message .for314-reply-quote-name .for314-reply-svg-icon{ width:12px!important;height:12px!important; min-width:12px!important;min-height:12px!important; max-width:12px!important;max-height:12px!important; flex-basis:12px!important; } .for314-swipe-reply-indicator .for314-reply-svg-icon{ width:21px!important;height:21px!important; min-width:21px!important;min-height:21px!important; max-width:21px!important;max-height:21px!important; flex-basis:21px!important; } .for314-reply-composer-label .for314-reply-svg-icon{ width:13px!important;height:13px!important; min-width:13px!important;min-height:13px!important; max-width:13px!important;max-height:13px!important; flex-basis:13px!important; } .for314-reply-action-button .for314-reply-svg-icon{ width:17px!important;height:17px!important; min-width:17px!important;min-height:17px!important; max-width:17px!important;max-height:17px!important; flex-basis:17px!important; } /* v219: soft breathing glow — border stays still, only the light breathes */ @keyframes for314ComposerGlowPulse{ 0%,100%{ opacity:.44; transform:scale(.975); filter:blur(12px); } 50%{ opacity:.92; transform:scale(1.025); filter:blur(18px); } } @keyframes for314SendGlowPulse{ 0%,100%{ opacity:.48; transform:scale(.92); } 50%{ opacity:.96; transform:scale(1.08); } } main .inputrow{ position:relative; overflow:visible!important; isolation:isolate; } main .inputrow::before, main .inputrow::after{ content:""; position:absolute; pointer-events:none; border-radius:999px; z-index:-1; } /* Main glow: no outline / no ring. A blurred light layer alone expands and contracts. */ main .inputrow::before{ inset:-10px -13px; background:radial-gradient( ellipse at 50% 50%, rgba(100,166,255,.34) 0%, rgba(79,145,255,.22) 42%, rgba(65,126,255,.09) 64%, rgba(65,126,255,0) 82% ); box-shadow:none!important; transform-origin:center; animation:for314ComposerGlowPulse 3.4s ease-in-out infinite; will-change:opacity,transform,filter; } /* A quiet under-glow keeps the composer grounded without drawing a second border. */ main .inputrow::after{ left:8%; right:5%; bottom:-11px; height:28px; background:radial-gradient( ellipse at center, rgba(80,151,255,.24) 0%, rgba(72,139,255,.10) 45%, rgba(72,139,255,0) 78% ); filter:blur(13px); opacity:.66; } main .inputrow:focus-within::before{ background:radial-gradient( ellipse at 50% 50%, rgba(118,187,255,.42) 0%, rgba(88,157,255,.28) 43%, rgba(69,135,255,.12) 65%, rgba(69,135,255,0) 83% ); } main .inputrow #sendBtn{ position:relative; isolation:isolate; overflow:visible!important; } main .inputrow #sendBtn::before{ content:""; position:absolute; inset:-13px; z-index:-1; border-radius:50%; background:radial-gradient( circle at 50% 50%, rgba(124,193,255,.48) 0%, rgba(81,147,255,.25) 40%, rgba(66,126,255,.08) 63%, rgba(66,126,255,0) 80% ); filter:blur(11px); opacity:.78; transform-origin:center; animation:for314SendGlowPulse 2.5s ease-in-out infinite; will-change:opacity,transform; } /* Keep the button itself crisp; remove the animated-looking outer ring. */ main .inputrow #sendBtn{ box-shadow: 0 7px 18px rgba(49,93,168,.34), 0 0 15px rgba(80,151,255,.18), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(17,44,89,.40)!important; } main .inputrow #sendBtn:hover{ box-shadow: 0 9px 20px rgba(49,93,168,.38), 0 0 18px rgba(98,170,255,.24), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(17,44,89,.44)!important; } body.local-light main .inputrow::before{ background:radial-gradient( ellipse at 50% 50%, rgba(39,49,65,.20) 0%, rgba(26,34,47,.12) 44%, rgba(17,24,39,.05) 66%, rgba(17,24,39,0) 83% ); } body.local-light main .inputrow::after{ background:radial-gradient( ellipse at center, rgba(38,48,63,.13) 0%, rgba(27,36,49,.06) 46%, rgba(17,24,39,0) 79% ); } body.local-light main .inputrow:focus-within::before{ background:radial-gradient( ellipse at 50% 50%, rgba(42,54,72,.25) 0%, rgba(29,39,54,.15) 44%, rgba(17,24,39,.07) 66%, rgba(17,24,39,0) 83% ); } body.local-light main .inputrow #sendBtn::before{ background:radial-gradient( circle at 50% 50%, rgba(46,57,75,.25) 0%, rgba(31,41,55,.13) 42%, rgba(17,24,39,.05) 64%, rgba(17,24,39,0) 80% ); } body.local-light main .inputrow #sendBtn{ box-shadow: 0 7px 17px rgba(17,24,39,.16), 0 0 12px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(28,71,144,.28)!important; } @media (prefers-reduced-motion: reduce){ main .inputrow::before, main .inputrow #sendBtn::before{ animation:none!important; transform:none!important; } } /* ===== Reply SVG + theme stability v205 ===== */ /* Swipe reply indicator: never inherit giant/default SVG sizing. */ main .message[data-message-id] .for314-swipe-reply-indicator{ box-sizing:border-box!important; width:38px!important; height:38px!important; left:-43px!important; margin-top:-19px!important; border:1px solid rgba(133,177,255,.22)!important; background:rgba(22,32,48,.92)!important; color:#9fc3ff!important; -webkit-text-fill-color:#9fc3ff!important; box-shadow:0 7px 18px rgba(0,0,0,.24)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; overflow:hidden!important; } main .message[data-message-id] .for314-swipe-reply-indicator .for314-reply-svg-icon{ width:21px!important;height:21px!important; min-width:21px!important;min-height:21px!important; max-width:21px!important;max-height:21px!important; flex:0 0 21px!important; color:inherit!important; stroke:currentColor!important; } body.local-light main .message[data-message-id] .for314-swipe-reply-indicator{ border-color:rgba(43,72,112,.16)!important; background:rgba(250,252,255,.96)!important; color:#294f8c!important; -webkit-text-fill-color:#294f8c!important; box-shadow:0 7px 18px rgba(43,61,80,.15)!important; } body.local-dark main .message[data-message-id] .for314-swipe-reply-indicator{ border-color:rgba(133,177,255,.22)!important; background:rgba(22,32,48,.92)!important; color:#9fc3ff!important; -webkit-text-fill-color:#9fc3ff!important; } /* Reply quote card: explicit colors for both themes, including own messages. */ body.local-dark main .message.for314-reply-message .message-bubble .for314-reply-quote-card{ background:rgba(255,255,255,.055)!important; border-left-color:#6f9fe9!important; color:#c7d3e2!important; -webkit-text-fill-color:#c7d3e2!important; } body.local-dark main .message.for314-reply-message .message-bubble .for314-reply-quote-name{ color:#9fc3ff!important; -webkit-text-fill-color:#9fc3ff!important; } body.local-dark main .message.for314-reply-message .message-bubble .for314-reply-quote-text{ color:#b5c1d0!important; -webkit-text-fill-color:#b5c1d0!important; opacity:.94!important; } body.local-dark main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-card{ background:rgba(0,0,0,.14)!important; border-left-color:rgba(255,255,255,.78)!important; } body.local-dark main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-name{ color:#fff!important; -webkit-text-fill-color:#fff!important; } body.local-dark main .message.for314-reply-message .message-bubble .for314-reply-body{ color:#eef3fa!important; -webkit-text-fill-color:#eef3fa!important; } body.local-light main .message.for314-reply-message .message-bubble .for314-reply-quote-card{ background:rgba(48,72,104,.055)!important; border-left-color:#557fbf!important; color:#445568!important; -webkit-text-fill-color:#445568!important; } body.local-light main .message.for314-reply-message .message-bubble .for314-reply-quote-name{ color:#2d568f!important; -webkit-text-fill-color:#2d568f!important; } body.local-light main .message.for314-reply-message .message-bubble .for314-reply-quote-text{ color:#536477!important; -webkit-text-fill-color:#536477!important; opacity:.96!important; } body.local-light main .message.for314-reply-message .message-bubble .for314-reply-body{ color:#17212b!important; -webkit-text-fill-color:#17212b!important; } body.local-light main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-card{ background:rgba(48,72,104,.07)!important; border-left-color:#4e78b7!important; } body.local-light main .message.mine.for314-reply-message .message-bubble .for314-reply-quote-name{ color:#274f88!important; -webkit-text-fill-color:#274f88!important; } /* Composer reply preview and reply action menu. */ body.local-dark .for314-reply-composer-preview, body.local-dark .for314-reply-action-menu{ background:rgba(18,27,40,.96)!important; border-color:rgba(151,180,220,.16)!important; color:#eaf1fb!important; -webkit-text-fill-color:#eaf1fb!important; } body.local-dark .for314-reply-composer-label{ color:#9fc3ff!important; -webkit-text-fill-color:#9fc3ff!important; } body.local-dark .for314-reply-composer-quote, body.local-dark .for314-reply-action-info{ color:#bac6d5!important; -webkit-text-fill-color:#bac6d5!important; opacity:.92!important; } body.local-dark .for314-reply-action-button{ background:rgba(91,137,207,.16)!important; color:#dceaff!important; -webkit-text-fill-color:#dceaff!important; } body.local-light .for314-reply-composer-preview, body.local-light .for314-reply-action-menu{ background:rgba(250,252,255,.98)!important; border-color:rgba(72,88,110,.15)!important; color:#17212b!important; -webkit-text-fill-color:#17212b!important; } body.local-light .for314-reply-composer-label{ color:#315da8!important; -webkit-text-fill-color:#315da8!important; } body.local-light .for314-reply-composer-quote, body.local-light .for314-reply-action-info{ color:#536477!important; -webkit-text-fill-color:#536477!important; opacity:.95!important; } body.local-light .for314-reply-action-button{ background:rgba(58,110,200,.09)!important; color:#244d8f!important; -webkit-text-fill-color:#244d8f!important; } /* Keep SVG stroke theme-aware everywhere. */ .for314-reply-svg-icon, body.local-light .for314-reply-svg-icon, body.local-dark .for314-reply-svg-icon{ fill:none!important; stroke:currentColor!important; } /* v210: keyboard continuity / no chatlog clipping キーボード中もchatlog自体は画面最下部まで維持する。 入力バーより下の履歴を切り落とさず、末尾スペーサーだけ動的に増やして 最後のメッセージを入力欄より上までスクロールできるようにする。 */ :root{ --for314-composer-keyboard-lift:0px; --for314-keyboard-inset:0px; --for314-keyboard-scroll-reserve:0px; } main .inputrow{ bottom:calc(var(--for314-ad-safe-gap,0px) + env(safe-area-inset-bottom) + var(--for314-composer-keyboard-lift,0px))!important; transition:none!important; } main .inputrow .for314-reply-composer-preview{ max-height:min(86px,22dvh); } body.for314-keyboard-open main .inputrow{ transition:none!important; } body.for314-keyboard-open main .chatlog{ bottom:0!important; overflow-y:auto!important; overscroll-behavior-y:contain!important; touch-action:pan-y!important; -webkit-overflow-scrolling:touch!important; scroll-padding-bottom:var(--for314-keyboard-scroll-reserve)!important; } body.for314-keyboard-open main .chatlog::after{ flex-basis:var(--for314-keyboard-scroll-reserve)!important; min-height:var(--for314-keyboard-scroll-reserve)!important; } @media(prefers-reduced-motion:reduce){ main .inputrow{transition:none!important} } /* /onlg shared 3D walking field */ .onlg-card{ width:min(480px,calc(100% - 12px));margin:8px auto;padding:12px; border:1px solid rgba(100,145,118,.24);border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#fff) 94%,#dff2d9 6%),color-mix(in srgb,var(--panel,#fff) 97%,transparent)); box-shadow:0 10px 30px rgba(31,76,48,.11);color:var(--text,#151821) } .onlg-card-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.onlg-card-head strong{font-size:14px;font-weight:900}.onlg-card-badge{padding:3px 9px;border-radius:999px;background:rgba(74,144,92,.12);font-size:10px;font-weight:900}.onlg-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750;color:var(--muted,var(--sub,#6b7280))}.onlg-card-transport{margin-top:4px;font-size:9px;line-height:1.4;opacity:.64;font-weight:700}.onlg-card-action{width:100%;min-height:40px;margin-top:10px;border:0;border-radius:12px;background:#2f7250;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer;-webkit-appearance:none;appearance:none}.onlg-card-action:disabled{opacity:.48;cursor:default} .onlg-backdrop{position:fixed;inset:0;z-index:2147483400;background:#b5d9d5;opacity:0;pointer-events:none;transition:opacity .15s ease}.onlg-backdrop.open{opacity:1;pointer-events:auto}.onlg-frame{display:block;width:100%;height:100%;border:0;background:#b5d9d5} body.local-light .onlg-card-action{background:#2f7250!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.local-dark .onlg-card-action{background:#67b98c!important;color:#10251a!important;-webkit-text-fill-color:#10251a!important} @media(max-width:390px){.onlg-card{padding:10px;border-radius:15px}.onlg-card-head strong{font-size:12px}.onlg-card-desc{font-size:10px}.onlg-card-action{min-height:38px}} @media(prefers-reduced-motion:reduce){.onlg-backdrop{transition:none!important}} /* /train shared TRAIN WALK */ .train-card{width:min(500px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(43,115,128,.26);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#fff) 94%,#d9f0ef 6%),color-mix(in srgb,var(--panel,#fff) 97%,transparent));box-shadow:0 10px 30px rgba(20,79,88,.12);color:var(--text,#151821)} .train-card-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.train-card-head strong{font-size:14px;font-weight:900}.train-card-badge{padding:3px 9px;border-radius:999px;background:rgba(43,115,128,.12);font-size:10px;font-weight:900}.train-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750;color:var(--muted,var(--sub,#6b7280))}.train-card-transport{margin-top:5px;font-size:9px;line-height:1.4;opacity:.64;font-weight:700}.train-card-action{width:100%;min-height:40px;margin-top:10px;border:0;border-radius:12px;background:#2c727d;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer;-webkit-appearance:none;appearance:none}.train-card-action:disabled{opacity:.48;cursor:default}.train-backdrop{position:fixed;inset:0;z-index:2147483430;background:#101b21;opacity:0;pointer-events:none;transition:opacity .15s ease}.train-backdrop.open{opacity:1;pointer-events:auto}.train-frame{display:block;width:100%;height:100%;border:0;background:#101b21}body.local-light .train-card-action{background:#2c727d!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.local-dark .train-card-action{background:#7cc7cc!important;color:#0d2528!important;-webkit-text-fill-color:#0d2528!important}@media(max-width:390px){.train-card{padding:10px;border-radius:15px}.train-card-head strong{font-size:12px}.train-card-desc{font-size:10px}.train-card-action{min-height:38px}}@media(prefers-reduced-motion:reduce){.train-backdrop{transition:none!important}} /* /pcimp shared PC destruction */ .pcimp-card{width:min(480px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(186,82,70,.24);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#fff) 94%,#ffe1dc 6%),color-mix(in srgb,var(--panel,#fff) 97%,transparent));box-shadow:0 10px 30px rgba(111,39,32,.11);color:var(--text,#151821)} .pcimp-card-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.pcimp-card-head strong{font-size:14px;font-weight:900}.pcimp-card-badge{padding:3px 9px;border-radius:999px;background:rgba(200,74,60,.12);font-size:10px;font-weight:900}.pcimp-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750;color:var(--muted,var(--sub,#6b7280))}.pcimp-card-transport{margin-top:4px;font-size:9px;line-height:1.4;opacity:.64;font-weight:700}.pcimp-card-action{width:100%;min-height:40px;margin-top:10px;border:0;border-radius:12px;background:#a43e34;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer;-webkit-appearance:none;appearance:none}.pcimp-card-action:disabled{opacity:.48;cursor:default}.pcimp-backdrop{position:fixed;inset:0;z-index:2147483410;background:#0b1018;opacity:0;pointer-events:none;transition:opacity .15s ease}.pcimp-backdrop.open{opacity:1;pointer-events:auto}.pcimp-frame{display:block;width:100%;height:100%;border:0;background:#0b1018}body.local-light .pcimp-card-action{background:#a43e34!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.local-dark .pcimp-card-action{background:#e77c70!important;color:#24110e!important;-webkit-text-fill-color:#24110e!important}@media(max-width:390px){.pcimp-card{padding:10px;border-radius:15px}.pcimp-card-head strong{font-size:12px}.pcimp-card-desc{font-size:10px}.pcimp-card-action{min-height:38px}}@media(prefers-reduced-motion:reduce){.pcimp-backdrop{transition:none!important}} /* /fpsgame shared multiplayer FPS */ .fpsgame-card{width:min(500px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(63,104,150,.26);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#fff) 94%,#dcecff 6%),color-mix(in srgb,var(--panel,#fff) 97%,transparent));box-shadow:0 10px 30px rgba(30,65,100,.12);color:var(--text,#151821)} .fpsgame-card-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.fpsgame-card-head strong{font-size:14px;font-weight:900}.fpsgame-card-badge{padding:3px 9px;border-radius:999px;background:rgba(59,113,169,.12);font-size:10px;font-weight:900}.fpsgame-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750;color:var(--muted,var(--sub,#6b7280))}.fpsgame-card-transport{margin-top:5px;font-size:9px;line-height:1.4;opacity:.64;font-weight:700}.fpsgame-card-scores{margin-top:8px;padding:7px 9px;border-radius:11px;background:color-mix(in srgb,var(--panel,#fff) 90%,#5e91c5 10%);font-size:10px}.fpsgame-score-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0}.fpsgame-score-line b{font-size:9px;white-space:nowrap}.fpsgame-card-action{width:100%;min-height:40px;margin-top:10px;border:0;border-radius:12px;background:#326a9d;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer;-webkit-appearance:none;appearance:none}.fpsgame-card-action:disabled{opacity:.48;cursor:default}.fpsgame-backdrop{position:fixed;inset:0;z-index:2147483420;background:#071017;opacity:0;pointer-events:none;transition:opacity .15s ease}.fpsgame-backdrop.open{opacity:1;pointer-events:auto}.fpsgame-frame{display:block;width:100%;height:100%;border:0;background:#071017}body.local-light .fpsgame-card-action{background:#326a9d!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.local-dark .fpsgame-card-action{background:#79b3e9!important;color:#0e2336!important;-webkit-text-fill-color:#0e2336!important}@media(max-width:390px){.fpsgame-card{padding:10px;border-radius:15px}.fpsgame-card-head strong{font-size:12px}.fpsgame-card-desc{font-size:10px}.fpsgame-card-action{min-height:38px}}@media(prefers-reduced-motion:reduce){.fpsgame-backdrop{transition:none!important}} /* ===== FOR314 message like v241 ===== */ .for314-reply-action-menu .for314-like-action-button{ width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px; min-height:36px;padding:7px 10px;border:0;border-radius:10px;background:transparent; color:inherit;font:inherit;font-weight:800;cursor:pointer;text-align:left; } .for314-reply-action-menu .for314-like-action-button:hover, .for314-reply-action-menu .for314-like-action-button:focus-visible{background:rgba(104,155,255,.13);outline:none} .for314-like-svg-icon{width:18px;height:18px;display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round} .for314-like-action-button.is-liked .for314-like-svg-icon, .for314-like-reaction.is-mine .for314-like-svg-icon{fill:currentColor;stroke:currentColor} .for314-like-reaction{ appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:4px; width:max-content;min-width:38px;height:25px;margin-top:4px;padding:2px 8px; border:1px solid rgba(148,174,216,.22);border-radius:999px; background:rgba(255,255,255,.065);color:#a9bedf;cursor:pointer; font:700 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:none;transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease; } .for314-like-reaction:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)} .for314-like-reaction:active{transform:scale(.96)} .for314-like-reaction.is-mine{color:#73a7ff;background:rgba(83,137,238,.15);border-color:rgba(83,137,238,.34)} .for314-like-reaction .for314-like-reaction-svg{width:15px;height:15px} .for314-like-reaction-count{min-width:8px;text-align:center} body.local-light .for314-like-reaction{background:rgba(48,73,105,.055);border-color:rgba(48,73,105,.14);color:#64758a} body.local-light .for314-like-reaction.is-mine{background:rgba(49,93,168,.10);border-color:rgba(49,93,168,.24);color:#315da8} body.local-light .for314-reply-action-menu .for314-like-action-button{color:#244d8f;-webkit-text-fill-color:#244d8f} @media(max-width:520px){.for314-like-reaction{height:23px;padding:2px 7px;font-size:10px}.for314-like-reaction .for314-like-reaction-svg{width:14px;height:14px}} /* ========================================================= /ad v243 — Five-card Cover Flow inside one chat bubble The center ad is clickable; side cards are visual/navigation cards. ========================================================= */ .message.room-ad-message.with-avatar{ width:min(410px,97%); max-width:97%; } .message.room-ad-message .message-content{ width:min(360px,calc(100vw - 58px)); } .message.room-ad-message .message-bubble.room-ad-bubble{ padding:12px 7px 11px; overflow:hidden; } .message.room-ad-message .room-ad-card-head{ width:334px; max-width:100%; margin-bottom:5px; } .room-ad-coverflow{ position:relative; z-index:1; width:334px; max-width:100%; margin:0 auto; outline:none; user-select:none; -webkit-user-select:none; touch-action:pan-y; } .room-ad-coverflow:focus-visible{ border-radius:16px; box-shadow:0 0 0 2px rgba(126,180,255,.68); } .room-ad-coverflow-stage{ position:relative; width:100%; height:270px; perspective:980px; perspective-origin:50% 42%; overflow:visible; transform-style:preserve-3d; touch-action:pan-y; cursor:grab; } .room-ad-coverflow.is-dragging .room-ad-coverflow-stage{cursor:grabbing} .room-ad-coverflow-stage::before{ content:""; position:absolute; left:2%;right:2%;bottom:3px; height:47px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(80,129,255,.27),rgba(10,14,34,0) 70%); filter:blur(9px); pointer-events:none; } .room-ad-coverflow-card{ --coverflow-x:0px; --coverflow-z:0px; --coverflow-ry:0deg; --coverflow-scale:1; --coverflow-opacity:1; --coverflow-shade:.2; position:absolute; left:50%; top:0; width:300px; height:250px; margin-left:-150px; border-radius:12px; overflow:hidden; transform-style:preserve-3d; transform:translate3d(var(--coverflow-x),0,var(--coverflow-z)) rotateY(var(--coverflow-ry)) scale(var(--coverflow-scale)); transform-origin:50% 50%; opacity:var(--coverflow-opacity); transition:box-shadow .2s ease,filter .2s ease; box-shadow: 0 16px 30px rgba(0,0,0,.31), 0 4px 10px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.10); filter:saturate(.72) brightness(.78); will-change:transform,opacity; pointer-events:none; -webkit-box-reflect:below 7px linear-gradient(to bottom,transparent 57%,rgba(255,255,255,.055) 82%,rgba(255,255,255,.13)); } .room-ad-coverflow-card.is-active{ filter:saturate(1) brightness(1); pointer-events:auto; box-shadow: 0 20px 38px rgba(0,0,0,.39), 0 5px 12px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.16), 0 0 24px rgba(92,134,255,.12); } .room-ad-coverflow-card::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 22px rgba(25,34,72,.16); } .room-ad-coverflow-shade{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--coverflow-shade); background:linear-gradient(90deg,rgba(1,4,15,.76),rgba(1,4,15,.04) 44%,rgba(1,4,15,.04) 56%,rgba(1,4,15,.76)); } .room-ad-coverflow-card.is-active .room-ad-coverflow-shade{opacity:0} .room-ad-coverflow .room-ad-card-frame{ position:relative!important; z-index:1!important; display:block; width:300px!important; height:250px!important; max-width:none!important; margin:0!important; border:0; border-radius:12px; overflow:hidden; background:transparent; } .room-ad-coverflow.is-shared-moving .room-ad-coverflow-stage::before{ background:radial-gradient(ellipse at center,rgba(108,161,255,.55),rgba(10,14,34,0) 72%); filter:blur(11px); } .room-ad-coverflow.is-shared-moving .room-ad-coverflow-card.is-active{ box-shadow: 0 22px 42px rgba(0,0,0,.40), 0 5px 12px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.18), 0 0 31px rgba(103,154,255,.30); } .room-ad-coverflow-dots{ position:relative; z-index:120; width:min(220px,72%); min-height:34px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:9px; padding:5px 14px; border-radius:999px; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; -webkit-tap-highlight-color:transparent; } .room-ad-coverflow-dots:active{cursor:grabbing} .room-ad-coverflow-dot{ appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; } .room-ad-coverflow-dot>span{ display:block; width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.30); transition:width .18s ease,background .18s ease,transform .18s ease; pointer-events:none; } .room-ad-coverflow-dot.is-active>span{ width:17px; background:rgba(255,255,255,.84); } .room-ad-coverflow-dot:focus-visible{ outline:2px solid rgba(172,205,255,.92); outline-offset:0; } @media(max-width:380px){ .message.room-ad-message .message-content{width:calc(100vw - 52px)} .message.room-ad-message .message-bubble.room-ad-bubble{padding-left:4px;padding-right:4px} .room-ad-coverflow{width:322px} .room-ad-coverflow-stage{height:258px;transform:scale(.965);transform-origin:50% 0} } @media(prefers-reduced-motion:reduce){ .room-ad-coverflow-card{transition:none!important} } /* v258 — sponsor card header actions (information button removed) */ .room-ad-head-actions{ flex:0 0 auto; display:flex; align-items:center; gap:6px; } .message.room-auto-ad-message{ width:min(360px,calc(100% - 12px)); max-width:min(360px,calc(100% - 12px)); margin:10px auto; justify-content:center; } .message.room-auto-ad-message .message-content{ width:100%; max-width:100%; } .message.room-auto-ad-message .message-bubble.room-ad-bubble{ width:100%; max-width:100%; padding:7px 6px 8px; border-radius:17px; } .message.room-auto-ad-message .room-ad-card-head{ width:330px; max-width:calc(100% - 4px); min-height:27px; margin:0 auto 3px; } .message.room-auto-ad-message .room-ad-title{ font-size:13px; letter-spacing:.045em; } .message.room-auto-ad-message .room-ad-card-label{ padding:3px 8px; font-size:9px; } .message.room-auto-ad-message .room-ad-chat-text{display:none!important} .room-ad-coverflow.is-inline-banner{ width:340px; max-width:100%; } .room-ad-coverflow.is-inline-banner .room-ad-coverflow-stage{ height:270px; perspective:980px; perspective-origin:50% 42%; } .room-ad-coverflow.is-inline-banner .room-ad-coverflow-stage::before{ left:2%;right:2%;bottom:3px;height:47px; filter:blur(9px); opacity:.82; } .room-ad-coverflow.is-inline-banner .room-ad-coverflow-card{ width:320px; height:250px; margin-left:-160px; border-radius:12px; box-shadow:0 16px 30px rgba(0,0,0,.31),0 4px 10px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.10); -webkit-box-reflect:below 7px linear-gradient(to bottom,transparent 57%,rgba(255,255,255,.055) 82%,rgba(255,255,255,.13)); } .room-ad-coverflow.is-inline-banner .room-ad-coverflow-card.is-active{ box-shadow:0 20px 38px rgba(0,0,0,.39),0 5px 12px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.16),0 0 24px rgba(92,134,255,.12); } .room-ad-coverflow.is-inline-banner .room-ad-card-frame{ width:320px!important; height:250px!important; border-radius:12px; } .room-ad-coverflow.is-inline-banner .room-ad-slot-placeholder{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); color:rgba(255,255,255,.34); font-size:24px; font-weight:500; line-height:1; pointer-events:none; } .room-ad-coverflow.is-inline-banner .room-ad-slot-placeholder[hidden]{display:none} .room-ad-coverflow.is-inline-banner .room-ad-coverflow-dots{ width:min(190px,62%); min-height:31px; margin-top:0; gap:8px; padding-top:4px; padding-bottom:4px; } .room-ad-coverflow.is-inline-banner .room-ad-coverflow-dot{width:21px;height:21px} .room-ad-coverflow.is-inline-banner .room-ad-coverflow-dot>span{width:5px;height:5px} .room-ad-coverflow.is-inline-banner .room-ad-coverflow-dot.is-active>span{width:15px} @media(max-width:380px){ .message.room-auto-ad-message{width:calc(100% - 6px);max-width:calc(100% - 6px)} .message.room-auto-ad-message .message-bubble.room-ad-bubble{padding-left:3px;padding-right:3px} .room-ad-coverflow.is-inline-banner{width:326px} .room-ad-coverflow.is-inline-banner .room-ad-coverflow-stage{height:258px;transform:scale(.965);transform-origin:50% 0} } /* ========================================================= v255 /otherroom composer themes Background stays shared; only the composer gets a room accent. ========================================================= */ body.for314-official-room-themed main .inputrow{ background:linear-gradient(135deg, rgba(var(--for314-room-accent-rgb),.20), rgba(17,22,32,.82) 58%, rgba(17,22,32,.88))!important; border-color:rgba(var(--for314-room-accent-rgb),.46)!important; box-shadow: 0 18px 46px rgba(0,0,0,.32), 0 0 22px rgba(var(--for314-room-accent-rgb),.14), inset 0 1px 0 rgba(255,255,255,.08)!important; } body.for314-official-room-themed main .inputrow #msgInput{ background:rgba(var(--for314-room-accent-rgb),.075)!important; border-color:rgba(var(--for314-room-accent-rgb),.22)!important; } body.for314-official-room-themed main .inputrow #msgInput:focus{ border-color:rgba(var(--for314-room-accent-rgb),.72)!important; background:rgba(var(--for314-room-accent-rgb),.105)!important; box-shadow:0 0 0 3px rgba(var(--for314-room-accent-rgb),.15)!important; } body.for314-official-room-themed main .inputrow #imageBtn, body.for314-official-room-themed main .inputrow #commandBtn{ border-color:rgba(var(--for314-room-accent-rgb),.24)!important; background:rgba(var(--for314-room-accent-rgb),.085)!important; } body.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-official-room-themed main .inputrow #sendBtn{ background:var(--for314-room-accent)!important; color:var(--for314-room-send-fg)!important; -webkit-text-fill-color:var(--for314-room-send-fg)!important; border-color:rgba(var(--for314-room-accent-rgb),.58)!important; box-shadow: 0 7px 18px rgba(var(--for314-room-accent-rgb),.28), 0 0 16px rgba(var(--for314-room-accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,.24)!important; } body.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-official-room-themed main .inputrow #sendBtn::after{ color:var(--for314-room-send-fg)!important; -webkit-text-fill-color:var(--for314-room-send-fg)!important; } body.for314-official-room-themed main .inputrow::before, body.for314-official-room-themed main .inputrow:focus-within::before{ background:radial-gradient(ellipse at 50% 50%, rgba(var(--for314-room-accent-rgb),.35) 0%, rgba(var(--for314-room-accent-rgb),.18) 44%, rgba(var(--for314-room-accent-rgb),.06) 66%, rgba(var(--for314-room-accent-rgb),0) 83%)!important; } body.for314-official-room-themed main .inputrow #sendBtn::before{ background:radial-gradient(circle at 50% 50%, rgba(var(--for314-room-accent-rgb),.42) 0%, rgba(var(--for314-room-accent-rgb),.20) 42%, rgba(var(--for314-room-accent-rgb),.05) 66%, rgba(var(--for314-room-accent-rgb),0) 82%)!important; } body.local-light.for314-official-room-themed main .inputrow{ background:linear-gradient(135deg, rgba(var(--for314-room-accent-rgb),.13), rgba(250,251,253,.88) 60%, rgba(250,251,253,.94))!important; border-color:rgba(var(--for314-room-accent-rgb),.38)!important; box-shadow: 0 18px 42px rgba(43,61,80,.12), 0 0 20px rgba(var(--for314-room-accent-rgb),.10), inset 0 1px 0 rgba(255,255,255,.86)!important; } body.local-light.for314-official-room-themed main .inputrow #msgInput{ background:rgba(255,255,255,.76)!important; border-color:rgba(var(--for314-room-accent-rgb),.25)!important; } body.local-light.for314-official-room-themed main .inputrow #imageBtn, body.local-light.for314-official-room-themed main .inputrow #commandBtn{ background:rgba(255,255,255,.72)!important; border-color:rgba(var(--for314-room-accent-rgb),.25)!important; } /* AI is deliberately white; add a visible neutral outline in both modes. */ body[data-otherroom-theme="ai"] main .inputrow #sendBtn{ border:1px solid rgba(17,24,39,.18)!important; } /* PC stays truly dark even in light mode. */ body[data-otherroom-theme="pc"] main .inputrow #sendBtn{ background:#171717!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } body[data-otherroom-theme="pc"] main .inputrow #sendBtn::after{ color:#fff!important; -webkit-text-fill-color:#fff!important; } /* ========================================================= v258 — Rich sponsor card (Cover Flow and info button removed) The 300x250 ad creative remains completely unscaled/unrotated. Depth, glass and shadow live only on the surrounding chat UI. ========================================================= */ .message.room-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode{ overflow:visible!important; background: radial-gradient(circle at 16% -8%,rgba(127,164,255,.16),transparent 34%), radial-gradient(circle at 92% 8%,rgba(199,129,255,.10),transparent 30%), linear-gradient(180deg,rgba(22,27,48,.965),rgba(11,15,31,.98))!important; border:1px solid rgba(177,197,255,.22)!important; box-shadow: 0 22px 54px rgba(0,0,0,.33), 0 7px 18px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.09)!important; } .message.room-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode .room-ad-glow{ inset:-24px; opacity:.20; filter:blur(32px); background: radial-gradient(circle at 50% 42%,rgba(92,133,255,.52),transparent 42%), radial-gradient(circle at 72% 72%,rgba(179,104,255,.24),transparent 38%); animation:none!important; } .message.room-ad-message .room-ad-rich-mode .room-ad-card-head{ position:relative; z-index:3; margin-bottom:10px; } .message.room-ad-message .room-ad-rich-mode .room-ad-title{ color:#f5f7ff!important; background:none!important; -webkit-text-fill-color:currentColor; animation:none!important; filter:none!important; font-size:14px; font-weight:900; letter-spacing:.055em; } .room-ad-rich-stage{ position:relative; z-index:2; width:300px; height:250px; margin:0 auto 4px; isolation:isolate; } /* The decorative plate sits behind the real ad and never intercepts clicks. */ .room-ad-rich-stage::before{ content:""; position:absolute; z-index:-1; inset:-9px; border-radius:18px; pointer-events:none; background: linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 42%,rgba(80,111,203,.08)), rgba(12,16,31,.80); border:1px solid rgba(193,209,255,.18); box-shadow: 0 25px 48px rgba(0,0,0,.42), 0 8px 18px rgba(0,0,0,.28), 0 0 28px rgba(91,130,255,.13), inset 0 1px 0 rgba(255,255,255,.11); } .room-ad-rich-stage::after{ content:""; position:absolute; z-index:-1; left:12px; right:12px; top:-7px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); filter:blur(.2px); } .room-ad-rich-frame{ position:relative!important; z-index:1!important; display:block!important; width:300px!important; height:250px!important; min-width:300px!important; min-height:250px!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; overflow:hidden!important; background:transparent!important; transform:none!important; filter:none!important; box-shadow:none!important; } .message.room-auto-ad-message{ width:min(348px,calc(100% - 10px)); max-width:min(348px,calc(100% - 10px)); margin:12px auto 15px; } .message.room-auto-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode{ padding:11px 15px 15px; border-radius:21px; } .message.room-auto-ad-message .room-ad-card-head{ width:300px; max-width:100%; margin:0 auto 10px; } .message.room-auto-ad-message .room-ad-chat-text{display:none!important} /* Cover Flow UI is intentionally retired in v257. */ .room-ad-rich-mode .room-ad-coverflow, .room-ad-rich-mode .room-ad-coverflow-dots, .room-ad-rich-mode .room-ad-coverflow-stage{display:none!important} body.local-light main .message.room-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode{ background: radial-gradient(circle at 16% -8%,rgba(104,145,238,.11),transparent 34%), linear-gradient(180deg,rgba(250,252,255,.97),rgba(238,243,251,.97))!important; border-color:rgba(72,96,139,.16)!important; box-shadow:0 22px 48px rgba(49,67,96,.16),0 6px 16px rgba(49,67,96,.10),inset 0 1px 0 #fff!important; } body.local-light main .message.room-ad-message .room-ad-rich-mode .room-ad-title, body.local-light main .message.room-ad-message .room-ad-rich-mode .room-ad-card-head, body.local-light main .message.room-ad-message .room-ad-rich-mode .room-ad-card-head *{color:#34445a!important} body.local-light .room-ad-rich-stage::before{ background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(235,241,251,.92)); border-color:rgba(62,88,130,.14); box-shadow:0 22px 42px rgba(46,66,98,.18),0 7px 16px rgba(46,66,98,.11),inset 0 1px 0 #fff; } @media(max-width:350px){ .message.room-ad-message .message-content{width:calc(100vw - 42px)} .message.room-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode{padding-left:5px;padding-right:5px} .message.room-auto-ad-message{width:calc(100% - 4px);max-width:calc(100% - 4px)} .message.room-auto-ad-message .message-bubble.room-ad-bubble.room-ad-rich-mode{padding-left:5px;padding-right:5px} .room-ad-rich-stage::before{inset:-5px} } /* Password-protected private room marker */ .private-room-lock-icon{ flex:0 0 auto; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; color:#9aa7b8; vertical-align:middle; } .private-room-lock-icon[hidden]{display:none!important} .private-room-lock-icon svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } body.local-light .private-room-lock-icon{color:#566779} /* ========================================================= v265 — Global language rooms English=gray / 한국어=blue / 中文=red. ========================================================= */ .other-room-global-section{margin-top:8px} .other-room-list-name-wrap{min-width:0;display:flex;flex-direction:column;gap:2px} .other-room-list-native-desc{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;font-weight:650;color:#7b8797;-webkit-text-fill-color:#7b8797} .other-room-list-chevron.has-action{width:auto;min-width:42px;white-space:nowrap;font-size:10px!important;font-weight:900!important;color:#657386!important;-webkit-text-fill-color:#657386!important} .other-room-global-section .other-room-list-row{grid-template-columns:28px minmax(0,1fr) auto minmax(42px,auto)} body.local-dark .other-room-list-native-desc,html.dark .other-room-list-native-desc{color:#9fadc0!important;-webkit-text-fill-color:#9fadc0!important} body.local-dark .other-room-list-chevron.has-action,html.dark .other-room-list-chevron.has-action{color:#b8c4d4!important;-webkit-text-fill-color:#b8c4d4!important} @media(max-width:380px){ .other-room-global-section .other-room-list-row{grid-template-columns:25px minmax(0,1fr) auto minmax(38px,auto)} .other-room-list-native-desc{font-size:9px} } /* /arasi v270 — red shield task notice */ main .inputrow > .arasi-task-notice{position:relative;flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:12px!important;background:linear-gradient(180deg,#ef4444,#b91c1c)!important;color:#fff!important;box-shadow:0 5px 16px rgba(185,28,28,.34)!important;cursor:pointer;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent;z-index:4;animation:arasiTaskPulse 1.8s ease-in-out infinite} main .inputrow > .arasi-task-notice[hidden]{display:none!important} main .inputrow > .arasi-task-notice.is-voted{animation:none;filter:saturate(.78);opacity:.78} .arasi-task-notice svg{width:23px;height:23px;display:block;fill:#fff} .arasi-task-notice .arasi-task-shield-mark{fill:none;stroke:#b91c1c;stroke-width:2.1;stroke-linecap:round} .arasi-task-notice-time{position:absolute;right:-5px;top:-6px;min-width:17px;height:17px;padding:0 3px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:2px solid var(--panel,#111827);background:#fff;color:#b91c1c;font-size:9px;font-weight:900;line-height:1} body.local-light .arasi-task-notice-time{border-color:#fff} @keyframes arasiTaskPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}} @media (prefers-reduced-motion:reduce){main .inputrow > .arasi-task-notice{animation:none!important}} /* ========================================================= v274 /rtxt — vivid local-only rainbow composer The rainbow now flows through the input surface itself, not only the border. This makes the color transition much more visible while preserving readability. ========================================================= */ @keyframes for314RtxtRainbowFlow{ 0%{background-position:0% 50%,0 0,0% 50%} 100%{background-position:200% 50%,0 0,200% 50%} } @keyframes for314RtxtRainbowFlowLight{ 0%{background-position:0% 50%,0 0,0% 50%} 100%{background-position:200% 50%,0 0,200% 50%} } @keyframes for314RtxtButtonShift{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } @keyframes for314RtxtGlowSweep{ 0%{transform:translate3d(-5%,0,0) scale(1.02);opacity:.34;filter:blur(17px) saturate(1.45) hue-rotate(0deg)} 25%{opacity:.50;filter:blur(20px) saturate(1.65) hue-rotate(90deg)} 50%{transform:translate3d(5%,0,0) scale(1.05);opacity:.42;filter:blur(18px) saturate(1.55) hue-rotate(180deg)} 75%{opacity:.52;filter:blur(21px) saturate(1.75) hue-rotate(270deg)} 100%{transform:translate3d(-5%,0,0) scale(1.02);opacity:.34;filter:blur(17px) saturate(1.45) hue-rotate(360deg)} } body.for314-rtxt-mode main .inputrow, body.local-light.for314-rtxt-mode main .inputrow, body.for314-rtxt-mode.for314-official-room-themed main .inputrow, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow{ border:1px solid transparent!important; background: linear-gradient(90deg, rgba(255,45,85,.11) 0%,rgba(255,149,0,.10) 12.5%,rgba(255,204,0,.10) 25%, rgba(52,199,89,.10) 37.5%,rgba(0,199,190,.11) 50%,rgba(10,132,255,.12) 62.5%, rgba(94,92,230,.12) 75%,rgba(191,90,242,.12) 87.5%,rgba(255,45,85,.11) 100%) padding-box, linear-gradient(135deg,rgba(19,25,36,.48),rgba(10,14,22,.30)) padding-box, linear-gradient(90deg, #ff2d55 0%,#ff9500 12.5%,#ffcc00 25%,#34c759 37.5%,#00c7be 50%, #0a84ff 62.5%,#5e5ce6 75%,#bf5af2 87.5%,#ff2d55 100%) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; animation:for314RtxtRainbowFlow 3.2s linear infinite!important; box-shadow: 0 20px 48px rgba(0,0,0,.27), 0 0 20px rgba(10,132,255,.12), 0 0 30px rgba(191,90,242,.10), inset 0 1px 0 rgba(255,255,255,.13)!important; backdrop-filter:blur(16px) saturate(195%) brightness(1.04)!important; -webkit-backdrop-filter:blur(16px) saturate(195%) brightness(1.04)!important; } body.local-light.for314-rtxt-mode main .inputrow, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow{ background: linear-gradient(90deg, rgba(255,45,85,.08) 0%,rgba(255,149,0,.08) 12.5%,rgba(255,204,0,.08) 25%, rgba(52,199,89,.08) 37.5%,rgba(0,199,190,.09) 50%,rgba(10,132,255,.09) 62.5%, rgba(94,92,230,.09) 75%,rgba(191,90,242,.09) 87.5%,rgba(255,45,85,.08) 100%) padding-box, linear-gradient(135deg,rgba(255,255,255,.58),rgba(244,248,252,.34)) padding-box, linear-gradient(90deg, #ff2d55 0%,#ff9500 12.5%,#ffcc00 25%,#34c759 37.5%,#00c7be 50%, #0a84ff 62.5%,#5e5ce6 75%,#bf5af2 87.5%,#ff2d55 100%) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; } body.for314-rtxt-mode main .inputrow::before, body.for314-rtxt-mode main .inputrow:focus-within::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow:focus-within::before{ inset:-13px -17px!important; background:linear-gradient(90deg,#ff2d55,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff2d55)!important; background-size:220% 100%!important; opacity:.43!important; animation:for314RtxtButtonShift 3.8s linear infinite,for314RtxtGlowSweep 4.8s ease-in-out infinite!important; } body.for314-rtxt-mode main .inputrow::after{ background:radial-gradient(ellipse at center,rgba(0,199,190,.14) 0%,rgba(10,132,255,.10) 34%,rgba(191,90,242,.10) 58%,rgba(255,45,85,0) 82%)!important; } body.for314-rtxt-mode main .inputrow #msgInput, body.local-light.for314-rtxt-mode main .inputrow #msgInput, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput{ border:1px solid transparent!important; background: linear-gradient(90deg, rgba(255,45,85,.16) 0%,rgba(255,149,0,.13) 12.5%,rgba(255,204,0,.11) 25%, rgba(52,199,89,.12) 37.5%,rgba(0,199,190,.15) 50%,rgba(10,132,255,.16) 62.5%, rgba(94,92,230,.17) 75%,rgba(191,90,242,.17) 87.5%,rgba(255,45,85,.16) 100%) padding-box, linear-gradient(180deg,rgba(17,22,33,.78),rgba(10,14,23,.68)) padding-box, linear-gradient(90deg, #ff453a 0%,#ff9f0a 12.5%,#ffd60a 25%,#30d158 37.5%,#64d2ff 50%, #0a84ff 62.5%,#5e5ce6 75%,#bf5af2 87.5%,#ff453a 100%) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; animation:for314RtxtRainbowFlow 2.8s linear infinite!important; color:#f7f9ff!important; -webkit-text-fill-color:#f7f9ff!important; box-shadow: 0 0 14px rgba(10,132,255,.10), 0 0 22px rgba(191,90,242,.08), inset 0 1px 0 rgba(255,255,255,.07)!important; } body.local-light.for314-rtxt-mode main .inputrow #msgInput, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput{ background: linear-gradient(90deg, rgba(255,45,85,.11) 0%,rgba(255,149,0,.10) 12.5%,rgba(255,204,0,.09) 25%, rgba(52,199,89,.09) 37.5%,rgba(0,199,190,.10) 50%,rgba(10,132,255,.11) 62.5%, rgba(94,92,230,.11) 75%,rgba(191,90,242,.11) 87.5%,rgba(255,45,85,.11) 100%) padding-box, linear-gradient(180deg,rgba(255,255,255,.87),rgba(247,249,253,.76)) padding-box, linear-gradient(90deg, #ff453a 0%,#ff9f0a 12.5%,#ffd60a 25%,#30d158 37.5%,#64d2ff 50%, #0a84ff 62.5%,#5e5ce6 75%,#bf5af2 87.5%,#ff453a 100%) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; color:#17202b!important; -webkit-text-fill-color:#17202b!important; } body.for314-rtxt-mode main .inputrow #msgInput:focus, body.local-light.for314-rtxt-mode main .inputrow #msgInput:focus{ box-shadow:0 0 0 3px rgba(100,210,255,.11),0 0 25px rgba(191,90,242,.18)!important; } body.for314-rtxt-mode main .inputrow #imageBtn, body.for314-rtxt-mode main .inputrow #commandBtn, body.local-light.for314-rtxt-mode main .inputrow #imageBtn, body.local-light.for314-rtxt-mode main .inputrow #commandBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #imageBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #commandBtn{ border:1px solid transparent!important; background: linear-gradient(90deg, rgba(255,45,85,.16),rgba(255,149,0,.12),rgba(52,199,89,.12),rgba(0,199,190,.15), rgba(10,132,255,.16),rgba(94,92,230,.16),rgba(191,90,242,.16),rgba(255,45,85,.16)) padding-box, linear-gradient(rgba(26,32,44,.74),rgba(14,19,28,.66)) padding-box, linear-gradient(90deg,#ff2d55,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff2d55) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; animation:for314RtxtRainbowFlow 2.6s linear infinite!important; color:#f7f9ff!important; -webkit-text-fill-color:#f7f9ff!important; box-shadow:0 0 16px rgba(100,210,255,.10)!important; } body.local-light.for314-rtxt-mode main .inputrow #imageBtn, body.local-light.for314-rtxt-mode main .inputrow #commandBtn{ background: linear-gradient(90deg, rgba(255,45,85,.10),rgba(255,149,0,.09),rgba(52,199,89,.09),rgba(0,199,190,.10), rgba(10,132,255,.11),rgba(94,92,230,.11),rgba(191,90,242,.11),rgba(255,45,85,.10)) padding-box, linear-gradient(rgba(255,255,255,.84),rgba(246,249,252,.72)) padding-box, linear-gradient(90deg,#ff2d55,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff2d55) border-box!important; background-size:200% 100%,100% 100%,200% 100%!important; color:#1c2734!important; -webkit-text-fill-color:#1c2734!important; } body.for314-rtxt-mode main .inputrow #sendBtn, body.local-light.for314-rtxt-mode main .inputrow #sendBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body[data-otherroom-theme="pc"].for314-rtxt-mode main .inputrow #sendBtn, body[data-otherroom-theme="ai"].for314-rtxt-mode main .inputrow #sendBtn{ border:1px solid rgba(255,255,255,.30)!important; background:linear-gradient(90deg, #ff375f 0%,#ff9f0a 12.5%,#ffd60a 25%,#30d158 37.5%,#00c7be 50%, #0a84ff 62.5%,#5e5ce6 75%,#bf5af2 87.5%,#ff375f 100%)!important; background-size:200% 100%!important; animation:for314RtxtButtonShift 2.35s linear infinite!important; color:#101018!important; -webkit-text-fill-color:#101018!important; box-shadow: 0 6px 18px rgba(0,0,0,.16), 0 0 18px rgba(100,210,255,.18), 0 0 24px rgba(191,90,242,.14), inset 0 1px 0 rgba(255,255,255,.36)!important; } body.for314-rtxt-mode main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::after, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after{ color:#101018!important; -webkit-text-fill-color:#101018!important; } body.for314-rtxt-mode main .inputrow #sendBtn::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before{ background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0%,rgba(100,210,255,.16) 42%,rgba(191,90,242,0) 82%)!important; } @media(prefers-reduced-motion:reduce){ body.for314-rtxt-mode main .inputrow, body.for314-rtxt-mode main .inputrow::before, body.for314-rtxt-mode main .inputrow #msgInput, body.for314-rtxt-mode main .inputrow #imageBtn, body.for314-rtxt-mode main .inputrow #commandBtn, body.for314-rtxt-mode main .inputrow #sendBtn{ animation:none!important; } } /* ========================================================= v275 /rtxt — CLUB-style rainbow composer Match the CLUB UI: dark glass input + moving rainbow border, and a full rainbow send button with a soft animated glow. Local-only; command behavior is unchanged. ========================================================= */ @keyframes for314ClubRainbowShift{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} } @keyframes for314ClubRainbowBorderShift{ 0%{background-position:100% 100%,0% 50%} 100%{background-position:100% 100%,300% 50%} } @keyframes for314ClubRainbowGlow{ 0%,100%{filter:brightness(1);box-shadow:0 0 18px rgba(125,95,255,.14)} 50%{filter:brightness(1.08);box-shadow:0 0 30px rgba(255,92,214,.26)} } @keyframes for314ClubComposerGlow{ 0%,100%{box-shadow:0 14px 36px rgba(0,0,0,.24),0 0 16px rgba(125,95,255,.10),inset 0 1px 0 rgba(255,255,255,.10)} 50%{box-shadow:0 14px 36px rgba(0,0,0,.24),0 0 25px rgba(255,92,214,.18),inset 0 1px 0 rgba(255,255,255,.13)} } body.for314-rtxt-mode main .inputrow, body.local-light.for314-rtxt-mode main .inputrow, body.for314-rtxt-mode.for314-official-room-themed main .inputrow, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow{ border:1px solid transparent!important; background: linear-gradient(rgba(5,5,12,.40),rgba(5,5,12,.40)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; animation:for314ClubRainbowBorderShift 5.8s linear infinite,for314ClubComposerGlow 2.8s ease-in-out infinite!important; backdrop-filter:blur(15px) saturate(175%)!important; -webkit-backdrop-filter:blur(15px) saturate(175%)!important; } body.local-light.for314-rtxt-mode main .inputrow, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow{ background: linear-gradient(rgba(255,255,255,.48),rgba(255,255,255,.48)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; } /* Keep the CLUB-style input surface dark; only its border runs through the rainbow. */ body.for314-rtxt-mode main .inputrow #msgInput, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput{ border:1px solid transparent!important; background: linear-gradient(rgba(8,8,18,.88),rgba(8,8,18,.88)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; animation:for314ClubRainbowBorderShift 5.5s linear infinite,for314ClubRainbowGlow 2.8s ease-in-out infinite!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 0 20px rgba(135,95,255,.16)!important; } body.local-light.for314-rtxt-mode main .inputrow #msgInput, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput{ background: linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; color:#17202b!important; -webkit-text-fill-color:#17202b!important; } body.for314-rtxt-mode main .inputrow #msgInput:focus, body.local-light.for314-rtxt-mode main .inputrow #msgInput:focus{ box-shadow:0 0 28px rgba(255,120,220,.22)!important; } /* Small composer buttons use the same CLUB rainbow as an outline. */ body.for314-rtxt-mode main .inputrow #imageBtn, body.for314-rtxt-mode main .inputrow #commandBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #imageBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #commandBtn{ border:1px solid transparent!important; background: linear-gradient(rgba(8,8,18,.82),rgba(8,8,18,.82)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; animation:for314ClubRainbowBorderShift 5.2s linear infinite!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 0 15px rgba(135,95,255,.12)!important; } body.local-light.for314-rtxt-mode main .inputrow #imageBtn, body.local-light.for314-rtxt-mode main .inputrow #commandBtn{ background: linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)) padding-box, linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d) border-box!important; background-size:100% 100%,300% 100%!important; color:#17202b!important; -webkit-text-fill-color:#17202b!important; } /* Exact CLUB-like full rainbow send button. */ body.for314-rtxt-mode main .inputrow #sendBtn, body.local-light.for314-rtxt-mode main .inputrow #sendBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body[data-otherroom-theme="pc"].for314-rtxt-mode main .inputrow #sendBtn, body[data-otherroom-theme="ai"].for314-rtxt-mode main .inputrow #sendBtn{ border:1px solid rgba(255,255,255,.12)!important; background:linear-gradient(90deg,#ff4d6d,#ffb84d,#fff34d,#57ff8a,#56d4ff,#7f6dff,#ff5bf2,#ff4d6d)!important; background-size:300% 100%!important; animation:for314ClubRainbowShift 4.6s linear infinite,for314ClubRainbowGlow 2.4s ease-in-out infinite!important; color:#101018!important; -webkit-text-fill-color:#101018!important; font-weight:900!important; box-shadow:0 0 24px rgba(255,105,210,.24)!important; } body.for314-rtxt-mode main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::after, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after{ color:#101018!important; -webkit-text-fill-color:#101018!important; } body.for314-rtxt-mode main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before{ background:transparent!important; } body.for314-rtxt-mode main .inputrow #sendBtn:active{ transform:scale(.96)!important; } /* ========================================================= v276 /rtxt — CLUB rainbow send button, visible color travel Keep multiple rainbow colors visible even on the compact send button, with an obvious continuous left-to-right flow and stronger blues. ========================================================= */ @keyframes for314ClubSendRainbowTravelV276{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } @keyframes for314ClubSendRainbowGlowV276{ 0%,100%{ filter:brightness(1) saturate(1.08); box-shadow:0 0 18px rgba(22,139,255,.18),0 0 23px rgba(255,91,242,.18),inset 0 1px 0 rgba(255,255,255,.34) } 50%{ filter:brightness(1.10) saturate(1.18); box-shadow:0 0 25px rgba(0,210,255,.26),0 0 31px rgba(127,109,255,.24),0 0 22px rgba(255,91,242,.20),inset 0 1px 0 rgba(255,255,255,.40) } } body.for314-rtxt-mode main .inputrow #sendBtn, body.local-light.for314-rtxt-mode main .inputrow #sendBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body[data-otherroom-theme="pc"].for314-rtxt-mode main .inputrow #sendBtn, body[data-otherroom-theme="ai"].for314-rtxt-mode main .inputrow #sendBtn{ border:1px solid rgba(255,255,255,.18)!important; background:linear-gradient(90deg, #ff4d6d 0%, #ffb84d 10%, #fff34d 20%, #57ff8a 30%, #56d4ff 40%, #168bff 50%, #365dff 60%, #7f6dff 72%, #c45cff 84%, #ff5bf2 92%, #ff4d6d 100%)!important; background-size:200% 100%!important; background-repeat:repeat-x!important; animation:for314ClubSendRainbowTravelV276 2.9s linear infinite,for314ClubSendRainbowGlowV276 2.25s ease-in-out infinite!important; color:#101018!important; -webkit-text-fill-color:#101018!important; font-weight:900!important; will-change:background-position,filter!important; } body.for314-rtxt-mode main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::after, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after{ position:relative!important; z-index:2!important; color:#101018!important; -webkit-text-fill-color:#101018!important; text-shadow:0 1px 0 rgba(255,255,255,.18)!important; } body.for314-rtxt-mode main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before{ background:transparent!important; } /* ========================================================= v278 /rtxt — CLUB-like smooth rainbow strip on send button Based on v276. A fixed-width rainbow strip slides in pixels, so cyan/blue/purple are guaranteed to pass through the button. ========================================================= */ @keyframes for314RtxtSendRainbowSlideV278{ from{background-position:0px 50%} to{background-position:-420px 50%} } body.for314-rtxt-mode main .inputrow #sendBtn, body.local-light.for314-rtxt-mode main .inputrow #sendBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body[data-otherroom-theme="pc"].for314-rtxt-mode main .inputrow #sendBtn, body[data-otherroom-theme="ai"].for314-rtxt-mode main .inputrow #sendBtn{ border:1px solid rgba(255,255,255,.18)!important; background-image:linear-gradient(90deg, #ff4d6d 0%, #ffb84d 10%, #fff34d 20%, #57ff8a 30%, #56d4ff 40%, #168bff 50%, #365dff 60%, #7f6dff 70%, #c45cff 80%, #ff5bf2 90%, #ff4d6d 100%)!important; background-size:420px 100%!important; background-repeat:repeat-x!important; background-position:0px 50%; animation:for314RtxtSendRainbowSlideV278 4.6s linear infinite!important; color:#101018!important; -webkit-text-fill-color:#101018!important; font-weight:900!important; box-shadow:0 0 24px rgba(255,105,210,.22),0 5px 16px rgba(0,0,0,.16)!important; will-change:background-position!important; } body.for314-rtxt-mode main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::after, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after{ color:#101018!important; -webkit-text-fill-color:#101018!important; text-shadow:0 1px 0 rgba(255,255,255,.20)!important; } /* ========================================================= v279 /rtxt — CLUB rainbow send button, JS-driven flow Use a rainbow strip exactly 300% of the send-button width, matching the CLUB button proportions. JavaScript moves the strip every frame so the visible cyan / blue / purple / pink bands definitely travel horizontally instead of appearing stuck on one color. ========================================================= */ body.for314-rtxt-mode main .inputrow #sendBtn, body.local-light.for314-rtxt-mode main .inputrow #sendBtn, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn, body[data-otherroom-theme="pc"].for314-rtxt-mode main .inputrow #sendBtn, body[data-otherroom-theme="ai"].for314-rtxt-mode main .inputrow #sendBtn{ border:1px solid rgba(255,255,255,.18)!important; background-image:linear-gradient(90deg, #ff4d6d 0%, #ffb84d 12.5%, #fff34d 25%, #57ff8a 37.5%, #56d4ff 50%, #168bff 60%, #365dff 68%, #7f6dff 76%, #ff5bf2 88%, #ff4d6d 100%)!important; background-size:300% 100%!important; background-repeat:repeat-x!important; background-position:0 50%!important; animation:none!important; color:#101018!important; -webkit-text-fill-color:#101018!important; font-weight:900!important; box-shadow:0 0 24px rgba(255,105,210,.22),0 5px 16px rgba(0,0,0,.16)!important; will-change:background-position!important; } body.for314-rtxt-mode main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::after, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::after{ position:relative!important; z-index:2!important; color:#101018!important; -webkit-text-fill-color:#101018!important; text-shadow:0 1px 0 rgba(255,255,255,.20)!important; } body.for314-rtxt-mode main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode main .inputrow #sendBtn::before, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #sendBtn::before{ background:transparent!important; animation:none!important; } /* ========================================================= v280 /rtxt — softer placeholder hint Keep typed text crisp, but make the idle message hint quieter so the moving rainbow remains the visual focus. ========================================================= */ body.for314-rtxt-mode main .inputrow #msgInput::placeholder, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::placeholder{ color:rgba(255,255,255,.38)!important; -webkit-text-fill-color:rgba(255,255,255,.38)!important; opacity:1!important; font-weight:600!important; } body.local-light.for314-rtxt-mode main .inputrow #msgInput::placeholder, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::placeholder{ color:rgba(23,32,43,.36)!important; -webkit-text-fill-color:rgba(23,32,43,.36)!important; opacity:1!important; font-weight:600!important; } /* ============================================================ v291 — balanced composer text on iPad and Mac iPhone keeps the existing compact typography. ============================================================ */ body.for314-ipad-ui main .inputrow #msgInput, body.for314-mac-ui main .inputrow #msgInput{ font-size:20px!important; line-height:1.25!important; } body.for314-ipad-ui main .inputrow #msgInput::placeholder, body.for314-mac-ui main .inputrow #msgInput::placeholder{ font-size:20px!important; line-height:1.25!important; } /* ========================================================= v292 — Media replies + translucent reply composer ========================================================= */ .for314-reply-composer-preview{ background:rgba(18,27,40,.52)!important; border-color:rgba(170,200,235,.20)!important; box-shadow:0 12px 34px rgba(0,0,0,.18)!important; backdrop-filter:blur(20px) saturate(165%)!important; -webkit-backdrop-filter:blur(20px) saturate(165%)!important; } body.local-light .for314-reply-composer-preview{ background:rgba(248,251,255,.56)!important; border-color:rgba(72,98,128,.16)!important; box-shadow:0 12px 30px rgba(44,61,80,.12)!important; backdrop-filter:blur(20px) saturate(155%)!important; -webkit-backdrop-filter:blur(20px) saturate(155%)!important; } .for314-reply-composer-body{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important} .for314-reply-composer-texts{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center} .for314-reply-composer-media,.for314-reply-quote-media{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.18);box-shadow:0 4px 12px rgba(0,0,0,.12)} .for314-reply-composer-media{width:38px;height:38px;border-radius:9px}.for314-reply-quote-media{width:32px;height:32px;border-radius:7px} .for314-reply-composer-media[hidden],.for314-reply-quote-media[hidden]{display:none!important} .for314-reply-media-thumb-image,.for314-reply-media-thumb-video{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.for314-reply-media-thumb-video{background:#090b0f} .for314-reply-media-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:13px;line-height:1;text-shadow:0 1px 5px rgba(0,0,0,.75);pointer-events:none} .for314-reply-media-fallback{font-size:15px;font-weight:900;line-height:1;opacity:.88;pointer-events:none} .for314-reply-quote-preview-row{display:flex;align-items:center;gap:7px;min-width:0;margin-top:2px}.for314-reply-quote-preview-row .for314-reply-quote-text{min-width:0;flex:1 1 auto;margin-top:0} body.local-light .for314-reply-composer-media,body.local-light .for314-reply-quote-media{border-color:rgba(62,84,112,.15);background:rgba(255,255,255,.36)} .message.for314-swipe-reply-active .for314-reply-gesture-surface,.message.for314-swipe-actions-active .for314-reply-gesture-surface{transition:none!important} .message.for314-swipe-reply-reset .for314-reply-gesture-surface{transition:transform .20s cubic-bezier(.22,.8,.32,1)!important} .chat-image,.wid-chat-image{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none} .video-message-bubble,.image-message-bubble,.wid-video-bubble,.wid-image-bubble,.stamp-chat-shell{touch-action:pan-y} @media(max-width:390px){.for314-reply-composer-media{width:32px;height:32px;border-radius:8px}.for314-reply-composer-body{gap:6px!important}.for314-reply-quote-media{width:28px;height:28px}} /* ========================================================= v293 — stable /rtxt placeholder color Keep the idle hint softly gray across theme/focus changes. ========================================================= */ body.for314-rtxt-mode main .inputrow #msgInput::placeholder, body.for314-rtxt-mode main .inputrow #msgInput::-webkit-input-placeholder, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::placeholder, body.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::-webkit-input-placeholder{ color:rgba(190,198,210,.56)!important; -webkit-text-fill-color:rgba(190,198,210,.56)!important; opacity:1!important; font-weight:600!important; } body.local-light.for314-rtxt-mode main .inputrow #msgInput::placeholder, body.local-light.for314-rtxt-mode main .inputrow #msgInput::-webkit-input-placeholder, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::placeholder, body.local-light.for314-rtxt-mode.for314-official-room-themed main .inputrow #msgInput::-webkit-input-placeholder{ color:rgba(125,136,151,.58)!important; -webkit-text-fill-color:rgba(125,136,151,.58)!important; opacity:1!important; font-weight:600!important; } body.for314-rtxt-mode main .inputrow #msgInput:focus::placeholder, body.for314-rtxt-mode main .inputrow #msgInput:focus::-webkit-input-placeholder{ opacity:1!important; } /* ===== v294 自分のメッセージ「送信を取り消す」 ===== */ .for314-reply-action-menu .for314-recall-action-button{ width:100%;display:flex;align-items:center;justify-content:flex-start;min-height:36px; margin-top:3px;padding:7px 10px;border:0;border-radius:10px;background:rgba(225,83,91,.12); color:#ffb3b8;-webkit-text-fill-color:#ffb3b8;font:inherit;font-weight:850;cursor:pointer;text-align:left; } .for314-reply-action-menu .for314-recall-action-button[hidden]{display:none!important} .for314-reply-action-menu .for314-recall-action-button:hover, .for314-reply-action-menu .for314-recall-action-button:focus-visible{background:rgba(225,83,91,.20);outline:none} .for314-swipe-action-button.is-recall{ background:rgba(225,83,91,.13)!important;color:#ffb3b8!important;-webkit-text-fill-color:#ffb3b8!important; } body.local-light .for314-reply-action-menu .for314-recall-action-button{background:rgba(201,59,67,.08);color:#b43039;-webkit-text-fill-color:#b43039} body.local-light .for314-swipe-action-button.is-recall{background:rgba(201,59,67,.08)!important;color:#b43039!important;-webkit-text-fill-color:#b43039!important;border-color:rgba(201,59,67,.10)!important} /* v297 — dot:文字列 / ad-like 1.5x larger vertical dot-art */ .message-bubble.for314-dot-text-bubble{max-width:min(94vw,880px);max-height:72vh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .for314-dot-text-art{margin:0;padding:5px 4px;width:max-content;max-width:none;white-space:pre;tab-size:1;font-family:"SFMono-Regular","Menlo","Consolas","Noto Sans Mono CJK JP",monospace!important;font-size:4px!important;line-height:1!important;letter-spacing:0!important;font-weight:400!important;font-style:normal!important;text-transform:none!important;transform:none!important;color:inherit;user-select:text;-webkit-user-select:text;-webkit-text-size-adjust:none;text-size-adjust:none} .for314-reply-body.for314-dot-text-bubble{overflow:auto} @media(max-width:700px){.for314-dot-text-art{font-size:4px!important;line-height:1!important}.message-bubble.for314-dot-text-bubble{max-height:60vh;max-width:94vw}} /* ===== v299 dot: light-mode contrast fix ===== */ .for314-dot-text-art{ color:#f4f7fb!important; -webkit-text-fill-color:#f4f7fb!important; } body.local-light .for314-dot-text-art, html:not(.dark) body:not(.local-dark) .for314-dot-text-art{ color:#243041!important; -webkit-text-fill-color:#243041!important; } body.local-light .message-bubble.for314-dot-text-bubble, html:not(.dark) body:not(.local-dark) .message-bubble.for314-dot-text-bubble{ border-color:rgba(43,55,72,.16)!important; } /* /e finished drawing preview */ .activity-draw-result{margin-top:10px;display:none} .activity-draw-result.is-visible{display:block} .activity-draw-result img{display:block;width:min(100%,560px);max-height:420px;object-fit:contain;border-radius:14px;border:1px solid rgba(86,103,127,.18);background:#fff;box-shadow:0 8px 24px rgba(43,61,80,.12);cursor:pointer} /* ===== v306 wallpaper visibility fix ===== The fixed wallpaper layer must stay visible under /dark and /light. Room bgc still wins because it is applied as inline !important on the chat/log. */ html.for314-wallpaper-enabled, html.for314-wallpaper-enabled body, html.for314-wallpaper-enabled body.local-dark, html.for314-wallpaper-enabled body.local-light, html.for314-wallpaper-enabled body.rainbow-mode{ background-color:transparent!important; background-image:none!important; } html.for314-wallpaper-enabled body main, html.for314-wallpaper-enabled body .wrap{ background-color:transparent!important; background-image:none!important; } html.for314-wallpaper-enabled body main>.chat, html.for314-wallpaper-enabled body .chatlog, html.for314-wallpaper-enabled body #log, html.for314-wallpaper-enabled body #chatlog{ background-color:transparent!important; background-image:none!important; } html.for314-wallpaper-enabled body>header, html.for314-wallpaper-enabled body>main, html.for314-wallpaper-enabled body>.wrap{ position:relative; z-index:1; } #for314WallpaperLayer{height:100vh;height:100dvh} /* ========================================================= FOR314 CHAT BUBBLE GLASS v308 Header/title glass language carried into ordinary chat bubbles. ========================================================= */ main .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ border:1px solid rgba(255,255,255,.13)!important; box-shadow: 0 14px 30px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.18)!important; backdrop-filter:blur(22px) saturate(165%) brightness(1.02)!important; -webkit-backdrop-filter:blur(22px) saturate(165%) brightness(1.02)!important; } html:not(.for314-bubblecolor-active) body:not(.rainbow-mode) main .chatlog .message:not(.mine) .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ background: linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.018)), rgba(20,28,42,.56)!important; color:#f4f7fb!important; } html:not(.for314-bubblecolor-active) body:not(.rainbow-mode) main .chatlog .message.mine .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025)), rgba(38,91,166,.68)!important; color:#fff!important; box-shadow: 0 16px 32px rgba(20,53,108,.26), 0 5px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.21), inset 0 -1px 0 rgba(19,54,112,.28)!important; } body.local-light main .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ border-color:rgba(83,102,127,.15)!important; box-shadow: 0 14px 28px rgba(40,58,80,.11), 0 4px 10px rgba(40,58,80,.05), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(156,173,194,.13)!important; backdrop-filter:blur(20px) saturate(150%) brightness(1.03)!important; -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.03)!important; } html:not(.for314-bubblecolor-active) body.local-light:not(.rainbow-mode) main .chatlog .message:not(.mine) .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ background: linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.24)), rgba(244,248,252,.55)!important; color:#1c2734!important; } html:not(.for314-bubblecolor-active) body.local-light:not(.rainbow-mode) main .chatlog .message.mine .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03)), rgba(54,107,192,.74)!important; color:#fff!important; border-color:rgba(255,255,255,.22)!important; } @media(max-width:680px){ main .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ backdrop-filter:blur(17px) saturate(155%)!important; -webkit-backdrop-filter:blur(17px) saturate(155%)!important; box-shadow:0 10px 22px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.14)!important; } } /* ========================================================= FOR314 CHAT BUBBLE GLASS v309 — white message text Keep ordinary glass bubbles readable over wallpapers. ========================================================= */ html:not(.for314-textcolor-active) body:not(.rainbow-mode) main .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble), html:not(.for314-textcolor-active) body:not(.rainbow-mode) main .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble) *{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 1px 2px rgba(0,0,0,.28); } html:not(.for314-bubblecolor-active) body.local-light:not(.rainbow-mode) main .chatlog .message:not(.mine) .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.028)), rgba(32,42,58,.66)!important; border-color:rgba(255,255,255,.19)!important; } html:not(.for314-textcolor-active) body:not(.rainbow-mode) main .chatlog .message-bubble .for314-reply-quote-text{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; } /* ========================================================= FOR314 CHAT READABILITY / LIGHTWEIGHT GLASS v310 - username / display ID / time: double text-shadow by theme - ordinary chat bubble backdrop blur reduced for mobile performance ========================================================= */ .chatlog .message-meta{ color:rgba(245,248,252,.94)!important; -webkit-text-fill-color:rgba(245,248,252,.94)!important; text-shadow: 0 1px 2px rgba(0,0,0,.96), 0 0 5px rgba(0,0,0,.62)!important; } body.local-dark .chatlog .message-meta{ color:rgba(248,250,253,.96)!important; -webkit-text-fill-color:rgba(248,250,253,.96)!important; text-shadow: 0 1px 2px rgba(0,0,0,.98), 0 0 5px rgba(0,0,0,.68)!important; } body.local-light .chatlog .message-meta{ color:rgba(20,27,36,.96)!important; -webkit-text-fill-color:rgba(20,27,36,.96)!important; text-shadow: 0 1px 2px rgba(255,255,255,.98), 0 0 5px rgba(255,255,255,.90)!important; } /* Keep the glass feel, but avoid a large blur on every scrolling message. */ .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ backdrop-filter:blur(6px) saturate(145%)!important; -webkit-backdrop-filter:blur(6px) saturate(145%)!important; } @media(max-width:680px){ .chatlog .message-bubble:not(.youtube-bubble):not(.slide-lock-bubble):not(.room-ad-bubble):not(.speedtest-bubble):not(.tradingview-bubble):not(.map-bubble):not(.satoru-aniki-bubble):not(.for314-glitch-bubble):not(.satorufish-channel-bubble):not(.for314-dot-text-bubble):not(.b64-bubble){ backdrop-filter:blur(3px) saturate(135%)!important; -webkit-backdrop-filter:blur(3px) saturate(135%)!important; } } /* ========================================================= FOR314 HEADER READABILITY v311 Light mode: add a subtle double dark text-shadow so the header/status text stays readable over bright wallpapers. ========================================================= */ body.local-light header.profile-compact-header .header-room-list-btn, body.local-light header.profile-compact-header .header-room-line code, body.local-light header.profile-compact-header .status, body.local-light header.profile-compact-header .transport-badge, body.local-light header.profile-compact-header .transport-badge-label, body.local-light header.profile-compact-header .header-handle-status, body.local-light header.profile-compact-header .header-notification-label, body.local-light main>#roomTitleText{ text-shadow: 0 1px 2px rgba(0,0,0,.46), 0 0 4px rgba(0,0,0,.24)!important; } /* ========================================================= FOR314 HEADER CONTRAST v312 Light mode: darker base colors + existing double dark shadow. ========================================================= */ body.local-light header.profile-compact-header .header-room-line{ color:#526275!important; -webkit-text-fill-color:#526275!important; } body.local-light header.profile-compact-header .header-room-list-btn{ color:#526275!important; -webkit-text-fill-color:#526275!important; } body.local-light header.profile-compact-header .header-room-line code{ color:#1f4f7d!important; -webkit-text-fill-color:#1f4f7d!important; } body.local-light header.profile-compact-header .status{ color:#244b73!important; -webkit-text-fill-color:#244b73!important; font-weight:800!important; } body.local-light header.profile-compact-header .transport-badge, body.local-light header.profile-compact-header .transport-badge-label{ color:#31506d!important; -webkit-text-fill-color:#31506d!important; } body.local-light header.profile-compact-header .header-handle-status{ color:#111827!important; -webkit-text-fill-color:#111827!important; } body.local-light header.profile-compact-header .header-notification-label{ color:#495a6c!important; -webkit-text-fill-color:#495a6c!important; } body.local-light main>#roomTitleText{ color:#465666!important; -webkit-text-fill-color:#465666!important; } /* ===== v326 light-mode white-text readability ===== Light mode keeps the app's dark/image/transparent cards, so white text can disappear on bright wallpapers. JavaScript marks only text that is actually rendered as near-white; this class adds the same dark halo used by chat text. The child reset prevents a white parent from forcing a shadow onto dark child text. */ body.local-light .for314-light-white-shadow{ text-shadow: 0 1px 2px rgba(0,0,0,.94), 0 0 4px rgba(0,0,0,.68), 0 0 8px rgba(0,0,0,.36) !important; } body.local-light .for314-light-white-shadow > *:not(.for314-light-white-shadow){ text-shadow:none !important; } /* v327 /gadget Amazon Associate card */ .gadget-bubble{padding:0!important;overflow:hidden;max-width:min(430px,88vw);background:transparent!important;border:0!important;box-shadow:none!important} .gadget-link{display:block;min-width:min(330px,80vw);padding:15px 16px 14px;border-radius:18px;text-decoration:none;color:var(--text,#eef5f6);background:linear-gradient(145deg,rgba(19,34,39,.96),rgba(12,26,31,.94));border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.24);transition:transform .16s ease,background .16s ease} .gadget-link:hover{transform:translateY(-1px);background:linear-gradient(145deg,rgba(27,48,54,.98),rgba(15,31,36,.96))} .gadget-eyebrow{font-size:10px;font-weight:800;letter-spacing:.08em;opacity:.72;margin-bottom:7px} .gadget-intro{font-size:12px;font-weight:800;opacity:.86;margin-bottom:7px} .gadget-title{font-size:16px;line-height:1.45;font-weight:850;overflow-wrap:anywhere} .gadget-action{display:inline-flex;align-items:center;margin-top:12px;padding:8px 12px;border-radius:999px;background:rgba(255,153,0,.15);border:1px solid rgba(255,178,66,.34);font-size:12px;font-weight:800;color:#ffd394} .gadget-disclosure{margin-top:9px;font-size:9px;line-height:1.45;opacity:.62} html[data-theme="light"] .gadget-link{color:#fff;background:linear-gradient(145deg,rgba(24,40,45,.92),rgba(13,29,34,.9));text-shadow:0 1px 2px rgba(0,0,0,.88),0 0 4px rgba(0,0,0,.5)} @media(max-width:520px){.gadget-link{min-width:min(280px,78vw);padding:13px 14px}.gadget-title{font-size:15px}} /* v331: prominent NG-image moderation alert (4-line height + no flex shrink) */ .ai-ng-image-alert{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:12px; box-sizing:border-box; width:min(880px,calc(100% - 24px)); min-height:120px; margin:12px auto; padding:18px 20px; border:2px solid rgba(255,255,255,.34); border-radius:18px; background:#e00000!important; color:#fff!important; box-shadow:0 8px 24px rgba(224,0,0,.34),0 0 0 0 rgba(255,46,46,.46); text-align:center; font-size:clamp(12px,2.8vw,15px); font-weight:900; line-height:1.55; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.36); animation:aiNgAlertEnter .38s cubic-bezier(.2,.86,.3,1.2) both,aiNgAlertPulse 1.25s ease .42s 2; } .ai-ng-image-alert::after{ content:''; position:absolute; z-index:-1; top:-35%; bottom:-35%; left:-38%; width:24%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); animation:aiNgAlertSweep .9s ease-out .18s 1 both; } .ai-ng-image-alert-icon{ flex:none; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff!important; font-size:19px; line-height:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); animation:aiNgAlertIconShake .58s ease .2s 1; } .ai-ng-image-alert-text{min-width:0;color:#fff!important;display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere} body.local-light .ai-ng-image-alert, body.local-light .ai-ng-image-alert *{color:#fff!important} @keyframes aiNgAlertEnter{ 0%{opacity:0;transform:translateY(10px) scale(.97)} 70%{opacity:1;transform:translateY(-2px) scale(1.012)} 100%{opacity:1;transform:translateY(0) scale(1)} } @keyframes aiNgAlertPulse{ 0%,100%{box-shadow:0 8px 24px rgba(224,0,0,.34),0 0 0 0 rgba(255,46,46,.44)} 50%{box-shadow:0 10px 30px rgba(224,0,0,.42),0 0 0 7px rgba(255,46,46,0)} } @keyframes aiNgAlertSweep{ 0%{left:-38%;opacity:0} 18%{opacity:1} 100%{left:118%;opacity:0} } @keyframes aiNgAlertIconShake{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-9deg) scale(1.08)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(4deg)} } @media (max-width:560px){ .ai-ng-image-alert{width:calc(100% - 12px);min-height:104px;margin:9px auto;padding:14px 12px;gap:9px;border-radius:15px;font-size:12px;line-height:1.55} .ai-ng-image-alert-icon{width:27px;height:27px;font-size:17px} } @media (prefers-reduced-motion:reduce){ .ai-ng-image-alert,.ai-ng-image-alert::after,.ai-ng-image-alert-icon{animation:none!important} } /* v334: mention history retention + manual remove */ .for314-mention-row{ display:flex!important;align-items:center!important;gap:4px!important;width:100%!important; } .for314-mention-row>.for314-mention-item{ flex:1 1 auto!important;width:auto!important;min-width:0!important; } .for314-mention-delete{ flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important; margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important; color:inherit!important;-webkit-text-fill-color:currentColor!important;font-size:13px!important;line-height:1!important; opacity:.48!important;cursor:pointer!important; } .for314-mention-delete:hover,.for314-mention-delete:focus-visible{ opacity:1!important;background:rgba(255,92,92,.14)!important;outline:none!important; } body.local-light .for314-mention-delete{color:#45566b!important;-webkit-text-fill-color:#45566b!important} body.local-light .for314-mention-delete:hover,body.local-light .for314-mention-delete:focus-visible{background:rgba(210,55,55,.09)!important;color:#b52d2d!important;-webkit-text-fill-color:#b52d2d!important} /* v336: glass mention picker + online avatars + strict offline-only delete */ .for314-mention-menu{ background:rgba(18,27,40,.52)!important; border-color:rgba(255,255,255,.24)!important; box-shadow:0 18px 48px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08)!important; backdrop-filter:blur(28px) saturate(180%)!important; -webkit-backdrop-filter:blur(28px) saturate(180%)!important; } .for314-mention-group{ background:rgba(18,27,40,.30)!important; backdrop-filter:blur(20px) saturate(160%)!important; -webkit-backdrop-filter:blur(20px) saturate(160%)!important; } .for314-mention-row{border-radius:10px!important;overflow:hidden!important} .for314-mention-item{background:rgba(255,255,255,.025)!important} .for314-mention-item:hover,.for314-mention-item.is-active{background:rgba(115,162,240,.18)!important} .for314-mention-main{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;flex:1 1 auto!important} .for314-mention-avatar{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;border-radius:50%!important;overflow:hidden!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 2px 8px rgba(0,0,0,.12)!important} .for314-mention-avatar img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important} .for314-mention-row.is-online>.for314-mention-delete, .for314-mention-row[data-online="1"]>.for314-mention-delete{display:none!important} body.local-light .for314-mention-menu{ background:rgba(248,251,255,.56)!important; border-color:rgba(255,255,255,.72)!important; box-shadow:0 18px 46px rgba(46,68,96,.17),inset 0 1px 0 rgba(255,255,255,.78)!important; } body.local-light .for314-mention-group{background:rgba(248,251,255,.34)!important} body.local-light .for314-mention-item{background:rgba(255,255,255,.22)!important} body.local-light .for314-mention-item:hover,body.local-light .for314-mention-item.is-active{background:rgba(103,151,226,.16)!important} body.local-light .for314-mention-avatar{background:rgba(255,255,255,.62)!important;border-color:rgba(104,126,156,.18)!important;box-shadow:0 2px 8px rgba(55,76,104,.10)!important} @media(max-width:560px){ .for314-mention-menu{backdrop-filter:blur(24px) saturate(175%)!important;-webkit-backdrop-filter:blur(24px) saturate(175%)!important} .for314-mention-avatar{flex-basis:30px!important;width:30px!important;height:30px!important} } /* v337: fully transparent/frosted mention picker rows (AI/online/offline unified) */ .for314-mention-menu{ background:rgba(18,27,40,.24)!important; border-color:rgba(255,255,255,.22)!important; box-shadow:0 18px 52px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important; backdrop-filter:blur(36px) saturate(190%)!important; -webkit-backdrop-filter:blur(36px) saturate(190%)!important; } .for314-mention-group{ background:rgba(18,27,40,.12)!important; backdrop-filter:blur(28px) saturate(175%)!important; -webkit-backdrop-filter:blur(28px) saturate(175%)!important; } .for314-mention-row{ margin:2px 0!important; background:rgba(118,164,226,.065)!important; border:1px solid rgba(255,255,255,.085)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 14px rgba(0,0,0,.045)!important; backdrop-filter:blur(20px) saturate(165%)!important; -webkit-backdrop-filter:blur(20px) saturate(165%)!important; } .for314-mention-item{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-item:hover,.for314-mention-item.is-active{ background:rgba(115,162,240,.13)!important; } body.local-light .for314-mention-menu{ background:rgba(248,251,255,.20)!important; border-color:rgba(255,255,255,.58)!important; box-shadow:0 18px 48px rgba(46,68,96,.14),inset 0 1px 0 rgba(255,255,255,.62)!important; backdrop-filter:blur(36px) saturate(185%)!important; -webkit-backdrop-filter:blur(36px) saturate(185%)!important; } body.local-light .for314-mention-group{ background:rgba(248,251,255,.10)!important; backdrop-filter:blur(28px) saturate(170%)!important; -webkit-backdrop-filter:blur(28px) saturate(170%)!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.10)!important; border-color:rgba(255,255,255,.34)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 14px rgba(42,63,91,.04)!important; } body.local-light .for314-mention-item{background:transparent!important} body.local-light .for314-mention-item:hover,body.local-light .for314-mention-item.is-active{ background:rgba(103,151,226,.13)!important; } @media(max-width:560px){ .for314-mention-menu{ background:rgba(18,27,40,.22)!important; backdrop-filter:blur(34px) saturate(185%)!important; -webkit-backdrop-filter:blur(34px) saturate(185%)!important; } body.local-light .for314-mention-menu{background:rgba(248,251,255,.18)!important} .for314-mention-row{ backdrop-filter:blur(18px) saturate(160%)!important; -webkit-backdrop-filter:blur(18px) saturate(160%)!important; } } /* v340: frosted glass ONLY inside the mention child window; never blur the whole page */ body.for314-mention-open::before, body.local-light.for314-mention-open::before{ content:none!important; display:none!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* The picker itself is the glass surface. Keep the chat behind it sharp outside this rectangle. */ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ background:rgba(18,27,40,.18)!important; border:1px solid rgba(255,255,255,.24)!important; box-shadow:0 18px 48px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10)!important; backdrop-filter:blur(28px) saturate(185%) brightness(.98)!important; -webkit-backdrop-filter:blur(28px) saturate(185%) brightness(.98)!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(246,250,255,.16)!important; border-color:rgba(255,255,255,.62)!important; box-shadow:0 18px 46px rgba(42,63,91,.13),inset 0 1px 0 rgba(255,255,255,.62)!important; backdrop-filter:blur(30px) saturate(180%) brightness(1.03)!important; -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.03)!important; } /* Rows stay transparent; blur belongs to the child window, not to each card. */ .for314-mention-group, body.local-light .for314-mention-group{ background:rgba(255,255,255,.035)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-row, body.local-light .for314-mention-row{ background:rgba(255,255,255,.035)!important; border-color:rgba(255,255,255,.10)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 3px 10px rgba(0,0,0,.035)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.055)!important; border-color:rgba(255,255,255,.28)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 3px 10px rgba(42,63,91,.03)!important; } .for314-mention-item, body.local-light .for314-mention-item{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-item:hover,.for314-mention-item.is-active{ background:rgba(115,162,240,.12)!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(103,151,226,.11)!important; } @media(max-width:560px){ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ background:rgba(18,27,40,.16)!important; backdrop-filter:blur(30px) saturate(185%) brightness(.99)!important; -webkit-backdrop-filter:blur(30px) saturate(185%) brightness(.99)!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(246,250,255,.14)!important; backdrop-filter:blur(32px) saturate(178%) brightness(1.03)!important; -webkit-backdrop-filter:blur(32px) saturate(178%) brightness(1.03)!important; } } /* v341: the mention LIST has one frosted-glass sheet behind it. Do not blur the whole page and do not make every candidate a white card. */ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ max-height:none!important; overflow:hidden!important; padding:0!important; isolation:isolate!important; background:rgba(20,29,42,.50)!important; border:1px solid rgba(255,255,255,.24)!important; box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10)!important; backdrop-filter:blur(24px) saturate(145%) contrast(.98)!important; -webkit-backdrop-filter:blur(24px) saturate(145%) contrast(.98)!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(224,234,246,.62)!important; border-color:rgba(255,255,255,.68)!important; box-shadow:0 18px 46px rgba(46,68,96,.15),inset 0 1px 0 rgba(255,255,255,.72)!important; backdrop-filter:blur(26px) saturate(138%) contrast(.96) brightness(1.01)!important; -webkit-backdrop-filter:blur(26px) saturate(138%) contrast(.96) brightness(1.01)!important; } .for314-mention-scroll{ position:relative!important; z-index:1!important; max-height:min(230px,52vh)!important; overflow:auto!important; overscroll-behavior:contain!important; padding:5px!important; background:transparent!important; scrollbar-gutter:stable; } /* Section labels sit on the same glass sheet, with only a subtle tint. */ .for314-mention-group{ top:-5px!important; margin:2px 2px 3px!important; background:rgba(20,29,42,.20)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.local-light .for314-mention-group{ background:rgba(232,240,249,.54)!important; border-bottom-color:rgba(70,91,119,.09)!important; } /* Candidates are a readable list on top of the glass, not opaque cards. */ .for314-mention-row, body.local-light .for314-mention-row{ margin:0!important; border:0!important; border-radius:9px!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-row + .for314-mention-row{ border-top:1px solid rgba(255,255,255,.07)!important; } body.local-light .for314-mention-row + .for314-mention-row{ border-top-color:rgba(68,88,116,.08)!important; } .for314-mention-item, body.local-light .for314-mention-item{ background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-item:hover,.for314-mention-item.is-active{ background:rgba(111,158,235,.15)!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(91,139,211,.14)!important; } @media(max-width:560px){ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ background:rgba(20,29,42,.48)!important; backdrop-filter:blur(24px) saturate(145%) contrast(.98)!important; -webkit-backdrop-filter:blur(24px) saturate(145%) contrast(.98)!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(224,234,246,.60)!important; backdrop-filter:blur(26px) saturate(138%) contrast(.96) brightness(1.01)!important; -webkit-backdrop-filter:blur(26px) saturate(138%) contrast(.96) brightness(1.01)!important; } .for314-mention-scroll{max-height:min(230px,52vh)!important;padding:5px!important} } /* ========================================================= v343 Exact mention delimiter + name-only blue highlight A mention becomes active only after: half-width space / full-width space / newline. The textarea itself cannot style substrings, so a mirrored text layer is used only while at least one valid mention exists. The caret remains on the real textarea. ========================================================= */ main .inputrow .for314-mention-input-shell{ position:relative!important; flex:1 1 auto!important; min-width:0!important; display:flex!important; align-items:stretch!important; isolation:isolate; } main .inputrow .for314-mention-input-shell #msgInput{ width:100%!important; flex:1 1 auto!important; } main .inputrow .for314-mention-input-shell.has-valid-mention::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:21px; background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045)); } body.local-light main .inputrow .for314-mention-input-shell.has-valid-mention::before{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,249,252,.92)); } main .inputrow .for314-mention-input-highlight{ position:absolute!important; inset:0!important; z-index:3!important; box-sizing:border-box!important; margin:0!important; padding:9px 15px!important; border:1px solid transparent!important; border-radius:21px!important; overflow:hidden!important; pointer-events:none!important; user-select:none!important; -webkit-user-select:none!important; white-space:pre-wrap!important; overflow-wrap:anywhere!important; word-break:break-word!important; font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important; font-style:inherit!important; line-height:1.35!important; letter-spacing:inherit!important; text-align:start!important; color:var(--text)!important; background:transparent!important; scrollbar-width:none!important; } main .inputrow .for314-mention-input-highlight::-webkit-scrollbar{ display:none!important; } main .inputrow #msgInput.for314-mention-highlight-active{ position:relative!important; z-index:2!important; color:transparent!important; -webkit-text-fill-color:transparent!important; caret-color:var(--text)!important; /* v382: keep the normal composer surface. The mirrored mention text is rendered above the textarea, so the input background must not turn transparent. */ } main .inputrow #msgInput.for314-mention-highlight-active::selection{ background:rgba(72,139,235,.30)!important; color:transparent!important; -webkit-text-fill-color:transparent!important; } .for314-mention-input-token{ color:#4d9bff!important; font-weight:700!important; text-shadow:0 0 14px rgba(77,155,255,.16); } body.local-light .for314-mention-input-token{ color:#126bd1!important; text-shadow:none!important; } /* v343: non-mention text must always keep the same color as the real textarea. JS also copies the computed textarea color to the mirror layer for themed rooms. */ body.local-light main .inputrow .for314-mention-input-highlight{ color:#111!important; } @media(max-width:560px){ main .inputrow .for314-mention-input-highlight{ padding:9px 10px!important; } main .inputrow .for314-mention-input-shell.has-valid-mention::before{ border-radius:19px; } } /* ========================================================= v344 Light-mode mention token readability Only the valid @username token is blue. The remaining composer text stays at a normal readable text color, including Safari/PWA text fill. ========================================================= */ main .inputrow .for314-mention-input-highlight{ opacity:1!important; -webkit-text-fill-color:#f7f9ff!important; } body.local-light main .inputrow .for314-mention-input-highlight{ color:#17212b!important; -webkit-text-fill-color:#17212b!important; opacity:1!important; } .for314-mention-input-token{ color:#4d9bff!important; -webkit-text-fill-color:#4d9bff!important; opacity:1!important; } body.local-light .for314-mention-input-token{ color:#0969da!important; -webkit-text-fill-color:#0969da!important; opacity:1!important; text-shadow:none!important; } /* v346: joined users can reopen the active call from the remaining-time label. */ .voice-call-card-time.is-call-link{ cursor:pointer; user-select:none; -webkit-user-select:none; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .voice-call-card-time.is-call-link:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:6px; } /* ========================================================= FOR314 v347 — composer activity task restore Mention token highlighting wraps #msgInput in a shell. Activity buttons remain direct children of .inputrow. On mobile, phone/private-chat/moderation tasks float in a compact row above the composer so the text field keeps its width. ========================================================= */ main .inputrow > .for314-mention-input-shell{ flex:1 1 0!important; min-width:0!important; } @media(max-width:680px){ main .inputrow{overflow:visible!important} main .inputrow > .arasi-task-notice{ position:absolute!important; left:6px!important; right:auto!important; top:auto!important; bottom:calc(100% + 7px)!important; flex:0 0 36px!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:34px!important; min-height:34px!important; margin:0!important; border-radius:12px!important; z-index:27!important; } main .inputrow > .arasi-task-notice svg{width:18px!important;height:18px!important} main .inputrow > .arasi-task-notice .arasi-task-notice-time{ top:-5px!important; right:-5px!important; min-width:16px!important; height:16px!important; padding:0 3px!important; border-width:1px!important; font-size:8px!important; } /* order above composer: phone -> private chat -> moderation */ main .inputrow:has(> .voice-call-minimized-task) > .arasi-task-notice{left:76px!important} main .inputrow:has(> .direct-chat-invite-task:not([hidden])) > .arasi-task-notice{left:48px!important} main .inputrow:has(> .voice-call-minimized-task):has(> .direct-chat-invite-task:not([hidden])) > .arasi-task-notice{left:118px!important} } /* v351: real mention frosted glass — remove the composer's backdrop root while open */ /* .for314-mention-menu lives inside .inputrow. The composer itself normally uses backdrop-filter, which prevents a nested backdrop-filter from sampling the chat behind it. Disable only that filter while the mention picker is open, then let the picker itself own the blur. The page outside the picker is never blurred. */ /* v385: portaled picker leaves composer backdrop untouched. */ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ position:absolute!important; overflow:hidden!important; background:rgba(13,20,32,.20)!important; border:1px solid rgba(255,255,255,.20)!important; box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12)!important; backdrop-filter:blur(32px) saturate(180%) brightness(.92)!important; -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(.92)!important; } .for314-mention-menu::before, body.for314-mention-open .for314-mention-menu::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 42%,rgba(4,8,15,.05)); backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-menu::after, body.for314-mention-open .for314-mention-menu::after{ content:none!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(241,247,253,.24)!important; border-color:rgba(255,255,255,.76)!important; box-shadow:0 20px 54px rgba(46,67,96,.17),inset 0 1px 0 rgba(255,255,255,.82)!important; backdrop-filter:blur(34px) saturate(165%) brightness(1.04)!important; -webkit-backdrop-filter:blur(34px) saturate(165%) brightness(1.04)!important; } body.local-light .for314-mention-menu::before, body.local-light.for314-mention-open .for314-mention-menu::before{ background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.12) 46%,rgba(230,239,248,.08)); } /* The scrolling content adds a small second frost, while staying transparent. */ .for314-mention-scroll{ position:relative!important; z-index:1!important; background:rgba(12,18,28,.035)!important; backdrop-filter:blur(8px) saturate(120%)!important; -webkit-backdrop-filter:blur(8px) saturate(120%)!important; } body.local-light .for314-mention-scroll{ background:rgba(255,255,255,.035)!important; backdrop-filter:blur(8px) saturate(115%)!important; -webkit-backdrop-filter:blur(8px) saturate(115%)!important; } .for314-mention-group{ position:sticky!important; z-index:2!important; background:rgba(18,26,39,.12)!important; border-bottom:1px solid rgba(255,255,255,.09)!important; backdrop-filter:blur(6px) saturate(125%)!important; -webkit-backdrop-filter:blur(6px) saturate(125%)!important; } body.local-light .for314-mention-group{ background:rgba(255,255,255,.18)!important; border-bottom-color:rgba(74,95,123,.10)!important; } .for314-mention-row, body.local-light .for314-mention-row{ position:relative!important; z-index:1!important; background:rgba(255,255,255,.018)!important; border-radius:12px!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-row + .for314-mention-row{ margin-top:2px!important; border-top:1px solid rgba(255,255,255,.045)!important; } body.local-light .for314-mention-row + .for314-mention-row{ border-top-color:rgba(70,91,119,.055)!important; } .for314-mention-item, body.local-light .for314-mention-item{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .for314-mention-item:hover,.for314-mention-item.is-active{ background:rgba(104,154,236,.17)!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(92,139,211,.14)!important; } @media(max-width:560px){ .for314-mention-menu, body.for314-mention-open .for314-mention-menu{ background:rgba(13,20,32,.17)!important; backdrop-filter:blur(38px) saturate(185%) brightness(.92)!important; -webkit-backdrop-filter:blur(38px) saturate(185%) brightness(.92)!important; } body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(241,247,253,.21)!important; backdrop-filter:blur(40px) saturate(168%) brightness(1.04)!important; -webkit-backdrop-filter:blur(40px) saturate(168%) brightness(1.04)!important; } .for314-mention-scroll{ backdrop-filter:blur(9px) saturate(120%)!important; -webkit-backdrop-filter:blur(9px) saturate(120%)!important; } } /* v352: light-mode mention picker — blue-white translucent frost, not an opaque white sheet */ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(182,201,224,.34)!important; border-color:rgba(105,128,158,.30)!important; box-shadow:0 22px 56px rgba(55,78,108,.18),inset 0 1px 0 rgba(255,255,255,.48)!important; backdrop-filter:blur(38px) saturate(145%) brightness(.96) contrast(.96)!important; -webkit-backdrop-filter:blur(38px) saturate(145%) brightness(.96) contrast(.96)!important; } body.local-light .for314-mention-menu::before, body.local-light.for314-mention-open .for314-mention-menu::before{ background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(210,224,241,.055) 42%,rgba(150,178,210,.035))!important; } body.local-light .for314-mention-scroll{ background:rgba(164,187,215,.045)!important; backdrop-filter:blur(7px) saturate(125%) brightness(.97)!important; -webkit-backdrop-filter:blur(7px) saturate(125%) brightness(.97)!important; } body.local-light .for314-mention-group{ color:#53647a!important; -webkit-text-fill-color:#53647a!important; background:rgba(206,220,238,.26)!important; border-bottom-color:rgba(78,102,134,.12)!important; backdrop-filter:blur(7px) saturate(120%)!important; -webkit-backdrop-filter:blur(7px) saturate(120%)!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.055)!important; border:0!important; box-shadow:none!important; } body.local-light .for314-mention-row + .for314-mention-row{ border-top:1px solid rgba(78,101,132,.07)!important; } body.local-light .for314-mention-item{ color:#152233!important; -webkit-text-fill-color:#152233!important; background:transparent!important; } body.local-light .for314-mention-name{ color:#152233!important; -webkit-text-fill-color:#152233!important; } body.local-light .for314-mention-status{ color:#5b687a!important; -webkit-text-fill-color:#5b687a!important; opacity:.82!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(112,157,218,.18)!important; } body.local-light .for314-mention-avatar{ background:rgba(255,255,255,.32)!important; border-color:rgba(95,119,151,.18)!important; box-shadow:0 2px 8px rgba(54,77,108,.08)!important; } @media(max-width:560px){ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(176,197,223,.32)!important; backdrop-filter:blur(42px) saturate(148%) brightness(.96) contrast(.96)!important; -webkit-backdrop-filter:blur(42px) saturate(148%) brightness(.96) contrast(.96)!important; } body.local-light .for314-mention-scroll{ backdrop-filter:blur(8px) saturate(126%) brightness(.97)!important; -webkit-backdrop-filter:blur(8px) saturate(126%) brightness(.97)!important; } } /* v353: light-mode mention picker — each candidate row is also frosted, not a flat white card */ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(177,198,224,.26)!important; border-color:rgba(102,126,158,.28)!important; box-shadow:0 22px 56px rgba(55,78,108,.17),inset 0 1px 0 rgba(255,255,255,.44)!important; backdrop-filter:blur(42px) saturate(150%) brightness(.96) contrast(.95)!important; -webkit-backdrop-filter:blur(42px) saturate(150%) brightness(.96) contrast(.95)!important; } body.local-light .for314-mention-menu::before, body.local-light.for314-mention-open .for314-mention-menu::before{ background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(210,224,241,.045) 42%,rgba(150,178,210,.02))!important; } body.local-light .for314-mention-scroll{ background:rgba(173,194,219,.018)!important; backdrop-filter:blur(10px) saturate(125%) brightness(.98)!important; -webkit-backdrop-filter:blur(10px) saturate(125%) brightness(.98)!important; } body.local-light .for314-mention-group{ color:#526378!important; -webkit-text-fill-color:#526378!important; background:rgba(200,216,236,.18)!important; border-bottom-color:rgba(78,102,134,.11)!important; backdrop-filter:blur(10px) saturate(124%)!important; -webkit-backdrop-filter:blur(10px) saturate(124%)!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.12)!important; border:1px solid rgba(116,139,170,.12)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.30)!important; backdrop-filter:blur(14px) saturate(132%) brightness(1.01)!important; -webkit-backdrop-filter:blur(14px) saturate(132%) brightness(1.01)!important; } body.local-light .for314-mention-row + .for314-mention-row{ margin-top:4px!important; border-top:1px solid rgba(78,101,132,.03)!important; } body.local-light .for314-mention-item{ color:#152233!important; -webkit-text-fill-color:#152233!important; background:transparent!important; } body.local-light .for314-mention-name{ color:#152233!important; -webkit-text-fill-color:#152233!important; } body.local-light .for314-mention-status{ color:#5b687a!important; -webkit-text-fill-color:#5b687a!important; opacity:.82!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(112,157,218,.16)!important; } body.local-light .for314-mention-avatar{ background:rgba(255,255,255,.24)!important; border-color:rgba(95,119,151,.16)!important; box-shadow:0 2px 8px rgba(54,77,108,.07)!important; } @media(max-width:560px){ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(172,194,220,.24)!important; backdrop-filter:blur(46px) saturate(152%) brightness(.96) contrast(.95)!important; -webkit-backdrop-filter:blur(46px) saturate(152%) brightness(.96) contrast(.95)!important; } body.local-light .for314-mention-scroll{ backdrop-filter:blur(11px) saturate(126%) brightness(.98)!important; -webkit-backdrop-filter:blur(11px) saturate(126%) brightness(.98)!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.11)!important; backdrop-filter:blur(15px) saturate(134%) brightness(1.01)!important; -webkit-backdrop-filter:blur(15px) saturate(134%) brightness(1.01)!important; } } /* v354: light-mode mention scroll blur tuning — make the scroll layer itself visibly frosted */ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(171,193,220,.20)!important; border-color:rgba(100,124,155,.24)!important; box-shadow:0 22px 56px rgba(55,78,108,.15),inset 0 1px 0 rgba(255,255,255,.38)!important; backdrop-filter:blur(44px) saturate(155%) brightness(.97) contrast(.95)!important; -webkit-backdrop-filter:blur(44px) saturate(155%) brightness(.97) contrast(.95)!important; } body.local-light .for314-mention-menu::before, body.local-light.for314-mention-open .for314-mention-menu::before{ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(210,224,241,.028) 42%,rgba(150,178,210,.012))!important; } body.local-light .for314-mention-scroll{ background:rgba(160,184,214,.010)!important; backdrop-filter:blur(18px) saturate(132%) brightness(.985)!important; -webkit-backdrop-filter:blur(18px) saturate(132%) brightness(.985)!important; } body.local-light .for314-mention-group{ color:#536479!important; -webkit-text-fill-color:#536479!important; background:rgba(190,209,232,.11)!important; border-bottom-color:rgba(78,102,134,.08)!important; backdrop-filter:blur(14px) saturate(126%) brightness(.99)!important; -webkit-backdrop-filter:blur(14px) saturate(126%) brightness(.99)!important; } body.local-light .for314-mention-row{ background:rgba(255,255,255,.050)!important; border:1px solid rgba(116,139,170,.08)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important; backdrop-filter:blur(6px) saturate(108%) brightness(1)!important; -webkit-backdrop-filter:blur(6px) saturate(108%) brightness(1)!important; } body.local-light .for314-mention-row + .for314-mention-row{ margin-top:4px!important; border-top:1px solid rgba(78,101,132,.02)!important; } body.local-light .for314-mention-item:hover, body.local-light .for314-mention-item.is-active{ background:rgba(112,157,218,.12)!important; } body.local-light .for314-mention-avatar{ background:rgba(255,255,255,.18)!important; border-color:rgba(95,119,151,.14)!important; box-shadow:0 2px 8px rgba(54,77,108,.05)!important; } @media(max-width:560px){ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(166,189,217,.18)!important; backdrop-filter:blur(48px) saturate(158%) brightness(.97) contrast(.95)!important; -webkit-backdrop-filter:blur(48px) saturate(158%) brightness(.97) contrast(.95)!important; } body.local-light .for314-mention-scroll{ background:rgba(160,184,214,.008)!important; backdrop-filter:blur(20px) saturate(134%) brightness(.985)!important; -webkit-backdrop-filter:blur(20px) saturate(134%) brightness(.985)!important; } body.local-light .for314-mention-group{ backdrop-filter:blur(15px) saturate(128%) brightness(.99)!important; -webkit-backdrop-filter:blur(15px) saturate(128%) brightness(.99)!important; } } /* v355: LIGHT mention real frost fix Root cause: body.local-light .inputrow button { background:#fff !important } outranked the old mention-item rule, and the light .inputrow itself was opaque white. While the picker is open, make the composer backdrop transparent and let .for314-mention-scroll be the single blur owner. */ /* v385: portaled picker leaves light composer surface untouched. */ /* Keep the menu as a thin tinted frame only. Do not create another backdrop root here. */ body.local-light .for314-mention-menu, body.local-light.for314-mention-open .for314-mention-menu{ background:rgba(174,197,225,.15)!important; border:1px solid rgba(100,124,155,.26)!important; box-shadow:0 22px 56px rgba(55,78,108,.16),inset 0 1px 0 rgba(255,255,255,.38)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; isolation:auto!important; } body.local-light .for314-mention-menu::before, body.local-light.for314-mention-open .for314-mention-menu::before{ content:none!important; } /* This is the actual frosted-glass sheet in light mode. */ body.local-light .for314-mention-menu > .for314-mention-scroll, body.local-light.for314-mention-open .for314-mention-menu > .for314-mention-scroll{ position:relative!important; z-index:1!important; background:rgba(196,215,237,.20)!important; backdrop-filter:blur(32px) saturate(155%) brightness(.98) contrast(.96)!important; -webkit-backdrop-filter:blur(32px) saturate(155%) brightness(.98) contrast(.96)!important; } /* Beat the generic light-mode .inputrow button rule explicitly. */ body.local-light main .inputrow .for314-mention-menu .for314-mention-item, body.local-light.for314-mention-open main .inputrow .for314-mention-menu .for314-mention-item{ background:transparent!important; background-color:transparent!important; border-color:transparent!important; box-shadow:none!important; color:#152233!important; -webkit-text-fill-color:#152233!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; -webkit-appearance:none!important; appearance:none!important; } body.local-light main .inputrow .for314-mention-menu .for314-mention-item:hover, body.local-light main .inputrow .for314-mention-menu .for314-mention-item.is-active{ background:rgba(96,143,207,.13)!important; background-color:rgba(96,143,207,.13)!important; } body.local-light .for314-mention-menu .for314-mention-row{ background:rgba(255,255,255,.075)!important; border:1px solid rgba(108,132,164,.08)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.local-light .for314-mention-menu .for314-mention-group{ background:rgba(205,221,239,.12)!important; color:#52647a!important; -webkit-text-fill-color:#52647a!important; border-bottom-color:rgba(78,102,134,.08)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } body.local-light main .inputrow .for314-mention-menu .for314-mention-delete{ background:rgba(255,255,255,.08)!important; border-color:transparent!important; } @media(max-width:560px){ body.local-light .for314-mention-menu > .for314-mention-scroll, body.local-light.for314-mention-open .for314-mention-menu > .for314-mention-scroll{ background:rgba(190,211,235,.18)!important; backdrop-filter:blur(38px) saturate(160%) brightness(.98) contrast(.96)!important; -webkit-backdrop-filter:blur(38px) saturate(160%) brightness(.98) contrast(.96)!important; } } /* ========================================================= v356 /yomiage — direct iOS user-gesture activation bar Cloudflare/TTS API/MP3 conversion are NOT used. The status lives as a second row inside the composer. ========================================================= */ body.for314-yomiage-visible main .inputrow{ flex-wrap:wrap!important; } main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ position:relative!important; inset:auto!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; z-index:8!important; order:99!important; flex:0 0 100%!important; width:100%!important; max-width:none!important; height:30px!important; min-height:30px!important; margin:1px 0 0!important; padding:3px 5px 3px 9px!important; box-sizing:border-box!important; transform:none!important; display:none!important; align-items:center!important; gap:6px!important; border-radius:14px!important; background:rgba(13,20,31,.34)!important; border:1px solid rgba(255,255,255,.10)!important; color:#eef5ff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important; backdrop-filter:blur(12px) saturate(150%)!important; -webkit-backdrop-filter:blur(12px) saturate(150%)!important; font-size:10px!important; font-weight:800!important; line-height:1!important; } main .inputrow > .yomiage-indicator.active{ display:flex!important; } main .inputrow > .yomiage-indicator[hidden]{ display:none!important; } body.local-light main .inputrow > .yomiage-indicator{ background:rgba(238,245,252,.52)!important; border-color:rgba(72,91,115,.14)!important; color:#26384c!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important; } main .inputrow .yomiage-indicator-icon{ flex:0 0 auto!important; font-size:13px!important; } main .inputrow .yomiage-status-text{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } main .inputrow .yomiage-start, main .inputrow .yomiage-stop, body.local-light main .inputrow .yomiage-start, body.local-light main .inputrow .yomiage-stop{ position:relative!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:22px!important; min-height:22px!important; margin:0!important; padding:0 9px!important; border-radius:999px!important; font:inherit!important; font-size:9px!important; font-weight:900!important; line-height:22px!important; cursor:pointer!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; } main .inputrow .yomiage-start[hidden], main .inputrow .yomiage-stop[hidden]{display:none!important} main .inputrow .yomiage-start, body.local-light main .inputrow .yomiage-start{ background:#315da8!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid rgba(255,255,255,.18)!important; box-shadow:0 2px 8px rgba(49,93,168,.22)!important; } main .inputrow .yomiage-stop, body.local-light main .inputrow .yomiage-stop{ background:rgba(239,68,68,.92)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid rgba(255,255,255,.14)!important; box-shadow:none!important; } main .inputrow > .yomiage-indicator.is-pending{ border-color:rgba(102,160,245,.28)!important; } main .inputrow > .yomiage-indicator.is-running{ border-color:rgba(75,205,145,.24)!important; } /* Old floating-indicator spacing is disabled; composer height reserve handles it now. */ .chat.yomiage-active .chatlog{padding-top:inherit!important} @media(max-width:680px){ main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ height:29px!important; min-height:29px!important; margin-top:0!important; padding:3px 4px 3px 8px!important; font-size:9px!important; border-radius:13px!important; } main .inputrow .yomiage-start, main .inputrow .yomiage-stop, body.local-light main .inputrow .yomiage-start, body.local-light main .inputrow .yomiage-stop{ height:21px!important; min-height:21px!important; padding:0 8px!important; font-size:8px!important; line-height:21px!important; } } /* ========================================================= v362 /yomiage status bar — robust composer-bottom placement Keep the first composer row unchanged and reserve a dedicated strip inside the fixed composer instead of relying on flex wrapping. ========================================================= */ body.for314-yomiage-visible main .inputrow{ flex-wrap:nowrap!important; min-height:88px!important; padding-bottom:38px!important; } main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ position:absolute!important; left:8px!important; right:8px!important; top:auto!important; bottom:5px!important; width:auto!important; max-width:none!important; height:27px!important; min-height:27px!important; margin:0!important; padding:3px 5px 3px 9px!important; box-sizing:border-box!important; transform:none!important; z-index:40!important; order:initial!important; flex:none!important; display:none!important; align-items:center!important; gap:6px!important; border-radius:12px!important; background:rgba(13,20,31,.52)!important; border:1px solid rgba(255,255,255,.13)!important; color:#eef5ff!important; -webkit-text-fill-color:#eef5ff!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 10px rgba(0,0,0,.10)!important; backdrop-filter:blur(12px) saturate(150%)!important; -webkit-backdrop-filter:blur(12px) saturate(150%)!important; font-size:10px!important; font-weight:800!important; line-height:1!important; pointer-events:auto!important; } main .inputrow > .yomiage-indicator.active{ display:flex!important; } main .inputrow > .yomiage-indicator[hidden]{ display:none!important; } body.local-light main .inputrow > .yomiage-indicator{ background:rgba(234,243,251,.78)!important; border-color:rgba(72,91,115,.16)!important; color:#26384c!important; -webkit-text-fill-color:#26384c!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 2px 9px rgba(55,75,98,.07)!important; } main .inputrow > .yomiage-indicator .yomiage-indicator-icon{ flex:0 0 auto!important; font-size:13px!important; } main .inputrow > .yomiage-indicator .yomiage-status-text{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } main .inputrow > .yomiage-indicator .yomiage-stop, body.local-light main .inputrow > .yomiage-indicator .yomiage-stop{ position:relative!important; flex:0 0 auto!important; width:auto!important; min-width:42px!important; height:21px!important; min-height:21px!important; margin:0!important; padding:0 9px!important; border-radius:999px!important; background:rgba(239,68,68,.92)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid rgba(255,255,255,.16)!important; box-shadow:none!important; font:inherit!important; font-size:9px!important; font-weight:900!important; line-height:19px!important; } @media(max-width:680px){ body.for314-yomiage-visible main .inputrow{ min-height:83px!important; padding-bottom:34px!important; } main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ left:6px!important; right:6px!important; bottom:4px!important; height:25px!important; min-height:25px!important; padding:2px 4px 2px 8px!important; font-size:9px!important; border-radius:11px!important; } main .inputrow > .yomiage-indicator .yomiage-stop, body.local-light main .inputrow > .yomiage-indicator .yomiage-stop{ min-width:38px!important; height:19px!important; min-height:19px!important; padding:0 7px!important; font-size:8px!important; line-height:17px!important; } } /* ========================================================= v363 /yomiage — compact floating status, no composer height expansion - visible in both dark and light themes - does not change text/composer height when iOS Silent Mode blocks speech ========================================================= */ body.for314-yomiage-visible main .inputrow{ flex-wrap:nowrap!important; min-height:58px!important; padding:8px!important; padding-bottom:8px!important; overflow:visible!important; } main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ position:absolute!important; left:16px!important; right:auto!important; top:auto!important; bottom:-11px!important; width:auto!important; max-width:min(72%,430px)!important; height:23px!important; min-height:23px!important; margin:0!important; padding:2px 4px 2px 8px!important; box-sizing:border-box!important; transform:none!important; z-index:120!important; order:initial!important; flex:none!important; display:none!important; align-items:center!important; gap:5px!important; border-radius:999px!important; background:rgba(12,19,30,.91)!important; border:1px solid rgba(255,255,255,.20)!important; color:#f4f8ff!important; -webkit-text-fill-color:#f4f8ff!important; box-shadow:0 5px 15px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10)!important; backdrop-filter:blur(14px) saturate(155%)!important; -webkit-backdrop-filter:blur(14px) saturate(155%)!important; font-size:9px!important; font-weight:850!important; line-height:1!important; pointer-events:auto!important; opacity:1!important; visibility:visible!important; } main .inputrow > .yomiage-indicator.active, body.local-light main .inputrow > .yomiage-indicator.active{ display:flex!important; opacity:1!important; visibility:visible!important; } main .inputrow > .yomiage-indicator[hidden], body.local-light main .inputrow > .yomiage-indicator[hidden]{ display:none!important; } /* Light mode needs an intentionally visible glass pill; do not inherit generic white button/input chrome. */ body.local-light main .inputrow > .yomiage-indicator{ background:rgba(221,234,247,.96)!important; border-color:rgba(78,103,136,.34)!important; color:#19324c!important; -webkit-text-fill-color:#19324c!important; box-shadow:0 5px 14px rgba(50,76,108,.18),inset 0 1px 0 rgba(255,255,255,.90)!important; backdrop-filter:blur(16px) saturate(145%)!important; -webkit-backdrop-filter:blur(16px) saturate(145%)!important; } main .inputrow > .yomiage-indicator .yomiage-indicator-icon{ flex:0 0 auto!important; font-size:11px!important; color:inherit!important; -webkit-text-fill-color:currentColor!important; } main .inputrow > .yomiage-indicator .yomiage-status-text{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:inherit!important; -webkit-text-fill-color:currentColor!important; } main .inputrow > .yomiage-indicator .yomiage-stop, body.local-light main .inputrow > .yomiage-indicator .yomiage-stop{ position:relative!important; flex:0 0 auto!important; width:auto!important; min-width:34px!important; height:17px!important; min-height:17px!important; margin:0!important; padding:0 7px!important; border-radius:999px!important; background:rgba(228,55,65,.96)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border:1px solid rgba(255,255,255,.22)!important; box-shadow:none!important; font:inherit!important; font-size:8px!important; font-weight:900!important; line-height:15px!important; opacity:1!important; } @media(max-width:680px){ body.for314-yomiage-visible main .inputrow{ min-height:54px!important; padding:6px!important; padding-bottom:6px!important; } main .inputrow > .yomiage-indicator, body.local-light main .inputrow > .yomiage-indicator{ left:13px!important; bottom:-10px!important; max-width:76%!important; height:21px!important; min-height:21px!important; padding:2px 3px 2px 7px!important; gap:4px!important; font-size:8px!important; } main .inputrow > .yomiage-indicator .yomiage-stop, body.local-light main .inputrow > .yomiage-indicator .yomiage-stop{ min-width:31px!important; height:16px!important; min-height:16px!important; padding:0 6px!important; font-size:7px!important; line-height:14px!important; } } /* ========================================================= FOR314 v364 — /meet camera call + SVG controls Existing /call remains audio-only. /meet is up to 4 people, camera OFF by default, and minimizing turns local camera OFF. ========================================================= */ .voice-call-x, .voice-call-minimize{ display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; line-height:1!important; } .voice-call-x svg, .voice-call-minimize svg{ width:17px!important; height:17px!important; display:block!important; } .voice-call-control .ico{ width:25px!important; height:25px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; line-height:1!important; } .voice-call-control .ico svg{ display:block!important; width:24px!important; height:24px!important; } .voice-call-user-state{ width:19px!important; height:19px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:0!important; } .voice-call-user-state svg{ width:18px!important; height:18px!important; display:block!important; } .voice-call-controls.is-meet{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } .voice-call-card.is-meet{ border-color:rgba(105,170,255,.34)!important; } body.local-light .voice-call-card.is-meet{ border-color:rgba(70,125,195,.24)!important; } .voice-call-modal.is-meet{ width:min(94vw,720px)!important; max-height:min(91vh,760px)!important; } .voice-meet-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:12px 0; width:100%; } .voice-meet-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr); } .voice-meet-grid[data-count="1"] .voice-meet-tile{ width:min(100%,520px); justify-self:center; } .voice-meet-grid[data-count="3"] .voice-meet-tile:nth-child(3){ grid-column:1/-1; width:calc(50% - 4.5px); justify-self:center; } .voice-meet-tile{ position:relative; min-width:0; aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:16px; background: radial-gradient(circle at 50% 38%,rgba(92,145,205,.13),transparent 54%), rgba(5,13,23,.50); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.12); } body.local-light .voice-meet-tile{ border-color:rgba(74,106,145,.13); background: radial-gradient(circle at 50% 38%,rgba(106,158,216,.13),transparent 54%), rgba(226,237,247,.54); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(52,74,101,.08); } .voice-meet-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0b1119; transform:translateZ(0); } .voice-meet-tile.is-me .voice-meet-video{ transform:scaleX(-1); } .voice-meet-camera-off{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(235,245,255,.72); } body.local-light .voice-meet-camera-off{color:rgba(44,68,94,.64)} .voice-meet-avatar{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.10); } body.local-light .voice-meet-avatar{ background:rgba(255,255,255,.42); border-color:rgba(73,105,143,.10); } .voice-meet-avatar svg{width:27px;height:27px;display:block} .voice-meet-off-text{font-size:10px;font-weight:850;opacity:.78} .voice-meet-tile-footer{ position:absolute; z-index:2; left:7px; right:7px; bottom:7px; min-height:28px; padding:4px 7px; display:flex; align-items:center; justify-content:space-between; gap:7px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(6,12,20,.48); color:#f5f8fc; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(10px) saturate(135%); -webkit-backdrop-filter:blur(10px) saturate(135%); } body.local-light .voice-meet-tile-footer{ color:#172536; border-color:rgba(74,106,145,.10); background:rgba(249,252,255,.57); } .voice-meet-name{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; font-weight:900; } .voice-meet-mic-state{ flex:0 0 17px; width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; } .voice-meet-mic-state svg{width:16px;height:16px;display:block} .voice-callnow-item.is-meet{border-color:rgba(95,155,225,.22)!important} @media(max-width:560px){ .voice-call-modal.is-meet{ width:min(96vw,520px)!important; padding:10px!important; } .voice-meet-grid{gap:6px;margin:9px 0} .voice-meet-tile{border-radius:12px;aspect-ratio:4/3} .voice-meet-grid[data-count="2"]{ grid-template-columns:minmax(0,1fr); } .voice-meet-grid[data-count="2"] .voice-meet-tile{ width:min(100%,420px); justify-self:center; } .voice-meet-grid[data-count="3"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } .voice-meet-grid[data-count="3"] .voice-meet-tile:nth-child(3){ width:calc(50% - 3px); } .voice-call-controls.is-meet{gap:5px!important} .voice-call-controls.is-meet .voice-call-control{ min-height:58px!important; border-radius:12px!important; } .voice-call-controls.is-meet .voice-call-control .ico{ width:21px!important;height:21px!important; } .voice-call-controls.is-meet .voice-call-control .ico svg{ width:20px!important;height:20px!important; } .voice-call-controls.is-meet .voice-call-control .lbl{font-size:9px!important} } @media(max-width:330px){ .voice-call-controls.is-meet{grid-template-columns:repeat(2,minmax(0,1fr))!important} .voice-meet-tile-footer{left:5px;right:5px;bottom:5px;min-height:24px;padding:3px 5px} .voice-meet-name{font-size:8px} .voice-meet-avatar{width:42px;height:42px} .voice-meet-avatar svg{width:22px;height:22px} } /* ========================================================= FOR314 v365 — /meet mobile fixed-window grid + no inner scrollbar Mobile keeps one modal size; participant tiles subdivide the same video area. ========================================================= */ @media(max-width:560px){ .voice-call-backdrop:has(.voice-call-modal.is-meet){ padding:8px!important; overflow:hidden!important; } .voice-call-modal.is-meet{ box-sizing:border-box!important; width:calc(100vw - 16px)!important; height:min(84dvh,600px)!important; max-height:calc(100dvh - 16px)!important; padding:10px!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; } .voice-call-modal.is-meet .voice-call-top{ flex:0 0 auto!important; min-height:54px!important; } .voice-call-modal.is-meet .voice-meet-grid{ flex:1 1 auto!important; min-height:0!important; height:auto!important; margin:8px 0!important; gap:6px!important; overflow:hidden!important; align-content:stretch!important; } .voice-call-modal.is-meet .voice-meet-tile{ width:100%!important; height:100%!important; min-height:0!important; aspect-ratio:auto!important; justify-self:stretch!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="1"]{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="1"] .voice-meet-tile{ width:100%!important; max-width:none!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="2"]{ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="2"] .voice-meet-tile{ width:100%!important; max-width:none!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="3"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="3"] .voice-meet-tile:nth-child(3){ grid-column:1/-1!important; width:calc(50% - 3px)!important; justify-self:center!important; } .voice-call-modal.is-meet .voice-meet-grid[data-count="4"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; } .voice-call-modal.is-meet .voice-call-controls{ flex:0 0 auto!important; margin-top:0!important; gap:5px!important; } .voice-call-modal.is-meet .voice-call-control{ min-height:56px!important; } .voice-call-modal.is-meet .voice-call-ended{ flex:0 0 auto!important; } } @media(max-width:360px), (max-height:620px){ .voice-call-modal.is-meet{ height:calc(100dvh - 12px)!important; max-height:calc(100dvh - 12px)!important; padding:7px!important; } .voice-call-modal.is-meet .voice-call-top{min-height:47px!important} .voice-call-modal.is-meet .voice-meet-grid{margin:5px 0!important;gap:4px!important} .voice-call-modal.is-meet .voice-call-control{min-height:48px!important} .voice-call-modal.is-meet .voice-call-control .lbl{font-size:8px!important} .voice-call-modal.is-meet .voice-meet-tile-footer{left:4px!important;right:4px!important;bottom:4px!important;min-height:22px!important;padding:2px 5px!important} } /* ========================================================= v367 /live — P2P live stream UI ========================================================= */ .for314-live-card{ margin:8px 4px;padding:11px 12px;border-radius:16px; border:1px solid rgba(255,92,92,.18); background:linear-gradient(180deg,rgba(58,24,29,.70),rgba(18,18,25,.64)); box-shadow:0 12px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06); color:#f8fbff; } body.local-light .for314-live-card{ color:#17212b;background:linear-gradient(180deg,rgba(255,247,248,.92),rgba(246,249,252,.86)); border-color:rgba(206,67,81,.14);box-shadow:0 12px 30px rgba(55,72,93,.10); } .for314-live-card.is-ended{opacity:.65} .for314-live-card-head{display:flex;align-items:center;gap:8px;min-width:0} .for314-live-badge{flex:none;font-size:10px;font-weight:950;color:#ff5c67;letter-spacing:.04em} .for314-live-card-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px} .for314-live-card-meta{margin:6px 0 8px;font-size:10px;opacity:.72} .for314-live-card-join{width:100%;min-height:36px;border:1px solid rgba(255,100,110,.20);border-radius:11px;background:linear-gradient(180deg,rgba(231,74,89,.96),rgba(190,49,64,.92));color:#fff;font:inherit;font-size:11px;font-weight:950} .for314-live-card-join:disabled{opacity:.48} .for314-live-backdrop{ position:fixed;inset:0;z-index:16100;display:flex;align-items:center;justify-content:center;padding:14px; background:rgba(0,0,0,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .for314-live-stage{ position:relative;isolation:isolate;width:min(94vw,820px);height:min(88dvh,720px);overflow:hidden;border-radius:24px; background:#090b0f;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.46); color:#fff; } .for314-live-media{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 30%,rgba(43,55,72,.68),rgba(8,10,14,.98) 68%)} .for314-live-video{display:block;width:100%;height:100%;object-fit:cover;background:#050607} .for314-live-camera-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:rgba(255,255,255,.90)} .for314-live-camera-off-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .for314-live-camera-off-icon svg{width:30px;height:30px} .for314-live-camera-off strong{font-size:17px;font-weight:950}.for314-live-camera-off span{font-size:11px;opacity:.68} .for314-live-top{position:absolute;z-index:4;left:14px;right:14px;top:12px;display:flex;align-items:center;gap:9px;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.42)} .for314-live-top-badge{color:#ff5866;font-size:12px;font-weight:1000;letter-spacing:.04em}.for314-live-time{font-size:11px;font-weight:900}.for314-live-count{margin-left:auto;font-size:11px;font-weight:900} .for314-live-comments{position:absolute;z-index:4;left:12px;right:12px;bottom:132px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none} .for314-live-comment{display:flex;align-items:baseline;gap:6px;max-width:min(82%,560px);padding:7px 10px;border-radius:15px;background:rgba(16,20,28,.42);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(0,0,0,.16);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);font-size:11px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .24s ease,transform .24s ease} .for314-live-comment.is-visible{opacity:1;transform:none}.for314-live-comment.is-me{align-self:flex-end;background:rgba(37,100,165,.42)}.for314-live-comment.is-host{border-color:rgba(255,100,110,.30)} .for314-live-comment strong{flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.for314-live-comment span{min-width:0;overflow-wrap:anywhere} .for314-live-compose{position:absolute;z-index:5;left:12px;right:12px;bottom:74px;display:flex;gap:7px;align-items:center} .for314-live-comment-input{min-width:0;flex:1 1 auto;height:42px;padding:0 14px;border-radius:21px;border:1px solid rgba(255,255,255,.16);outline:none;background:rgba(10,14,20,.44);color:#fff;font:inherit;font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%)} .for314-live-comment-input::placeholder{color:rgba(255,255,255,.58)} .for314-live-comment-send{flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .for314-live-comment-send svg{width:20px;height:20px} .for314-live-controls{position:absolute;z-index:5;left:12px;right:12px;bottom:10px;display:flex;align-items:center;justify-content:center;gap:12px} .for314-live-controls button{min-width:82px;height:54px;padding:5px 12px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(13,18,26,.46);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-weight:900;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)} .for314-live-controls button>span{display:grid;place-items:center;width:23px;height:23px}.for314-live-controls button>span svg{width:22px;height:22px}.for314-live-controls button small{font-size:9px;font-weight:900} .for314-live-controls button.is-off{opacity:.58;background:rgba(34,39,48,.54)} .for314-live-controls button.danger{background:rgba(171,37,50,.72);border-color:rgba(255,102,116,.22)} .for314-live-remote-audio{display:none!important} .for314-live-camera-backdrop{position:fixed;inset:0;z-index:16220;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,12,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .for314-live-camera-modal{width:min(92vw,390px);max-height:min(78dvh,520px);overflow:auto;padding:15px;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(27,37,52,.94),rgba(10,17,27,.92));color:#f7fbff;box-shadow:0 26px 72px rgba(0,0,0,.40);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} .for314-live-camera-modal>strong{display:block;margin-bottom:11px;font-size:15px}.for314-live-camera-list{display:grid;gap:7px} .for314-live-camera-option{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.06);font-size:11px}.for314-live-camera-option input{accent-color:#4da3ff} .for314-live-camera-actions{display:flex;gap:8px;margin-top:12px}.for314-live-camera-actions button{flex:1;min-height:38px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:11px;font-weight:900}.for314-live-camera-actions .primary{background:linear-gradient(180deg,#399ee4,#2580c0);color:#fff} body.local-light .for314-live-camera-modal{color:#17212b;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,246,252,.92));border-color:rgba(83,108,142,.14)}body.local-light .for314-live-camera-option{background:rgba(71,111,154,.07)}body.local-light .for314-live-camera-actions button{border-color:rgba(83,108,142,.13);background:rgba(71,111,154,.07)} @media(max-width:680px){ .for314-live-backdrop{padding:0;background:#000} .for314-live-stage{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none} .for314-live-top{left:10px;right:10px;top:max(9px,env(safe-area-inset-top))} .for314-live-comments{left:8px;right:8px;bottom:calc(126px + env(safe-area-inset-bottom));gap:5px} .for314-live-comment{max-width:88%;padding:6px 9px;font-size:10px;border-radius:13px} .for314-live-compose{left:8px;right:8px;bottom:calc(68px + env(safe-area-inset-bottom))} .for314-live-comment-input{height:39px;font-size:11px}.for314-live-comment-send{width:39px;height:39px;flex-basis:39px} .for314-live-controls{left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));gap:8px} .for314-live-controls button{min-width:72px;height:52px;padding:4px 9px;border-radius:16px}.for314-live-controls button small{font-size:8px} } @media(max-width:340px){ .for314-live-controls{gap:5px}.for314-live-controls button{min-width:62px;height:48px}.for314-live-compose{bottom:calc(62px + env(safe-area-inset-bottom))}.for314-live-comments{bottom:calc(118px + env(safe-area-inset-bottom))} } /* ===== v371 message context menu: copy / translate / report ===== */ .for314-reply-action-menu .for314-context-action-button{ width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px; min-height:36px;margin-top:3px;padding:7px 10px;border:0;border-radius:10px; background:transparent;color:inherit;-webkit-text-fill-color:currentColor; font:inherit;font-weight:800;cursor:pointer;text-align:left; } .for314-reply-action-menu .for314-context-action-button[hidden]{display:none!important} .for314-reply-action-menu .for314-context-action-button:hover, .for314-reply-action-menu .for314-context-action-button:focus-visible{ background:rgba(104,155,255,.13);outline:none; } .for314-context-action-svg{ width:18px;height:18px;display:block;flex:0 0 18px; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .for314-context-action-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .for314-reply-action-menu .for314-context-action-button.is-report{ color:#ffb3b8;-webkit-text-fill-color:#ffb3b8; } .for314-reply-action-menu .for314-context-action-button.is-report:hover, .for314-reply-action-menu .for314-context-action-button.is-report:focus-visible{background:rgba(225,83,91,.16)} body.local-light .for314-reply-action-menu .for314-context-action-button.is-report{ color:#b43039;-webkit-text-fill-color:#b43039; } /* PCは翻訳・通報を右クリックへ集約。スマホ/タブレットの現状UIは維持する。 */ @media (hover:hover) and (pointer:fine){ .message-action-row{display:none!important} } /* ========================================================= v372 — oproom: 3-minute invite door + invitation/official-room hub ========================================================= */ main .inputrow > button.open-room-invite-task{ position:relative!important; flex:0 0 52px!important; width:52px!important; min-width:52px!important; max-width:52px!important; height:42px!important; min-height:42px!important; margin:0!important; padding:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; overflow:visible!important; border:1px solid rgba(245,158,11,.38)!important; border-radius:13px!important; background:linear-gradient(180deg,rgba(120,63,24,.96),rgba(82,43,22,.96))!important; color:#f59e0b!important; box-shadow:0 6px 18px rgba(75,38,18,.26)!important; cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent; z-index:8!important; } main .inputrow > button.open-room-invite-task[hidden]{display:none!important} main .inputrow > button.open-room-invite-task:hover{filter:brightness(1.08)} main .inputrow > button.open-room-invite-task:active{transform:translateY(1px) scale(.985)} .open-room-invite-task-door{display:grid;place-items:center;width:24px;height:24px;line-height:1} .open-room-invite-task-door svg{display:block;width:24px;height:24px;overflow:visible} .open-room-invite-task-count{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid rgba(22,13,9,.95); border-radius:999px; background:#ef4444; color:#fff; font-size:10px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; box-shadow:0 2px 7px rgba(127,29,29,.38); } body.local-light main .inputrow > button.open-room-invite-task{ border-color:rgba(180,83,9,.30)!important; background:linear-gradient(180deg,#fff7ed,#ffedd5)!important; color:#b45309!important; box-shadow:0 5px 16px rgba(120,53,15,.16)!important; } body.local-light .open-room-invite-task-count{border-color:#fff7ed} .open-room-hub-backdrop{ position:fixed; inset:0; z-index:2147483300; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:16px; visibility:hidden; opacity:0; pointer-events:none; background:rgba(2,6,23,.62); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:opacity .18s ease,visibility 0s linear .18s; } .open-room-hub-backdrop.open{ visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; } .open-room-hub-modal{ width:min(560px,calc(100vw - 24px)); max-height:min(78dvh,760px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:22px; background:rgba(14,20,31,.94); color:#f8fafc; box-shadow:0 28px 80px rgba(0,0,0,.42); transform:translateY(8px) scale(.985); transition:transform .18s ease; } .open-room-hub-backdrop.open .open-room-hub-modal{transform:none} .open-room-hub-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px 13px; border-bottom:1px solid rgba(255,255,255,.09); } .open-room-hub-title{font-size:16px;font-weight:800;letter-spacing:.01em} .open-room-hub-close{ width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:11px; background:rgba(255,255,255,.08);color:#fff;font-size:23px;line-height:1;cursor:pointer } .open-room-hub-body{ width:100%;min-width:0;max-width:100%;box-sizing:border-box; overflow-x:hidden;overflow-y:auto;overscroll-behavior-x:none;overscroll-behavior-y:contain; touch-action:pan-y;-webkit-overflow-scrolling:touch; padding:14px;scrollbar-gutter:stable } .open-room-hub-section+.open-room-hub-section{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)} .open-room-hub-section-title{display:flex;align-items:center;gap:8px;margin:0 2px 9px;font-size:12px;font-weight:800;color:#cbd5e1} .open-room-hub-section-count{ min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800 } .open-room-hub-section,.open-room-hub-invite-list,.open-room-hub-official-list{width:100%;min-width:0;max-width:100%;box-sizing:border-box} .open-room-hub-invite-list{display:grid;gap:9px} .open-room-hub-empty{padding:14px;border:1px dashed rgba(255,255,255,.15);border-radius:14px;color:#94a3b8;font-size:12px;text-align:center} .open-room-hub-invite-row{ width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden; display:flex;align-items:center;gap:12px;padding:12px; border:1px solid rgba(245,158,11,.22);border-radius:16px; background:linear-gradient(135deg,rgba(120,63,24,.22),rgba(255,255,255,.035)); } .open-room-hub-invite-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px} .open-room-hub-invite-room{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#fff} .open-room-hub-invite-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#cbd5e1} .open-room-hub-invite-time{font-size:10px;font-weight:700;color:#fbbf24;font-variant-numeric:tabular-nums} .open-room-hub-join{ flex:0 0 auto;min-height:36px;padding:0 13px;border:1px solid rgba(245,158,11,.42);border-radius:12px; background:#d97706;color:#fff;font-size:11px;font-weight:800;cursor:pointer } .open-room-hub-join:hover{filter:brightness(1.07)} .open-room-hub-official-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .open-room-hub-official-row{ width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden; min-height:54px;padding:9px 10px;display:flex;align-items:center;gap:8px;text-align:left; border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.045);color:#e5e7eb;cursor:pointer } .open-room-hub-official-row:hover{background:rgba(255,255,255,.075)} .open-room-hub-official-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px} .open-room-hub-official-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:750} .open-room-hub-official-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:#94a3b8} .open-room-hub-official-action{flex:0 0 auto;font-size:10px;font-weight:800;color:#93c5fd} body.local-light .open-room-hub-backdrop{background:rgba(15,23,42,.36)} body.local-light .open-room-hub-modal{border-color:rgba(15,23,42,.10);background:rgba(255,255,255,.97);color:#111827;box-shadow:0 28px 70px rgba(15,23,42,.22)} body.local-light .open-room-hub-head{border-bottom-color:rgba(15,23,42,.08)} body.local-light .open-room-hub-close{background:#f1f5f9;color:#334155} body.local-light .open-room-hub-section+.open-room-hub-section{border-top-color:rgba(15,23,42,.08)} body.local-light .open-room-hub-section-title{color:#475569} body.local-light .open-room-hub-empty{border-color:rgba(15,23,42,.14);color:#64748b} body.local-light .open-room-hub-invite-row{border-color:rgba(217,119,6,.18);background:linear-gradient(135deg,#fff7ed,#fff)} body.local-light .open-room-hub-invite-room{color:#1f2937} body.local-light .open-room-hub-invite-from{color:#64748b} body.local-light .open-room-hub-invite-time{color:#b45309} body.local-light .open-room-hub-official-row{border-color:rgba(15,23,42,.09);background:#f8fafc;color:#1f2937} body.local-light .open-room-hub-official-row:hover{background:#f1f5f9} body.local-light .open-room-hub-official-main small{color:#64748b} body.local-light .open-room-hub-official-action{color:#2563eb} @media(max-width:680px){ main .inputrow{overflow:visible!important} main .inputrow > button.open-room-invite-task{ position:absolute!important; right:6px!important; left:auto!important; top:auto!important; bottom:calc(100% + 7px)!important; flex:0 0 38px!important; width:38px!important; min-width:38px!important; max-width:38px!important; height:34px!important; min-height:34px!important; border-radius:12px!important; z-index:29!important; } .open-room-invite-task-door,.open-room-invite-task-door svg{width:19px;height:19px} .open-room-invite-task-count{top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;border-width:1px;font-size:8px} .open-room-hub-backdrop{align-items:flex-end;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))} .open-room-hub-modal{width:100%;max-height:min(82dvh,720px);border-radius:20px} .open-room-hub-head{padding:13px 14px 11px} .open-room-hub-body{padding:12px} .open-room-hub-official-list{grid-template-columns:1fr} .open-room-hub-invite-row{padding:10px;gap:9px} .open-room-hub-join{min-height:34px;padding:0 10px} } @media(prefers-reduced-motion:reduce){ .open-room-hub-backdrop,.open-room-hub-modal{transition:none!important} } /* v379 /aichougen 毒舌モード: AIちゃんを紫＋悪魔風に */ html.ai-toxic-mode .message-avatar.ai-comment-avatar, html.ai-toxic-mode .message.ai-comment-message .ai-comment-avatar{ position:relative; overflow:visible!important; background:linear-gradient(145deg,#4a155f,#9c4ed0)!important; border-color:#c36cff!important; box-shadow:0 0 0 2px rgba(186,92,255,.24),0 0 16px rgba(151,55,219,.34)!important; } html.ai-toxic-mode .message-avatar.ai-comment-avatar img, html.ai-toxic-mode .message.ai-comment-message .ai-comment-avatar img{ border-radius:50%; filter:saturate(1.55) hue-rotate(238deg) contrast(1.06); } html.ai-toxic-mode .message-avatar.ai-comment-avatar::after, html.ai-toxic-mode .message.ai-comment-message .ai-comment-avatar::after{ content:'😈'; position:absolute; z-index:4; top:-10px; right:-9px; font-size:14px; line-height:1; filter:none; pointer-events:none; } html.ai-toxic-mode .aiai-character.ai img{ filter:saturate(1.55) hue-rotate(238deg) contrast(1.06) drop-shadow(0 0 10px rgba(167,70,225,.35)); } html.ai-toxic-mode .aiai-character.ai .aiai-portrait{position:relative} html.ai-toxic-mode .aiai-character.ai .aiai-portrait::after{ content:'😈';position:absolute;top:4px;right:15%;z-index:4;font-size:20px;line-height:1;pointer-events:none } html.ai-toxic-mode .ai-dialect-option[data-ai-dialect="toxic"]{ border-color:rgba(183,82,226,.72)!important; background:linear-gradient(145deg,rgba(98,30,125,.13),rgba(184,88,226,.10))!important; } html.ai-toxic-mode .ai-dialect-option[data-ai-dialect="toxic"].selected{ box-shadow:0 0 0 2px rgba(184,88,226,.23),0 10px 24px rgba(92,28,119,.12)!important; } /* v380 /aichougen: Japanese styles + international language groups */ .ai-dialect-group-title{ grid-column:1/-1; margin:8px 2px 1px; padding:7px 9px; border-radius:11px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.075); color:#dbe5f4; font-size:11px; font-weight:900; letter-spacing:.03em; } body.local-light .ai-dialect-group-title{ background:rgba(71,91,125,.055); border-color:rgba(70,91,125,.10); color:#40516a; } .ai-dialect-option[data-ai-dialect="arabic"] .room-font-option-sample{direction:rtl;text-align:right} /* ===== v381 AIちゃん: context translation + profile ===== */ .message-action-row.ai-comment-context-actions{display:none!important} .direct-chat-avatar.ai-virtual-avatar{position:relative;overflow:visible} .direct-chat-avatar.ai-virtual-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit} html.ai-toxic-mode .direct-chat-avatar.ai-virtual-avatar{box-shadow:0 0 0 2px rgba(173,92,255,.42),0 0 20px rgba(128,52,220,.42)} html.ai-toxic-mode .direct-chat-avatar.ai-virtual-avatar img{filter:hue-rotate(225deg) saturate(1.45) contrast(1.05)} html.ai-toxic-mode .direct-chat-avatar.ai-virtual-avatar::after{content:'😈';position:absolute;right:-7px;top:-9px;font-size:16px;line-height:1;filter:none} /* ========================================================= v382 — mention composer surface stability Keep the real input surface intact while @name highlighting is active. The mirror is visual-only and sits above the textarea; the caret/input stay real. Applies to dark, light and /rtxt without changing each theme's background. ========================================================= */ main .inputrow .for314-mention-input-shell .for314-mention-input-highlight{ z-index:3!important; background:transparent!important; pointer-events:none!important; } main .inputrow .for314-mention-input-shell #msgInput.for314-mention-highlight-active{ z-index:2!important; color:transparent!important; -webkit-text-fill-color:transparent!important; /* deliberately no background override */ } /* ========================================================= v385 — mention picker/composer hard separation The mention list is portaled to and positioned above the composer. This prevents picker frost from changing the inputrow surface in dark, light or /rtxt while preserving the existing frosted mention list. ========================================================= */ .for314-mention-menu.for314-mention-portal{ position:fixed!important; z-index:2147482000!important; right:auto!important; bottom:auto!important; margin:0!important; max-height:none!important; overflow:hidden!important; box-sizing:border-box!important; transform:none!important; contain:layout paint style!important; } .for314-mention-menu.for314-mention-portal > .for314-mention-scroll{ max-height:var(--for314-mention-portal-max,min(230px,52vh))!important; overflow:auto!important; overscroll-behavior:contain!important; } body.local-light .for314-mention-menu.for314-mention-portal .for314-mention-item{ background:transparent!important; background-color:transparent!important; border-color:transparent!important; box-shadow:none!important; color:#152233!important; -webkit-text-fill-color:#152233!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; -webkit-appearance:none!important; appearance:none!important; } body.local-light .for314-mention-menu.for314-mention-portal .for314-mention-item:hover, body.local-light .for314-mention-menu.for314-mention-portal .for314-mention-item.is-active{ background:rgba(96,143,207,.13)!important; background-color:rgba(96,143,207,.13)!important; } body.local-light .for314-mention-menu.for314-mention-portal .for314-mention-delete{ background:rgba(255,255,255,.08)!important; border-color:transparent!important; } /* FOR314 command search v1 */ #commandModalBackdrop .command-search-wrap{ flex:0 0 auto; padding:10px 10px 4px; background:#111827; } #commandModalBackdrop .command-search-input{ width:100%; height:40px; box-sizing:border-box; padding:0 13px; border:1px solid #33415c; border-radius:11px; outline:none; background:#172033; color:#f4f7ff; font:inherit; font-size:13px; font-weight:650; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); -webkit-appearance:none; appearance:none; } #commandModalBackdrop .command-search-input::placeholder{ color:#8fa0ba; opacity:1; } #commandModalBackdrop .command-search-input:focus{ border-color:#738cff; box-shadow:0 0 0 3px rgba(115,140,255,.16),inset 0 1px 0 rgba(255,255,255,.04); } #commandModalBackdrop .command-search-empty{ padding:24px 12px; text-align:center; color:#9aa8bd; font-size:12px; font-weight:700; } body.local-light #commandModalBackdrop .command-search-wrap{ background:#f7f9fc !important; } body.local-light #commandModalBackdrop .command-search-input{ border-color:#cbd5e1 !important; background:#ffffff !important; color:#1f2937 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(15,23,42,.04) !important; } body.local-light #commandModalBackdrop .command-search-input::placeholder{ color:#7b8798 !important; } body.local-light #commandModalBackdrop .command-search-input:focus{ border-color:#6584c6 !important; box-shadow:0 0 0 3px rgba(101,132,198,.14) !important; } body.local-light #commandModalBackdrop .command-search-empty{ color:#66758a !important; } @media(max-width:300px){ #commandModalBackdrop .command-search-wrap{padding:6px 6px 2px} #commandModalBackdrop .command-search-input{height:34px;padding:0 9px;border-radius:8px;font-size:10px} #commandModalBackdrop .command-search-empty{padding:18px 8px;font-size:10px} } /* ========================================================= FOR314 COMMAND MODAL DARK CONSISTENCY v387 コマンド一覧のダークモードだけをニュートラルなスレート系に統一。 ライトモードには影響させない。 ========================================================= */ body:not(.local-light) #commandModalBackdrop.command-modal-backdrop{ background:rgba(7,10,15,.34)!important; } body:not(.local-light) #commandModalBackdrop .command-modal{ border-color:rgba(230,237,247,.14)!important; background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)), rgba(22,27,34,.88)!important; color:#f2f5f8!important; box-shadow: 0 24px 72px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10)!important; } body:not(.local-light) #commandModalBackdrop .command-modal-head{ background:rgba(255,255,255,.045)!important; border-bottom-color:rgba(230,237,247,.11)!important; } body:not(.local-light) #commandModalBackdrop .command-modal-title{ color:#f2f5f8!important; } body:not(.local-light) #commandModalBackdrop .command-modal-list{ background:transparent!important; } body:not(.local-light) #commandModalBackdrop .command-search-wrap{ background:transparent!important; border-bottom:1px solid rgba(230,237,247,.07)!important; } body:not(.local-light) #commandModalBackdrop .command-search-input{ border-color:rgba(230,237,247,.14)!important; background:rgba(255,255,255,.055)!important; color:#f2f5f8!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important; } body:not(.local-light) #commandModalBackdrop .command-search-input::placeholder{ color:rgba(222,229,238,.56)!important; } body:not(.local-light) #commandModalBackdrop .command-search-input:focus{ border-color:rgba(186,199,216,.46)!important; background:rgba(255,255,255,.07)!important; box-shadow:0 0 0 3px rgba(182,196,214,.10),inset 0 1px 0 rgba(255,255,255,.065)!important; } body:not(.local-light) #commandModalBackdrop .command-row{ background:rgba(255,255,255,.050)!important; border-color:rgba(230,237,247,.105)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important; } body:not(.local-light) #commandModalBackdrop .command-code{ color:#f4f6f9!important; } body:not(.local-light) #commandModalBackdrop .command-desc{ color:rgba(222,229,238,.70)!important; } body:not(.local-light) #commandModalBackdrop .command-copy, body:not(.local-light) #commandModalBackdrop .command-modal-close{ background:rgba(255,255,255,.065)!important; border-color:rgba(230,237,247,.11)!important; color:#f1f4f8!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 3px 9px rgba(0,0,0,.10)!important; } body:not(.local-light) #commandModalBackdrop .command-copy:hover, body:not(.local-light) #commandModalBackdrop .command-modal-close:hover{ background:rgba(255,255,255,.10)!important; } body:not(.local-light) #commandModalBackdrop .command-category{ color:rgba(230,236,244,.78)!important; } body:not(.local-light) #commandModalBackdrop .command-category::after{ background:linear-gradient(90deg,rgba(230,236,244,.24),rgba(230,236,244,0))!important; } body:not(.local-light) #commandModalBackdrop .command-search-empty{ color:rgba(222,229,238,.66)!important; } /* /shougi online 1v1 3D shogi */ .shougi-card{width:min(500px,calc(100% - 12px));margin:8px auto;padding:12px;border:1px solid rgba(160,105,49,.28);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#fff) 94%,#f5dfbd 6%),color-mix(in srgb,var(--panel,#fff) 97%,transparent));box-shadow:0 10px 30px rgba(89,55,25,.12);color:var(--text,#151821)} .shougi-card-head{display:flex;align-items:center;justify-content:space-between;gap:9px}.shougi-card-head strong{font-size:14px;font-weight:900}.shougi-card-badge{padding:3px 9px;border-radius:999px;background:rgba(165,106,47,.13);font-size:10px;font-weight:900}.shougi-card-desc{margin-top:7px;font-size:11px;line-height:1.55;font-weight:750;color:var(--muted,var(--sub,#6b7280))}.shougi-card-versus{margin-top:7px;padding:7px 9px;border-radius:11px;background:color-mix(in srgb,var(--panel,#fff) 90%,#d6a766 10%);font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shougi-card-action{width:100%;min-height:40px;margin-top:10px;border:0;border-radius:12px;background:#8b5a2b;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:11px;font-weight:900;cursor:pointer;-webkit-appearance:none;appearance:none}.shougi-card-action:disabled{opacity:.48;cursor:default}.shougi-backdrop{position:fixed;inset:0;z-index:2147483440;background:#05070c;opacity:0;pointer-events:none;transition:opacity .15s ease}.shougi-backdrop.open{opacity:1;pointer-events:auto}.shougi-frame{display:block;width:100%;height:100%;border:0;background:#05070c}body.local-light .shougi-card-action{background:#8b5a2b!important;color:#fff!important;-webkit-text-fill-color:#fff!important}body.local-dark .shougi-card-action{background:#d4a265!important;color:#25160a!important;-webkit-text-fill-color:#25160a!important}@media(max-width:390px){.shougi-card{padding:10px;border-radius:15px}.shougi-card-head strong{font-size:12px}.shougi-card-desc{font-size:10px}.shougi-card-action{min-height:38px}}@media(prefers-reduced-motion:reduce){.shougi-backdrop{transition:none!important}} /* v389: target-only moderation report warning; sized for a six-line mobile message */ .moderation-report-warning{ position:relative; display:flex; flex:0 0 auto; align-items:center; justify-content:center; box-sizing:border-box; width:min(620px,calc(100% - 24px)); min-height:164px; margin:12px auto; padding:18px 20px; border:2px solid rgba(255,255,255,.34); border-radius:14px; background:#c91414!important; color:#fff!important; box-shadow:0 8px 24px rgba(128,0,0,.30); text-align:center; font-size:14px; font-weight:900; line-height:1.55; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.34); overflow:hidden; } .moderation-report-warning-text{ display:block; width:100%; min-width:0; color:#fff!important; white-space:normal; overflow-wrap:anywhere; } .moderation-report-warning-line{ display:block; color:#fff!important; min-height:1.55em; } body.local-light .moderation-report-warning, body.local-light .moderation-report-warning *{ color:#fff!important; } @media(max-width:560px){ .moderation-report-warning{ width:calc(100% - 12px); min-height:170px; margin:9px auto; padding:15px 12px; border-radius:12px; font-size:12.5px; line-height:1.5; } .moderation-report-warning-line{min-height:1.5em} } /* v390: two-report text removal notice; intentionally sized for six Japanese lines */ .moderation-ng-text-alert{ position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center; box-sizing:border-box;width:min(620px,calc(100% - 24px));min-height:164px;margin:12px auto; padding:18px 20px;border:1px solid rgba(255,255,255,.28);border-radius:16px; background:linear-gradient(135deg,#c91427,#8d0715);color:#fff!important; box-shadow:0 8px 24px rgba(128,0,0,.30);text-align:center;font-size:14px;font-weight:900; line-height:1.55;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.34);overflow:hidden; } .moderation-ng-text-alert-text{display:block;width:100%;min-width:0;color:#fff!important;white-space:normal;overflow-wrap:anywhere} .moderation-ng-text-alert-line{display:block;color:#fff!important;min-height:1.55em} body.local-light .moderation-ng-text-alert,body.local-light .moderation-ng-text-alert *{color:#fff!important} @media(max-width:560px){ .moderation-ng-text-alert{width:calc(100% - 12px);min-height:170px;margin:9px auto;padding:15px 12px;border-radius:12px;font-size:12.5px;line-height:1.5} .moderation-ng-text-alert-line{min-height:1.5em} } /* v391: rounded command-list close button */ #commandModalBackdrop .command-modal-close{border-radius:12px!important;} /* v393 /aichougen お上品毒舌: elegant gold-violet accent */ html.ai-polite-toxic-mode .message-avatar.ai-comment-avatar, html.ai-polite-toxic-mode .message.ai-comment-message .ai-comment-avatar{ position:relative; overflow:visible!important; background:linear-gradient(145deg,#4b315e,#9a6f3d)!important; border-color:rgba(235,201,116,.86)!important; box-shadow:0 0 0 2px rgba(235,201,116,.20),0 0 16px rgba(138,86,166,.24)!important; } html.ai-polite-toxic-mode .message-avatar.ai-comment-avatar::after, html.ai-polite-toxic-mode .message.ai-comment-message .ai-comment-avatar::after{ content:'✦'; position:absolute; z-index:4; top:-9px; right:-7px; color:#f3d98b; font-size:15px; line-height:1; text-shadow:0 0 8px rgba(243,217,139,.65); pointer-events:none; } html.ai-polite-toxic-mode .aiai-character.ai img{ filter:saturate(1.08) contrast(1.03) drop-shadow(0 0 10px rgba(202,166,88,.30)); } html.ai-polite-toxic-mode .aiai-character.ai .aiai-portrait{position:relative} html.ai-polite-toxic-mode .aiai-character.ai .aiai-portrait::after{ content:'✦';position:absolute;top:4px;right:15%;z-index:4;color:#f3d98b;font-size:20px;line-height:1;pointer-events:none } html.ai-polite-toxic-mode .ai-dialect-option[data-ai-dialect="polite_toxic"]{ border-color:rgba(205,170,91,.72)!important; background:linear-gradient(145deg,rgba(114,72,139,.11),rgba(211,177,96,.10))!important; } html.ai-polite-toxic-mode .ai-dialect-option[data-ai-dialect="polite_toxic"].selected{ box-shadow:0 0 0 2px rgba(220,184,98,.22),0 10px 24px rgba(91,56,111,.12)!important; } html.ai-polite-toxic-mode .direct-chat-avatar.ai-virtual-avatar{ box-shadow:0 0 0 2px rgba(226,190,103,.38),0 0 18px rgba(133,82,157,.28) } html.ai-polite-toxic-mode .direct-chat-avatar.ai-virtual-avatar::after{ content:'✦';position:absolute;right:-6px;top:-8px;color:#f3d98b;font-size:16px;line-height:1;text-shadow:0 0 7px rgba(243,217,139,.65) } /* ========================================================= v394: compact long handles + readable light button-command UI ========================================================= */ .chatlog .message-meta.for314-compact-meta{ display:inline-flex!important; align-items:baseline; gap:.32em; width:auto; max-width:100%; min-width:0; white-space:nowrap!important; overflow:hidden; vertical-align:top; } .chatlog .message-meta.for314-compact-meta .message-meta-name{ display:block; flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chatlog .message-meta.for314-compact-meta .message-meta-time{ display:block; flex:0 0 auto; white-space:nowrap; } .message.with-avatar .message-content{ max-width:calc(100% - 37px); } @media(max-width:430px){ .message.with-avatar .message-content{max-width:calc(100% - 33px)} } /* The generic readability rule paints every bubble descendant white. Button-command controls need their own high-specificity light palette. */ html:not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .chatlog .message.button-command-message .message-bubble .message-command-button, body.local-light main .chatlog .message.button-command-message .message-bubble .message-command-button{ -webkit-appearance:none!important; appearance:none!important; background:linear-gradient(180deg,#ffffff 0%,#f1f4f7 100%)!important; background-color:#f7f9fb!important; color:#18212c!important; -webkit-text-fill-color:#18212c!important; text-shadow:none!important; border:1px solid rgba(68,79,92,.38)!important; box-shadow: 0 2px 5px rgba(23,33,44,.18), inset 0 1px 0 rgba(255,255,255,.95)!important; opacity:1!important; } html:not(.for314-textcolor-active) body.local-light:not(.rainbow-mode) main .chatlog .message.button-command-message .message-bubble .message-command-button:active, body.local-light main .chatlog .message.button-command-message .message-bubble .message-command-button:active{ background:linear-gradient(180deg,#e8edf2 0%,#f5f7f9 100%)!important; box-shadow:inset 0 1px 3px rgba(23,33,44,.18)!important; } /* ========================================================= v398 — /oproom + /atoproom targeted invitation UI ========================================================= */ main .inputrow > button.open-room-invite-task.has-targeted-invite{ border-color:rgba(59,130,246,.48)!important; background:linear-gradient(180deg,rgba(30,64,175,.96),rgba(30,58,138,.96))!important; color:#bfdbfe!important; box-shadow:0 6px 18px rgba(30,64,175,.30)!important; } body.local-light main .inputrow > button.open-room-invite-task.has-targeted-invite{ border-color:rgba(37,99,235,.28)!important; background:linear-gradient(180deg,#eff6ff,#dbeafe)!important; color:#2563eb!important; box-shadow:0 5px 16px rgba(37,99,235,.16)!important; } .open-room-hub-invite-row.is-targeted{ border-color:rgba(59,130,246,.34); background:linear-gradient(135deg,rgba(30,64,175,.30),rgba(59,130,246,.08)); } .open-room-hub-invite-row.is-targeted .open-room-hub-invite-time{color:#93c5fd} .open-room-hub-invite-row.is-targeted .open-room-hub-join{ border-color:rgba(96,165,250,.48);background:#2563eb; } body.local-light .open-room-hub-invite-row.is-targeted{ border-color:rgba(37,99,235,.20);background:linear-gradient(135deg,#eff6ff,#fff); } body.local-light .open-room-hub-invite-row.is-targeted .open-room-hub-invite-time{color:#2563eb} .atoproom-member-list{ display:grid;gap:7px;max-height:min(42dvh,360px);overflow:auto;overscroll-behavior:contain; padding:2px;margin-top:4px; } .atoproom-member-row{ display:grid;grid-template-columns:24px 36px minmax(0,1fr) auto;align-items:center;gap:9px; min-height:52px;padding:7px 9px;border:1px solid rgba(255,255,255,.10);border-radius:14px; background:rgba(255,255,255,.045);cursor:pointer; } .atoproom-member-row:has(input:checked){border-color:rgba(59,130,246,.55);background:rgba(37,99,235,.16)} .atoproom-member-row input{width:18px;height:18px;margin:0;accent-color:#2563eb} .atoproom-member-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:rgba(148,163,184,.20);font-size:13px;font-weight:800} .atoproom-member-avatar img{width:100%;height:100%;object-fit:cover} .atoproom-member-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:750} .atoproom-member-online{font-size:9px;font-weight:800;color:#86efac} body.local-light .atoproom-member-row{border-color:rgba(15,23,42,.10);background:#f8fafc;color:#1f2937} body.local-light .atoproom-member-row:has(input:checked){border-color:rgba(37,99,235,.35);background:#eff6ff} body.local-light .atoproom-member-online{color:#15803d} @media(max-width:520px){ .atoproom-member-row{grid-template-columns:22px 34px minmax(0,1fr);gap:8px} .atoproom-member-online{grid-column:3;font-size:8px;margin-top:-7px} } /* ========================================================= v399 /sitesecurity — AIちゃん公開サイト総合レビュー ========================================================= */ .site-security-backdrop{ position:fixed;inset:0;z-index:2147481200;display:flex;align-items:center;justify-content:center; padding:18px;background:rgba(4,9,18,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px) } .site-security-modal{ width:min(560px,100%);max-height:min(82dvh,720px);overflow:auto;padding:18px;border-radius:20px; border:1px solid rgba(148,163,184,.24);background:var(--panel,#111827);color:var(--text,#eef2f7); box-shadow:0 24px 70px rgba(0,0,0,.38) } .site-security-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px} .site-security-head strong{font-size:17px;line-height:1.3} .site-security-close{width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;font-size:22px;line-height:1;cursor:pointer} .site-security-desc{margin:0 0 14px;color:var(--muted,#9aa4b2);font-size:12px;line-height:1.6} .site-security-form{display:flex;flex-direction:column;gap:10px} .site-security-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800} .site-security-form input{ width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border-radius:12px; border:1px solid var(--border,#334155);background:var(--panel2,#151b28);color:var(--text,#eef2f7);font-size:14px } .site-security-status{min-height:18px;color:var(--muted,#9aa4b2);font-size:11px;line-height:1.45} .site-security-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .site-security-actions button{min-height:40px;padding:8px 13px;border-radius:11px;cursor:pointer;font-weight:800} /* v399.1: keep secondary controls readable in both themes. Global button styles were overriding their foreground/background pair. */ .site-security-cancel,.site-security-close{ background:#263244!important;color:#f8fafc!important;border:1px solid #526176!important; box-shadow:none!important } .site-security-cancel:hover,.site-security-close:hover{background:#334155!important;border-color:#64748b!important} .site-security-cancel:active,.site-security-close:active{background:#1e293b!important} .site-security-cancel:focus-visible,.site-security-close:focus-visible{outline:2px solid #93c5fd!important;outline-offset:2px} .site-security-submit{background:var(--accent,#4f7ddf)!important;color:#fff!important;border-color:transparent!important} .site-security-submit:disabled{opacity:.58;cursor:wait} .site-security-review-message{max-width:min(92%,820px)!important;scroll-margin-top:150px!important} .site-security-review-message .site-security-review-bubble{ white-space:normal!important;display:block!important;-webkit-line-clamp:unset!important; max-height:min(62dvh,680px)!important;overflow:auto!important;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;scrollbar-gutter:stable; background:rgba(24,34,52,.96)!important;color:#eef2f7!important;border:1px solid rgba(148,163,184,.18)!important } .site-security-review-message .site-security-review-bubble.is-error{border-color:rgba(248,113,113,.55)!important} .site-security-markdown{font-size:.84em;line-height:1.58;overflow-wrap:anywhere;color:inherit!important} .site-security-markdown>*:first-child{margin-top:0!important}.site-security-markdown>*:last-child{margin-bottom:0!important} .site-security-markdown h3,.site-security-markdown h4{margin:.15em 0 .65em;font-size:1.08em;line-height:1.35;color:inherit!important} .site-security-markdown p{margin:.58em 0;color:inherit!important} .site-security-markdown ul,.site-security-markdown ol{margin:.55em 0;padding-left:1.45em;color:inherit!important} .site-security-markdown li{margin:.28em 0;color:inherit!important} .site-security-markdown strong{font-weight:900;color:inherit!important} .site-security-markdown code{padding:.08em .34em;border-radius:5px;background:rgba(148,163,184,.16);color:inherit!important;font-size:.92em} .site-security-markdown pre{margin:.65em 0;padding:9px 10px;border-radius:9px;overflow:auto;background:rgba(2,6,23,.5);white-space:pre-wrap;color:inherit!important} .site-security-markdown pre code{padding:0;background:transparent} .site-security-markdown blockquote{margin:.6em 0;padding:.25em .75em;border-left:3px solid rgba(148,163,184,.55);color:inherit!important;opacity:.94} .site-security-markdown a{color:#93c5fd!important;text-decoration:underline;text-underline-offset:2px} .site-security-loading{display:flex;align-items:center;gap:9px;font-size:.9em;color:inherit!important} .site-security-spinner{width:15px;height:15px;flex:0 0 15px;border:2px solid rgba(255,255,255,.28);border-top-color:currentColor;border-radius:50%;animation:siteSecuritySpin .8s linear infinite} @keyframes siteSecuritySpin{to{transform:rotate(360deg)}} body.local-light .site-security-modal{background:#fff!important;color:#111!important;border-color:rgba(17,24,39,.18)!important} body.local-light .site-security-cancel,body.local-light .site-security-close{ background:#f8fafc!important;color:#172033!important;border-color:#aab4c2!important } body.local-light .site-security-cancel:hover,body.local-light .site-security-close:hover{background:#eef2f7!important;border-color:#94a3b8!important} body.local-light .site-security-cancel:active,body.local-light .site-security-close:active{background:#e2e8f0!important} body.local-dark .site-security-cancel,body.local-dark .site-security-close{ background:#263244!important;color:#f8fafc!important;border-color:#526176!important } body.local-light .site-security-desc,body.local-light .site-security-status{color:#586474!important} body.local-light .site-security-form input{background:#fff!important;color:#111!important;border-color:#aab4c2!important} body.local-light main .site-security-review-message .site-security-review-bubble, body.local-light .site-security-review-message .site-security-review-bubble{ background:#f7f9fc!important;color:#172033!important;border-color:#cbd5e1!important } body.local-light .site-security-review-message .site-security-review-bubble *{color:inherit!important} body.local-light .site-security-markdown code{background:#e8edf4!important;color:#172033!important} body.local-light .site-security-markdown pre{background:#eef2f7!important;color:#172033!important} body.local-light .site-security-markdown a{color:#1d4ed8!important} body.local-light .site-security-spinner{border-color:rgba(23,32,51,.22);border-top-color:#172033} body.local-dark .site-security-review-message .site-security-review-bubble *{color:inherit!important} @media(max-width:520px){ .site-security-backdrop{padding:10px;align-items:flex-end}.site-security-modal{width:100%;max-height:88dvh;padding:15px;border-radius:18px 18px 12px 12px} .site-security-actions{display:grid;grid-template-columns:1fr 1.4fr}.site-security-actions button{width:100%;padding-inline:8px;font-size:12px} .site-security-review-message{max-width:96%!important}.site-security-review-message .site-security-review-bubble{max-height:58dvh!important}.site-security-markdown{font-size:.82em;line-height:1.55} } /* v403.1 /sitesecurity Markdown contrast fix Keep code samples readable in both themes even when global chat/code styles use !important. */ body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown pre{ background:#0b1220!important;color:#e5edf7!important;border:1px solid #334155!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown pre code{ background:transparent!important;color:#e5edf7!important;border:0!important;box-shadow:none!important } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown :not(pre)>code{ background:#263244!important;color:#dbeafe!important;border:1px solid #475569!important; box-shadow:none!important } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown a{ color:#93c5fd!important } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown pre{ background:#eef2f7!important;color:#172033!important;border:1px solid #cbd5e1!important; box-shadow:none!important } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown pre code{ background:transparent!important;color:#172033!important;border:0!important;box-shadow:none!important } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown :not(pre)>code{ background:#e2e8f0!important;color:#172033!important;border:1px solid #cbd5e1!important; box-shadow:none!important } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown a{ color:#1d4ed8!important } /* v403.3 /sitesecurity inline-code contrast fix Inline Markdown code must stay dark on the light theme even when global bubble/WebKit text-fill rules try to inherit a near-white foreground. */ body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown :not(pre)>code{ background:#e2e8f0!important; color:#172033!important; -webkit-text-fill-color:#172033!important; border:1px solid #cbd5e1!important; text-shadow:none!important; box-shadow:none!important; } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown :not(pre)>code{ background:#263244!important; color:#dbeafe!important; -webkit-text-fill-color:#dbeafe!important; border:1px solid #475569!important; text-shadow:none!important; box-shadow:none!important; } /* v403.4 /sitesecurity Markdown code readability fix Use a theme-independent dark chip for inline code so glass/bubble text styles cannot produce white-on-white text on iOS Safari. */ .site-security-review-message .site-security-review-bubble .site-security-markdown :not(pre)>code{ display:inline!important; padding:.08em .38em!important; border-radius:6px!important; background:#273244!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:1px solid rgba(15,23,42,.28)!important; text-shadow:0 1px 1px rgba(0,0,0,.55)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(15,23,42,.12)!important; font-weight:700!important; -webkit-font-smoothing:antialiased!important; } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown pre, body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown pre code{ color:#111827!important; -webkit-text-fill-color:#111827!important; text-shadow:none!important; } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown pre, body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown pre code{ color:#f1f5f9!important; -webkit-text-fill-color:#f1f5f9!important; text-shadow:none!important; } /* ========================================================= v404 /sitesecurity — light-theme inline-code contrast hardening Dedicated class avoids generic chat bubble/code rules leaking into AI Markdown. ========================================================= */ .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-inline-code{ display:inline!important; padding:.08em .38em!important; border-radius:6px!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; font-weight:750!important; box-decoration-break:clone!important; -webkit-box-decoration-break:clone!important; } body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-inline-code{ background:#e5eaf1!important; color:#0f172a!important; -webkit-text-fill-color:#0f172a!important; border:1px solid #bcc7d5!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 1px rgba(15,23,42,.08)!important; } body.local-dark .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-inline-code{ background:#273244!important; color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; border:1px solid #526176!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.16)!important; } /* ========================================================= v406 /sitesecurity — Markdown theme isolation Do not rely on body.local-light/local-dark for inline-code colors. The Markdown root receives its own light/dark class from JavaScript. ========================================================= */ .site-security-review-message .site-security-review-bubble .site-security-markdown.site-security-markdown-light .site-security-inline-code{ background:#e5eaf1!important; background-color:#e5eaf1!important; color:#0f172a!important; -webkit-text-fill-color:#0f172a!important; border:1px solid #bcc7d5!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 1px rgba(15,23,42,.08)!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; } .site-security-review-message .site-security-review-bubble .site-security-markdown.site-security-markdown-dark .site-security-inline-code{ background:#273244!important; background-color:#273244!important; color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; border:1px solid #526176!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.16)!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; } /* ========================================================= v407 /sitesecurity — inline-code final light-theme guard JS applies element-level !important styles because legacy LIGHT v6/v309 can force white -webkit-text-fill-color on every message-bubble descendant. This selector is a fallback only and remains scoped to /sitesecurity. ========================================================= */ body.local-light .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-inline-code{ background:#e5eaf1!important; background-color:#e5eaf1!important; color:#0f172a!important; -webkit-text-fill-color:#0f172a!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; } /* ========================================================= v408 /sitesecurity — deterministic inline-code contrast Light mode historically forces white text on bubble descendants. Keep inline code on a dark chip in both themes so the text remains readable even if a legacy white-text rule wins elsewhere. Scoped only to /sitesecurity. ========================================================= */ .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-inline-code{ display:inline!important; padding:.08em .38em!important; border-radius:6px!important; background:#263244!important; background-color:#263244!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:1px solid #526176!important; text-shadow:0 1px 1px rgba(0,0,0,.45)!important; -webkit-text-stroke:0 transparent!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(15,23,42,.16)!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; } /* ========================================================= v409 dot: command — dedicated visual/layout isolation Prevent legacy light-mode color rules and room textcolor:/bubblecolor: from breaking dot art. Keep rows unwrapped and scroll horizontally. ========================================================= */ .message-bubble.for314-dot-text-bubble, .for314-reply-body.for314-dot-text-bubble{ background:#1f2937!important; background-color:#1f2937!important; color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; border:1px solid #475569!important; overflow:auto!important; overflow-wrap:normal!important; word-break:normal!important; white-space:normal!important; } .for314-dot-text-bubble .for314-dot-text-art{ color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; white-space:pre!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; writing-mode:horizontal-tb!important; text-orientation:mixed!important; text-shadow:none!important; max-width:none!important; width:max-content!important; font-size:4px!important; line-height:1!important; letter-spacing:0!important; } /* ========================================================= v410 /sitesecurity — fenced code-block deterministic contrast Match the successful inline-code strategy: use a dark surface with bright text in both themes so legacy light-mode descendant rules cannot cause white-on-light. Scoped only to /sitesecurity Markdown code blocks. ========================================================= */ .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-code-block{ margin:.65em 0!important; padding:10px 12px!important; border-radius:9px!important; overflow:auto!important; background:#172033!important; background-color:#172033!important; color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; border:1px solid #526176!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 8px rgba(15,23,42,.16)!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; } .site-security-review-message .site-security-review-bubble .site-security-markdown .site-security-code-block .site-security-code-block-code{ display:block!important; padding:0!important; background:transparent!important; background-color:transparent!important; color:#f8fafc!important; -webkit-text-fill-color:#f8fafc!important; border:0!important; box-shadow:none!important; text-shadow:none!important; -webkit-text-stroke:0 transparent!important; opacity:1!important; filter:none!important; mix-blend-mode:normal!important; } /* v430 /privacy: reuse the /sitesecurity Markdown card, with a subtle policy accent. */ .privacy-policy-message .privacy-policy-bubble{ border-color:rgba(96,165,250,.42)!important; } .privacy-policy-message .privacy-policy-bubble .site-security-markdown>h3:first-child{ letter-spacing:.01em; } /* FOR314 command category jump chips v502 */ #commandModalBackdrop .command-category-nav{ display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; margin-top:8px; padding:1px 1px 4px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; } #commandModalBackdrop .command-category-nav::-webkit-scrollbar{display:none} #commandModalBackdrop .command-category-jump{ flex:0 0 auto; min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; padding:0 12px; border:1px solid rgba(132,151,190,.34); border-radius:999px; background:rgba(29,40,64,.78); color:#dce6ff; font:inherit; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 3px 12px rgba(0,0,0,.09); -webkit-tap-highlight-color:transparent; } #commandModalBackdrop .command-category-jump:active{ transform:scale(.98); } #commandModalBackdrop .command-category-jump.is-active{ border-color:rgba(123,151,255,.72); background:rgba(79,105,190,.34); color:#fff; box-shadow:0 0 0 2px rgba(115,140,255,.11),inset 0 1px 0 rgba(255,255,255,.08); } #commandModalBackdrop .command-category-jump-icon{ display:inline-flex; align-items:center; justify-content:center; min-width:15px; font-size:13px; line-height:1; } body.local-light #commandModalBackdrop .command-category-jump{ border-color:rgba(123,145,177,.27)!important; background:rgba(255,255,255,.82)!important; color:#52657c!important; box-shadow:0 3px 12px rgba(54,79,112,.06),inset 0 1px 0 rgba(255,255,255,.95)!important; } body.local-light #commandModalBackdrop .command-category-jump.is-active{ border-color:rgba(82,132,210,.46)!important; background:rgba(222,235,255,.92)!important; color:#286bb7!important; box-shadow:0 0 0 2px rgba(75,125,205,.08),inset 0 1px 0 rgba(255,255,255,.95)!important; } @media(max-width:300px){ #commandModalBackdrop .command-category-nav{gap:5px;margin-top:5px;padding-bottom:2px} #commandModalBackdrop .command-category-jump{min-height:29px;padding:0 8px;font-size:9px;gap:4px} #commandModalBackdrop .command-category-jump-icon{min-width:12px;font-size:10px} } /* ========================================================= v508 VoiceChat composer hint Keep the post-send empty composer compact and readable in every bar theme. ========================================================= */ body.for314-voicechat-room main .inputrow #msgInput::placeholder, body.for314-voicechat-room main .inputrow #msgInput::-webkit-input-placeholder{ color:rgba(214,222,234,.58)!important; -webkit-text-fill-color:rgba(214,222,234,.58)!important; opacity:1!important; white-space:nowrap; } body.local-light.for314-voicechat-room main .inputrow #msgInput::placeholder, body.local-light.for314-voicechat-room main .inputrow #msgInput::-webkit-input-placeholder{ color:rgba(98,112,128,.62)!important; -webkit-text-fill-color:rgba(98,112,128,.62)!important; opacity:1!important; } /* ========================================================= v522 — iOS touch scroll inside long composer Long text stays editable, but once the textarea overflows, a one-finger vertical swipe scrolls only inside the textarea. ========================================================= */ main .inputrow #msgInput.for314-composer-scrollable{ overflow-y:auto!important; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scroll-behavior:smooth; } /* v523: popup:online — simple local join/leave history inside the shared popup */ .shared-popup-online-body{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; white-space:normal; overflow-wrap:anywhere; } .shared-popup-online-separator{border-top:1px solid currentColor;opacity:.35;margin:0 0 9px} .shared-popup-online-list{display:flex;flex-direction:column;gap:5px;min-width:0} .shared-popup-online-row{display:grid;grid-template-columns:3.25em minmax(0,1fr);gap:8px;align-items:start;min-width:0;font-size:12px;line-height:1.45} .shared-popup-online-time{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.72} .shared-popup-online-text{min-width:0;overflow-wrap:anywhere;word-break:break-word} .shared-popup-online-empty{font-size:12px;opacity:.6;line-height:1.45} /* ========================================================= v526 — /onlineconsole composer-behind stacking + /wallpaper onlineconsole ========================================================= */ #for314OnlineConsole{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:calc(var(--for314-composer-z,7150) - 2);width:min(320px,38vw);--for314-online-console-max-height:72px;--for314-online-console-safe-bottom:env(safe-area-inset-bottom,0px);height:72px;box-sizing:border-box;visibility:hidden;overflow:hidden;border:1px solid rgba(73,125,78,.28);border-radius:5px;background:rgba(1,5,2,.91);box-shadow:0 8px 26px rgba(0,0,0,.30),inset 0 0 20px rgba(16,70,28,.06);color:#6fa477;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:8px;line-height:1.42;letter-spacing:.01em;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} #for314OnlineConsole[hidden]{display:none!important} .for314-online-console-scroll{position:absolute;inset:0;padding:5px 7px;overflow:hidden;overscroll-behavior:none;touch-action:none;scroll-behavior:auto;scrollbar-width:none;pointer-events:none;user-select:none;-webkit-user-select:none} .for314-online-console-list{display:flex;flex-direction:column;gap:2px;min-width:0}.for314-online-console-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.for314-online-console-empty{opacity:.55;white-space:nowrap} #for314OnlineConsole ::-webkit-scrollbar{display:none;width:0;height:0} #for314WallpaperLayer.for314-online-console-wallpaper{background:#000!important}#for314WallpaperLayer.for314-online-console-wallpaper::before,#for314WallpaperLayer.for314-online-console-wallpaper::after{display:none!important;background-image:none!important} .for314-online-console-wallpaper-list{position:absolute;top:132px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));overflow:hidden;white-space:pre;color:#315e39;opacity:.78;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:10px;line-height:1.55;letter-spacing:.015em;text-shadow:0 0 5px rgba(31,96,44,.16);pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.for314-online-console-wallpaper-list[hidden]{display:none!important} @media(max-width:680px),((hover:none) and (pointer:coarse)){#for314OnlineConsole{right:max(8px,env(safe-area-inset-right));bottom:max(7px,env(safe-area-inset-bottom));width:min(46vw,300px);--for314-online-console-max-height:60px;height:60px;border-radius:4px;font-size:7px;line-height:1.38}.for314-online-console-scroll{padding:4px 6px}.for314-online-console-wallpaper-list{top:118px;font-size:9px;line-height:1.5;opacity:.74}} /* v530: Canvas fireworks share the existing local wallpaper layer. */ #for314WallpaperLayer.for314-fireworks-wallpaper{background:radial-gradient(ellipse at 50% 100%,#101b36 0%,#030714 75%)!important} #for314WallpaperLayer.for314-fireworks-wallpaper::before, #for314WallpaperLayer.for314-fireworks-wallpaper::after{display:none!important;background-image:none!important} .for314-fireworks-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-select:none} /* v541: Rincall-style gradient text. Bubble/background colors stay independent. Text is still readable when text clipping is unsupported. */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ /* v545: the log ID outranks legacy glass/light-theme white-text rules. */ html body #chatlog .message-bubble .for314-personal-rainbow-text.for314-personal-rainbow-text{ background-image:linear-gradient(110deg,#ff755f 0%,#ffae4c 22%,#f0d750 38%,#52d47c 55%,#35c4cd 73%,#4b88ff 100%) !important; background-color:transparent !important; background-clip:text !important; -webkit-background-clip:text !important; color:transparent !important; -webkit-text-fill-color:transparent !important; /* v551: subtle shadow for gradient glyphs over glass bubbles. */ text-shadow:0 1px 2px rgba(0,0,0,.38) !important; box-decoration-break:clone; -webkit-box-decoration-break:clone; } } /* v547 /rtxt2 — v548 full-surface static rainbow, with readable dark text. */ html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow.inputrow{ --for314-quiet-rainbow:linear-gradient(110deg,#69443d 0%,#64563a 22%,#53613e 38%,#365f49 55%,#305b64 73%,#3c5275 100%); --for314-quiet-foreground:#fff;--for314-quiet-placeholder:#d1d7df;--for314-quiet-mention:#9fc9ff; border:1px solid rgba(255,255,255,.44)!important; background:var(--for314-quiet-rainbow)!important; background-size:100% 100%!important; box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.24)!important; animation:none!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput{ background:rgba(255,255,255,.08)!important;background-image:none!important; background-clip:padding-box!important;-webkit-background-clip:padding-box!important; border:1px solid rgba(255,255,255,.34)!important; color:var(--for314-quiet-foreground)!important;-webkit-text-fill-color:var(--for314-quiet-foreground)!important; caret-color:var(--for314-quiet-foreground)!important;text-shadow:none!important; animation:none!important;box-shadow:none!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput:focus{ border-color:rgba(27,55,73,.43)!important;box-shadow:0 0 0 2px rgba(255,255,255,.16)!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput::placeholder{ color:var(--for314-quiet-placeholder)!important;-webkit-text-fill-color:var(--for314-quiet-placeholder)!important;opacity:1!important; } html body.for314-rtxt2-mode main .inputrow :is(#imageBtn#imageBtn,#commandBtn#commandBtn,#sendBtn#sendBtn){ background:var(--for314-quiet-rainbow)!important;background-size:100% 100%!important; border:1px solid rgba(255,255,255,.52)!important; color:var(--for314-quiet-foreground)!important;-webkit-text-fill-color:var(--for314-quiet-foreground)!important; background-clip:padding-box!important;-webkit-background-clip:padding-box!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.20)!important; animation:none!important;text-shadow:none!important; transition:border-color .15s ease!important; } html body.for314-rtxt2-mode main .inputrow #sendBtn#sendBtn::before{ content:none!important;animation:none!important;box-shadow:none!important;background:none!important; } html body.for314-rtxt2-mode main .inputrow #sendBtn#sendBtn::after{ color:var(--for314-quiet-foreground)!important;-webkit-text-fill-color:var(--for314-quiet-foreground)!important;text-shadow:none!important; background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important; } html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow .for314-mention-input-shell.has-valid-mention::before{ background:transparent!important; } html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow .for314-mention-input-highlight{ color:var(--for314-quiet-foreground)!important;-webkit-text-fill-color:var(--for314-quiet-foreground)!important;text-shadow:none!important; background:transparent!important;background-image:none!important; background-clip:border-box!important;-webkit-background-clip:border-box!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput.for314-mention-highlight-active{ color:transparent!important;-webkit-text-fill-color:transparent!important; } html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow .for314-mention-input-token{ color:var(--for314-quiet-mention)!important;-webkit-text-fill-color:var(--for314-quiet-mention)!important;text-shadow:none!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput::selection{ background:#354763!important;color:#fff!important;-webkit-text-fill-color:#fff!important; } html body.for314-rtxt2-mode main .inputrow #msgInput#msgInput.for314-mention-highlight-active::selection{ color:transparent!important;-webkit-text-fill-color:transparent!important; } html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow.inputrow::before, html body.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow.inputrow::after{ content:none!important;animation:none!important;background:none!important;box-shadow:none!important; } /* Follow manual and system theme changes without altering the saved rtxt2 mode. */ html body.local-light.for314-rtxt2-mode.for314-rtxt2-mode main .inputrow.inputrow{ --for314-quiet-rainbow:linear-gradient(110deg,#e79889 0%,#e4b780 22%,#d7cf88 38%,#90c6a1 55%,#80c4cd 73%,#91afe0 100%); --for314-quiet-foreground:#000;--for314-quiet-placeholder:#4d5b65;--for314-quiet-mention:#174f94; } /* v549: emoji keep their native color glyphs outside rainbow text clipping. */ html body #chatlog .message-bubble .for314-personal-native-emoji.for314-personal-native-emoji{ background:none!important;background-image:none!important; background-clip:border-box!important;-webkit-background-clip:border-box!important; color:inherit!important;-webkit-text-fill-color:currentColor!important; text-shadow:none!important; } /* v552: late descendants inherit their own message's resolved personal text color. Rainbow/native-emoji rules have higher specificity and keep their own rendering. */ html body #chatlog .message-bubble[data-for314-textcolor="1"], html body #chatlog .message-bubble[data-for314-textcolor="1"] *{ color:var(--for314-message-text-color)!important; -webkit-text-fill-color:currentColor!important; } /* v558: keep Button command labels readable in light mode, including personal colors. */ html body.local-light #chatlog .message-bubble.button-command-bubble .message-command-button{ color:var(--for314-message-text-color,#18212c)!important; -webkit-text-fill-color:currentColor!important; text-shadow:0 1px 1px rgba(0,0,0,.20)!important; } html body.local-light #chatlog .message-bubble.button-command-bubble[data-for314-textcolor="1"] .message-command-button{ text-shadow:0 1px 1px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.55)!important; } /* v559: news shares the existing green terminal; long news wraps within its small frame. */ #for314OnlineConsole .for314-online-console-news-row{ white-space:normal;overflow-wrap:anywhere;display:-webkit-box; -webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;flex:none; } /* v560: display privacy is independent of notification receipt modes. */ .for314-notification-privacy{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid rgba(140,160,185,.28);border-radius:12px;cursor:pointer;color:inherit} .for314-notification-privacy input{flex:none;width:20px;height:20px;margin:2px 0;accent-color:#3b82f6} .for314-notification-privacy span{display:flex;flex-direction:column;gap:4px;min-width:0} .for314-notification-privacy strong{font-size:13px;color:inherit} .for314-notification-privacy small{font-size:11px;line-height:1.5;opacity:.78;color:inherit} /* ========================================================= v567 — alert:/confirm: compact composer-underbar panels - no fullscreen backdrop - about /consolenews height - stays until the user presses a choice ========================================================= */ .native-like-alert-backdrop, .confirm-choice-backdrop{ position:fixed!important; inset:auto!important; left:50%!important; right:auto!important; bottom:max(7px,env(safe-area-inset-bottom,0px))!important; z-index:calc(var(--for314-composer-z,7150) + 5)!important; width:min(860px,calc(100vw - 24px))!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; display:block!important; background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; box-shadow:none!important; opacity:0!important; transform:translate(-50%,14px)!important; transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1)!important; pointer-events:none!important; } .native-like-alert-backdrop.open, .confirm-choice-backdrop.open{ opacity:1!important; transform:translate(-50%,0)!important; } .native-like-alert-backdrop.closing, .confirm-choice-backdrop.closing{ opacity:0!important; transform:translate(-50%,12px)!important; pointer-events:none!important; } .native-like-alert-dialog, .confirm-choice-modal{ box-sizing:border-box!important; width:100%!important; min-width:0!important; height:60px!important; min-height:60px!important; max-height:60px!important; margin:0!important; padding:7px 8px 7px 12px!important; display:flex!important; align-items:center!important; gap:9px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:16px!important; background:linear-gradient(135deg,rgba(25,32,45,.88),rgba(13,18,27,.82))!important; color:#eef4ff!important; box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important; -webkit-backdrop-filter:blur(20px) saturate(155%)!important; backdrop-filter:blur(20px) saturate(155%)!important; text-align:left!important; transform:none!important; transition:none!important; pointer-events:auto!important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; } .native-like-alert-message, .confirm-choice-question{ flex:1 1 auto!important; min-width:0!important; min-height:0!important; max-height:42px!important; margin:0!important; padding:0!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; place-items:initial!important; white-space:normal!important; overflow-wrap:anywhere!important; color:inherit!important; font-size:12px!important; font-weight:700!important; line-height:1.35!important; } .native-like-alert-ok{ flex:0 0 64px!important; width:64px!important; min-width:64px!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0 10px!important; border:1px solid rgba(112,159,255,.46)!important; border-radius:12px!important; background:rgba(49,93,168,.92)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-size:12px!important; font-weight:900!important; line-height:1!important; cursor:pointer!important; } .confirm-choice-actions{ flex:0 0 auto!important; display:flex!important; grid-template-columns:none!important; align-items:center!important; gap:6px!important; margin:0!important; } .confirm-choice-button{ width:62px!important; min-width:62px!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0 8px!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:12px!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-size:11px!important; font-weight:900!important; line-height:1!important; cursor:pointer!important; } .confirm-choice-button.yes{ border-color:rgba(112,159,255,.46)!important; background:rgba(49,93,168,.92)!important; } .confirm-choice-button.no{ background:rgba(255,255,255,.075)!important; } .confirm-choice-button:disabled{opacity:.5!important} .confirm-choice-badge,.confirm-choice-by,.confirm-choice-timer,.confirm-choice-reaction{display:none!important} body.local-light .native-like-alert-dialog, body.local-light .confirm-choice-modal{ border-color:rgba(55,70,88,.16)!important; background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,246,252,.88))!important; color:#182433!important; box-shadow:0 10px 26px rgba(43,61,80,.13),inset 0 1px 0 rgba(255,255,255,.82)!important; } body.local-light .native-like-alert-ok, body.local-light .confirm-choice-button.yes{ color:#fff!important;-webkit-text-fill-color:#fff!important; } body.local-light .confirm-choice-button.no{ border-color:rgba(55,70,88,.14)!important; background:rgba(58,78,104,.08)!important; color:#263548!important; -webkit-text-fill-color:#263548!important; } @media(max-width:680px),((hover:none) and (pointer:coarse)){ .native-like-alert-backdrop,.confirm-choice-backdrop{ width:calc(100vw - 16px)!important; bottom:max(7px,env(safe-area-inset-bottom,0px))!important; } .native-like-alert-dialog,.confirm-choice-modal{ height:60px!important;min-height:60px!important;max-height:60px!important; border-radius:14px!important;padding:6px 7px 6px 10px!important;gap:7px!important; } .native-like-alert-message,.confirm-choice-question{font-size:11px!important;max-height:38px!important} .native-like-alert-ok{flex-basis:56px!important;width:56px!important;min-width:56px!important;height:38px!important;min-height:38px!important} .confirm-choice-button{width:54px!important;min-width:54px!important;height:38px!important;min-height:38px!important;font-size:10px!important;padding:0 5px!important} } @media(max-width:360px){ .native-like-alert-message,.confirm-choice-question{font-size:10px!important} .confirm-choice-actions{gap:4px!important} .confirm-choice-button{width:48px!important;min-width:48px!important} } @media(prefers-reduced-motion:reduce){ .native-like-alert-backdrop,.confirm-choice-backdrop{transition:none!important} } /* ========================================================= v568 — alert / confirm compact paper-deck under composer - shared FIFO deck for alert + confirm - only 3 cards are visible; item 4+ waits in memory - only the oldest/front card is interactive - no fullscreen overlay, no icon, no timeout - dark / light mode supported ========================================================= */ .for314-prompt-deck{ position:fixed!important; z-index:calc(var(--for314-composer-z,7150) + 7)!important; height:64px!important; min-height:64px!important; max-height:64px!important; margin:0!important; padding:0!important; transform:translateX(-50%)!important; pointer-events:none!important; overflow:visible!important; isolation:isolate!important; } .for314-prompt-deck[hidden]{display:none!important} .for314-prompt-card{ position:absolute!important; box-sizing:border-box!important; height:50px!important; min-height:50px!important; max-height:50px!important; margin:0!important; padding:6px 7px 6px 11px!important; display:flex!important; align-items:center!important; gap:8px!important; overflow:hidden!important; border:1px solid rgba(137,174,232,.30)!important; border-radius:14px!important; background:linear-gradient(145deg,rgba(28,37,53,.97),rgba(15,21,31,.95))!important; color:#eef4ff!important; -webkit-text-fill-color:currentColor!important; box-shadow:0 9px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)!important; -webkit-backdrop-filter:blur(18px) saturate(150%)!important; backdrop-filter:blur(18px) saturate(150%)!important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif!important; transform-origin:50% 100%!important; } .for314-prompt-card[data-depth="0"]{ top:14px!important;left:0!important;width:100%!important;z-index:30!important; pointer-events:auto!important; animation:for314PromptFrontIn .20s cubic-bezier(.2,.82,.2,1) both; } .for314-prompt-card[data-depth="1"]{ top:7px!important;left:7px!important;width:calc(100% - 14px)!important;z-index:20!important; opacity:.92!important;pointer-events:none!important; box-shadow:0 6px 16px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.07)!important; animation:for314PromptRearIn .18s ease-out both; } .for314-prompt-card[data-depth="2"]{ top:0!important;left:14px!important;width:calc(100% - 28px)!important;z-index:10!important; opacity:.72!important;pointer-events:none!important; box-shadow:0 4px 12px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.06)!important; animation:for314PromptRearIn .18s ease-out both; } .for314-prompt-message{ flex:1 1 auto!important; min-width:0!important; max-height:34px!important; margin:0!important; padding:0!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; white-space:normal!important; overflow-wrap:anywhere!important; color:inherit!important; -webkit-text-fill-color:currentColor!important; font-size:12px!important; font-weight:750!important; line-height:1.32!important; } .for314-prompt-actions{ flex:0 0 auto!important; min-width:0!important; display:flex!important; align-items:center!important; gap:5px!important; margin:0!important; padding:0!important; } .for314-prompt-action{ box-sizing:border-box!important; min-width:54px!important; height:36px!important; min-height:36px!important; margin:0!important; padding:0 10px!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:11px!important; background:rgba(255,255,255,.075)!important; color:#f3f6fb!important; -webkit-text-fill-color:#f3f6fb!important; font-size:11px!important; font-weight:900!important; line-height:1!important; cursor:pointer!important; touch-action:manipulation!important; -webkit-tap-highlight-color:transparent!important; } .for314-prompt-action.ok, .for314-prompt-action.yes{ border-color:rgba(112,159,255,.52)!important; background:linear-gradient(180deg,rgba(62,116,211,.98),rgba(42,84,158,.98))!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 4px 12px rgba(49,93,168,.24)!important; } .for314-prompt-action.no{ background:rgba(255,255,255,.065)!important; } .for314-prompt-action:active{transform:translateY(1px)!important} .for314-prompt-action:focus-visible{outline:2px solid rgba(116,170,255,.86)!important;outline-offset:1px!important} .for314-prompt-action:disabled{opacity:.52!important;cursor:default!important} body.local-light .for314-prompt-card{ border-color:rgba(69,91,121,.18)!important; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,247,252,.96))!important; color:#172334!important; -webkit-text-fill-color:currentColor!important; box-shadow:0 9px 22px rgba(42,62,87,.14),inset 0 1px 0 rgba(255,255,255,.96)!important; } body.local-light .for314-prompt-card[data-depth="1"]{ border-color:rgba(69,91,121,.16)!important; background:linear-gradient(145deg,rgba(250,252,255,.98),rgba(233,240,248,.97))!important; box-shadow:0 6px 15px rgba(42,62,87,.11),inset 0 1px 0 rgba(255,255,255,.96)!important; } body.local-light .for314-prompt-card[data-depth="2"]{ border-color:rgba(69,91,121,.14)!important; background:linear-gradient(145deg,rgba(247,250,254,.98),rgba(228,236,246,.97))!important; } body.local-light .for314-prompt-action{ border-color:rgba(53,75,103,.15)!important; background:rgba(70,93,122,.08)!important; color:#26374d!important; -webkit-text-fill-color:#26374d!important; } body.local-light .for314-prompt-action.ok, body.local-light .for314-prompt-action.yes{ border-color:rgba(55,109,202,.50)!important; background:linear-gradient(180deg,#4c82dc,#3568be)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } @keyframes for314PromptFrontIn{ from{opacity:0;transform:translateY(16px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes for314PromptRearIn{ from{opacity:0;transform:translateY(10px)} to{transform:translateY(0)} } @media(max-width:680px),((hover:none) and (pointer:coarse)){ .for314-prompt-deck{height:62px!important;min-height:62px!important;max-height:62px!important} .for314-prompt-card{height:48px!important;min-height:48px!important;max-height:48px!important;border-radius:13px!important;padding:5px 6px 5px 10px!important;gap:6px!important} .for314-prompt-card[data-depth="0"]{top:14px!important} .for314-prompt-card[data-depth="1"]{top:7px!important;left:6px!important;width:calc(100% - 12px)!important} .for314-prompt-card[data-depth="2"]{top:0!important;left:12px!important;width:calc(100% - 24px)!important} .for314-prompt-message{font-size:11px!important;max-height:32px!important} .for314-prompt-actions{gap:4px!important} .for314-prompt-action{min-width:49px!important;height:34px!important;min-height:34px!important;padding:0 7px!important;font-size:10px!important;border-radius:10px!important} } @media(max-width:360px){ .for314-prompt-message{font-size:10px!important} .for314-prompt-action{min-width:44px!important;padding:0 5px!important} } @media(prefers-reduced-motion:reduce){ .for314-prompt-card{animation:none!important;transition:none!important} } /* v587: full AI text, safe policy Markdown, bounded scrolling after expansion. */ .pyoko-peek-character[data-ai-full-speech="true"] .pyoko-peek-speech{white-space:pre-wrap;overflow-wrap:anywhere;width:max-content;max-width:min(75vw,360px);max-height:30vh;overflow:auto;pointer-events:auto} .for314-ai-markdown-body{max-height: min(60vh,32rem);overflow:auto;overflow-wrap:anywhere;white-space:normal;overscroll-behavior:contain} .for314-ai-markdown-body.is-collapsed{max-height:9rem;overflow:hidden} .for314-ai-markdown-body .site-security-markdown{color:inherit;font-size:inherit;line-height:1.6;white-space:normal} .for314-ai-markdown-body .site-security-markdown p{margin:.35em 0} .for314-ai-markdown-body .site-security-markdown h3,.for314-ai-markdown-body .site-security-markdown h4{color:inherit;margin:.6em 0 .3em;font-size:1.1em} .for314-ai-markdown-body .site-security-markdown pre{max-width:100%;overflow:auto;white-space:pre;tab-size:2} .for314-ai-markdown-body .site-security-markdown a{color:var(--link,#65baff)!important;text-decoration:underline} body.local-light .for314-ai-markdown-body .site-security-markdown a{color:#145ba8!important} .for314-ai-markdown-bubble .message-more-toggle{display:block;appearance:none;background:transparent!important;border:0;box-shadow:none;color:inherit;text-decoration:underline;padding:5px 0;cursor:pointer}