/* Phone-only ergonomics; approved colors/artwork and desktop layout stay shared. */
@media (max-width:767px) {
  html { scroll-padding-top:20px; scroll-padding-bottom:96px; }
  body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  .hero-search input, .tool-directory-controls input,
  #native-app input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not(.amount-input),
  #native-app textarea, #native-app select, .mini-modal input, .mini-modal select {
    font-size:16px; min-height:44px; line-height:1.5;
  }
  #native-app textarea { min-height:112px; }
  #native-app :is(input,textarea,select) { scroll-margin-block:24px 96px; }
  #native-app :is(.page-header,.header-copy,.guide-copy,.field-row,.control-row,.preview-card) { min-width:0; }
  #native-app .guide-copy { font-size:14px; }
  #native-app button { min-height:44px; min-width:44px; touch-action:manipulation; }
  #native-app :is(.back,.back-button) {
    width:44px; min-width:44px; max-width:44px; height:44px;
    min-height:44px; max-height:44px; flex:0 0 44px;
    margin-left:0; margin-right:12px;
  }
  #native-app :is(.month-label,.notice,.ledger-entry,.product-category) { min-height:44px; display:flex; align-items:center; }
  #native-app input[type=range] { min-height:44px; touch-action:pan-y; }
  #native-app input[type=checkbox] { min-width:24px; min-height:24px; }
  .tool-site-header .mobile-tool-nav { gap:8px; padding:0 14px 8px; }
  .mobile-tool-nav a { min-height:44px; display:flex; align-items:center; justify-content:center; flex:1; white-space:nowrap; }
  .tool-site-footer a, .site-footer .footer-links a { min-height:44px; display:inline-flex; align-items:center; }
  .quick-searches button { min-height:44px; padding-block:10px; }
  .tool-directory-controls { gap:12px; margin-top:20px; }
  .tool-directory-controls input { width:100%; }
  .tool-directory-controls nav {
    width:100%; min-width:0; flex-wrap:nowrap; overflow-x:auto;
    padding:2px 0 8px; scroll-padding-inline:12px; overscroll-behavior-inline:contain;
  }
  .tool-directory-controls nav button { flex:0 0 auto; white-space:nowrap; }
  .mini-modal, .mini-image-dialog {
    box-sizing:border-box; width:min(440px,calc(100% - 24px)); max-width:calc(100% - 24px);
    max-height:calc(var(--web-visual-height,100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto; overscroll-behavior:contain; padding:20px; border-radius:18px;
  }
  .mini-modal button, .mini-image-dialog button { min-height:44px; }
  .mini-modal p { overflow-wrap:anywhere; line-height:1.7; }
  .mini-modal > div { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
  .mini-modal input { width:100%; min-width:0; }
  body[data-web-keyboard=open] .mini-modal[open] {
    top:calc(var(--web-visual-offset,0px) + 12px + env(safe-area-inset-top));
    bottom:auto; margin-top:0; margin-bottom:0;
  }
  .mini-image-dialog img { width:auto; max-width:100%; max-height:calc(var(--web-visual-height,100dvh) - 160px); }
  .web-date-wheels { padding:10px; gap:6px; }
  .web-date-wheels select { font-size:16px; min-height:48px; padding:6px; }
  #native-toast, .toast { bottom:calc(84px + env(safe-area-inset-bottom)); line-height:1.5; }
  .mobile-nav { padding-bottom:env(safe-area-inset-bottom); }
  .site-footer, .tool-site-footer { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  .country-overlay { padding-bottom:env(safe-area-inset-bottom); }
  .country-picker, .date-picker-panel { max-height:calc(var(--web-visual-height,100dvh) - 100px); overflow:auto; }
  .picker-list .picker-row { min-height:48px; }
  .compress-fields { min-width:0; }
  .compress-fields select { max-width:100%; }
  .compress-page .file-drop { padding:18px 12px; }
}
@media (max-width:720px) {
  html { scrollbar-gutter:auto; }
  body[data-web-keyboard=open] .mobile-nav { display:none; }
}
@media (max-width:720px) {
  .site-header .profile-button {
    width:44px; min-width:44px; height:44px; min-height:44px;
    padding:0; gap:0; display:grid; place-items:center; flex:0 0 44px;
  }
  .site-header .profile-button > svg, .site-header .profile-button > span:not(.profile-icon-bg) { display:none; }
  .site-header .profile-button .profile-icon-bg { width:34px; height:34px; min-width:34px; display:grid; place-items:center; }
  .site-header .profile-icon-bg svg { width:22px; height:22px; display:block; }
  .route-hero.tools, .route-hero.guide, .route-hero.games {
    min-height:0; margin-top:16px; padding:24px 22px 116px; border-radius:24px;
  }
  .route-hero .back-link { margin-bottom:22px; }
  .route-hero .section-kicker { margin:0; font-size:14px; }
  .route-hero h1 { margin:8px 0 10px; font-size:clamp(28px,8.2vw,34px); line-height:1.2; }
  .route-hero > p { margin:0 0 16px; font-size:15px; line-height:1.65; }
  .route-hero .hero-pill { font-size:12px; }
  .route-hero .character-chest { width:200px; height:170px; top:auto; bottom:8px; right:14px; }
  .route-hero .character-book { width:142px; height:142px; top:auto; bottom:10px; right:38px; }
  .route-hero .character-controller { width:180px; height:153.32px; top:auto; bottom:4px; right:26px; }
}
/* Suppress double-tap zoom; keep panning and pinch zoom available. */
@media (max-width:767px) {
  html { touch-action:manipulation; }
}
.mobile-menu-toggle,.mobile-side-drawer{display:none}
@media (max-width:720px) {
  html[data-mobile-navigation=drawer] .mobile-nav,html[data-mobile-navigation=drawer] .mobile-tool-nav{display:none!important}
  .mobile-menu-toggle{display:grid;place-items:center;flex:0 0 40px;width:40px;height:44px;min-height:44px;padding:8px;border:1px solid #e6d7be;border-radius:13px;background:#fffaf0;color:#49351f;cursor:pointer}
  .mobile-menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  html[data-mobile-navigation=drawer] .header-inner{gap:10px;display:flex}
  html[data-mobile-navigation=drawer] .header-inner .brand{margin-right:auto}
  .mobile-side-drawer[open]{display:block;position:fixed;inset:0 auto 0 0;margin:0;width:min(300px,82vw);max-width:82vw;height:100dvh;max-height:100dvh;padding:calc(22px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));box-sizing:border-box;border:0;border-right:1px solid #e7d8c1;border-radius:0 24px 24px 0;background:#fff9ed;color:#181714;overflow-y:auto;box-shadow:12px 0 40px #49351f24}
  .mobile-side-drawer::backdrop{background:#2c201c38;backdrop-filter:blur(5px)}
  .mobile-drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
  .mobile-drawer-heading strong{font-size:25px}.mobile-drawer-heading button{width:44px;height:44px;border:1px solid #e7d8c1;border-radius:14px;background:#fffdf7;color:#49351f;font-size:28px;cursor:pointer}
  .mobile-side-drawer nav{display:grid;gap:10px}.mobile-side-drawer nav a{display:flex;align-items:center;gap:16px;min-height:56px;padding:14px 18px;box-sizing:border-box;border:1px solid transparent;border-radius:17px;font-size:17px;font-weight:600;color:#49351f;text-decoration:none}
  .mobile-side-drawer nav a.active{background:#ffe4a0;border-color:#e9c96e;color:#352517}.mobile-side-drawer nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}.mobile-side-drawer nav a:active{background:#fff0c9}
  body.mobile-drawer-open{overflow:hidden}
  html[data-mobile-navigation=drawer] .site-footer,html[data-mobile-navigation=drawer] .tool-site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  html[data-mobile-navigation=drawer] body{padding-bottom:0}
}

:root{--mobile-drawer-styles-ready:1}

/* User-approved profile artwork; never flash the previous yellow icon. */
.site-header .profile-icon-bg{background:transparent;border:0;position:relative;width:40px;height:40px;flex-basis:40px}
.site-header .profile-icon-bg svg{display:none!important}
.site-header .profile-icon-bg:not([data-approved-avatar=ready])::before{content:"";width:16px;height:16px;border:2px solid #e8d4bc;border-top-color:#bd694b;border-radius:50%;animation:approved-avatar-spin .8s linear infinite}
.site-header .profile-icon-bg[data-approved-avatar=error]::before{content:"!";animation:none;border:1px solid #bc6a49;display:grid;place-items:center;color:#87482f;font-size:12px}
.site-header .profile-icon-bg .approved-profile-avatar{display:block;width:44px;height:44px;max-width:none;object-fit:contain}
@keyframes approved-avatar-spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.site-header .profile-button .profile-icon-bg{width:40px;height:40px;min-width:40px}.site-header .profile-button{border:0;background:transparent;box-shadow:none}.site-header .profile-icon-bg .approved-profile-avatar{width:44px;height:44px}}
/* Center the artwork canvas inside its slot, including its transparent margin. */
.site-header .profile-icon-bg .approved-profile-avatar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* Match the approved artwork silhouette; exclude stray alpha pixels outside its rim. */
.site-header .profile-icon-bg .approved-profile-avatar{clip-path:ellipse(42.3% 43% at 50% 50%);image-rendering:auto}