/* File: /public/games/splash/splash-maker.css */
/* Version: v4.2 */
/* Last edited: 2026-04-06 11:16 */
/* Purpose:
   Splash Maker editor UI
   - LOCK dock to real bottom
   - sheet opens just above dock
   - removes bottom leak / background strip
   - keeps extra inside space so last controls are visible
   - no glow
*/

:root{
  --ink:#e2e8f0;
  --mut:#94a3b8;
  --accent:#4f6ee8;

  --bg:#d9dbe1;
  --panel:rgba(23,27,58,.97);
  --panel-2:rgba(14,18,44,.97);
  --panel-line:rgba(255,255,255,.08);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  --topbar-h:56px;
  --dock-h:66px;

  --sheet-side:8px;
  --sheet-small-h:126px;
  --sheet-medium-h:252px;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
}

html,
body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding-top:calc(var(--topbar-h) + var(--safe-t));
  padding-bottom:calc(var(--dock-h) + var(--safe-b) + 12px);
}

.sm-icon{
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  max-width:18px;
  max-height:18px;
  flex:0 0 18px;
  display:inline-block;
  vertical-align:middle;
  stroke:currentColor;
  fill:none;
  pointer-events:none;
}

.dock-btn .sm-icon{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  max-width:20px;
  max-height:20px;
  flex:0 0 20px;
}

.top-save-btn .sm-icon,
.stage-pill .sm-icon,
.pill .sm-icon,
.x-btn .sm-icon{
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;
  max-width:16px;
  max-height:16px;
  flex:0 0 16px;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:
    calc(8px + var(--safe-t))
    calc(12px + var(--safe-r))
    8px
    calc(12px + var(--safe-l));
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(245,247,251,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,42,.06);
}

.topbar h1{
  margin:0;
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:#09132d;
}

.top-save-btn{
  position:absolute;
  right:calc(12px + var(--safe-r));
  bottom:8px;
  min-height:37px;
  padding:0 13px;
  border-radius:21px;
  border:1px solid rgba(79,110,232,.20);
  background:linear-gradient(180deg,#4f6ee8,#3c57c5);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:none;
}

.stage-wrap{
  padding:10px 10px 0;
}

.stage-card{
  max-width:760px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.stage-toolbar{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 8px;
}

.stage-pill{
  min-height:33px;
  padding:0 11px;
  border-radius:17px;
  border:1px solid rgba(148,163,184,.10);
  background:rgba(255,255,255,.74);
  color:#111827;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:12px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:none;
}

.stage-shell{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.splash-stage{
  position:relative;
  width:min(100%, calc(100vh - var(--topbar-h) - var(--dock-h) - 40px));
  aspect-ratio:1 / 1;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#1f2937);
  box-shadow:none;
}

.stage-safe-zone{
  position:absolute;
  inset:6%;
  border:2px dashed rgba(255,255,255,.16);
  border-radius:16px;
  pointer-events:none;
  z-index:5;
}

.stage-text{
  position:absolute;
  left:7%;
  top:12%;
  width:86%;
  z-index:3;
  text-align:center;
  transform-origin:50% 0%;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.stage-text .line{
  margin:0 0 .05em 0;
  line-height:1.04;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:normal;
  hyphens:none;
}

.stage-image{
  position:absolute;
  left:50%;
  top:28%;
  width:35%;
  max-width:none;
  transform:translate(-50%,-50%);
  display:none;
  z-index:2;
  touch-action:none;
  -webkit-user-drag:none;
  user-select:none;
}

.stage-hint{
  margin:8px 6px 0;
  text-align:center;
  color:#667085;
  font-size:10.5px;
  line-height:1.28;
}

/* =========================
   DOCK — LOCKED TO BOTTOM
========================= */
.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1300;
  display:flex;
  gap:6px;
  padding:
    6px
    calc(8px + var(--safe-r))
    calc(var(--safe-b) + 6px)
    calc(8px + var(--safe-l));
  background:rgba(10,14,30,.95);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  border-top:1px solid rgba(255,255,255,.05);
  box-shadow:none;
}

.dock-btn{
  flex:1 1 0;
  min-width:0;
  min-height:52px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.10);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 2px;
  box-shadow:none;
}

.dock-btn em{
  font-style:normal;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dock-btn.active{
  background:rgba(79,110,232,.16);
  border-color:rgba(79,110,232,.22);
}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.10);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:1150;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.backdrop.show,
.backdrop[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}

body.sheet-open .stage-card{
  pointer-events:none;
}

body.sheet-open .sheet,
body.sheet-open .sheet *{
  pointer-events:auto;
}

/* =========================
   SHEETS — ONLY SHEET MOVES
========================= */
.sheet{
  position:fixed;
  left:var(--sheet-side);
  right:var(--sheet-side);
  bottom:calc(var(--dock-h) + var(--safe-b) - 20px);
  z-index:1200;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-radius:18px 18px 0 0;
  border:1px solid var(--panel-line);
  box-shadow:none;
  transform:translateY(calc(100% + 20px));
  transition:transform .22s ease-out, opacity .18s ease;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.sheet.open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sheet-small{
  height:min(var(--sheet-small-h), calc(100vh - var(--topbar-h) - 210px));
}

.sheet-medium{
  height:min(var(--sheet-medium-h), calc(100vh - var(--topbar-h) - 185px));
}

.sheet-handle{
  width:56px;
  height:6px;
  margin:8px auto 0;
  border-radius:9999px;
  background:rgba(148,163,184,.22);
}

.sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px 4px;
}

.sheet-head h3{
  margin:0;
  font-size:14px;
  font-weight:800;
}

.sheet-tabs{
  display:flex;
  gap:7px;
  padding:0 10px 8px;
  overflow:auto hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.sheet-tabs::-webkit-scrollbar{
  display:none;
}

.sheet-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--mut);
  border-radius:9999px;
  min-height:31px;
  padding:0 11px;
  font-size:11px;
  white-space:nowrap;
  flex:0 0 auto;
}

.sheet-tab.active{
  background:rgba(79,110,232,.16);
  border-color:rgba(79,110,232,.22);
  color:var(--ink);
}

.sheet-body{
  height:calc(100% - 66px);
  padding:4px 10px 28px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.sheet .row{
  display:flex;
  gap:7px;
  margin:7px 0;
  flex-wrap:wrap;
}

.tab-panel{
  display:block;
}

.tab-panel[hidden]{
  display:none !important;
}

.label{
  display:block;
  margin:7px 0 4px;
  font-size:11px;
  color:var(--mut);
}

.input,
.select{
  width:100%;
  min-height:38px;
  padding:8px 11px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-size:11.5px;
  outline:none;
}

.input::placeholder{
  color:#94a3b8;
}

.pill,
.chip{
  min-height:36px;
  border-radius:15px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  font-size:11.5px;
  box-shadow:none;
}

.pill{
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
}

.chip.grow{
  flex:1 1 0;
  min-width:0;
}

.chip > span{
  font-size:11.5px;
  line-height:1.15;
}

.chip > strong{
  margin-left:auto;
  font-size:11px;
  min-width:28px;
  text-align:right;
}

.chip input[type="color"]{
  width:25px;
  height:25px;
  padding:0;
  border:0;
  border-radius:7px;
  overflow:hidden;
  background:transparent;
}

.chip input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:#3b82f6;
}

.chip input[type="range"],
.chip select{
  flex:1 1 auto;
  min-width:0;
}

.x-btn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  box-shadow:none;
}

input[type="range"]{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:6px;
  border-radius:9999px;
  background:rgba(255,255,255,.18);
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#f8fafc;
  border:0;
  box-shadow:none;
}

input[type="range"]::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#f8fafc;
  border:0;
  box-shadow:none;
}

@media (min-width:900px){
  .stage-wrap{
    max-width:780px;
    margin:0 auto;
  }

  .splash-stage{
    width:min(760px, calc(100vh - var(--topbar-h) - var(--dock-h) - 42px));
  }

  .dock{
    left:50%;
    right:auto;
    width:min(780px, calc(100vw - 24px));
    transform:translateX(-50%);
    border-radius:22px 22px 0 0;
  }

  .sheet{
    left:50%;
    right:auto;
    width:min(760px, calc(100vw - 24px));
    transform:translate(-50%, calc(100% + 20px));
    bottom:calc(var(--dock-h) + var(--safe-b));
  }

  .sheet.open{
    transform:translate(-50%, 0);
  }
}

@media (max-width:430px){
  :root{
    --topbar-h:56px;
    --dock-h:66px;
    --sheet-side:0px;
    --sheet-small-h:126px;
    --sheet-medium-h:252px;
  }

  .stage-wrap{
    padding:8px 8px 0;
  }

  .splash-stage{
    border-radius:22px;
  }

  .topbar h1{
    font-size:15px;
  }

  .top-save-btn{
    min-height:37px;
    padding:0 13px;
    font-size:12.5px;
  }

  .stage-pill{
    min-height:33px;
    padding:0 11px;
    font-size:12px;
  }

  .sheet-head{
    padding-left:10px;
    padding-right:10px;
  }

  .sheet-tabs{
    padding-left:8px;
    padding-right:8px;
  }

  .sheet-body{
    padding-left:8px;
    padding-right:8px;
    padding-bottom:30px;
  }

  .dock{
    gap:6px;
    padding-left:6px;
    padding-right:6px;
  }
}

@media (max-width:390px){
  :root{
    --sheet-medium-h:242px;
    --sheet-small-h:122px;
  }

  .dock-btn em{
    font-size:8.75px;
  }
}