/* Portal escapes transformed sheets. Renderers own their game layout and
   controls inside this safe viewport; desktop restores the phone preview. */
.gs-portal {
  position:fixed;inset:0;z-index:10000;width:100%;height:100vh;height:100dvh;
  box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  touch-action:pan-y;
  overflow:hidden;isolation:isolate;background:var(--bg,#07111d);color:var(--ink,#f1f5ff);
}
.gs-host {position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;}
.gs-portal:focus {outline:none;}

/* Match the directory's 412px phone preview on computers. Touch devices keep
   the real fullscreen viewport, including phones rotated into landscape. The
   transform contains fixed help layers; size containment gives game artwork
   frame-relative units instead of dimensions from the whole monitor. */
@media (min-width:700px) and (hover:hover) and (pointer:fine) {
  body>.gs-portal,body>.ac-immersive-portal {
    inset:auto;top:28px;left:50%;
    width:min(412px,calc(100vw - 32px));
    height:min(880px,calc(100vh - 56px));
    height:min(880px,calc(100dvh - 56px));
    box-sizing:border-box;border:11px solid #0A1219;border-radius:44px;
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1.5px #2A3B50;
    padding:0;transform:translateX(-50%);container-type:size;
  }
  body:has(>.gs-portal)>.app,body:has(>.ac-immersive-portal)>.app {visibility:hidden;}

  /* Keep the existing phone-sized type and puzzles when the browser is wide. */
  .gs-portal .iw-tile {font-size:clamp(25px,8cqw,38px)!important;}
  .gs-portal .trivia-main .trv-q {font-size:clamp(21px,4.8cqw,28px);}
  .gs-portal .pv-game.pv-shuffle-v3 {padding-top:clamp(14px,3cqh,26px);}
  .gs-portal .pv-game.pv-shuffle-v3 .pv-header h1 {font-size:clamp(25px,7.2cqw,34px);}
  .gs-portal .pv-game.pv-shuffle-v3 .pv-board {width:min(100%,460px,calc(100cqh - 180px));}
  .gs-portal .pv-shuffle-v3 .pv-optics-result .pv-single {max-width:min(280px,max(120px,calc(100cqh - 350px)));}
  .gs-portal .pv-game.pv-match {padding:0 clamp(15px,4.2cqw,26px) max(74px,12.5cqh);}
  .gs-portal .pv-game.pv-match .pv-header {flex-basis:clamp(62px,10.5cqh,94px);}
  .gs-portal .pv-game.pv-match .pv-header h1 {font-size:clamp(25px,7.1cqw,39px);}
  .gs-portal .lvg-main {padding-inline:clamp(10px,3cqw,24px);}
  .gs-portal .lvg-grid {width:min(100%,50cqh,380px);}
  .gs-portal .lvg-result {padding-block:clamp(20px,10cqh,70px);}
  .gs-portal .lvg-help-panel {max-height:calc(100cqh - 118px);}
}

/* EYEdle central pause retains the footer audio hit area. */
.eyd-pause-panel{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(90%,280px);padding:20px;box-sizing:border-box;color:#ffe6a8;border:1px solid #d9ba7655;border-radius:18px;background:#0c213ded;}
.eyd-central-resume{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:90px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:default;}
.eyd-central-resume b{font:700 32px Georgia,serif;letter-spacing:.08em}.eyd-central-resume span{font-size:12px}
.eyd-pause-actions{display:flex;gap:10px;width:100%}.eyd-pause-actions button{flex:1;min-height:44px;border:1px solid #d9ba7688;border-radius:10px;background:#243656;color:inherit;font:inherit;touch-action:manipulation}
.eyd-pause-panel p{margin:0;font-size:12px}

.eyd-central-resume img{display:block;width:min(100%,240px);height:auto;max-height:90px;object-fit:contain;pointer-events:none}

.eyd-ready.game-entry-cover .eyd-pause-panel{pointer-events:auto}

.eyd-pause-actions img{display:block;width:100%;height:34px;object-fit:contain;pointer-events:none}.eyd-pause-actions small{display:block;font-size:11px;line-height:1.2;margin-top:4px}

/* The illustrated v3 controls supply their own brass/navy silhouettes. Keep
   the transparent tap regions and focus ring instead of adding CSS plaques. */
.eyd-pause-panel:has(.eyd-central-resume img){background:transparent;border:0;box-shadow:none}
.eyd-pause-actions button:has(img){appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none}
.eyd-pause-actions button:focus-visible{outline:2px solid #ffe6a8;outline-offset:4px}