/* Card game page (menu « Cartes »): the console shell is the other menus' one, untouched
   (header « ● CHIMERA / subtitle », bezels, LCD size, keys, in every orientation). Every
   screen is drawn by PixiJS in #cg-stage, which fills the LCD glass: the landscape, the
   panels and the windows are drawn there, like the scenery and panels of the other menus. */
body#chimera-console.console-page.cardgame-page{--cg-ink:#34452b;--cg-paper:#d9e3b5}
.cardgame-page [hidden]{display:none!important}

/* The LCD holds the stage only: no padding and no scroll of its own (the screens scroll). */
body#chimera-console.console-page.cardgame-page:is(.account-page,:has(#arena)) main#cg-main.account-main{
  display:flex;flex-direction:column;padding:0;overflow:hidden;overscroll-behavior:none;scroll-padding:0}
/* The page's DOM landscape would sit under the canvas: PixiJS draws its own. */
body#chimera-console.console-page.cardgame-page #cg-main>.rpg-scene{display:none}
.cg-stage{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;background:var(--cg-paper);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* The canvas follows its box at once (stretched) until the renderer catches up (app.js). */
.cg-stage>canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.cg-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* During a match (cardgame/shell.js): the whole console grows onto its screen, which
   then fills the window, its safe areas kept; leaving the match zooms back to the console. While it
   moves, nothing takes a tap and the LCD grain (a fixed overlay the transform would carry off the
   glass) waits for its new place. */
html:is(.cg-full,.cg-zooming){overflow:hidden}
html.cg-zooming body#chimera-console.cardgame-page{pointer-events:none;will-change:transform}
html.cg-zooming body#chimera-console.cardgame-page .console-lcd-filter{visibility:hidden}
html.cg-full{background:#d9e3b5}
html.cg-full body#chimera-console.console-page.cardgame-page:is(.account-page,:has(#arena)){
  width:100%;max-width:none;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;background:#d9e3b5;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
html.cg-full body#chimera-console.console-page.cardgame-page:is(.account-page,:has(#arena)) :is(.account-header,.console-controls){display:none}
html.cg-full body#chimera-console.console-page.cardgame-page:is(.account-page,:has(#arena)) main#cg-main.account-main{
  margin:0;border:0;border-radius:0;box-shadow:none}

/* No WebGL, or a lost context: a notice of the LCD (console.css .account-notice), the keys
   still around it. */
#cg-fatal{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:auto;max-width:34em;padding:10px 13px;
  border:1px solid #87976b;border-left:3px solid #8b244b;background:#e5edca;box-shadow:2px 2px 0 #87976b;
  color:var(--cg-ink);font:400 .82rem/1.55 var(--lcd-font)}
#cg-fatal>button{min-height:44px;padding:9px 12px;border:2px solid #5b1833;border-radius:0;background:#8b244b;color:#fff3df;
  box-shadow:2px 2px 0 #5b1833;font:800 13px/1.3 var(--lcd-font);cursor:pointer}