/* MINUTE MADE MAFIA - phones and tablets. Loaded last so it wins over the effect layers. */

/* notches and home bars (the page uses viewport-fit=cover) */
.top{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.radio{bottom:calc(10px + env(safe-area-inset-bottom))}

/* ---------- radio bar: real tap targets, long titles slide instead of cutting off ---------- */
.radio__skip,.radio__opt{height:44px}
.radio__info span i{display:inline-block;font-style:normal;white-space:nowrap}
.radio__info span.marq{text-overflow:clip}
.radio__info span.marq i{animation:mmMarq 10s ease-in-out infinite alternate}
@keyframes mmMarq{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--marq,0))}}
html.calm .radio__info span.marq{white-space:normal;font-size:11px;line-height:1.2}
html.calm .radio__info span.marq i{animation:none;display:inline;white-space:normal}
html.kb .radio,html.kb .scbox{opacity:0;pointer-events:none;transition:opacity .15s}
@media (max-width:640px){
  .radio{gap:6px;padding:6px 8px 6px 6px}
  .radio__skip{flex:0 0 38px}
  .radio__opt{padding:0 8px}
  .scbox{bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ---------- header: switch to the menu button before the links start wrapping ---------- */
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(5,4,4,.98);padding:10px var(--pad) 20px;border-bottom:1px solid var(--line);max-height:calc(100svh - 70px);overflow-y:auto}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;font-size:15px}
  .burger{display:block}
  .nav__badge{position:static;display:inline-block;margin-left:8px;vertical-align:1px}
}

/* ---------- footer links big enough to tap ---------- */
.foot nav{gap:0 2px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}

/* ---------- forms ---------- */
.consent input{width:24px;height:24px}

/* ---------- clue board: stacked notes until there's room for the corkboard layout ---------- */
@media (max-width:900px){
  .board{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:30px 14px;border-width:10px}
  .note{position:relative;left:auto!important;top:auto!important;width:auto}
  .board__center{position:relative;left:auto;top:auto;transform:rotate(-2deg);grid-column:1/-1;width:auto;order:-1}
  .board__center.solved{animation:none}
  .board svg{display:none}
}
@media (max-width:360px){.board{grid-template-columns:1fr}}

/* ---------- group chat on touch screens ---------- */
.chat__out{min-height:40px;padding:0 12px}
@media (hover:none){.cm__x{opacity:.85;min-height:28px}}
@media (max-width:760px){
  .chat-head{padding-top:22px;padding-bottom:14px}
  .chat-head .kicker{letter-spacing:.2em;margin-bottom:8px}
  .chat-head h1{font-size:clamp(34px,11vw,52px)}
  .chat-head h1 br{display:none}
  .chat__log{height:calc(100svh - 340px);min-height:240px}
}

/* ---------- scratch record (touch screens): only while a song plays, never over the chat ---------- */
@media (hover:none),(pointer:coarse){
  html:not(.playing) .scratchpad,html[data-route="/chat"] .scratchpad{display:none}
  .scratchpad{width:58px;height:58px;left:8px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .scratchpad b{bottom:-14px;font-size:8px}
}

/* ---------- the entrance on phones: everything fits on one screen, no scrolling ---------- */
@media (max-width:820px){
  .gate{align-content:center;gap:clamp(6px,2svh,20px);padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
  .deck{width:min(68vw,340px,36svh)}
  .gate.gx .gate__copy{padding:10px 14px}
  .gate .kicker{margin-bottom:8px}
  .gate.gx .gate__title{font-size:clamp(38px,min(12.5vw,7.4svh),76px)}
  .gate__sub{font-size:15px;line-height:1.45;margin:10px 0 16px}
  .gate__btns{flex-direction:column;align-items:center;gap:8px}
  .gate.gx .gate__btns .btn--gold{width:min(100%,320px);min-height:58px;padding:0 24px;font-size:16px}
  .gate__btns .btn--ghost{width:min(100%,320px);min-height:44px}
  .gate__fine{margin-top:10px;font-size:11px}
  .gx-tape--0{top:2%}
  .gx-tape--1{bottom:1%}
}
@media (max-width:820px) and (max-height:700px){
  .deck{width:min(60vw,30svh)}
  .gate__sub{font-size:14px;margin:6px 0 12px}
  .gate__fine{display:none}
}
/* phone turned sideways: record on the left, copy on the right */
@media (orientation:landscape) and (max-height:520px){
  .gate{grid-template-columns:auto minmax(0,1fr);align-content:center;gap:4vw;text-align:left;padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .deck{width:min(40vw,72svh)}
  .gate.gx .gate__copy{padding:8px 12px;margin:0}
  .gate .kicker{margin-bottom:6px}
  .gate.gx .gate__title{font-size:clamp(30px,11svh,60px)}
  .gate__sub{font-size:14px;line-height:1.4;margin:8px 0 12px}
  .gate__btns{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .gate.gx .gate__btns .btn--gold{width:auto;min-height:50px;padding:0 22px;font-size:15px}
  .gate__btns .btn--ghost{width:auto}
  .gate__fine,.gx-clock{display:none}
  .gx-rec{top:12px}
  .od-notes{top:8px}
  .top{padding-top:8px;padding-bottom:8px}
}