/* The desktop artwork and engine remain owned by the existing game plugins. */
body.ejn-handheld-active { overflow:hidden!important; overscroll-behavior:none; }
#ejn-play-arcade .ejn-handheld-options,
#ejn-coloring-app .ejn-handheld-colors-toggle,
#ejn-coloring-app .ejn-handheld-colors-panel { display:none; }
#ejn-handheld-rotate { display:none; }

@media (pointer:coarse) and (max-width:1366px) {
  body.ejn-handheld #ejn-play-arcade,
  body.ejn-handheld #ejn-coloring-app {
    position:fixed; inset:0; z-index:99990; left:0; top:0;
    transform:none; width:100vw; height:100dvh; max-width:none;
    min-height:0; margin:0; overflow:hidden;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-game,
  body.ejn-handheld #ejn-play-arcade .ejna-picker { width:100%; height:100%; max-width:none; min-height:0; }
  body.ejn-handheld #ejn-play-arcade button,
  body.ejn-handheld #ejn-coloring-app button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  body.ejn-handheld #ejn-play-arcade button:focus-visible,
  body.ejn-handheld #ejn-coloring-app button:focus-visible { outline:3px solid #fff86c; outline-offset:2px; }

  /* A single painted lobby, scaled whole; none of the three preview windows spill. */
  body.ejn-handheld #ejn-play-arcade .ejna-picker {
    display:grid; place-items:center; overflow:hidden;
    background:#2782bd;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-lobby-wide {
    display:block; width:min(100vw,177.777dvh); max-width:none; height:auto;
    aspect-ratio:2048/1152; margin:auto; flex:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-lobby-narrow { display:none; }
  body.ejn-handheld #ejn-play-arcade .ejna-picker-note { display:none; }

  /* Tic Tac Toe keeps the original illustrated board and physical piece trays. */
  body.ejn-handheld #ejn-play-arcade .ejna-tic {
    display:grid; place-items:center; background-color:#aa612c;
    background-image:repeating-linear-gradient(0deg,#8d4b20 0 3px,#b46a30 4px 65px,#cc8040 68px 71px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene {
    position:relative; display:block; width:min(100vw,177.683dvh);
    height:auto; min-height:0; aspect-ratio:1672/941; padding:0; margin:auto;
    background:#ad6c35 var(--ejn-tic-art) center/100% 100% no-repeat;
    overflow:hidden; isolation:isolate;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-mobile-title { display:none; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-back,
  body.ejn-handheld #ejn-play-arcade .ejna-tic-again,
  body.ejn-handheld #ejn-play-arcade .ejna-tic-new {
    position:absolute; z-index:3; width:20%; height:9%; min-height:40px;
    padding:0; border:0; border-radius:7px; background:transparent;
    color:transparent; box-shadow:none; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-back { left:2.5%; top:3%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-again { left:78%; top:66%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-new { left:78%; top:78%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-select {
    position:absolute; z-index:12; left:4.2%; top:12.8%;
    display:flex; width:17.4%; height:14.4%; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-turn-sign {
    position:absolute; left:38.1%; top:17.2%; width:20.25%;
    aspect-ratio:338/58; background:none; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-tray {
    position:absolute; z-index:2; width:auto; height:auto; transform:none;
    justify-self:auto; pointer-events:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-tray-left { left:4.4%; top:28.2%; width:18%; height:50.8%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-tray-right { left:61.2%; top:28.35%; width:15.3%; height:50.6%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-pieces img { width:min(80%,105px); }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-board-shell {
    position:absolute; left:25.25%; top:26.55%; width:33.3%; height:54.45%;
    aspect-ratio:auto; background:none; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-board { inset:0; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-score {
    position:absolute; z-index:2; left:79.25%; top:29.2%;
    display:flex; flex-direction:column; justify-content:space-around; gap:0;
    width:15.4%; height:18.4%; min-height:0; padding:0 .3%;
    border:0; border-radius:0; background:linear-gradient(92deg,#013a40,#06444a 52%,#013b40);
    box-shadow:0 0 8px 7px #023f45; color:#f3f5e8;
    font-size:clamp(9px,1.45vw,20px); transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-score strong { display:none; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-score span { display:flex; min-height:28%; gap:3%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-score img { width:16%; height:100%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-mode {
    position:absolute; z-index:12; left:78%; top:3%; width:18.5%; height:11%;
    transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-mode button { min-height:40px; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-two-picker {
    position:absolute; z-index:12; left:77%; top:51%; width:21%; height:17%;
    transform:none; font-size:clamp(9px,1vw,15px);
  }

  /* Wardrobe cards, collected books, score, and brothers occupy one carpet. */
  body.ejn-handheld #ejn-play-arcade .ejna-match { background:#0743bd; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage {
    position:relative; display:block; width:100vw; height:100dvh; min-height:0;
    aspect-ratio:auto; padding:0; margin:0; overflow:hidden;
    background:#0640aa var(--ejn-match-fabric) center/180px repeat;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-scene {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 52%; -webkit-mask-image:none;
    mask-image:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-banner {
    position:absolute; z-index:4; left:30%; top:0; width:42%; height:auto;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-back {
    position:absolute; z-index:12; left:1.5%; top:2%; width:18%; min-height:40px;
    padding:0; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-mode {
    position:absolute; z-index:12; left:auto; right:1.5%; top:2%;
    width:23%; height:44px; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-mode button { min-height:40px; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-pick,
  body.ejn-handheld #ejn-play-arcade .ejna-match-deck {
    position:absolute; z-index:12; top:17%; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-pick { left:30%; width:27%; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-deck { left:57%; width:22%; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-pick button,
  body.ejn-handheld #ejn-play-arcade .ejna-match-deck button { top:12%; height:78%; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-board,
  body.ejn-handheld #ejn-play-arcade .ejna-match-board[data-level-board] {
    --cols:6; position:absolute; z-index:3; left:42%; top:27%;
    width:min(50vw,80dvh); max-width:none; margin:0; padding:0;
    transform:translateX(-50%); gap:clamp(3px,.5vw,7px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-score {
    position:absolute; z-index:5; left:77%; top:45%; width:21%;
    height:auto; aspect-ratio:434/476; margin:0; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-score span {
    font-size:clamp(13px,2.2vw,28px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-collected {
    position:absolute; z-index:4; left:78%; right:auto; top:28%; bottom:auto;
    width:18%; height:14%; margin:0;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-status {
    position:absolute; width:1px; height:1px; min-height:0;
    padding:0; border:0; margin:-1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-two-picker {
    position:absolute; z-index:12; left:78%; top:14%; width:20%;
    height:48px; min-height:0; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-duel-score {
    position:absolute; z-index:6; left:78%; top:24%; width:20%;
    height:auto; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-card-label {
    font-family:'EJN Baloo 2','Arial Rounded MT Bold',sans-serif;
    font-size:clamp(7px,10cqi,13px); line-height:.95;
  }

  /* The supplied painted badges open and close the phone setup menu. */
  body.ejn-handheld #ejn-play-arcade .ejn-handheld-options {
    position:absolute; z-index:13; display:grid; place-items:center;
    width:20%; height:auto; min-width:0; min-height:44px;
    padding:0; border:0; border-radius:0; background:none;
    color:transparent; box-shadow:none; line-height:0;
    appearance:none; -webkit-appearance:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejn-handheld-options img {
    display:block; width:100%; height:auto; object-fit:contain;
    pointer-events:none; user-select:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejn-handheld-options .ejn-play-art { display:none; }
  body.ejn-handheld #ejn-play-arcade .ejn-options-open .ejn-handheld-options .ejn-choose-art { display:none; }
  body.ejn-handheld #ejn-play-arcade .ejn-options-open .ejn-handheld-options .ejn-play-art { display:block; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene .ejn-handheld-options {
    left:3.2%; top:14%; bottom:auto; width:19.5%; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage .ejn-handheld-options {
    left:3.5%; top:auto; bottom:3.5%; width:21%; transform:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage:not(.ejn-options-open) .ejna-match-pick,
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage:not(.ejn-options-open) .ejna-match-deck,
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene:not(.ejn-options-open) .ejna-tic-select {
    visibility:hidden; pointer-events:none;
  }
  body.ejn-handheld #ejn-play-arcade .ejn-options-open::after {
    content:''; position:absolute; z-index:9; inset:0;
    background:#052349dc; backdrop-filter:blur(3px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open::after {
    background:#2d180dcf;
  }
  body.ejn-handheld #ejn-play-arcade .ejn-options-open .ejna-match-board,
  body.ejn-handheld #ejn-play-arcade .ejn-options-open .ejna-tic-board { pointer-events:none; }
  body.ejn-handheld #ejn-play-arcade .ejn-options-open .ejna-match-banner { z-index:10; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open .ejn-handheld-options {
    left:50%; top:73%; bottom:auto; width:28%; transform:translateX(-50%);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open .ejn-handheld-options {
    left:50%; top:66%; bottom:auto; width:28%; transform:translateX(-50%);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open .ejna-tic-select {
    left:24%; top:24%; width:52%; height:26%; visibility:visible;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open .ejna-tic-mode {
    left:28%; top:55%; width:44%; height:52px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open .ejna-tic-two-picker {
    left:24%; top:73%; width:52%; height:58px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open .ejna-match-pick {
    left:9%; top:28%; width:41%; visibility:visible;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open .ejna-match-deck {
    left:53%; top:28%; width:37%; visibility:visible;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open .ejna-match-two-picker {
    left:27%; top:60%; width:46%; height:56px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open .ejna-match-mode {
    left:37%; right:auto; top:49%; width:26%; height:42px;
  }
  /* In two-player setup the second brother row gets its own space. */
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open.ejn-two-player .ejna-tic-select {
    top:17%; height:24%;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open.ejn-two-player .ejna-tic-mode {
    top:46%; height:46px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open.ejn-two-player .ejna-tic-two-picker {
    top:62%; height:48px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-scene.ejn-options-open.ejn-two-player .ejn-handheld-options {
    top:81%; width:24%;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open.ejn-two-player .ejna-match-two-picker {
    top:63%; height:50px;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-stage.ejn-options-open.ejn-two-player .ejn-handheld-options {
    top:81%; width:24%;
  }

  /* The coloring shell is shown whole in landscape, without a sideways webpage. */
  body.ejn-handheld #ejn-coloring-app {
    display:grid!important; place-items:center; background:#8d1c27;
  }
  body.ejn-handheld:not(.ejna-color-open) #ejn-coloring-app { display:none!important; }
  body.ejn-handheld #ejn-coloring-app .ejn-stage-viewport {
    display:grid; place-items:center; width:100%; height:100%;
    overflow:hidden; overscroll-behavior:none; background:#8d1c27;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-sprite-stage {
    width:min(100vw,177.683dvh); min-width:0; max-width:none;
    height:auto; aspect-ratio:1672/941; margin:auto; overflow:hidden;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-screen { touch-action:pan-x pan-y; }
  body.ejn-handheld #ejn-coloring-app .ejn-scene-hotspot {
    top:7.2%; height:18%; border-width:2px;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-control {
    top:85%; height:11%; border-radius:8px;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-knob { top:77%; height:18%; }
  body.ejn-handheld #ejn-coloring-app .ejn-swatch-hotspot {
    width:4.2%; height:8.5%;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-zoom input { width:32px; }
  body.ejn-handheld #ejn-coloring-app .ejn-mobile-tip { display:none; }
  body.ejn-handheld.ejna-color-open .ejna-color-back {
    position:fixed; z-index:100003; left:1%; top:1%;
    width:min(16vw,130px); min-height:44px; margin:0;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-toggle {
    position:absolute; z-index:11; left:42%; top:72.5%; display:block;
    width:16%; height:8%; min-height:32px; border:0;
    border-radius:10px; background:transparent; color:transparent;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-toggle:focus-visible {
    outline:3px solid #ffe36b;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel {
    position:absolute; z-index:22; left:18%; top:24%;
    display:grid; grid-template-columns:repeat(8,minmax(0,1fr));
    align-content:start; gap:5px; width:64%; max-height:58%; overflow:auto;
    padding:8px; border:5px solid #f7c643; border-radius:16px;
    background:#9d2030; box-shadow:0 7px 12px #401016aa;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel[hidden] { display:none!important; }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel strong {
    grid-column:1/-2; color:#fff2b8; font:900 clamp(12px,2vw,22px)/1 'EJN Baloo 2',system-ui,sans-serif;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel .ejn-colors-close {
    grid-column:-2/-1; min-height:30px; border:2px solid #fff2b8;
    border-radius:7px; background:#083d7c; color:#fff2b8; font-size:18px;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel .ejn-color-choice {
    min-width:0; min-height:39px; border:3px solid #fff5d8;
    border-radius:50%; background:var(--ejn-choice); box-shadow:0 2px 3px #41131c;
  }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel .ejn-color-choice[aria-pressed="true"] {
    outline:3px solid #ffe445; outline-offset:1px;
  }
}

@media (pointer:coarse) and (max-width:1366px) and (max-height:500px) and (orientation:landscape) {
  body.ejn-handheld #ejn-play-arcade .ejna-match-board,
  body.ejn-handheld #ejn-play-arcade .ejna-match-board[data-level-board="easy"],
  body.ejn-handheld #ejn-play-arcade .ejna-match-board[data-level-board="medium"] {
    --cols:6; left:44%; top:25%; width:min(49vw,94dvh); gap:clamp(3px,.45vw,5px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-board[data-level-board="hard"] {
    --cols:8; left:44%; top:25%; width:min(66vw,125dvh); gap:clamp(3px,.45vw,5px);
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-score {
    left:79%; top:52%; width:19%;
  }
  body.ejn-handheld #ejn-play-arcade .ejna-match-score span { font-size:clamp(13px,2.4vw,19px); }
  body.ejn-handheld #ejn-play-arcade .ejna-collected { left:79%; top:31%; width:18%; height:16%; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-duel-score { left:78%; top:20%; width:20%; font-size:10px; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-banner { left:30%; width:42%; }
  body.ejn-handheld #ejn-play-arcade .ejna-match-mode { right:1%; width:25%; }
  body.ejn-handheld #ejn-play-arcade .ejna-tic-score { font-size:clamp(8px,1.7vw,12px); }
  body.ejn-handheld #ejn-coloring-app .ejn-handheld-colors-panel .ejn-color-choice { min-height:32px; }
}

@media (pointer:coarse) and (max-width:500px) and (orientation:portrait) {
  body.ejn-handheld #ejn-handheld-rotate {
    position:fixed; z-index:2147483200; inset:0; display:grid;
    align-content:center; justify-items:center; gap:14px;
    padding:24px; overflow:auto; text-align:center;
    background:radial-gradient(circle at 50% 28%,#287ec0,#083b78 61%,#052757);
    color:#fff4c8; font:900 clamp(20px,5vw,36px)/1.15 'EJN Baloo 2',system-ui,sans-serif;
  }
  body.ejn-handheld #ejn-handheld-rotate img {
    display:block; width:min(86vw,500px); max-height:30dvh;
    object-fit:contain; filter:drop-shadow(0 8px 5px #001746);
  }
  body.ejn-handheld #ejn-handheld-rotate strong { color:#ffd746; text-shadow:2px 3px #8a2624; }
  body.ejn-handheld #ejn-handheld-rotate p { max-width:28ch; margin:0; font-size:clamp(15px,3.8vw,23px); }
  body.ejn-handheld #ejn-handheld-rotate .ejn-rotate-icon {
    width:72px; height:72px; display:grid; place-items:center;
    border:5px solid #ffd75b; border-radius:18px;
    background:#a72d35; color:#fff5d1; font-size:48px;
    transform:rotate(-90deg); box-shadow:4px 5px #062654;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.ejn-handheld #ejn-play-arcade .ejna-match-lights i { animation:none; opacity:.8; }
}