/* ============ Responsive tuning ============
   Base stylesheet is mobile-first; these are widening adjustments. */

@media (max-width:360px){
  body{font-size:14px}
  .timer-clock{font-size:44px}
  .hud-name{font-size:16px}
  .char-grid{grid-template-columns:repeat(3,1fr)}
  .nav button{font-size:9px}
  .b-actions{gap:6px}
}

@media (min-width:600px){
  .app{padding:18px 18px calc(104px + var(--safe-b))}
  .nav{border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0}
  .modal{border-radius:20px;margin-bottom:24px}
  .modal-back{align-items:center}
  .char-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* ============ Tablet landscape and desktop ============
   The phone column is the right shape for Train, Plan and Story — they are
   one-thing-at-a-time screens. Home and Hokage HQ are not: they are dashboards,
   and on a laptop a 560px column strands two-thirds of the display. Those two
   opt in to a two-column grid by wrapping their cards in .lay. */
@media (min-width:900px){
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:radial-gradient(600px 400px at 20% 30%,rgba(249,115,22,.07),transparent 70%);
  }
  .app.wide{max-width:1080px}
  /* Multi-column rather than grid: content keeps its vertical reading order
     down column one and then continues in column two, instead of a grid's
     left-right zig-zag which would separate a section title from its list. */
  .app.wide .lay{column-count:2;column-gap:16px}
  .app.wide .lay > *{
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  }
  .app.wide .lay > .span-2{column-span:all}
  .app.wide .lay > .section-title{break-after:avoid;-webkit-column-break-after:avoid}
}

/* Desktop: the bottom tab bar becomes a left rail, which is where a
   pointer-driven layout expects navigation to live. */
@media (min-width:1000px){
  body{padding-left:92px}
  .nav{
    top:0;bottom:0;right:auto;width:92px;height:100vh;
    flex-direction:column;justify-content:flex-start;gap:4px;
    padding:14px 8px;border-top:0;border-right:1px solid var(--line);
    border-radius:0;margin:0;max-width:none;
  }
  .nav button{flex:none;width:100%;padding:12px 4px;font-size:10.5px}
  .nav button .ic{font-size:22px}
  .nav button.dot::after{top:6px;right:26%}
  .toasts{left:92px;bottom:20px}
  .app{padding-bottom:32px}
  .mg{max-width:620px}
}

/* Tablet portrait keeps the single column — it reads better than two
   half-width columns at that width. */
@media (min-width:900px) and (max-width:1100px) and (orientation:portrait){
  .app.wide{max-width:640px}
  .app.wide .lay{grid-template-columns:1fr}
}

/* Landscape phone: the battle and timer screens must not need scrolling. */
@media (max-height:520px) and (orientation:landscape){
  .timer-clock{font-size:34px;margin:2px 0}
  .hud{padding:11px}
  .avatar{width:44px;height:44px;font-size:22px}
  .b-av{width:44px;height:44px;font-size:22px}
  .b-log{height:72px}
  .b-actions{grid-template-columns:repeat(4,1fr)}
  .b-act{padding:10px 6px;font-size:12px;flex-direction:column;gap:2px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* Printing a campaign summary should not print the chrome. */
@media print{
  .nav,.topbar,.toasts{display:none !important}
  body{background:#fff;color:#000}
  .card,.hud{box-shadow:none;border-color:#ccc}
}