/* Touch screens: the rotate screen for upright phones, thumb controls for the arena, and a
   full-screen arena layout for phones held sideways. Everything keys off html[data-touch=true]. */
#rotate-overlay,.touch-stick-zone,.touch-dash,.touch-bar{display:none}

/* ---------- phones held upright: turn sideways ---------- */
#rotate-overlay{position:fixed;inset:0;z-index:2147483647;place-content:center;justify-items:center;gap:14px;padding:32px 28px;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#1d3b3488,transparent 70%),#091c27;color:#f6eedb;font-family:Inter,'Segoe UI',Arial,sans-serif}
#rotate-overlay h2{font:750 26px/1.2 Inter,'Segoe UI',Arial,sans-serif;color:#fff3d8;margin:10px 0 0;letter-spacing:-.4px}
#rotate-overlay p{font:400 15px/1.6 Inter,'Segoe UI',Arial,sans-serif;color:#c6d5d7;margin:0;max-width:280px}
#rotate-overlay .button{margin-top:10px;min-height:46px;padding:0 22px}
.rotate-phone{width:96px;height:96px;display:grid;place-items:center}
.rotate-phone i{display:block;width:44px;height:76px;border:3px solid #f0ce84;border-radius:9px;position:relative;animation:rotate-phone 2.4s ease-in-out infinite}
.rotate-phone i:after{content:'';position:absolute;left:50%;bottom:5px;width:10px;height:3px;margin-left:-5px;border-radius:2px;background:#f0ce84}
@keyframes rotate-phone{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rotate-phone i{animation:none;transform:rotate(-90deg)}}
@media(orientation:portrait) and (max-width:640px){
  html[data-touch="true"] #rotate-overlay{display:grid}
  html[data-touch="true"] body>:not(#rotate-overlay){visibility:hidden}
  html[data-touch="true"] dialog::backdrop{background:transparent}
}

/* ---------- thumb controls (any touch screen, in the arena) ---------- */
html[data-touch="true"] body{overscroll-behavior:none}
html[data-touch="true"] body[data-view="arena"] #arena-view{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-touch="true"] .game-shell button{touch-action:manipulation}
html[data-touch="true"] body[data-view="arena"] .touch-stick-zone{display:block;position:absolute;left:0;top:0;bottom:0;width:46%;z-index:4;pointer-events:none;touch-action:none}
html[data-touch="true"] body[data-view="arena"] .touch-stick-zone.ready{pointer-events:auto}
.touch-stick-hint{position:absolute;left:max(36px,env(safe-area-inset-left));bottom:62px;display:none;align-items:center;gap:10px;pointer-events:none;color:#f6eedb;font:600 12px/1.3 Inter,'Segoe UI',Arial,sans-serif;text-shadow:0 1px 4px #000}
.touch-stick-hint i{width:64px;height:64px;border-radius:50%;border:2px dashed #f0ce84aa;background:#0b1a2255;display:block}
html[data-touch="true"] .touch-stick-zone.ready:not(.active) .touch-stick-hint{display:flex;animation:stick-hint 2.2s ease-in-out infinite}
@keyframes stick-hint{0%,100%{opacity:.55}50%{opacity:1}}
.touch-stick{position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:2px solid #f0ce8499;background:radial-gradient(circle,#0b1a2233,#0b1a2288);pointer-events:none}
.touch-stick[hidden]{display:none}
.touch-stick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c9,#e2b860 70%);box-shadow:0 3px 10px #0008;display:block}
html[data-touch="true"] body[data-view="arena"][data-steerable="true"] .touch-dash{display:grid}
.touch-dash{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:58px;width:78px;height:78px;z-index:6;place-content:center;justify-items:center;gap:1px;border-radius:50%;
  border:3px solid #f0ce84;background:radial-gradient(circle at 40% 30%,#3c4a3b,#162720);color:#fff1c9;box-shadow:0 4px 14px #000a;font:700 10px/1 Inter,'Segoe UI',Arial,sans-serif;letter-spacing:1px;touch-action:none}
.touch-dash svg{width:28px;height:28px;stroke:#ffe6a6;stroke-width:2}
.touch-dash:disabled{opacity:.42;border-color:#9a8a66}
.touch-dash.cooling span{font-variant-numeric:tabular-nums}
.touch-dash:not(:disabled):active{transform:scale(.94);background:#4a5a45}
/* The stick and dash replace keyboard hints and the press-to-steer button. */
html[data-touch="true"] .game-shell #control-hint,html[data-touch="true"] .game-shell #dash-button{display:none}
html[data-touch="true"] body[data-steerable="true"] #take-control{display:none}

/* ---------- phones held sideways: the arena fills the screen ---------- */
@media(orientation:landscape) and (max-height:520px){
  html[data-touch="true"] body[data-view="arena"] .site-header{display:none}
  html[data-touch="true"] body[data-view="arena"].game-shell main{height:100dvh}
  html[data-touch="true"] .game-shell .canvas-wrap{height:100%}
  html[data-touch="true"] body[data-view="arena"] .touch-bar{display:flex;position:absolute;top:8px;left:max(8px,env(safe-area-inset-left));gap:6px;z-index:9}
  .touch-bar button{height:34px;min-width:34px;padding:0 10px;border:1px solid #6b7c76;border-radius:3px;background:#0c1d27e6;color:#f1e4c3;font:600 13px/1 Inter,'Segoe UI',Arial,sans-serif}
  .touch-bar .touch-exit span{font-size:12px}
  /* No bottom bar here, so the thumb controls sit lower. */
  .touch-stick-hint{bottom:30px}
  .touch-dash{bottom:26px}

  /* Out of the way: decoration, the bottom bar, the minimap, the feed and the weapon dock. */
  html[data-touch="true"] .game-shell .arena-topbar,html[data-touch="true"] .game-shell .dungeon-label,html[data-touch="true"] .game-shell .minimap-panel,
  html[data-touch="true"] .game-shell .activity-panel,html[data-touch="true"] .game-shell .balance-card,html[data-touch="true"] .game-shell .arena-bottom,
  html[data-touch="true"] .game-shell .spell-loadout,html[data-touch="true"] .game-shell .watch-chip,html[data-touch="true"] .game-shell #lobby-action{display:none!important}

  /* Your hero, top left beside the Home button. */
  html[data-touch="true"] .game-shell .game-hud{top:8px;left:calc(max(8px,env(safe-area-inset-left)) + 112px);max-width:210px;min-height:0;padding:6px 9px;gap:6px;pointer-events:none}
  html[data-touch="true"] .game-shell .game-hud .hud-character canvas{display:none}
  html[data-touch="true"] .game-shell .game-hud .hud-score,html[data-touch="true"] .game-shell .game-hud .hud-kills{display:none}

  /* The raid clock and the standings, top right. */
  html[data-touch="true"] .game-shell .raid-strip{top:8px;right:max(8px,env(safe-area-inset-right));left:auto;transform:none;width:178px;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
  html[data-touch="true"] .game-shell .raid-strip .strip-icon,html[data-touch="true"] .game-shell .raid-strip .eyebrow,html[data-touch="true"] .game-shell .raid-strip .strip-stat:not(.countdown),html[data-touch="true"] .game-shell .raid-strip .status-badge{display:none}
  html[data-touch="true"] .game-shell .raid-strip h2{font-size:14px;margin:0;white-space:nowrap}
  html[data-touch="true"] .game-shell .raid-strip .countdown strong{font-size:17px}
  html[data-touch="true"] .game-shell .sidebar{top:52px;right:max(8px,env(safe-area-inset-right));width:178px;max-height:calc(100% - 172px)}
  html[data-touch="true"] .game-shell .leaderboard-panel .table-labels,html[data-touch="true"] .game-shell .leaderboard-foot{display:none}
  html[data-touch="true"] .game-shell .sidebar:not(.show-all) #leaderboard{display:block}

  /* Moments: level-up choices, the boss, falling and the lobby, centred and compact. */
  html[data-touch="true"] .game-shell .upgrade-overlay{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(560px,calc(100% - 220px));padding:10px 12px;z-index:9}
  html[data-touch="true"] .game-shell #upgrade-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html[data-touch="true"] .game-shell #upgrade-options button{min-height:96px;padding:8px 6px}
  html[data-touch="true"] .game-shell .upgrade-overlay h3{font-size:16px;margin:2px 0 8px}
  html[data-touch="true"] .game-shell .upgrade-overlay{max-height:none;overflow:visible}
  html[data-touch="true"] .game-shell .upgrade-overlay small{display:none}
  html[data-touch="true"] .game-shell .boss-bar{top:auto;bottom:12px;left:50%;transform:translateX(-50%);width:220px}
  html[data-touch="true"] .game-shell #death-banner{top:50%;width:320px;padding:12px 16px}
  html[data-touch="true"] .game-shell .lobby-overlay{top:auto;bottom:74px;width:300px;padding:10px 14px}
  html[data-touch="true"] .game-shell .lobby-overlay h2{font-size:18px}
  html[data-touch="true"] .game-shell .lobby-overlay p{display:block;font-size:12px;margin-top:4px}
  html[data-touch="true"] body[data-entered="true"].game-shell .action-dock{display:none}
  html[data-touch="true"] body[data-entered="true"].game-shell .lobby-overlay{bottom:14px}

  /* The entry / results button stays, small and centred, whenever there is nothing to steer. */
  html[data-touch="true"] .game-shell .action-dock{bottom:12px;width:auto;max-width:none;padding:8px 10px;display:block}
  html[data-touch="true"] body[data-steerable="true"].game-shell .action-dock{display:none}
  html[data-touch="true"] .game-shell .hero-card>:not(#take-control){display:none}
  html[data-touch="true"] .game-shell #take-control{min-height:44px;padding:0 22px;white-space:nowrap}

  /* Home, sideways: the join button, the clock and the pool fit on one screen. */
  html[data-touch="true"] .game-shell .title-screen{min-height:0;height:100%;overflow:auto}
  html[data-touch="true"] .game-shell .home-content{padding:22px 0 16px;margin:0 0 0 max(24px,env(safe-area-inset-left));max-width:calc(100% - 330px)}
  html[data-touch="true"] .game-shell .home-kicker,html[data-touch="true"] .game-shell .home-description,html[data-touch="true"] .game-shell .home-hero,
  html[data-touch="true"] .game-shell .home-facts,html[data-touch="true"] .game-shell .home-bottom,html[data-touch="true"] .game-shell .home-live-indicator,
  html[data-touch="true"] .game-shell #next-raid-title,html[data-touch="true"] .game-shell .holder-rules,html[data-touch="true"] .game-shell #reward-pool-label,
  html[data-touch="true"] .game-shell .home-raid-card .entry-note,html[data-touch="true"] .game-shell #entry-open,html[data-touch="true"] .game-shell .next-rewards h3{display:none!important}
  html[data-touch="true"] .game-shell .home-content h1{font-size:50px;margin:0 0 8px}
  html[data-touch="true"] .game-shell .home-content h2{font-size:21px;margin:0 0 6px}
  html[data-touch="true"] .game-shell .home-actions{flex-direction:row;align-items:center;gap:18px;margin-top:14px;max-width:none}
  html[data-touch="true"] .game-shell .home-actions .button{min-height:48px}
  html[data-touch="true"] .game-shell .home-raid-card{position:absolute;top:10px;right:max(16px,env(safe-area-inset-right));width:276px;margin:0;padding:12px 16px}
  html[data-touch="true"] .game-shell .next-raid-clock{margin-top:4px}
  html[data-touch="true"] .game-shell .next-rewards{padding-top:4px}
  html[data-touch="true"] .game-shell .reward-pool{margin:4px 0 8px}
  html[data-touch="true"] .game-shell .podium-split{margin:10px 0 12px}

  /* Dialogs fit a short screen. */
  html[data-touch="true"] dialog{max-height:calc(100dvh - 16px);overflow:auto}
}