/* A fixed teaching viewport: move the table camera, never the page. */
.fg-camera-nav{display:none}
#rule-page.fg-mobile{box-sizing:border-box;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;border:0;border-radius:0;overflow:hidden;padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#rule-page.fg-mobile>.modal-head{padding:6px 12px;min-height:44px;box-sizing:border-box;flex:none}
#rule-page.fg-mobile>.modal-head h2{font-size:16px!important}
#rule-page.fg-mobile #close-rules{min-height:32px;padding:5px 8px;font-size:12px}
#rule-page.fg-mobile>.rg-toolbar{padding:3px 10px;gap:8px}
#rule-page.fg-mobile #rg-switch button,#rule-page.fg-mobile #rg-progress button{min-height:34px}
#rule-page.fg-mobile>.modal-body{display:flex;flex:1;min-height:0;padding:0 12px;overflow:hidden;scrollbar-gutter:auto;overscroll-behavior:contain}
#rule-page.fg-mobile #rg-guide{display:flex;max-width:none;min-height:0;margin:0}
#rule-page.fg-mobile .rg-stage{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;padding:0;margin:0}
#rule-page.fg-mobile .rg-step-heading,#rule-page.fg-mobile .fg-focus-caption{display:none}
#rule-page.fg-mobile .fg-toolbar{position:static;flex:none;min-height:36px;margin:0;padding:3px 0;box-sizing:border-box;align-items:center}
#rule-page.fg-mobile .fg-toolbar>span{display:none}
#rule-page.fg-mobile .fg-toolbar>div{width:100%;flex-wrap:nowrap;align-items:center;justify-content:end;gap:6px}
#rule-page.fg-mobile .fg-toolbar button{font-size:12px;line-height:1.25;min-height:30px;padding:4px 7px}
#rule-page.fg-mobile .fg-toolbar [data-fg-whole]{margin-left:auto;flex:none}
#rule-page.fg-mobile .rg-figure{position:relative;flex:1;min-height:120px;width:100%;margin:0;overflow:hidden;border-radius:12px;background:var(--sz-table);border:1px solid var(--line);isolation:isolate}
#rule-page.fg-mobile .fg-board{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;border:0;border-radius:0;padding:8px;transform-origin:0 0;will-change:transform}
#rule-page.fg-mobile .fg-board .fg-center{margin:6px 0;padding:6px 0}
#rule-page.fg-mobile .fg-board .fg-hand{min-height:80px}
#rule-page.fg-mobile .fg-board[data-step="5"] .fg-wounds{height:78px;min-height:78px}
#rule-page.fg-mobile .fg-board[data-step="5"] .fg-wounds .fg-zone-title{position:static;max-width:none;flex-direction:row;justify-content:center;align-items:center}
#rule-page.fg-mobile .fg-board[data-step="5"] .fg-wound-cards{height:50px;min-height:50px}
#rule-page.fg-mobile .fg-wound-cards .fg-card-hit{display:grid;place-items:center;min-width:44px;min-height:46px}
#rule-page.fg-mobile button.fg-stock{min-width:44px;min-height:48px}
#rule-page.fg-mobile .fg-camera-nav{display:flex;flex:none;justify-content:center;gap:4px;padding:4px 0}
#rule-page.fg-mobile .fg-camera-nav button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;min-width:78px;padding:4px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:400;line-height:1.4}
#rule-page.fg-mobile .fg-camera-nav button[aria-pressed=true]{color:var(--ink);background:var(--sz-table);border-color:var(--line);font-weight:600}
#rule-page.fg-mobile .fg-camera-nav i{position:relative;width:9px;height:13px;border:1px solid currentColor;border-radius:2px;opacity:.7}
#rule-page.fg-mobile .fg-camera-nav i:after{content:'';position:absolute;left:1px;right:1px;height:3px;background:currentColor}
#rule-page.fg-mobile [data-fg-camera=rival] i:after{top:1px}
#rule-page.fg-mobile [data-fg-camera=center] i:after{top:4px}
#rule-page.fg-mobile [data-fg-camera=own] i:after{bottom:1px}
#rule-page.fg-mobile .fg-camera-nav .has-target{color:var(--sz-flower-deep);border-style:dashed;border-color:var(--sz-flower-deep)}
#rule-page.fg-mobile .fg-camera-nav small{font-size:14px;line-height:1}
#rule-page.fg-mobile .fg-camera-nav small:empty{display:none}
#rule-page.fg-mobile .fg-slot.fg-coach{flex:none;display:block;margin:0;min-height:0;padding:10px 2px 12px;background:transparent;border:0;border-radius:0;box-shadow:none}
#rule-page.fg-mobile .fg-coach-copy{gap:5px}
#rule-page.fg-mobile .fg-coach strong{font-size:16px;line-height:1.4}
#rule-page.fg-mobile .fg-coach-copy>span{font-size:13px;line-height:1.5}
#rule-page.fg-mobile .fg-coach>button{display:none}
#rule-page.fg-mobile .fg-coach>button[data-fg-action=swap-reset],#rule-page.fg-mobile .fg-coach>button[data-fg-action=refill-replay]{display:inline-block;min-height:32px;margin-top:4px;padding:4px 8px;font-size:12px;background:transparent;color:var(--ink);border-color:var(--line)}
#rule-page.fg-mobile #rg-navigation{padding:7px 12px;gap:8px;min-height:58px;box-sizing:border-box}
#rule-page.fg-mobile #rg-navigation>button{font-size:14px;min-height:44px;padding:8px 12px}
#rule-page.fg-mobile #rg-navigation>span{font-size:12px;min-width:0}
#rule-page.fg-mobile #rg-navigation .rg-reference-action{margin:0;padding:0}
#rule-page.fg-mobile #rg-navigation [data-rg-ranks]{min-height:40px;padding:6px;border:0;background:transparent;color:var(--muted);font-size:12px}
#rule-page.fg-mobile #rg-navigation [data-rg-ranks] i{margin-left:3px}
#rule-page.fg-mobile .rg-rank-panel{position:absolute;inset:0;z-index:5;box-sizing:border-box;margin:0;padding:12px;background:var(--sz-paper);border:0;border-radius:0;overflow:auto;overscroll-behavior:contain}
#rule-page.fg-mobile .rg-rank-panel p{font-size:12px;line-height:1.5}
#rule-page.fg-mobile .rg-rank-panel th,#rule-page.fg-mobile .rg-rank-panel td{padding:8px;font-size:13px}
@media(max-height:660px){#rule-page.fg-mobile .fg-coach strong{font-size:14px}#rule-page.fg-mobile .fg-coach-copy>span{font-size:12px}#rule-page.fg-mobile .fg-slot.fg-coach{padding:6px 2px 8px}#rule-page.fg-mobile .fg-camera-nav{padding:2px 0}}
/* Landscape keeps a generous camera on the left and narration on the right. */
@media(min-width:601px) and (max-height:500px){
 #rule-page.fg-mobile>.modal-head{min-height:38px;padding-block:3px}
 #rule-page.fg-mobile .rg-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);grid-template-rows:34px minmax(0,1fr) 34px;column-gap:14px}
 #rule-page.fg-mobile .fg-toolbar{grid-column:1/-1;grid-row:1}
 #rule-page.fg-mobile .rg-figure{grid-column:1;grid-row:2/4;min-height:0;height:100%}
 #rule-page.fg-mobile .fg-camera-nav{grid-column:2;grid-row:3}
 #rule-page.fg-mobile .fg-slot.fg-coach{grid-column:2;grid-row:2;align-self:center}
 #rule-page.fg-mobile .fg-wounds .fg-zone-title{max-width:100px}
}