.shoutbox .shout-corner{display:none}
/* A measured tail lets the last page action clear the open chat without moving
   existing content. The native page/ancestor scroller owns this space. */
.game-frame .game-main > .shout-scroll-reserve{min-height:0;flex:none;margin:0;pointer-events:none;overflow-anchor:none}
.shout-scroll-reserve > div{height:0}
/* The entire curved corner is a touch target; it never hides the inbox count. */
.game-frame .shoutbox.collapsed{left:auto;right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px);width:60px;height:60px;max-width:none;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none}
.game-frame .shoutbox.collapsed .shout-header{display:none}
.game-frame .shoutbox:is(.collapsed,[data-shout-motion]) .shout-corner{display:block;position:absolute;inset:auto 0 0 auto;width:60px;height:60px;min-height:60px;padding:0;border-radius:100% 0 0 0;border:0;background:none;color:var(--control-ink);box-shadow:none;touch-action:manipulation;text-align:center}
.game-frame .shoutbox:not(.collapsed) .shout-corner{pointer-events:none}
.game-frame .shoutbox.collapsed .shout-panel{display:none}
.game-frame .shoutbox .corner-chat-icon{position:absolute;right:9px;bottom:10px;width:23px;height:23px}
.game-frame .shoutbox .corner-count{position:absolute;display:flex;align-items:center;justify-content:center;gap:3px;font-size:9px;font-weight:750;line-height:16px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;border:1px solid var(--theme-line,#5e909a);font-variant-numeric:tabular-nums;box-shadow:0 1px 4px #00172733}
.game-frame .shoutbox .corner-mail{right:4px;top:1px;background:#f4cf84;color:#253c4a}
.game-frame .shoutbox .corner-mail svg{width:11px;height:9px}
.game-frame .shoutbox .corner-unseen{left:0;bottom:4px;background:var(--theme-soft,#d2eded);color:var(--theme-ink,#164759)}
.game-frame .shoutbox .shout-corner:focus-visible{outline:2px solid var(--theme-gold,#f4cf84);outline-offset:-4px}


/* Both states share the viewport edge; the open header uses one row. */
.game-frame .shoutbox:not(.collapsed){right:env(safe-area-inset-right,0px);bottom:env(safe-area-inset-bottom,0px)}
.game-frame .shoutbox:not(.collapsed) .shout-header{min-height:44px;height:44px;padding:4px 6px 4px 48px;gap:8px;border-bottom:1px solid var(--theme-line,#bad2d5)}
.shoutbox .shout-mail-link{display:flex;align-items:center;gap:5px;flex:none;white-space:nowrap;min-height:36px}
.shoutbox .shout-channel-picker{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.shoutbox .shout-collapse{display:grid;place-items:center;width:36px;min-height:36px;padding:0;flex:none}
@media(max-width:550px){
 .game-frame .shoutbox:not(.collapsed){width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
 .game-frame .shoutbox:not(.collapsed) .shout-header{height:48px;min-height:48px;padding:2px 4px;gap:3px}
 .shoutbox .shout-mail-label{display:none}
 .shoutbox .shout-mail-link{justify-content:center;min-width:44px;min-height:44px}
 .shoutbox .shout-header .shout-mobile-size{min-width:44px;min-height:44px;padding:4px 6px}
 .shoutbox .shout-collapse{width:44px;min-height:44px}
}

/* Keep each new channel hidden until its latest row and avatars are prepared. */
.shoutbox .shout-history-region{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.shoutbox .shout-history{scroll-behavior:auto;overflow-anchor:none}
.shoutbox .shout-history:not([data-history-ready="true"]){visibility:hidden}
.shoutbox .shout-history-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;animation:shout-loading-reveal 0s .2s forwards}
.shoutbox .shout-history[data-history-ready="true"]+.shout-history-loading{display:none}
.shoutbox .shout-history-loading span{width:18px;height:18px;border:2px solid var(--theme-line,#bad2d5);border-top-color:var(--theme-muted,#537480);border-radius:50%;animation:shout-loading-turn .8s linear infinite}
@keyframes shout-loading-reveal{to{opacity:1}}
@keyframes shout-loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.shoutbox .shout-history-loading span{animation:none}}

/* A missing/interrupted browser helper must never hide loaded messages forever.
   The normal helper reveals immediately after preparation; this is a bounded fallback. */
.shoutbox .shout-history[data-history-loaded="true"]:not([data-history-ready="true"]){animation:shout-history-fallback 0s 1.2s forwards}
.shoutbox .shout-history[data-history-loaded="true"]+.shout-history-loading{animation:shout-loading-reveal 0s .2s forwards,shout-loading-dismiss 0s 1.2s forwards}
@keyframes shout-history-fallback{to{visibility:visible}}
@keyframes shout-loading-dismiss{to{visibility:hidden}}

/* Use the header's enamel palette, light edge and tactile controls throughout. */
.game-frame .shoutbox:not(.collapsed){border:0;border-radius:22px 22px 0 0;background:none;box-shadow:none;overflow:visible}
.game-frame .shoutbox .shout-panel{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;width:100%;overflow:hidden;border:1px solid var(--control-edge);border-bottom:0;border-radius:inherit;background:var(--theme-surface,#f7fcfc);box-shadow:inset 0 1px 0 var(--control-light),0 -6px 30px var(--control-shadow),0 16px 48px #050c2026;transform-origin:100% 100%}
.game-frame .shoutbox:not(.collapsed) .shout-header{background:linear-gradient(145deg,var(--control-top),var(--control-bottom));border-bottom-color:color-mix(in srgb,var(--control-edge) 65%,transparent);box-shadow:inset 0 1px 0 var(--control-light)}
.game-frame .shoutbox .shout-mail-link{border-radius:18px;padding:0 7px;color:var(--control-ink);text-decoration:none}
.game-frame .shoutbox .shout-header-actions{gap:5px}
.game-frame .shoutbox .shout-header-actions button{border:1px solid var(--control-edge);border-radius:50%;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));color:var(--control-ink);box-shadow:inset 0 1px 0 var(--control-light),0 2px 4px var(--control-shadow)}
.game-frame .shoutbox .shout-header-actions .shout-collapse{width:42px;height:34px;min-height:34px;border-radius:10px}
.game-frame .shoutbox .shout-reset-size{width:32px;height:32px;flex-basis:32px}
.game-frame .shoutbox .shout-resize{color:var(--control-ink)}
.game-frame .shoutbox .shout-resize::before{content:"";position:absolute;inset:6px;border:1px solid var(--control-edge);border-radius:50%;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));box-shadow:inset 0 1px 0 var(--control-light),0 2px 4px var(--control-shadow);pointer-events:none}
.game-frame .shoutbox .shout-resize:focus-visible::before,.game-frame .shoutbox.shout-resizing .shout-resize::before{border-color:var(--control-accent);background:color-mix(in srgb,var(--control-accent) 18%,var(--control-bottom))}
.game-frame .shoutbox.shout-resizing .shout-resize{color:var(--control-symbol)}
.game-frame .shoutbox .shout-history{padding:8px;scrollbar-width:thin;scrollbar-color:var(--control-edge) transparent;background:linear-gradient(155deg,color-mix(in srgb,var(--theme-soft,#eaf4f2) 30%,var(--theme-surface,#f7fcfc)),var(--theme-surface,#f7fcfc))}
.game-frame .shoutbox .shout-message{border:1px solid color-mix(in srgb,var(--theme-line,#bdd7d9) 35%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--theme-soft,#eaf4f2) 65%,var(--theme-surface,#f7fcfc)),color-mix(in srgb,var(--theme-soft,#eaf4f2) 35%,var(--theme-surface,#f7fcfc)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--control-light) 55%,transparent);border-radius:12px}
.game-frame .shoutbox .shout-message header>a{color:var(--theme-ink,#193f4c);text-decoration:none}
.game-frame .shoutbox .shout-message p{font-size:14px;line-height:1.5}
.game-frame .shoutbox .shout-avatar-link img{border-radius:50%;box-shadow:0 0 0 1px var(--control-edge),0 2px 4px var(--control-shadow)}
.game-frame .shoutbox .shout-compose{padding:4px;gap:6px;background:var(--theme-surface,#f7fcfc);border-top-color:color-mix(in srgb,var(--control-edge) 40%,transparent);box-shadow:none}
.game-frame .shoutbox .shout-input input{border-radius:15px;border-color:var(--control-edge);background:var(--theme-surface,#f7fcfc);box-shadow:inset 0 2px 5px var(--control-shadow);min-height:44px;padding:10px 12px}
.game-frame .shoutbox .shout-compose>button{border-radius:15px;min-height:44px;border:1px solid var(--control-edge);background:linear-gradient(145deg,color-mix(in srgb,var(--control-accent) 22%,var(--control-top)),var(--control-bottom));color:var(--control-ink);box-shadow:inset 0 1px 0 var(--control-light),0 2px 5px var(--control-shadow);font-size:13px;font-weight:650;padding:10px 14px}
/* A continuous vector arc avoids the join of unequal CSS borders at the corner.
   The contour and inner light share the header controls' enamel palette. */
.shout-corner .corner-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(-2px -2px 6px var(--control-shadow))}
.corner-surface .corner-fill-top{stop-color:var(--control-top);stop-opacity:.88}
.corner-surface .corner-fill-bottom{stop-color:var(--control-bottom);stop-opacity:.88}
.corner-surface .corner-edge{stroke:var(--control-edge)}
.corner-surface .corner-light{stroke:var(--control-light)}
@media(forced-colors:active){.corner-surface path:first-of-type{fill:ButtonFace}.corner-surface .corner-edge{stroke:ButtonText}.corner-surface .corner-light{display:none}}
.game-frame .shoutbox :is(select,input,a,button):focus-visible{outline:2px solid var(--control-accent);outline-offset:-2px}
@media(hover:hover){
 .game-frame .shoutbox .shout-resize:hover::before{border-color:var(--control-accent)}
 .game-frame .shoutbox .shout-mail-link:hover{background:color-mix(in srgb,var(--control-accent) 10%,transparent)}
 .game-frame .shoutbox :is(.shout-header-actions button,.shout-channel-button,.shout-compose>button,.shout-corner):hover{border-color:var(--control-accent)}
 .game-frame .shoutbox .shout-message header>a:hover{text-decoration:underline}
}
@media(max-width:550px){
 .game-frame .shoutbox:not(.collapsed){border-radius:18px 18px 0 0}
 .game-frame .shoutbox .shout-header-actions{gap:0}
 .game-frame .shoutbox .shout-mail-link{padding:0 3px}
 .game-frame .shoutbox .shout-header .shout-mobile-size{border-radius:16px;color:var(--control-ink)}
 .game-frame .shoutbox .shout-header .shout-mobile-size[aria-pressed="true"]{border-color:var(--control-edge);background:linear-gradient(145deg,var(--control-top),var(--control-bottom));box-shadow:inset 0 1px 0 var(--control-light),0 2px 4px var(--control-shadow)}
}

/* Direct channels share one inset control; no second header row. */
.game-frame .shoutbox{container-type:inline-size}
.game-frame .shoutbox .shout-channel-picker{flex:1;gap:2px;padding:2px;max-width:max-content;border:1px solid var(--control-edge);border-radius:18px;background:color-mix(in srgb,var(--control-bottom) 88%,black);box-shadow:inset 0 1px 3px var(--control-shadow)}
.game-frame .shoutbox .shout-channel-button{position:relative;flex:1 1 auto;min-width:0;min-height:28px;padding:4px 11px;border:1px solid transparent;border-radius:15px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--control-ink);background:transparent;line-height:18px}
.game-frame .shoutbox .shout-channel-button[aria-pressed="true"]{border-color:var(--control-edge);background:linear-gradient(145deg,color-mix(in srgb,var(--control-accent) 16%,var(--control-top)),var(--control-bottom));box-shadow:inset 0 1px 0 var(--control-light),0 2px 4px var(--control-shadow);color:var(--control-symbol)}
.shoutbox .shout-channel-count{position:absolute;top:-5px;right:-2px;min-width:15px;padding:0 3px;border-radius:9px;font-size:9px;line-height:15px;color:var(--control-bottom);background:var(--control-accent);box-shadow:0 0 0 1px var(--control-bottom);font-variant-numeric:tabular-nums}
.game-frame .shoutbox .shout-header-actions{margin-left:auto;flex:none}
.shoutbox .shout-size-menu{display:none;margin:0;padding:0;border:0}
@container(max-width:450px){
 .shoutbox .shout-mail-label{display:none}
 .game-frame .shoutbox:not(.collapsed) .shout-header{gap:4px}
 .game-frame .shoutbox .shout-mail-link{position:relative;padding:0 4px}
 .game-frame .shoutbox .shout-mail-link .comm-badge{position:absolute;right:0;top:0;font-size:9px;min-width:15px;padding:0 3px}
 .game-frame .shoutbox .shout-channel-button{padding-inline:7px}
}
@media(max-width:550px){
 .game-frame .shoutbox:not(.collapsed) .shout-header{height:46px;min-height:46px;padding:0 3px;gap:2px}
 .game-frame .shoutbox .shout-channel-picker{max-width:max-content;gap:0;padding:0;border:0;border-radius:9px;background:none;box-shadow:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
 .game-frame .shoutbox .shout-channel-picker::-webkit-scrollbar{display:none}
 .game-frame .shoutbox .shout-channel-button{flex:0 0 auto;min-width:44px;min-height:44px;padding:4px 7px;border-radius:9px;font-size:12px;border-color:transparent;box-shadow:none;background:none}
 .game-frame .shoutbox .shout-channel-button[aria-pressed="true"]{border-color:transparent;background:color-mix(in srgb,var(--control-accent) 12%,transparent);box-shadow:inset 0 -2px 0 var(--control-accent)}
 .shoutbox .shout-channel-count{top:0;right:0}
 .game-frame .shoutbox .shout-mail-link{min-width:44px;padding:0;touch-action:manipulation}
 .game-frame .shoutbox .shout-header-actions{margin-left:0}
 .game-frame .shoutbox .shout-header-actions .shout-collapse{position:relative;width:44px;height:44px;min-height:44px;border:0;border-radius:10px;background:none;box-shadow:none;touch-action:manipulation}
 .game-frame .shoutbox .shout-collapse::before{content:"";position:absolute;inset:5px 0;border:1px solid var(--control-edge);border-radius:10px;background:linear-gradient(145deg,var(--control-top),var(--control-bottom));box-shadow:inset 0 1px 0 var(--control-light);pointer-events:none}
 .game-frame .shoutbox .shout-collapse svg{position:relative}
 .shoutbox .shout-size-menu{position:relative;display:block;flex:none;margin-left:auto;z-index:3}
 .shoutbox .shout-size-menu summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;color:var(--control-ink);border-radius:10px;touch-action:manipulation}
 .shoutbox .shout-size-menu summary::-webkit-details-marker{display:none}
 .shoutbox .shout-size-menu summary:focus-visible{outline:2px solid var(--control-accent);outline-offset:-2px}
 .shoutbox .shout-size-menu[open] summary{background:var(--control-bottom);box-shadow:inset 0 1px 0 var(--control-light)}
 .game-frame .shoutbox .shout-header .shout-size-controls{position:absolute;right:0;top:calc(100% + 6px);display:grid;min-width:120px;padding:5px;gap:3px;border:1px solid var(--control-edge);border-radius:17px;background:var(--theme-surface,#f7fcfc);box-shadow:0 6px 20px var(--control-shadow)}
 .game-frame .shoutbox .shout-size-controls button{font-size:13px;min-height:44px;text-align:left;padding:6px 12px}
}
@media(forced-colors:active){.game-frame .shoutbox .shout-channel-button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-3px}}

/* A quiet source label keeps private channels recognizable in the shared timeline. */
.game-frame .shoutbox .shout-source{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;line-height:17px;white-space:nowrap;color:var(--theme-muted,#537480)}
.game-frame .shoutbox .shout-source::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.game-frame .shoutbox .shout-source[aria-hidden="true"]{visibility:hidden}
.game-frame .shoutbox [data-channel="clan"] .shout-source{color:light-dark(#276652,#a1dec7)}
.game-frame .shoutbox [data-channel="battle"] .shout-source{color:light-dark(#8c4529,#f3bc9d)}
.game-frame .shoutbox [data-channel="team"] .shout-source{color:light-dark(#63519a,#d1c1f8)}
@container(max-width:360px){
 .game-frame .shoutbox:not(.collapsed) .shout-header{gap:2px}
 .game-frame .shoutbox .shout-header-actions{gap:2px}
 .game-frame .shoutbox .shout-channel-picker{max-width:none;gap:0;padding-inline:1px}
 .game-frame .shoutbox .shout-channel-button{padding-inline:1px}
}
@media(max-width:360px){
 .game-frame .shoutbox .shout-channel-button{padding-inline:3px}
}

.game-frame .shoutbox .shout-compose>button.shout-send-world{display:grid;align-content:center;gap:0;padding-block:5px;line-height:17px}
.game-frame .shoutbox .shout-send-world small{font-size:10px;line-height:13px;font-weight:500}

/* Only the live panel moves: text, controls, surface and frame remain one piece.
   Its diagonal boundary uncovers the real corner control already underneath. */
.game-frame .shoutbox[data-shout-motion] .shout-panel{will-change:clip-path,transform}
.shout-motion-edge{position:absolute;inset:0;overflow:hidden;border-radius:inherit;transform-origin:100% 100%;pointer-events:none;z-index:4}
.shout-motion-beam{position:absolute;top:0;bottom:0;left:0;width:0;opacity:0;pointer-events:none}
.shout-motion-beam::before,.shout-motion-beam::after{content:"";position:absolute;top:0;bottom:0;pointer-events:none}
.shout-motion-beam::before{left:-34px;width:68px;background:linear-gradient(90deg,transparent,#b0a1ff0a 12%,#79e4ef25 42%,#c4fdff80 50%,#79e4ef25 58%,#b0a1ff0a 88%,transparent);filter:blur(4px)}
.shout-motion-beam::after{left:-.75px;width:1.5px;background:linear-gradient(0deg,#86eaf000,#bcadff85 14%,#bafaff 43%,#fff 52%,#8cebf2 72%,#b5a6ff70 90%,#86eaf000);box-shadow:0 0 7px #b1faff80,0 0 15px 2px #8bdfea35}
@media(prefers-reduced-motion:reduce){.shout-motion-edge{display:none}.game-frame .shoutbox[data-shout-motion] .shout-panel{will-change:opacity}}
@media(forced-colors:active){.shout-motion-edge{display:none}}

/* The combined view adds a quiet wash of the existing channel color.
   Keep the neutral world cards and the single-channel surfaces unchanged. */
.game-frame .shoutbox [data-channel="clan"]{--shout-channel-tint:light-dark(#269779,#79cbb4)}
.game-frame .shoutbox [data-channel="battle"]{--shout-channel-tint:light-dark(#bb793b,#dfa568)}
.game-frame .shoutbox [data-channel="team"]{--shout-channel-tint:light-dark(#8662b1,#af95da)}
@media(forced-colors:none){
 .game-frame .shoutbox [data-channel-view="all"] .shout-message:is([data-channel="clan"],[data-channel="battle"],[data-channel="team"]){
  border-color:color-mix(in srgb,var(--shout-channel-tint) 28%,color-mix(in srgb,var(--theme-line,#bdd7d9) 35%,transparent));
  background:linear-gradient(115deg,color-mix(in srgb,var(--shout-channel-tint) 16%,color-mix(in srgb,var(--theme-soft,#eaf4f2) 65%,var(--theme-surface,#f7fcfc))),color-mix(in srgb,var(--shout-channel-tint) 8%,color-mix(in srgb,var(--theme-soft,#eaf4f2) 35%,var(--theme-surface,#f7fcfc))));
 }
}