/* =====================================================================================================
   PORTRAIT PHONES (html.portrait, set by main.js fit()): the stage is 720 wide and 1180-1600 tall.
   Landscape layouts stay untouched; everything here only re-places things for a phone held upright.
   ===================================================================================================== */

/* ---------- HUD: two compact rows ---------- */
html.portrait #hud { flex-wrap: wrap; height: auto; padding: 14px 16px 0; gap: 10px; row-gap: 10px; align-content: flex-start; }
html.portrait .hud-prog { flex: 1 1 120px; min-width: 120px; }
html.portrait .hud-stress { flex: 1 1 100%; width: auto; order: 5; }

/* ---------- title ---------- */
html.portrait .tt-title { left: 50%; top: 150px; transform: translateX(-50%) rotate(-4deg); text-align: center; white-space: nowrap; }
html.portrait .tt-title h1 span:first-child { font-size: 84px; }
html.portrait .tt-title h1 .five { font-size: 138px; }
html.portrait .tt-sub { margin-left: 0; }
html.portrait .tt-menu { left: 50%; top: auto; bottom: 200px; width: 470px; transform: translateX(-50%); gap: 16px; }
html.portrait .tt-menu button { font-size: 34px; padding-top: 20px; padding-bottom: 20px; }
html.portrait .tt-warn { display: none; }
html.portrait .tt-stars { right: 50%; transform: translateX(50%); bottom: 120px; font-size: 44px; }
html.portrait .tt-foot { left: 0; right: 0; bottom: 56px; text-align: center; letter-spacing: .14em; font-size: 15px; }
html.portrait .tt-gate h2 { font-size: 76px; text-align: center; line-height: 1; }
html.portrait .tt-gate p { font-size: 22px; text-align: center; padding: 0 40px; }
html.portrait .tt-gate .go { font-size: 28px; padding: 18px 40px; }

/* ---------- WarioWare stage ---------- */
/* the 960x540 microgame fills the width (x0.75) in the middle band; pastel stripes above and below */
html.portrait .ww-game { background: repeating-linear-gradient(135deg, #ffe1ee 0 28px, #fff0f6 28px 56px); }
html.portrait .ww-hostbox { top: calc(50% - 202.5px); transform: scale(.75); box-shadow: 0 0 0 6px #3a2433, 0 14px 0 6px rgba(58,36,51,.35); background: #fff7f0; }
html.portrait .ww-fuse { bottom: auto; top: calc(50% + 236px); }
html.portrait .ww-cmd .w { font-size: 112px; -webkit-text-stroke: 10px #170409; }
html.portrait .ww-cmd .i { font-size: 64px; }
html.portrait .ww-gstrip { top: calc(50% - 300px); }
html.portrait .ww-score { left: 50%; top: 200px; }
html.portrait .ww-hearts { bottom: 90px; }
html.portrait .ww-heart { font-size: 84px; }
html.portrait .ww-banner { font-size: 104px; -webkit-text-stroke: 9px var(--ink-a); white-space: normal; padding: 0 20px; }
html.portrait .ww-banner.intro { font-size: 96px; }
html.portrait .ww-scream { bottom: 220px; }
html.portrait .ww-boss .ww-bossbox { left: 40px; top: calc(50% - 220px); transform: scale(1); }
html.portrait .ww-pat { top: auto; bottom: 60px; right: 50%; transform: translateX(50%) rotate(90deg); }
html.portrait .ww-phases { left: 50%; top: 150px; transform: translateX(-50%); flex-direction: row; }

/* ---------- evening at home: notes stacked, cards in a 3-column grid ---------- */
html.portrait .hm-note { left: 20px; top: 190px; width: 330px; }
html.portrait .hm-forecast { right: 20px; top: 190px; width: 330px; }
html.portrait .hm-bank { top: 360px; }
html.portrait .hm-tray { height: auto; flex-wrap: wrap; padding: 30px 16px 26px; gap: 12px; }
html.portrait .hm-card { flex: 1 1 30%; min-height: 150px; }
html.portrait .hm-card .nm { font-size: 20px; }
html.portrait .hm-card .ds { font-size: 14px; }
html.portrait .hm-card .ft { font-size: 14px; }
/* activity windows: 880 wide -> fit the 720 stage */
html.portrait .hm-win, html.portrait.touch .hm-win { flex: none; transform: scale(.8); animation: none; }   /* the pop-in animation would override the scale */

/* ---------- panels: bigger on a phone ---------- */
html.portrait .ov-card { transform: scale(1.3); }
html.portrait .sm-wrap { transform: scale(1.22); transform-origin: 50% 40%; }
html.portrait .vm-wrap { transform: scale(1.25); }
html.portrait .ww-banner.speed, html.portrait .ww-banner.boss, html.portrait .ww-banner.over, html.portrait .ww-banner.clear { top: 27%; }