/* The pause menu in #pausePanel (task U1, src/ui/pausemenu.js). The
   .panelOverlay / .panelCard base rules are in styles.css; this file only
   dresses what goes inside.

   SIX BIG TILES on a 3 x 3 grid - RESUME is the big one, two by two, top left:

       +-----------+-------+
       |           | RESET |
       |  RESUME   +-------+
       |           | PLANE |
       +-----+-----+-------+
       | MAP | BOSS| RACE  |
       +-----+-----+-------+
       FIX THE CITY  SETTINGS  SOUND  HOW TO FLY

   Every tile is a picture over ONE word, and no tile is ever under 100 px on
   an iPad or 88 px on a phone (test/browser/pause.spec.js measures them). */

.pauseCard{width:min(580px,94vw);max-height:94vh;padding:20px 22px 22px;touch-action:pan-y}
.pauseCard .pauseTitle{margin-bottom:14px}

.pauseTiles{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:132px;gap:12px}
.pTile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-width:0;min-height:100px;border:2px solid var(--edge);border-radius:22px;color:var(--ink);
  background:linear-gradient(180deg,rgba(48,82,140,.62),rgba(20,36,68,.78));
  box-shadow:0 5px 0 rgba(4,8,16,.6),0 10px 22px rgba(0,0,0,.35);
  transition:transform .08s,border-color .15s}
.pTile b{font-size:50px;line-height:1;font-weight:400}
.pTile span{font-size:18px;font-weight:900;letter-spacing:.12em}
.pTile:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(4,8,16,.6)}
.pTile:focus-visible,.pSmall:focus-visible,.pWorld:focus-visible,.pFoot button:focus-visible{
  outline:3px solid #fff;outline-offset:2px}

/* RESUME: the way back to the fun, so the biggest and the brightest. */
.pTile-resume{grid-column:1 / span 2;grid-row:1 / span 2;border-color:transparent;color:#04121c;
  background:linear-gradient(180deg,#7dffa6,#1fc25a);
  box-shadow:0 7px 0 #0f7a36,0 14px 28px rgba(0,0,0,.45)}
/* Its picture is a plain dark triangle drawn here, not the emoji: the same on
   every device, and it takes the tile's own ink. */
.pTile.pTile-resume b{width:0;height:0;font-size:0;border-style:solid;border-width:50px 0 50px 84px;
  border-color:transparent transparent transparent #04121c;margin-left:18px}
.pTile-resume span{font-size:30px;letter-spacing:.16em}
.pTile-resume:active{box-shadow:0 2px 0 #0f7a36}

/* A tile that cannot work today (no boss plugin, no race): greyed, asleep. */
.pTile.off{opacity:.38;filter:grayscale(1);box-shadow:none;cursor:default}
.pTile .pAsleep{display:none;position:absolute;top:8px;right:10px;font-size:20px;font-style:normal}
.pTile.off .pAsleep{display:block}

/* The small row: grown-up things. Still fat enough for a thumb (64 px). */
.pauseSmall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.pSmall{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;
  padding:8px 4px;border:2px solid var(--edge);border-radius:14px;color:var(--dim);background:rgba(10,18,34,.5)}
.pSmall b{font-size:22px;line-height:1;font-weight:400}
.pSmall span{font-size:11px;font-weight:800;letter-spacing:.08em;text-align:center;line-height:1.25}
.pSmall:active{transform:scale(.96)}
.pSmall.done{border-color:#5ff08a;color:#5ff08a;background:rgba(95,240,138,.12)}

/* ---- MAP and BOSS: the tiles step aside for a few choices and BACK ---- */
.pAsk{text-align:center;font-size:13px;font-weight:900;letter-spacing:.16em;color:var(--accent);margin:0 0 12px}
.pWorlds{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:104px;gap:10px}
.pWorld{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:0;min-height:88px;border:2px solid var(--edge);border-radius:18px;color:var(--ink);
  background:linear-gradient(180deg,rgba(48,82,140,.55),rgba(20,36,68,.72))}
.pWorld b{font-size:36px;line-height:1;font-weight:400}
.pWorld span{font-size:12px;font-weight:900;letter-spacing:.08em;text-align:center}
.pWorld em{font-size:8px;font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--dim)}
.pWorld.sel{border-color:#ffd24a;background:rgba(255,210,74,.2);box-shadow:0 0 0 3px rgba(255,210,74,.25)}
.pWorld.here{opacity:.5}
.pWorld:active{transform:scale(.96)}
.pWarn{margin-top:14px;text-align:center;font-size:16px;font-weight:900;letter-spacing:.1em;color:#ffd24a}
.pWarnSub{margin-top:4px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--dim)}
.pFoot{display:flex;gap:10px;margin-top:14px}
.pFoot>*{flex:1;text-align:center;min-height:64px}
.pFoot .pGo{flex:2}
.pFoot .pGo:disabled{filter:grayscale(1);opacity:.45;box-shadow:none}

.pBosses{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;gap:12px}
.pBossPick b{font-size:64px}
.pBoss-both b{font-size:46px;letter-spacing:-.08em}
.pBoss-cat{border-color:rgba(255,160,90,.6)}
.pBoss-dog{border-color:rgba(150,200,255,.6)}
.pBoss-both{border-color:rgba(255,210,74,.7)}

/* ---- a phone held upright: three narrow columns, everything a bit lower ---- */
@media (orientation:portrait) and (max-width:480px){
  .pauseCard{padding:14px}
  .pauseTiles{grid-auto-rows:104px;gap:8px}
  .pTile{border-radius:18px;gap:5px}
  .pTile b{font-size:40px}
  .pTile span{font-size:14px;letter-spacing:.08em}
  .pTile.pTile-resume b{border-width:38px 0 38px 64px;margin-left:14px}
  .pTile-resume span{font-size:24px}
  .pauseSmall{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
  .pSmall{flex-direction:row;gap:8px;min-height:56px}
  .pWorlds{grid-template-columns:repeat(3,1fr);grid-auto-rows:92px;gap:8px}
  .pWorld b{font-size:30px}
  .pWorld span{font-size:11px;letter-spacing:.04em}
  .pWarn{font-size:14px;letter-spacing:.06em}
  .pBosses{grid-auto-rows:130px;gap:8px}
  .pBossPick b{font-size:50px}
  .pBoss-both b{font-size:34px}
}

/* ---- a phone on its side: no room for three rows, so ONE row of six (RESUME
   is two columns wide), the small row on a single line under it ---- */
@media (orientation:landscape) and (max-height:480px){
  .pauseCard{width:min(820px,96vw);padding:10px 14px 12px}
  .pauseCard .pauseTitle{margin-bottom:6px;font-size:14px}
  .pauseTiles{grid-template-columns:repeat(7,1fr);grid-auto-rows:108px;gap:8px}
  .pTile{border-radius:16px;gap:5px}
  .pTile b{font-size:38px}
  .pTile span{font-size:13px;letter-spacing:.06em}
  .pTile-resume{grid-column:1 / span 2;grid-row:1}
  .pTile.pTile-resume b{border-width:22px 0 22px 38px;margin-left:8px}
  .pTile-resume span{font-size:18px}
  .pauseSmall{gap:8px;margin-top:8px}
  .pSmall{flex-direction:row;gap:8px;min-height:48px;padding:4px 6px}
  .pAsk{margin-bottom:6px;font-size:11px}
  .pWorlds{grid-template-columns:repeat(8,1fr);grid-auto-rows:92px;gap:6px}
  .pWorld b{font-size:28px}
  .pWorld span{font-size:10px;letter-spacing:.02em}
  .pWarn{margin-top:8px;font-size:13px}
  .pWarnSub{margin-top:2px}
  .pFoot{margin-top:8px}
  .pFoot>*{min-height:48px}
  .pBosses{grid-auto-rows:120px}
  .pBossPick b{font-size:48px}
  .pBoss-both b{font-size:36px}
}