:root {
  --bg: #0a0e14;
  --bg-2: #0e141d;
  --panel: #121a24;
  --panel-2: #18222e;
  --line: #1f2c3a;
  --line-bright: #2c3e52;
  --ink: #c9d6e2;
  --ink-dim: #6f8296;
  --ink-faint: #44586b;
  --cyan: #2ba5d9;
  --cyan-deep: #1486a8;
  --amber: #ffb347;
  --red: #ff5c5c;
  --green: #5cff9d;
  --grid: rgba(43,217,196,0.07);
  --grid-major: rgba(43,217,196,0.16);
  --shadow: 0 8px 30px rgba(0,0,0,0.55);
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --display: 'Chakra Petch',sans-serif;
  --mono: 'IBM Plex Mono',monospace;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent
}

html,body{
  height:100%;
  overflow:hidden
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.4;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
  opacity:.5
}

#app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  z-index:1
}

#topbar{
  height:52px;
  min-height:52px;
  padding-top:var(--safe-top);
  box-sizing:content-box;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:14px;
  padding-right:10px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-bottom:1px solid var(--line-bright);
  position:relative;
  z-index:20
}

#topbar .brand{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:1.5px;
  font-size:15px;
  color:var(--cyan);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px
}

#topbar .brand .dot{
  width:8px;
  height:8px;
  background:var(--cyan);
  border-radius:1px;
  box-shadow:0 0 10px var(--cyan)
}

#topbar .proj{
  flex:1;
  min-width:0;
  font-size:12px;
  color:var(--ink-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
  padding-right:4px
}

#topbar .save-state{
  font-size:10px;
  color:var(--ink-faint);
  white-space:nowrap
}

#topbar .save-state.dirty{
  color:var(--amber)
}

.iconbtn{
  width:38px;
  height:38px;
  border-radius:8px;
  border:1px solid var(--line-bright);
  background:var(--panel-2);
  color:var(--ink);
  display:grid;
  place-items:center;
  font-size:18px;
  cursor:pointer
}

.iconbtn:active{
  background:var(--line)
}

#views{
  flex:1;
  position:relative;
  overflow:hidden
}

.view{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column
}

.view.active{
  display:flex
}

#tabbar{
  display:flex;
  height:60px;
  min-height:60px;
  padding-bottom:var(--safe-bottom);
  box-sizing:content-box;
  background:linear-gradient(0deg,var(--panel-2),var(--panel));
  border-top:1px solid var(--line-bright);
  z-index:20
}

#tabbar .tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--ink-faint);
  cursor:pointer;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-top:2px solid transparent;
  transition:color .15s
}

#tabbar .tab .ic{
  font-size:19px;
  line-height:1
}

#tabbar .tab.active{
  color:var(--cyan);
  border-top-color:var(--cyan);
  background:rgba(43,217,196,0.05)
}

#mapWrap{
  flex:1;
  position:relative;
  overflow:hidden;
  background:var(--bg-2)
}

#mapCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none
}

#mapTools{
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:6
}

.tool{
  width:46px;
  height:46px;
  border-radius:10px;
  border:1px solid var(--line-bright);
  background:rgba(18,26,36,0.92);
  color:var(--ink-dim);
  display:grid;
  place-items:center;
  font-size:18px;
  cursor:pointer;
  backdrop-filter:blur(6px)
}

.tool.active{
  color:var(--bg);
  background:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(43,217,196,0.4)
}

#mapHud{
  position:absolute;
  top:10px;
  right:10px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end
}

.hud-chip{
  background:rgba(18,26,36,0.92);
  border:1px solid var(--line-bright);
  border-radius:8px;
  padding:6px 10px;
  font-size:10px;
  color:var(--ink-dim);
  backdrop-filter:blur(6px)
}

.hud-chip b{
  color:var(--cyan);
  font-weight:600
}

#mapActions{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:8px
}

.pill{
  background:rgba(18,26,36,0.95);
  border:1px solid var(--line-bright);
  color:var(--ink);
  border-radius:22px;
  padding:9px 16px;
  font-size:12px;
  cursor:pointer;
  font-family:var(--display);
  letter-spacing:.5px;
  backdrop-filter:blur(6px)
}

.pill:active{
  background:var(--line)
}

.pill.primary{
  background:var(--cyan);
  color:var(--bg);
  border-color:var(--cyan);
  font-weight:600
}

.pill.danger{
  color:var(--red);
  border-color:rgba(255,92,92,0.4)
}

.pill.ghost{
  background:transparent
}

.pill.grid-on{
  background:var(--green);
  color:var(--bg);
  border-color:var(--green);
  font-weight:600
}

.pill.grid-off{
  background:var(--red);
  color:var(--bg);
  border-color:var(--red);
  font-weight:600
}

.sheet-backdrop{
  position:fixed;
  inset:0;
  background:rgba(4,7,11,0.55);
  z-index:40;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s
}

.sheet-backdrop.open{
  opacity:1;
  pointer-events:auto
}

.sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:41;
  background:var(--panel);
  border-top:1px solid var(--cyan);
  border-radius:18px 18px 0 0;
  box-shadow:var(--shadow);
  transform:translateY(110%);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  max-height:82vh;
  display:flex;
  flex-direction:column;
  padding-bottom:var(--safe-bottom)
}

.sheet.open{
  transform:translateY(0)
}

.sheet .grab{
  width:42px;
  height:4px;
  background:var(--line-bright);
  border-radius:4px;
  margin:9px auto 4px
}

.sheet .sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px 10px;
  border-bottom:1px solid var(--line)
}

.sheet .sheet-title{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--cyan)
}

.sheet .sheet-body{
  overflow-y:auto;
  padding:14px 16px 22px;
  -webkit-overflow-scrolling:touch
}

.field{
  margin-bottom:14px
}

.field>label{
  display:block;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:6px
}

.field .hint{
  font-size:10px;
  color:var(--ink-faint);
  margin-top:4px
}

input[type=text],input[type=number],input[type=password],select,textarea{
  width:100%;
  background:var(--bg-2);
  border:1px solid var(--line-bright);
  color:var(--ink);
  border-radius:9px;
  padding:11px 12px;
  font-family:var(--mono);
  font-size:14px
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--cyan)
}

textarea{
  resize:vertical;
  min-height:80px
}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.row3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px
}

.inline-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.switch{
  position:relative;
  width:46px;
  height:26px;
  flex:none
}

.switch input{
  display:none
}

.switch .track{
  position:absolute;
  inset:0;
  background:var(--line);
  border-radius:14px;
  transition:background .15s
}

.switch .knob{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:var(--ink-dim);
  border-radius:50%;
  transition:.15s
}

.switch input:checked+.track{
  background:var(--cyan-deep)
}

.switch input:checked+.track+.knob{
  left:23px;
  background:var(--cyan)
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--panel-2);
  border:1px solid var(--line-bright);
  color:var(--ink);
  border-radius:10px;
  padding:12px 16px;
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.5px;
  cursor:pointer;
  width:100%
}

.btn:active{
  background:var(--line)
}

.btn.primary{
  background:var(--cyan);
  color:var(--bg);
  border-color:var(--cyan);
  font-weight:600
}

.btn.amber{
  background:var(--amber);
  color:var(--bg);
  border-color:var(--amber);
  font-weight:600
}

.btn.danger{
  color:var(--red);
  border-color:rgba(255,92,92,0.4);
  background:transparent
}

.btn.sm{
  padding:8px 12px;
  font-size:12px;
  width:auto
}

.btn-row{
  display:flex;
  gap:8px
}

.btn-row .btn{
  flex:1
}

.scroll-view{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px
}

.section-title{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink-dim);
  margin:4px 0 12px;
  display:flex;
  align-items:center;
  gap:8px
}

.section-title::before{
  content:"";
  width:14px;
  height:2px;
  background:var(--cyan)
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px
}

.asset-card{
  background:var(--panel);
  border:1px solid var(--line-bright);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  aspect-ratio:1;
  display:flex;
  flex-direction:column
}

.asset-card .thumb{
  flex:1;
  background-size:cover;
  background-position:center;
  image-rendering:pixelated;
  background-color:#060a0f
}

.asset-card .cap{
  font-size:9px;
  padding:5px 6px;
  color:var(--ink-dim);
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
  line-height:1.25;
  border-top:1px solid var(--line);
  text-align:center
}

.asset-card .thumb-buttons{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background-color:#060a0f
}

.asset-card .thumb-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--bg-2);
  border:1px solid var(--line-bright);
  display:grid;
  place-items:center;
  font-size:14px;
  color:var(--ink);
  cursor:pointer
}

.asset-card .thumb-btn:active{
  background:var(--panel-2)
}

.asset-card.selected{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan)
}

.asset-bar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px
}

.search-input{
  flex:1;
  background:var(--bg-2);
  border:1px solid var(--line-bright);
  color:var(--ink);
  padding:8px 10px;
  border-radius:8px;
  font-family:var(--mono);
  font-size:12px
}

.folder-head{
  font-family:var(--display);
  font-size:11px;
  letter-spacing:2px;
  color:var(--cyan);
  text-transform:uppercase;
  margin:14px 0 8px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line)
}

.folder-head:first-child{
  margin-top:0
}

.asset-card .svg-badge,.asset-card .badge{
  position:absolute;
  top:4px;
  right:4px;
  font-size:8px;
  background:var(--cyan);
  color:var(--bg);
  padding:1px 5px;
  border-radius:4px;
  font-weight:600
}

.asset-card .svg-badge{
  font-size:9px;
  padding:2px 5px;
  letter-spacing:1px
}

/* Positions the existing .tag.<category> pill (npc/item/weapon/scenery/door,
   each with its own color -- see .tag.npc etc below) as a card corner badge
   instead of its usual inline placement in a list-item's .s row. */
.asset-card .cat-badge{
  position:absolute;
  top:4px;
  right:4px;
  z-index:2
}

.asset-card .del-badge{
  position:absolute;
  top:4px;
  left:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  z-index:2
}

.asset-card .del-badge:active{
  background:var(--red,#e5484d)
}

.asset-card .dup-badge{
  position:absolute;
  top:4px;
  left:28px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  z-index:2
}

.asset-card .dup-badge:active{
  background:var(--panel-2)
}

.add-card{
  display:grid;
  place-items:center;
  border-style:dashed;
  color:var(--ink-dim);
  font-size:30px
}

.list-item{
  background:var(--panel);
  border:1px solid var(--line-bright);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer
}

.list-item:active{
  background:var(--panel-2)
}

.list-item .ico{
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--bg-2);
  display:grid;
  place-items:center;
  font-size:20px;
  flex:none;
  background-size:cover
}

.list-item .meta{
  flex:1;
  min-width:0
}

.list-item .meta .t{
  font-family:var(--display);
  font-size:14px;
  color:var(--ink)
}

.list-item .meta .s{
  font-size:10px;
  color:var(--ink-faint);
  margin-top:2px
}

.list-item .chev{
  color:var(--ink-faint)
}

.empty{
  text-align:center;
  color:var(--ink-faint);
  padding:40px 20px;
  font-size:12px;
  line-height:1.7
}

.empty .big{
  font-size:34px;
  margin-bottom:10px;
  opacity:.5
}

.tag{
  display:inline-block;
  font-size:9px;
  padding:2px 7px;
  border-radius:5px;
  background:var(--bg-2);
  border:1px solid var(--line-bright);
  color:var(--ink-dim);
  letter-spacing:.5px
}

.tag.npc{
  color:var(--red);
  border-color:rgba(255,92,92,0.35)
}

.tag.item{
  color:var(--amber);
  border-color:rgba(255,179,71,0.35)
}

.tag.weapon{
  color:#ff7adb;
  border-color:rgba(255,122,219,0.35)
}

.tag.scenery{
  color:var(--green);
  border-color:rgba(92,255,157,0.35)
}

.tag.door{
  color:var(--cyan);
  border-color:rgba(43,217,196,0.35)
}

.logic-head{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:8px;
  align-items:center
}

.logic-head select{
  flex:1
}

.rules{
  flex:1;
  overflow-y:auto;
  padding:14px;
  -webkit-overflow-scrolling:touch
}

.rule{
  background:var(--panel);
  border:1px solid var(--line-bright);
  border-radius:14px;
  margin-bottom:14px;
  overflow:hidden
}

.rule-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}

.rule-head .when{
  font-family:var(--display);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--amber);
  flex-shrink:0
}

.rule-head select{
  flex:1;
  padding:7px 8px;
  font-size:12px;
  min-width:0
}

.rule-head .del{
  color:var(--ink-faint);
  font-size:18px;
  padding:4px;
  cursor:pointer;
  flex-shrink:0
}

.rule-head .param-inline{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--ink-dim)
}

.rule-head .param-inline input{
  width:60px;
  padding:4px 6px;
  font-size:11px;
  background:var(--bg);
  border:1px solid var(--line-bright);
  color:var(--ink);
  border-radius:6px
}

.actions-list{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.action-block{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  border-radius:9px;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.action-block .ab-top{
  display:flex;
  align-items:center;
  gap:8px
}

.action-block .ab-top select{
  flex:1;
  padding:7px 8px;
  font-size:12px
}

.action-block .ab-top .del{
  color:var(--ink-faint);
  font-size:16px;
  padding:2px 4px;
  cursor:pointer
}

/* Action/condition/event property rows scroll SIDEWAYS instead of wrapping.
   Wrapping turned a rule with a few parameters into a tall stack that pushed
   the rest of the event sheet off screen -- worst on a phone, which is where
   there's least room to begin with. One line that scrolls keeps every rule the
   same height and readable at a glance. Paired with .params-scroll-wrap below,
   which draws the "there's more this way" affordance. */
.action-params,
.params-scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;   /* momentum scrolling on iOS */
  overscroll-behavior-x:contain;      /* don't chain into the page/panel behind */
  scrollbar-width:thin;
  scrollbar-color:var(--line-bright) transparent;
  padding-bottom:2px
}

.action-params::-webkit-scrollbar,
.params-scroll::-webkit-scrollbar{ height:6px }

.action-params::-webkit-scrollbar-track,
.params-scroll::-webkit-scrollbar-track{ background:transparent }

.action-params::-webkit-scrollbar-thumb,
.params-scroll::-webkit-scrollbar-thumb{
  background:var(--line-bright);
  border-radius:3px
}

.action-params::-webkit-scrollbar-thumb:hover,
.params-scroll::-webkit-scrollbar-thumb:hover{ background:var(--cyan-deep) }

/* Children never shrink, so the row overflows and scrolls rather than
   squeezing controls down to unusable widths. They may still GROW, so a rule
   with one or two parameters still fills the width on a desktop. */
.action-params > *,
.params-scroll > *{ flex:0 0 auto }

.action-params .p{
  flex:1 0 auto;
  min-width:104px
}

/* Scroll affordance. Both edges fade + show a chevron, and each side only
   appears while there is actually more content that way (classes toggled by
   paramScroller() in behavior-logic-system.js) -- so it reads as a real
   control on touch, and tells a mouse user the row is scrollable at all. */
.params-scroll-wrap{
  position:relative;
  width:100%
}

.params-scroll-wrap::before,
.params-scroll-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:30px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  z-index:2
}

/* Fades are semi-transparent black, not a panel color: these rows sit on
   several differently tinted blocks (action, condition, rule body) and this
   reads correctly on all of them without matching each one. */
.params-scroll-wrap::before{
  left:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M8 4L3 10l5 6' fill='none' stroke='%232ba5d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 2px center / 9px 15px no-repeat,
    linear-gradient(to right,rgba(4,8,12,0.92),rgba(4,8,12,0))
}

.params-scroll-wrap::after{
  right:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M4 4l5 6-5 6' fill='none' stroke='%232ba5d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 9px 15px no-repeat,
    linear-gradient(to left,rgba(4,8,12,0.92),rgba(4,8,12,0))
}

.params-scroll-wrap.scroll-l::before{ opacity:1 }

/* A few slow nudges the first time a row turns out to be scrollable -- the
   animation replays whenever the class is re-applied, and stops on its own so
   it never becomes a permanently blinking distraction. */
.params-scroll-wrap.scroll-r::after{
  opacity:1;
  animation:paramScrollHint 1.1s ease-in-out 3
}

@keyframes paramScrollHint{
  0%,100%{ background-position:right 2px center,right center }
  50%{ background-position:right 6px center,right center }
}

@media (prefers-reduced-motion:reduce){
  .params-scroll-wrap.scroll-r::after{ animation:none }
}

.action-params .p label{
  font-size:9px;
  color:var(--ink-faint);
  display:block;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.5px
}

.action-params .p input,.action-params .p select{
  padding:7px 8px;
  font-size:12px
}

.add-action{
  font-size:11px;
  color:var(--cyan);
  padding:6px;
  text-align:center;
  border:1px dashed var(--line-bright);
  border-radius:8px;
  cursor:pointer
}

.code-peek{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  font-size:11px;
  color:var(--ink-dim);
  white-space:pre;
  overflow-x:auto;
  margin-top:10px;
  max-height:240px;
  overflow-y:auto
}

/*  Condition blocks (If … Then …)  */
.cond-list{
  padding:4px 12px 2px
}

.cond-block{
  background:rgba(255,180,40,0.04);
  border:1px solid rgba(255,180,40,0.28);
  border-left:3px solid var(--amber);
  border-radius:9px;
  padding:9px 10px;
  margin-bottom:8px;
  display:flex;
  flex-direction:column;
  gap:7px
}

.cond-if-label{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:1px;
  color:var(--amber);
  text-transform:uppercase;
  flex-shrink:0
}

.cond-not-label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family:var(--display);
  font-size:10px;
  letter-spacing:1px;
  color:var(--amber);
  text-transform:uppercase;
  cursor:pointer;
  flex-shrink:0;
  user-select:none
}
.cond-not-label input[type="checkbox"]{
  width:12px;
  height:12px;
  accent-color:var(--amber);
  cursor:pointer
}

.cond-then-label{
  font-size:10px;
  letter-spacing:1px;
  color:var(--amber);
  text-transform:uppercase;
  padding:2px 0 1px;
  border-top:1px dashed rgba(255,180,40,0.25)
}

.cond-sub-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left:10px;
  border-left:2px solid rgba(255,180,40,0.2)
}

.cond-section{
  margin-top:8px
}

.cond-section-label{
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,180,40,0.55);
  padding:4px 12px 3px;
  border-top:1px solid rgba(255,180,40,0.15)
}

.add-cond{
  font-size:11px;
  color:var(--amber);
  padding:5px 12px;
  text-align:center;
  border:1px dashed rgba(255,180,40,0.35);
  border-radius:8px;
  cursor:pointer;
  margin:2px 12px 10px
}

#playWrap{
  flex:1;
  position:relative;
  background:#000;
  overflow:hidden;
  touch-action:none
}

#gl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}

#playUI{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  font-family:var(--hud-font, inherit)
}

.touch-zone{
  position:absolute;
  top:0;
  bottom:0;
  pointer-events:auto;
  touch-action:none
}

#moveZone{
  left:0;
  width:45%
}

#lookZone{
  right:0;
  width:55%
}

.stick{
  position:absolute;
  width:110px;
  height:110px;
  margin:-55px 0 0 -55px;
  border-radius:50%;
  border:2px solid rgba(43,217,196,0.4);
  pointer-events:none;
  display:none
}

.stick .nub{
  position:absolute;
  top:50%;
  left:50%;
  width:46px;
  height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  background:rgba(43,217,196,0.55)
}

#crosshair{
  width:22px;
  height:22px;
  pointer-events:none
}

/* Default look before setCrosshair() (fps-game.js) sets an inline
   border/background/svg for the equipped weapon's own crosshairShape --
   that function fully owns styling once a weapon is held, this is just
   the idle/unarmed fallback. */
#crosshair::before,#crosshair::after{
  content:"";
  position:absolute;
  background:rgba(43,217,196,0.85)
}

#crosshair::before{
  left:50%;
  top:0;
  width:2px;
  height:100%;
  margin-left:-1px
}

#crosshair::after{
  top:50%;
  left:0;
  height:2px;
  width:100%;
  margin-top:-1px
}

#crosshair.armed::before,#crosshair.armed::after{
  content:none
}

#weapon{
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  width:var(--wpn-size,clamp(140px,min(58vw,46vh),270px));
  pointer-events:none;
  z-index:4
}

#weapon svg,#weapon img.wpn-img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 -2px 7px rgba(0,0,0,0.55));
  transition:transform .08s ease-out;
  transform:translateY(0) scale(var(--wpn-s, 1));
  transform-origin:bottom center
}

#weapon img.wpn-img{
  image-rendering:pixelated
}

#weapon .flash{
  position:absolute;
  left:50%;
  top:-5%;
  width:76px;
  height:76px;
  margin-left:-38px;
  border-radius:50%;
  opacity:0;
  transform:scale(.5);
  pointer-events:none;
  background:radial-gradient(circle,#fff 0%,#ffe08a 32%,rgba(255,179,71,0.55) 56%,transparent 72%)
}

#weapon.fire svg,#weapon.fire img.wpn-img{
  transform:translateY(16px) scale(var(--wpn-s, 1))
}

#weapon.fire .flash{
  opacity:1;
  transform:scale(1)
}

#weapon.bob svg,#weapon.bob img.wpn-img{
  animation:gunbob var(--bobdur,.6s) ease-in-out infinite alternate
}

#weapon.bob.fire svg,#weapon.bob.fire img.wpn-img{
  animation:none;
  transform:translateY(16px) scale(var(--wpn-s, 1))
}

@keyframes gunbob{
  from{ transform:translateY(0) scale(var(--wpn-s, 1)) }
  to{ transform:translateY(9px) scale(var(--wpn-s, 1)) }
}

#wpnSwitch{
  position:absolute;
  top:calc(54px + var(--safe-top));
  right:12px;
  display:none;
  align-items:center;
  gap:6px;
  pointer-events:auto;
  z-index:8
}

#wpnSwitch.show{
  display:flex
}

#invToggleBtn{
  position:absolute;
  top:calc(54px + var(--safe-top));
  right:12px;
  width:38px;
  height:38px;
  border-radius:8px;
  background:rgba(10,14,20,0.8);
  border:1px solid var(--cyan);
  color:var(--cyan);
  display:none;
  align-items:center;
  justify-content:center;
  font-size:18px;
  pointer-events:auto;
  z-index:8
}

#invToggleBtn.show{
  display:flex
}

/* Touch + Inventory weapon style: the on-screen inventory button takes the
   weapon switcher's screen slot instead of showing both. */
#playUI.inv-touch-mode #wpnSwitch{
  display:none !important
}

.wpn-btn{
  width:38px;
  height:38px;
  border-radius:8px;
  background:rgba(10,14,20,0.8);
  border:1px solid var(--cyan);
  color:var(--cyan);
  display:grid;
  place-items:center;
  font-size:20px;
  font-family:var(--display)
}

.wpn-btn:active{
  background:rgba(43,217,196,0.25)
}

#wpnName{
  min-width:64px;
  text-align:center;
  font-family:var(--display);
  font-size:11px;
  letter-spacing:1px;
  color:var(--ink-dim);
  background:rgba(10,14,20,0.7);
  padding:6px 8px;
  border-radius:8px
}

#invPanel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(640px, 94vw);
  max-height:min(80vh, 640px);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  background:var(--dlg-bg, #05080d);
  border:1px solid var(--dlg-accent, #2bd9c4);
  border-radius:12px;
  color:var(--dlg-text, #c9d6e2);
  font-family:var(--dlg-font, inherit);
  pointer-events:auto;
  z-index:30;
  overflow:hidden
}

@media (max-width:520px), (max-height:520px){
  #invPanel{
    width:96vw;
    max-height:calc(100vh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 16px);
    padding:12px;
    gap:8px;
    border-radius:10px
  }
  #invDetailName{ font-size:13px }
  #invDetailDesc, #invDetailValue{ font-size:11px }
  #invDetailActions button{ padding:7px; font-size:11px }
}

#invPanel.hidden{ display:none }

#invHeader{
  display:flex;
  align-items:center;
  justify-content:space-between
}

#invTitle{
  font-size:14px;
  letter-spacing:2px;
  font-weight:bold
}

#invCloseBtn{
  width:28px;
  height:28px;
  border-radius:6px;
  background:transparent;
  border:1px solid var(--dlg-accent, #2bd9c4);
  color:var(--dlg-text, #c9d6e2);
  font-size:16px;
  cursor:pointer
}

#invTabs{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  flex-shrink:0;
  scrollbar-width:thin;
  scrollbar-color:var(--dlg-accent, #2bd9c4) rgba(255,255,255,0.06);
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px
}

#invTabs::-webkit-scrollbar{ height:6px }
#invTabs::-webkit-scrollbar-track{ background:rgba(255,255,255,0.06); border-radius:6px }
#invTabs::-webkit-scrollbar-thumb{ background:var(--dlg-accent, #2bd9c4); border-radius:6px }

.inv-tab{
  flex-shrink:0;
  padding:5px 12px;
  border-radius:14px;
  border:1px solid var(--dlg-accent, #2bd9c4);
  color:var(--dlg-text, #c9d6e2);
  font-size:12px;
  cursor:pointer;
  background:transparent
}

.inv-tab.active{
  background:var(--dlg-accent, #2bd9c4);
  color:#0c1118
}

#invGrid{
  display:grid;
  grid-template-columns:repeat(var(--inv-cols, 4), minmax(0, 1fr));
  grid-auto-rows:min-content;
  gap:8px;
  flex:1;
  min-height:80px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 8px 2px 2px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--dlg-accent, #2bd9c4) rgba(255,255,255,0.06)
}

#invGrid::-webkit-scrollbar{ width:8px }
#invGrid::-webkit-scrollbar-track{ background:rgba(255,255,255,0.06); border-radius:8px; margin:2px }
#invGrid::-webkit-scrollbar-thumb{ background:var(--dlg-accent, #2bd9c4); border-radius:8px; border:2px solid transparent; background-clip:padding-box }
#invGrid::-webkit-scrollbar-thumb:hover{ background:var(--dlg-text, #c9d6e2) }

.inv-slot{
  position:relative;
  width:100%;
  max-width:var(--inv-slot, 64px);
  aspect-ratio:1;
  justify-self:center;
  border-radius:8px;
  border:1px solid var(--dlg-accent, #2bd9c4);
  background:rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
  padding:3px;
  overflow:hidden
}

.inv-slot.selected{
  box-shadow:0 0 0 2px var(--dlg-accent, #2bd9c4) inset
}

.inv-slot-icon{
  flex:1;
  width:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center
}

.inv-slot-icon img{
  max-width:100%;
  max-height:100%;
  object-fit:contain
}

.inv-slot-icon .placeholder{
  font-size:20px;
  opacity:0.4
}

.inv-slot-name{
  width:100%;
  font-size:9px;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
  max-height:2.4em;
  overflow:hidden
}

.inv-slot .count{
  position:absolute;
  top:2px;
  right:4px;
  font-size:11px;
  font-weight:bold;
  color:var(--dlg-accent, #2bd9c4);
  text-shadow:0 1px 2px rgba(0,0,0,0.8)
}

#invDetail{
  border-top:1px solid var(--dlg-accent, #2bd9c4);
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
  max-height:34vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--dlg-accent, #2bd9c4) rgba(255,255,255,0.06)
}

#invDetail::-webkit-scrollbar{ width:8px }
#invDetail::-webkit-scrollbar-track{ background:rgba(255,255,255,0.06); border-radius:8px }
#invDetail::-webkit-scrollbar-thumb{ background:var(--dlg-accent, #2bd9c4); border-radius:8px }

#invDetail.hidden{ display:none }

#invDetailName{
  font-weight:bold;
  font-size:14px
}

#invDetailDesc{
  font-size:12px;
  opacity:0.8
}

#invDetailValue{
  font-size:12px;
  color:var(--dlg-accent, #2bd9c4)
}

#invDetailActions{
  display:flex;
  gap:8px;
  margin-top:6px
}

#invDetailActions button{
  flex:1;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--dlg-accent, #2bd9c4);
  background:transparent;
  color:var(--dlg-text, #c9d6e2);
  cursor:pointer;
  font-size:12px
}

#invDetailActions button:active{
  background:var(--dlg-accent, #2bd9c4);
  color:#0c1118
}

#invDetailActions button.hidden{ display:none }

#minimap{
  width:110px;
  height:110px;
  border:1px solid var(--hud-minimap, rgba(43,217,196,0.4));
  border-radius:8px;
  background:rgba(6,9,13,0.75);
  pointer-events:none;
  z-index:6
}

#minimap[data-style="minimal"]{
  border:none;
  border-radius:50%;
  background:rgba(6,9,13,0.5)
}

#minimap[data-style="large"]{
  width:170px;
  height:170px
}

#dmgFlash{
  position:absolute;
  inset:0;
  background:rgba(255,40,40,0.45);
  pointer-events:none;
  opacity:0;
  z-index:9;
  mix-blend-mode:screen
}

#dmgFlash.show{
  animation:dmgPulse .42s ease-out
}

@keyframes dmgPulse{
  0%{
    opacity:0
  }

  15%{
    opacity:1
  }

  100%{
    opacity:0
  }

}

#crosshair.hit{
  border-color:var(--red);
  box-shadow:0 0 14px var(--red)
}

.sprite-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px
}

.ss-thumb{
  width:52px;
  height:52px;
  border-radius:8px;
  border:1px dashed var(--line-bright);
  background:#0c1118 center/cover no-repeat;
  display:grid;
  place-items:center;
  color:var(--ink-faint);
  font-size:22px
}

.ss-label{
  font-size:10px;
  color:var(--ink-faint);
  letter-spacing:1px
}

.ss-clear{
  position:absolute;
  top:-6px;
  right:-6px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--red);
  color:#0c1118;
  display:grid;
  place-items:center;
  font-size:12px;
  cursor:pointer
}

.dir-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}

.step-row{
  margin-top:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px
}

.step-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:1px;
  margin-bottom:6px
}

.ab-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0
}

.add-action.sm{
  font-size:12px;
  padding:6px;
  margin-top:8px
}

.logic-rules-container select,
.rule select,
.action-block select,
.cond-block select,
.action-params select {
    max-width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

/* ---- Generic per-item HUD anchoring (data-anchor) + scale ----
   Each anchor rule bakes in its own centering transform so a per-item
   --item-scale (set inline by applyHudLayout, itemScale * hudGlobalScale)
   can just be appended as an extra scale() without the anchor rules having
   to know about each other. transform-origin matches the anchor corner/edge
   so scaling grows away from the anchored side, not off-screen. */
.hud-item{
  position:absolute;
  pointer-events:none
}
.hud-item[data-anchor="top-left"]{
  top:calc(10px + var(--safe-top) + var(--item-my,0%));
  left:calc(12px + var(--safe-left,0px) + var(--item-mx,0%));
  transform:scale(var(--item-scale,1));
  transform-origin:top left
}
.hud-item[data-anchor="top-center"]{
  top:calc(10px + var(--safe-top) + var(--item-my,0%));
  left:calc(50% + var(--item-mx,0%));
  transform:translateX(-50%) scale(var(--item-scale,1));
  transform-origin:top center
}
.hud-item[data-anchor="top-right"]{
  top:calc(10px + var(--safe-top) + var(--item-my,0%));
  right:calc(12px + var(--safe-right,0px) - var(--item-mx,0%));
  transform:scale(var(--item-scale,1));
  transform-origin:top right
}
.hud-item[data-anchor="middle-left"]{
  top:calc(50% + var(--item-my,0%));
  left:calc(12px + var(--safe-left,0px) + var(--item-mx,0%));
  transform:translateY(-50%) scale(var(--item-scale,1));
  transform-origin:center left
}
.hud-item[data-anchor="center"]{
  top:calc(50% + var(--item-my,0%));
  left:calc(50% + var(--item-mx,0%));
  transform:translate(-50%,-50%) scale(var(--item-scale,1));
  transform-origin:center
}
.hud-item[data-anchor="middle-right"]{
  top:calc(50% + var(--item-my,0%));
  right:calc(12px + var(--safe-right,0px) - var(--item-mx,0%));
  transform:translateY(-50%) scale(var(--item-scale,1));
  transform-origin:center right
}
.hud-item[data-anchor="bottom-left"]{
  bottom:calc(12px + var(--safe-bottom) - var(--item-my,0%));
  left:calc(12px + var(--safe-left,0px) + var(--item-mx,0%));
  transform:scale(var(--item-scale,1));
  transform-origin:bottom left
}
.hud-item[data-anchor="bottom-center"]{
  bottom:calc(26px + var(--safe-bottom) - var(--item-my,0%));
  left:calc(50% + var(--item-mx,0%));
  transform:translateX(-50%) scale(var(--item-scale,1));
  transform-origin:bottom center
}
.hud-item[data-anchor="bottom-right"]{
  bottom:calc(12px + var(--safe-bottom) - var(--item-my,0%));
  right:calc(12px + var(--safe-right,0px) - var(--item-mx,0%));
  transform:scale(var(--item-scale,1));
  transform-origin:bottom right
}

.hud-stat{
  background:rgba(10,14,20,0.7);
  border:1px solid var(--line-bright);
  border-radius:8px;
  padding:5px 11px;
  font-size:12px;
  font-family:var(--display);
  letter-spacing:1.5px
}

.hud-stat[data-style="minimal"]{
  background:transparent;
  border:none;
  padding:2px 4px;
  font-size:15px;
  text-shadow:0 2px 6px rgba(0,0,0,0.9),0 0 4px rgba(0,0,0,0.9)
}

.hud-stat[data-style="bar"]{
  position:relative;
  overflow:hidden;
  isolation:isolate
}

.hud-stat[data-style="bar"]::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.06);
  z-index:-1
}

.hud-stat[data-style="bar"]::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--fill,100%);
  background:currentColor;
  opacity:0.22;
  z-index:-1;
  transition:width 0.15s
}

.hud-stat .v{
  color:var(--hud-ammo, var(--cyan));
  font-weight:700
}

.hud-stat.hp .v{
  color:var(--hud-hp, var(--green))
}

.hud-stat .lbl img, .hud-bar-wrap .lbl img{
  height:1em;
  width:auto;
  vertical-align:middle;
  display:inline-block
}

.hud-bar-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px
}

.hud-bar-wrap .lbl{
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  color:#dfe7ef;
  text-shadow:0 1px 2px rgba(0,0,0,.6)
}

.hud-bar-wrap .lbl:empty{display:none}

.hud-bar-track{
  width:70px;
  height:6px;
  background:rgba(10,14,20,0.7);
  border-radius:3px;
  overflow:hidden;
  border:1px solid rgba(43,217,196,.2)
}

.hud-bar-wrap[data-style="minimal"] .hud-bar-track{
  border:none;
  background:rgba(255,255,255,0.12);
  height:3px;
  border-radius:1.5px
}

.hud-bar-wrap[data-style="large"] .hud-bar-track{
  width:120px;
  height:11px
}

.hud-bar{
  height:100%;
  border-radius:3px;
  transition:width 0.15s
}

.hud-bar.sta{background:#ffb347}
.hud-bar.oxy{background:#4ac8ff}
.hud-bar.batt{background:#ffd76a}

#hudMsg{
  position:absolute;
  top:38%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:2px;
  color:var(--amber);
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
  pointer-events:none;
  opacity:0;
  transition:opacity .3s
}


#interactHint{
  background:rgba(10,14,20,0.85);
  border:1px solid var(--hud-msg, var(--cyan));
  color:var(--hud-msg, var(--cyan));
  border-radius:22px;
  padding:8px 18px;
  font-family:var(--display);
  letter-spacing:1px;
  font-size:12px;
  opacity:0;
  transition:opacity .15s
}

#interactHint[data-style="minimal"]{
  background:transparent;
  border:none;
  padding:2px 4px;
  text-shadow:0 2px 6px rgba(0,0,0,0.9),0 0 4px rgba(0,0,0,0.9)
}

#interactHint[data-style="badge"]{
  padding-left:14px
}

#interactHint[data-style="badge"]::before{
  content:"E";
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  margin-right:8px;
  border-radius:50%;
  background:var(--hud-msg, var(--cyan));
  color:#0c1118;
  font-size:10px;
  font-weight:700;
  vertical-align:middle
}

.stick.show{
  display:block
}

#hudMsg.show{
  opacity:1
}

/* ---- Automatic subtitles ----
   Anchored to the bottom of the play area and sized in vw/clamp() so it fits
   any screen. The bar itself has no fixed height: long captions wrap and the
   block grows *upward* from the bottom edge rather than running off-screen or
   pushing the rest of the HUD around. Uses the dev's chosen HUD font
   (--hud-font, set on #playUI by applyHudColors) like every other HUD item. */
#subtitleBar{
  position:absolute;
  left:50%;
  bottom:9%;
  transform:translateX(-50%);
  width:min(88%, 900px);
  display:flex;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s;
  z-index:8
}

#subtitleBar.show{
  opacity:1
}

#subtitleText{
  font-family:var(--hud-font, inherit);
  font-size:clamp(13px, 2.1vw, 21px);
  line-height:1.4;
  text-align:center;
  color:#fff;
  background:rgba(0,0,0,0.55);
  border-radius:8px;
  padding:6px 14px;
  text-shadow:0 2px 8px rgba(0,0,0,0.95);
  overflow-wrap:break-word;
  white-space:pre-wrap;
  max-width:100%
}

#interactHint.show{
  opacity:1;
  pointer-events:auto
}

/* ---- Player Visibility ("stealth eye") indicator ----
   Outline-only by design (no fill) so it stays unobtrusive; color/opacity
   swap by state class instead of swapping icons. */
#stealthEye{
  width:34px;
  height:22px;
  color:rgba(220,230,240,0.55);
  opacity:0.55;
  transition:color .2s,opacity .2s
}

#stealthEye svg{
  display:block;
  width:100%;
  height:100%
}

#stealthEye.exposed{
  color:rgba(220,230,240,0.9);
  opacity:0.9
}

#stealthEye.spotted{
  color:var(--red,#ff4d4d);
  opacity:1;
  animation:stealthEyePulse 0.9s ease-in-out infinite
}

@keyframes stealthEyePulse{
  0%,100%{ opacity:1 }
  50%{ opacity:.55 }
}

#wpnPickupHint{
  position:absolute;
  left:50%;
  bottom:calc(74px + var(--safe-bottom));
  transform:translateX(-50%);
  background:rgba(10,14,20,0.85);
  border:1px solid var(--amber);
  color:var(--amber);
  border-radius:14px;
  padding:8px 18px;
  font-family:var(--display);
  letter-spacing:1px;
  font-size:12px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s
}

#wpnPickupHint.show{
  opacity:1;
  pointer-events:auto
}

#wpnPickupHint .wph-track{
  margin-top:6px;
  height:4px;
  border-radius:2px;
  background:rgba(255,179,71,0.25);
  overflow:hidden
}

#wpnPickupHint .wph-fill{
  height:100%;
  width:0%;
  background:var(--amber);
  transition:width .05s linear
}

#jumpBtn{
  position:absolute;
  right:calc(18px + var(--safe-right, 0px));
  bottom:calc(90px + var(--safe-bottom));
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(43,217,196,0.12);
  border:2px solid rgba(43,217,196,0.45);
  color:rgba(43,217,196,0.9);
  font-size:18px;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center
}

#crouchBtn{
  position:absolute;
  right:calc(18px + 52px + 8px + var(--safe-right, 0px));
  bottom:calc(90px + var(--safe-bottom));
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(43,217,196,0.12);
  border:2px solid rgba(43,217,196,0.45);
  color:rgba(43,217,196,0.9);
  font-size:14px;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center
}

#crouchBtn.active{
  background:rgba(43,217,196,0.35)
}

#flashlightBtn{
  position:absolute;
  left:calc(18px + var(--safe-left, 0px));
  bottom:calc(90px + var(--safe-bottom));
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,221,136,0.1);
  border:2px solid rgba(255,221,136,0.4);
  color:rgba(255,221,136,0.9);
  font-size:20px;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center
}

#secondaryBtn{
  position:absolute;
  right:calc(18px + var(--safe-right, 0px));
  bottom:calc(154px + var(--safe-bottom));
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(217,140,43,0.12);
  border:2px solid rgba(217,140,43,0.5);
  color:rgba(217,140,43,0.95);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center
}

#secondaryBtn.active{
  background:rgba(217,140,43,0.4)
}

/* Physcannon freeze button (touch). Top-left by default, and only visible while
   a physcannon is actually holding something -- see updateFreezeBtn. */
#freezeBtn{
  position:absolute;
  left:calc(18px + var(--safe-left, 0px));
  top:calc(18px + var(--safe-top, 0px));
  padding:0 12px;
  height:40px;
  border-radius:10px;
  background:rgba(122,200,255,0.12);
  border:2px solid rgba(122,200,255,0.5);
  color:rgba(190,225,255,0.95);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  z-index:10;
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  display:none;
  align-items:center;
  justify-content:center
}

#exitPlay{
  position:absolute;
  top:calc(10px + var(--safe-top));
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto
}

#playStart{
  position:absolute;
  inset:0;
  background:rgba(6,9,13,0.92);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  pointer-events:auto;
  text-align:center;
  padding:30px
}

#playStart h2{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:3px;
  color:var(--cyan);
  text-transform:uppercase
}

#playStart p{
  color:var(--ink-dim);
  font-size:12px;
  max-width:320px;
  line-height:1.8
}

#playStart.hidden{
  display:none
}

.start-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px
}

.start-h{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:3px;
  color:var(--cyan);
  text-transform:uppercase
}

.end-title{
  font-family:var(--display);
  font-size:30px;
  letter-spacing:4px
}

.end-title.win{
  color:var(--green)
}

.end-title.lose{
  color:var(--red)
}

.opt-card{
  background:var(--panel);
  border:1px solid var(--line-bright);
  border-radius:14px;
  padding:16px;
  margin-bottom:12px
}

.opt-card h4{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:6px;
  color:var(--ink)
}

.opt-card p{
  font-size:11px;
  color:var(--ink-faint);
  line-height:1.6;
  margin-bottom:12px
}

p.gh-fineprint{
  font-size:10px;
  color:var(--ink-faint);
  line-height:1.6;
  border-top:1px solid var(--line);
  margin:12px 0 0;
  padding-top:10px
}

.gh-error{
  color:#e0607a;
  font-size:12px;
  margin-bottom:10px
}

#toast{
  position:fixed;
  left:50%;
  bottom:calc(80px + var(--safe-bottom));
  transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);
  border:1px solid var(--cyan);
  color:var(--ink);
  padding:10px 18px;
  border-radius:10px;
  font-size:12px;
  z-index:80;
  opacity:0;
  transition:.25s;
  pointer-events:none;
  max-width:90vw;
  text-align:center
}

#toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}

.modal-back{
  position:fixed;
  inset:0;
  background:rgba(4,7,11,0.7);
  z-index:60;
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:max(env(safe-area-inset-top,0px),20px) 16px max(env(safe-area-inset-bottom,0px),20px)
}

.modal-back.open{
  display:flex
}

.modal{
  background:var(--panel);
  border:1px solid var(--cyan);
  border-radius:16px;
  width:100%;
  max-width:380px;
  padding:20px;
  box-shadow:var(--shadow);
  flex-shrink:0;
  margin-block:auto
}

.modal h3{
  font-family:var(--display);
  letter-spacing:1px;
  margin-bottom:14px;
  color:var(--cyan)
}

/* Prevent iOS auto-zoom on inputs inside modals */
.modal input,
.modal select,
.modal textarea{
  font-size:max(16px, 1em);
  touch-action:manipulation
}

.loader{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:200;
  display:grid;
  place-items:center
}

.loader .l-in{
  text-align:center
}

.loader .l-title{
  font-family:var(--display);
  font-size:24px;
  letter-spacing:4px;
  color:var(--cyan);
  text-transform:uppercase
}

.loader .l-bar{
  width:180px;
  height:3px;
  background:var(--line);
  margin:16px auto 0;
  border-radius:2px;
  overflow:hidden
}

.loader .l-bar i{
  display:block;
  height:100%;
  width:30%;
  background:var(--cyan);
  animation:load 1s infinite
}

@keyframes load{
  0%{
    transform:translateX(-100%)
  }

  100%{
    transform:translateX(430%)
  }

}

.hidden{
  display:none!important
}

/* trigger id inline badge */
.trigger-badge{
  display:inline-block;
  background:rgba(255,179,71,0.15);
  border:1px solid var(--amber);
  color:var(--amber);
  font-size:9px;
  padding:2px 7px;
  border-radius:5px;
  letter-spacing:.5px;
  font-family:var(--mono)
}

.rule-trigger-id{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:6px 8px;
  background:rgba(255,179,71,0.07);
  border:1px solid rgba(255,179,71,0.2);
  border-radius:7px;
  font-size:11px;
  color:var(--ink-dim)
}

.rule-trigger-id input{
  flex:1;
  padding:4px 8px;
  font-size:11px;
  background:var(--bg);
  border:1px solid var(--line-bright);
  color:var(--amber);
  border-radius:6px
}

/* ---- HUD CSS variables (applied by applyHudColors) ---- */
#playUI{
  --hud-hp: #5cff9d;
  --hud-ammo: #2bd9c4;
  --hud-msg: #ffb347;
  --hud-fs: 13px;
  --hud-minimap: #2bd9c4;
  --hud-font: inherit;
  --dlg-bg: #05080d;
  --dlg-accent: #2bd9c4;
  --dlg-text: #c9d6e2;
  --dlg-font: inherit;
}

.hud-stat .v{
  color:var(--hud-ammo)
}
.hud-stat.hp .v{
  color:var(--hud-hp)
}

/* ---- Dialogue overlay (editor play view) ---- */
#dialogueBox{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--dlg-bg, #05080d);
  border-top:2px solid var(--dlg-accent, #2bd9c4);
  padding:16px 20px 28px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
  color:var(--dlg-text, #c9d6e2);
  font-family:var(--dlg-font, inherit)
}
#dialogueBox.hidden{
  display:none
}
#dialogueSpeaker{
  font-size:11px;
  letter-spacing:2px;
  color:var(--dlg-accent, #2bd9c4);
  text-transform:uppercase
}
#dialogueText{
  font-size:14px;
  line-height:1.6;
  color:var(--dlg-text, #c9d6e2)
}
#dialogueChoices{
  display:flex;
  flex-direction:column;
  gap:6px
}

/* ---- Loading modal / level-transition fade (editor play view) ----
   Mirrors the exported game's #loadingModal/#levelFadeOverlay in
   data/export-play.js exactly, so the editor's own Play tab can preview
   the same loading/Click-to-Continue/fade behavior instead of skipping it. */
#loadingModal{
  position:fixed;
  inset:0;
  background:rgba(5,8,13,0.97);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  z-index:100;
  transition:opacity 0.4s;
  /* #playUI (its parent here) is pointer-events:none so the canvas gets
     clicks by default -- without this override, #loadingModal's own click/
     touchend listener for Click to Continue would never fire, same reason
     .touch-zone above needs pointer-events:auto too. */
  pointer-events:auto
}
#loadingModal.hidden{
  opacity:0;
  pointer-events:none;
  visibility:hidden
}
.load-title{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:15px;
  letter-spacing:2px;
  color:var(--theme, #2bd9c4)
}
.load-bar-track{
  width:240px;
  height:4px;
  background:color-mix(in srgb, var(--theme, #2bd9c4) 15%, transparent);
  border-radius:2px;
  overflow:hidden
}
.load-bar-fill{
  height:100%;
  background:var(--theme, #2bd9c4);
  border-radius:2px;
  width:0%;
  transition:width 0.2s ease
}
.load-label{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:12px;
  letter-spacing:1px;
  color:#9fb0c0
}
#loadContinueBtn.hidden{ display:none }
#loadContinueBtn{
  margin-top:10px;
  color:var(--theme, #2bd9c4);
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:13px;
  letter-spacing:1px;
  pointer-events:none;
  animation:loadContinuePulse 1.6s ease-in-out infinite
}
@keyframes loadContinuePulse{
  0%, 100%{ opacity:0.5 }
  50%{ opacity:1 }
}
#loadingModal.ready{ cursor:pointer }
#levelFadeOverlay{
  position:fixed;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  z-index:90
}
/* The fill has to derive from --dlg-accent like the border and text do --
   it was a hardcoded rgba() of the default teal, so changing the dialogue
   Accent Color recolored the outline and label but left the inside of every
   choice button stuck on the old teal. Percentages match the exported
   game's own .dlg-choice (data/export-play.js) so the editor's Play tab
   previews exactly what ships. */
.dlg-choice{
  background:color-mix(in srgb, var(--dlg-accent, #2bd9c4) 12%, transparent);
  border:1px solid var(--dlg-accent, #2bd9c4);
  color:var(--dlg-accent, #2bd9c4);
  padding:8px 14px;
  border-radius:8px;
  text-align:left;
  font-size:12px;
  cursor:pointer;
  letter-spacing:.5px;
  font-family:var(--dlg-font, inherit)
}
.dlg-choice:active{
  background:color-mix(in srgb, var(--dlg-accent, #2bd9c4) 30%, transparent)
}
.dlg-choice.selected{
  background:color-mix(in srgb, var(--dlg-accent, #2bd9c4) 30%, transparent);
  border-color:var(--dlg-accent, #2bd9c4);
  box-shadow:0 0 0 1px var(--dlg-accent, #2bd9c4) inset
}

/* Collapsible rules */
.rule.collapsed .rule-body { display: none; }
.rule-head .chevron {
  font-size: 13px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Item toolbar (dup/move) */
.item-tb {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}
.tb-btn {
  font-size: 15px;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
}
.tb-btn:active {
  background: var(--line);
  color: var(--ink);
}
.tb-btn.mv-active {
  color: var(--amber);
  background: rgba(255,179,71,0.15);
}

/* Condition block controls at top-right */
.cond-block { position: relative; padding-top: 16px; }
.cond-controls {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 2px;
  align-items: center;
  z-index: 1;
}

/* Drop zones */
.drop-zone {
  height: 26px;
  margin: 3px 0;
  border-radius: 6px;
  background: rgba(255,179,71,0.07);
  border: 1px dashed rgba(255,179,71,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(255,179,71,0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--display);
}
.drop-zone:active {
  background: rgba(255,179,71,0.18);
}

/* Move cancel bar */
.move-cancel-bar {
  background: rgba(255,179,71,0.1);
  border: 1px solid rgba(255,179,71,0.3);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--amber);
  cursor: pointer;
  margin-bottom: 10px;
  font-family: var(--display);
  letter-spacing: 0.5px;
}
.move-cancel-bar:active {
  background: rgba(255,179,71,0.2);
}

/* Move source highlight */
.move-source {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-radius: 10px;
}

.tool-label-popup {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(18,26,36,0.95);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 5px 11px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  backdrop-filter: blur(6px);
  z-index: 9999;
}
.tool-label-popup.show {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* ══════════════════════════════════════════════
   LOGIC EDITOR — THEMED INPUTS & CONTROLS
   ══════════════════════════════════════════════ */

/* ── Shared select base ── */
.rule-head select,
.cond-block .ab-top select,
.action-block .ab-top select,
.action-params select,
.cond-block .action-params select,
.rule-head .param-inline select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232bd9c4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  border-radius: 7px;
}

/* ── Main type selects (WHEN / IF / action type) ── */
.rule-head select,
.cond-block .ab-top select,
.action-block .ab-top select {
  border: 1px solid rgba(43,217,196,0.4);
  border-left: 3px solid var(--cyan);
  background-color: rgba(43,217,196,0.07);
  color: var(--cyan);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.rule-head select:focus,
.cond-block .ab-top select:focus,
.action-block .ab-top select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(43,217,196,0.18);
  outline: none;
}

/* ── Property/param selects ── */
.action-params select,
.cond-block .action-params select,
.rule-head .param-inline select {
  border: 1px solid rgba(20,168,150,0.4);
  border-left: 3px solid var(--cyan-deep);
  background-color: rgba(20,168,150,0.07);
  color: #5ec9bf;
  font-size: 12px;
}

.action-params select:focus,
.cond-block .action-params select:focus {
  border-color: var(--cyan-deep);
  box-shadow: 0 0 0 2px rgba(20,168,150,0.15);
  outline: none;
}

/* ── Select dropdown options & optgroups ──
   Note: Firefox/Chrome on desktop support these.
   Mobile WebKit ignores most option styling (OS renders natively).    */
select option {
  background-color: #0e141d;
  color: var(--ink);
  padding: 6px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}

select option:hover,
select option:focus {
  background-color: rgba(43,217,196,0.15);
  color: var(--cyan);
}

select option:checked,
select option[selected] {
  background-color: rgba(43,217,196,0.2);
  color: var(--cyan);
  font-weight: 600;
}

select optgroup {
  background-color: #0a0e14;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif;
  padding: 4px 0;
}

select optgroup option {
  background-color: #0e141d;
  color: var(--ink);
  padding-left: 14px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'IBM Plex Mono', monospace;
}

select optgroup option:checked {
  background-color: rgba(43,217,196,0.2);
  color: var(--cyan);
}

/* ── Number inputs — amber ── */
.action-params input[type=number],
.rule-head input[type=number],
.cond-block .action-params input[type=number],
.rule-head .param-inline input[type=number] {
  border: 1px solid rgba(255,179,71,0.35);
  border-left: 3px solid var(--amber);
  background: rgba(255,179,71,0.06);
  color: var(--amber);
}

.action-params input[type=number]:focus,
.cond-block .action-params input[type=number]:focus,
.rule-head input[type=number]:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(255,179,71,0.15);
  outline: none;
}

/* Hide spinner arrows on number inputs */
.action-params input[type=number]::-webkit-inner-spin-button,
.action-params input[type=number]::-webkit-outer-spin-button,
.rule-head input[type=number]::-webkit-inner-spin-button,
.rule-head input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.action-params input[type=number],
.rule-head input[type=number] {
  -moz-appearance: textfield;
}

/* ── Text inputs — neutral ink ── */
.action-params input[type=text],
.cond-block .action-params input[type=text],
.rule-head input[type=text],
.rule-head .param-inline input[type=text] {
  border: 1px solid rgba(111,130,150,0.35);
  border-left: 3px solid var(--ink-dim);
  background: rgba(111,130,150,0.06);
  color: var(--ink);
}

.action-params input[type=text]:focus,
.cond-block .action-params input[type=text]:focus {
  border-color: var(--ink-dim);
  box-shadow: 0 0 0 2px rgba(111,130,150,0.12);
  outline: none;
}

/* ── Checkboxes — fully custom themed ── */
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  background: var(--bg-2);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

input[type=checkbox]:checked {
  background: var(--cyan-deep);
  border-color: var(--cyan);
}

input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

input[type=checkbox]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(43,217,196,0.25);
}

/* NOT checkbox: amber tint */
.cond-not-label input[type=checkbox]:checked {
  background: rgba(255,179,71,0.25);
  border-color: var(--amber);
}

.cond-not-label input[type=checkbox]:checked::after {
  border-color: var(--amber);
}

/* ── Scrollbars — all scrollable regions ── */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-2);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb {
  background: var(--line-bright);
  border-radius: 3px;
  transition: background 0.15s;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-deep);
}

*::-webkit-scrollbar-corner {
  background: var(--bg-2);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) var(--bg-2);
}

/* ── Rule / condition / action block structure ── */
.rule {
  border-left: 3px solid var(--cyan);
  background: rgba(10,14,20,0.4);
  border-color: var(--line-bright);
}

.cond-block {
  border-left-width: 3px;
}

.action-block {
  border-left: 3px solid var(--line-bright);
}

.cond-sub-list .action-block {
  border-left: 3px solid var(--line-bright);
  background: rgba(31,44,58,0.35);
}

/* ── Param labels ── */
.action-block .action-params .p label,
.cond-sub-list .action-block .action-params .p label {
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

.cond-block > .action-params .p label {
  color: rgba(255,179,71,0.55);
}

/* ── Keyword labels ── */
.rule-head .when  { color: var(--cyan);    letter-spacing: 2px; font-size: 10px; }
.cond-if-label {
  color: var(--cyan);
  letter-spacing: 2px;
  font-size: 10px;
  margin-left: 6px;
}
.cond-then-label  { color: var(--ink-dim); letter-spacing: 2px; font-size: 10px; border-top-color: var(--line); }

/* ── Add buttons ── */
.add-action { border-color: rgba(43,217,196,0.3); color: var(--cyan); }
.add-cond   { border-color: rgba(255,179,71,0.3);  color: var(--amber); }

/* ── Chevron ── */
.rule-head .chevron       { color: var(--cyan); opacity: 0.5; }
.rule-head .chevron:hover { opacity: 1; }

/* ── Notes textareas ── */
.rule-head textarea,
.cond-block textarea {
  min-height: 24px;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.rule-head textarea:focus,
.cond-block textarea:focus { opacity: 1; }

/* ── Cooldown & chance param labels (set via data-param-key in JS) ── */
.action-params .p[data-param-key=_cooldown] label { color: rgba(111,130,150,0.65); }
.action-params .p[data-param-key=_chance]   label { color: rgba(111,130,150,0.65); }

/* ── Range sliders ── */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  padding: 0;
}

input[type=range]:focus {
  outline: none;
}

/* Track */
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line-bright);
}

input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line-bright);
  border: none;
}

/* Thumb */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px rgba(43,217,196,0.5);
  margin-top: -12px;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s;
}

input[type=range]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
  box-shadow: 0 0 8px rgba(43,217,196,0.5);
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s;
}

input[type=range]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(43,217,196,0.7);
}

input[type=range]:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(43,217,196,0.7);
}

/* Slider+number wrapper */
.slider-num {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.slider-num input[type=range] {
  flex: 1;
  min-width: 0;
}

.slider-num input[type=number] {
  width: 58px;
  min-width: 58px;
  flex: none;
  padding: 8px 6px;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--cyan);
  background: rgba(43,217,196,0.07);
  color: var(--cyan);
  border-radius: 8px;
}

/* Hide spinners on the number part */
.slider-num input[type=number]::-webkit-inner-spin-button,
.slider-num input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider-num input[type=number] {
  -moz-appearance: textfield;
}



/* ══════════════════════════════════════════════
   LOGIC EDITOR — ICONS
   ══════════════════════════════════════════════ */

/* Icon badge top-left of rule/condition/action cards */
.logic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
}

.logic-icon.ic-rule {
  background: rgba(43,217,196,0.12);
  color: var(--cyan);
  border: 1px solid rgba(43,217,196,0.3);
}

.logic-icon.ic-cond {
  background: rgba(255,179,71,0.12);
  color: var(--amber);
  border: 1px solid rgba(255,179,71,0.3);
}

.logic-icon.ic-action {
  background: rgba(111,130,150,0.12);
  color: var(--ink-dim);
  border: 1px solid rgba(111,130,150,0.25);
}

/* Per-event-type icon colours on rule cards */
.logic-icon.ic-rule[data-event=update]  { color: var(--cyan); }
.logic-icon.ic-rule[data-event=spawn]   { color: var(--green); background: rgba(92,255,157,0.1); border-color: rgba(92,255,157,0.3); }
.logic-icon.ic-rule[data-event=death]   { color: var(--red);   background: rgba(255,92,92,0.1);  border-color: rgba(255,92,92,0.3); }
.logic-icon.ic-rule[data-event=shot]    { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3); }
.logic-icon.ic-rule[data-event=touch]   { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-rule[data-event=near],
.logic-icon.ic-rule[data-event=far]     { color: #7abbff;      background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}
.logic-icon.ic-rule[data-event=interact]{ color: var(--green); background: rgba(92,255,157,0.1); border-color: rgba(92,255,157,0.3); }
.logic-icon.ic-rule[data-event=tick]    { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3); }
.logic-icon.ic-rule[data-event=low_hp]  { color: var(--red);   background: rgba(255,92,92,0.1);  border-color: rgba(255,92,92,0.3); }
.logic-icon.ic-rule[data-event=trigger] { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-rule[data-event=path_end],
.logic-icon.ic-rule[data-event=path_start] { color: #7abbff;   background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}

/* Per-condition-type icon colour */
.logic-icon.ic-cond[data-cat=Spatial]   { color: #7abbff;      background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}
.logic-icon.ic-cond[data-cat=Player]    { color: var(--green); background: rgba(92,255,157,0.1); border-color: rgba(92,255,157,0.3);}
.logic-icon.ic-cond[data-cat=Entity]    { color: var(--cyan);  }
.logic-icon.ic-cond[data-cat=Random]    { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3);}
.logic-icon.ic-cond[data-cat=Variable]  { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-cond[data-cat=World]     { color: #7abbff;      background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}
.logic-icon.ic-cond[data-cat=State]     { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}

/* Per-action-type icon colour */
.logic-icon.ic-action[data-cat=Combat]    { color: var(--red);   background: rgba(255,92,92,0.1);  border-color: rgba(255,92,92,0.3);}
.logic-icon.ic-action[data-cat=Movement] { color: #7abbff;      background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}
.logic-icon.ic-action[data-cat=Player]   { color: var(--green); background: rgba(92,255,157,0.1); border-color: rgba(92,255,157,0.3);}
.logic-icon.ic-action[data-cat=Entity]   { color: var(--cyan);  }
.logic-icon.ic-action[data-cat=UI]       { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3);}
.logic-icon.ic-action[data-cat=Audio]    { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-action[data-cat=Variable] { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-action[data-cat=World]    { color: #7abbff;      background: rgba(122,187,255,0.1);border-color: rgba(122,187,255,0.3);}
.logic-icon.ic-action[data-cat=Flow]     { color: var(--ink-dim);background: rgba(111,130,150,0.1);border-color: rgba(111,130,150,0.3);}
.logic-icon.ic-action[data-cat=Trigger]  { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3);}
.logic-icon.ic-action[data-cat=State]    { color: #c97df7;      background: rgba(201,125,247,0.1);border-color: rgba(201,125,247,0.3);}
.logic-icon.ic-action[data-cat=Random]   { color: var(--amber); background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.3);}

/* Condition block collapsing */
.cond-block.collapsed .action-params,
.cond-block.collapsed .cond-then-label,
.cond-block.collapsed .cond-sub-list,
.cond-block.collapsed .add-action,
.cond-block.collapsed textarea,
.cond-block.collapsed > div:not(.cond-controls):not(.ab-top) {
    display: none;
}



/*  OVERRIDES  */
/* ── Section titles: centered with symmetric line decorators ── */
.section-title {
  justify-content: center;
  text-align: center;
}
.section-title::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--cyan));
  width: auto;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--cyan));
}

/* ── Inline toggles: stack label above switch ── */
.inline-toggle {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.inline-toggle > label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* ── Grouped sections: darker card background ── */
.action-block {
  background: rgba(6, 9, 13, 0.55);
}
.step-row {
  background: rgba(6, 9, 13, 0.4);
  border-color: var(--line-bright);
}
.rule {
  background: rgba(6, 9, 13, 0.45);
}
.cond-block {
  background: rgba(255, 180, 40, 0.03);
}

/* ── Sheet body: slightly darker base so groups pop ── */
.sheet .sheet-body {
  background: var(--bg-2);
}

/* ── List items: a touch darker for contrast ── */
.list-item {
  background: var(--bg-2);
}

/* ── Row grids: tighten vertical rhythm between grouped fields ── */
.row2,
.row3 {
  margin-bottom: 10px;
}

/* ── Inline toggles: centered label above, switch below ── */
.inline-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.inline-toggle > label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}

/* ── row2 / row3 grid items: center their contents ── */
.row2 > *,
.row3 > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Fields: center label and control ── */
.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.field > label {
  text-align: center;
}
.field input,
.field select,
.field textarea {
  text-align: center;
}

/* ── Blood color row specifically: items side by side, both centered ── */
.row2 .inline-toggle,
.row2 .field {
  align-items: center;
  justify-content: center;
}

/* ── Hints: centered ── */
.hint {
  text-align: center;
}

/* ── List items inside fields: keep internal layout but center the block ── */
.field .list-item {
  width: 100%;
  text-align: left; /* internal list item text stays left-aligned */
}

/* ── ab-row: center the flex items ── */
.ab-row {
  justify-content: center;
}

/* ── Step head: center ── */
.step-head {
  justify-content: center;
  gap: 10px;
}

/* ── Add action buttons: already centered by text-align, but ensure block ── */
.add-action {
  text-align: center;
}

/* ── Buttons: already full width but ensure label is centered ── */
.btn {
  justify-content: center;
}

/* EVENT SYSTEM PICKER UI */
/* ===== Mobile picker modal ===== */
.ui-picker-overlay{position:fixed;inset:0;background:rgba(4,7,11,0.6);z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ui-picker-overlay.open{opacity:1}
.ui-picker-sheet{width:100%;max-width:520px;max-height:calc(100vh - 32px);background:var(--panel);border:1px solid var(--cyan);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transform:scale(.96);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ui-picker-overlay.open .ui-picker-sheet{transform:scale(1)}
.ui-picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.ui-picker-title{font-family:var(--display);font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:13px;color:var(--cyan)}
.ui-picker-close{font-size:24px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:2px 10px}
.ui-picker-search{padding:10px 14px;border-bottom:1px solid var(--line)}
.ui-picker-search input{width:100%;background:var(--bg-2);border:1px solid var(--line-bright);color:var(--ink);border-radius:10px;padding:11px 13px;font-family:var(--mono);font-size:16px}
.ui-picker-search input:focus{outline:none;border-color:var(--cyan)}
.ui-picker-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 10px 16px;flex:1}
.ui-picker-group{font-family:var(--display);font-size:10px;letter-spacing:2px;color:var(--cyan);text-transform:uppercase;padding:12px 8px 6px;position:sticky;top:0;background:var(--panel);z-index:1}
.ui-picker-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 12px;border-radius:10px;cursor:pointer;color:var(--ink);font-size:14px;border:1px solid transparent}
.ui-picker-item:active{background:var(--panel-2)}
.ui-picker-item.sel{background:rgba(43,217,196,0.12);border-color:rgba(43,217,196,0.4);color:var(--cyan)}
.ui-picker-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-picker-tick{color:var(--cyan);flex:none}
.ui-picker-prev{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--line-bright);background:var(--bg-2);color:var(--cyan);font-size:13px;display:grid;place-items:center;cursor:pointer}
.ui-picker-empty{text-align:center;color:var(--ink-faint);padding:30px;font-size:12px}

/* ===== Colour field + picker ===== */
.color-field{display:flex;width:100%}
.color-swatch{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:9px;border:1px solid var(--line-bright);cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cp-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px}
.cp-preview{height:46px;border-radius:10px;border:1px solid var(--line-bright);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:1px}
.cp-sv{position:relative;width:100%;height:180px;border-radius:12px;border:1px solid var(--line-bright);touch-action:none;cursor:crosshair}
.cp-hue{position:relative;width:100%;height:26px;border-radius:13px;border:1px solid var(--line-bright);touch-action:none;cursor:pointer;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-handle{position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none}
.cp-hue-handle{top:50%}
.cp-hex-row{display:flex;gap:10px}
.cp-hex{flex:1;text-align:center;text-transform:uppercase;letter-spacing:2px;background:var(--bg-2);border:1px solid var(--line-bright);color:var(--ink);border-radius:10px;padding:11px;font-family:var(--mono);font-size:16px}
.cp-hex:focus{outline:none;border-color:var(--cyan)}
.cp-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cp-preset{aspect-ratio:1;border-radius:8px;border:1px solid rgba(255,255,255,0.15);cursor:pointer}
.cp-preset:active{transform:scale(.92)}

.tool-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line-bright) transparent;
    scroll-snap-type: y proximity;
}
.tool-scroll.is-row {
    flex-direction: row;
    max-height: none;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
}
.tool-scroll .tool {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.tool-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.tool-scroll::-webkit-scrollbar-thumb {
    background: var(--line-bright);
    border-radius: 3px;
}
.tool-scroll::-webkit-scrollbar-track { background: transparent; }


/* ── Built-in asset browser ─────────────────────────────────────────────── */
/* The browser modal sets padding:0 so its bars can span edge to edge, which
   leaves the default modal <h3> flush against the border. Turn it into a real
   centred title bar that matches the tab/action bars above and below. */
.modal h3.asset-browser-title {
    margin: 0;
    padding: 13px 16px;
    text-align: center;
    background: var(--bg-dark, #0c1118);
    border-bottom: 1px solid var(--line, #2a3340);
    flex-shrink: 0;
}

/* type=search falls outside the global input[type=text] rule, so it needs its
   own look. Font size is deliberately left to `.modal input` (>=16px keeps iOS
   from zooming the page when the field is focused). */
.asset-search {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--line-bright);
    border-radius: 9px;
    color: var(--ink);
    font-family: var(--mono);
    padding: 9px 12px 9px 34px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8296' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.7 15.7 L21 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 15px 15px;
    transition: border-color .12s;
}

.asset-search::placeholder {
    color: var(--ink-faint);
}

.asset-search:focus {
    outline: none;
    border-color: var(--cyan);
}

/* The stock clear button is near-black on a near-black field — replace it. */
.asset-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8296' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 5 L19 19 M19 5 L5 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

.asset-search::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* ============================================================
   WIDE-SCREEN (LANDSCAPE / DESKTOP) DIALOG LAYOUT
   ------------------------------------------------------------
   Every editor dialog in here is authored mobile-first: either a
   full-width bottom sheet (.sheet -- entity editor, inspector) or
   a 380px card (.modal -- game settings, edit model, asset), each
   holding one tall column of collapsible section cards. That is
   right on a phone and wrong on a monitor, where it becomes a
   thin ribbon of controls with a mile of empty space either side
   and a mile of scrolling.

   The phone layout is deliberately left untouched. The two layout
   helpers below are no-ops at narrow widths -- .dlg-grid resolves
   to a single column via auto-fill and takes its row spacing from
   each card's own margin-bottom (row-gap:0), and .dlg-split stays
   plain block flow -- so everything only kicks in once there is
   real width to spend. Same DOM, same order, same collapse
   behaviour: the cards simply sit side by side instead of stacked,
   which is the whole idea. Nothing new for the user to learn.

   Two sizes, because "not 380px" is not one answer. .dlg-md is an
   ordinary desktop dialog width for the flat forms (Performance, Menu
   Options, About, Levels) -- wide enough to stop the cramping, narrow
   enough that a text field doesn't stretch to a comical 1100px. .dlg-lg
   is for the dialogs that have columns of cards to fill.

   Markup contract (opt-in, per dialog):
     .dlg-md                   -> ordinary desktop dialog width
     .dlg-lg                   -> full multi-column frame
     .dlg-head                 -> title bar, sticky + close button
     .dlg-menu                 -> a dialog that is just a list of buttons
     .dlg-split                -> lead column | cards column
       .dlg-lead               -> preview + identity fields
       .dlg-grid               -> the collapsible section cards
     .dlg-foot                 -> Save / Duplicate / Delete row
   ============================================================ */

/* Section cards flow into as many columns as the dialog is wide.
   The columns themselves are real elements dealt by Util.dlgColumns()
   -- see the comment there for why CSS grid (and its tallest-card-wins
   rows) is the wrong tool: inside a column each card is plain block
   flow, so collapsing one pulls every card below it straight up with
   no gap left behind. At one column this is what a phone always had. */
.dlg-grid.dlg-cols{
  display:flex;
  align-items:flex-start;
  column-gap:12px
}

.dlg-grid.dlg-cols>.dlg-col{
  flex:1 1 0;
  min-width:0
}

.dlg-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px
}

/* Pinned at every width, not just on desktop: these dialogs are long
   enough that the way out has to stay on screen. On a phone the
   scroll container is .modal-back and the negative margins pull the
   bar flush to the card's edges (this is what the Game Settings
   modal used to hand-roll for itself); from 900px up .modal.dlg-lg
   scrolls itself and the offsets are re-stated for its wider
   padding. */
.modal.dlg-lg>.dlg-head{
  position:sticky;
  top:0;
  z-index:6;
  margin:-20px -20px 14px;
  padding:14px 20px 10px;
  background:var(--panel);
  border-bottom:1px solid var(--line-bright);
  border-radius:15px 15px 0 0
}

.dlg-head h3{
  margin:0
}

.dlg-x{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--bg-2);
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-family:var(--mono);
  font-size:14px;
  line-height:1;
  cursor:pointer
}

.dlg-x:hover{
  background:var(--cyan);
  color:var(--bg)
}

/* Action bar. Ruled off as its own group so Save / Duplicate / Delete
   read as "what this dialog does" rather than as one more unlabelled
   block hanging off the end of the last section. Always a sibling of
   .dlg-split, never inside it. */
.dlg-foot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line-bright)
}

/* A dialog that is only a column of buttons (the project menu) wastes
   most of a desktop screen stacking them. Same buttons, same order,
   just wrapped. */
.dlg-menu>.btn{
  margin-bottom:8px
}

@media (min-width:760px){
  .dlg-menu{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:8px
  }

  .dlg-menu>.btn{
    margin-bottom:0
  }
}

/* ---- Roomy frame: enough width to actually hold columns ---- */
@media (min-width:900px){
  /* An ordinary desktop dialog: no columns, no pinned header, just not
     squeezed into a phone-portrait card. .modal-back keeps the scroll. */
  .modal.dlg-md{
    max-width:min(640px,94vw)
  }

  /* .modal.dlg-lg scrolls itself rather than letting .modal-back scroll
     the whole card, so the header below can stay pinned. */
  .modal.dlg-lg{
    /* Declared on the dialog, not the bar, so the sticky lead column --
       a sibling of the bar, not a descendant -- inherits it too. */
    --dlg-head-h:60px;
    max-width:min(1180px,94vw);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 22px 22px
  }

  /* Fixed height so --dlg-head-h is exact rather than a guess a wrapped
     title could break. The title truncates instead of pushing the bar
     taller than what the sticky preview below clears. */
  .modal.dlg-lg>.dlg-head{
    height:var(--dlg-head-h);
    margin:0 -22px 16px;
    padding:0 22px
  }

  .modal.dlg-lg>.dlg-head h3{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  /* The bottom sheet becomes a centred dialog. A drawer anchored to
     the bottom edge of a 1440px screen reads as a notification bar,
     not as "the thing you are editing". */
  .sheet{
    left:50%;
    right:auto;
    top:50%;
    bottom:auto;
    width:min(560px,94vw);
    max-height:88vh;
    border:1px solid var(--cyan);
    border-radius:16px;
    padding-bottom:0;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-46%) scale(.985);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s
  }

  .sheet.open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1)
  }

  /* Entity editor: dense enough to earn the extra width. Inspector
     panels stay at the 560px default above. */
  .sheet.dlg-lg{
    width:min(1180px,94vw)
  }

  .sheet .grab{
    display:none
  }

  .sheet .sheet-head{
    padding:13px 18px 12px
  }

  .sheet .sheet-body{
    padding:16px 18px 20px
  }

  /* Side by side, not three stacked full-width bars -- .btn is width:100%,
     which only makes sense in a phone-width column. The inline margin-top
     each button carries has to be cancelled with it. */
  .dlg-foot{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px
  }

  .dlg-foot>.btn,
  .dlg-foot>.btn-row{
    flex:1 1 200px;
    width:auto;
    margin-top:0 !important
  }
}

/* ---- Lead column: preview + identity beside the sections ---- */
@media (min-width:1100px){
  .dlg-split{
    display:grid;
    grid-template-columns:minmax(290px,360px) minmax(0,1fr);
    column-gap:20px;
    align-items:start
  }

  /* Stays put while the sections scroll, so you can see what you are
     editing (the model/texture preview, the entity's name) the whole
     way down instead of only at the top. */
  .dlg-split>.dlg-lead{
    position:sticky;
    top:4px
  }

  /* ...and clears the pinned title bar, which only .modal.dlg-lg has --
     the sheet's header sits outside its scroll container. Pinned to the
     bar's fixed height rather than a guess, so a long title that wraps
     can't end up sitting on top of the preview. */
  .modal.dlg-lg .dlg-split>.dlg-lead{
    top:var(--dlg-head-h)
  }
}

/* ---- Sprite / image editor overlay (SpriteEditor.open) ----
   Built inline in data/asset-browser-sprite.js as one centred 520px
   column: header, canvas, tool groups, save. Those inline styles are
   left alone as the phone layout, and overridden here (hence the
   !important -- inline styles are what is being beaten) into the
   split every image editor uses: canvas on the left with all the room
   it can take, tools in a scrolling rail on the right, save pinned
   under the canvas. Nothing moves between the two layouts, so it is
   the same four blocks either way. fitView() in that file matches
   this breakpoint and measures the canvas cell instead of assuming
   the 496px phone box. */
@media (min-width:900px){
  .spred{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 360px;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "head  panel"
      "canv  panel"
      "save  panel";
    column-gap:20px;
    align-items:stretch !important;
    padding:0 24px 24px !important;
    overflow:hidden !important
  }

  .spred-head{
    grid-area:head;
    max-width:none !important;
    padding:18px 2px 10px !important
  }

  .spred-canvas{
    grid-area:canv;
    max-width:none !important;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:0 !important
  }

  /* Own scrollbar, so a long effects list never pushes the canvas
     off screen the way it does in the single-column phone stack. */
  .spred-panel{
    grid-area:panel;
    max-width:none !important;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:18px 0 24px !important
  }

  .spred-save{
    grid-area:save;
    width:100% !important;
    max-width:none !important;
    margin-bottom:0 !important
  }
}

/* ---- Landscape phones (wide but very short) ----
   Too narrow for the centred-dialog frame above, but the bottom sheet
   at 82vh leaves ~320px of usable panel on a 390px-tall screen. Claw
   the vertical space back by trimming the chrome; the card columns
   need no help here, .dlg-grid already gives a ~810px-wide sheet body
   two of them on its own. */
@media (orientation:landscape) and (max-height:560px) and (max-width:899px){
  .sheet{
    max-height:94vh
  }

  .sheet .grab{
    margin:5px auto 2px
  }

  .sheet .sheet-head{
    padding:4px 14px 8px
  }

  .sheet .sheet-body{
    padding:10px 14px 16px
  }

  /* Landscape notches sit on the left/right edges, not the top. */
  .modal-back{
    padding:10px max(env(safe-area-inset-right,0px),14px) 10px max(env(safe-area-inset-left,0px),14px)
  }

  /* Same idea for the content-heavy modals: use the width the screen
     actually has instead of the 380px phone-portrait card. */
  .modal.dlg-lg{
    max-width:min(96vw,900px)
  }
}