/* =====================================================================
   MOBILE UI (phones & tablets)  — loaded last so it wins over older rules
   ===================================================================== */

/* ---------- 1. MENU: bottom navigation bar ---------- */
html.is-mobile #menu-top-bar{
  position:fixed !important;top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;
  display:flex !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:flex-start !important;
  gap:4px !important;padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,rgba(8,8,24,.88),rgba(6,6,18,.98)) !important;
  border-top:1px solid rgba(0,229,255,.22);box-shadow:0 -6px 24px rgba(0,0,0,.5);
  z-index:120 !important;pointer-events:all !important;
}
html.is-mobile #music-btn{
  order:0 !important;flex:0 0 auto !important;width:40px !important;height:40px !important;min-width:0 !important;
  font-size:16px !important;border-radius:50% !important;margin:0 !important;
}
html.is-mobile #menu-pill{
  order:1 !important;flex:1 1 0 !important;min-width:0 !important;width:auto !important;max-width:none !important;
  background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
  overflow-x:auto !important;overflow-y:hidden !important;gap:2px !important;justify-content:flex-start !important;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
}
html.is-mobile #menu-pill::-webkit-scrollbar{display:none}
html.is-mobile .menu-pill-btn{
  flex:0 0 auto !important;flex-direction:column !important;justify-content:center !important;gap:1px !important;
  height:48px !important;min-width:56px !important;padding:2px 6px !important;font-size:19px !important;line-height:1.1;
  border-radius:12px !important;color:var(--text);
}
html.is-mobile .menu-pill-btn + .menu-pill-btn::before{display:none !important}
html.is-mobile .menu-pill-btn:active{background:rgba(0,229,255,.12) !important;transform:scale(.96)}
html.is-mobile .menu-pill-btn .mpb-label{display:block !important;font-size:8px !important;letter-spacing:1px !important;opacity:.85}
html.is-mobile .mpb-shop #scoins-display{display:block;font-size:9px;letter-spacing:.5px;color:var(--yellow);margin-top:-2px}
html.is-mobile .mpb-settings{padding:2px 6px !important;font-size:19px !important;order:99 !important}
html.is-mobile .menu-pill-btn #friends-unread-dot,
html.is-mobile .menu-pill-btn #quests-unread-dot{position:absolute !important;top:4px !important;right:12px !important}
html.is-mobile #chat-standalone-btn{
  order:2 !important;flex:0 0 auto !important;width:50px !important;height:50px !important;min-width:0 !important;max-width:none !important;
  padding:0 !important;margin:0 !important;border-radius:50% !important;font-size:22px !important;
  background:linear-gradient(135deg,#ff0099,#a6007a) !important;color:#fff !important;border:0 !important;
  box-shadow:0 0 16px rgba(255,0,153,.55) !important;
}
html.is-mobile #chat-standalone-btn .chat-btn-label{display:none !important}
html.is-mobile #chat-standalone-btn #chat-unread-dot{top:4px !important;right:4px !important}

/* ---------- 2. MENU: content ---------- */
html.is-mobile #screen-menu .menu-inner{
  padding:calc(14px + env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom)) !important;
  height:100dvh !important;max-height:100dvh !important;min-height:0 !important;width:100% !important;
  overflow-y:auto !important;overflow-x:hidden !important;gap:12px !important;
}
html.is-mobile .menu-logo{gap:4px}
html.is-mobile .menu-logo-sub{font-size:9px !important;letter-spacing:4px !important}
html.is-mobile .menu-greeting{font-size:11px !important;letter-spacing:2px !important}
html.is-mobile .menu-title{font-size:clamp(22px,7.4vw,32px) !important;letter-spacing:2px !important;line-height:1.1}
html.is-mobile .menu-online-badge{flex-wrap:wrap;justify-content:center;gap:6px 8px !important;font-size:9px !important;letter-spacing:1px !important;padding:6px 12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px}
html.is-mobile .game-cards{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;gap:10px !important;max-width:760px !important;width:100% !important;margin:0 auto;
}
html.is-mobile .game-card{
  height:auto !important;min-height:0 !important;padding:30px 8px 12px !important;border-radius:16px !important;overflow:hidden;
  display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px !important;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important;border:1px solid rgba(255,255,255,.09) !important;
  -webkit-tap-highlight-color:transparent;
}
html.is-mobile .game-card:active{transform:scale(.97) !important;border-color:var(--cyan) !important}
html.is-mobile .card-icon{font-size:36px !important;line-height:1.1}
html.is-mobile .card-title{font-size:12px !important;letter-spacing:1.5px !important;line-height:1.25;word-break:break-word}
html.is-mobile .card-desc{font-size:9px !important;letter-spacing:1px !important;line-height:1.3}
html.is-mobile .card-detail,html.is-mobile .card-diff{display:none !important}
html.is-mobile .card-badge,html.is-mobile .card-tag{font-size:8px !important;padding:2px 7px !important;white-space:normal;max-width:100%;border-radius:10px !important;margin-top:auto}
html.is-mobile .drag-handle-btn{top:5px !important;left:5px !important;width:24px !important;height:24px !important;font-size:11px !important}
html.is-mobile .card-popular-badge{top:5px !important;right:5px !important;left:auto !important;font-size:7px !important;padding:2px 5px !important}
html.is-mobile .card-new-badge{top:auto !important;left:50% !important;transform:translateX(-50%);bottom:auto;top:5px !important}
html.is-mobile .game-card [class*="fav"]{transform:none}
html.is-mobile .press-any,html.is-mobile #press-any-hint,html.is-mobile .menu-hint{display:none !important}

/* ---------- 3. CHAT ---------- */
@media (max-width:700px){
  #screen-chat.active{height:100dvh !important;overflow:hidden !important}

  /* room list = its own full page when no room is open */
  #screen-chat:not(.sc-in-room) .sc-sidebar{position:relative !important;left:0 !important;width:100% !important;min-width:0 !important;
    border-right:0 !important;box-shadow:none !important;flex:1 1 auto}
  #screen-chat:not(.sc-in-room) .sc-main{display:none !important}
  #screen-chat:not(.sc-in-room) .sc-sidebar-toggle{display:none !important}
  .sc-list-back{display:flex !important}
  #screen-chat:not(.sc-in-room) .sc-sidebar-header{padding:calc(14px + env(safe-area-inset-top)) 16px 12px}
  .sc-sidebar .sc-rooms-list{padding:6px 10px !important}
  .sc-sidebar .sc-room-item{padding:14px 14px !important;font-size:14px !important;border-radius:12px !important;min-height:52px;margin-bottom:4px;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
  .sc-sidebar .sc-room-icon{font-size:22px !important}
  .sc-sidebar .sc-sidebar-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom)) !important}
  .sc-create-room-btn{width:38px !important;height:38px !important;font-size:20px !important}

  /* room open: sidebar becomes a drawer with a dimmed backdrop */
  #screen-chat.sc-in-room .sc-sidebar{width:min(86vw,320px) !important;min-width:0 !important;left:calc(-1 * min(86vw,320px) - 20px) !important;
    padding-top:env(safe-area-inset-top)}
  #screen-chat.sc-in-room .sc-sidebar.open{left:0 !important}
  #screen-chat.sc-in-room.sb-open::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:9}
  #screen-chat.sc-in-room .sc-sidebar{z-index:11 !important}
  #screen-chat .sc-sidebar-toggle{top:calc(10px + env(safe-area-inset-top)) !important;left:10px !important;width:40px !important;height:40px !important;z-index:8}
  #screen-chat.sc-in-room.sb-open .sc-sidebar-toggle{display:none !important}

  /* header */
  #screen-chat.sc-in-room .sc-header{padding:calc(8px + env(safe-area-inset-top)) 10px 8px 58px !important;gap:8px !important;min-height:58px}
  .sc-header-back{font-size:0 !important;padding:0 !important;width:36px;height:36px;border-radius:10px !important;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .sc-header-back::before{content:"⌂";font-size:18px;color:var(--text)}
  .sc-header-room{min-width:0;flex:1 1 auto;gap:8px}
  .sc-header-name{font-size:14px !important;max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sc-header-created{display:none !important}
  .sc-header-members{font-size:0 !important;gap:4px}
  .sc-header-members span:last-child,.sc-header-members #sc-member-count{font-size:11px !important}
  .room-mute-btn,.sc-roles-btn,.sc-delete-room-btn{width:36px !important;height:36px !important;padding:0 !important;font-size:16px !important;border-radius:10px !important;
    display:inline-flex;align-items:center;justify-content:center}
  .sc-channels .sc-channel-tab{padding:12px 6px !important;font-size:11px !important}

  /* messages */
  .sc-messages{padding:12px 10px 8px !important;gap:6px !important;scroll-behavior:auto}
  .sc-msg{gap:8px !important;padding:2px 0 !important}
  .sc-msg-avatar{width:36px !important;height:36px !important}
  .sc-msg-body{max-width:calc(100% - 52px) !important}
  .sc-msg.is-mine .sc-msg-body{max-width:80% !important}
  .sc-msg-bubble{font-size:14.5px !important;line-height:1.45 !important;padding:9px 13px !important;border-radius:16px !important;border-top-left-radius:5px !important;
    word-break:break-word;overflow-wrap:anywhere}
  .sc-msg.is-mine .sc-msg-bubble{border-top-left-radius:16px !important;border-top-right-radius:5px !important}
  .sc-msg-bubble img,.sc-msg-bubble video{max-width:100% !important;height:auto;border-radius:12px}
  .sc-msg-nick{font-size:12px !important}
  .sc-msg-time{font-size:10px !important}
  /* tap a message to show Reply / React / Report buttons */
  .sc-msg:hover .sc-msg-actions{display:none}
  .sc-msg.m-actions .sc-msg-actions{display:flex !important;flex-wrap:wrap;gap:6px !important;margin-top:6px}
  .sc-msg-action-btn{font-size:12px !important;padding:8px 12px !important;border-radius:10px !important;min-height:36px}
  .sc-msg.m-actions .sc-msg-bubble{outline:1px solid rgba(0,229,255,.45)}

  /* input bar */
  .sc-input-area{padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;background:#09091e !important}
  .sc-input-row{gap:4px !important;padding:5px 6px 5px 10px !important;border-radius:26px !important;background:rgba(255,255,255,.07) !important}
  .sc-text-input{font-size:16px !important;padding:8px 4px !important;min-height:38px}
  .sc-emoji-btn,.sc-gif-btn,.sc-attach-btn{width:38px !important;height:38px !important;min-width:38px;padding:0 !important;font-size:20px !important;border-radius:50% !important;
    display:inline-flex;align-items:center;justify-content:center}
  .sc-gif-btn{font-size:11px !important;font-weight:700}
  .sc-send-btn{width:42px !important;height:42px !important;border-radius:50% !important;font-size:18px !important}
  #sc-reply-bar{font-size:11px !important;padding:6px 10px !important}

  /* pickers become bottom sheets above the input */
  .sc-emoji-picker,.rr-gif-picker{left:0 !important;right:0 !important;width:auto !important;max-width:none !important;
    bottom:100% !important;max-height:46vh !important;border-radius:18px 18px 0 0 !important;overflow-y:auto}
  .rr-gif-grid{grid-template-columns:repeat(3,1fr) !important}

  /* modals fit the screen */
  #sc-create-modal .sc-modal-box,#sc-password-modal .sc-pw-box{width:min(94vw,420px) !important;max-height:88dvh;overflow-y:auto}
  #sc-create-modal .sc-emoji-grid{grid-template-columns:repeat(6,1fr) !important}
}
.sc-list-back{display:none;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);
  font-family:var(--font);font-size:11px;letter-spacing:2px;padding:9px 14px;border-radius:10px;cursor:pointer;margin-bottom:10px;width:max-content}

/* ---------- 4. SHOP / SETTINGS / MODALS on phones ---------- */
@media (max-width:600px){
  #shop-modal{padding:0 !important;align-items:stretch !important}
  .shop-box{width:100vw !important;max-width:100vw !important;min-height:100dvh;border-radius:0 !important;border-left:0 !important;border-right:0 !important;
    padding:0 12px calc(40px + env(safe-area-inset-bottom)) !important;gap:18px !important}
  .shop-header{position:sticky;top:0;z-index:5;background:#08081c;padding:calc(12px + env(safe-area-inset-top)) 0 12px;margin:0 -12px;padding-left:12px;padding-right:12px;
    border-bottom:1px solid rgba(0,229,255,.2)}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  .shop-item{padding:12px 8px 10px !important}
  .shop-item-name{font-size:12px !important}
  .shop-item-desc{font-size:10px !important}
  .shop-btn{min-height:38px;width:100%;font-size:10px !important;padding:8px 6px !important}
  .shop-close{width:40px !important;height:40px !important}
  .shop-item.is-vip-card{grid-column:1/-1}
  .shop-item.is-vip-card .shop-btn{width:100%}
  #settings-modal{padding:0 !important}
  #settings-modal .settings-box,.settings-box{width:100vw !important;max-width:100vw !important;min-width:0 !important;max-height:none !important;height:auto !important;min-height:100dvh;
    border-radius:0 !important;padding:calc(16px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)) !important}
  /* CLOSE sits in a bar pinned to the bottom of the screen */
  #settings-modal .settings-box{animation:none !important;transform:none !important;padding-bottom:0 !important}
  #settings-modal .settings-box > .btn[onclick="closeSettings()"]{position:sticky;bottom:0;z-index:5;align-self:stretch !important;width:auto;
    margin:8px -16px 0 !important;padding:14px 16px calc(14px + env(safe-area-inset-bottom)) !important;min-height:56px;border-radius:0 !important;
    font-size:14px;letter-spacing:3px;background:#0b0b22 !important;border:0;border-top:1px solid var(--cyan);box-shadow:0 -10px 24px rgba(0,0,0,.75)}
  .settings-chip{min-height:38px;font-size:11px !important}
}

/* generic: bigger tap targets + no double-tap zoom delay */
html.is-mobile button,html.is-mobile .btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.is-mobile input,html.is-mobile textarea,html.is-mobile select{font-size:16px}

/* keep the card grid at its natural height (older rules let it shrink and clip cards) */
html.is-mobile .game-cards{flex:0 0 auto !important;overflow:visible !important;height:auto !important;max-height:none !important}
html.is-mobile #screen-menu .menu-inner > *{flex-shrink:0}
html.is-mobile #screen-menu .menu-inner::after{content:"";display:block;height:8px;flex:0 0 auto}

html.is-mobile #screen-menu{padding-top:0 !important;padding-bottom:0 !important}
html.is-mobile .mpb-history{order:7 !important}
html.is-mobile .mpb-shop{position:relative}
html.is-mobile .mpb-shop #scoins-display{position:absolute;top:0;right:0;margin:0;font-size:8px;line-height:1;padding:2px 5px;border-radius:8px;
  background:rgba(255,230,0,.16);border:1px solid rgba(255,230,0,.4)}
@media (max-width:600px){
  .shop-title{font-size:15px !important;letter-spacing:2px !important;white-space:nowrap}
  .shop-balance-pill{font-size:12px !important;padding:6px 10px !important}
}


/* ---------- SPEED: make phones feel instant ---------- */
html.is-mobile #menu-grid,html.is-mobile #menu-ambient,html.is-mobile #nick-bg-grid,html.is-mobile .auth-ambient{display:none !important}
html.is-mobile .screen{transition:none !important;transform:none !important}
html.is-mobile .game-card,html.is-mobile .card-popular-badge,html.is-mobile .card-new-badge,html.is-mobile .menu-title,html.is-mobile .premium-crown,
html.is-mobile .menu-logo *{animation:none !important}
html.is-mobile .game-card{transition:none !important;box-shadow:none !important}
html.is-mobile .game-card:active,html.is-mobile .menu-pill-btn:active,html.is-mobile .btn:active{transition:transform .06s !important}
html.is-mobile *{-webkit-tap-highlight-color:transparent}
html.is-mobile #flash-overlay{display:none !important}
html.is-mobile .sc-msg,html.is-mobile .sc-room-item,html.is-mobile .shop-item{animation:none !important;transition:none !important}
html.is-mobile .sc-messages,html.is-mobile #shop-modal,html.is-mobile #settings-modal,html.is-mobile #screen-menu .menu-inner{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.is-mobile canvas:not(#bg-canvas):not(#nick-bg-canvas){touch-action:none}
html.is-mobile *,html.is-mobile *::before,html.is-mobile *::after{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* GIF picker: tiles must keep their size (the grid scrolls, not the whole sheet) */
@media (max-width:700px){
  .rr-gif-picker{overflow:hidden !important;display:none;flex-direction:column;max-height:52vh !important}
  .rr-gif-picker.open{display:flex !important}
  .rr-gif-grid{flex:1 1 auto !important;min-height:0 !important;max-height:none !important;overflow-y:auto !important;grid-auto-rows:auto;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;-webkit-overflow-scrolling:touch}
  .rr-gif-item{aspect-ratio:1/1;height:auto !important;min-height:96px;flex:none}
  .rr-gif-head,.rr-gif-foot{flex:0 0 auto}
}
.rr-gif-item{position:relative !important;aspect-ratio:1/1 !important;height:auto !important;min-height:0 !important;overflow:hidden}
.rr-gif-item img{position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover !important}
.rr-gif-grid{align-content:start !important}
.rr-gif-item{align-self:start !important;width:100% !important}
.rr-gif-item{aspect-ratio:auto !important}
.rr-gif-item::before{content:"";display:block;padding-top:100%}
@media (max-width:700px){
  .rr-gif-grid{display:flex !important;flex-wrap:wrap;gap:6px !important;align-content:flex-start}
  .rr-gif-item{flex:0 0 calc((100% - 12px)/3) !important;width:calc((100% - 12px)/3) !important}
}

/* ---------- Game size TEST SCREEN ---------- */
.gs-test{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.gs-phone{flex:0 0 auto;width:min(150px,38vw);max-height:300px;border:2px solid rgba(0,229,255,.55);border-radius:14px;background:#05050f;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 18px rgba(0,229,255,.15)}
.gs-top{display:flex;justify-content:space-between;align-items:center;height:34px;flex:0 0 34px;padding:0 8px;font-size:7px;letter-spacing:1px;color:var(--cyan);border-bottom:1px solid rgba(0,229,255,.2)}
.gs-stage{flex:1;display:flex;align-items:flex-start;justify-content:center;padding-top:0;min-height:0}
.gs-frame{position:relative;background:linear-gradient(160deg,#0b2a22,#0a1a33);border:1px solid var(--green);border-radius:3px;overflow:hidden;transition:width .08s,height .08s;flex:none}
.gs-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,136,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.12) 1px,transparent 1px);background-size:14px 14px}
.gs-ball{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#ff3366;box-shadow:0 0 8px #ff3366}
.gs-pad{position:absolute;left:50%;width:34%;height:5px;margin-left:-17%;border-radius:3px;background:var(--cyan)}
.gs-pad-a{top:8%}.gs-pad-b{bottom:8%;background:var(--magenta)}
.gs-tag{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:6px;letter-spacing:2px;color:rgba(255,255,255,.45)}
.gs-controls{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:10px}
.gs-row{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2px;color:var(--text-dim)}
.gs-row span{width:52px}
.gs-row input{flex:1;min-width:0}
.gs-row b{min-width:44px;text-align:right;color:var(--cyan);font-weight:400}
.gs-info{font-size:10px;letter-spacing:2px;color:var(--yellow)}
.gs-btns{display:flex;gap:8px;flex-wrap:wrap}
.gs-note{font-size:9px;letter-spacing:1px;line-height:1.6;color:var(--text-dim)}
html.is-mobile .mpb-stats{order:8 !important}
html.is-mobile .mpb-invite{order:9 !important}

/* GPU memory fix: 37 full-screen layers were all being painted at opacity:0.
   Skip painting every screen that isn't the active one (still laid out, so game sizing code keeps working). */
html.is-mobile .screen:not(.active),html.is-tablet .screen:not(.active){visibility:hidden !important}
html.is-mobile .screen.active,html.is-tablet .screen.active{visibility:visible}