: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 3.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;
    }
    #drawCountdown{
      position:absolute;top:14px;left:50%;transform:translateX(-50%);
      padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.48);
      color:#fff;font-weight:900;font-size:14px;pointer-events:none;z-index:2;
    }
    #drawHint{
      position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
      color:rgba(255,255,255,.82);font-size:12px;pointer-events:none;
      white-space:nowrap;z-index:2;
    }
    @media(max-width:300px){
      #drawCountdown{top:7px;font-size:11px;padding:5px 8px}
      #drawHint{bottom:7px;font-size:9px}
    }


    #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}}

    /* 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;
}
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}
    }


    /* ---------- 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)}
    #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;
      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分・最大3人 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;
    }
    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-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-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-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}

    /* =========================================================
       投稿通報 / 画像投稿ルール確認（通常版のみ）
       ========================================================= */
    .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}
      .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(168px + env(safe-area-inset-bottom))!important;
      left:50%!important;
      width:min(900px,100%)!important;
      height:auto!important;
      min-height:0!important;
      padding:18px 20px 28px!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:rgba(17,22,32,.76)!important;
      box-shadow:0 18px 46px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06)!important;
      backdrop-filter:blur(24px) saturate(155%);
      -webkit-backdrop-filter:blur(24px) saturate(155%);
    }
    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:rgba(248,250,253,.78)!important;
      border-color:rgba(58,73,91,.13)!important;
      box-shadow:0 18px 42px rgba(43,61,80,.13),inset 0 1px 0 rgba(255,255,255,.8)!important;
    }
    body.local-light main .inputrow #msgInput{
      background:rgba(255,255,255,.72)!important;
      color:#111!important;
      border-color:rgba(56,71,88,.12)!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,.72)!important;
      color:#202a35!important;
      border-color:rgba(50,65,82,.13)!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(151px + env(safe-area-inset-bottom))!important;
        width:100%!important;
        padding:15px 11px 24px!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;
      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{
      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);
    }

    @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;
      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;
      border:1px solid rgba(40,50,65,.09)!important;
    }
    body.local-light .message.mine .message-bubble.slide-lock-bubble.is-unlocked{
      background:#3276d2!important;
      color:#fff!important;
      border-color:transparent!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;
  }
}