/* The desktop display case.

   On a phone this file does nothing at all — `display:contents` removes the
   wrapper from layout entirely, so the page behaves exactly as it did before.

   On a desktop the wrapper becomes an iPhone 15 and the page runs inside it.
   No iframe: the page is still one document, so cookies, referral query
   strings, focus and the back button all behave normally. The trick that
   makes it possible is `transform` on .device — a transformed ancestor
   becomes the containing block for `position:fixed`, so the game's
   full-screen `.screen{position:fixed;inset:0}` panels resolve against the
   phone rather than escaping to the whole window. */

.device{ display:contents; }
.device-chrome{ display:none; }

@media (min-width:900px) and (pointer:fine){

  :root{
    /* iPhone 15, derived from the hardware rather than guessed.
       Screen 1179x2556 at 460ppi = 65.1 x 141.1mm. Body 71.6 x 147.6mm.
       That's a uniform 3.25mm border, and at 393pt / 65.1mm = 6.04 pt/mm
       it works out at 19.5pt. Splitting that into a 4pt machined rail and a
       15.5pt black bezel gives a body of 432 x 891, ratio 2.062 — the real
       device is 2.061. The earlier 9pt bezel made it 2.095, noticeably too
       narrow for its height. */
    --dw:393px;
    --dh:852px;
    --rail:4px;
    --bezel:15.5px;
    --r-screen:55px;
    --r-bezel:calc(var(--r-screen) + var(--bezel));
    --r-device:calc(var(--r-bezel) + var(--rail));
  }

  html,body{ height:100%; }
  body{
    margin:0;
    background:#000 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden !important;
    padding:16px;
  }
  /* the paper tooth belongs on the page, not on the black backdrop */
  body::after{ display:none !important; }

  .device{
    display:block;
    position:relative;
    flex:0 0 auto;
    width:calc(var(--dw) + (var(--bezel) + var(--rail)) * 2);
    height:calc(var(--dh) + (var(--bezel) + var(--rail)) * 2);
    padding:var(--rail);
    border-radius:var(--r-device);
    /* Conic, because a linear gradient can't make corners catch light. */
    background:
      conic-gradient(from 210deg at 50% 50%,
        #3b4054 0deg,   #8f96ae 22deg,  #2a2e3d 52deg,
        #6f7690 88deg,  #232734 122deg, #9aa1b8 160deg,
        #2c3040 196deg, #7d8499 232deg, #21242f 268deg,
        #868da4 302deg, #2f3343 334deg, #3b4054 360deg);
    box-shadow:
      0 70px 140px rgba(0,0,0,.9),
      0 24px 56px rgba(0,0,0,.7),
      0 4px 14px rgba(0,0,0,.6);
    zoom:var(--fit, 1);
  }

  /* the bright chamfer where the rail meets the glass */
  .device::after{
    content:"";
    position:absolute;
    inset:calc(var(--rail) - 1.2px);
    border-radius:calc(var(--r-bezel) + 1.2px);
    box-shadow:0 0 0 1.2px rgba(214,222,240,.5), 0 0 0 2.2px rgba(0,0,0,.55);
    pointer-events:none;
    z-index:6;
  }

  .device-screen{
    position:relative;
    /* The bezel is a BORDER, not a box-shadow. A shadow doesn't take part in
       layout, so the 393px screen sat top-left inside the 411px content box
       and the bezel came out 4px on two sides and 22px on the other two —
       which is what made the whole thing look skewed. As a border with
       box-sizing:border-box it fills the device exactly and centres itself. */
    width:calc(var(--dw) + var(--bezel) * 2);
    height:calc(var(--dh) + var(--bezel) * 2);
    border:var(--bezel) solid #000;
    box-sizing:border-box;
    /* outer radius; the inner corner resolves to --r-screen automatically */
    border-radius:calc(var(--r-screen) + var(--bezel));
    overflow-y:auto;
    overflow-x:hidden;
    background:var(--ground, #E7DFCD);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Contains position:fixed, so the game's full-screen panels resolve
       against the 393x852 glass rather than the phone's outer body — without
       this they cover the bezel and square off the rounded corners. */
    transform:translateZ(0);
  }
  .device-screen::-webkit-scrollbar{ display:none; }

  /* the page inside gets the notch and home bar as real space */
  .device-screen > *:first-child{ padding-top:0; }
  .page{ padding-top:calc(59px + 28px) !important; padding-bottom:calc(34px + 28px) !important; }
  .screen{ padding-top:calc(59px + 18px) !important; padding-bottom:calc(34px + 18px) !important; }
  .gate{ padding-top:calc(59px + 18px) !important; padding-bottom:calc(34px + 18px) !important; }

  /* ── chrome ─────────────────────────────────────────── */
  .device-chrome{ display:block; }

  .d-island{
    position:absolute; top:calc(var(--rail) + var(--bezel) + 11px); left:50%;
    transform:translateX(-50%);
    width:125px; height:36px; border-radius:99px;
    background:#000; z-index:8; pointer-events:none;
  }
  .d-island i{
    position:absolute; right:9px; top:50%;
    transform:translateY(-50%);
    width:15px; height:15px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, #2b3a4d 0%, #101821 42%, #05070a 100%);
    box-shadow:0 0 0 .5px rgba(120,150,180,.18);
  }
  .d-island b{
    position:absolute; left:27px; top:50%;
    transform:translateY(-50%);
    width:40px; height:5px; border-radius:99px;
    background:#080809;
    box-shadow:0 0 0 .5px rgba(255,255,255,.05);
  }

  .d-status{
    position:absolute;
    top:calc(var(--rail) + var(--bezel)); left:calc(var(--rail) + var(--bezel));
    width:var(--dw); height:59px;
    z-index:7; pointer-events:none;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px 0 32px;
    font-family:var(--ui, system-ui);
    font-size:15px; font-weight:700;
    color:var(--ink, #151210);
  }
  .d-status span{ display:flex; align-items:center; gap:5px; }
  .d-bars{ display:flex; align-items:flex-end; gap:2px; height:11px; }
  .d-bars i{ width:3px; background:currentColor; border-radius:1px; display:block; }
  .d-bars i:nth-child(1){ height:4px } .d-bars i:nth-child(2){ height:6px }
  .d-bars i:nth-child(3){ height:8.5px } .d-bars i:nth-child(4){ height:11px }
  .d-batt{
    width:25px; height:12px; border:1.4px solid currentColor;
    border-radius:3.5px; padding:1.4px; position:relative; opacity:.9;
  }
  .d-batt::after{
    content:""; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
    width:1.6px; height:4px; border-radius:0 1px 1px 0; background:currentColor; opacity:.5;
  }
  .d-batt i{ display:block; height:100%; width:78%; background:currentColor; border-radius:1.6px; }

  .d-home{
    position:absolute;
    bottom:calc(var(--rail) + var(--bezel) + 9px); left:50%;
    transform:translateX(-50%);
    width:139px; height:5px; border-radius:99px;
    background:var(--ink, #151210); opacity:.85;
    z-index:8; pointer-events:none;
  }

  /* side buttons, machined from the same metal */
  .d-btn{
    position:absolute; z-index:1;
    background:linear-gradient(180deg,#9aa1b8 0%,#4a4f62 14%,#2b2f3c 50%,#4e5366 86%,#a2a9c0 100%);
    box-shadow:0 0 0 .5px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
  }
  .d-btn.a{ left:-3px; top:116px; width:4px; height:32px; border-radius:2px 0 0 2px; }
  .d-btn.u{ left:-3px; top:176px; width:4px; height:66px; border-radius:2px 0 0 2px; }
  .d-btn.d{ left:-3px; top:254px; width:4px; height:66px; border-radius:2px 0 0 2px; }
  .d-btn.p{ right:-3px; top:214px; width:4px; height:100px; border-radius:0 2px 2px 0; }

  /* the account button belongs to the phone's screen, not the black room */
  .acct{ top:calc(59px + 8px); right:14px; z-index:9; }
}

@media (min-width:900px) and (pointer:fine){
  /* `vw` inside the phone still means the browser window, not the 393px
     screen — so every vw-driven size is roughly three times too big. Anything
     that clamps against vw has to be restated at the width it actually gets.
     Only the display sizes are affected; the small type all bottoms out at
     its minimum anyway. */
  .wordmark{ font-size:52px !important; }
  .gate-mark{ font-size:44px !important; }
  .scenario{ font-size:26px !important; }
  .done-title{ font-size:28px !important; }
  .deck-name{ font-size:21px !important; }

  /* clear the account button, which floats over the top-right corner */
  .page{ padding-top:calc(59px + 58px) !important; }
  .masthead{ padding-top:34px !important; }
}

@media (min-width:900px) and (pointer:fine){
  /* The game's own `@media (min-width:900px)` block is meant for a real wide
     window. Inside the phone the window is still wide, so it fires and lays
     the decks out in a row that doesn't fit 393px. Put the narrow layout back.
     This is the same trap as vw: media queries measure the window, not the
     element. */
  .decks{ flex-direction:column !important; }
  .deck{ flex:none !important; }
  .card{ max-width:none !important; min-height:min(58vh,500px) !important; }
  .sheet{ align-items:flex-end !important; }
  .sheet-inner{ border-radius:var(--r) var(--r) 0 0 !important; border-bottom:0 !important; }
}