/* Phone play (12 October 2026). Loaded last on every stage page.
   1. Immersive layout: html.lucy-immersive (set by phone-play.js on short landscape screens and in full screen).
      The game frame is the largest 16:9 box that fits the visible screen; the header and the menus use the whole screen.
   2. Compact start and results screens for short landscape screens, so Let's play and Next are always visible.
   3. Header buttons: full screen and account (the account lines no longer sit on the start and results screens). */

/* ---------- 1. Immersive layout ---------- */
html.lucy-immersive,html.lucy-immersive body{height:100%;overflow:hidden;background:#262523}
html.lucy-immersive body{padding:0;display:block;min-height:0}
html.lucy-immersive .shell{width:100%;gap:0}
html.lucy-immersive .footer-note{display:none}
html.lucy-immersive .game-wrap,
html.lucy-immersive .game-wrap:has(:is(#startScreen,#endScreen):not(.hidden)){
  position:fixed;inset:0;margin:auto;max-height:none;min-height:0;
  width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));
  width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,calc(100vw * 9 / 16));
  border:0;border-radius:0;box-shadow:none
}
html.lucy-immersive .game-wrap>canvas{width:100%;height:100%}
html.lucy-immersive .game-wrap .header-bar-integrated{
  position:fixed;top:0;left:0;right:0;height:36px;
  padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))
}
html.lucy-immersive .game-wrap .hud{top:44px}
html.lucy-immersive .game-wrap .stage-screen.overlay{
  position:fixed;inset:36px 0 0 0;margin:0;min-height:0;
  padding:30px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  align-items:flex-start
}
html.lucy-immersive .game-wrap #pauseScreen.overlay{align-items:center;padding-top:12px}
@media(max-width:700px){html.lucy-immersive .header-bar-integrated .slogan-text{display:none}}

/* iPhone Safari has no full screen API: the page gets scroll room so a swipe up hides the browser bars. */
html.lucy-immersive.lucy-swipe-room,html.lucy-immersive.lucy-swipe-room body{height:auto;overflow:visible}
html.lucy-immersive.lucy-swipe-room body{min-height:calc(100vh + 240px)}
/* A scroll box on top would take the swipe for itself (iOS bounces it), so the menus pass the gesture to the page.
   They fit without scrolling at every tested phone size. */
html.lucy-immersive.lucy-swipe-room .game-wrap .stage-screen.overlay{overflow:visible}
.lucy-swipe-hint{display:none}
html.lucy-immersive.lucy-bars-showing .shell:not(.playing) .lucy-swipe-hint{
  display:flex;align-items:center;gap:6px;position:fixed;z-index:60;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:6px 12px;background:#262523;color:#fff7eb;border:2px solid #fff7eb;border-radius:4px;box-shadow:3px 3px 0 rgba(38,37,35,.35);
  font:600 12px/1.2 var(--sans,'DM Sans',sans-serif);white-space:nowrap;pointer-events:none
}
.lucy-swipe-hint svg{width:14px;height:14px;animation:lucy-swipe 1.4s ease-in-out infinite}
@keyframes lucy-swipe{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.lucy-swipe-hint svg{animation:none}}

/* ---------- 2. Compact screens: short landscape ---------- */
@media(max-height:540px) and (orientation:landscape){
  .stage-screen .modal-frame{max-width:740px}
  .stage-screen .overhang-lucy{width:60px;height:60px}
  .stage-screen .bubble-style-ingame{left:64px;font-size:12px}
  .stage-screen .overhang-badge{font-size:10px;padding:3px 8px}

  /* Start: title row, then guides left and the choices right. */
  #startScreen .modal-frame{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 14px;padding:10px 12px}
  #startScreen .start-top-row{grid-column:1;grid-row:1;margin:0 0 0 54px;align-self:center;gap:10px;flex-wrap:nowrap}
  #startScreen .modal-title-start{font-size:18px}
  #startScreen .overhang-badge{position:static;grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0}
  #startScreen .jump-guide-box{grid-column:1;grid-row:2 / 4;align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}
  #startScreen .jump-guide-box svg{height:84px!important}
  #startScreen #openingProgress{grid-column:2;grid-row:2;margin:0}
  #startScreen .modal-bottom-row{grid-column:2;grid-row:3;display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0}
  #startScreen .difficulty-options{width:100%;gap:6px}
  #startScreen .difficulty-options label{flex:1;min-width:0}
  #startScreen .difficulty-options legend{font-size:11px;margin-bottom:3px}
  #startScreen #startBtn{width:100%;min-height:46px;justify-content:center}
  #startScreen .first-collection{padding:0;gap:8px;font:600 13px/1.25 var(--sans)}
  #startScreen .first-collection .detail{font-size:11px;margin-top:1px}
  #startScreen .progress-study{padding:6px 9px;gap:2px 10px;font-size:12px}
  #startScreen .progress-study strong{font-size:17px}
  #startScreen #openingImprovement{display:none}

  /* Results: stars and items left, saving and the way forward right. */
  #endScreen .modal-frame{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:6px 14px;padding:10px 12px;align-content:start}
  #endScreen .victory-stars-inline-bar{grid-column:1;grid-row:1;margin:0 0 0 54px;flex-wrap:nowrap;gap:8px;align-items:center}
  #endScreen .modal-title-victory{font-size:18px;white-space:nowrap}
  #endScreen .overhang-badge{position:static;grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0}
  #endScreen .stars-comment-pill{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
  #endScreen .victory-items-grid{grid-column:1;grid-row:2 / 7;align-self:stretch;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
  #endScreen .item-card{flex-direction:column;justify-content:center;text-align:center;padding:6px 4px;gap:2px}
  #endScreen .item-icon-box,#endScreen .reward-art{width:40px;height:40px}
  #endScreen .item-val{font-size:18px}
  #endScreen .item-lbl{font-size:11px}
  #endScreen #resultRareStatus,#endScreen .previous-best{font-size:10px}
  #endScreen .preview-side>*{grid-column:2}
  #endScreen .wallet-strip,#endScreen .modal-frame:has(#retrySaveBtn:not([hidden])) .wallet-strip{grid-column:2;margin:0;padding:6px 10px;min-height:0;font-size:13px}
  #endScreen .wallet-strip strong{font-size:22px}
  #endScreen .wallet-note{grid-column:2;margin:0;font-size:11px;line-height:1.25}
  #endScreen #retrySaveBtn{grid-column:2;justify-self:start;min-height:44px}
  #endScreen .modal-bottom-row{grid-column:2;display:flex;flex-wrap:nowrap;gap:6px;margin:0;align-items:stretch}
  #endScreen .modal-bottom-row>div{display:flex;gap:6px}
  #endScreen :is(#mapBtn,#restartBtn,#nextStageBtn){min-height:46px;padding:0 10px;font-size:14px}
  #endScreen #nextStageBtn:not([hidden]){flex:1;justify-content:center}
  #endScreen .save-scope{grid-column:2;margin:0;font-size:10px}
  /* A confirmed save needs no extra lines: the green strip says it. Failures keep their explanation and Retry. */
  #endScreen .modal-frame[data-save=saved] :is(.wallet-note,.save-scope){display:none}
  #endScreen .lucy-acct-rare{grid-column:2;margin:0;padding:6px 8px;font-size:12px}
}
@media(max-height:360px) and (orientation:landscape){
  .stage-screen .bubble-style-ingame{display:none}
  html.lucy-immersive .game-wrap .stage-screen.overlay{padding-top:22px}
  #startScreen .difficulty-options legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #startScreen .jump-guide-box svg{height:72px!important}
  #endScreen .item-icon-box,#endScreen .reward-art{width:32px;height:32px}
}

/* ---------- 3. Header buttons ---------- */
.lucy-head-btn{width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--charcoal);cursor:pointer;position:relative;flex:none}
.lucy-head-btn svg{width:20px;height:20px;display:block}
.lucy-head-btn[hidden]{display:none}
.lucy-head-btn:focus-visible{outline:3px solid var(--charcoal);outline-offset:1px;box-shadow:0 0 0 3px var(--cream)}
.lucy-head-btn .fs-exit{display:none}
.lucy-head-btn[aria-pressed=true] .fs-enter{display:none}
.lucy-head-btn[aria-pressed=true] .fs-exit{display:block}
.lucy-acct-head[data-signed=in]::after{content:"";position:absolute;right:5px;top:6px;width:7px;height:7px;background:var(--leaf,#a9c797);border:1.5px solid var(--charcoal)}
.shell.playing .lucy-acct-head{display:none}
@media(min-height:541px){.lucy-head-btn{width:44px;height:44px}}
.lucy-head-btn::before{content:"";position:absolute;inset:-5px}