/* Phone and touch fixes, loaded last on every page so they win over the page styles. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,[role=group]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#stage{touch-action:none}
body{padding-bottom:env(safe-area-inset-bottom)}
/* the home page fills the screen exactly, also when the phone's toolbar slides away */
body.p-work{height:100vh;height:100dvh}

/* touch screens have no hover: don't leave buttons stuck in their hover look after a tap */
@media (hover:none){
  .card:hover .project-image,.choose button:hover,.actions button:hover{transform:none}
}

@media (max-width:640px){
  :root{--pad:16px}
  .top{padding-top:calc(16px + env(safe-area-inset-top))}
  .logo small{display:block;font-size:13px}
  /* the back arrow sits top right, level with the logo, clear of the page title */
  .back.pin{top:calc(14px + env(safe-area-inset-top));right:16px;padding:12px 18px!important}
  .headrow{margin-bottom:28px!important}
  .headrow .back{margin:0}
  main h1,.headrow h1{font-size:clamp(36px,11vw,52px);margin-bottom:28px}
  .ov-head h2,#overview h2{font-size:clamp(44px,15vw,72px)}

  /* tap targets of at least 44px */
  .seg button,.filters button{min-height:44px;padding:0 16px}
  .controls button{min-height:40px}
  input[type=range]{height:44px}
  .pill,.actions button{min-height:48px}

  /* ---- home: a bigger diamond, with the turn buttons floating over its corners ---- */
  .p-work{--s:clamp(150px,min(84vw,46svh),470px)}
  .deck{position:relative;grid-template-columns:minmax(0,1fr);padding:0}
  .deck .turn{position:absolute;bottom:8px;z-index:2;width:48px;height:48px}
  .deck .turn[data-turn=left]{left:var(--pad)}
  .deck .turn[data-turn=right]{right:var(--pad)}
  .foot{gap:6px 14px;padding:14px 0 calc(16px + env(safe-area-inset-bottom))}
  #index{font-size:56px}
  #label{font-size:clamp(22px,7vw,30px)}
  #status{font-size:14px}
  .grid{gap:22px}
  .card-title,.card-num{font-size:18px}
  #intro .hint{padding:16px 24px 16px 18px}

  /* ---- Octalysis: the octagon fills the width, its labels become a list beneath it ---- */
  .stage{width:100%;max-width:420px;margin:8px auto 0;aspect-ratio:auto;padding-top:calc(100% + 18px);
    display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .stage svg{inset:0 0 auto;height:auto;aspect-ratio:1}
  .stage .lab,.stage .lab.r,.stage .lab.c,.stage .lab[data-n]{position:static;transform:none;max-width:none;width:auto;
    display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:12px;
    background:rgba(42,29,26,.07);font-size:13px;text-align:left}
  .stage .lab::before{content:attr(data-n);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
    background:var(--char);color:var(--cream);font-size:12px}
  .stage .lab.on{background:rgba(142,31,58,.14)}
  .lab[data-n="1"]{order:1}.lab[data-n="2"]{order:2}.lab[data-n="3"]{order:3}.lab[data-n="4"]{order:4}
  .lab[data-n="5"]{order:5}.lab[data-n="6"]{order:6}.lab[data-n="7"]{order:7}.lab[data-n="8"]{order:8}
}

/* ---- games: keep the board and its buttons on one screen ---- */
@media (max-width:640px){
  .game{gap:18px}
  /* lake: the boats as a 2 x 2 grid, so the Fish buttons sit right under the lake */
  .boats{grid-template-columns:1fr 1fr}
  .boat{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;gap:6px}
  .boat .hull{display:none}
  .boat b{font-size:14px}
  .boat .tot{font-size:18px}
  /* rock paper scissors: three compact throw buttons side by side */
  .choose button{padding:12px;font-size:16px}
  .choose button svg{width:28px;height:28px}
  /* ultimatum: the mouse's health bar across the full width */
  .mouse{grid-column:1/-1;justify-self:stretch;padding:10px 12px;gap:10px}
  .mouse svg{width:42px;height:32px}
  .mouse .lbl b{white-space:nowrap;font-size:12px}
}

/* wording for touch screens: "Tap" instead of "Click" */
.touch{display:none}
@media (pointer:coarse){.touch{display:inline}.no-touch{display:none}}