/* A phone held sideways (js/ui/phone.js sets `ph` on <html>: a touch screen, 460px high or less, landscape).
   The same pages and HUD, restyled for the room there is: icons and short forms, steps instead of long
   sheets, the status rail as a pill, the player card as a chip. Loaded last, so it wins by the `:root.ph`
   prefix, never by !important. Nothing outside the gate changes. docs/UI-GUIDE.md: Phone landscape. */

/* ---- icons and the short forms only this layout shows */
.ph-i, .ph-micro { display: none; }
:root.ph .ph-i { display: inline-block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
:root.ph .ph-i.f { fill: currentColor; stroke: none; }
:root.ph .ph-arrow { display: none; }

/* =================================================================== the main menu */
:root.ph #menu .logo { top: calc(12px + var(--safe-t)); }
:root.ph #menu .logo h1 { font-size: 24px; }
:root.ph .menu-center, :root.ph #menu:is([data-view="options"], [data-view="setup"]) .menu-center {
  padding: calc(48px + var(--safe-t)) calc(12px + var(--safe-r)) calc(10px + var(--safe-b)) calc(12px + var(--safe-l));
}
:root.ph #main-menu { grid-template-columns: repeat(3, 112px); gap: 8px; width: auto; }
:root.ph #main-menu > .main-btn { grid-column: auto; margin-top: 0; }
/* the three modes: a card each, its icon over its name and a few words */
:root.ph #main-menu > .main-btn:nth-child(-n+3) { min-height: 106px; padding: 6px; gap: 5px; }
:root.ph #main-menu > .main-btn:nth-child(-n+3) .ph-i { font-size: 30px; color: var(--line); }
:root.ph #main-menu > .main-btn.lead .ph-i { color: #1a0f00; }
:root.ph #main-menu .main-btn b { font-size: 14px; letter-spacing: 0.05em; }
:root.ph #main-menu .main-btn small { display: none; }
:root.ph #main-menu .ph-micro { display: block; font: 500 10.5px/1 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.03em; color: var(--dim); }
:root.ph #main-menu .main-btn.lead .ph-micro { color: #4a3000; }
/* the rest: one icon row under them */
:root.ph #main-menu > .main-btn:nth-child(n+4) { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; }
:root.ph #main-menu > .main-btn:nth-child(n+4) .ph-i { font-size: 16px; color: var(--dim); }
:root.ph #main-menu > .main-btn:nth-child(n+4) b { font-size: 12.5px; }
/* the pages after it: two cards and a back row */
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) { grid-template-columns: repeat(2, 150px); gap: 8px; width: auto; justify-content: center; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) > :is(.menu-title, .main-btn.minor) { grid-column: 1 / -1; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .menu-sub, :root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn small { display: none; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn:not(.minor) { min-height: 96px; gap: 6px; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn:not(.minor) .ph-i { font-size: 28px; color: var(--line); }
:root.ph #ask-menu .main-btn.lead .ph-i { color: #1a0f00; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn b { font-size: 14px; letter-spacing: 0.02em; line-height: 1.2; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn.minor { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; }
:root.ph :is(#kind-menu, #multi-menu, #ask-menu) .main-btn.minor b { font-size: 13px; }
:root.ph [data-back] .ph-i { font-size: 16px; }

/* the corner: the login status an avatar; Coffee, Discord and the language behind one ⋯ */
:root.ph .game-settings { top: calc(8px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
:root.ph .game-settings .gs-icon { width: 36px; height: 36px; min-width: 36px; padding: 7px; position: relative; }
:root.ph .game-settings .gs-icon::after { content: ''; position: absolute; inset: -4px; }
:root.ph .gs-icons { position: relative; align-items: center; }
:root.ph .game-settings .gs-account .account-name { display: none; }
:root.ph .game-settings .gs-icon.account-chip { padding: 6px; justify-content: center; }
:root.ph .game-settings .gs-icons :is(.gs-support, .gs-discord, .gs-language) { display: none; }
:root.ph .game-settings .gs-icons.ph-open :is(.gs-support, .gs-discord, .gs-language) {
  display: grid; position: absolute; top: calc(100% + 6px); background: var(--panel); border-color: var(--line-dim); z-index: 2;
}
:root.ph .game-settings .gs-icons.ph-open .gs-discord { right: 0; }
:root.ph .game-settings .gs-icons.ph-open .gs-support { right: 42px; }
:root.ph .game-settings .gs-icons.ph-open .gs-language { right: 84px; }
.ph-more { display: none; }
:root.ph .game-settings .ph-more { display: grid; background: var(--panel); border-color: var(--line-dim); }
:root.ph .game-settings .ph-more .ph-i { font-size: 20px; }

/* the news TV: a LIVE chip at the foot; a tap opens the television above it */
.ph-live { display: none; }
:root.ph #menu[data-view="home"] .ph-live {
  position: absolute; z-index: 2; right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); display: flex; align-items: center; gap: 8px;
  height: 34px; max-width: 250px; padding: 0 10px; border: 1px solid var(--line-dim); background: var(--panel); color: var(--ink); cursor: pointer;
  font: 600 11.5px 'Chakra Petch', var(--cjk), sans-serif; pointer-events: auto;
}
:root.ph .ph-live b { padding: 2px 6px; border-radius: 2px; background: #d4262f; color: #fff; font-size: 10px; letter-spacing: 0.08em; }
:root.ph .ph-live-t { min-width: 0; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #cfe0f7; font-weight: 500; }
:root.ph .ph-live .ph-i { color: var(--line); transition: rotate 0.15s; }
:root.ph .ph-live[aria-expanded="true"] .ph-i { rotate: 180deg; }
:root.ph .menu-news { display: none; }
:root.ph #menu.ph-tv .menu-news {
  display: flex; top: auto; left: auto; right: calc(10px + var(--safe-r)); bottom: calc(52px + var(--safe-b)); width: 228px; height: auto;
}
:root.ph #menu.ph-tv .menu-news > .news { width: 100%; }