/* Tablet controls: screen-space joysticks, safe areas and scrollable menus. */
body { min-height: 0; height: 100dvh; }
/* Avoid a full-screen blending pass and expensive blur surfaces on tablets. */
body.smooth-graphics #scanlines { display: none; }
body.smooth-graphics .screen, body.smooth-graphics .pause-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.smooth-graphics .joy-base, body.smooth-graphics .joy-knob, body.smooth-graphics .dbtn { box-shadow: none; }
body.smooth-graphics .title::before, body.smooth-graphics .title::after { display: none; }
#t-dash, #t-skill { font-size: 14px; }
#t-skill:disabled { opacity: .5; }
.touch-hint { display: none; }
body.touch .touch-hint { display: block; text-align: center; font-size: 13px; line-height: 1.7; color: #a5c7de; }
body.touch .controls-hint { display: none; }
body.touch #wrap { width: 100%; height: 100%; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
body.touch canvas#game { width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); flex-shrink: 0; }
body.touch .screen { padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
body.touch #screen-menu { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
body.touch .menu-body { min-height: 0; touch-action: pan-y; overscroll-behavior: contain; }
body.touch .menu-footer { flex-shrink: 0; margin-top: 10px; }
body.touch .btn, body.touch .level-btn, body.touch .pal-btn { min-height: 48px; min-width: 48px; }
body.touch input[type=range] { min-height: 44px; touch-action: pan-x; }
body.touch .menu-author-card { position: static !important; padding: 6px 20px !important; margin: 8px auto 0 !important; }
body.touch .author-name { font-size: 18px !important; }
body.touch .author-tagline, body.touch .author-label { display: none; }
#touch-ui { position: fixed; --stick: clamp(120px, 20vmin, 180px); --edge: clamp(20px, 4vw, 56px); }
.joy { width: var(--stick); height: var(--stick); }
#joy-l { left: max(var(--edge), env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); }
#joy-r { right: max(var(--edge), env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); }
.joy-label { position: absolute; top: -26px; width: 100%; text-align: center; font: 600 13px/1.5 'Microsoft YaHei',sans-serif; color: #b5cfdf; pointer-events: none; }
.joy-knob { transition: none; }
.dbtn.action { position: absolute; width: 68px; height: 60px; bottom: calc(max(22px, env(safe-area-inset-bottom)) + var(--stick) + 36px); font-size: 18px; background: rgba(5,18,35,.88); }
#t-dash { left: calc(max(var(--edge), env(safe-area-inset-left)) + var(--stick)/2 - 34px); }
#t-skill { right: calc(max(var(--edge), env(safe-area-inset-right)) + var(--stick)/2 - 34px); color: var(--purple); border-color: var(--purple); }
.dbtn.pause { top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 54px; height: 54px; }
body.touch.paused #t-pause { display: flex; }
body.touch #screen-gadget, body.touch #screen-result { overflow-y: auto; }
body.touch #screen-editor { overflow-y: auto; touch-action: pan-y; }
body.touch .editor-wrap { height: auto; min-height: 100%; flex-shrink: 0; clip-path: none; }
body.touch .editor-body { display: flex; flex-direction: column; flex: none; }
body.touch .editor-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
body.touch #ed-canvas { width: 100%; height: auto; max-height: none; aspect-ratio: 40 / 28; object-fit: fill; flex-shrink: 0; }
body.touch .ed-slotlist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
body.touch .editor-actions .btn { padding: 8px 12px; letter-spacing: 1px; }
body.touch .ed-input { font-size: 16px; }
@media (max-width: 600px) {
  body.touch .editor-palette, body.touch .ed-slotlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: portrait) {
  body.touch canvas#game { align-self: flex-start; margin-top: max(100px, calc((100dvh - 100vw * 9 / 16 - 280px)/2)); }
  body.touch .pause-panel { max-width: 94vw; }
  body.touch #levelup-cards { flex-direction: column; overflow-y: auto; max-height: 76dvh; }
  body.touch .card { width: min(80vw, 440px) !important; flex-shrink: 0; }
}
@media (max-height: 550px) and (orientation: landscape) {
  #touch-ui { --stick: clamp(100px, 25vmin, 130px); --edge: 20px; }
  .dbtn.action { bottom: 30px; width: 56px; height: 52px; }
  #t-dash { left: calc(var(--edge) + var(--stick) + 12px); }
  #t-skill { right: calc(var(--edge) + var(--stick) + 12px); }
  body.touch .menu-author-card, body.touch .subtitle { display: none !important; }
  body.touch .menu-header { margin-bottom: 4px; }
  body.touch .menu-footer { margin-top: 4px; }
  body.touch .menu-footer .settings { flex-direction: row; }
  body.touch .touch-hint { font-size: 10px; }
  body.touch #screen-menu { padding-top: 8px; }
}