@media (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-mobile-phone.lobby-mobile-active,
  body.gt-mobile-phone.gt-page--lobby,
  body.gt-mobile-phone.gt-page--account{
    overflow-x:hidden;
    overflow-y:auto;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-shell,
  body.gt-mobile-phone .gt-custom-shell,
  body.gt-mobile-phone .wrap{
    padding-top:max(8px, var(--gt-safe-top));
    padding-bottom:max(12px, var(--gt-safe-bottom));
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame,
  body.gt-mobile-phone .gt-custom-frame,
  body.gt-mobile-phone .frame{
    min-height:calc(100dvh - 16px);
    height:auto;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-main,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid,
  body.gt-mobile-phone .gt-custom-body,
  body.gt-mobile-phone .cust-grid{
    min-height:0;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-body,
  body.gt-page--lobby.gt-mobile-phone .gt-players-list,
  body.gt-mobile-phone .tabs,
  body.gt-mobile-phone .custom-items-wrap,
  body.gt-mobile-phone .panel-space{
    -webkit-overflow-scrolling:touch;
  }
}

/* Landscape-first phone browser layer.
   Desktop stays untouched because all selectors are behind body.gt-mobile-phone. */

body.gt-mobile-phone{
  --gt-mobile-safe-vh: 1vh;
  --gt-safe-top: env(safe-area-inset-top, 0px);
  --gt-safe-right: env(safe-area-inset-right, 0px);
  --gt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gt-safe-left: env(safe-area-inset-left, 0px);
  overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%;
}

body.gt-mobile-phone.gt-mobile-portrait{
  overflow-x:hidden;
  overflow-y:auto;
}

.gt-menu-beta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#ffd84f;
  color:#563f00;
  border:1px solid rgba(121,86,0,.35);
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  vertical-align:middle;
}

body.gt-mobile-phone .gt-lobby-shell,
body.gt-mobile-phone .gt-custom-shell,
body.gt-mobile-phone .wrap,
body.gt-mobile-phone .frame{
  padding-left:max(8px, var(--gt-safe-left));
  padding-right:max(8px, var(--gt-safe-right));
}

body.gt-mobile-phone .gt-lobby-frame,
body.gt-mobile-phone .gt-custom-frame,
body.gt-mobile-phone .frame{
  padding-bottom:max(10px, var(--gt-safe-bottom));
}

.gt-rotate-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 15%, rgba(63,84,112,.96), rgba(5,7,12,.98) 62%);
  color:#fff;
  text-align:center;
}
body.gt-mobile-phone.gt-mobile-portrait .gt-rotate-overlay{ display:flex; }
body.gt-page--play.play-mobile-portrait-active .gt-rotate-overlay{ display:none !important; }
/* Pixel mobile play hard-fix: do not trap players behind the rotate overlay. */
body.gt-page--play .gt-rotate-overlay{ display:none !important; pointer-events:none !important; }
/* Lobby, account and customisation already carry dedicated portrait layout rules
   throughout this file (see the gt-page--lobby / gt-custom-* / cust-grid blocks
   below) but were never given the same rotate-overlay bypass play.html has,
   so that portrait CSS has been unreachable. Bypass it here the same way. */
body.gt-page--lobby .gt-rotate-overlay,
body.gt-page--account .gt-rotate-overlay,
body.gt-page--customisation .gt-rotate-overlay{ display:none !important; pointer-events:none !important; }

.gt-rotate-overlay__card{
  max-width:420px;
  padding:22px 20px;
  border-radius:22px;
  border:2px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:0 18px 38px rgba(0,0,0,.45);
}
.gt-rotate-overlay__icon{ font-size:44px; line-height:1; margin-bottom:10px; }
.gt-rotate-overlay__title{ font-weight:900; font-size:24px; margin-bottom:8px; }
.gt-rotate-overlay__text{ font-weight:700; font-size:15px; color:rgba(255,255,255,.86); }

@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone{ overflow-x:hidden; }

  body.gt-page--lobby.gt-mobile-phone .gt-lobby-shell{
    padding:10px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame{
    min-height:calc(var(--gt-mobile-safe-vh, 1vh) * 100 - 20px);
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-main,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid{
    gap:10px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid{
    grid-template-columns: 200px minmax(0, 1fr) 240px;
    align-items:start;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-character-stage{ min-height:228px; }
  body.gt-page--lobby.gt-mobile-phone .gt-character-portrait-wrap{ min-height:208px; }
  body.gt-page--lobby.gt-mobile-phone .gt-character-portrait{ max-height:208px; }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-middle{
    min-height:0;
    align-items:stretch;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-panel{
    height:100%;
    max-height:100%;
    padding:8px;
    overflow:hidden;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    align-content:start;
    max-height:100%;
    overflow:auto;
    padding-right:2px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:38px;
    padding:6px 8px;
    font-size:13px;
    line-height:1.12;
    white-space:normal;
    word-break:break-word;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link--button{ width:100%; }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-body{ min-height:200px; max-height:34vh; }
  body.gt-page--lobby.gt-mobile-phone .gt-players-list{ max-height:22vh; }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-input,
  body.gt-page--lobby.gt-mobile-phone .gt-send-btn,
  body.gt-page--lobby.gt-mobile-phone .gt-emoji-btn,
  body.gt-page--lobby.gt-mobile-phone .gt-play-button,
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link{ min-height:44px; }

  body.gt-mobile-phone .gt-custom-shell{ padding:10px; }
  body.gt-mobile-phone .gt-custom-frame{ min-height:calc(var(--gt-mobile-safe-vh, 1vh) * 100 - 20px); }
  body.gt-mobile-phone .cust-grid{ grid-template-columns: 300px minmax(0,1fr); gap:10px; }
  body.gt-mobile-phone .tabs-side{ grid-column:1 / -1; order:3; }
  body.gt-mobile-phone .tabs{ display:flex; flex-wrap:nowrap; overflow:auto; gap:8px; padding-bottom:6px; }
  body.gt-mobile-phone .preview-panel{ min-height:unset; }
  body.gt-mobile-phone .preview-empty{ min-height:360px; }
  body.gt-mobile-phone .work-panel{ min-height:unset; }

  body.gt-mobile-phone .wrap{ width:min(100vw - 12px, 1520px); }
  body.gt-mobile-phone .body{ gap:10px; }
  body.gt-mobile-phone .stage{ width:300px; height:430px; }
  body.gt-mobile-phone .stageInner{ left:50%; transform:translateX(-50%); }
  body.gt-mobile-phone .stagePodium{ left:50%; transform:translateX(-50%); }

  body.gt-mobile-phone .wrap > .card,
  body.gt-mobile-phone .panel{ overflow:visible; }
}

@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active .wrap{
    max-width:none !important;
    margin:0;
    padding:8px;
  }
  body.gt-mobile-phone.play-mobile-active #launchPanel,
  body.gt-mobile-phone.play-mobile-active #gameRoot{
    padding:10px;
  }
  body.gt-mobile-phone.play-mobile-active .gameGrid{
    grid-template-columns: 1fr !important;
    gap:10px !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene{
    height:54vh !important;
    min-height:280px;
    max-height:420px;
  }
  body.gt-mobile-phone.play-mobile-active .tiff{
    height:auto !important;
    min-height:unset !important;
    display:grid !important;
    grid-template-columns: 110px 1fr 1fr !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:10px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnWrap{
    padding:8px 4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer{
    width:84px !important;
    height:84px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer .inner{
    width:64px !important;
    height:64px !important;
    font-size:26px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffBox{
    min-height:110px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:220px !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform:translate(-26px, 0) scale(.40) !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffReact{
    font-size:13px !important;
    min-height:110px !important;
  }
  body.gt-mobile-phone.play-mobile-active .hudRow{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:10px !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelHead{
    font-size:16px !important;
    padding:8px !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelBody{
    min-height:70px !important;
    padding:8px !important;
  }
  body.gt-mobile-phone.play-mobile-active .chatBar{
    position:sticky;
    bottom:0;
    z-index:30;
    margin-top:10px !important;
    padding:8px !important;
    border-radius:16px;
    background:rgba(0,0,0,.38);
    backdrop-filter:blur(8px);
  }
  body.gt-mobile-phone.play-mobile-active #chatInput,
  body.gt-mobile-phone.play-mobile-active #sendBtn,
  body.gt-mobile-phone.play-mobile-active .btn,
  body.gt-mobile-phone.play-mobile-active #mpList button{
    min-height:44px;
    font-size:15px;
  }
  body.gt-mobile-phone.play-mobile-active .playerSprite{ width:128px !important; }
  body.gt-mobile-phone.play-mobile-active .winnerNamePlate{ top:68%; font-size:26px; }
  body.gt-mobile-phone.play-mobile-active #movePicker{
    max-width:min(320px, 88vw);
    max-height:42vh;
  }
}

@media (max-width: 820px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid{ grid-template-columns: 190px minmax(0,1fr) 230px; }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  body.gt-mobile-phone .cust-grid{ grid-template-columns: 260px minmax(0,1fr); }
  body.gt-mobile-phone.play-mobile-active .hudRow{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  body.gt-mobile-phone.play-mobile-active .tiff{ grid-template-columns: 96px 1fr 1fr !important; }
}

/* Tight one-screen phone landscape pass for play page */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active{
    overflow:hidden;
  }
  body.gt-mobile-phone.play-mobile-active .wrap{
    width:100vw !important;
    max-width:none !important;
    margin:0 !important;
    padding:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .card{
    border-radius:16px !important;
  }
  body.gt-mobile-phone.play-mobile-active .bar{
    padding:8px 10px !important;
    gap:8px !important;
  }
  body.gt-mobile-phone.play-mobile-active .title{
    font-size:20px !important;
  }
  body.gt-mobile-phone.play-mobile-active .subtitle{
    font-size:12px !important;
    margin-left:6px !important;
  }
  body.gt-mobile-phone.play-mobile-active .bar .btn{
    min-height:36px !important;
    padding:6px 10px !important;
    font-size:13px !important;
    border-radius:10px !important;
  }

  body.gt-mobile-phone.play-mobile-active #gameRoot{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto auto !important;
    gap:6px !important;
    padding:6px !important;
    min-height:calc(100svh - 76px) !important;
  }
  body.gt-mobile-phone.play-mobile-active .gameGrid{
    grid-template-columns:minmax(0,1fr) 134px !important;
    gap:6px !important;
    align-items:stretch !important;
    min-height:0 !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene{
    height:240px !important;
    min-height:240px !important;
    max-height:240px !important;
    overflow:hidden !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene img#bgImg{
    object-position:center 68% !important;
  }
  body.gt-mobile-phone.play-mobile-active .playersLayer{
    inset:auto 0 0 0 !important;
    top:22px !important;
  }
  body.gt-mobile-phone.play-mobile-active .playerSprite{ width:104px !important; }
  body.gt-mobile-phone.play-mobile-active .winnerNamePlate{ top:70% !important; font-size:18px !important; }

  body.gt-mobile-phone.play-mobile-active .mmBox{
    max-width:min(64vw, 440px) !important;
    padding:10px !important;
    border-radius:16px !important;
  }
  body.gt-mobile-phone.play-mobile-active .mmTitle{
    font-size:16px !important;
    margin-bottom:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .mmSub{
    font-size:12px !important;
    margin-bottom:6px !important;
  }
  body.gt-mobile-phone.play-mobile-active .mmRing{
    width:120px !important;
    height:120px !important;
    margin:6px auto !important;
  }
  body.gt-mobile-phone.play-mobile-active .mmRing .n{
    font-size:18px !important;
  }
  body.gt-mobile-phone.play-mobile-active .mmPlayers{
    gap:4px !important;
    margin-top:6px !important;
  }

  body.gt-mobile-phone.play-mobile-active .tiff{
    grid-template-columns:1fr !important;
    grid-template-rows:70px 100px minmax(0,1fr) !important;
    gap:5px !important;
    padding:5px !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnWrap{
    padding:6px 2px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnLbl{
    font-size:10px !important;
    margin-bottom:2px !important;
    letter-spacing:.08em !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer{
    width:62px !important;
    height:62px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer .inner{
    width:46px !important;
    height:46px !important;
    font-size:18px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffBox{
    min-height:0 !important;
    padding:4px !important;
    border-radius:12px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:96px !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap{
    padding:0 !important;
    align-items:flex-end !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform:translate(0, 14px) scale(.41) !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffReact{
    font-size:11px !important;
    min-height:54px !important;
    line-height:1.15 !important;
    overflow:auto !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffReact:empty{
    display:none !important;
  }

  body.gt-mobile-phone.play-mobile-active .hudRow{
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:6px !important;
    margin-top:0 !important;
    align-items:stretch !important;
  }
  body.gt-mobile-phone.play-mobile-active .panel{
    min-width:0 !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelHead{
    font-size:11px !important;
    padding:5px 6px !important;
    line-height:1 !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelBody{
    min-height:44px !important;
    padding:5px 6px !important;
    font-size:11px !important;
    line-height:1.08 !important;
    overflow:hidden !important;
  }
  body.gt-mobile-phone.play-mobile-active .results{
    padding:5px 6px !important;
    font-size:11px !important;
    line-height:1.08 !important;
  }
  body.gt-mobile-phone.play-mobile-active .results div:first-child{
    font-size:11px !important;
    margin-bottom:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active #roundInfo{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.08 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
  }

  body.gt-mobile-phone.play-mobile-active .chatBar{
    position:static !important;
    bottom:auto !important;
    z-index:auto !important;
    margin-top:0 !important;
    padding:0 !important;
    background:none !important;
    backdrop-filter:none !important;
    gap:6px !important;
    display:flex !important;
    align-items:center !important;
  }
  body.gt-mobile-phone.play-mobile-active #chatInput,
  body.gt-mobile-phone.play-mobile-active #sendBtn{
    min-height:38px !important;
    font-size:14px !important;
  }
  body.gt-mobile-phone.play-mobile-active #chatInput{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:8px 10px !important;
    border-radius:12px !important;
  }
  body.gt-mobile-phone.play-mobile-active #sendBtn{
    flex:0 0 86px !important;
    padding:0 10px !important;
  }
}

@media (max-width: 820px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active #gameRoot{
    min-height:calc(100svh - 70px) !important;
  }
  body.gt-mobile-phone.play-mobile-active .gameGrid{
    grid-template-columns:minmax(0,1fr) 124px !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene img#bgImg{
    object-position:center 70% !important;
  }
  body.gt-mobile-phone.play-mobile-active .playersLayer{
    top:18px !important;
  }
  body.gt-mobile-phone.play-mobile-active .playerSprite{ width:96px !important; }
  body.gt-mobile-phone.play-mobile-active .mmRing{ width:104px !important; height:104px !important; }
  body.gt-mobile-phone.play-mobile-active .tiff{
    grid-template-rows:64px 86px minmax(0,1fr) !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:84px !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap{
    align-items:flex-end !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform:translate(0, 12px) scale(.36) !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelHead{ font-size:10px !important; }
  body.gt-mobile-phone.play-mobile-active .panelBody,
  body.gt-mobile-phone.play-mobile-active .results,
  body.gt-mobile-phone.play-mobile-active #roundInfo{ font-size:10px !important; }
}

/* Pass 3: tighten iPhone/Safari fit without chopping the play screen */
@media (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone{
    overflow:hidden;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-shell{
    padding:6px;
    min-height:calc(var(--gt-mobile-safe-vh, 1vh) * 100);
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame{
    min-height:calc(var(--gt-mobile-safe-vh, 1vh) * 100 - 12px);
    border-radius:16px;
    overflow:hidden;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-topbar{
    padding:8px 10px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-topbar-controls{
    gap:5px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-title{
    font-size:24px;
    line-height:1;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-clock{
    min-width:52px;
    font-size:14px;
    padding:4px 2px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-main{
    gap:8px;
    min-height:0;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    gap:8px;
    min-height:0;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-left,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-middle,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-right{
    min-width:0;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-left{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-character-stage{
    min-height:132px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-character-portrait-wrap{
    min-height:122px;
    padding:4px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-character-portrait{
    max-height:118px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-play-wrap,
  body.gt-page--lobby.gt-mobile-phone .gt-play-mode-wrap{
    margin:0;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-play-button,
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link,
  body.gt-page--lobby.gt-mobile-phone .gt-send-btn,
  body.gt-page--lobby.gt-mobile-phone .gt-emoji-btn,
  body.gt-page--lobby.gt-mobile-phone .gt-chat-input{
    min-height:38px;
    font-size:14px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:5px;
    align-content:start;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-panel,
  body.gt-page--lobby.gt-mobile-phone .gt-players-panel,
  body.gt-page--lobby.gt-mobile-phone .gt-menu-panel,
  body.gt-page--lobby.gt-mobile-phone .gt-play-mode-wrap,
  body.gt-page--lobby.gt-mobile-phone .gt-character-stage{
    border-radius:14px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-toolbar,
  body.gt-page--lobby.gt-mobile-phone .gt-players-head{
    padding:8px 10px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-chat-body{
    min-height:140px;
    max-height:22vh;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-players-list{
    max-height:14vh;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-footer{
    margin-top:6px;
    padding-top:4px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-footer__text{
    font-size:11px;
    line-height:1.15;
  }
}

@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active{
    overflow:hidden;
  }
  body.gt-mobile-phone.play-mobile-active .wrap{
    padding:2px !important;
  }
  body.gt-mobile-phone.play-mobile-active .card{
    border-radius:12px !important;
  }
  body.gt-mobile-phone.play-mobile-active .bar{
    padding:5px 8px !important;
    gap:6px !important;
    min-height:0 !important;
  }
  body.gt-mobile-phone.play-mobile-active .title{
    font-size:16px !important;
    line-height:1 !important;
  }
  body.gt-mobile-phone.play-mobile-active .subtitle{
    font-size:11px !important;
    margin-left:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .bar .btn{
    min-height:28px !important;
    padding:4px 8px !important;
    font-size:11px !important;
    border-radius:9px !important;
  }
  body.gt-mobile-phone.play-mobile-active #gameRoot{
    gap:4px !important;
    padding:4px !important;
    min-height:calc(100dvh - 54px) !important;
  }
  body.gt-mobile-phone.play-mobile-active .gameGrid{
    grid-template-columns:minmax(0,1fr) 108px !important;
    gap:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene{
    min-height:0 !important;
    height:auto !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene{
    height:204px !important;
    min-height:204px !important;
    max-height:204px !important;
  }
  body.gt-mobile-phone.play-mobile-active .scene img#bgImg{
    object-position:center 72% !important;
  }
  body.gt-mobile-phone.play-mobile-active .playersLayer{
    top:14px !important;
  }
  body.gt-mobile-phone.play-mobile-active .playerSprite{
    width:90px !important;
  }
  body.gt-mobile-phone.play-mobile-active .winnerNamePlate{
    top:69% !important;
    font-size:16px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiff{
    grid-template-rows:50px 74px minmax(0,1fr) !important;
    gap:3px !important;
    padding:3px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnWrap{
    padding:3px 1px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnLbl{
    font-size:9px !important;
    margin-bottom:1px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer{
    width:50px !important;
    height:50px !important;
  }
  body.gt-mobile-phone.play-mobile-active .turnTimer .inner{
    width:36px !important;
    height:36px !important;
    font-size:15px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffBox{
    padding:3px !important;
    border-radius:10px !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:74px !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap{
    padding:0 !important;
    align-items:flex-end !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform:translate(0, 10px) scale(.33) !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffReact{
    min-height:42px !important;
    font-size:10px !important;
    line-height:1.05 !important;
  }
  body.gt-mobile-phone.play-mobile-active .hudRow{
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    gap:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelHead{
    font-size:9px !important;
    padding:4px 5px !important;
  }
  body.gt-mobile-phone.play-mobile-active .panelBody,
  body.gt-mobile-phone.play-mobile-active .results,
  body.gt-mobile-phone.play-mobile-active #roundInfo{
    min-height:34px !important;
    padding:4px 5px !important;
    font-size:9px !important;
    line-height:1.05 !important;
  }
  body.gt-mobile-phone.play-mobile-active #roundInfo{
    -webkit-line-clamp:2;
  }
  body.gt-mobile-phone.play-mobile-active .chatBar{
    gap:4px !important;
  }
  body.gt-mobile-phone.play-mobile-active #chatInput,
  body.gt-mobile-phone.play-mobile-active #sendBtn{
    min-height:30px !important;
    height:30px !important;
    font-size:12px !important;
  }
  body.gt-mobile-phone.play-mobile-active #sendBtn{
    flex-basis:72px !important;
  }
}

@media (max-width: 932px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active #gameRoot{
    min-height:calc(100dvh - 50px) !important;
  }
}


/* Pass 7: nudge Tiffany left and restore mobile play scrolling */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body.gt-mobile-phone.play-mobile-active .wrap,
  body.gt-mobile-phone.play-mobile-active .card,
  body.gt-mobile-phone.play-mobile-active #gameRoot{
    overflow:visible !important;
  }
  body.gt-mobile-phone.play-mobile-active .chatBar{
    position:sticky !important;
    bottom:0 !important;
    z-index:30 !important;
    margin-top:6px !important;
    padding:4px !important;
    background:rgba(0,0,0,.18) !important;
    backdrop-filter:blur(6px);
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:86px !important;
    overflow:hidden !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap{
    justify-content:flex-start !important;
    align-items:flex-end !important;
    overflow:hidden !important;
  }
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform-origin:bottom center !important;
    transform:translate(-20px, 10px) scale(.28) !important;
  }
}

@media (max-width: 820px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage{
    transform:translate(-22px, 9px) scale(.25) !important;
  }
  body.gt-mobile-phone.play-mobile-active .tiffPortrait{
    min-height:78px !important;
  }
}


/* === Mobile lobby chat fill fix === */
body.gt-page--lobby.gt-mobile-phone .gt-chat-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  min-height:0 !important;
}
body.gt-page--lobby.gt-mobile-phone .gt-chat-body{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
}
body.gt-page--lobby.gt-mobile-phone .gt-players-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
}
body.gt-page--lobby.gt-mobile-phone .gt-players-list{
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
}


/* === Mobile lobby chat fill fix v2 === */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-shell,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-main,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-right {
    min-height: 0 !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-lobby-right {
    height: 100% !important;
    align-self: stretch !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-toolbar,
  body.gt-page--lobby.gt-mobile-phone .gt-chat-input-row {
    flex: 0 0 auto !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-mentions-panel[hidden] {
    display: none !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    background: #fff !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-players-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body.gt-page--lobby.gt-mobile-phone .gt-players-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}


/* === Mobile lobby scroll rescue === */
.gtMobileTabBar,
.gtMobileMoreDrawer {
  display: none;
}

@media (max-width: 1024px) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-shell,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-main,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-grid,
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-right{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-frame{
    overflow:visible !important;
  }
}

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

@media (max-width: 900px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:5px;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link{
    min-height:36px !important;
    font-size:13px !important;
    padding:4px 6px !important;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.1;
  }
}


/* 2026-04-03 mobile lobby menu tidy fix: keep the blue menu box stacked, readable, and contained. */
@media (max-width: 1024px) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone .gt-menu-panel{
    padding:10px !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:8px !important;
    align-content:stretch !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link,
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link--button{
    width:100% !important;
    min-height:40px !important;
    padding:8px 10px !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link--with-badge{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    text-align:left !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link--with-badge .gt-mini-badge{
    justify-self:end !important;
    margin-left:0 !important;
  }
}

@media (max-width: 900px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-page--lobby.gt-mobile-phone .gt-lobby-middle{
    min-height:0 !important;
    padding-top:0 !important;
    align-items:stretch !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-panel{
    width:100% !important;
    max-height:none !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-inner{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:6px !important;
  }
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link,
  body.gt-page--lobby.gt-mobile-phone .gt-menu-link--button{
    min-height:38px !important;
    font-size:14px !important;
    padding:8px 10px !important;
  }
}

@media (max-width: 1024px) and (pointer: coarse) {
  body.gt-mobile-phone {
    --gt-mobile-shell-gap: max(0px, var(--gt-safe-bottom));
  }

  body.gt-mobile-phone #header-container {
    position: relative;
    z-index: 60;
  }

  body.gt-mobile-phone .gtHeader--compact {
    position: sticky;
    top: max(8px, var(--gt-safe-top));
    z-index: 70;
    margin-bottom: 10px;
  }

  body.gt-mobile-phone .gtHeaderInner--compact {
    min-height: 58px;
    border-radius: 18px;
  }

  body.gt-mobile-phone .gtHeaderRight {
    gap: 8px;
    flex-wrap: wrap;
  }

  body.gt-mobile-phone .gtBackBtn,
  body.gt-mobile-phone .gtHeaderUtility {
    min-height: 40px;
    padding: 9px 12px;
  }

  body.gt-mobile-phone .gtHeaderUtility--icon {
    min-width: 40px;
    padding: 9px;
  }

  body.gt-mobile-phone.gt-mobile-signed-in .gt-lobby-shell,
  body.gt-mobile-phone.gt-mobile-signed-in .wrap,
  body.gt-mobile-phone.gt-mobile-signed-in .forum-wrap,
  body.gt-mobile-phone.gt-mobile-signed-in .page-wrap,
  body.gt-mobile-phone.gt-mobile-signed-in .gt-custom-shell {
    /* Push page content above the fixed tab bar */
    padding-bottom: calc(86px + max(10px, var(--gt-safe-bottom))) !important;
  }

  /* Tab bar and More drawer are positioned and shown below — no blanket hide here */

  body.gt-mobile-phone .gtMobileTabBar {
    display: none !important;
  }

  body.gt-mobile-phone .gtMobileTabBar__link {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 7px 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: rgba(246, 228, 188, 0.72);
    text-decoration: none;
    font: 900 11px/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.04em;
  }

  body.gt-mobile-phone .gtMobileTabBar__link.is-active {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  body.gt-mobile-phone .gtMobileTabBar__link--button {
    cursor: pointer;
    font-family: inherit;
  }

  body.gt-mobile-phone .gtMobileTabBar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: currentColor;
  }

  body.gt-mobile-phone .gtMobileTabBar__icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer {
    position: fixed;
    inset: 0;
    z-index: 94;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 12px calc(92px + var(--gt-mobile-keyboard-gap, 0px));
    background: rgba(5, 7, 12, 0.52);
    backdrop-filter: blur(6px);
  }

  body.gt-mobile-phone .gtMobileMoreDrawer.hidden,
  body.gt-mobile-phone .gtMobileMoreDrawer[hidden] {
    display: none !important;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__sheet {
    width: min(560px, 100%);
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(25, 27, 35, 0.98), rgba(13, 15, 20, 0.99));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__title {
    color: #ffe7a1;
    font: 900 20px/1 Arial, Helvetica, sans-serif;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__close {
    appearance: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff4cf;
    font-size: 24px;
    line-height: 1;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff3cf;
    text-decoration: none;
    font: 800 13px/1.15 Arial, Helvetica, sans-serif;
    text-align: center;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__link--button {
    cursor: pointer;
    font-family: inherit;
  }

  body.gt-mobile-phone .gtMobileMoreDrawer__link--signout {
    grid-column: 1 / -1;
    margin-top: 6px;
    min-height: 50px;
    cursor: pointer;
    border-color: rgba(220, 96, 80, 0.7);
    background: linear-gradient(#7a1e1e, #561212);
    color: #ffe3e0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
  }
  body.gt-mobile-phone .gtMobileMoreDrawer__link--signout:active {
    filter: brightness(1.12);
  }

  body.gt-mobile-phone.gt-mobile-keyboard-open .gtMobileTabBar {
    transform: translateY(6px);
    opacity: 0.96;
  }

  body.gt-page--play.gt-mobile-phone {
    --gt-mobile-shell-gap: max(0px, var(--gt-safe-bottom));
  }

  body.gt-page--play.gt-mobile-phone .gtMobileTabBar,
  body.gt-page--play.gt-mobile-phone .gtMobileMoreDrawer {
    display: none !important;
  }

  body.gt-page--play.gt-mobile-phone.gt-mobile-signed-in .wrap {
    padding-bottom: max(8px, var(--gt-safe-bottom)) !important;
  }

}

@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-portrait-active {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .wrap {
    max-width: none;
    margin: 0;
    padding-top: max(8px, var(--gt-safe-top));
    padding-bottom: calc(12px + var(--gt-safe-bottom) + var(--gt-mobile-keyboard-gap, 0px)) !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary {
    display: grid !important;
    gap: 10px;
    margin-bottom: 10px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > .turnWrap,
  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > .panel {
    margin: 0 !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #gameRoot {
    padding: 10px 0 0;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .gameGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .scene {
    height: 42vh !important;
    min-height: 260px;
    max-height: 360px;
    border-radius: 18px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .scene img#bgImg {
    object-position: center top;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .tiff {
    grid-template-columns: minmax(92px, 108px) minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .turnWrap {
    align-items: center;
    justify-self: center;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .turnTimer {
    width: 84px;
    height: 84px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .turnTimer .inner {
    font-size: 28px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .tiffBox,
  body.gt-mobile-phone.play-mobile-portrait-active .tiffPortrait {
    min-height: 160px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #tiffanyPortraitWrap {
    min-height: 160px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #tiffanyPortraitStage {
    transform: translate(0, 8px) scale(0.6);
  }

  body.gt-mobile-phone.play-mobile-portrait-active .hudRow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .panel,
  body.gt-mobile-phone.play-mobile-portrait-active .results {
    min-height: 0;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #roundInfo {
    max-height: 8.5em;
    overflow: auto;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .chatBar {
    position: sticky;
    bottom: calc(var(--gt-safe-bottom) + var(--gt-mobile-keyboard-gap, 0px));
    z-index: 6;
    margin-top: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(7, 9, 14, 0.96);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  }

  body.gt-mobile-phone.play-mobile-portrait-active #chatInput {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #sendBtn {
    flex: 0 0 auto;
  }
}

@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-mobile-phone.gt-mobile-portrait .gt-custom-shell {
    padding-top: max(8px, var(--gt-safe-top));
    padding-bottom: calc(86px + var(--gt-safe-bottom) + var(--gt-mobile-keyboard-gap, 0px));
  }

  body.gt-mobile-phone.gt-mobile-portrait .gt-custom-frame {
    min-height: calc(var(--gt-mobile-safe-vh, 1vh) * 100 - 12px);
  }

  body.gt-mobile-phone.gt-mobile-portrait .gt-custom-body {
    align-items: stretch;
  }
}

/* === 2026-04-24 shared mobile polish === */
@media (max-width: 1024px) and (pointer: coarse) {
  body.gt-mobile-phone button,
  body.gt-mobile-phone .btn,
  body.gt-mobile-phone a.btn,
  body.gt-mobile-phone input[type="button"],
  body.gt-mobile-phone input[type="submit"] {
    min-height: 44px;
  }

  body.gt-mobile-phone input,
  body.gt-mobile-phone textarea,
  body.gt-mobile-phone select {
    font-size: 16px;
  }

  body.gt-mobile-phone .wrap,
  body.gt-mobile-phone .frame,
  body.gt-mobile-phone .panel,
  body.gt-mobile-phone .shell,
  body.gt-mobile-phone .body,
  body.gt-mobile-phone .gt-custom-body,
  body.gt-mobile-phone .gt-lobby-main {
    min-height: 0;
  }

  body.gt-mobile-phone .wrap,
  body.gt-mobile-phone .frame,
  body.gt-mobile-phone .panel,
  body.gt-mobile-phone .shell,
  body.gt-mobile-phone .body {
    overscroll-behavior-y: contain;
  }

  body.gt-page--shop.gt-mobile-phone,
  body.gt-page--membership.gt-mobile-phone,
  body.gt-page--members-tournament.gt-mobile-phone {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.gt-page--shop.gt-mobile-phone .wrap,
  body.gt-page--membership.gt-mobile-phone .wrap,
  body.gt-page--members-tournament.gt-mobile-phone .wrap {
    padding-bottom: max(18px, var(--gt-mobile-shell-gap)) !important;
  }

  body.gt-page--shop.gt-mobile-phone .panel,
  body.gt-page--membership.gt-mobile-phone .panel,
  body.gt-page--members-tournament.gt-mobile-phone .shell {
    overflow: visible !important;
  }

  body.gt-page--shop.gt-mobile-phone .body,
  body.gt-page--membership.gt-mobile-phone .body {
    overflow: visible !important;
  }

  body.gt-page--members-tournament.gt-mobile-phone .bracketWrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 12px;
  }
}

@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-portrait-active .chatBar {
    bottom: calc(var(--gt-safe-bottom) + var(--gt-mobile-keyboard-gap, 0px));
  }
}


/* Play mobile fit pass: keep play usable in portrait and landscape phone browsers. */
body.gt-page--play.gt-mobile-phone .gt-rotate-overlay{
  display:none !important;
  pointer-events:none !important;
}
body.gt-page--play.gt-mobile-phone #gameRoot{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto auto;
  min-height:calc(var(--gt-mobile-safe-vh, 1vh) * 100 - max(8px, var(--gt-safe-top)) - max(8px, var(--gt-safe-bottom)));
}
@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {
  body.gt-page--play.gt-mobile-phone #gameRoot{
    grid-template-rows:54px minmax(0, 1fr) 60px 30px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-page--play.gt-mobile-phone #gameRoot{
    grid-template-rows:minmax(0, 1fr) 54px 30px;
  }
}


/* ═══════════════════════════════════════════════════════════
   PLAY PAGE — PORTRAIT MOBILE IMPROVEMENTS (2026-06-01)
   ═══════════════════════════════════════════════════════════
   Covers:
   a. mobilePlaySummary: proper layout for timer + round info
   b. Scene: taller, better sprite sizing, sprite overflow
   c. HUD panels: compact but readable, no text overflow
   d. Stage name plates: compact identity on-stage
   e. Move picker: full-width bottom sheet with clear labels
   f. Matchmaking overlay: fits small screens
   g. Mojo pops: readable on small viewports
   h. Winner name plate: repositioned for portrait
   i. Chat bar: keyboard-safe sticky row
   j. Action stingers: readable at small sizes
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 820px) and (orientation: portrait) and (pointer: coarse) {

  /* ── a. mobilePlaySummary: timer row + round info stacked ── */
  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 10px !important;
    align-items: stretch !important;
    margin-bottom: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > .turnWrap {
    min-height: 96px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > #roundInfoPanel {
    min-height: 96px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > #roundInfoPanel .results {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > #roundInfoPanel .results > div:first-child {
    font-size: 10px !important;
    letter-spacing: .08em !important;
    opacity: .7 !important;
    margin-bottom: 5px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mobilePlaySummary > #roundInfoPanel #roundInfo {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    max-height: 5.5em !important;
    overflow: auto !important;
    -webkit-line-clamp: unset !important;
  }

  /* ── b. Scene: use more vertical space, better background crop ── */
  body.gt-mobile-phone.play-mobile-portrait-active .scene {
    height: 46vh !important;
    min-height: 280px !important;
    max-height: 380px !important;
    overflow: visible !important; /* allow sprites to peek above scene border */
  }

  /* Sprites: taller, let them breathe */
  body.gt-mobile-phone.play-mobile-portrait-active .playerSprite {
    height: clamp(180px, 32vh, 260px) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Result action overlays match sprite height */
  body.gt-mobile-phone.play-mobile-portrait-active .gtResultVisualOverride {
    height: clamp(180px, 32vh, 260px) !important;
    width: auto !important;
  }

  /* Scene gloss overlay must not intercept taps */
  body.gt-mobile-phone.play-mobile-portrait-active .scene::before {
    pointer-events: none !important;
  }

  /* ── c. HUD panels: 2×2 player grid, compact but readable ── */
  /* roundInfoPanel has been moved to mobilePlaySummary by JS,
     so hudRow only contains the 4 player panels */
  body.gt-mobile-phone.play-mobile-portrait-active .hudRow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 10px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .panelHead {
    font-size: 13px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .panelBody {
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    min-height: 60px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .meta {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /* Seat-card mojo pill duplicates the stage name plate's mojo on mobile (both show
     e.g. "50 MOJO") and its overflow was being clipped by the card edge. The stage
     tile already shows the player's mojo clearly, so hide the redundant card pill. */
  body.gt-mobile-phone.play-mobile-portrait-active .mojo {
    display: none !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mojo span {
    font-size: 13px !important;
  }

  /* ── d. Stage name plates: compact but clear on-stage identity ── */
  body.gt-mobile-phone.play-mobile-portrait-active .stageNamePlate {
    transform: translateX(-50%) scale(0.82) !important;
    transform-origin: center bottom !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .stageNamePlate .stageName {
    font-size: 10px !important;
    padding: 2px 6px 2px !important;
    max-width: 80px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .stageNamePlate .stageMojo {
    font-size: 11px !important;
    padding: 2px 6px 3px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .stageNamePlate .stageClan {
    display: none !important; /* clan tag too wide on small stage */
  }

  /* ── e. Move picker: full-width bottom sheet ── */
  body.gt-mobile-phone.play-mobile-portrait-active #movePicker.gt-picker-sheet {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 6px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 72vh !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #movePicker.gt-picker-sheet #mpList,
  body.gt-mobile-phone.play-mobile-portrait-active #movePicker.gt-picker-sheet .mp-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #movePicker.gt-picker-sheet button,
  body.gt-mobile-phone.play-mobile-portrait-active #movePicker.gt-picker-sheet #mpList button {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    text-align: left !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── f. Matchmaking overlay: compact on small portrait screens ── */
  body.gt-mobile-phone.play-mobile-portrait-active .mmBox {
    width: calc(100vw - 28px) !important;
    max-width: 360px !important;
    padding: 14px 16px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mmTitle {
    font-size: 17px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mmSub {
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mmRing {
    width: 80px !important;
    height: 80px !important;
    margin: 10px auto 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mmRing .n {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mmPlayers {
    gap: 6px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .pill {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  /* ── g. Mojo pops: small badge anchored low over the mojo counter, so it
     never covers the Rank/Wins/Clan info or bleeds up into the character
     sprite above the panel. The base style hard-codes width/height:74px and
     bottom:56px, both of which must be overridden directly (not just
     min-width/padding) or the box stays full-size on phones. ── */
  body.gt-mobile-phone.play-mobile-portrait-active .mojoPop {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    bottom: 4px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mojoPop .n {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .mojoPop .lbl {
    display: none !important;
  }

  /* ── h. Winner nameplate: fits portrait screen ── */
  body.gt-mobile-phone.play-mobile-portrait-active .winnerNamePlate {
    top: auto !important;
    bottom: calc(22vh + env(safe-area-inset-bottom, 0px)) !important;
    font-size: clamp(20px, 5vw, 30px) !important;
    padding: 8px 16px !important;
    max-width: min(88vw, 480px) !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  /* ── i. Chat bar: sticky at bottom, keyboard-safe ── */
  body.gt-mobile-phone.play-mobile-portrait-active .chatBar {
    position: sticky !important;
    bottom: calc(var(--gt-safe-bottom, 0px) + var(--gt-mobile-keyboard-gap, 0px)) !important;
    z-index: 6 !important;
    margin: 8px 10px 0 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: rgba(7, 9, 14, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 -4px 18px rgba(0,0,0,.28) !important;
    gap: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #chatInput {
    min-height: 44px !important;
    font-size: 16px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active #sendBtn {
    min-height: 44px !important;
    min-width: 64px !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }

  /* ── j. Action stingers: readable at small sizes ── */
  body.gt-mobile-phone.play-mobile-portrait-active .gt-action-stinger {
    font-size: 10px !important;
    padding: 3px 8px 3px !important;
    border-radius: 6px !important;
    top: -26px !important;
  }

  /* ── Speech bubbles: keep them off the scene edges ── */
  body.gt-mobile-phone.play-mobile-portrait-active .bubble {
    max-width: min(160px, 38vw) !important;
    font-size: 10px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    line-height: 1.15 !important;
  }

  /* ── Round plate: scale down to fit portrait ── */
  body.gt-mobile-phone.play-mobile-portrait-active .gtClassicRoundPlate {
    min-width: 0 !important;
    max-width: min(84vw, 310px) !important;
    gap: 6px !important;
    padding: 6px 12px 5px !important;
    top: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .gtClassicRoundNo {
    font-size: 11px !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .gtClassicVenue {
    font-size: 13px !important;
  }

  /* ── Tiff panel: in portrait mode only the Tiffany portrait remains here ── */
  /* turnWrap and roundInfoPanel are moved to mobilePlaySummary by JS */
  body.gt-mobile-phone.play-mobile-portrait-active .tiff {
    grid-template-columns: minmax(92px, 104px) minmax(0, 1fr) !important;
    padding: 10px !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 120px !important;
    height: auto !important;
  }

  body.gt-mobile-phone.play-mobile-portrait-active .tiffPortrait,
  body.gt-mobile-phone.play-mobile-portrait-active .tiffBox {
    min-height: 120px !important;
    height: 100% !important;
  }

  /* Tiffany portrait scale in portrait phone */
  body.gt-mobile-phone.play-mobile-portrait-active #tiffanyPortraitStage {
    transform: translate(0, 6px) scale(0.52) !important;
    transform-origin: top left !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PLAY PAGE — LANDSCAPE PHONE IMPROVEMENTS (2026-06-01)
   Additional fixes on top of existing landscape rules.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {

  /* Sprites need height not width constraint so they sit on the floor properly */
  body.gt-mobile-phone.play-mobile-active .playerSprite {
    height: clamp(130px, 28vh, 200px) !important;
    width: auto !important;
    max-width: none !important;
  }

  body.gt-mobile-phone.play-mobile-active .gtResultVisualOverride {
    height: clamp(130px, 28vh, 200px) !important;
    width: auto !important;
  }

  /* Scene: allow sprites to overflow vertically */
  body.gt-mobile-phone.play-mobile-active .scene {
    overflow: visible !important;
  }

  /* Move picker bottom sheet: account for safe area */
  body.gt-mobile-phone.play-mobile-active #movePicker.gt-picker-sheet {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 55vh !important;
  }

  /* Winner nameplate: landscape phone */
  body.gt-mobile-phone.play-mobile-active .winnerNamePlate {
    font-size: clamp(16px, 3.5vw, 24px) !important;
    padding: 7px 14px !important;
  }

  /* Mojo pops: small badge anchored low over the mojo counter for landscape
     too — same reasoning as the portrait rule above. Width/height/bottom
     must be set directly since the base style hard-codes 74px/56px. */
  body.gt-mobile-phone.play-mobile-active .mojoPop {
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    bottom: 6px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  body.gt-mobile-phone.play-mobile-active .mojoPop .n {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body.gt-mobile-phone.play-mobile-active .mojoPop .lbl {
    display: none !important;
  }
}

/* ── Very small landscape phones (iPhone SE, etc.) ── */
@media (max-width: 700px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-mobile-phone.play-mobile-active .winnerNamePlate {
    font-size: 14px !important;
    padding: 5px 10px !important;
    top: 62% !important;
  }

  body.gt-mobile-phone.play-mobile-active .mmBox {
    max-width: min(58vw, 320px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   FINAL LANDSCAPE PLAY FIT
   Keep the actual match inside the visible Safari/Chrome viewport. This must
   remain at the end of the file so later general mobile rules cannot turn the
   game back into an overflowing desktop canvas.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  body.gt-page--play.gt-mobile-phone.play-mobile-active {
    overflow:hidden !important;
    width:100vw !important;
    height:100svh !important;
    min-height:100svh !important;
    --gt-play-scene-height:clamp(150px, 43svh, 206px);
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #header-container {
    display:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .wrap {
    width:100vw !important;
    max-width:none !important;
    height:100svh !important;
    margin:0 !important;
    padding:3px !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .card {
    width:100% !important;
    height:calc(100svh - 6px) !important;
    min-height:0 !important;
    max-height:calc(100svh - 6px) !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .bar {
    min-height:34px !important;
    padding:4px 7px !important;
    gap:5px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .title {
    font-size:16px !important;
    line-height:1 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .subtitle {
    font-size:9px !important;
    margin-left:3px !important;
    line-height:1 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .bar .btn {
    min-height:28px !important;
    padding:3px 7px !important;
    font-size:10px !important;
    border-radius:8px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #gameRoot {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    padding:3px !important;
    gap:3px !important;
    display:grid !important;
    grid-template-rows:minmax(var(--gt-play-scene-height),1fr) auto 30px !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .gameGrid {
    height:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 108px !important;
    gap:3px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .scene {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    border-radius:10px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .scene img#bgImg {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 68% !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .playersLayer {
    inset:8px 0 0 !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .playerSprite,
  body.gt-page--play.gt-mobile-phone.play-mobile-active .gtResultVisualOverride {
    width:clamp(64px, 10vw, 94px) !important;
    height:auto !important;
    max-width:none !important;
    max-height:calc(100% - 10px) !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .bubble {
    z-index:80 !important;
    max-width:120px !important;
    padding:4px 6px !important;
    font-size:9px !important;
    line-height:1.1 !important;
    pointer-events:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .playerSprite {
    z-index:10 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .gtResultVisualOverride,
  body.gt-page--play.gt-mobile-phone.play-mobile-active .gtPoseActionOverlay {
    z-index:20 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .stageNamePlate {
    transform:translateX(-50%) scale(.72) !important;
    transform-origin:center top !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .winnerNamePlate {
    top:58% !important;
    max-width:80% !important;
    padding:5px 9px !important;
    font-size:13px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .tiff {
    width:108px !important;
    height:100% !important;
    min-height:0 !important;
    padding:3px !important;
    gap:3px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:58px minmax(64px,1fr) !important;
    overflow:hidden !important;
    border-radius:10px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .turnWrap {
    width:100% !important;
    min-height:0 !important;
    padding:3px 2px !important;
    gap:2px !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .turnHead {
    gap:2px !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .turnLbl {
    margin:0 !important;
    font-size:8px !important;
    line-height:1 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #gtSpectatorBadgeMount {
    min-height:0 !important;
    max-width:100% !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #gtSpectatorBadge {
    max-width:100% !important;
    padding:2px 4px !important;
    gap:3px !important;
    border-width:1px !important;
    font-size:7px !important;
    letter-spacing:0 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #gtSpectatorBadge svg {
    width:10px !important;
    height:10px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .turnTimer {
    width:42px !important;
    height:42px !important;
    margin:0 auto !important;
    border-width:3px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .turnTimer .inner {
    width:30px !important;
    height:30px !important;
    border-width:2px !important;
    font-size:13px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .tiffBox {
    min-height:0 !important;
    padding:2px !important;
    overflow:hidden !important;
    border-radius:8px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .tiffPortrait {
    min-height:0 !important;
    height:100% !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap {
    width:100% !important;
    height:100% !important;
    padding:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage {
    transform-origin:bottom center !important;
    transform:translate(0, 8px) scale(.27) !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .tiffReact {
    display:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .hudRow {
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .panel {
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
    border-radius:8px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .panelHead {
    min-height:18px !important;
    padding:3px 4px !important;
    font-size:8px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .panelBody,
  body.gt-page--play.gt-mobile-phone.play-mobile-active .results,
  body.gt-page--play.gt-mobile-phone.play-mobile-active #roundInfo {
    min-height:27px !important;
    max-height:34px !important;
    padding:3px 4px !important;
    font-size:8px !important;
    line-height:1.05 !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .meta {
    font-size:7px !important;
    line-height:1.05 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .mojo {
    display:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .mojo span {
    font-size:8px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #roundInfo {
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
  }

  /* The shared compact rule above must not cap the whole Round Info container:
     its heading would consume the 34px and clip the narration underneath. */
  body.gt-page--play.gt-mobile-phone.play-mobile-active #roundInfoPanel .results {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:5px !important;
    gap:3px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #roundInfoPanel .results > div:first-child {
    flex:0 0 auto !important;
    margin:0 !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #roundInfoPanel #roundInfo {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    font-size:8px !important;
    line-height:1.12 !important;
    -webkit-line-clamp:5 !important;
    overflow:hidden !important;
  }

  /* Position the 391px layered rig by its centre, then scale the whole thing
     into the portrait viewport. Flex-centering the unscaled stage caused Safari
     to crop from one side before applying its transform. */
  body.gt-page--play.gt-mobile-phone.play-mobile-active #tiffanyPortraitWrap {
    position:relative !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #tiffanyPortraitStage {
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
    transform-origin:center center !important;
    transform:translate(-50%,-50%) scale(.245) !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .mojoPop {
    width:30px !important;
    height:30px !important;
    bottom:2px !important;
    border-radius:7px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .mojoPop .n {
    font-size:12px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .mojoPop .lbl {
    display:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .chatBar {
    position:static !important;
    width:100% !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 62px !important;
    gap:3px !important;
    overflow:hidden !important;
    background:transparent !important;
    backdrop-filter:none !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #chatInput,
  body.gt-page--play.gt-mobile-phone.play-mobile-active #sendBtn {
    width:100% !important;
    min-width:0 !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 7px !important;
    font-size:11px !important;
    border-radius:8px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active #movePicker.gt-picker-sheet {
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    width:auto !important;
    max-width:none !important;
    max-height:72svh !important;
    overflow:auto !important;
  }
}

@media (max-width:740px) and (orientation:landscape) and (pointer:coarse),
       (max-height:390px) and (orientation:landscape) and (pointer:coarse) {
  body.gt-page--play.gt-mobile-phone.play-mobile-active {
    --gt-play-scene-height:clamp(132px, 40svh, 170px);
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .gameGrid {
    grid-template-columns:minmax(0,1fr) 94px !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .tiff {
    width:94px !important;
    grid-template-rows:54px minmax(54px,1fr) !important;
  }

  body.gt-page--play.gt-mobile-phone.play-mobile-active .playerSprite,
  body.gt-page--play.gt-mobile-phone.play-mobile-active .gtResultVisualOverride {
    width:clamp(50px, 8.8vw, 72px) !important;
  }
}

/* ── Crowd Chat is desktop-only ───────────────────────────────────────────
   The Crowd Chat panel doesn't fit the phone play HUD and its layout breaks on
   small/coarse devices, so it's removed on any mobile phone (portrait OR
   landscape). play.js also force-hides it and skips polling; this rule is the
   belt-and-braces visual guarantee that applies before/independent of JS. */
body.gt-mobile-phone #crowdChatPanel,
body.play-mobile-active #crowdChatPanel,
body.play-mobile-portrait-active #crowdChatPanel {
  display: none !important;
}