/* Phones & tablets. html.touch is set by touch.js; nothing here applies on desktop
   except the small shared pieces at the bottom (upload bar, emote/portal UI only exist when used). */
html.touch, html.touch body { touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
html.touch input { -webkit-user-select: text; user-select: text; font-size: 16px; } /* 16px: no iOS zoom on focus */
html.touch button { touch-action: manipulation; }

/* ---- controls layer (under the HUD, over the canvas) ---- */
#touchUI { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#touchLayer { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#stickBase { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%;
  left: calc(env(safe-area-inset-left) + 96px); top: calc(100% - env(safe-area-inset-bottom) - 108px);
  background: radial-gradient(circle, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 70%);
  border: 2px solid rgba(255,255,255,0.32); opacity: 0.5; pointer-events: none; transition: opacity .15s; }
#stickBase.live { opacity: 1; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: linear-gradient(135deg, #ff9ad1, #ffd25e); box-shadow: 0 4px 14px rgba(40,10,60,0.35); }
.tBtn { position: absolute; pointer-events: auto; border-radius: 50%; padding: 0; display: grid; place-items: center;
  font-weight: 800; letter-spacing: 0.5px; color: #fff; background: rgba(40,24,56,0.5);
  border: 2px solid rgba(255,255,255,0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tBtn.down { transform: scale(0.9); background: rgba(255,122,184,0.65); }
.tBtn[hidden] { display: none; }
/* right-hand controls follow the 3D view (--view-right: the landscape chat side panel) */
#tJump { width: 80px; height: 80px; font-size: 15px;
  right: calc(var(--view-right, 0px) + env(safe-area-inset-right) + 22px); bottom: calc(env(safe-area-inset-bottom) + 28px); }
#tUse { width: 66px; height: 66px; font-size: 14px; border-color: #fff;
  right: calc(var(--view-right, 0px) + env(safe-area-inset-right) + 116px); bottom: calc(env(safe-area-inset-bottom) + 40px);
  background: linear-gradient(135deg, #7cc8ff, #9d7cff); box-shadow: 0 0 18px rgba(124,200,255,0.7);
  animation: tPulse 1.4s ease-in-out infinite; }
#tChat { width: 54px; height: 54px; font-size: 24px;
  right: calc(var(--view-right, 0px) + env(safe-area-inset-right) + 35px); bottom: calc(env(safe-area-inset-bottom) + 124px); }
@keyframes tPulse { 50% { box-shadow: 0 0 30px rgba(124,200,255,1); } }

/* ---- HUD, compact ---- */
html.touch #me { left: calc(env(safe-area-inset-left) + 8px); top: calc(env(safe-area-inset-top) + 8px);
  min-width: 0; max-width: 58vw; padding: 6px 10px; pointer-events: none; }
html.touch #meName { font-size: 16px; }
html.touch #me .badge { font-size: 12px; padding: 0 8px; }
html.touch #mePb { font-size: 12px; }
html.touch #meShard { font-size: 11px; }
#tMenu { display: none; }
html.touch #tMenu { display: block; position: absolute; width: 46px; height: 46px; padding: 0; font-size: 22px;
  top: calc(env(safe-area-inset-top) + 8px); right: calc(var(--view-right, 0px) + env(safe-area-inset-right) + 8px); }
/* under the 🎯 / ☰ corner: status chips (🎬 🔔 🤝 🍀) always show here when relevant; ☰ adds the menu items below them */
html.touch #buttons { display: flex; top: calc(env(safe-area-inset-top) + 60px); bottom: auto;
  right: calc(var(--view-right, 0px) + env(safe-area-inset-right) + 8px); flex-direction: column; align-items: flex-end; gap: 6px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 150px); overflow-y: auto; scrollbar-width: none; }
html.touch #buttons:not(.open) > button { display: none; }
html.touch #buttons.open > button { min-width: 188px; height: 46px; padding: 0 16px; font-size: 16px; text-align: left; justify-content: flex-start;
  display: inline-flex; align-items: center; gap: 8px; }
html.touch #buttons > #btnMenu { display: none; }   /* the round 🎯 next to ☰ already opens it */
html.touch #btnMe::after { content: 'Profile & look'; font-size: 16px; }
html.touch #btnSocial::after { content: 'People & friends'; font-size: 16px; }
html.touch #btnFeed::after { content: 'Aim news'; font-size: 16px; }
html.touch .hudChip { height: 36px; font-size: 14px; }
html.touch.tmOpen #buttons { visibility: hidden; }

/* chat log becomes a small read-only overlay (name + crest + line); typing happens in the sheet */
html.touch #chat { pointer-events: none; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  left: calc(env(safe-area-inset-left) + 10px); top: calc(env(safe-area-inset-top) + 124px); bottom: auto;
  width: min(330px, 60vw); padding: 0; }
html.touch #chat #chatLog { max-height: 92px; overflow: hidden; font-size: 13px; line-height: 1.25; padding: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.4);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%); }
html.touch #chat #chatHead, html.touch #chat #chatComposer, html.touch #chat #chatJump, html.touch #chat #chatChans, html.touch #chat #chatTopic,
html.touch #chat .chatGrip, html.touch #chat .chatTab, html.touch #chat .reactBtn, html.touch #chat .ts, html.touch #chat .av,
html.touch #chat .chatNew, html.touch #chat .msg.sep { display: none !important; }
html.touch #chat #chatLog .msg { padding: 0; margin: 0; min-height: 0; background: none; box-shadow: none; }
html.touch #chat #chatLog .mh, html.touch #chat #chatLog .tx { display: inline; }
html.touch #chat #chatLog .mh .nm, html.touch #chat #chatLog .mh .rk { margin-right: 4px; }
html.touch #chat #chatLog .msg.cont::before { content: attr(data-who) ' '; color: var(--nc, #fff); font-weight: 800; }
html.touch #chat #chatLog .msg.sys::before { content: none; }
html.touch #chat #chatLog .msg.sys.hl { background: none; margin: 0; padding: 0; }
html.touch #chat #chatLog .tx.jumbo { font-size: 1.5em; }
html.touch #chat .rchip { height: 20px; font-size: 11px; }
html.touch #chat .rchip .emo { width: 14px; height: 14px; }
/* an animated emoji is a sprite behind a transparent glyph: the overlay's text-shadow would paint that glyph as a dark
   blob on top of it (🌸 / 👀 turned black), so the sprites skip the shadow */
html.touch #chat #chatLog .emo.anim { text-shadow: none; }
/* the Town Menu is a full-screen sheet on phones: the name card and the chat overlay must not ghost through it */
html.touch.tmOpen #me, html.touch.tmOpen #hud > #chat { visibility: hidden; }
#tChat[data-unread]::after { content: attr(data-unread); position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }

html.touch #banner { top: calc(env(safe-area-inset-top) + 60px); padding: 8px 16px; max-width: calc(100vw - 24px); pointer-events: none; }
html.touch #bannerTitle { font-size: 20px; }
html.touch #bannerSub { font-size: 13px; }
html.touch #prompt { bottom: calc(env(safe-area-inset-bottom) + 196px); font-size: 14px; padding: 8px 14px;
  white-space: normal; max-width: 72vw; text-align: center; }
html.touch #prompt2 { bottom: calc(env(safe-area-inset-bottom) + 244px); font-size: 14px; padding: 8px 14px;
  white-space: normal; max-width: 72vw; text-align: center; }
html.touch #prompt kbd, html.touch #prompt2 kbd { display: none; }
html.touch #fortune { top: 30%; font-size: 15px; }
html.touch #toast { bottom: calc(env(safe-area-inset-bottom) + 296px); max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }

html.touch #join { width: min(360px, calc(100vw - 24px)); padding: 22px 20px; }
html.touch #join h1 { font-size: 38px; }
html.touch #auraPanel { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px 16px; touch-action: pan-y; }
html.touch #auraPanel .row label { width: 70px; }
html.touch .tiers { grid-template-columns: repeat(4, 1fr); }

/* landscape phones: everything hugs the edges, the middle stays clear */
@media (orientation: landscape) and (max-height: 500px) {
  html.touch #chat { top: auto; bottom: calc(env(safe-area-inset-bottom) + 184px); width: min(300px, 36vw); }
  html.touch #chatLog { max-height: 72px; }
  html.touch #banner { top: calc(env(safe-area-inset-top) + 8px); }
  html.touch #prompt { bottom: calc(env(safe-area-inset-bottom) + 24px); }
  html.touch #prompt2 { bottom: calc(env(safe-area-inset-bottom) + 72px); }
  /* chat side panel open: the view is narrow and its centre is right where the left thumb lands, so the (tappable)
     prompts float above the joystick / USE / JUMP row instead of swallowing the stick */
  html.touch.chatSheetOpen #prompt2 { bottom: calc(env(safe-area-inset-bottom) + 186px); }
  html.touch.chatSheetOpen #prompt { bottom: calc(env(safe-area-inset-bottom) + 234px); }
  html.touch #toast { bottom: calc(env(safe-area-inset-bottom) + 120px); }
  html.touch #me { max-width: 34vw; }
}

/* ---- chat sheet: Discord-mobile-like. Portrait: two thirds of the screen (⤢ = full height); landscape: a side
   panel with the 3D view shrunk beside it (touch.js sets --view-right), so the joystick keeps working ---- */
#tShade { position: fixed; inset: 0; z-index: 6; background: rgba(10,8,24,0.22); }
#tSheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; height: min(68dvh, calc(100dvh - 56px)); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; color: #f3eefc; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 6px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 8px);
  background: radial-gradient(120% 24% at 50% 0%, rgba(255,168,108,0.16), transparent 64%), linear-gradient(180deg, #2e1b3a, #1d1329);
  border-color: rgba(255,206,170,0.24); box-shadow: 0 -10px 34px rgba(16,4,26,0.45);
  font-family: 'Baloo 2', 'Noto Color Emoji', system-ui, sans-serif; --fs: 15.5px; --avs: 34px; --gut: 54px; }
#tSheet.full { height: calc(100dvh - env(safe-area-inset-top) - 6px); }
#tSheet.side { left: auto; top: 0; height: auto; width: min(46vw, 470px); border-radius: 0; border-width: 0 0 0 1px;
  padding-top: calc(env(safe-area-inset-top) + 6px); box-shadow: -10px 0 34px rgba(16,4,26,0.45); }
#tShade[hidden], #tSheet[hidden] { display: none; }
.tSheetHead { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px 8px; color: #ffe2c4; flex: none; }
.tSheetHead b { font-size: 17px; }
.tSheetHead .grow { flex: 1; }
.tSheetClose, .tSheetFull { width: 36px; height: 36px; padding: 0; border-radius: 50%; flex: none; }
#tSheet.side .tSheetFull { display: none; }
html.touch #hud > #townMenu { right: var(--view-right, 0px); }   /* Town Menu beside the landscape chat panel, never under it */
#tSheet #chatChans { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 0 2px 8px; flex: none; touch-action: pan-x; }
#tSheet #chatChans::-webkit-scrollbar { display: none; }
#tSheet .chCh { height: 32px; font-size: 15px; }
#tSheet #chatLogWrap { flex: 1 1 0; min-height: 0; }
#tSheet #chatLog { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; touch-action: pan-y; font-size: var(--fs); line-height: 1.4;
  padding: 2px 0 10px; -webkit-mask-image: none; mask-image: none; text-shadow: none; border-top: 1px solid rgba(255,214,180,0.1); }
#tSheet #chatLog .reactBtn { display: none; }
#tSheet #chatLog .msg { padding-right: 12px; }   /* no hover react button on phones: its 46 px gutter goes back to the text and cards */
#tSheet #chatLog .av { left: 8px; }
#tSheet #chatComposer { padding: 6px 0 0; }
#tSheet #chatInput { padding: 10px 12px; font-size: 16px; }   /* >=16px: iOS doesn't zoom the page on focus */
#tSheet #chatQuick button { height: 36px; }
#tSheet #emojiPicker { height: min(340px, 50vh); }
#tSheet .pickBody { touch-action: pan-y; }

/* ---- tap targets: 40 px minimum on phones in the newer panels too (Town Menu ✕ / 💬, segment pills, event and
   link-card buttons, the profile card) ---- */
html.touch .tmClose, html.touch .tmChatBtn { width: 40px; height: 40px; }
html.touch .stSeg button, html.touch .lpCat, html.touch .lpTiers button { min-height: 40px; }
html.touch .mtBtn, html.touch .mtCard .mtBtn, html.touch #tSheet .mtCard .mtBtn { height: 40px; }
html.touch .mtBtn.icon, html.touch .mtCard .mtBtn.icon { width: 40px; }
html.touch #tSheet .lcBtn { height: 40px; } html.touch #tSheet .lcBtn.icon { width: 40px; }
html.touch .pcClose { min-width: 40px; min-height: 40px; }
html.touch .pcActions button { min-height: 40px; }
.tSheetClose, .tSheetFull { width: 40px; height: 40px; }
#tSheet .chCh, #tSheet #chatQuick button { height: 40px; }
#tSheet #chatEmojiBtn, #tSheet #chatSend { width: 42px; height: 42px; }

/* ---- shared: portal card, upload bar, rotate hint ---- */
#tUpload { position: fixed; z-index: 9; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%);
  width: min(320px, calc(100vw - 24px)); padding: 8px 12px 12px; font-size: 14px; text-align: center; }
#tUpload i { display: block; height: 6px; margin-top: 6px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width .15s; }
#tRotate { position: fixed; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px;
  border-radius: 12px; background: var(--panel-solid); font-weight: 700; pointer-events: none; animation: tFade 4.5s forwards; }
@keyframes tFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }