/* Fullscreen CELL game (ported from the V³ Studio app) */
/* These styles apply only to the two new screens. */
.studio-extra {
  position:fixed; inset:0; z-index:95; background:#000; color:#f3f3f1;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  display:flex; flex-direction:column; overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
.extra-header {
  flex:0 0 auto; min-height:66px; padding:14px 18px;
  display:flex; gap:14px; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.13); background:#080808;
}
.extra-exit, .cell-pause {
  border:1px solid rgba(255,255,255,.45); border-radius:24px;
  background:transparent; color:inherit; min-height:36px; padding:8px 16px;
  font:inherit; font-size:10px; letter-spacing:.1em; cursor:pointer;
}
.extra-exit:focus-visible, .cell-pause:focus-visible, .cell-start:focus-visible {
  outline:2px solid #f3f3f1; outline-offset:3px;
}
.extra-title { font-size:10px; letter-spacing:.13em; color:#aaa; }
.extra-header-label { margin-left:auto; font-size:9px; letter-spacing:.12em; color:#777; }
.cell-game { background:#090909; }
.cell-header { background:#0c0c0c; }
.cell-pause { margin-left:auto; padding:8px 12px; }
.cell-field { position:relative; flex:1; min-height:0; overflow:hidden; }
.cell-canvas { width:100%; height:100%; display:block; touch-action:none; }
.cell-hud {
  position:absolute; top:20px; left:20px; pointer-events:none; font-size:9px;
  color:#999; letter-spacing:.08em; display:flex; flex-direction:column; gap:5px;
}
.cell-hud strong { font-size:26px; color:#f3f3f1; font-weight:400; font-variant-numeric:tabular-nums; }
.cell-leaders {
  position:absolute; top:20px; right:18px; pointer-events:none; width:116px;
  font-size:9px; color:#888; line-height:1.8; letter-spacing:.02em;
}
.cell-leaders > span { display:block; margin-bottom:6px; font-size:8px; color:#555; letter-spacing:.13em; }
.cell-leaders p { display:flex; justify-content:space-between; gap:8px; }
.cell-leaders p.is-player { color:#f3f3f1; }
.cell-menu {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,8,.76); padding:24px; backdrop-filter:blur(5px);
}
.cell-menu[hidden] { display:none; }
.cell-menu-card { width:min(360px,100%); text-align:center; }
.cell-menu-kicker { font-size:9px; letter-spacing:.18em; color:#888; }
.cell-menu h1 { font-size:clamp(42px,10vw,64px); font-weight:400; letter-spacing:-.05em; margin:22px 0; }
.cell-menu p { font-size:12px; line-height:1.9; color:#aaa; }
.cell-control-hint { margin-top:20px; color:#777 !important; font-size:10px !important; }
.cell-start {
  position:relative; min-height:46px; padding:12px 34px; margin-top:30px; border-radius:28px;
  border:1px solid #f3f3f1; background:#f3f3f1; color:#0c0c0c;
  font:inherit; font-size:12px; letter-spacing:.12em; cursor:pointer;
  animation:cellButtonPulse 2.8s ease-in-out infinite;
}
@keyframes cellButtonPulse { 50% { box-shadow:0 0 28px rgba(255,255,255,.14),0 0 0 7px rgba(255,255,255,.035); } }
.cell-bottom {
  position:absolute; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:20px; right:20px;
  display:flex; justify-content:space-between; pointer-events:none;
  font-size:8px; letter-spacing:.1em; color:#666;
}
.cell-debug { font-variant-numeric:tabular-nums; }
.cell-boost { position:absolute; right:18px; bottom:calc(46px + env(safe-area-inset-bottom,0px)); border:1px solid rgba(255,255,255,.5); border-radius:24px; min-height:40px; padding:8px 14px; background:#141414; color:#f3f3f1; font-family:inherit; font-size:9px; letter-spacing:.06em; cursor:pointer; }
.cell-boost:disabled { opacity:.4; cursor:default; }
.cell-boost.is-active { opacity:1; color:#111; background:#f3f3f1; box-shadow:0 0 26px rgba(255,255,255,.2); }
.cell-powers {
  position:absolute; left:18px; right:18px; bottom:calc(46px + env(safe-area-inset-bottom,0px));
  display:flex; justify-content:flex-end; gap:8px;
}
.cell-powers button {
  position:static; min-height:44px; min-width:88px; padding:10px 12px; border:1px solid rgba(255,255,255,.5);
  border-radius:24px; background:#141414; color:#f3f3f1; font:9px "IBM Plex Mono",monospace;
  letter-spacing:.02em; cursor:pointer; transition:background .2s,box-shadow .2s;
}
.cell-powers button:disabled { opacity:.4; cursor:default; }
.cell-powers button.is-active { opacity:1; background:#f3f3f1; color:#111; box-shadow:0 0 26px rgba(255,255,255,.16); }
.cell-powers button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.cell-menu { z-index:2; }
@media (max-width:360px) {
  .extra-header { padding:12px; gap:10px; }
  .extra-title { font-size:9px; }
  .extra-header-label { font-size:8px; }
  .cell-pause { font-size:9px; padding:8px 10px; }
  .cell-bottom { font-size:7px; left:12px; right:12px; }
  .cell-powers { left:12px; right:12px; gap:6px; }
  .cell-powers button { flex:1; min-width:0; padding:10px 5px; font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .cell-start { animation:none; }
}
.studio-extra { animation: gameIn .55s cubic-bezier(.16,1,.3,1); }
.studio-extra.closing { animation: gameOut .4s ease forwards; }
@keyframes gameIn { from { opacity: 0; transform: scale(1.04); } }
@keyframes gameOut { to { opacity: 0; transform: scale(.98); } }
html.game-open, html.game-open body { overflow: hidden; }
.cell-remind { position: absolute; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom,0px)); z-index: 4; width: min(420px, calc(100% - 32px)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 18px 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.35); background: rgba(14,14,14,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: "IBM Plex Sans", sans-serif; display: grid; gap: 12px; transition: opacity .5s, transform .7s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.cell-remind.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cell-remind b { font-weight: 500; font-size: 1.05rem; }
.cell-remind span { color: #9a9a95; font-size: .88rem; line-height: 1.45; }
.cell-remind div { display: flex; gap: 8px; flex-wrap: wrap; }
.cell-remind button { min-height: 42px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); font: 500 .72rem "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #f3f3f1; background: transparent; cursor: pointer; }
.cell-remind button.solid { background: #f3f3f1; color: #0c0c0c; border-color: #f3f3f1; animation: cellButtonPulse 2.8s ease-in-out infinite; }