/* 잿불 야경대 — server-page shell (lane I). Loaded only on the page our server serves (head.html).
   Nothing moves by itself; a press changes transform / opacity only. */

/* 1. Safe areas. The game already pads its HUD and windows by --gl / --gr / --gb (and the XP bar by --xsb), each
      read straight from env(safe-area-inset-*). Here the same numbers go through --sal / --sar / --sab / --sat, so a
      test can set fake insets on <html> and see exactly what a notched phone would get. Same formulas as the game. */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}
html #game{--gl:max(16px,var(--sal));--gr:max(16px,var(--sar));--gb:max(10px,var(--sab));--xsb:var(--sab)}
/* the game's own "turned" mode (portrait phone, rotation locked, option 가로 화면으로 돌리기): its edges map like the game's rule */
html #game.rot{--gl:max(16px,var(--sat));--gr:max(16px,var(--sab));--gb:max(10px,var(--sal));--xsb:var(--sal)}
/* --ewb = the home-bar inset at the game box's own bottom edge (the screen's left edge in turned mode).
   Two places of the game do not use --gb at their bottom (picture test L844 / L932): the big window #win (8px all
   round) and the first screen's 「기록 코드 넣기」 button (bottom:10px). Both keep their own number and only grow by the
   home bar when there is one (no change at all on a phone without insets). */
html #game{--ewb:var(--sab)}
html #game.rot{--ewb:var(--sal)}
html #game #win{padding-bottom:max(8px,var(--ewb))}
html #game #start .sc28first{bottom:max(10px,calc(var(--ewb) + 4px))}

/* 2. iPhone habits */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}      /* Safari makes text bigger in landscape without this */
#game{-webkit-touch-callout:none}                                    /* no long-press 「복사 / 공유」 bubble on the game */
input:not([type=range]),textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* 3. Portrait cover: 「화면을 가로로 돌려 주세요」. Shown only by shell.js (class ew-port on <html>) while the screen is
      upright AND the game is not in its own turned mode. In landscape it is display:none, so it takes no touch. */
#ewRot{display:none}
html.ew-port #ewRot{display:flex;position:fixed;inset:0;z-index:2147483000;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px));background:#06060b;color:#ece4d0;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;text-align:center;word-break:keep-all;
  -webkit-user-select:none;user-select:none;touch-action:none}
#ewRot .ew-ph{width:84px;height:84px;display:block}
#ewRot b{font-size:21px;font-weight:700;letter-spacing:-.01em}
#ewRot p{margin:0;max-width:300px;font-size:14px;color:#9b93aa}
#ewRot button{margin-top:8px;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid #4a4060;background:#15131d;color:#ece4d0;
  font:inherit;font-size:15px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ewRot button:active{transform:scale(.97);opacity:.85}
#ewRot small{font-size:12px;color:#7d758c;max-width:280px}

/* 4. One-time hint for iPhone Safari (not yet on the home screen). Bottom LEFT corner of the first screen: the
      first screen's buttons are in the middle, its 「기록 코드 넣기」 at the bottom right, the log-in window at the top.
      Only its own box takes touches; it goes away with ✕, after 30 s, when a text field gets focus or the game starts. */
#ewHint{position:fixed;left:max(16px,calc(var(--sal) + 8px));bottom:max(10px,calc(var(--sab) + 6px));z-index:2147482000;
  display:flex;align-items:center;gap:10px;max-width:max(200px,calc(50vw - var(--sal) - 150px));padding:8px 8px 8px 12px;word-break:keep-all;
  border-radius:14px;background:rgba(21,19,29,.96);border:1px solid #4a4060;box-shadow:0 6px 18px rgba(0,0,0,.5);color:#ece4d0;
  font:14px/1.35 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  -webkit-user-select:none;user-select:none}
#ewHint[hidden]{display:none}
/* at the top the hint may pass over the title (not touchable): wider, so it needs fewer lines */
#ewHint.ew-tl,#ewHint.ew-tr{max-width:min(420px,calc(100vw - var(--sal) - var(--sar) - 32px))}
#ewHint.ew-tl{bottom:auto;top:10px}
#ewHint.ew-tr{bottom:auto;top:10px;left:auto;right:max(16px,calc(var(--sar) + 8px))}
#ewHint .ew-i{flex:0 0 auto;width:20px;height:20px;display:block}
#ewHint span{min-width:0}
#ewHint button{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:10px;background:#211d2d;color:#ece4d0;font:inherit;font-size:16px;
  line-height:36px;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ewHint button:active{transform:scale(.94)}