/* The phone version (client/mobile/index.html): layered on the desktop style.css, which it never changes. */
:root { --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); }
html, body { overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.mobile { touch-action: none; }
canvas#game { cursor: default; }

/* fingers on the game: the touch layer sits over the game, under the menus */
#touch { position: fixed; inset: 0; z-index: 5; touch-action: none; }
#ui { z-index: 10; }
#toasts { z-index: 40; top: calc(64px + var(--sat)); }
#tooltip { z-index: 60; max-width: min(300px, 70vw); }
#tooltip .taphint { margin-top: 6px; color: var(--gold); font-size: calc(12px * var(--ts, 1)); }

/* menus: fit the screen, scroll by dragging, bigger targets */
#ui .panel, #ui #login, #ui .modal { touch-action: pan-y; }
.panel { max-height: calc(100dvh - 16px - var(--sat) - var(--sab)); -webkit-overflow-scrolling: touch; }
.panel.center { width: min(820px, calc(100vw - 16px - var(--sal) - var(--sar))); }
.panel.left, .panel.right { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 16px)); }
.panel .close { top: 6px; right: 6px; padding: 8px 14px; font-size: 18px; z-index: 2; }
button { min-height: 36px; padding: 8px 14px; }
input, select, textarea { font-size: 16px !important; } /* (iPhone zooms the page into smaller text boxes) */
#login { touch-action: pan-y; overflow: auto; align-items: flex-start; padding: calc(8px + var(--sat)) 8px 8px; }
#login .box { padding: 16px 18px; margin: auto; }
#login h1 { font-size: calc(34px * var(--ts, 1)); }
.classes { gap: 6px; }

/* chat: top left, out of the stick's way */
#chat { left: calc(10px + var(--sal)); top: calc(118px + var(--sat)); bottom: auto; width: min(300px, 38vw); font-size: calc(11px * var(--ts, 1)); }
#chat .log { max-height: 20vh; overflow: hidden; }
#chat input { position: fixed; left: 50%; top: calc(10px + var(--sat)); transform: translateX(-50%); width: min(520px, 80vw); z-index: 80; } /* typing: at the top, clear of the on-screen keyboard */

/* the menu launcher (☰) */
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.launcher button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; font-size: calc(15px * var(--ts, 1)); }
.launcher .g { font-size: 24px; color: var(--gold); line-height: 1; }
.launchzoom { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.launchzoom button { width: 52px; font-size: 20px; }

/* long press on an item: Discard / Link in chat */
#itemmenu { position: fixed; z-index: 70; width: 180px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px #000; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
#itemmenu .nm { color: var(--gold); margin-bottom: 2px; }
#itemmenu .danger { border-color: #8a3a3a; color: #f2c0c0; }

/* held upright: ask for the phone to be turned (the game is laid out for landscape) */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #0c0a0e; color: #e8dcc4; align-items: center; justify-content: center; text-align: center; font-size: 20px; padding: 24px; }
#rotate .phone { width: 46px; height: 78px; margin: 0 auto 18px; border: 3px solid var(--gold); border-radius: 8px; animation: turn 2.4s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }

/* the install screen (install.js): covers everything, the upright-phone notice included, until installed or skipped */
#install { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; overflow: auto; touch-action: pan-y;
  background: radial-gradient(ellipse at center, #241a2a 0%, #0c0a0e 70%); padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); }
#install .card { width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto; }
#install .appicon { border-radius: 22px; box-shadow: 0 0 40px rgba(255, 150, 70, 0.25), 0 10px 30px #000; }
#install h1 { font-family: var(--display); font-size: 34px; color: #f0dcb4; margin: 4px 0 0; text-shadow: 0 0 24px rgba(255, 170, 80, 0.25); }
#install .pitch { color: var(--text); font-size: 17px; line-height: 1.4; margin: 0; }
#install .big { font-size: 20px; padding: 14px 28px; min-height: 56px; width: 100%; max-width: 320px; margin-top: 6px; }
#install .later { background: none; border: none; color: var(--dim); text-decoration: underline; font-size: 15px; margin-top: 4px; }
#install .steps { text-align: left; font-size: 17px; line-height: 1.5; margin: 4px 0 0; padding-left: 24px; }
#install .steps li { margin: 6px 0; }
#install .ico { display: inline-flex; vertical-align: middle; color: #8fb3ff; margin-left: 2px; }
#install .small { font-size: 14px; }
@media (orientation: landscape) and (max-height: 480px) {
  #install .card { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; text-align: left; align-items: center; width: min(640px, 100%); }
  #install .appicon { grid-row: span 5; width: 84px; height: 84px; }
  #install h1, #install .pitch, #install .steps, #install .small, #install .big, #install .later { grid-column: 2; }
  #install .big { justify-self: start; }
  #install .later { justify-self: start; }
}

/* No area-rule box on phones: too much for the screen (the rule is still in the Archive) */
body.mobile #intro { display: none !important; }