/* 選項 on a phone held sideways (css/phone.css has the gate and the icons): the tabs an icon rail down the left,
   the settings on the full height, rows of label and control. The page is the main menu's and the pause menu's. */
.ph-legend { display: none; }
:root.ph #menu[data-view="options"] .logo { display: none; }
:root.ph #menu[data-view="options"] .menu-center { padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l)); }
:root.ph .options, :root.ph .options[data-tab="controls"] { width: min(var(--w-xl), 100%); height: 100%; max-height: 100%; grid-template-rows: none; grid-template-columns: 84px minmax(0, 1fr); }
:root.ph .pause-options .options { max-height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b)); height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b)); }
:root.ph .options-head { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 0; border-right: 1px solid var(--line-dim); }
:root.ph .options-head .menu-title { display: none; }
:root.ph .options-head .ghost.small { display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; font-size: 0; margin-bottom: 4px; }
:root.ph .options-head .ghost.small .ph-i { width: 18px; height: 18px; }
:root.ph .opt-tabs { order: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
:root.ph .opt-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 72px; min-height: 54px; padding: 4px 2px; border: 1px solid transparent; background: none; color: var(--dim); font: 700 11px/1.1 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0; word-break: keep-all; overflow-wrap: normal; white-space: nowrap; }
:root.ph .opt-tabs button .ph-i { font-size: 21px; }
:root.ph .opt-tabs button[aria-pressed="true"] { background: rgba(47, 210, 255, 0.16); border-color: var(--line); color: var(--ink); box-shadow: none; }
:root.ph .opt-tabs button[aria-pressed="true"] .ph-i { color: var(--line); }

/* the settings: the full height, rows of label and control */
:root.ph .options-body { padding: 4px 18px 12px; }
:root.ph .options-body h3 { margin: 10px 0 8px; font-size: 12px; }
:root.ph .options-body h3:first-child { display: flex; align-items: center; height: 36px; margin: 0 0 4px; padding: 0; border-bottom: 0; font-size: 13px; }
:root.ph .options .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
:root.ph .options .row .seg { flex: none; grid-auto-columns: minmax(48px, auto); }
:root.ph .options .seg button { min-height: 38px; padding: 0 12px; font-size: 12.5px; }
:root.ph .options .seg.wrap { grid-template-columns: repeat(4, minmax(48px, auto)); }
:root.ph .options #opt-quality { max-width: 460px; }
:root.ph .options #opt-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
:root.ph .options #opt-extras .row, :root.ph .options #opt-extras .label { min-width: 0; }
:root.ph .options #opt-extras .label { flex: 1; white-space: normal; }
:root.ph .options #opt-extras .row:has(.seg > :nth-child(4)) { grid-column: 1 / -1; }
:root.ph .options #opt-extras [data-setting="upscaling"], :root.ph .options .upscale-note { grid-column: 1 / -1; }
:root.ph .options .upscale-note { font-size: 11px; margin: 4px 0 0; }
:root.ph .options .label { font-size: 12.5px; }
:root.ph .options .ghost:not(.small) { margin-top: 10px; }
:root.ph .options .opt-volume { margin-top: 4px; }
:root.ph .options input[type="range"] { height: 32px; }
:root.ph .options .opt-text { font-size: 12px; }

/* Controls: the touch tab (a legend of the on-screen buttons) first, then the keyboard and the pad */
:root.ph .options .opt-subtabs { margin-top: 8px; max-width: 520px; }
:root.ph .options .opt-subtabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
:root.ph .options .opt-subtabs button .ph-i { font-size: 15px; }
:root.ph .ph-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.ph-legend li { display: flex; align-items: center; gap: 10px; font: 600 12.5px/1.25 'Chakra Petch', var(--cjk), sans-serif; color: #cfe0f7; }
.ph-key { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid var(--line-dim); border-radius: 50%; background: rgba(9, 16, 30, 0.7); font: 800 15px 'Chakra Petch', sans-serif; color: var(--ink); }
.ph-key .ph-i { font-size: 17px; }
.ph-key i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }