/* LANDSCAPE layout — PC/laptop: karta centrowana */
#app{
  position:relative;
  height:min(390px, 92dvh);
  width:min(844px, calc(min(390px, 92dvh) * 844 / 390));
  display:grid;
  grid-template-rows:44px 1fr;
  grid-template-columns:1fr 172px;
  overflow:hidden;
  background:var(--paper);
  border:1px solid rgba(232,228,216,.15);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
/* Mobile / Google Play — fullscreen, zero zaokrągleń */
@media (max-width:700px),(max-height:420px){
  #app{
    height:100dvh !important;
    width:100vw !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }
}

/* PWA 1.5 — safe-area-inset: notch / punchhole / gesture bar (Android + iOS)
   viewport-fit=cover w <meta viewport> pozwala malować pod notchem,
   a padding env() cofa treść z powrotem do bezpiecznej strefy.
   Dotyczy tylko trybu fullscreen (mobile/TWA). */
@media (max-width:700px),(max-height:420px){
  #header{
    padding-left:  max(16px, env(safe-area-inset-left,  0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    /* Wyższy header gdy jest notch (zwykle top inset > 0) */
    padding-top:   env(safe-area-inset-top, 0px);
    /* header grid-row już ma height:44px — powiększamy o inset */
    height: calc(44px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
  }
  /* Skoryguj grid-template-rows żeby header wziął więcej miejsca przy notchu */
  #app{
    grid-template-rows: calc(44px + env(safe-area-inset-top, 0px)) 1fr;
  }
  /* Tacka klocków — gesture bar u dołu (Android navigation bar) */
  #hud{
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* Lewa/prawa strona sceny — notch w landscape */
  #scene{
    padding-left:  env(safe-area-inset-left,  0px);
    /* NIE dodajemy padding-right — tacka (tray) jest po prawej, ona dostaje inset */
  }
  #hud{
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* HEADER */
#header{
  min-width:0;grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:var(--paper);z-index:3;
}
#meta{display:flex;gap:12px;align-items:center;flex-shrink:0}
#stars-badge{font-family:'DM Mono',monospace;font-size:14px;color:var(--ink);font-weight:500;}

/* SCENE */
#scene{position:relative;overflow:hidden;background:var(--paper);min-width:0;min-height:0;grid-row:2;grid-column:1}
#c{position:absolute;inset:0;width:100%;height:100%}
.tc canvas{position:static;inset:auto;width:64px;height:34px;display:block}

/* slot pips */
#pips{display:none}
.pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .25s;}
.pip.vis{background:rgba(127,255,154,.4)}
.pip.placed{background:var(--green)}
.pip.hit{background:var(--red)}
.pip.star{background:var(--yellow)}
#scene-mask{display:none}

/* HUD */
#hud{
  grid-row:2;grid-column:2;width:172px;min-width:0;overflow:hidden;
  background:var(--paper);border-left:1px solid var(--line);
  z-index:3;display:flex;flex-direction:column;gap:0;padding-top:6px;
}

/* TRAY */
#tray{
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:6px 8px 4px;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  flex:1;min-height:0;align-content:start;
  /* BUG-C FIX: pan-y zezwala na natywny scroll palcem */
  touch-action:pan-y;
}
#tray::-webkit-scrollbar{display:none}

/* DEAD-2 FIX: usunięto martwy #status (element nie istnieje w HTML) */