/* ==========================================================================
   NarniAI Trial Pathway Builder
   Black Opal + Codefall
   Canonical interaction model: Deck ⇄ Hand ⇄ Pathway
   ========================================================================== */


/* ==========================================================================
   ROOT
   ========================================================================== */

:root{
  --void:#030507;
  --ink:#07100d;

  --panel:rgba(6,12,14,.90);
  --panel-2:rgba(9,16,20,.84);

  --line:rgba(112,244,255,.18);

  --cyan:#47e9ff;
  --teal:#1ef0d1;
  --violet:#9b6cff;
  --green:#73ff6c;
  --amber:#ffb34d;
  --red:#ff624f;

  --text:#f3f6f7;
  --dim:#95a5aa;

  --radius:14px;

  --shadow:
    0 28px 70px rgba(0,0,0,.58);
}


/* ==========================================================================
   RESET
   ========================================================================== */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;

  background:#020304;
  color:var(--text);

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    sans-serif;
}

button{
  font:inherit;
}

button,
[draggable="true"]{
  user-select:none;
}

.screen{
  display:none;

  position:relative;

  min-height:100vh;

  overflow:hidden;
}

.screen.active{
  display:block;
}


/* ==========================================================================
   BLACK FIRE OPAL BACKGROUND
   ========================================================================== */

.desktop-bg{
  position:fixed;

  inset:0;

  z-index:0;

  pointer-events:none;

  background:

    radial-gradient(
      circle at 22% 24%,
      rgba(0,240,220,.16),
      transparent 19%
    ),

    radial-gradient(
      circle at 70% 16%,
      rgba(104,66,255,.20),
      transparent 24%
    ),

    radial-gradient(
      circle at 82% 68%,
      rgba(255,86,22,.16),
      transparent 22%
    ),

    radial-gradient(
      circle at 16% 78%,
      rgba(0,192,255,.15),
      transparent 20%
    ),

    linear-gradient(
      135deg,
      #05090b 0%,
      #030405 48%,
      #080508 100%
    );
}


.desktop-bg::before,
.desktop-bg::after{
  content:"";

  position:absolute;

  inset:-12%;

  background:

    conic-gradient(
      from 20deg at 34% 36%,

      transparent 0 12%,

      rgba(0,238,255,.22) 14%,

      transparent 17% 28%,

      rgba(150,70,255,.20) 31%,

      transparent 34% 58%,

      rgba(255,104,20,.18) 62%,

      transparent 66%
    ),

    repeating-linear-gradient(
      118deg,

      transparent 0 74px,

      rgba(255,255,255,.022) 76px,

      transparent 78px 152px
    );

  mix-blend-mode:screen;

  filter:
    saturate(1.5)
    blur(5px);

  opacity:.75;

  transform:
    rotate(-5deg)
    scale(1.1);
}


.desktop-bg::after{
  transform:
    rotate(11deg)
    scale(1.18);

  opacity:.46;

  filter:
    hue-rotate(35deg)
    blur(8px);
}


.desktop-shards{
  position:fixed;

  inset:0;

  z-index:0;

  pointer-events:none;

  opacity:.28;

  background:

    linear-gradient(
      26deg,
      transparent 0 48%,
      rgba(200,240,255,.22) 49%,
      transparent 50%
    ),

    linear-gradient(
      117deg,
      transparent 0 53%,
      rgba(255,255,255,.14) 54%,
      transparent 55%
    ),

    linear-gradient(
      161deg,
      transparent 0 57%,
      rgba(87,220,255,.16) 58%,
      transparent 59%
    );

  background-size:
    540px 420px,
    760px 620px,
    980px 720px;

  filter:
    drop-shadow(
      0 0 5px rgba(99,222,255,.25)
    );
}


/* ==========================================================================
   MAIN APPLICATION SHELL
   ========================================================================== */

.app-shell{
  position:relative;

  z-index:2;

  width:
    min(
      1540px,
      calc(100vw - 34px)
    );

  margin:
    16px auto;

  border:
    1px solid rgba(94,219,236,.26);

  border-radius:
    18px;

  background:
    rgba(3,7,10,.86);

  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(20,255,223,.04) inset;

  backdrop-filter:
    blur(18px)
    saturate(1.2);

  overflow:hidden;
}


/* ==========================================================================
   CODEFALL
   ========================================================================== */

.codefall{
  position:relative;

  background:

    linear-gradient(
      180deg,
      rgba(5,12,15,.94),
      rgba(4,9,12,.84)
    ),

    repeating-linear-gradient(
      90deg,

      rgba(22,255,190,.055) 0 1px,

      transparent 1px 18px
    );

  overflow:hidden;
}


.codefall::before{
  content:
    "0101010010110010100101011001010100010110010100101101010101001101";

  position:absolute;

  inset:
    -40px -10px auto -20px;

  height:220%;

  word-break:break-all;

  color:
    rgba(36,255,178,.12);

  font:
    11px/18px
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

  letter-spacing:
    8px;

  transform:
    skewY(-4deg);

  animation:
    fall 14s linear infinite;

  pointer-events:none;
}


.codefall > *{
  position:relative;

  z-index:1;
}


@keyframes fall{

  to{
    transform:
      translateY(160px)
      skewY(-4deg);
  }

}


.glass-panel{
  border:
    1px solid rgba(118,229,245,.14);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012);
}


/* ==========================================================================
   TOP CHROME
   ========================================================================== */

.app-topbar{
  height:68px;

  padding:
    0 18px;

  display:flex;

  align-items:center;

  gap:28px;

  border-bottom:
    1px solid rgba(117,232,249,.17);
}


.brand-group{
  display:flex;

  align-items:center;

  gap:10px;

  min-width:190px;
}


.brand-mark{
  font-size:27px;

  color:var(--cyan);

  filter:
    drop-shadow(
      0 0 10px rgba(71,233,255,.6)
    );
}


.brand{
  font-weight:800;

  letter-spacing:.13em;

  font-size:17px;
}


.brand span{
  color:var(--violet);
}


.brand-sub{
  font-size:9px;

  color:var(--cyan);

  letter-spacing:.14em;

  margin-top:2px;
}


.top-links{
  display:flex;

  gap:28px;

  font-size:11px;

  color:#aab4b8;

  letter-spacing:.06em;

  flex:1;
}


.top-links span{
  padding:
    25px 0 21px;

  border-bottom:
    2px solid transparent;
}


.top-links .active{
  color:white;

  border-color:
    var(--violet);
}


.top-actions{
  display:flex;

  align-items:center;

  gap:10px;
}


/* ==========================================================================
   BUTTONS / BADGES
   ========================================================================== */

.trial-badge{
  display:inline-block;

  border:
    1px solid rgba(255,179,77,.6);

  color:#ffd69b;

  background:
    rgba(255,153,0,.07);

  padding:
    7px 12px;

  border-radius:
    9px;

  font-size:
    10px;

  letter-spacing:
    .1em;
}


.top-button,
.ghost-button{
  color:#e9f1f3;

  background:#05090c;

  border:
    1px solid rgba(160,216,230,.22);

  border-radius:8px;

  padding:
    9px 13px;

  cursor:pointer;
}


.top-button:hover,
.ghost-button:hover{
  border-color:
    var(--cyan);

  color:
    var(--cyan);
}


.primary-button{
  border:
    1px solid rgba(71,233,255,.8);

  background:
    linear-gradient(
      135deg,
      #33ffd0,
      #59d4ff
    );

  color:#03100e;

  padding:
    13px 18px;

  border-radius:
    8px;

  font-weight:
    800;

  letter-spacing:
    .03em;

  cursor:pointer;

  box-shadow:
    0 0 25px rgba(29,240,209,.12);
}


.primary-button:hover{
  filter:
    brightness(1.08);
}


.primary-button.amber{
  background:
    linear-gradient(
      135deg,
      #ffb34d,
      #ff7b32
    );

  border-color:
    #ffd17d;

  min-width:
    175px;
}


.primary-button small{
  display:block;

  font-size:8px;

  letter-spacing:.16em;
}


/* ==========================================================================
   LANDING
   ========================================================================== */

.landing-shell{
  min-height:
    760px;
}


.landing-content{
  position:relative;

  min-height:
    690px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:
    45px;

  padding:
    70px 74px;

  background:

    radial-gradient(
      circle at 76% 54%,
      rgba(85,36,255,.12),
      transparent 29%
    ),

    radial-gradient(
      circle at 20% 42%,
      rgba(9,255,184,.08),
      transparent 28%
    );
}


.eyebrow{
  color:
    var(--green);

  font-size:
    11px;

  letter-spacing:
    .16em;

  font-weight:
    700;
}


.landing-copy h1{
  font-size:
    68px;

  line-height:
    .98;

  margin:
    14px 0 22px;

  letter-spacing:
    -.04em;
}


.landing-copy h1 span{
  color:
    var(--green);
}


.landing-copy p{
  max-width:
    590px;

  color:
    #bdc7ca;

  font-size:
    18px;

  line-height:
    1.55;
}


.microcopy{
  font-size:
    11px;

  color:
    #77878c;

  margin-top:
    14px;

  letter-spacing:
    .08em;
}


.landing-preview{
  padding:
    34px;

  background:
    rgba(5,12,14,.73);

  border-radius:
    18px;

  min-height:
    360px;
}


.preview-title{
  font-size:
    11px;

  color:
    #9fdcff;

  letter-spacing:
    .14em;

  margin-bottom:
    32px;
}


.mini-hand{
  display:flex;

  align-items:flex-end;

  justify-content:center;

  gap:
    12px;
}


.mini-card{
  height:
    250px;

  width:
    118px;

  border-radius:
    12px;

  border:
    1px solid currentColor;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(0,0,0,.35)
    );

  box-shadow:
    0 16px 34px rgba(0,0,0,.28);
}


.mini-card.cyan{
  color:
    var(--cyan);

  background:

    radial-gradient(
      circle at 50% 65%,
      rgba(0,213,255,.25),
      transparent 35%
    ),

    #06141b;
}


.mini-card.violet{
  color:
    var(--violet);

  background:

    radial-gradient(
      circle at 50% 48%,
      rgba(151,91,255,.3),
      transparent 34%
    ),

    #0b0a18;
}


.mini-card.alt{
  transform:
    translateY(-10px);
}


.mini-card.green{
  color:
    var(--green);

  background:

    radial-gradient(
      circle at 50% 54%,
      rgba(66,255,104,.25),
      transparent 34%
    ),

    #07160b;
}


.preview-caption{
  text-align:center;

  color:
    #708186;

  font-size:
    10px;

  margin-top:
    24px;

  letter-spacing:
    .1em;
}


/* ==========================================================================
   BUILDER LAYOUT
   ========================================================================== */

.builder-shell{
  min-height:
    890px;
}


.builder-grid{
  display:grid;

  grid-template-columns:
    220px minmax(0,1fr) 250px;

  gap:
    12px;

  padding:
    12px 12px 0;
}


.left-rail,
.right-rail{
  border-radius:
    12px;

  padding:
    14px;

  min-height:
    720px;
}


.rail-heading{
  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .06em;

  color:
    #dce5e7;

  margin-bottom:
    14px;
}


.persona-card{
  border:
    1px solid rgba(108,229,247,.15);

  border-radius:
    10px;

  padding:
    13px;

  background:
    rgba(3,9,11,.64);
}


.persona-name{
  font-size:
    13px;

  font-weight:
    700;

  margin-bottom:
    8px;
}


.persona-card p,
.rail-section p{
  font-size:
    11px;

  color:
    #99a8ad;

  margin:
    8px 0;
}


.rail-section{
  margin-top:
    20px;
}


.rail-kicker{
  font-size:
    10px;

  color:
    var(--green);

  letter-spacing:
    .12em;

  margin-bottom:
    8px;
}


.library-item{
  width:
    100%;

  display:flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  padding:
    11px;

  border:
    0;

  border-left:
    2px solid transparent;

  background:
    transparent;

  color:
    #cfd8db;

  cursor:
    pointer;

  text-align:
    left;

  font-size:
    11px;
}


.library-item small{
  color:
    #74848a;
}


.library-item.active{
  border-left-color:
    var(--cyan);

  background:
    linear-gradient(
      90deg,
      rgba(0,218,255,.10),
      rgba(137,53,255,.08)
    );

  color:
    var(--cyan);
}


.send-coach{
  width:
    100%;

  margin-top:
    26px;

  padding:
    16px;

  border:
    1px solid rgba(147,86,255,.55);

  background:
    rgba(8,8,15,.8);

  color:
    white;

  border-radius:
    9px;
}


.builder-main{
  display:flex;

  flex-direction:
    column;

  gap:
    10px;

  min-width:
    0;
}


.builder-head{
  border-radius:
    12px;

  padding:
    16px 18px;

  display:flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;
}


.builder-head h2{
  font-size:
    27px;

  margin:
    5px 0;
}


.builder-head p{
  font-size:
    12px;

  color:
    #98a7ab;

  margin:
    0;
}


.builder-head-actions{
  display:flex;

  gap:
    8px;

  align-items:
    center;
}


.stats-row{
  border-radius:
    12px;

  padding:
    11px 16px;

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:
    8px;
}


.stat{
  border-right:
    1px solid rgba(128,217,236,.1);

  display:flex;

  align-items:center;

  gap:
    8px;

  padding:
    3px 8px;
}


.stat:last-child{
  border:
    0;
}


.stat strong{
  font-size:
    16px;
}


.stat span{
  font-size:
    9px;

  color:
    #829197;

  letter-spacing:
    .1em;
}


.stat.ready strong{
  color:
    var(--green);
}


/* ==========================================================================
   LIVE PATHWAY
   ========================================================================== */

.path-canvas{
  position:relative;

  min-height:
    585px;

  border-radius:
    12px;

  padding:
    20px 16px 18px;

  background:

    linear-gradient(
      rgba(3,8,10,.90),
      rgba(3,8,10,.90)
    ),

    repeating-linear-gradient(
      0deg,
      transparent 0 39px,
      rgba(40,173,205,.07) 40px
    ),

    repeating-linear-gradient(
      90deg,
      transparent 0 39px,
      rgba(40,173,205,.07) 40px
    );
}


.canvas-label{
  font-size:
    9px;

  color:
    #6e8187;

  letter-spacing:
    .12em;

  margin:
    3px 0 18px 4px;
}


.pathway-scroll{
  width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding-bottom:
    12px;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(71,233,255,.35)
    rgba(255,255,255,.035);
}


.hand-track{
  display:flex;

  align-items:center;

  justify-content:
    center;

  gap:
    26px;

  min-width:
    max-content;

  min-height:
    385px;

  padding:
    12px 26px 26px;
}


/* ==========================================================================
   LIVE PATHWAY CARDS
   ========================================================================== */

.card{
  position:relative;

  isolation:isolate;

  width:
    190px;

  min-width:
    190px;

  height:
    322px;

  border-radius:
    14px;

  overflow:hidden;

  padding:
    0;

  color:
    white;

  background:
    #071014;

  border:
    1px solid currentColor;

  cursor:
    pointer;

  box-shadow:

    0 18px 40px rgba(0,0,0,.42),

    0 0 20px rgba(76,233,255,.05);

  transition:
    .18s ease transform,
    .18s ease box-shadow,
    .18s ease opacity;
}


.card:hover{
  transform:
    translateY(-5px);

  box-shadow:

    0 24px 48px rgba(0,0,0,.55),

    0 0 24px currentColor;
}


.card.dragging{
  opacity:
    .42;
}


.card.drop-target{
  transform:
    translateY(-8px)
    scale(1.025);

  box-shadow:
    0 0 0 2px currentColor,
    0 22px 45px rgba(0,0,0,.55);
}


.card::before{
  content:"";

  position:absolute;

  inset:
    0 0 42% 0;

  z-index:
    -1;

  background:

    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,.19),
      transparent 13%
    ),

    radial-gradient(
      circle at 50% 58%,
      currentColor 0 1px,
      transparent 2px 100%
    ),

    repeating-radial-gradient(
      circle at 50% 58%,

      transparent 0 12px,

      currentColor 13px 14px,

      transparent 15px 23px
    ),

    linear-gradient(
      180deg,
      rgba(10,30,40,.1),
      #071014 90%
    );

  opacity:
    .74;

  filter:
    saturate(1.2);
}


.card::after{
  content:"";

  position:absolute;

  inset:
    57% 0 0;

  z-index:
    -1;

  background:

    linear-gradient(
      180deg,
      rgba(3,8,10,.25),
      #04090c 34%,
      #04080a 100%
    );

  border-top:
    1px solid rgba(255,255,255,.06);
}


.card.role-start{
  color:
    var(--cyan);
}


.card.role-mid{
  color:
    var(--violet);
}


.card.role-end{
  color:
    var(--green);
}


.card.role-start::before{
  background:

    radial-gradient(
      circle at 40% 70%,
      rgba(0,229,255,.22),
      transparent 34%
    ),

    linear-gradient(
      160deg,
      rgba(17,118,160,.34),
      rgba(4,15,24,.3)
    ),

    repeating-linear-gradient(
      90deg,

      rgba(74,225,255,.12) 0 1px,

      transparent 1px 18px
    );
}


.card.role-end::before{
  background:

    radial-gradient(
      circle at 50% 52%,
      rgba(72,255,112,.38),
      transparent 25%
    ),

    radial-gradient(
      circle at 50% 55%,
      rgba(0,0,0,.05),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      rgba(0,93,26,.25),
      #06100b
    );
}


.card-role,
.card-title,
.card-detail{
  position:absolute;

  left:
    14px;

  right:
    14px;

  z-index:
    2;
}


.card-role{
  top:
    14px;

  font-size:
    9px;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.card-title{
  top:
    38px;

  font-weight:
    800;

  font-size:
    18px;

  line-height:
    1.04;

  color:
    white;
}


.card-detail{
  bottom:
    54px;

  font-size:
    11px;

  line-height:
    1.35;

  color:
    #b5c2c6;
}


.card-remove{
  position:absolute;

  top:
    10px;

  right:
    10px;

  z-index:
    4;

  width:
    25px;

  height:
    25px;

  border-radius:
    50%;

  border:
    1px solid rgba(255,255,255,.17);

  background:
    rgba(2,6,8,.78);

  color:
    #b8c1c4;

  cursor:
    pointer;
}


.card-remove:hover{
  color:
    #ff7b69;

  border-color:
    #ff7b69;
}


/* Path grows: shrink cards rather than destroy the pathway */

.hand-track.path-compact .card{
  width:
    160px;

  min-width:
    160px;

  height:
    285px;
}


.hand-track.path-compact .card-title{
  font-size:
    16px;
}


.hand-track.path-compact .card-detail{
  font-size:
    10px;
}


.hand-track.path-dense{
  justify-content:
    flex-start;

  gap:
    18px;
}


.hand-track.path-dense .card{
  width:
    138px;

  min-width:
    138px;

  height:
    250px;
}


.hand-track.path-dense .card-title{
  font-size:
    14px;

  top:
    34px;
}


.hand-track.path-dense .card-detail{
  font-size:
    9px;

  bottom:
    38px;
}


/* ==========================================================================
   PATHWAY BRANCH / SANDBOX
   ========================================================================== */

.canvas-branch{
  height:
    80px;

  position:
    relative;

  margin-top:
    -10px;
}


.canvas-branch span{
  position:absolute;

  top:
    20px;

  height:
    1px;

  background:
    rgba(155,108,255,.45);

  width:
    28%;
}


.canvas-branch span:first-child{
  left:
    23%;
}


.canvas-branch span:last-child{
  right:
    23%;
}


.canvas-branch i{
  position:absolute;

  left:
    50%;

  top:
    15px;

  width:
    10px;

  height:
    10px;

  border:
    1px solid var(--violet);

  transform:
    rotate(45deg);
}


.trial-sandbox{
  position:absolute;

  left:
    20px;

  right:
    20px;

  bottom:
    16px;

  border-top:
    1px solid rgba(131,228,247,.10);

  padding-top:
    12px;

  color:
    #718187;

  font-size:
    10px;
}


.trial-sandbox span{
  color:
    #ffd38c;

  margin-right:
    10px;
}


/* ==========================================================================
   INSPECTOR
   ========================================================================== */

.right-rail .inspector-art{
  height:
    170px;

  border-radius:
    10px;

  border:
    1px solid rgba(155,108,255,.35);

  background:

    radial-gradient(
      circle at 50% 58%,
      rgba(255,121,38,.40),
      transparent 25%
    ),

    linear-gradient(
      150deg,
      #170a12,
      #35150a 45%,
      #05080b
    );

  box-shadow:
    inset 0 0 35px #000;

  margin-bottom:
    12px;
}


.inspector-art.role-start{
  border-color:
    rgba(71,233,255,.4);

  background:

    radial-gradient(
      circle at 50% 58%,
      rgba(0,219,255,.38),
      transparent 27%
    ),

    linear-gradient(
      150deg,
      #061018,
      #062536,
      #05080b
    );
}


.inspector-art.role-mid{
  border-color:
    rgba(155,108,255,.4);

  background:

    radial-gradient(
      circle at 50% 58%,
      rgba(155,108,255,.40),
      transparent 27%
    ),

    linear-gradient(
      150deg,
      #0e0918,
      #241045,
      #05080b
    );
}


.inspector-art.role-end{
  border-color:
    rgba(115,255,108,.4);

  background:

    radial-gradient(
      circle at 50% 58%,
      rgba(80,255,108,.38),
      transparent 27%
    ),

    linear-gradient(
      150deg,
      #061008,
      #0b3515,
      #05080b
    );
}


.inspector-title{
  font-size:
    17px;

  font-weight:
    800;
}


.inspector-detail{
  font-size:
    11px;

  color:
    #9babb0;

  margin-top:
    5px;
}


.inspector-tabs{
  display:flex;

  gap:
    18px;

  border-bottom:
    1px solid rgba(255,255,255,.1);

  margin:
    18px 0 13px;

  font-size:
    10px;
}


.inspector-tabs span{
  padding-bottom:
    8px;
}


.inspector-tabs .active{
  border-bottom:
    2px solid var(--violet);
}


dl{
  margin:
    0;
}


dt{
  font-size:
    9px;

  color:
    #6e7e83;

  margin-top:
    12px;
}


dd{
  margin:
    3px 0 0;

  font-size:
    11px;

  color:
    #dce4e6;
}


.trial-box{
  margin-top:
    22px;

  border:
    1px solid rgba(155,108,255,.4);

  background:
    rgba(101,55,180,.08);

  padding:
    11px;

  border-radius:
    9px;
}


.trial-box strong{
  display:block;

  color:
    #cfadff;

  font-size:
    10px;
}


.trial-box span{
  display:block;

  color:
    #a7b2b5;

  font-size:
    9px;

  line-height:
    1.4;

  margin-top:
    4px;
}


/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.bottom-bar{
  margin:
    10px 12px 12px;

  border-radius:
    10px;

  padding:
    8px;

  display:grid;

  grid-template-columns:
    1fr auto auto auto;

  gap:
    8px;
}


.prompt-field{
  border:
    1px solid rgba(108,227,246,.12);

  border-radius:
    7px;

  padding:
    10px 12px;

  color:
    #6e7e83;

  font-size:
    11px;
}


.bottom-bar button{
  background:
    #061014;

  color:
    #e6edef;

  border:
    1px solid rgba(96,226,240,.2);

  border-radius:
    7px;

  padding:
    8px 13px;
}


/* ==========================================================================
   CARD PALETTE SHELL
   ========================================================================== */

.palette-shell{
  position:fixed;

  inset:0;

  z-index:
    30;

  display:none;

  pointer-events:none;

  background:
    transparent;
}


.palette-shell.open{
  display:block;
}


/* ==========================================================================
   FLOATING CARD PALETTE
   ========================================================================== */

.card-palette{
  position:absolute;

  top:
    92px;

  right:
    28px;

  bottom:
    28px;

  width:
    min(
      1040px,
      calc(100vw - 90px)
    );

  pointer-events:
    auto;

  display:flex;

  flex-direction:
    column;

  border:
    1px solid rgba(71,233,255,.30);

  border-radius:
    16px;

  background:
    rgba(3,8,11,.975);

  box-shadow:

    -24px 18px 70px rgba(0,0,0,.62),

    0 0 0 1px rgba(71,233,255,.035) inset,

    0 0 45px rgba(0,213,255,.07);

  overflow:hidden;
}


/* ==========================================================================
   PALETTE HEADER
   ========================================================================== */

.palette-header{
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:
    28px;

  padding:
    18px 20px 16px;

  border-bottom:
    1px solid rgba(112,244,255,.13);

  background:
    rgba(3,10,13,.92);
}


.palette-header h3{
  margin:
    3px 0 4px;

  font-size:
    25px;
}


.palette-header p{
  margin:
    0;

  color:
    #91a1a6;

  font-size:
    11px;
}


.palette-header-actions{
  display:flex;

  align-items:center;

  gap:
    10px;

  flex-shrink:
    0;
}


/* ==========================================================================
   FAMILY / DECK SELECTOR
   ========================================================================== */

.palette-family-row{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    10px;

  padding:
    12px 20px;

  border-bottom:
    1px solid rgba(112,244,255,.10);

  background:
    rgba(4,9,12,.92);
}


.game-deck{
  border:
    1px solid rgba(255,255,255,.10);

  background:
    #05090c;

  color:
    white;

  border-radius:
    10px;

  padding:
    8px 10px;

  cursor:
    pointer;

  display:grid;

  grid-template-columns:
    72px 1fr;

  grid-template-rows:
    auto auto;

  column-gap:
    12px;

  align-items:center;

  text-align:left;
}


.game-deck:hover{
  border-color:
    rgba(71,233,255,.42);
}


.game-deck.active{
  border-color:
    var(--cyan);

  background:
    linear-gradient(
      90deg,
      rgba(0,219,255,.08),
      rgba(122,71,255,.06)
    );

  box-shadow:
    0 0 22px rgba(0,219,255,.09);
}


.game-deck strong{
  grid-column:
    2;

  grid-row:
    1;

  display:block;

  font-size:
    11px;
}


.game-deck small{
  grid-column:
    2;

  grid-row:
    2;

  display:block;

  color:
    #6f8085;

  font-size:
    8px;

  margin-top:
    -16px;
}


.fan{
  grid-column:
    1;

  grid-row:
    1 / span 2;

  position:relative;

  height:
    58px;
}


.fan span{
  position:absolute;

  left:
    50%;

  top:
    3px;

  width:
    35px;

  height:
    49px;

  border-radius:
    4px;

  border:
    1px solid currentColor;

  background:
    #071015;

  transform-origin:
    50% 100%;
}


.fan span:nth-child(1){
  transform:
    translateX(-50%)
    rotate(-12deg);
}


.fan span:nth-child(2){
  transform:
    translateX(-50%)
    rotate(-4deg);
}


.fan span:nth-child(3){
  transform:
    translateX(-50%)
    rotate(5deg);
}


.fan span:nth-child(4){
  transform:
    translateX(-50%)
    rotate(13deg);
}


.fan-fps{
  color:
    var(--cyan);
}


.fan-mobile{
  color:
    var(--amber);
}


.fan-vr{
  color:
    var(--violet);
}


/* ==========================================================================
   PALETTE WORKBENCH
   ========================================================================== */

.palette-workbench{
  flex:
    1;

  min-height:
    0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    52px
    minmax(0,1.08fr);

  gap:
    0;

  padding:
    14px 20px;

  overflow:hidden;

  background:

    radial-gradient(
      circle at 18% 48%,
      rgba(0,220,255,.055),
      transparent 30%
    ),

    radial-gradient(
      circle at 82% 48%,
      rgba(155,108,255,.065),
      transparent 31%
    );
}


.palette-zone{
  min-width:
    0;

  min-height:
    0;

  display:flex;

  flex-direction:
    column;

  border:
    1px solid rgba(118,229,245,.12);

  border-radius:
    13px;

  background:
    rgba(3,9,11,.76);

  overflow:hidden;
}


.zone-header{
  display:flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    15px;

  padding:
    13px 14px;

  border-bottom:
    1px solid rgba(112,244,255,.10);

  background:
    rgba(5,12,15,.78);
}


.zone-header h4{
  margin:
    2px 0 0;

  font-size:
    16px;
}


.zone-header small{
  color:
    #718287;

  font-size:
    9px;

  text-align:
    right;
}


.zone-kicker{
  color:
    var(--green);

  font-size:
    9px;

  letter-spacing:
    .14em;

  font-weight:
    700;
}


.palette-transfer{
  display:flex;

  justify-content:center;

  align-items:center;

  color:
    var(--cyan);

  font-size:
    27px;

  filter:
    drop-shadow(
      0 0 10px rgba(71,233,255,.5)
    );
}


/* ==========================================================================
   PALETTE DECK GRID
   ========================================================================== */

.palette-card-grid{
  min-height:
    0;

  flex:
    1;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    10px;

  align-content:
    start;

  padding:
    12px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(71,233,255,.35)
    rgba(255,255,255,.03);
}


/* ==========================================================================
   PALETTE CARDS
   ========================================================================== */

.palette-card{
  position:relative;

  isolation:isolate;

  min-width:
    0;

  height:
    176px;

  border:
    1px solid currentColor;

  border-radius:
    10px;

  overflow:hidden;

  background:
    #071014;

  color:
    var(--violet);

  cursor:
    grab;

  box-shadow:
    0 10px 24px rgba(0,0,0,.38);

  transition:
    .16s ease transform,
    .16s ease opacity,
    .16s ease box-shadow;
}


.palette-card:active{
  cursor:
    grabbing;
}


.palette-card:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 14px 28px rgba(0,0,0,.50),
    0 0 15px currentColor;
}


.palette-card.dragging{
  opacity:
    .35;
}


.palette-card.drop-target{
  transform:
    translateY(-5px)
    scale(1.02);

  box-shadow:
    0 0 0 2px currentColor,
    0 16px 30px rgba(0,0,0,.5);
}


.palette-card.role-start{
  color:
    var(--cyan);
}


.palette-card.role-mid{
  color:
    var(--violet);
}


.palette-card.role-end{
  color:
    var(--green);
}


.palette-card::before{
  content:"";

  position:absolute;

  inset:
    0 0 43% 0;

  z-index:
    -1;

  opacity:
    .68;

  background:

    radial-gradient(
      circle at 50% 56%,
      currentColor 0 1px,
      transparent 2px
    ),

    repeating-radial-gradient(
      circle at 50% 56%,

      transparent 0 10px,

      currentColor 11px 12px,

      transparent 13px 20px
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(0,0,0,.14)
    );
}


.palette-card.role-start::before{
  background:

    radial-gradient(
      circle at 45% 60%,
      rgba(0,229,255,.26),
      transparent 32%
    ),

    repeating-linear-gradient(
      90deg,

      rgba(74,225,255,.11) 0 1px,

      transparent 1px 15px
    ),

    linear-gradient(
      160deg,
      rgba(17,118,160,.24),
      rgba(4,15,24,.3)
    );
}


.palette-card.role-end::before{
  background:

    radial-gradient(
      circle at 50% 54%,
      rgba(72,255,112,.34),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      rgba(0,93,26,.18),
      #06100b
    );
}


.palette-card::after{
  content:"";

  position:absolute;

  inset:
    57% 0 0;

  z-index:
    -1;

  background:
    linear-gradient(
      180deg,
      rgba(3,8,10,.24),
      #04090c 28%,
      #04080a
    );

  border-top:
    1px solid rgba(255,255,255,.055);
}


.palette-card-role,
.palette-card-title,
.palette-card-detail,
.palette-card-grab{
  position:absolute;

  left:
    10px;

  right:
    10px;

  z-index:
    2;
}


.palette-card-role{
  top:
    9px;

  font-size:
    7px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}


.palette-card-title{
  top:
    27px;

  color:
    white;

  font-size:
    13px;

  line-height:
    1.06;

  font-weight:
    800;
}


.palette-card-detail{
  bottom:
    30px;

  color:
    #aebdc1;

  font-size:
    8px;

  line-height:
    1.28;
}


.palette-card-grab{
  bottom:
    9px;

  color:
    currentColor;

  font-size:
    7px;

  letter-spacing:
    .10em;

  opacity:
    .72;
}


.palette-card-grab.pinned{
  opacity:
    .48;

  cursor:
    default;
}


/* ==========================================================================
   ALREADY-IN-HAND / PATHWAY DECK CARD
   ========================================================================== */

.palette-card.already-in-hand{
  opacity:
    .58;
}


.palette-card.already-in-hand:hover{
  opacity:
    .82;
}


.in-hand-marker{
  position:absolute;

  top:
    8px;

  right:
    8px;

  z-index:
    5;

  padding:
    4px 6px;

  border:
    1px solid rgba(115,255,108,.45);

  border-radius:
    6px;

  background:
    rgba(18,72,28,.65);

  color:
    var(--green);

  font-size:
    7px;

  letter-spacing:
    .08em;
}


/* ==========================================================================
   PALETTE HAND
   ========================================================================== */

.palette-hand{
  flex:
    1;

  min-height:
    0;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    10px;

  align-content:
    start;

  padding:
    12px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  border:
    1px dashed transparent;

  transition:
    .16s ease border-color,
    .16s ease background;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(155,108,255,.42)
    rgba(255,255,255,.03);
}


.palette-hand.receiving{
  border-color:
    rgba(71,233,255,.75);

  background:
    rgba(0,217,255,.035);
}


.working-card{
  cursor:
    grab;
}


.pinned-card{
  cursor:
    default;

  opacity:
    .82;
}


.pinned-card:hover{
  transform:
    none;
}


/* ==========================================================================
   PALETTE REMOVE
   ========================================================================== */

.palette-remove{
  position:absolute;

  top:
    7px;

  right:
    7px;

  z-index:
    6;

  width:
    22px;

  height:
    22px;

  border-radius:
    50%;

  border:
    1px solid rgba(255,255,255,.17);

  background:
    rgba(2,6,8,.82);

  color:
    #c0c8cb;

  cursor:
    pointer;
}


.palette-remove:hover{
  color:
    #ff7b69;

  border-color:
    #ff7b69;
}


/* ==========================================================================
   EMPTY PALETTE HAND MESSAGE
   ========================================================================== */

.palette-empty{
  display:none;

  margin:
    0 12px 12px;

  padding:
    22px;

  border:
    1px dashed rgba(71,233,255,.23);

  border-radius:
    10px;

  color:
    #7f9095;

  font-size:
    10px;

  text-align:
    center;
}


.palette-empty:not([hidden]){
  display:block;
}


/* ==========================================================================
   PALETTE FOOTER
   ========================================================================== */

.palette-footer{
  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:
    20px;

  padding:
    12px 20px;

  border-top:
    1px solid rgba(112,244,255,.11);

  background:
    rgba(3,9,12,.95);
}


.palette-footer > div{
  display:flex;

  align-items:center;

  gap:
    12px;
}


.palette-status{
  color:
    #839398;

  font-size:
    9px;

  letter-spacing:
    .05em;
}


/* ==========================================================================
   BLOCKED ACTION FEEDBACK
   ========================================================================== */

@keyframes narni-blocked-shake {

  0%{
    transform:translateX(0);
  }

  12%{
    transform:translateX(-8px) rotate(-.4deg);
  }

  24%{
    transform:translateX(7px) rotate(.4deg);
  }

  36%{
    transform:translateX(-6px) rotate(-.3deg);
  }

  48%{
    transform:translateX(5px) rotate(.3deg);
  }

  60%{
    transform:translateX(-4px);
  }

  72%{
    transform:translateX(3px);
  }

  84%{
    transform:translateX(-2px);
  }

  100%{
    transform:translateX(0);
  }
}


@keyframes narni-blocked-pulse {

  0%{
    border-color:currentColor;

    box-shadow:
      0 18px 40px rgba(0,0,0,.42),
      0 0 20px rgba(76,233,255,.05);
  }

  30%{
    border-color:#ff7b32;

    box-shadow:
      0 18px 40px rgba(0,0,0,.50),
      0 0 0 2px rgba(255,123,50,.72),
      0 0 28px rgba(255,98,79,.52);
  }

  65%{
    border-color:#ffb34d;

    box-shadow:
      0 18px 40px rgba(0,0,0,.48),
      0 0 0 1px rgba(255,179,77,.52),
      0 0 20px rgba(255,179,77,.30);
  }

  100%{
    border-color:currentColor;

    box-shadow:
      0 18px 40px rgba(0,0,0,.42),
      0 0 20px rgba(76,233,255,.05);
  }
}


.card.blocked-action{
  animation:
    narni-blocked-shake 420ms ease-in-out,
    narni-blocked-pulse 500ms ease-out;

  transform-origin:center;

  z-index:8;
}


.card.blocked-action .card-remove{
  color:#ffb34d;

  border-color:#ff7b32;

  background:
    rgba(82,25,8,.88);

  box-shadow:
    0 0 12px rgba(255,123,50,.42);
}


/* ==========================================================================
   DECK ⇄ HAND ⇄ PATHWAY
   ========================================================================== */

.builder-shell{
  min-height:
    960px;
}


.builder-main{
  overflow:visible;
}


.path-canvas{
  min-height:
    500px;
}


.pathway-instruction{
  margin:
    -8px 4px 4px;

  color:
    #78898e;

  font-size:
    10px;

  line-height:
    1.45;

  letter-spacing:
    .025em;
}


.pathway-track{
  position:relative;
}


#pathway-zone.receiving{
  border-color:
    rgba(155,108,255,.72);

  box-shadow:

    inset 0 0 0 1px rgba(155,108,255,.20),

    0 0 28px rgba(155,108,255,.10);
}


#pathway-zone.receiving .pathway-track{
  background:

    radial-gradient(
      ellipse at 50% 58%,
      rgba(155,108,255,.07),
      transparent 55%
    );
}


/* ==========================================================================
   FIXED START / ENDPOINT
   ========================================================================== */

.card-fixed{
  position:absolute;

  right:
    12px;

  bottom:
    13px;

  z-index:
    4;

  padding:
    5px 7px;

  border:
    1px solid currentColor;

  border-radius:
    6px;

  color:
    currentColor;

  background:
    rgba(2,7,9,.76);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .12em;

  opacity:
    .70;
}


/* ==========================================================================
   PERSISTENT HAND
   ========================================================================== */

.persistent-hand{
  position:relative;

  min-height:
    220px;

  padding:
    15px 16px 17px;

  border-radius:
    12px;

  background:

    radial-gradient(
      ellipse at 50% 100%,
      rgba(155,108,255,.075),
      transparent 58%
    ),

    linear-gradient(
      180deg,
      rgba(5,12,15,.92),
      rgba(3,8,11,.88)
    );

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


.persistent-hand::after{
  content:"";

  position:absolute;

  left:
    16px;

  right:
    16px;

  bottom:
    10px;

  height:
    1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(155,108,255,.28),
      rgba(71,233,255,.22),
      transparent
    );
}


.persistent-hand-header{
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    12px;
}


.persistent-hand-header h3{
  margin:
    2px 0 2px;

  font-size:
    17px;
}


.persistent-hand-header p{
  max-width:
    590px;

  margin:
    0;

  color:
    #7e8e93;

  font-size:
    10px;

  line-height:
    1.4;
}


.hand-flow-label{
  flex-shrink:
    0;

  margin-top:
    3px;

  padding:
    7px 10px;

  border:
    1px solid rgba(155,108,255,.27);

  border-radius:
    7px;

  background:
    rgba(104,59,190,.07);

  color:
    #c5a8ff;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .13em;
}


/* ==========================================================================
   MAIN HAND TRAY
   ========================================================================== */

.persistent-hand-track{
  display:flex;

  align-items:
    stretch;

  gap:
    10px;

  min-height:
    145px;

  padding:
    5px 2px 11px;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(155,108,255,.42)
    rgba(255,255,255,.03);
}


/* ==========================================================================
   HAND CARDS
   ========================================================================== */

.hand-card{
  position:relative;

  isolation:isolate;

  width:
    148px;

  min-width:
    148px;

  height:
    138px;

  overflow:hidden;

  border:
    1px solid rgba(155,108,255,.72);

  border-radius:
    10px;

  background:

    radial-gradient(
      circle at 72% 22%,
      rgba(155,108,255,.15),
      transparent 30%
    ),

    linear-gradient(
      155deg,
      #090d15,
      #080a11 56%,
      #05090c
    );

  color:
    var(--violet);

  cursor:
    grab;

  box-shadow:
    0 10px 22px rgba(0,0,0,.34);

  transition:
    transform .16s ease,
    opacity .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


.hand-card::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      115deg,
      transparent 0 43%,
      rgba(155,108,255,.12) 44%,
      transparent 45% 100%
    ),

    repeating-linear-gradient(
      90deg,
      rgba(155,108,255,.035) 0 1px,
      transparent 1px 15px
    );
}


.hand-card:hover{
  transform:
    translateY(-3px);

  border-color:
    var(--violet);

  box-shadow:

    0 14px 27px rgba(0,0,0,.45),

    0 0 17px rgba(155,108,255,.17);
}


.hand-card:active{
  cursor:
    grabbing;
}


.hand-card.dragging{
  opacity:
    .35;
}


.hand-card.drop-target{
  transform:
    translateY(-5px)
    scale(1.02);

  border-color:
    var(--cyan);

  box-shadow:

    0 0 0 1px rgba(71,233,255,.60),

    0 16px 28px rgba(0,0,0,.5),

    0 0 20px rgba(71,233,255,.18);
}


.hand-card .card-role{
  top:
    10px;

  left:
    11px;

  right:
    11px;

  font-size:
    7px;

  color:
    var(--violet);
}


.hand-card .card-title{
  top:
    28px;

  left:
    11px;

  right:
    11px;

  font-size:
    13px;

  line-height:
    1.08;
}


.hand-card .card-detail{
  left:
    11px;

  right:
    11px;

  bottom:
    29px;

  color:
    #96a6ab;

  font-size:
    8px;

  line-height:
    1.25;
}


.hand-card-action{
  position:absolute;

  left:
    11px;

  right:
    11px;

  bottom:
    9px;

  z-index:
    3;

  color:
    #b38cff;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    .10em;
}


/* ==========================================================================
   EMPTY MAIN HAND
   ========================================================================== */

.persistent-hand-empty{
  display:none;

  min-height:
    92px;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    4px;

  border:
    1px dashed rgba(155,108,255,.24);

  border-radius:
    10px;

  color:
    #738389;

  background:
    rgba(88,49,155,.025);

  font-size:
    10px;

  text-align:
    center;
}


.persistent-hand-empty:not([hidden]){
  display:flex;
}


/* ==========================================================================
   HAND DROP FEEDBACK
   ========================================================================== */

#hand-zone.receiving{
  border-color:
    rgba(71,233,255,.66);

  background:

    radial-gradient(
      ellipse at 50% 100%,
      rgba(71,233,255,.09),
      transparent 58%
    ),

    linear-gradient(
      180deg,
      rgba(5,12,15,.94),
      rgba(3,8,11,.92)
    );

  box-shadow:
    inset 0 0 0 1px rgba(71,233,255,.12);
}


/* ==========================================================================
   PALETTE UPDATED FOR DECK ⇄ HAND
   ========================================================================== */

.palette-workbench{
  grid-template-columns:
    minmax(0,1fr)
    58px
    minmax(0,1fr);
}


.palette-transfer{
  font-size:
    31px;
}


.palette-hand{
  border:
    1px dashed rgba(155,108,255,.10);
}


#palette-hand-zone.receiving{
  border-color:
    rgba(71,233,255,.66);

  box-shadow:
    inset 0 0 0 1px rgba(71,233,255,.10);

  background:
    rgba(0,217,255,.025);
}


#palette-hand-zone.receiving .palette-hand{
  border-color:
    rgba(71,233,255,.46);

  background:
    rgba(0,217,255,.025);
}


/* ==========================================================================
   DECK RETURN TARGET
   ========================================================================== */

#deck-zone{
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


#deck-zone.receiving{
  border-color:
    rgba(255,179,77,.68);

  box-shadow:
    inset 0 0 0 1px rgba(255,179,77,.11);

  background:
    rgba(255,179,77,.022);
}


#deck-zone.receiving .palette-card-grid{
  background:

    radial-gradient(
      ellipse at 50% 50%,
      rgba(255,179,77,.045),
      transparent 66%
    );
}


.palette-card.already-in-hand{
  cursor:
    default;
}


.palette-card.already-in-hand .palette-card-grab{
  opacity:
    .52;
}


/* ==========================================================================
   SYSTEM-LEVEL BLOCKED ACTION
   ========================================================================== */

.hand-card.blocked-action,
.palette-card.blocked-action{
  animation:
    narni-blocked-shake 420ms ease-in-out,
    narni-blocked-pulse 500ms ease-out;

  transform-origin:
    center;

  z-index:
    8;
}


#pathway-zone.blocked-action,
#hand-zone.blocked-action,
#deck-zone.blocked-action,
#palette-hand-zone.blocked-action{
  animation:
    narni-zone-blocked-shake 420ms ease-in-out,
    narni-zone-blocked-pulse 500ms ease-out;
}


@keyframes narni-zone-blocked-shake{

  0%{
    transform:translateX(0);
  }

  15%{
    transform:translateX(-7px);
  }

  30%{
    transform:translateX(6px);
  }

  45%{
    transform:translateX(-5px);
  }

  60%{
    transform:translateX(4px);
  }

  75%{
    transform:translateX(-2px);
  }

  100%{
    transform:translateX(0);
  }
}


@keyframes narni-zone-blocked-pulse{

  0%{
    border-color:
      rgba(118,229,245,.14);
  }

  28%{
    border-color:
      #ff624f;

    box-shadow:

      inset 0 0 0 1px rgba(255,98,79,.30),

      0 0 28px rgba(255,98,79,.28);
  }

  65%{
    border-color:
      #ffb34d;

    box-shadow:

      inset 0 0 0 1px rgba(255,179,77,.18),

      0 0 20px rgba(255,179,77,.18);
  }

  100%{
    border-color:
      rgba(118,229,245,.14);
  }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1250px){

  .builder-grid{
    grid-template-columns:
      190px minmax(0,1fr);
  }


  .right-rail{
    display:none;
  }


  .card-palette{
    width:
      min(
        930px,
        calc(100vw - 60px)
      );
  }


  .palette-card-grid,
  .palette-hand{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:900px){

  .app-shell{
    width:
      100%;

    margin:
      0;

    border-radius:
      0;
  }


  .left-rail{
    display:none;
  }


  .builder-grid{
    grid-template-columns:
      1fr;
  }


  .landing-content{
    grid-template-columns:
      1fr;

    padding:
      50px 24px;
  }


  .landing-preview{
    display:none;
  }


  .landing-copy h1{
    font-size:
      48px;
  }


  .top-links{
    display:none;
  }


  .builder-head{
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .stats-row{
    grid-template-columns:
      repeat(2,1fr);
  }


  .card-palette{
    top:
      72px;

    right:
      10px;

    bottom:
      10px;

    width:
      calc(100vw - 20px);
  }


  .palette-header{
    flex-direction:
      column;
  }


  .palette-workbench{
    grid-template-columns:
      1fr;

    overflow-y:
      auto;

    gap:
      12px;
  }


  .palette-transfer{
    transform:
      rotate(90deg);

    min-height:
      30px;
  }


  .palette-zone{
    min-height:
      350px;
  }


  .persistent-hand-header{
    flex-direction:
      column;

    gap:
      8px;
  }


  .hand-flow-label{
    align-self:
      flex-start;
  }


  .persistent-hand-track{
    min-height:
      136px;
  }


  .hand-card{
    width:
      136px;

    min-width:
      136px;
  }

}


@media(max-width:620px){

  .palette-family-row{
    grid-template-columns:
      1fr;
  }


  .palette-card-grid,
  .palette-hand{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .palette-footer{
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .palette-header-actions{
    width:
      100%;
  }


  .palette-header-actions button{
    flex:
      1;
  }


  .persistent-hand{
    padding:
      13px 12px 15px;
  }


  .hand-card{
    width:
      128px;

    min-width:
      128px;

    height:
      132px;
  }


  .hand-card .card-title{
    font-size:
      12px;
  }


  .hand-card .card-detail{
    font-size:
      7px;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media(prefers-reduced-motion:reduce){

  .card.blocked-action,
  .hand-card.blocked-action,
  .palette-card.blocked-action{
    animation:
      narni-blocked-pulse 500ms ease-out;
  }


  #pathway-zone.blocked-action,
  #hand-zone.blocked-action,
  #deck-zone.blocked-action,
  #palette-hand-zone.blocked-action{
    animation:
      narni-zone-blocked-pulse 500ms ease-out;
  }

}