/* Lumora Online - phones and tablets (js/mobile.js sets html.touch, html.ui-small, html.portrait and --ui / --hud-w / --hud-h) */
html.touch, html.touch body { touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#game, #fx { touch-action: none; }
.win-head { touch-action: none; }
.win-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.touch input, html.touch textarea { -webkit-user-select: text; user-select: text; }

/* the HUD and the title screen are scaled as a whole by mobile.js; windows must fit the scaled screen */
html.ui-small .win { max-height: calc(var(--hud-h) - 12px) !important; max-width: calc(var(--hud-w) - 8px); }
/* pop-ups that live outside the HUD scale with it */
html.ui-small .pk-ov > *, html.ui-small .confirm-back > *, html.ui-small .dead > * { transform: scale(var(--ui)); }
html.ui-small #ridePick { transform: scale(var(--ui)); transform-origin: 50% 100%; }
html.ui-small .ult-cut .ult-band { transform: scale(var(--ui)); }

/* bigger touch targets on small screens */
html.touch.ui-small .win-head button { min-width: 40px; min-height: 40px; font-size: 22px; }
html.touch .chat-tabs button { padding-top: 6px; padding-bottom: 6px; }

/* Attack / Target buttons (touch only), above the right end of the hotbar */
.mob-pad { display: none; }
html.touch .mob-pad { display: flex; position: absolute; right: 84px; bottom: 100px; gap: 14px; align-items: flex-end; z-index: 6; }
.mob-pad button { border: 3px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; font: inherit; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.mob-pad button:active { transform: scale(.93); filter: brightness(1.15); }
.mob-pad b { font-size: 34px; line-height: 1; } .mob-pad small { font-size: 12px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.mob-atk { width: 118px; height: 118px; background: radial-gradient(circle at 40% 30%, #ff8a6a, #d8302a 60%, #8a1414); }
.mob-tgt { width: 78px; height: 78px; background: radial-gradient(circle at 40% 30%, #8ac8ff, #2a6ad8 60%, #143a8a); } .mob-tgt b { font-size: 28px; }
.chip.mob-full { cursor: pointer; border: 0; font-size: 15px; }

/* portrait phone: ask to turn it */
.mob-rotate { display: none; }
html.portrait .mob-rotate { display: flex; position: fixed; inset: 0; z-index: 100000; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #1c3166, #0b1424 70%); color: #fff; }
.mob-rotate b { font-size: 22px; } .mob-rotate small { color: #b8c8e8; font-size: 14px; }
.mob-phone { width: 54px; height: 92px; border: 4px solid #fff; border-radius: 12px; position: relative; animation: mobTurn 2.2s ease-in-out infinite; margin-bottom: 10px; }
.mob-phone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #fff; }
@keyframes mobTurn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* install / full screen tip on the title screen */
.mob-install { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 10px 12px; border-radius: 12px;
  background: rgba(10, 18, 40, .92); border: 1px solid #5a7ab8; color: #e8eefc; font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.mob-share { display: inline-block; width: 12px; height: 14px; border: 2px solid #8ac8ff; border-top: 0; border-radius: 0 0 3px 3px; position: relative; vertical-align: -2px; margin: 0 2px; }
.mob-share::before { content: '↑'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); color: #8ac8ff; font-size: 13px; font-style: normal; font-weight: 900; }