/* Ghost Shift storybook theme: navy panels with brass line ornaments, a framed painted stage, brass buttons.
   Loaded after style.css. Everything here is CSS (no images), so it also works before the painted art loads. */
:root{--bg:#060c1d;--panel:#0c1936;--card:#122143;--line:#c99a42;--gold:#f2b84b;--ink:#f3e9d0;--dim:#a2aed0;--btn:#14244a;--accent:#71e8ee;--brass:#d6a348;--brass-hi:#f6dc92;--brass-lo:#7a5418;--serif:Palatino,"Palatino Linotype","Book Antiqua","URW Palladio L",Georgia,"Times New Roman",serif}
html,body{background:radial-gradient(120% 90% at 50% 0%,#10224a 0%,#08112a 55%,#050a18 100%) fixed}
h1{font-family:var(--serif);font-size:24px;letter-spacing:.16em;color:var(--brass-hi);text-shadow:0 1px 0 #4a3210,0 0 14px rgba(246,220,146,.35)}
h1::after{content:' ◆';color:var(--brass);font-size:12px}
#sub{font-family:var(--serif);letter-spacing:.14em;color:var(--brass)}
header{border-bottom:1px solid rgba(214,163,72,.28)}
nav{border-top:1px solid rgba(214,163,72,.5);background:linear-gradient(#0a1430,#060c1d)}
nav button{font-family:var(--serif);letter-spacing:.12em;color:var(--dim);border-radius:4px}
nav button.on{color:#2a1a06;background:linear-gradient(#f6dc92,#c88f2e);box-shadow:0 0 10px rgba(214,163,72,.4)}
/* panels: navy with a brass hairline and corner brackets */
.panel{position:relative;background:linear-gradient(180deg,#0f1e42,#0a1531);border:1px solid rgba(214,163,72,.7);border-radius:6px;box-shadow:inset 0 0 0 1px #060c1d,inset 0 0 0 2px rgba(214,163,72,.16),0 8px 22px rgba(0,0,0,.5)}
.panel::before{content:'';position:absolute;inset:4px;pointer-events:none;border-radius:3px;
  background:linear-gradient(var(--brass),var(--brass)) top left/14px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) top left/1px 14px no-repeat,
  linear-gradient(var(--brass),var(--brass)) top right/14px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) top right/1px 14px no-repeat,
  linear-gradient(var(--brass),var(--brass)) bottom left/14px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) bottom left/1px 14px no-repeat,
  linear-gradient(var(--brass),var(--brass)) bottom right/14px 1px no-repeat,linear-gradient(var(--brass),var(--brass)) bottom right/1px 14px no-repeat;opacity:.85}
.panel h2{font-family:var(--serif);font-size:15px;letter-spacing:.18em;color:var(--brass-hi);display:flex;align-items:center;gap:10px}
.panel h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(214,163,72,.7),transparent)}
.tipc{background:linear-gradient(#1a2850,#101c3d);border-color:var(--brass)}
/* buttons */
.btn{background:linear-gradient(#1a2d58,#0f1f42);border:1px solid rgba(214,163,72,.55);border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.4)}
.btn:hover:not(:disabled){border-color:var(--brass-hi);box-shadow:0 0 10px rgba(214,163,72,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.gold,.btn.on{background:linear-gradient(#f9df98,#d6a348 55%,#b3812f);color:#2a1a06;border-color:#fff0bf;text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* the stage in a brass-and-walnut frame */
.cvs{border:0;border-radius:6px;padding:7px;background:linear-gradient(145deg,#8a5d33,#3c2412 55%,#6d4727);box-shadow:0 0 0 1px #f0cf80 inset,0 0 0 2px #3a2410 inset,0 0 0 3px #c99a42,0 12px 34px rgba(0,0,0,.65)}
#cv{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.7)}
#cap{font-family:var(--serif);letter-spacing:.1em;color:var(--brass-hi)}
/* ghosts + objectives */
.gp{border:1px solid rgba(214,163,72,.5);background:linear-gradient(#13244a,#0c1836);border-radius:8px}
.gp.in{border-color:var(--accent);box-shadow:0 0 14px rgba(113,232,238,.55)}
.obj li::before{content:'☆ ';color:var(--brass)}.obj li.ok::before{content:'★ ';color:var(--gold)}.obj li.ok{color:var(--gold)}
/* timeline slots */
.slots{gap:5px}
.tk{width:40px;height:52px;border:1px solid rgba(214,163,72,.4);border-radius:12px 12px 8px 8px;background:linear-gradient(#08112a,#112148);box-shadow:inset 0 3px 6px rgba(0,0,0,.65)}
.tk i{color:var(--brass);font-family:var(--serif);font-size:11px}
.tk.f{border:1px solid var(--brass-hi);background:linear-gradient(#1c2f62,#142550);box-shadow:inset 0 0 10px rgba(246,220,146,.28),0 0 8px rgba(214,163,72,.35)}
.tk.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset,0 0 12px rgba(113,232,238,.5)}
.chip{background:linear-gradient(#1a2d58,#0f1f42);border-color:rgba(214,163,72,.6);font-family:var(--serif)}
/* host cards */
.host{background:linear-gradient(#162a52,#0d1b3a);border:1px solid rgba(214,163,72,.6);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 6px rgba(0,0,0,.4)}
.host:hover{border-color:var(--brass-hi)}.host.on{border-color:var(--accent);background:linear-gradient(#1b3d6c,#102a52);box-shadow:0 0 12px rgba(113,232,238,.4)}
.host .hs{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2c4a80,#0f2040);border:1px solid var(--brass);font-size:20px;color:var(--brass-hi)}
.host b{font-family:var(--serif);letter-spacing:.08em}
/* brass round transport buttons */
.transport{gap:8px}
.transport .btn{width:48px;height:48px;padding:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f8e3a2,#c99a42 62%,#6e4b17);color:#2a1a06;border:2px solid #f4de9d;font-size:17px;box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),0 3px 7px rgba(0,0,0,.55)}
.transport .btn:hover:not(:disabled){filter:brightness(1.12);border-color:#fff3c8}
.transport #pp{width:60px;height:60px;font-size:22px;background:radial-gradient(circle at 35% 28%,#fff1b8,#e0ac43 60%,#8a5e1c)}
/* wide screens: left = ghosts + objectives, centre = the painted stage, right = timeline, hosts and controls */
@media(min-width:1100px){
  .gs{max-width:1520px;display:grid;grid-template-columns:270px minmax(0,1fr) 360px;grid-template-rows:auto auto auto auto 1fr;gap:12px;align-items:start}
  .gs .top{grid-column:1;grid-row:1/6;display:flex;flex-direction:column;gap:12px}
  .gs #tip{grid-column:2;grid-row:1}.gs .cvwrap{grid-column:2;grid-row:2}.gs #cap{grid-column:2;grid-row:3}.gs #hintline{grid-column:2;grid-row:4}.gs #zoomb{grid-column:2;grid-row:5;justify-self:center}
  .gs .bottom{grid-column:3;grid-row:1/6;display:flex;flex-direction:column;gap:10px}
  .gs .ctrl{display:contents}
  .gs .slots{display:grid;grid-template-columns:repeat(6,1fr)}.gs .tk{width:auto}
  .gs .trays{order:2}.gs .tray{display:grid;grid-template-columns:1fr 1fr}.gs .transport{order:3;justify-content:center;margin-top:6px}
  .gs .top .panel{padding:12px 14px}.gs .ghp{flex-direction:column;align-items:stretch}.gs .gp{padding:6px 10px}
}
@media(min-width:1100px){.gs .tray{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.gs .host{padding:6px 8px;gap:6px;min-width:0}.gs .host>span:nth-child(2){min-width:0;overflow:hidden}.gs .host b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.gs .host small{white-space:normal;line-height:1.15}.gs .host .hs{width:36px;height:36px;font-size:17px;flex:none}.gs .host kbd{display:none}}
@media(max-width:600px){h1{font-size:17px;letter-spacing:.08em;white-space:nowrap}h1::after{font-size:9px}#sub{font-size:9px;letter-spacing:.06em}nav button{font-size:9px;letter-spacing:.03em;padding:10px 1px}.panel h2{font-size:13px;letter-spacing:.1em}}

/* main menu hero: the box art, framed */
.split.menu{align-items:center}
.hero{display:flex;justify-content:center;align-items:center;padding:6px}
.hero img{display:block;height:min(78vh,800px);width:auto;max-width:100%;border-radius:6px;background:#050a18;box-shadow:0 0 0 2px #3a2410,0 0 0 4px #c99a42,0 0 0 6px #3a2410,0 16px 50px rgba(0,0,0,.7),0 0 70px rgba(242,184,75,.16)}
@media(max-width:700px){.hero img{height:auto;max-height:46vh}}

/* round-3 polish: portraits, medallions, exit badge, desktop stage controls */
.gimg{position:relative;display:inline-block;width:34px;height:56px;flex:none}.gimg img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 6px rgba(160,230,255,.35))}
.gimg .hat{position:absolute;left:0;top:-2px;width:100%;height:auto;overflow:visible;pointer-events:none}
.gp .gimg{width:26px;height:42px}.card .gimg{width:40px;height:66px}.orb.big .gimg{width:46px;height:76px}
.card .orb{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f8e3a2,#c99a42 62%,#6e4b17)!important;border:2px solid #f4de9d;box-shadow:inset 0 -3px 5px rgba(0,0,0,.35),0 3px 7px rgba(0,0,0,.5);color:#2a1a06!important;display:grid;place-items:center;font-size:24px;overflow:hidden}
.card .orb.big{width:auto;height:auto;min-width:56px;min-height:56px;border-radius:12px;background:linear-gradient(#162a52,#0d1b3a)!important;border:1px solid var(--brass);padding:4px 8px}
.card .orb .oi{width:34px;height:42px;object-fit:contain}
.card{background:linear-gradient(#142548,#0c1836)!important;border:1px solid rgba(214,163,72,.5)!important;border-radius:10px}.card.sel{border-color:var(--brass-hi)!important;box-shadow:0 0 14px rgba(214,163,72,.4)}
#exitgap{display:none;position:absolute;right:14px;bottom:14px;z-index:3;padding:6px 14px;border-radius:14px;background:linear-gradient(#f9df98,#c88f2e);color:#2a1a06;font-family:var(--serif);font-weight:800;letter-spacing:.1em;font-size:12px;box-shadow:0 3px 10px rgba(0,0,0,.5);pointer-events:none}
@media(min-width:1100px){#zoomb{display:block}.gs{grid-template-columns:240px minmax(0,1fr) 330px}.gs .host b{white-space:normal;font-size:11px;line-height:1.1}}
@media(max-width:600px){nav button{font-size:8.5px;letter-spacing:0;padding:10px 0}}
.card .gimg{width:52px;height:88px}.gp .gimg{width:28px;height:46px}