/* 6.76 Stage 2 only. Reflow existing UI/art; no global desktop/tablet-landscape
   overrides, new frame clock, blur, renderer scaling or graphics asset policy. */
body.responsive676 { --stack676-gap:18px; }
body.responsive676 #game-hud { --ui-font:13px; }
body.responsive676 #game-hud .game-top { left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));gap:8px; }
body.responsive676 #game-hud .game-brand { font-size:13px;max-width:calc(100% - 148px);letter-spacing:.03em;line-height:1.35; }
body.responsive676 #game-hud .game-brand>span { margin-top:5px; }
body.responsive676 #game-hud .game-toolbar { gap:6px;flex:0 0 auto; }
body.responsive676 #game-hud .game-top .game-toolbar button { min-height:40px;padding:8px 12px!important;font-size:12px!important; }
body.responsive676 #game-hud .game-top .game-toolbar [data-ui="help-mode671"] { min-width:66px;margin-right:0;gap:4px; }
body.responsive676 #game-hud .game-brand .help671-mode-note { font-size:11px; }
/* 6.82 hid the title text in-game (visibility:hidden) because the page scrolls UNDER this fixed strip
   and the title has no backdrop, so its words landed on pyramid tiles, panel headings and creature
   cards. 6.88: the owner wants the title back on every device, so it is VISIBLE again and instead
   travels with the Help and Menu plates (the hud-away682 rules below): at the landing position it
   sits in the strip's own band above the pyramid heading (the band ends at 68 css px, the heading
   starts at 70 or 80), and the moment the page travels down it leaves with the plates, so it can never
   land on scrolled content. The box still fills the slot beside the plates (flex, min-width 0, no
   max-width) because it is the home of the help-mode note, which sits inside that slot on an opaque
   plate of the same slate it used to tint; while help mode is on the note covers the title's place
   and the title's own glyphs are made transparent under it (the note sets its own colour), so no two
   texts ever print over each other. tests/stage6-88-cards-title-tablet.test.mjs fails if any sheet
   ever again hides .game-brand outside the hud-away682 slide. */
body.responsive676.map64-enabled #game-hud .game-brand { flex:1 1 auto;min-width:0;max-width:none; }
body.responsive676.map64-enabled #game-hud .game-brand .help671-mode-note { top:0;left:0;width:100%;margin:0;background:#22353a; }
body.responsive676.map64-enabled.help-mode671-on #game-hud .game-brand,
body.responsive676.map64-enabled.help-mode671-on #game-hud .game-brand>span { color:transparent;text-shadow:none; }
/* 6.82: the Help and Menu plates stand aside while the page travels down. At most resting positions
   they sat on a pyramid tile, a panel heading or a creature card (the owner's shots: the right-most
   tile, the Buzzbolt card). hud-away682 is published by map-page.mjs from the scroll its frame already
   reads (hudAway682: travel down hides them, any upward swipe or the top of the page brings them back,
   the way the browser's own toolbar behaves, so Menu is always one small swipe away), and only for a
   finger on a responsive layout. Until that class is published these two rules change nothing: nothing
   else ever moves or fades the toolbar or the title. 6.88: the move is on the toolbar and on the TITLE
   box (which carries the help-mode note inside it), never on .game-top, whose inline translateY is
   glass-sections646's 90 to 94% header shift. The distance is the element's own height, the strip's own
   top and that 20px shift, plus 8px to spare, so the plates and the title end above the viewport even
   under a notch and the tutorial mask drops its Menu hole (clipped() returns null). visibility follows
   the fade out, so a hidden plate is neither tappable nor focusable, and it returns at once on the way
   back in. */
body.responsive676.map64-enabled #game-hud .game-top .game-toolbar,
body.responsive676.map64-enabled #game-hud .game-brand { transition:transform .22s ease,opacity .22s ease,visibility 0s linear 0s; }
body.responsive676.map64-enabled.hud-away682 #game-hud .game-top .game-toolbar,
body.responsive676.map64-enabled.hud-away682 #game-hud .game-brand { transform:translateY(calc(-100% - 28px - max(8px,env(safe-area-inset-top))));opacity:0;visibility:hidden;pointer-events:none;transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s; }
/* 6.88: the plate lane (responsive676.mjs plateLanePolicy688). The page rows end --plate-lane688 short of
   the right edge while the zoom plates are on (body.touchzoom687); the pyramid box is centred by
   map-page.css, so it is shifted left by half the difference between the lane and the layout's own
   margin (26 px, 22 px on a narrow phone), which puts its left edge back on that margin. */
body.responsive676.touchzoom687.map64-enabled #game-hud .draft-corner { left:calc(50% - (var(--plate-lane688,26px) - 26px) / 2); }
body.responsive676.touchzoom687.responsive676-narrow.map64-enabled #game-hud .draft-corner { left:calc(50% - (var(--plate-lane688,22px) - 22px) / 2); }
body.responsive676.map64-enabled #game-hud .draft-corner { max-width:none; }
body.responsive676.map64-enabled #game-hud .draft-corner .draft-heading { height:44px; }
body.responsive676 #game-hud .draft-heading>div>strong { font-size:14px; }
body.responsive676 #game-hud .draft-heading p { font-size:11px;margin:5px 0; }
body.responsive676.map64-enabled #game-hud .pyramid-help { height:34px;box-sizing:border-box;font-size:12px;line-height:16px;padding:6px 2px 0;white-space:normal; }
body.responsive676.responsive676-narrow.map64-enabled #game-hud .pyramid-help { height:42px;font-size:11px;line-height:15px; }
/* The same actual section frames, now with usable cards rather than narrow tiles. */
body.responsive676 #game-hud .hand-panel { border-width:10px!important;border-image-width:10px!important;padding:6px!important; }
body.responsive676 #game-hud .hand-panel h2 { font-size:clamp(12px,2vw,18px)!important;line-height:1.3;overflow-wrap:anywhere;margin:0 0 10px!important; }
/* 6.88: compact, uniform player cards. The 6.76 two-column grid made every card half a panel wide
   (about 140 x 165 css px on a phone in landscape, 155 x 180 in portrait: one row filled 40% of the
   screen, and deeds, square, and creatures, 1/1.15, were two sizes). Deeds and creatures now share
   one grid rule: auto-fill columns at least 72 px wide, as many as fit, each a fraction of the row
   (1fr), capped at 120 px by the card's own max-width (the owner's ceiling), so a wider panel gets
   more columns, never bigger cards. The max is 1fr and not 120px ON PURPOSE: auto-fill counts its
   repetitions by the max track size when that is definite (CSS Grid 7.2.3.2), so minmax(72px,120px)
   put two 120 px tracks in a 262 px grid and left the rest empty (measured); with 1fr the count
   follows the 72 px minimum. The grid is the panel's content box less the frame (10), the padding
   (6) and the scroll padding (1) each side: 262 px at 390 wide with the plate lane, three 83.3 px
   cards; 320 px per panel at 844 wide (landscape, two panels), four 75.5 px cards, the owner's
   "four or more per row", which is why the minimum is 72 and not 76; 522 px in a 600 px window,
   six 82 px cards. One aspect for both kinds, 1/1.2 (deeds were 1/1, creatures 1/1.15): tall enough
   for the picture, the name and a two-line location at 72 px, and the frame arts are 700 x 472
   stretched either way. Every card is its own container, so the type sizes follow the card's width
   (cqw), not the panel's; names and locations wrap instead of clipping, and the box grows past the
   ratio rather than cut a line (overflow visible, so the content minimum applies). Rows stretch, so
   a row's cards are one height. */
body.responsive676 #game-hud .hand-deeds,
body.responsive676 #game-hud .hand-creatures { display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));justify-content:start;align-items:stretch;gap:6px; }
body.responsive676 #game-hud .hand-critter,
body.responsive676 #game-hud .hand-deed.square-deed { container-type:inline-size;width:auto;max-width:120px;min-width:0;min-height:44px;height:auto;aspect-ratio:1/1.2;padding:10% 8% 8%;gap:2px;background-size:100% 100%;font-size:12px;overflow:visible; }
body.responsive676 #game-hud .hand-critter { justify-content:center; }
body.responsive676 #game-hud .hand-critter strong,
body.responsive676 #game-hud .hand-deed.square-deed .deed-title strong { font-size:clamp(10px,14cqw,13px);line-height:1.12;margin:2px 0 0;white-space:normal;overflow-wrap:anywhere;max-width:100%; }
body.responsive676 #game-hud .hand-critter small,
body.responsive676 #game-hud .hand-deed.square-deed small { font-size:clamp(9px,12cqw,11.5px);line-height:1.2;margin:1px 0 0;white-space:normal;overflow-wrap:anywhere;max-width:100%; }
body.responsive676 #game-hud .hand-body { display:block;width:60%;height:auto;max-width:none;max-height:46%;aspect-ratio:1;object-fit:contain;flex:0 1 auto; }
body.responsive676 #game-hud .hand-deed.square-deed .deed-title { gap:3px; }
body.responsive676 #game-hud .hand-deed.square-deed .deed-scroll-icon { width:clamp(14px,22cqw,22px);height:clamp(14px,22cqw,22px); }
body.responsive676 #game-hud .hand-deed.square-deed .deed-region-icon { width:clamp(12px,18cqw,18px);height:clamp(14px,22cqw,22px); }
body.responsive676 #game-hud .hand-category-title { font-size:clamp(11px,2.8cqw,14px);letter-spacing:.025em;gap:5px; }
body.responsive676 #game-hud .hand-category-icon { width:22px;height:24px; }
body.responsive676 #game-hud .hand-class-icon { width:clamp(12px,20cqw,18px);height:auto;aspect-ratio:18/20;top:7%;left:7%; }
body.responsive676 #game-hud .hand-power { top:7%;right:7%;width:clamp(14px,22cqw,18px);height:clamp(14px,22cqw,18px);font-size:clamp(9px,13cqw,12px); }
body.responsive676 #game-hud.sidebar613-enabled .sidebar613-stacked { font-size:14px; }
body.responsive676 #game-hud.sidebar613-enabled .game-sidebar { gap:18px; }
body.responsive676 #game-hud.sidebar613-enabled .fortune-button,
body.responsive676 #game-hud.sidebar613-enabled .utility-links button,
body.responsive676 #game-hud.sidebar613-enabled .sidebar613-action { min-height:40px; }
/* Fixed Baron strip. Keep the portrait in BOTH phone orientations. */
body.responsive676 .tour666 .tour666-bar { left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));grid-template-columns:44px minmax(0,1fr) auto;gap:8px;border-width:10px;border-image-width:10px;min-height:90px;padding:5px 8px; }
body.responsive676 .tour666 .tour666-face { display:block;width:42px;height:52px;object-fit:contain;align-self:center; }
body.responsive676 .tour666 .tour666-title { font-size:14px;line-height:1.2;margin-left:6px; }
body.responsive676 .tour666 .tour666-kicker { font-size:9px;letter-spacing:.6px; }
body.responsive676 .tour666 .tour666-task { font-size:13px;line-height:1.3;margin-top:4px;min-height:0; }
/* 6.82: the narration line grows to fit instead of being cut mid-sentence. The 2.7em cap
   (two lines; one line in landscape) clipped the second sentence with no ellipsis, and the only
   way to read on was an invisible inner scroll. The cap is now a share of the viewport sized so
   the whole strip stays within about 40% of the screen with the longest task and caption; past
   it the line scrolls in place. The scroll shadows are the element's own background: the cream
   covers travel WITH the text (local) and hide the fixed edge shadows (scroll) only when that edge
   of the text is reached, so a shadow shows exactly when there is more to read (each cover is solid
   for the full 10px height of the shadow it has to hide). The covers need a
   flat colour to match, and the painted parchment is not flat (a cream sampled from it still showed
   as a faint band), so the line sits in its own slightly lighter caption well of that same cream;
   the -6px side margins keep its text aligned with the task above. The controls are outside this
   element and never move. vh first as the fallback for engines without dvh. */
body.responsive676 .tour666 .tour667-subtitles { font-size:11px;line-height:1.3;margin:4px -6px 0;padding:2px 6px;border-radius:5px;max-height:22vh;max-height:22dvh;overflow-y:auto;overscroll-behavior:contain;box-shadow:inset 0 0 0 1px rgba(98,91,73,.14);background:linear-gradient(#f4ead0 50%,rgba(244,234,208,0)) center top/100% 20px no-repeat local,linear-gradient(rgba(244,234,208,0),#f4ead0 50%) center bottom/100% 20px no-repeat local,radial-gradient(farthest-side at 50% 0,rgba(72,58,36,.45),rgba(72,58,36,0)) center top/100% 10px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(72,58,36,.45),rgba(72,58,36,0)) center bottom/100% 10px no-repeat scroll #f4ead0; }
body.responsive676 .tour666 .tour666-controls { gap:3px; }
body.responsive676 .tour666 button { min-height:36px;padding:6px 9px; }
body.responsive676 .tour666 button.primary { min-width:65px;font-size:13px; }
body.responsive676.responsive676-narrow .tour666 .tour666-bar { grid-template-columns:38px minmax(0,1fr);min-height:120px;gap:5px 7px; }
body.responsive676.responsive676-narrow .tour666 .tour666-face { grid-column:1;grid-row:1;width:36px;height:46px; }
body.responsive676.responsive676-narrow .tour666 .tour666-controls { grid-column:1/-1;justify-content:flex-end; }
body.responsive676.responsive676-narrow .tour666 .tour666-title { font-size:13px; }
body.responsive676.responsive676-narrow .tour666 .tour666-task { font-size:12px; }
body.responsive676.responsive676-narrow .tour666 .tour666-help { left:8px;right:8px;width:auto; }
/* Dialogs occupy the AVAILABLE viewport, never a skinny right rail. Native
   inner scroller stays scrollable, footer never collapses, no game resize. */
body.responsive676 #game-overlay { padding:12px;box-sizing:border-box; }
body.responsive676 #game-overlay.pick-world { padding:72px 12px 12px;justify-content:center; }
body.responsive676 #game-overlay .game-dialog { box-sizing:border-box;width:min(900px,100%);max-width:100%;max-height:100%;min-height:0;min-width:0;padding:10px 10px 8px;border-width:16px;border-image-width:16px;font-size:14px; }
body.responsive676 #game-overlay .game-dialog.timber-dialog { padding:10px;border-width:26px;border-image-width:26px 22px; }
body.responsive676 #game-overlay .dialog-header { gap:12px;margin-bottom:10px;min-width:0; }
body.responsive676 #game-overlay .dialog-art { width:76px;height:86px;object-fit:contain; }
body.responsive676 #game-overlay .dialog-header h2 { font-size:24px;line-height:1.15;overflow-wrap:anywhere; }
body.responsive676 #game-overlay .dialog-eyebrow { font-size:10px; }
body.responsive676 #game-overlay .dialog-content { min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain; }
body.responsive676 #game-overlay .dialog-option { min-height:44px;padding:10px 14px;font-size:14px;gap:9px; }
body.responsive676 #game-overlay .option-icon { width:28px;height:31px;object-fit:contain;flex-shrink:0; }
body.responsive676 #game-overlay .dialog-footer { flex:0 0 auto;min-height:38px;margin-top:9px;padding-top:8px;gap:6px; }
body.responsive676 #game-overlay .dialog-footer button { min-height:36px;padding:8px 12px!important; }
body.responsive676 #game-overlay .creature-live-stats { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
body.responsive676 #game-overlay .creature-stat { min-width:0; }
body.responsive676 #game-overlay .creature-stat-icon { width:28px;height:31px;object-fit:contain; }
body.responsive676 #game-overlay .creature-stat b { font-size:14px; }
body.responsive676.tutorial666-dialog-safe #game-overlay { padding-bottom:var(--tutorial666-clearance,152px); }
body.responsive676.tutorial666-dialog-safe #game-overlay .game-dialog { max-height:100%; }
/* 6.82: the page itself gets the same clearance the dialogs already use. The strip is fixed over
   the bottom of the viewport, but the map page ends 32px below its last panel, so the Battle
   chart's last rows (and the last creature cards) sat under the strip at the very end of the page
   and could not be scrolled into view. guided666 position() re-measures the LIVE strip every
   application frame and publishes --tutorial666-clearance only when it changes; this box hangs
   that many pixels below the body's JS-owned height, so the native scroll range grows by exactly
   the strip and follows it as the narration grows or shrinks. Absolute and hidden: it adds scroll
   range and nothing else, and no module's height, headroom or tailroom arithmetic changes. Only
   while the practice board's map page is showing: the variable and guided-tutorial666 are both
   removed by the tutorial's cleanup, so outside the tutorial the page is exactly as before. */
body.responsive676.guided-tutorial666.map64-active::after { content:'';position:absolute;left:0;top:100%;width:1px;height:var(--tutorial666-clearance,0px);visibility:hidden;pointer-events:none; }
/* Landscape phone: compact header/Cancel on left; scrollable choices on right.
   This is internal dialog columns, NOT a map/sidebar desktop layout. */
body.responsive676.responsive676-landscape #game-overlay.pick-world { padding-top:62px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .game-dialog { display:grid;grid-template-columns:minmax(150px,29%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:0 16px;border-width:12px;border-image-width:12px;padding:6px 8px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-header { grid-column:1;grid-row:1;align-self:start;align-items:center;margin:0;gap:8px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-art { width:58px;height:68px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-header h2 { font-size:19px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-eyebrow { font-size:8px;letter-spacing:.04em; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-content { grid-column:2;grid-row:1/3;align-self:stretch; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-footer { grid-column:1;grid-row:2;margin-top:4px;padding-top:4px;border:0; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-owner,
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-location { margin:4px 0;font-size:11px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-live-stats { grid-template-columns:repeat(4,minmax(0,1fr));gap:5px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-stat { gap:4px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-stat-icon { width:20px;height:22px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-stat small { font-size:9px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-stat b { font-size:11px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-content p { margin:4px 0;font-size:12px; }
body.responsive676.responsive676-landscape .tour666 .tour666-bar { min-height:76px;bottom:5px;padding:3px 6px;gap:6px; }
body.responsive676.responsive676-landscape .tour666 .tour666-task { font-size:12px;margin-top:2px; }
body.responsive676.responsive676-landscape .tour666 .tour666-title { font-size:13px; }
body.responsive676.responsive676-landscape .tour666 .tour667-subtitles { max-height:16vh;max-height:16dvh;font-size:10px; }
body.responsive676.responsive676-landscape .tour666 .tour666-controls { gap:2px; }
body.responsive676.responsive676-landscape .tour666 button { padding:6px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-live-stats { margin:4px 0 5px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .creature-stat { padding:3px 0 5px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-option { padding:6px 12px;min-height:42px; }
body.responsive676.responsive676-landscape #game-overlay.pick-world .dialog-options { gap:5px; }
/* Keep the existing native developer controls out of the first map-node row. */
body.responsive676 .developer-tray { transform:translateX(-50%) translateY(-40px); }
body.responsive676.guided-tutorial666 .developer-tray { visibility:hidden; }
/* On narrow phones reserve a distinct close-button lane in the existing note. */
body.responsive676 #tutorial-exit-note669 { padding-right:32px; }