:root{
  --gt-bg:#d8d7dd;
  --gt-page-grad-top:#f3f4f8;
  --gt-page-grad-bot:#d9d8df;
  --gt-frame-top:#ededf3;
  --gt-frame-bot:#d2d0d8;
  --gt-frame-border:#7f8290;
  --gt-shadow:rgba(0,0,0,.22);
  --gt-panel:#f7f7fb;
  --gt-panel-border:#8a8c97;
  --gt-sky-top:#82d2ea;
  --gt-sky-bot:#90d9ef;
  --gt-menu-top:#7fd1ef;
  --gt-menu-bot:#68c6e7;
  --gt-menu-border:#5b6f7e;
  --gt-btn-top:#fafafb;
  --gt-btn-bot:#cdced8;
  --gt-btn-border:#7b7c86;
  --gt-chat-bg:#ffffff;
  --gt-chat-line:#d7d7df;
  --gt-text:#11151b;
  --gt-soft:#5c6877;
  --gt-link:#233c8f;
  --gt-link-hover:#d43b94;
  --gt-admin:#c41616;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--gt-text);
  background:linear-gradient(var(--gt-page-grad-top), var(--gt-page-grad-bot));
}

a{ color:var(--gt-link); }
a:hover{ color:var(--gt-link-hover); }
.hidden{ display:none !important; }

.gtHeader{ max-width:1360px; margin:14px auto 10px; padding:0 12px; }
.gtHeaderInner{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  background:linear-gradient(var(--gt-frame-top), var(--gt-frame-bot));
  border:2px solid var(--gt-frame-border); border-radius:20px;
  padding:10px 14px; box-shadow:0 12px 30px var(--gt-shadow);
}
.gtBrand{ display:flex; align-items:center; text-decoration:none; }
.gtBrandText{
  font-size:32px; font-weight:900; letter-spacing:.6px; color:#f6c744;
  text-shadow:1px 1px 0 #7e5f0a, 2px 2px 0 rgba(255,255,255,.2);
  font-style:italic; line-height:1;
}
.gtBrandVersion{
  display:inline-flex; align-items:center; justify-content:center;
  height:20px; padding:0 8px; margin-top:3px;
  border-radius:999px; border:1px solid rgba(126,95,10,.38);
  background:linear-gradient(#fff8c9, #f4c546);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 1px 3px rgba(0,0,0,.18);
  color:#6d4f00; font-size:11px; font-weight:900; font-style:normal;
  letter-spacing:.8px; line-height:1; text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.gtNav{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.gtNavBtn, .navbar a{
  text-decoration:none; color:#1a2631; font-weight:800; font-size:14px;
  padding:9px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.14);
  background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.gtNavBtn:hover, .navbar a:hover, .navbar a.active{ color:#000; filter:brightness(1.03); }
.gtUserPill{
  display:flex; gap:8px; align-items:center; font-size:14px; font-weight:700;
  background:#f7f7fb; border:1px solid rgba(0,0,0,.1); border-radius:999px; padding:9px 14px;
}
.gtUserPillLabel{ color:var(--gt-soft); }
.gtUserPillName{ color:#111; }
.count-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#d72828; color:#fff; font-size:11px; margin-left:5px;
}

.gt-page--lobby{ min-height:100vh; }
.gt-lobby-shell{ max-width:1360px; margin:0 auto; padding:0 12px 18px; }
.gt-lobby-frame{
  background:linear-gradient(var(--gt-frame-top), var(--gt-frame-bot));
  border:3px solid var(--gt-frame-border); border-radius:26px;
  box-shadow:0 18px 34px rgba(0,0,0,.18); overflow:hidden;
  min-height:calc(100vh - 118px);
}

.gt-lobby-frame{
  display:flex; flex-direction:column;
}
.gt-lobby-main{
  flex:1; min-height:0; display:flex; flex-direction:column;
}
.gt-lobby-topbar{
  height:58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; background:linear-gradient(var(--gt-sky-top), var(--gt-sky-bot));
  border-bottom:3px solid var(--gt-frame-border);
}
.gt-lobby-topbar-controls{
  display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto;
}
.gt-lobby-notifications{
  display:flex; align-items:center;
}
.gt-lobby-title{
  font-size:30px; font-weight:900; letter-spacing:.6px; color:#f6c744;
  text-shadow:1px 1px 0 #7e5f0a, 2px 2px 0 rgba(255,255,255,.2);
  font-style:italic;
}
.gt-lobby-clock{
  min-width:92px; text-align:center; font-size:20px; font-weight:900; color:#25475d;
}
.gt-lobby-music-toggle{
  appearance:none; cursor:pointer; border:1px solid rgba(0,0,0,.14);
  border-radius:999px; min-width:40px; min-height:40px; font-size:18px;
  line-height:1; background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.gt-lobby-grid{
  display:grid; grid-template-columns: 320px 270px 1fr; gap:12px;
  flex:1; min-height:0; padding:14px 14px 8px;
}
.gt-lobby-left, .gt-lobby-middle, .gt-lobby-right{ min-height:0; }
.gt-lobby-left{
  display:flex; flex-direction:column; gap:12px;
}
.gt-character-stage{
  flex:1; min-height:0;
  background:linear-gradient(#ececf1, #d8d7de); border:3px solid var(--gt-panel-border);
  border-radius:18px; display:flex; align-items:flex-end; justify-content:center; padding:16px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
}
.gt-character-portrait-wrap{
  width:265px; max-width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center;
}
.gt-character-portrait{
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}
.gt-play-wrap{
  display:flex; align-items:center; justify-content:center;
}
.gt-play-button{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:#111;
  font-size:24px; font-weight:900;
}
.gt-play-button__icon{
  width:64px; height:64px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fff 0 24%, #c9c9d3 52%, #7f7f87 100%);
  border:3px solid #8b8b96; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 10px rgba(0,0,0,.18);
  color:#f1d45a; text-shadow:1px 1px 0 #6e5a00; font-size:32px; padding-left:3px;
}
.gt-play-button__text{ font-size:26px; color:#111; }

.gt-lobby-middle{
  display:flex; align-items:flex-end;
}
.gt-menu-panel{
  width:100%; background:linear-gradient(var(--gt-menu-top), var(--gt-menu-bot));
  border:3px solid var(--gt-menu-border); border-radius:18px;
  box-shadow:0 10px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.45);
  padding:10px;
}
.gt-menu-inner{ display:flex; flex-direction:column; gap:8px; }
.gt-menu-link{
  display:block; text-decoration:none; color:#111; font-weight:900; font-size:18px;
  padding:4px 10px; border-radius:8px; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.gt-menu-link:hover{ background:rgba(255,255,255,.22); color:#111; }
.gt-menu-link--button{
  appearance:none; background:none; border:0; cursor:pointer; text-align:left; width:100%; font-family:inherit;
}

.gt-lobby-right{
  display:grid; grid-template-rows: minmax(0, 1fr) 190px; gap:12px; min-height:0;
}
.gt-chat-panel, .gt-players-panel{
  background:linear-gradient(var(--gt-frame-top), #dfdee6);
  border:3px solid var(--gt-panel-border); border-radius:18px;
  overflow:hidden; min-height:0;
}
.gt-chat-panel{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.gt-chat-toolbar, .gt-players-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; background:linear-gradient(#f9f9fc, #d9d8e1);
  border-bottom:2px solid #9a9ca8;
}
.gt-chat-room, .gt-players-head span:first-child{ font-weight:900; font-size:18px; }
.gt-chat-badge-wrap{ display:flex; align-items:center; gap:8px; font-size:13px; }
.gt-chat-badge-label{ color:var(--gt-soft); font-weight:700; }
.role-badge{
  display:inline-flex; align-items:center; min-height:24px; padding:3px 10px; border-radius:999px;
  background:#ecebf2; border:1px solid rgba(0,0,0,.12); font-size:12px; font-weight:900;
}
.role-badge.is-gtadmin{ color:#6a4e00; background:linear-gradient(#ffe894, #d9ad2a); border-color:#9d7720; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 0 8px rgba(255,215,64,.18); }
.role-badge.role-moderator{ color:#fff; background:#2847a5; }
.role-badge.role-chat_moderator{ color:#fff; background:linear-gradient(#3972c7,#21498d); border-color:#173b76; }
.role-badge.role-senior_moderator{ color:#fff; background:linear-gradient(#7548c8,#48217f); border-color:#35165f; }
.role-badge.role-content_creator{ color:#163b2b; background:linear-gradient(#a9f0c9,#5fc991); border-color:#3d9f70; }
.role-badge.role-clan_leader{ color:#fff; background:#7b3ff2; }
.gt-chat-body{
  height:auto; min-height:0; overflow-y:auto; background:var(--gt-chat-bg);
  padding:10px 12px; scrollbar-gutter: stable;
}
.gt-chat-input-row{
  min-height:52px; display:grid; grid-template-columns: minmax(0, 1fr) 76px; gap:8px; align-items:center;
  padding:8px; border-top:2px solid #b5b6bf; background:#f4f4f8;
}
.gt-emoji-btn, .gt-send-btn{
  height:36px; border-radius:10px; border:1px solid rgba(0,0,0,.16); cursor:pointer; font-weight:900;
  background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
}
.gt-emoji-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; font-size:18px; user-select:none; text-decoration:none; color:#1a2631;
}
.gt-emoji-btn.is-disabled{
  opacity:.6; cursor:not-allowed;
}
.gt-upload-btn{ font-size:17px; }
.gt-upload-btn__icon{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
}
.gt-upload-btn__icon svg{
  width:100%; height:100%; display:block; fill:currentColor;
}
.gt-visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;
}
.gt-file-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}
.gt-chat-input-shell{
  position:relative; min-width:0;
}
.gt-chat-input{
  width:100%; min-width:0; height:36px; border-radius:10px; border:1px solid #9d9eaa; outline:none;
  padding:8px 42px 7px 42px; font-size:14px; line-height:1.25; background:#fff; color:#111;
  resize:none; overflow-y:auto; font-family:inherit;
}
.gt-chat-input:focus{ box-shadow:0 0 0 2px rgba(92,171,228,.22); }
.gt-send-btn{ width:100%; }
.gt-char-counter{
  position:absolute;
  bottom:3px; left:4px;
  font-size:10px; font-weight:900; color:#7a8797;
  pointer-events:none; letter-spacing:.3px;
  display:none;
  line-height:1;
  z-index:4;
}
.gt-char-counter:not(:empty){ display:block; }
.gt-char-counter--warn{ color:#c87d00; }
.gt-char-counter--limit{ color:#cc2222; }
.gt-chat-input-shell.has-attachment .gt-upload-btn--inline{
  display:none;
}
.gt-chat-input-shell.has-attachment .gt-chat-input{
  padding-left:64px;
}
.gt-chat-attachment-inline{
  position:absolute; left:4px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:4px; z-index:2;
}
.gt-chat-attachment-inline[hidden]{
  display:none !important;
}
.gt-chat-attachment__thumb{
  width:24px; height:24px; object-fit:cover; border-radius:6px; border:1px solid rgba(0,0,0,.12); background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.gt-chat-attachment__clear{
  width:22px; height:22px; border-radius:999px; border:1px solid rgba(0,0,0,.16); cursor:pointer;
  font-size:15px; line-height:1; padding:0; color:#33485d; background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
}
.gt-emoji-btn--inline{
  position:absolute; top:3px; right:4px; width:30px; height:30px; border-radius:8px; font-size:16px;
}
.gt-chat-input-shell.is-emoji-open .gt-emoji-btn--inline{
  background:linear-gradient(#fff5d6, #e8d194);
  border-color:#c39b3c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(195,155,60,.18);
}
.gt-upload-btn--inline{
  position:absolute; top:3px; left:4px; width:30px; height:30px; border-radius:8px; font-size:16px; z-index:2;
}
.gt-chat-emoji-popover{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  z-index:6;
  width:min(264px, calc(100vw - 36px));
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(78, 86, 102, .34);
  background:linear-gradient(#fcfcfe, #e2e0e8);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.gt-chat-emoji-popover[hidden]{
  display:none !important;
}
.gt-chat-emoji-popover::after{
  content:"";
  position:absolute;
  right:14px;
  top:100%;
  width:12px;
  height:12px;
  background:linear-gradient(135deg, #e6e4eb 0%, #d8d5df 100%);
  border-right:1px solid rgba(78, 86, 102, .24);
  border-bottom:1px solid rgba(78, 86, 102, .24);
  transform:translateY(-6px) rotate(45deg);
}
.gt-chat-emoji-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:6px;
}
.gt-chat-emoji-item{
  height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(#ffffff, #eceaf1);
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.gt-chat-emoji-item:hover{
  background:linear-gradient(#fff8de, #eddba8);
  border-color:#c39b3c;
}
.gt-chat-emoji-item:focus-visible{
  outline:2px solid rgba(92,171,228,.55);
  outline-offset:1px;
}
.chat-image-link{
  display:block; margin-top:8px; width:max-content; max-width:min(240px, 70vw);
}
.chat-inline-image{
  display:block; max-width:100%; max-height:260px; border-radius:14px; border:1px solid rgba(0,0,0,.16); background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.chat-youtube-preview{
  display:block; width:min(300px,72vw); margin-top:8px; overflow:hidden;
  border:1px solid rgba(0,0,0,.16); border-radius:13px; background:#fff;
  color:#202124; text-decoration:none; box-shadow:0 5px 15px rgba(0,0,0,.10);
}
.chat-youtube-preview__image{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#111; }
.chat-youtube-preview__image img{ display:block; width:100%; height:100%; object-fit:cover; }
.chat-youtube-preview__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:34px; display:flex; align-items:center; justify-content:center;
  padding-left:3px; border-radius:10px; background:#f00; color:#fff;
  font-size:19px; line-height:1; box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.chat-youtube-preview__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; }
.chat-youtube-preview__meta b{ color:#d90000; font-size:13px; }
.chat-youtube-preview__meta span{ color:#66717d; font-size:12px; font-weight:800; }
.chat-youtube-preview:hover{ border-color:#d33; box-shadow:0 7px 18px rgba(0,0,0,.15); }
.gt-players-count{
  min-width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#6fc9ea; border:1px solid #618496; font-weight:900;
}
.gt-players-list{
  height:calc(100% - 50px); overflow-y:auto; background:#fff; padding:10px;
}
.player-row{
  display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid var(--gt-chat-line);
  cursor:pointer;
}
.player-row:hover{ background:#f6f7fc; }
.status-dot{ width:10px; height:10px; border-radius:50%; background:#31c257; box-shadow:0 0 0 1px #0e8230; flex:0 0 auto; }
.player-name{ font-weight:800; }
.player-name.role-admin, .chat-user-link.is-gtadmin, .name.is-gtadmin{ color:var(--gt-admin); }
.chat-user-link.is-system, .name.is-system{ color:#c41616; font-weight:900; }
.player-name.role-moderator, .chat-user-link.role-moderator, .name.role-moderator{ color:#2647a8; }
.player-name.role-chat_moderator, .chat-user-link.role-chat_moderator, .name.role-chat_moderator{ color:#285aa5; }
.player-name.role-senior_moderator, .chat-user-link.role-senior_moderator, .name.role-senior_moderator{ color:#6636ad; }
.player-name.role-content_creator, .chat-user-link.role-content_creator, .name.role-content_creator{ color:#27845b; }
.player-name.role-clan_leader, .chat-user-link.role-clan_leader, .name.role-clan_leader{ color:#7b3ff2; }
.player-meta{ margin-left:auto; color:var(--gt-soft); font-size:12px; }
.hint{ color:var(--gt-soft); padding:10px 4px; }

.msg{ margin:0 0 8px; }
.msg .bubble{
  display:block; background:#fff; color:#111; line-height:1.35; font-size:14px;
  border-bottom:1px solid var(--gt-chat-line); padding:0 0 8px;
}
.msg-text{ white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-edit-btn{
  margin-left:6px; min-height:18px; padding:0 7px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12); background:linear-gradient(#fff, #ececf3);
  color:#435268; font-size:11px; font-weight:900; cursor:pointer; vertical-align:middle;
}
.msg-edit-btn:hover{ color:#111; border-color:#8eb3cf; background:#eef6ff; }
.msg-edit-form{ display:flex; gap:6px; align-items:flex-start; margin:6px 0 3px; }
.msg-edit-input{
  flex:1 1 auto; min-height:44px; max-height:120px; resize:vertical; border-radius:10px;
  border:1px solid #a3a6b2; padding:7px 9px; font:inherit; line-height:1.25;
}
.msg-edit-save,.msg-edit-cancel{
  min-height:32px; padding:0 10px; border-radius:10px; border:1px solid rgba(0,0,0,.16);
  background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot)); font-weight:900; cursor:pointer;
}
.msg.mine .bubble{ background:#f4f9ff; border-left:3px solid #5ba4d4; padding-left:6px; }
.msg.mention-me .bubble{ background:#fff8e6; border-left:3px solid #e8a020; padding-left:6px; }
.chat-user-link{
  color:inherit; font-weight:900; text-decoration:none; cursor:pointer;
}
.chat-user-link:hover{ text-decoration:underline; color:var(--gt-link-hover); }
.time{ color:#7a808a; font-size:12px; margin-left:4px; }
.msg-reaction-strip{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px; vertical-align:middle;
  padding:1px 4px; border-radius:999px; background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.msg-reaction-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  min-width:24px; height:20px; padding:0 5px; border-radius:999px;
  border:1px solid rgba(95,104,122,.22); background:linear-gradient(#fff, #edf1f7);
  font-size:12px; line-height:1; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.msg-reaction-toggle:hover{ background:linear-gradient(#fff7df, #f2dda2); border-color:#caa954; transform:translateY(-1px) scale(1.08); box-shadow:0 2px 6px rgba(0,0,0,.14); }
.msg-reaction-toggle.is-active{ background:linear-gradient(#ffe69a, #f0c84b); border-color:#b98d1f; box-shadow:inset 0 1px 0 rgba(255,255,255,.70), 0 1px 4px rgba(0,0,0,.12); }
.msg-reaction-toggle[data-reaction-hover]{ position:relative; }
/* Instagram-style "who reacted" hover card. Built in chat.js and appended to
   <body>, so it uses fixed positioning here and can't be clipped by the chat
   body's overflow. The chip's own :hover ::after tooltip was removed because it
   was cut off whenever the message sat near the top of the scroll area. */
.gt-reaction-tip{
  position:fixed;
  z-index:9000;
  width:max-content;
  max-width:240px;
  padding:6px 9px;
  border-radius:9px;
  background:rgba(22,28,38,.97);
  color:#fff;
  font:800 11px/1.3 Arial,sans-serif;
  text-align:left;
  white-space:normal;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  pointer-events:none;
  animation:gtReactionTipIn .12s ease-out;
}
.gt-reaction-tip::after{
  content:"";
  position:absolute;
  top:100%;
  left:var(--gt-tip-arrow, 50%);
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:rgba(22,28,38,.97);
}
.gt-reaction-tip.is-below::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:rgba(22,28,38,.97);
}
@keyframes gtReactionTipIn{
  from{ opacity:0; transform:translateY(2px); }
  to{ opacity:1; transform:translateY(0); }
}
/* Tactile pop when a reaction is toggled (added in chat.js on click). */
.msg-reaction-toggle.reaction-pop{ animation:gtReactionPop .3s cubic-bezier(.2,.9,.3,1.4); }
@keyframes gtReactionPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}
.msg-reaction-count{ min-width:8px; color:#4b6478; font-size:10px; font-weight:900; }
/* Reply quote card — Instagram-style: original message sits above the reply */
.msg-reply-quote{
  display:flex; align-items:stretch; gap:0;
  margin:0 0 6px;
  border-radius:9px; overflow:hidden;
  border:1px solid rgba(91,164,212,.36);
  max-width:min(420px, 94%);
  cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(238,247,255,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.06);
}
.msg.mine .msg-reply-quote{ background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,244,255,.95)); }
.msg-reply-quote:hover{ border-color:rgba(91,164,212,.7); }
.msg-reply-bar{ width:4px; background:linear-gradient(#5ba4d4,#2a7fb8); flex-shrink:0; }
.msg-reply-body{
  padding:5px 9px 6px; flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
}
.msg-reply-label{ font-size:10px; font-weight:900; color:#697586; text-transform:uppercase; letter-spacing:.03em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-reply-name{ font-size:11px; font-weight:900; color:#1a6a9a; line-height:1.2; text-transform:none; letter-spacing:0; }
.msg-reply-text{ font-size:12px; color:#243447; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-reply-text--empty{ color:#758599; font-style:italic; }
.msg-reply-btn{
  appearance:none; border:0; background:none; cursor:pointer;
  font-size:11px; font-weight:800; color:#8ba8c0; padding:0 3px;
  vertical-align:middle; opacity:.25; transition:opacity .1s;
}
.msg:hover .msg-reply-btn{ opacity:1; }
/* Reply bar above input */
#chatReplyBar{
  display:none; align-items:center; gap:8px;
  padding:4px 10px; background:rgba(0,0,0,.06);
  border-radius:8px; font-size:12px; font-weight:800; color:#2a3540; margin:4px 0;
}
#chatReplyBar.visible{ display:flex; }
/* Typing indicator */
#chatTypingIndicator{
  min-height:15px; font-size:11px; font-weight:800;
  color:rgba(255,255,255,.45); padding:0 4px 2px;
}
@media (max-width: 640px){
  .gt-chat-input-row{ grid-template-columns: minmax(0, 1fr) 68px; gap:6px; }
  .msg-reaction-strip{ margin-left:6px; gap:3px; }
  .msg-reaction-toggle{ padding:0 6px; min-height:19px; font-size:10px; }
  .gt-chat-input-shell.has-attachment .gt-chat-input{ padding-left:58px; }
  .gt-chat-attachment__thumb{ width:22px; height:22px; }
  .gt-chat-attachment__clear{ width:20px; height:20px; font-size:14px; }
  .gt-emoji-btn--inline{ width:28px; height:28px; top:4px; right:4px; }
  .gt-upload-btn--inline{ width:28px; height:28px; top:4px; left:4px; }
  .gt-chat-emoji-popover{
    width:min(240px, calc(100vw - 28px));
    right:-6px;
  }
  .gt-chat-emoji-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
  .chat-image-link{ max-width:min(210px, 72vw); }
  .chat-inline-image{ max-height:220px; }
}

.wrap{ max-width:1100px; margin:0 auto; padding:0 18px 24px; }
.panel{ background: linear-gradient(var(--gt-frame-top), var(--gt-frame-bot)); border:2px solid var(--gt-frame-border); border-radius:22px; box-shadow:0 14px 30px var(--gt-shadow); overflow:hidden; }
.head{ background:linear-gradient(#9ad8ee,#64c7e6); border-bottom:2px solid var(--gt-frame-border); padding:16px 18px; font-size:28px; font-weight:900; }
.body{ padding:24px 20px; background:#f6f7fb; }
.body p{ font-size:18px; margin:0 0 14px; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.btnx{ text-decoration:none; color:#1a2731; font-weight:800; font-size:16px; padding:10px 14px; border-radius:12px; background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot)); border:2px solid var(--gt-btn-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }


.gt-lobby-footer{
  flex:0 0 auto;
  padding: 0 18px 12px;
}
.gt-lobby-footer__line{
  height:1px;
  background:linear-gradient(90deg, rgba(122,126,138,0), rgba(122,126,138,.45) 14%, rgba(122,126,138,.45) 86%, rgba(122,126,138,0));
  margin-bottom:7px;
}
.gt-lobby-footer__text{
  text-align:center;
  font-size:14px;
  font-weight:900;
  font-style:italic;
  letter-spacing:.2px;
  color:#f6c744;
  text-shadow:
    0 1px 0 #fff0a7,
    0 2px 0 #b88c17,
    1px 3px 0 #7e5f0a,
    0 0 10px rgba(246,199,68,.18);
}
.gt-lobby-footer__copy,
.gt-lobby-footer__sep,
.gt-lobby-footer__email-label{
  color:#f6c744;
}
.gt-lobby-footer__sep{
  margin:0 9px;
}
.gt-lobby-footer__email-label{
  margin-right:4px;
}
.gt-lobby-footer__link{
  color:#f6c744;
  text-decoration:none;
}
.gt-lobby-footer__link:hover{
  color:#ffd96b;
  text-decoration:underline;
}

@media (max-width: 1160px){
  .gt-lobby-grid{ grid-template-columns: 280px 230px 1fr; }
  .gt-menu-link{ font-size:16px; }
}

@media (max-width: 980px){
  .gtHeaderInner{ flex-direction:column; align-items:stretch; }
  .gt-lobby-frame{ min-height:auto; }
  .gt-lobby-grid{ height:auto; grid-template-columns:1fr; }
  .gt-lobby-middle{ align-items:stretch; }
  .gt-lobby-right{ grid-template-rows:minmax(340px, auto) 220px; }
  .gt-character-stage{ min-height:360px; }
  .gt-lobby-footer{ padding: 4px 14px 12px; }
  .gt-lobby-footer__text{ font-size:13px; line-height:1.4; }
}


/* === Site-wide style alignment + narrower lobby === */
.gtHeader,
.gt-lobby-shell,
.wrap,
.forum-wrap,
.page-wrap{
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.gtHeader{
  padding: 0 8px !important;
}

.gtHeaderInner{
  flex-wrap: nowrap !important;
  gap: 10px !important;
  padding: 9px 12px !important;
}

.gtBrand{
  flex: 0 0 auto !important;
}

.gtBrandText{
  font-size: 28px !important;
  line-height: .96 !important;
}

.gtHeader--compact .gtBrand{
  gap:8px !important;
}

.gtHeader--compact .gtBrandVersion,
.gtBrandVersion{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:18px !important;
  padding:0 7px !important;
  margin-top:2px !important;
  border-radius:999px !important;
  border:1px solid rgba(126,95,10,.38) !important;
  background:linear-gradient(#fff8c9, #f4c546) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 1px 3px rgba(0,0,0,.18) !important;
  color:#6d4f00 !important;
  font-size:10px !important;
  font-weight:900 !important;
  font-style:normal !important;
  letter-spacing:.8px !important;
  line-height:1 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.7) !important;
  white-space:nowrap !important;
}

.gtNav{
  flex-wrap: nowrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
}

.gtNavBtn,
.navbar a{
  font-size: 13px !important;
  padding: 8px 9px !important;
  white-space: nowrap !important;
}

.gtUserPill{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
}

.gt-lobby-shell{
  padding: 0 8px 18px !important;
}

.gt-lobby-frame{
  min-height: auto !important;
  height: auto !important;
}

.gt-lobby-topbar{
  height: 60px !important;
  padding: 0 18px !important;
}

.gt-lobby-title{
  font-size: 24px !important;
}

.gt-lobby-clock{
  min-width: 82px !important;
  font-size: 18px !important;
}

.gt-lobby-grid{
  grid-template-columns: 270px 220px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px !important;
  height: auto !important;
  align-items: start !important;
}

.gt-character-stage{
  height: 390px !important;
  min-height: 390px !important;
  padding: 8px 14px !important;
}

.gt-character-portrait-wrap{
  width: 230px !important;
}

.gt-play-wrap{
  min-height: 56px !important;
}

.gt-play-button{
  gap: 10px !important;
}

.gt-play-button__icon{
  width: 52px !important;
  height: 52px !important;
  font-size: 26px !important;
}

.gt-play-button__text{
  font-size: 18px !important;
}

.gt-lobby-middle{
  min-height: 446px !important;
  align-items: center !important;
}

.gt-menu-panel{
  padding: 10px !important;
}

.gt-menu-inner{
  gap: 4px !important;
}

.gt-menu-link{
  font-size: 16px !important;
  line-height: 1.04 !important;
  padding: 2px 8px !important;
}

.gt-lobby-right{
  grid-template-rows: 392px 92px !important;
  gap: 8px !important;
  align-self: start !important;
}

.gt-chat-toolbar,
.gt-players-head{
  padding: 7px 10px !important;
}

.gt-chat-room,
.gt-players-head span:first-child{
  font-size: 16px !important;
}

.gt-chat-badge-wrap{
  gap: 6px !important;
  font-size: 12px !important;
}

.role-badge{
  min-height: 22px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
}

.gt-chat-body{
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
}

.msg{
  margin: 0 0 4px !important;
}

.msg .bubble{
  line-height: 1.2 !important;
  font-size: 13px !important;
  padding: 0 0 4px !important;
}

.gt-chat-input-row{
  height: 40px !important;
  grid-template-columns: 30px 30px 1fr 56px !important;
  gap: 5px !important;
  padding: 5px 6px !important;
}

.gt-emoji-btn,
.gt-send-btn{
  height: 26px !important;
  font-size: 13px !important;
}

.gt-chat-input{
  height: 26px !important;
  padding: 5px 34px 5px 8px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.gt-players-count{
  min-width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

.gt-players-list{
  height: calc(100% - 34px) !important;
  padding: 6px 8px !important;
}

.player-row{
  padding: 4px !important;
  gap: 8px !important;
}

.player-meta,
.time,
.hint{
  font-size: 11px !important;
}

/* Shared page chrome for non-lobby pages */
.wrap,
.forum-wrap,
.page-wrap{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.page-wrap{
  margin: 0 auto !important;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
}

.card.chrome-card,
.panel{
  background: linear-gradient(var(--gt-frame-top), var(--gt-frame-bot)) !important;
  border: 2px solid var(--gt-frame-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 30px var(--gt-shadow) !important;
  overflow: hidden !important;
}

.page-card-head,
.head{
  background: linear-gradient(#9ad8ee,#64c7e6) !important;
  border-bottom: 2px solid var(--gt-frame-border) !important;
  color: #111 !important;
  padding: 16px 18px !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}

.page-card-body,
.body{
  padding: 24px 20px !important;
  background: #f6f7fb !important;
  color: #111 !important;
}

.btn,
.btnx{
  text-decoration: none !important;
  color: #1a2731 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(var(--gt-btn-top), var(--gt-btn-bot)) !important;
  border: 2px solid var(--gt-btn-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  display: inline-flex !important;
  align-items: center !important;
}


.gt-chat-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
}

.gt-players-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
}

.gt-play-mode-wrap{
  margin-top: 4px !important;
  text-align: center !important;
}

.gt-play-help-wrap{
  margin-top: 8px !important;
  text-align: center !important;
}

.gt-play-help-link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #1a2631 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: linear-gradient(var(--gt-btn-top), var(--gt-btn-bot)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.gt-play-help-badge{
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d9344d;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  font: 900 10px/1 Arial,Helvetica,sans-serif;
}

.gt-play-help-link:hover{
  filter: brightness(1.03) !important;
}

.gt-play-mode-head{
  margin: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #444 !important;
}

.gt-play-mode-options{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.gt-play-mode-option{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #222 !important;
  line-height: 1 !important;
}

.gt-play-mode-option input{
  margin: 0 !important;
}

.gt-play-mode-option span{
  display: inline-block !important;
}

@media (max-width: 1180px){
  .gtHeader,
  .gt-lobby-shell,
  .wrap,
  .forum-wrap,
  .page-wrap{
    max-width: 1020px !important;
  }
  .gt-lobby-grid{
    grid-template-columns: 250px 205px minmax(0, 1fr) !important;
  }
  .gt-character-stage{
    height: 370px !important;
    min-height: 370px !important;
  }
  .gt-character-portrait-wrap{
    width: 214px !important;
  }
}

@media (max-width: 980px){
  .gtHeaderInner{
    flex-wrap: wrap !important;
  }
  .gtNav{
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .gt-lobby-grid{
    grid-template-columns: 1fr !important;
  }
  .gt-lobby-middle{
    min-height: 0 !important;
    align-items: stretch !important;
  }
  .gt-lobby-right{
    grid-template-rows: minmax(280px, auto) 110px !important;
  }
}


/* improved speech bubble */
.gtSpeechBubble{
  border:2px solid #333;
  border-radius:14px;
  padding:6px 10px;
  background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  animation:gtBubbleAnim 3.2s forwards;
}

@keyframes gtBubbleAnim{
  0%{opacity:0; transform:translateY(8px)}
  12%{opacity:1}
  80%{opacity:1}
  100%{opacity:0}
}


/* GTAdmin gold treatment */
@keyframes gtAdminSparkle {
  0%   { text-shadow: 0 0 0 rgba(255,215,64,.0), 0 0 0 rgba(255,255,255,0); }
  25%  { text-shadow: 0 0 6px rgba(255,215,64,.35), 0 0 10px rgba(255,255,255,.15); }
  50%  { text-shadow: 0 0 10px rgba(255,215,64,.55), 0 0 16px rgba(255,255,255,.22); }
  75%  { text-shadow: 0 0 6px rgba(255,215,64,.35), 0 0 10px rgba(255,255,255,.15); }
  100% { text-shadow: 0 0 0 rgba(255,215,64,.0), 0 0 0 rgba(255,255,255,0); }
}
.gt-gold-admin,
.player-name.role-admin,
.chat-user-link.is-gtadmin,
.name.is-gtadmin,
#gtUserName.gt-gold-admin,
.clan-name.gt-gold-admin,
.gtadmin-inline{
  color:#d4a72c !important;
  font-weight:900 !important;
  text-shadow:0 0 6px rgba(255,215,64,.28);
  animation:gtAdminSparkle 2.4s ease-in-out infinite;
}
.gt-gold-admin::selection,
.player-name.role-admin::selection,
.chat-user-link.is-gtadmin::selection,
.name.is-gtadmin::selection{ background:#fff1b8; color:#6a4e00; }
.chat-user-link.is-system::selection,
.name.is-system::selection{ background:#ffd1d1; color:#7c0000; }


/* === Lobby layout tidy pass: restore top alignment, visible players, scrollable chat === */
.gt-lobby-frame{
  height: calc(100vh - 150px) !important;
  min-height: 660px !important;
  max-height: 760px !important;
}

.gt-lobby-grid{
  height: calc(100% - 60px) !important;
  grid-template-columns: 235px 165px minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.gt-lobby-left,
.gt-lobby-middle,
.gt-lobby-right{
  min-height: 0 !important;
  align-self: stretch !important;
}

.gt-character-stage{
  height: 320px !important;
  min-height: 320px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 10px !important;
}

.gt-character-portrait-wrap{
  width: 180px !important;
}

.gt-character-portrait{
  max-height: 292px !important;
  width: auto !important;
}

.gt-lobby-middle{
  min-height: 320px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 44px !important;
}

.gt-menu-panel{
  width: 100% !important;
}

.gt-menu-link{
  font-size: 15px !important;
  line-height: 1.06 !important;
}

.gt-play-wrap{
  min-height: 50px !important;
  margin-top: 6px !important;
}

.gt-play-mode-wrap{
  margin-top: 2px !important;
}

.gt-lobby-right{
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) 98px !important;
  gap: 8px !important;
}

.gt-chat-panel,
.gt-players-panel{
  min-height: 0 !important;
  overflow: hidden !important;
}

.gt-chat-body{
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

.gt-chat-input-row{
  flex: 0 0 auto !important;
  min-height: 40px !important;
}

.gt-players-panel{
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.gt-players-list{
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
}

@media (max-width: 1180px){
  .gt-lobby-grid{
    grid-template-columns: 220px 155px minmax(0, 1fr) !important;
  }
  .gt-character-stage{
    height: 300px !important;
    min-height: 300px !important;
  }
  .gt-character-portrait-wrap{
    width: 168px !important;
  }
}


/* === Lobby balance pass: larger character + slightly taller players panel === */
.gt-lobby-grid{
  grid-template-columns: 255px 170px minmax(0, 1fr) !important;
}

.gt-character-stage{
  height: 360px !important;
  min-height: 360px !important;
  padding-top: 8px !important;
}

.gt-character-portrait-wrap{
  width: 205px !important;
}

.gt-character-portrait{
  max-height: 334px !important;
}

.gt-lobby-middle{
  min-height: 360px !important;
  /* Controls how far down the lobby menu column sits on desktop. Lower = menu
     higher up. (Was 40px, then 12px.) Mobile is unaffected — the media-query
     rules below override this on phones. */
  padding-top: 0 !important;
}

.gt-lobby-right{
  grid-template-rows: minmax(0, 1fr) 116px !important;
}

.gt-players-list{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (max-width: 1180px){
  .gt-lobby-grid{
    grid-template-columns: 235px 160px minmax(0, 1fr) !important;
  }
  .gt-character-stage{
    height: 338px !important;
    min-height: 338px !important;
  }
  .gt-character-portrait-wrap{
    width: 188px !important;
  }
  .gt-character-portrait{
    max-height: 312px !important;
  }
  .gt-lobby-middle{
    min-height: 338px !important;
  }
  .gt-lobby-right{
    grid-template-rows: minmax(0, 1fr) 110px !important;
  }
}


/* compact shared header */
.gtHeader--compact{ max-width:1080px !important; }
.gtHeaderInner--compact{
  min-height:64px;
  padding:10px 12px;
  /* The bar is a fixed max-width regardless of the browser window size, so
     it can run out of room on its own (e.g. once the Support link was added)
     even on a wide desktop viewport — the flex-wrap:wrap further down this
     file only kicked in below 980px of *viewport* width, which is a
     different thing entirely from "content is too wide for this fixed bar".
     Wrapping unconditionally here means it degrades to a tidy second row
     instead of the utility icons overlapping the brand text. */
  flex-wrap: wrap;
  row-gap: 8px;
}
.gtHeaderLeft, .gtHeaderRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.gtBackBtn, .gtHeaderUtility{
  appearance:none;
  text-decoration:none;
  color:#1a2631;
  font-weight:900;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  cursor:pointer;
}
.gtHeaderUtility--icon{
  justify-content:center;
  min-width:42px;
  padding:10px;
}
.gtHeaderUtility__icon{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.gtBackBtn:hover, .gtHeaderUtility:hover{ filter:brightness(1.03); color:#111; }
@media (max-width: 980px){
  .gtHeaderInner--compact{ flex-direction:row !important; flex-wrap:wrap; justify-content:space-between; }
  .gtBrandText{ font-size:26px; }
  .gtBrandVersion{ height:17px !important; padding:0 6px !important; font-size:9px !important; }
  .gtHeaderRight{ width:100%; justify-content:flex-end; }
}


.gt-feedback-wrap{
  display:flex;
  justify-content:center;
}
.gt-feedback-button{
  appearance:none;
  border:2px solid #8b8b96;
  border-radius:14px;
  padding:10px 16px;
  background:linear-gradient(#f9f9fc, #d9d8e1);
  color:#111;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 6px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8);
}
.gt-feedback-button:hover{ filter:brightness(1.03); }
.gt-feedback-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.38);
  padding:16px;
}
.gt-feedback-modal.hidden{ display:none; }
.gt-feedback-card{
  width:min(520px, 100%);
  background:linear-gradient(#f8f8fc, #e2e1e9);
  border:3px solid var(--gt-panel-border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 36px rgba(0,0,0,.24);
}
.gt-feedback-title{
  font-size:24px;
  font-weight:900;
  color:#111;
}
.gt-feedback-copy{
  margin-top:6px;
  color:#444;
  font-size:14px;
  font-weight:700;
}
.gt-feedback-text{
  width:100%;
  min-height:170px;
  margin-top:12px;
  border:2px solid #a5a7b2;
  border-radius:14px;
  padding:12px;
  font:inherit;
  resize:vertical;
  box-sizing:border-box;
  background:#fff;
  color:#111;
}
.gt-feedback-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.gt-feedback-cancel,
.gt-feedback-send{
  appearance:none;
  border:2px solid #8b8b96;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.gt-feedback-cancel{ background:#f2f2f5; color:#111; }
.gt-feedback-send{ background:linear-gradient(#f9f9fc, #d9d8e1); color:#111; }
.gt-feedback-status{
  min-height:20px;
  margin-top:10px;
  color:#25475d;
  font-weight:800;
}


.gt-chat-room-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gt-mini-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:linear-gradient(180deg,#f4d66e,#d19b2f);color:#2a1500;font-weight:900;font-size:11px;box-shadow:0 2px 8px rgba(0,0,0,.25);vertical-align:middle;}
.gt-mini-badge[hidden]{display:none !important;}
.gt-mentions-panel[hidden]{display:none !important;}
.gt-menu-link--with-badge{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
}
.gt-menu-link--with-badge .gt-menu-link__label{display:block;text-align:left;}
.gt-menu-link--with-badge .gt-mini-badge{justify-self:end;margin-left:0;}
.gt-mentions-toggle{appearance:none;border:1px solid rgba(0,0,0,.14);background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));color:#18212a;padding:6px 10px;border-radius:999px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.78);}
.gt-mentions-toggle:hover{filter:brightness(1.03);}
.gt-chat-panel{position:relative;}
.gt-mentions-panel{position:absolute;top:56px;right:14px;width:min(390px,calc(100% - 28px));max-height:360px;display:flex;flex-direction:column;background:linear-gradient(#f7f7fb,#e3e2ea);border:2px solid var(--gt-panel-border);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.28);z-index:30;overflow:hidden;}
.gt-mentions-panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:2px solid #a7a9b4;background:linear-gradient(#fafafc,#d9d8e1);font-weight:900;color:#202a34;}
.gt-mentions-panel__close{appearance:none;border:1px solid rgba(0,0,0,.12);background:linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));color:#1b232c;font-size:20px;line-height:1;cursor:pointer;border-radius:10px;min-width:34px;height:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.gt-mentions-panel__close:hover{filter:brightness(1.03);}
.gt-mentions-panel__list{display:flex;flex-direction:column;gap:10px;padding:12px;overflow:auto;background:#f3f3f8;}
.gt-mentions-panel__empty{padding:16px 14px 18px;color:#5c6877;font-weight:700;background:#f3f3f8;}
.gt-mention-item{appearance:none;border:1px solid #b8bbc6;background:linear-gradient(#ffffff,#f1f1f7);color:#16202a;border-radius:14px;padding:11px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:0 3px 10px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.85);}
.gt-mention-item:hover{background:linear-gradient(#fffdf5,#f7efd0);border-color:#d1b15b;}
.gt-mention-item.is-unread{border-color:#d1ad47;background:linear-gradient(#fff8de,#f5e2a7);box-shadow:0 3px 12px rgba(171,126,19,.16), inset 0 1px 0 rgba(255,255,255,.9);}
.gt-mention-item__head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.gt-mention-item__name{font-weight:900;color:#7a174f;}
.gt-mention-item__time{font-size:12px;color:#5f6670;white-space:nowrap;}
.gt-mention-item__text{font-size:13px;color:#1d2731;line-height:1.4;word-break:break-word;}
.msg.mention-jump .bubble{outline:2px solid rgba(244,214,110,.85);box-shadow:0 0 0 4px rgba(244,214,110,.18);}
.msg.is-new .bubble{ animation:gtMsgNewFlash 2.2s ease-out forwards; }
@keyframes gtMsgNewFlash{
  0%{ background:rgba(91,164,212,.15); }
  100%{ background:transparent; }
}

/* Date separators between message groups */
.gt-date-sep{
  display:flex; align-items:center; gap:8px;
  margin:10px 0 6px; padding:0 4px;
  color:#7a8797; font-size:11px; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
}
.gt-date-sep::before,.gt-date-sep::after{
  content:""; flex:1; height:1px; background:rgba(0,0,0,.10);
}
.gt-date-sep__label{ white-space:nowrap; }

/* @mention autocomplete dropdown — anchored inside the input shell */
.gt-mention-box{
  display:none;
  position:absolute;
  left:0;
  bottom:calc(100% + 6px);
  z-index:9999;
  min-width:220px;
  max-width:min(340px, calc(100vw - 24px));
  max-height:220px;
  overflow-y:auto;
  background:#fff;
  border:1px solid rgba(60,75,95,.22);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  padding:6px;
}
/* === Presence list polish === */
.player-row{display:grid;grid-template-columns:10px 42px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .15s ease, transform .15s ease;}
.player-row:hover{background:rgba(255,255,255,.62);transform:translateY(-1px);}
.player-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.14);background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.player-main{min-width:0;display:flex;flex-direction:column;gap:3px;}
.player-meta{display:flex;align-items:center;gap:6px;min-height:18px;color:#5b6571;font-size:12px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.player-meta-link{color:#6d517a;}
.player-watch-link{
  color:#315e9b;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:2px;
}
.player-watch-link:hover,
.player-watch-link:focus-visible{color:#173f79;}
.player-tag{display:inline-flex;align-items:center;justify-content:center;min-height:18px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.08);color:#4c5561;font-size:11px;font-weight:900;}
.player-clan-emblem{width:16px;height:16px;border-radius:4px;object-fit:cover;border:1px solid rgba(0,0,0,.12);background:#fff;}


/* 2026-03-31 lobby portrait uncrop final override */
body.gt-page--lobby .gt-lobby-left{min-height:0 !important;}
body.gt-page--lobby .gt-character-stage{height:340px !important; min-height:340px !important; align-items:flex-end !important; justify-content:center !important; overflow:visible !important; padding:8px 14px 0 !important;}
body.gt-page--lobby .gt-character-portrait-wrap{width:230px !important; max-width:100% !important; height:100% !important; min-height:320px !important; display:flex !important; align-items:flex-end !important; justify-content:center !important; overflow:visible !important;}
body.gt-page--lobby .gt-character-portrait{display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:320px !important; object-fit:contain !important; object-position:center bottom !important; margin:0 auto !important;}


/* 2026-03-31 final portrait uncrop override */
body.gt-page--lobby .gt-character-stage{
  height:360px !important;
  min-height:360px !important;
  padding:18px 10px 0 !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:visible !important;
}
body.gt-page--lobby .gt-character-portrait-wrap{
  width:240px !important;
  max-width:100% !important;
  height:100% !important;
  min-height:340px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:visible !important;
}
body.gt-page--lobby .gt-character-portrait{
  display:block !important;
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  margin:0 auto !important;
}

.gt-member-icon{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-right:4px;border-radius:999px;background:linear-gradient(180deg,#ffe79d,#d7a92d);color:#4a2b00;font-size:10px;font-weight:900;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.18);}


/* Members chat polish */
body[data-chat-scope="members"] .gt-chat-panel{min-height:0;height:100%;}
body[data-chat-scope="members"] .gt-chat-toolbar{padding:10px 12px;}
body[data-chat-scope="members"] .gt-chat-body{padding:10px 12px !important;overflow-y:auto;height:auto !important;min-height:0 !important;}
body[data-chat-scope="members"] .msg{margin:0 0 8px !important;}
body[data-chat-scope="members"] .msg .bubble{font-size:14px !important;line-height:1.35 !important;padding:0 0 8px !important;}
body[data-chat-scope="members"] .gt-chat-input-row{height:52px !important;grid-template-columns:42px 42px minmax(0,1fr) auto !important;gap:8px !important;padding:8px !important;}
body[data-chat-scope="members"] .gt-chat-input{width:100% !important;min-width:0 !important;height:36px !important;padding:0 12px !important;font-size:14px !important;}
body[data-chat-scope="members"] .gt-send-btn{height:36px !important;min-width:72px !important;padding:0 14px !important;font-size:14px !important;white-space:nowrap !important;}
body[data-chat-scope="members"] .gt-emoji-btn{height:36px !important;width:42px !important;font-size:18px !important;padding:0 !important;}
body[data-chat-scope="members"] .gt-emoji-picker{grid-template-columns:repeat(6,minmax(0,1fr));}
.chat-user-link.is-member, .name.is-member{color:#8e97a8;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.65);}
.gt-member-icon{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-right:4px;border-radius:999px;background:linear-gradient(180deg,#f3f4f7,#b9c0cc);border:1px solid #9199a6;color:#5b6473;font-size:10px;font-weight:900;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.role-badge.is-member{color:#5b6473;background:linear-gradient(#f3f4f7,#c2c9d3);border-color:#98a1af;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 6px rgba(186,194,205,.2);}
.role-badge .gt-member-icon{margin-right:6px;}
.gt-early-icon{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-right:4px;border-radius:999px;background:linear-gradient(180deg,#dff7ff,#93d8ef);border:1px solid #66b8d4;color:#1f5f79;font-size:10px;font-weight:900;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.role-badge .gt-early-icon{margin-right:6px;}


/* Member/founder polish */
.chat-user-link.is-founder, .name.is-founder{ text-shadow:0 1px 0 rgba(255,255,255,.7), 0 0 10px rgba(147,216,239,.18); }
.gt-early-icon{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-right:4px;border-radius:999px;background:linear-gradient(180deg,#dff7ff,#93d8ef);border:1px solid #66b8d4;color:#1f5f79;font-size:10px;font-weight:900;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.15);}
body[data-chat-scope="members"] .members-chat-input-row,
body[data-chat-scope="members"] #chatInputRow{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  height:auto !important;
  min-height:56px !important;
  padding:8px !important;
}
body[data-chat-scope="members"] .members-chat-input-row .gt-emoji-btn,
body[data-chat-scope="members"] #chatInputRow .gt-emoji-btn{
  flex:0 0 42px !important;
  width:42px !important;
}
body[data-chat-scope="members"] .members-chat-input-row .gt-chat-input,
body[data-chat-scope="members"] #chatInputRow .gt-chat-input{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  height:38px !important;
}
body[data-chat-scope="members"] .members-chat-input-row .gt-send-btn,
body[data-chat-scope="members"] #chatInputRow .gt-send-btn{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:84px !important;
  padding:0 14px !important;
  height:38px !important;
  white-space:nowrap !important;
}

body.gt-page--lobby .gt-chat-input-row{
  grid-template-columns:36px 36px minmax(0,1fr) 76px !important;
}
@media (max-width: 640px){
  body.gt-page--lobby .gt-chat-input-row{
    grid-template-columns:36px 36px minmax(0,1fr) 68px !important;
  }
}

body.gt-page--lobby .gt-lobby-quick-actions{
  display:none;
}

body.gt-page--lobby .gt-lobby-quick-action{
  text-decoration:none;
}

body.gt-page--lobby .gt-lobby-chat-upload{
  display:inline-flex;
  width:36px;
  height:36px;
}

body.gt-page--lobby .gt-chat-input{
  padding-left:12px;
  min-height:26px;
  max-height:84px;
}

body.gt-page--lobby .gt-chat-input-shell{
  min-width:0;
}

body.gt-page--lobby.gt-mobile-phone{
  --gt-lobby-mobile-players-max-height:26vh;
}

body.gt-page--lobby.gt-mobile-phone .gt-lobby-quick-actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.gt-page--lobby.gt-mobile-phone .gt-lobby-quick-action{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.16);
  background: linear-gradient(var(--gt-btn-top), var(--gt-btn-bot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  color: #18212a;
  font-weight: 900;
  font-size: 14px;
}

body.gt-page--lobby.gt-mobile-phone .gt-players-list{
  max-height: var(--gt-lobby-mobile-players-max-height, 26vh);
  min-height: 0;
}

@media (max-width: 820px) and (pointer: coarse) and (orientation: portrait) {
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 10px !important;
    height: auto !important;
  }

  /* The unconditional "portrait uncrop" rules further up this file (no media
     query, meant for tablet/desktop narrow windows) force the character to
     ~240x360px on every screen size including phones. That, combined with
     .gt-lobby-frame's overflow:hidden, was pushing the Play button and game
     options below the visible viewport. Phones get their own much smaller
     size here, with !important so it can actually win against those rules. */
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-character-stage{
    height: 150px !important;
    min-height: 150px !important;
    padding: 4px !important;
  }
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-character-portrait-wrap{
    width: 130px !important;
    min-height: 140px !important;
    height: auto !important;
  }
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-character-portrait{
    max-height: 140px !important;
    height: auto !important;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-left{
    order: 1;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-grid{
    order: 1;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-right{
    order: 2;
    /* A 1fr row nested inside a parent whose own height is "auto" has no
       real available space to divide, so its actual rendered height was
       inconsistent — which was letting the players box (and the footer
       right after it in the page) land in the wrong spot. Both rows here
       size to their own content instead (gt-chat-body and gt-players-list
       already cap their own heights elsewhere in this file). */
    grid-template-rows: auto auto !important;
    min-height: 0;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-middle{
    order: 3;
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  /* Guarantee the footer (info@gettiffany.com) always renders after the
     entire stacked grid — i.e. at the very bottom of the page — regardless
     of the order values above. */
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-footer{
    order: 4;
    position: static !important;
    margin-top: 14px !important;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-panel{
    min-height: 0;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-body{
    min-height: 0;
    max-height: min(42vh, 360px);
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-input-row{
    grid-template-columns: 36px 36px minmax(0,1fr) 72px;
    gap: 6px;
    padding: 8px;
    background: rgba(244, 244, 248, 0.96);
    backdrop-filter: blur(8px);
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-input{
    height: 36px;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-players-panel{
    min-height: 0;
  }
}

.gt-muted-icon{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;padding:0 6px;height:18px;border-radius:999px;background:linear-gradient(#eef1f5,#cfd5de);border:1px solid #9ca6b3;color:#445160;font-size:10px;font-weight:900;vertical-align:middle;}

/* === 2026-04-24 lobby mobile polish === */
@media (max-width: 1024px) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone .gt-chat-input-row{
    min-height:52px !important;
    height:auto !important;
    grid-template-columns:36px 36px minmax(0,1fr) 76px !important;
    gap:8px !important;
    padding:8px !important;
    align-items:center !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-input-shell{
    min-width:0 !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-input{
    min-height:44px !important;
    height:44px !important;
    padding:0 42px 0 12px !important;
    font-size:16px !important;
    line-height:1.2 !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-send-btn{
    min-height:44px !important;
    height:44px !important;
    min-width:76px !important;
    font-size:15px !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-lobby-chat-upload,
  body.gt-page--lobby.gt-mobile-phone .gt-emoji-btn{
    min-height:44px !important;
    height:44px !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-lobby-chat-upload{
    width:36px !important;
    border-radius:12px !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-panel,
  body.gt-page--lobby.gt-mobile-phone .gt-chat-body,
  body.gt-page--lobby.gt-mobile-phone .gt-players-panel,
  body.gt-page--lobby.gt-mobile-phone .gt-players-list{
    min-height:0 !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-body{
    scroll-padding-bottom:calc(var(--gt-mobile-shell-gap, 74px) + 20px);
  }

  body.gt-page--lobby.gt-mobile-phone .gt-lobby-quick-action{
    min-height:44px !important;
    font-size:15px !important;
  }
}

@media (max-width: 820px) and (pointer: coarse) and (orientation: portrait) {
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-shell,
  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-lobby-frame{
    overflow-y:auto !important;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-body{
    max-height:none !important;
    min-height:280px !important;
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-chat-input-row{
    box-shadow:0 -8px 18px rgba(0,0,0,.10);
  }

  body.gt-page--lobby.gt-mobile-phone.gt-mobile-portrait .gt-players-list{
    max-height:var(--gt-lobby-mobile-players-max-height, 26vh) !important;
  }
}


/* Desktop ad placeholder rails.
   These are deliberately disabled by default and only shown when /js/gtAds.js
   confirms the viewer is on desktop and is not a member. */
.gt-ad-zone{
  display:none;
}

.gt-ad-zone__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
  border:1px dashed rgba(100,105,120,.52);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(224,226,234,.72));
  color:#6a6f80;
  font:800 11px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.08);
  text-align:center;
  padding:10px;
}

@media (min-width:1500px) and (hover:hover) and (pointer:fine){
  body.gt-ads-enabled .gt-ad-zone--left,
  body.gt-ads-enabled .gt-ad-zone--right{
    position:fixed;
    top:148px;
    z-index:2;
    width:160px;
    min-height:600px;
    pointer-events:none;
  }

  body.gt-ads-enabled .gt-ad-zone--left{ left:24px; }
  body.gt-ads-enabled .gt-ad-zone--right{ right:24px; }

  body.gt-ads-enabled .gt-ad-zone--left,
  body.gt-ads-enabled .gt-ad-zone--right,
  body.gt-ads-enabled .gt-ad-zone--bottom{
    display:flex;
  }

  body.gt-ads-enabled .gt-ad-zone--bottom{
    width:min(970px, calc(100vw - 48px));
    min-height:90px;
    margin:16px auto 34px;
    pointer-events:none;
  }

  body.gt-ads-enabled .gt-ad-zone--bottom .gt-ad-zone__inner{
    width:100%;
  }
}

@media (max-width:1499px), (hover:none), (pointer:coarse){
  .gt-ad-zone{ display:none !important; }
}



/* ── Hide the shared header nav bar on mobile and on admin pages ─────────── */
/* On mobile touch screens the header is unnecessary and appears as a dark bar */
@media (max-width: 1024px) and (pointer: coarse) {
  #header-container,
  .gtHeader {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Robust touch hide — the `pointer: coarse` query above is NOT reliable in
   every browser. In particular the Facebook / Instagram in-app browsers (and
   some Android WebViews) report `pointer: fine`, so the rule above never fired
   for those users and the dark header bar stayed visible on top of the chat —
   even though it was correctly hidden when tested in normal mobile Safari/Chrome.
   We re-hide here keyed on the touch class set by the synchronous detector in
   the page <head> and by pageboot.js, both of which use
   `(pointer: coarse) || navigator.maxTouchPoints > 0`. Same ≤1024px target as
   above, just driven by a signal that can't be misreported. */
@media (max-width: 1024px) {
  html.gt-touch-device #header-container,
  html.gt-touch-device .gtHeader,
  body.gt-touch-page #header-container,
  body.gt-touch-page .gtHeader {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}
/* admin-ux-toolbar is hidden in admin_ux.css — gtHeader shows on admin pages */


/* ─── Consolidated composer & reaction styles (replaces patch blocks 04–09) ─── */

/* Composer grid layout */
.gt-chat-composer{ position:relative; z-index:3; }
.gt-chat-input-row{
  display:grid;
  grid-template-columns:28px 28px minmax(0, 1fr) 52px;
  grid-template-areas:
    "reply reply reply reply"
    "upload voice input send";
  align-items:center;
  gap:3px 5px;
  padding:5px 6px;
  min-height:40px;
  box-sizing:border-box;
}
.gt-chat-input-row #chatImageBtn,
.gt-chat-input-row .gt-lobby-chat-upload,
.gt-chat-input-row .gt-upload-btn{ grid-area:upload; }
.gt-chat-input-row .chat-voice-btn,
.gt-chat-input-row .clan-chat-voice-btn{ grid-area:voice; }
.gt-chat-input-row .chat-voice-cancel-btn{ grid-area:upload; }
.gt-chat-input-row .gt-upload-btn[hidden]{ display:none !important; }
.gt-chat-input-row .gt-chat-input-shell{ grid-area:input; min-width:0; width:100%; }
.gt-chat-input-row .gt-send-btn{ grid-area:send; }

/* Input shell */
.gt-chat-input-shell{ position:relative; min-width:0; width:100%; }
.gt-chat-input{
  width:100%; min-width:0; box-sizing:border-box;
  height:29px; min-height:29px; max-height:70px;
  padding:5px 31px 5px 10px; line-height:16px; border-radius:9px;
}
.gt-chat-input-row .gt-chat-input-shell:not(.has-attachment) .gt-chat-input{ padding-left:10px; }
.gt-chat-input-row .gt-chat-input-shell.has-attachment .gt-chat-input{ padding-left:62px; }

/* Emoji anchor & popover (overrides the base rule for the input-row context) */
.gt-chat-input-row .gt-emoji-btn--inline{
  position:absolute;
  top:50%; right:3px;
  transform:translateY(-50%);
  width:23px; height:23px; min-width:23px; min-height:23px;
  padding:0; margin:0; border-radius:7px; font-size:14px; line-height:1; box-sizing:border-box;
}
.gt-chat-input-row .gt-chat-emoji-popover{
  right:0; bottom:calc(100% + 8px);
  width:212px; max-width:min(212px, calc(100vw - 28px));
}
.gt-chat-input-row .gt-chat-emoji-grid{ grid-template-columns:repeat(6, 1fr); gap:5px; }
.gt-chat-input-row .gt-chat-emoji-item{ height:27px; min-width:0; padding:0; border-radius:8px; font-size:17px; }

/* Send & upload buttons */
.gt-chat-input-row .gt-upload-btn,
.gt-chat-input-row .gt-send-btn{ align-self:center; height:28px; min-height:28px; box-sizing:border-box; }
.gt-chat-input-row .gt-upload-btn{ width:28px; min-width:28px; padding:0; border-radius:8px; }
.gt-chat-input-row .gt-send-btn{ width:52px; padding:0 8px; border-radius:9px; font-size:12px; }

/* Typing line */
.gt-chat-typing-line{
  min-height:14px; padding:0 8px 3px; color:#52677d; font-size:11px; font-weight:800;
}
#chatTypingIndicator{ min-height:14px; padding:0 8px 3px; color:#52677d; font-size:11px; font-weight:800; }

/* Reply bar */
.gt-chat-input-row #chatReplyBar{
  grid-area:reply;
  display:none; align-items:center; gap:6px;
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  margin:0 0 1px;
  padding:3px 6px 3px 8px;
  min-height:23px; max-height:25px; overflow:hidden;
  border:1px solid rgba(87,111,138,.24);
  border-left:4px solid #56bfe2;
  border-radius:8px;
  background:linear-gradient(180deg, #fbfcff 0%, #edf3f9 100%);
  color:#1d3348; font-size:11px; line-height:1.1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(31,45,66,.08);
}
.gt-chat-input-row #chatReplyBar.visible{ display:flex; }
.gt-chat-input-row #chatReplyLabel{
  flex:1 1 auto; min-width:0; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:800; letter-spacing:0;
}
.gt-chat-input-row #chatReplyLabel::first-letter{ color:#087fa5; }
.gt-chat-input-row #chatReplyClear{
  flex:0 0 18px; width:18px; height:18px; min-width:18px; margin:0; padding:0;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; color:#405368; background:transparent;
}
.gt-chat-input-row #chatReplyClear:hover,
.gt-chat-input-row #chatReplyClear:focus-visible{ background:rgba(62,89,116,.12); color:#111; outline:none; }

/* Members scope overrides */
body[data-chat-scope="members"] .members-chat-input-row,
body[data-chat-scope="members"] #chatInputRow{
  grid-template-columns:28px 28px minmax(0, 1fr) 52px;
  grid-template-areas:
    "reply reply reply reply"
    "upload voice input send";
}
body[data-chat-scope="members"] .members-chat-input-row #chatReplyBar,
body[data-chat-scope="members"] #chatInputRow #chatReplyBar{ grid-area:reply; grid-column:auto; }
body[data-chat-scope="members"] #chatReplyBar{ grid-column:1 / -1; }
body[data-chat-scope="members"] .gt-chat-input{
  height:auto; min-height:36px; max-height:84px;
  padding:8px 42px 7px 12px;
}
body[data-chat-scope="members"] .gt-emoji-btn--inline{
  position:absolute; top:3px; right:4px; width:30px; height:30px;
}

/* Reaction strip */
.msg-reaction-strip{
  background:transparent; border:0; box-shadow:none; padding:0; gap:3px;
}
.msg-reaction-strip.no-reactions{ opacity:.35; }
.msg:hover .msg-reaction-strip.no-reactions,
.msg-reaction-strip.no-reactions:focus-within{ opacity:1; }
.msg-reaction-toggle{
  min-width:0; height:18px; padding:0 5px; font-size:11px;
  background:linear-gradient(#fffef9,#edf3fb);
}
.msg-reaction-toggle.is-active{ background:linear-gradient(#fff1b6,#f4cf55); }
.msg-reaction-count{ font-size:9px; }
.msg-reaction-add{
  appearance:none; border:1px solid rgba(95,104,122,.20);
  background:linear-gradient(#ffffff,#edf1f7); border-radius:999px;
  height:18px; min-width:22px; padding:0 5px; font-size:11px; line-height:1;
  cursor:pointer; opacity:.45;
  transition:opacity .12s ease, transform .12s ease, box-shadow .12s ease;
}
.msg:hover .msg-reaction-add,
.msg-reaction-add:focus-visible,
.msg-reaction-strip.has-reactions .msg-reaction-add{ opacity:.9; }
.msg-reaction-add:hover{
  transform:translateY(-1px) scale(1.06);
  box-shadow:0 2px 6px rgba(0,0,0,.14);
  background:linear-gradient(#fff8de,#eddba8);
  border-color:#c39b3c;
}

/* Reaction picker popover */
.msg-reaction-picker-popover{
  position:fixed; z-index:99999;
  display:flex; align-items:center; gap:5px; padding:6px;
  border-radius:999px; border:1px solid rgba(55,68,84,.22);
  background:linear-gradient(#ffffff,#e9eef7);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.msg-reaction-picker-btn{
  width:30px; height:30px; border-radius:999px;
  border:1px solid rgba(0,0,0,.10); background:linear-gradient(#fff,#f0f3f8);
  cursor:pointer; font-size:18px; line-height:1;
  transition:transform .12s ease, background .12s ease;
}
.msg-reaction-picker-btn:hover,
.msg-reaction-picker-btn:focus-visible{
  transform:translateY(-2px) scale(1.14);
  background:linear-gradient(#fff7df,#f2dda2); outline:none;
}

/* Instagram-style reactions (cc-reactions) */
.cc-reactions-instagram{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.cc-reactions-instagram .cc-react-btn{
  display:inline-flex; align-items:center; gap:3px; min-height:20px; padding:1px 6px;
  border-radius:999px; border:1px solid rgba(95,104,122,.22);
  background:linear-gradient(#fff,#edf1f7); cursor:pointer; font-size:12px; font-weight:900;
}
.cc-reactions-instagram .cc-react-btn.active{ background:linear-gradient(#ffe69a,#f0c84b); border-color:#b98d1f; }
.cc-reactions-instagram .cc-react-btn:hover{ transform:translateY(-1px); }
.cc-reactions-instagram .cc-react-btn[data-reaction-hover]{ position:relative; }
.cc-reactions-instagram .cc-react-btn[data-reaction-hover]:hover::after,
.cc-reactions-instagram .cc-react-btn[data-reaction-hover]:focus-visible::after{
  content:attr(data-reaction-hover); position:absolute; z-index:60;
  left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:max-content; max-width:230px; white-space:normal; text-align:left;
  padding:6px 8px; border-radius:8px;
  background:rgba(22,28,38,.96); color:#fff; font-size:11px; font-weight:800;
  line-height:1.25; box-shadow:0 4px 12px rgba(0,0,0,.25); pointer-events:none;
}
.cc-reactions-instagram .cc-react-btn[data-reaction-hover]:hover::before,
.cc-reactions-instagram .cc-react-btn[data-reaction-hover]:focus-visible::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 3px); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(22,28,38,.96); pointer-events:none;
}

/* --- Voice messages (lobby chat) --- */
.chat-voice-btn.is-recording{ background:#e23b6d !important; color:#fff !important; border-color:#b0264f !important; min-width:54px; animation:chatRecPulse 1s ease-in-out infinite; }
.chat-voice-cancel-btn{
  background:#fff0f3 !important; color:#a51f49 !important; border-color:#d9829d !important;
  font-size:20px !important; line-height:1 !important;
}
.chat-voice-cancel-btn:hover,.chat-voice-cancel-btn:focus-visible{ background:#ffdce6 !important; outline:2px solid rgba(165,31,73,.2); outline-offset:1px; }
@keyframes chatRecPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(226,59,109,.5);} 50%{ box-shadow:0 0 0 6px rgba(226,59,109,0);} }
.chat-voice{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:5px 8px; border-radius:12px; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.12); }
.chat-voice__icon{ font-size:14px; }
.chat-voice__player{ height:32px; max-width:220px; }
.chat-vm-report{ background:none; border:0; color:#c0392b; font-size:11px; font-weight:900; cursor:pointer; opacity:.7; margin-left:4px; }
.chat-vm-report:hover{ opacity:1; text-decoration:underline; }