/* ===========================================================================
   SEABOUND · DISNEY CRUISE LINE CABIN GUIDES — THE MAGIC LAYER
   Additive only. Scoped under .dclx / .dcl-* so it cannot touch page styles.
   Every figure rendered by this layer comes from the page's own cabin table.
   =========================================================================== */

.dclx{
  --dx-night:#081228;
  --dx-night-2:#0D1B36;
  --dx-gold:#FFC845;
  --dx-pale:#FFF3CF;
  --dx-ice:#8AB6E8;
  --dx-line:rgba(255,200,69,.22);
  --dx-text:#E8EDF6;
  --dx-dim:#9FB0CC;

  --fam-inside:#5B6E8C;
  --fam-oceanview:#2F8FA6;
  --fam-verandah:#3FA88A;
  --fam-family:#E08A4B;
  --fam-concierge:#FFC845;
  --fam-other:#7C8AA6;
}

/* ---------------------------------------------------------------- shell -- */
.dclx{
  position:relative;margin:34px 0 8px;border-radius:20px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, #14264D 0%, transparent 60%),
    linear-gradient(178deg,var(--dx-night-2),var(--dx-night) 62%);
  border:1px solid rgba(255,200,69,.26);
  box-shadow:0 30px 70px -46px rgba(4,10,24,.95), inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--dx-text);
  font-family:"Newsreader",Georgia,serif;
  isolation:isolate;
}
.dclx *{box-sizing:border-box}
.dclx-stars{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85}
.dclx-star{position:absolute;border-radius:50%;background:var(--dx-pale);opacity:.4;
  animation:dxTwinkle 4.2s ease-in-out infinite}
.dclx-star.b{background:var(--dx-ice)}
@keyframes dxTwinkle{0%,100%{opacity:.10;transform:scale(1)}50%{opacity:.9;transform:scale(1.7)}}
.dclx-inner{position:relative;z-index:2;padding:26px 26px 30px}

/* ---------------------------------------------------------------- head --- */
.dclx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.dclx-k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dx-gold);display:flex;align-items:center;gap:8px}
.dclx-k::before{content:"✦";font-size:12px}
.dclx-title{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
  font-size:clamp(21px,3.1vw,29px);line-height:1.1;letter-spacing:-.015em;color:#fff;margin-top:9px}
.dclx-sub{font-size:14.5px;line-height:1.55;color:var(--dx-dim);margin-top:9px;max-width:60ch}
.dclx-sub b{color:var(--dx-pale);font-weight:600}

/* ---------------------------------------------------------------- tabs --- */
.dclx-tabs{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap;
  background:rgba(255,255,255,.045);padding:5px;border-radius:12px;
  border:1px solid rgba(255,255,255,.07);width:fit-content;max-width:100%}
.dclx-tab{appearance:none;border:0;cursor:pointer;background:transparent;color:var(--dx-dim);
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 15px;border-radius:9px;transition:color .2s, background .28s, transform .2s;white-space:nowrap}
.dclx-tab:hover{color:var(--dx-pale)}
.dclx-tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(255,200,69,.95),rgba(255,180,40,.85));
  color:#2A1B00;font-weight:700;box-shadow:0 6px 18px -10px rgba(255,200,69,.9)}
.dclx-tab:focus-visible{outline:2.5px solid var(--dx-pale);outline-offset:2px}

.dclx-panel{display:none;margin-top:22px;animation:dxFade .45s cubic-bezier(.22,1,.36,1) both}
.dclx-panel.on{display:block}
@keyframes dxFade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ ship art --- */
.dclx-ship{width:100%;display:block;overflow:visible}
.dclx-shiptop{height:40px;margin:4px 0 -2px}
.dclx-shiphull{height:46px;margin:-2px 0 2px}
.dclx-ship .sk{fill:none;stroke:var(--dx-gold);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
  opacity:.92;stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}
.dclx.drawn .dclx-ship .sk{animation:dxDraw 1.5s cubic-bezier(.55,.06,.2,1) forwards}
.dclx.drawn .dclx-ship .sk.d2{animation-delay:.42s}
.dclx.drawn .dclx-ship .sk.d3{animation-delay:.62s}
.dclx.drawn .dclx-ship .sk.d4{animation-delay:.74s}
@keyframes dxDraw{to{stroke-dashoffset:0}}
.dclx-ship .wl{stroke:var(--dx-ice);opacity:.4;stroke-width:1.2;stroke-dasharray:5 7}
.dclx.drawn .dclx-ship .wl{animation:dxWave 7s linear infinite}
@keyframes dxWave{to{stroke-dashoffset:-96}}
.dclx-ship .fn{fill:rgba(255,200,69,.14)}

/* ----------------------------------------------------------- deck view --- */
.dclx-decks{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.dclx-deck{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px;
  padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.032);
  border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s;
  opacity:0;transform:translateX(-14px);animation:dxDeckIn .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes dxDeckIn{to{opacity:1;transform:none}}
.dclx-deck.hot{background:rgba(255,200,69,.10);border-color:rgba(255,200,69,.42)}
.dclx-deck.cold{opacity:.34}
.dclx-dno{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.09em;color:var(--dx-dim);
  display:flex;align-items:center;gap:5px;justify-content:flex-end;white-space:nowrap}
.dclx-dno b{color:var(--dx-pale);font-size:14px;font-weight:700}
.dclx-flag{color:var(--dx-gold);font-size:10px;text-decoration:none;line-height:1}
.dclx-chips{display:flex;flex-wrap:wrap;gap:5px}
.dclx-chip{appearance:none;cursor:pointer;border:1px solid transparent;border-radius:100px;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.04em;padding:4px 10px;
  color:#08121F;font-weight:700;transition:transform .2s,box-shadow .25s,opacity .25s;position:relative}
.dclx-chip:hover{transform:translateY(-2px) scale(1.05)}
.dclx-chip:focus-visible{outline:2.5px solid var(--dx-pale);outline-offset:2px}
.dclx-chip.sel{box-shadow:0 0 0 2px var(--dx-pale),0 8px 20px -8px rgba(255,243,207,.85)}
.dclx-chip.mute{opacity:.26}

/* --------------------------------------------------------- legend/key --- */
.dclx-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.dclx-lg{appearance:none;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:100px;padding:5px 12px 5px 8px;display:flex;align-items:center;gap:7px;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dx-dim);transition:color .2s,border-color .2s,background .2s}
.dclx-lg:hover,.dclx-lg[aria-pressed="true"]{color:#fff;border-color:rgba(255,200,69,.5);background:rgba(255,200,69,.1)}
.dclx-lg:focus-visible{outline:2.5px solid var(--dx-pale);outline-offset:2px}
.dclx-sw{width:11px;height:11px;border-radius:3px;flex:none}

/* -------------------------------------------------------------- readout -- */
.dclx-read{margin-top:16px;border-radius:14px;padding:15px 17px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,200,69,.13),rgba(138,182,232,.07));
  border:1px solid rgba(255,200,69,.3)}
.dclx-read::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.16) 50%,transparent 66%);
  transform:translateX(-120%)}
.dclx-read.shine::after{animation:dxShine 1.1s ease both}
@keyframes dxShine{to{transform:translateX(120%)}}
.dclx-read .rk{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dx-gold)}
.dclx-read .rt{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:18px;
  color:#fff;margin-top:6px;line-height:1.25}
.dclx-read .rd{font-size:14px;color:var(--dx-dim);margin-top:7px;line-height:1.55}
.dclx-read .rd b{color:var(--dx-pale);font-weight:600}
.dclx-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.dclx-fact{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.07em;
  background:rgba(8,18,40,.5);border:1px solid rgba(255,255,255,.13);border-radius:100px;
  padding:4px 11px;color:var(--dx-pale)}

/* -------------------------------------------------------------- toscale -- */
.dclx-scale-wrap{display:grid;grid-template-columns:1fr 268px;gap:20px;align-items:start}
.dclx-stage{position:relative;border-radius:14px;background:
   linear-gradient(rgba(255,255,255,.028),rgba(255,255,255,.028)),
   repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(255,255,255,.05) 23px,rgba(255,255,255,.05) 24px),
   repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(255,255,255,.05) 23px,rgba(255,255,255,.05) 24px);
  border:1px solid rgba(255,255,255,.1);padding:18px;min-height:290px;
  display:flex;align-items:center;justify-content:center}
.dclx-stage svg{width:100%;height:auto;overflow:visible}
.dclx-rectA{fill:rgba(255,200,69,.2);stroke:var(--dx-gold);stroke-width:2;
  transition:all .85s cubic-bezier(.22,1,.36,1)}
.dclx-rectB{fill:rgba(138,182,232,.10);stroke:var(--dx-ice);stroke-width:2;stroke-dasharray:7 4;opacity:.95;
  transition:all .85s cubic-bezier(.22,1,.36,1)}
.dclx-tagA,.dclx-tagB{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  transition:all .85s cubic-bezier(.22,1,.36,1)}
.dclx-tagB{fill:var(--dx-ice)}
.dclx-slab{stroke:var(--dx-pale);stroke-width:1.4;opacity:.55}
.dclx-sltx{fill:var(--dx-pale);font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.1em;opacity:.8}
.dclx-mult{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;
  font-size:clamp(34px,7vw,52px);line-height:1;color:var(--dx-gold);letter-spacing:-.02em}
.dclx-multlab{font-size:14px;color:var(--dx-dim);margin-top:8px;line-height:1.5}
.dclx-multlab b{color:var(--dx-pale)}
.dclx-pick{margin-top:16px}
.dclx-pick label{display:block;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dx-gold);margin-bottom:7px}
.dclx-sel{width:100%;background:rgba(8,18,40,.75);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:10px 12px;font-family:"Space Mono",monospace;font-size:11.5px;cursor:pointer}
.dclx-sel:focus-visible{outline:2.5px solid var(--dx-pale);outline-offset:2px}
.dclx-sel option{background:#0D1B36;color:#fff}

/* --------------------------------------------------------------- climb --- */
.dclx-climb{position:relative;padding-left:6px}
.dclx-rail{position:absolute;left:24px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden}
.dclx-rail i{position:absolute;inset:auto 0 0 0;height:0;
  background:linear-gradient(180deg,var(--dx-gold),rgba(255,200,69,.25));
  transition:height 1.5s cubic-bezier(.22,1,.36,1)}
.dclx-rung{position:relative;display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
  padding:11px 13px 11px 0;border-radius:12px;cursor:pointer;border:1px solid transparent;
  background:transparent;width:100%;text-align:left;transition:background .25s,border-color .25s,transform .2s;
  opacity:0;transform:translateY(10px);animation:dxRungIn .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes dxRungIn{to{opacity:1;transform:none}}
.dclx-rung:hover{background:rgba(255,255,255,.05)}
.dclx-rung:focus-visible{outline:2.5px solid var(--dx-pale);outline-offset:2px}
.dclx-rung.sel{background:rgba(255,200,69,.11);border-color:rgba(255,200,69,.42)}
.dclx-badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;justify-self:center;
  font-family:"Space Mono",monospace;font-weight:700;font-size:14px;color:#08121F;position:relative;z-index:1;
  box-shadow:0 0 0 3px var(--dx-night)}
.dclx-rname{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;
  font-size:15px;color:#fff;line-height:1.3}
.dclx-rname em{font-style:normal;opacity:.55;font-weight:400;font-size:13px}
.dclx-rmeta{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.06em;
  color:var(--dx-dim);margin-top:5px;line-height:1.45}
.dclx-rdelta{font-family:"Space Mono",monospace;font-size:11.5px;color:var(--dx-gold);text-align:right;line-height:1.3}
.dclx-rdelta small{display:block;color:var(--dx-dim);font-size:8.5px;letter-spacing:.08em;margin-top:3px;
  max-width:19ch;margin-left:auto}
.dclx-rdelta.down{color:var(--dx-ice)}
.dclx-rdelta.flat{color:var(--dx-dim)}
.dclx-gap{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:3px 0}
.dclx-gaptx{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.13em;color:var(--dx-ice);
  text-transform:uppercase;opacity:.85}

/* ---------------------------------------------------------- split bath --- */
.dcl-bath{margin:30px 0 6px;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(170deg,#0F2233,#0A1826);border:1px solid rgba(138,182,232,.28);
  box-shadow:0 24px 60px -44px rgba(4,10,24,.9);color:#E8EDF6}
.dcl-bath-in{padding:24px 26px 26px;position:relative;z-index:2}
.dcl-bath .bk{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8AB6E8}
.dcl-bath h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(19px,2.8vw,25px);
  color:#fff;margin-top:8px;line-height:1.15}
.dcl-bath p{font-size:14.5px;line-height:1.6;color:#9FB0CC;margin-top:9px;max-width:62ch}
.dcl-bath p b{color:#DCE7F7;font-weight:600}
.dcl-bathfig{margin-top:18px;width:100%;max-width:520px;overflow:visible}
.dcl-bathfig .rm{fill:rgba(138,182,232,.09);stroke:#8AB6E8;stroke-width:1.6;
  opacity:0;transition:opacity .6s ease}
.dcl-bath.seen .dcl-bathfig .rm{opacity:1}
.dcl-bath.seen .dcl-bathfig .rm.r2{transition-delay:.28s}
.dcl-bathfig .fx{fill:none;stroke:#FFF3CF;stroke-width:1.4;stroke-linecap:round;opacity:0;
  transition:opacity .5s ease .5s}
.dcl-bath.seen .dcl-bathfig .fx{opacity:.85}
.dcl-bathfig .lb{fill:#8AB6E8;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  opacity:0;transition:opacity .5s ease .72s}
.dcl-bath.seen .dcl-bathfig .lb{opacity:1}
.dcl-bathfig .dv{stroke:#FFC845;stroke-width:2.2;stroke-dasharray:var(--dvl,120);stroke-dashoffset:var(--dvl,120)}
.dcl-bath.seen .dcl-bathfig .dv{animation:dxDraw .8s ease .34s forwards}

/* ------------------------------------------------------- wishing star --- */
.dcl-wish{position:relative;margin:26px 0 4px;border-radius:16px;padding:20px 22px;
  background:linear-gradient(135deg,rgba(11,49,56,.055),rgba(184,134,59,.07));
  border:1px solid rgba(184,134,59,.34)}
.dcl-wishbtn{appearance:none;border:0;background:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:0;color:inherit;text-align:left}
.dcl-wishbtn:focus-visible{outline:2.5px solid #B8863B;outline-offset:4px;border-radius:10px}
.dcl-wg{font-size:30px;line-height:1;filter:drop-shadow(0 0 9px rgba(255,200,69,.8));
  animation:dxBreathe 3s ease-in-out infinite;transition:transform .3s;flex:none}
.dcl-wishbtn:hover .dcl-wg{transform:scale(1.16) rotate(15deg)}
@keyframes dxBreathe{0%,100%{filter:drop-shadow(0 0 5px rgba(255,200,69,.45))}
                     50%{filter:drop-shadow(0 0 15px rgba(255,200,69,.95))}}
.dcl-wl1{display:block;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#B8863B}
.dcl-wl2{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:16.5px;
  color:#12262A;margin-top:3px;line-height:1.25}
.dcl-wout{display:none;margin-top:14px;border-top:1px solid rgba(184,134,59,.3);padding-top:14px}
.dcl-wout.show{display:block;animation:dxFade .5s cubic-bezier(.22,1,.36,1) both}
.dcl-wout .wk{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:#B8863B}
.dcl-wout p{font-size:15.5px;line-height:1.6;color:#12262A;margin-top:7px}
.dcl-wout p b{font-weight:700}
.dcl-wfx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1}
.dcl-wish>*:not(.dcl-wfx){position:relative;z-index:2}

/* ----------------------------------------------------------- hero magic -- */
/* The stacking rule below must NOT catch the dust canvas: giving it
   position:relative puts it in flow, and because the canvas is sized from the
   hero's own height that feeds back into a runaway-growth loop. */
.ghero{position:relative}
.ghero>*:not(.dcl-herofx){position:relative;z-index:1}
.dcl-herofx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ------------------------------------------------------------- reveal ---- */
.dcl-rv{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.dcl-rv.seen{opacity:1;transform:none}

/* ------------------------------------------------------------ pixie ------ */
.dcl-mote{position:fixed;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:9999;
  background:radial-gradient(circle,#FFF3CF 0%,#FFC845 55%,rgba(255,200,69,0) 72%);
  animation:dxMote .95s ease-out forwards}
@keyframes dxMote{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
                 100%{opacity:0;transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + 26px)) scale(.25)}}

/* ------------------------------------------------------------ responsive - */
@media(max-width:820px){
  .dclx-scale-wrap{grid-template-columns:1fr}
  .dclx-inner{padding:20px 15px 24px}
  .dclx-deck{grid-template-columns:52px 1fr;gap:9px;padding:6px 7px}
  .dclx-rung{grid-template-columns:40px 1fr;gap:10px}
  .dclx-rdelta{grid-column:2;text-align:left;margin-top:2px}
  .dclx-rail{left:20px}
  .dclx-badge{width:32px;height:32px;font-size:12.5px}
  .dclx-stage{min-height:220px;padding:12px}
  .dcl-bath-in{padding:19px 16px 22px}
}
@media(max-width:520px){
  .dclx-tab{padding:8px 11px;font-size:10px;letter-spacing:.09em}
  .dclx-chip{font-size:9.5px;padding:4px 8px}
}

/* -------------------------------------------------- reduced motion / print */
@media(prefers-reduced-motion:reduce){
  .dclx-star,.dcl-wg,.dclx-ship .wl{animation:none!important}
  .dclx-ship .sk{stroke-dashoffset:0!important;animation:none!important}
  .dclx-deck,.dclx-rung{opacity:1!important;transform:none!important;animation:none!important}
  .dclx-panel,.dcl-wout.show{animation:none!important}
  .dclx-read.shine::after{animation:none!important}
  .dcl-rv{opacity:1!important;transform:none!important;transition:none!important}
  .dclx-rectA,.dclx-rectB,.dclx-rail i{transition:none!important}
  .dcl-bathfig .dv{stroke-dashoffset:0!important;animation:none!important}
  .dcl-mote{display:none!important}
}
@media print{
  .dclx-stars,.dcl-herofx,.dcl-wfx,.dcl-mote{display:none!important}
  .dclx,.dcl-bath{background:#fff!important;color:#111!important;border:1px solid #999!important;box-shadow:none!important}
  .dclx-title,.dclx-read .rt,.dclx-rname,.dcl-bath h3{color:#111!important}
  .dclx-sub,.dclx-rmeta,.dcl-bath p{color:#333!important}
  .dclx-panel{display:block!important}
  .dclx-tabs{display:none!important}
}