/* Reference typography, scoped to Prepare. Font licensed under the SIL OFL. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/source-sans-3-latin.woff2?v=19143dca075972bc') format('woff2')}
.story-prepare{
    --paper: #F3EEE4;        /* page background outside the frame */
    --stage: #FBF7EE;        /* inside the frame */
    --ink: #1F2B27;          /* main text */
    --ink-2: #3A3428;        /* body text */
    --muted: #6B5E48;        /* eyebrows, footer */
    --muted-2: #5E5440;      /* secondary text */
    --green: #1B4A3F;        /* brand deep green */
    --green-2: #3F6650;      /* faction label, links */
    --green-tint: #EEF3EC;   /* selected mode background */
    --tag-bg: #E6EDE3;       /* keyword tag background */
    --gold: #B8955A;         /* outer frame line */
    --gold-2: #CDB38A;       /* inner frame line, borders */
    --gold-3: #D8C49E;       /* divider */
    --line: #D9CDB5;         /* default borders */
    --card-bg: #FFFDF8;      /* buttons, option cards */
    --berry: #8E2F3A;        /* "Begin the tale" */
    --berry-edge: #C9A25E;
    --heart: #B4343F;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'Source Sans 3', system-ui, sans-serif;
    --shadow-card: 0 22px 40px -14px rgba(70, 45, 20, .45), 0 6px 14px rgba(70, 45, 20, .14);height:736px;padding:0;color:var(--ink);font-family:var(--sans);background-color:var(--stage)}
.prepare-background{position:absolute;inset:0;background:var(--prepare-background-image,none) center/cover no-repeat;opacity:.5;pointer-events:none}
:root[data-lobby-background=webp] .story-prepare{--prepare-background-image:url('/assets/lobby-bg.webp?v=6ae638b3bc3f418f')}
:root[data-lobby-background=png] .story-prepare{--prepare-background-image:url('/assets/lobby-bg.png?v=2f47248513995ae7')}
  .prepare-back { position: absolute; left: 164px; top: 26px; z-index: 3; height: 44px; padding: 0 18px 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--gold-2); border-radius: 999px; background: var(--card-bg); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; }

  .prepare-content { position: absolute; left: 150px; right: 150px; top: 60px; bottom: 28px; z-index: 2; display: grid; grid-template-columns: 380px minmax(0, 1fr); column-gap: 64px; align-items: center; }

  /* Left column */
  .prepare-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .prepare-glow { position: absolute; left: 50%; top: 44%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; transition: background .3s; }
  .prepare-card { position: relative; width: 352px; height: 493px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-card); }
  .prepare-thumbs { position: relative; display: flex; gap: 12px; }
  .prepare-thumb { width: 52px; height: 72px; padding: 0; border: 2px solid rgba(184, 149, 90, .5); border-radius: 8px; background: var(--card-bg); opacity: .6; cursor: pointer; overflow: hidden; box-shadow: 0 4px 10px -4px rgba(70, 45, 20, .35); transition: opacity .2s, border-color .2s; }
  .prepare-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prepare-thumb.is-active { border-color: var(--green); opacity: 1; }

  /* Right column */
  .prepare-details { display: flex; flex-direction: column; }
  .prepare-kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
  .prepare-faction { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--green-2); }
  .prepare-name { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1.05; }
  .prepare-hp { margin-top: 10px; display: flex; align-items: center; gap: 4px; }
  .prepare-hp span { margin-left: 8px; font-size: 15px; font-weight: 600; color: #4A3F30; }
  .prepare-skills { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
  .prepare-skill { display: flex; flex-direction: column; gap: 4px; }
  .prepare-skill-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
  .prepare-skill-tag { padding: 3px 10px; border-radius: 999px; background: var(--tag-bg); color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
  .prepare-skill-head h3 { font-family: var(--serif); font-size: 25px; }
  .prepare-skill-desc { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 560px; }
  .prepare-divider { margin-top: 20px; height: 1px; background: var(--gold-3); }
  .prepare-label { margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
  .prepare-table-row { margin-top: 12px; display: flex; gap: 28px; }
  .prepare-seat { display: flex; align-items: center; gap: 10px; }
  .prepare-seat img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold-2); background: var(--card-bg); }
  .prepare-seat.is-you img { border-color: var(--green); }
  .prepare-seat-text { display: flex; flex-direction: column; }
  .prepare-seat-name { font-size: 15px; font-weight: 700; }
  .prepare-seat-role { font-size: 13px; color: var(--muted-2); }
  .prepare-seat.is-you .prepare-seat-role { color: var(--green); }

  .prepare-modes { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .prepare-mode { position: relative; min-height: 100px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-bg); color: var(--ink); font-family: var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
  .prepare-mode-icon { display: flex; color: var(--muted); }
  .prepare-mode-title { font-size: 17px; font-weight: 700; }
  .prepare-mode-sub { font-size: 13px; line-height: 1.35; color: var(--muted-2); }
  .prepare-mode-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); display: none; align-items: center; justify-content: center; }
  .prepare-mode[aria-pressed="true"] { border-color: var(--green); background: var(--green-tint); }
  .prepare-mode[aria-pressed="true"] .prepare-mode-icon { color: var(--green); }
  .prepare-mode[aria-pressed="true"] .prepare-mode-check { display: flex; }

  .story-prepare .story-begin { margin-top: 16px; height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1.5px solid var(--berry-edge); border-radius: 12px; background: var(--berry); color: #FFF8EE; font-family: var(--serif); font-size: 23px; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(110, 30, 40, .6); }

  /* Play Online popup */
  .prepare-online-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(28, 40, 35, .45); display: flex; align-items: center; justify-content: center; }
  .prepare-online-overlay.is-open { display: flex; }
  .prepare-online-dialog { position: relative; width: 700px; padding: 32px; border: 1.5px solid var(--gold); border-radius: 16px; background: var(--stage); box-shadow: 0 30px 60px -20px rgba(20, 30, 25, .55); }
  .prepare-online-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card-bg); cursor: pointer; }
  .prepare-online-kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--muted); }
  .prepare-online-dialog h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 32px; }
  .prepare-online-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .prepare-online-panel { padding: 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
  .prepare-online-panel.is-disabled { border: 1px solid #DCCFB6; background: #F6F1E6; }
  .prepare-online-panel.is-primary { border: 1.5px solid var(--green); background: var(--card-bg); }
  .prepare-online-panel-head { display: flex; align-items: center; justify-content: space-between; }
  .prepare-online-panel-title { font-size: 18px; font-weight: 700; }
  .prepare-online-panel.is-disabled .prepare-online-panel-title, .prepare-online-panel.is-disabled .prepare-online-panel-text { color: var(--muted-2); }
  .prepare-soon { padding: 3px 9px; border-radius: 999px; background: #EDE4D2; color: var(--muted-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
  .prepare-online-panel-text { font-size: 14px; line-height: 1.45; color: #4A3F30; }
  .prepare-find-match { margin-top: auto; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #EFE8DA; color: #6E6450; font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: not-allowed; }
  .prepare-create-room { height: 46px; border: none; border-radius: 10px; background: var(--green); color: #fff; font-family: var(--sans); font-size: 16px; font-weight: 700; cursor: pointer; }
  .prepare-online-dialog .prepare-code-label { margin-top: 6px; font-size: 13px; font-weight: 600; color: #4A3F30; }
  .prepare-code-row { display: flex; gap: 8px; }
  .prepare-code-input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--gold-2); border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 15px; }
  .prepare-join-room { height: 44px; padding: 0 18px; border: 1px solid var(--green); border-radius: 10px; background: var(--card-bg); color: var(--green); font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; }

/* Keep the project's outer chrome, while centering the reference's 1041px content grid. */
.prepare-content{width:min(1041px,calc(100% - 120px));left:50%;right:auto;transform:translateX(-50%);z-index:3}
.prepare-back{left:calc((100% - min(1041px,100% - 120px))/2 + 14px);z-index:4}
.prepare-leader-art{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.prepare-glow{background:radial-gradient(closest-side,var(--prepare-glow-color),rgba(251,247,238,0))}
.prepare-glow-king{--prepare-glow-color:rgba(222,160,82,.42)}.prepare-glow-nax{--prepare-glow-color:rgba(176,148,214,.5)}.prepare-glow-clara{--prepare-glow-color:rgba(232,150,172,.45)}
.prepare-kicker{text-transform:uppercase;outline:none}.prepare-skill-tag{text-transform:uppercase}.prepare-skill-head h3{font-weight:400;margin:0}.prepare-skill-note{font-size:12px;line-height:1.5;color:var(--muted-2)}
.prepare-hp{color:var(--heart)}.prepare-card,.prepare-details,.prepare-hero{min-width:0}.prepare-seat{min-width:0}.prepare-seat img{flex-shrink:0}.prepare-thumb img{object-fit:contain}.prepare-mode-check{color:white}
.prepare-online-overlay{display:flex;padding:20px}.prepare-online-dialog{max-height:100%}.prepare-online-dialog h2{margin-right:32px}.prepare-online-kicker{padding-right:36px}.prepare-online-close{padding:0;color:var(--ink)}.prepare-online-panel-head{gap:8px}.prepare-soon{white-space:nowrap}.prepare-find-match:disabled{opacity:1}.prepare-code-row{margin:0}.prepare-online-dialog .prepare-code-label{margin:6px 0 0}.prepare-code-input{width:100%}
.prepare-thumb:hover{opacity:1}.prepare-create-room:hover:not(:disabled){background:#245c4e}.story-prepare .story-begin:hover:not(:disabled){background:#9c3945}
.story-prepare button:focus-visible,.story-prepare input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:1250px){.prepare-content{width:calc(100% - 100px);grid-template-columns:minmax(220px,.85fr) minmax(0,1.4fr);gap:40px}.prepare-back{left:64px}.prepare-card{width:min(100%,352px);height:auto;aspect-ratio:352/493}.prepare-table-row{gap:16px}.prepare-seat{gap:7px}.prepare-mode{padding:12px 10px}.prepare-mode-title{font-size:16px}}
@media(orientation:landscape) and (max-height:650px){
 .story-prepare{height:calc(100svh - 110px);min-height:270px}.prepare-content{width:calc(100% - 96px);top:12px;bottom:14px;grid-template-columns:36% minmax(0,1fr);gap:30px;align-items:stretch}.prepare-back{left:52px;top:12px;height:36px;padding:0 12px;font-size:13px}.prepare-hero{padding-top:46px;gap:10px;justify-content:center;min-height:0}.prepare-card{height:calc(100svh - 240px);max-height:340px;width:auto;max-width:100%;flex-shrink:0;aspect-ratio:5/7}.prepare-thumbs{gap:8px}.prepare-thumb{width:32px;height:44px;border-radius:5px;flex-shrink:0}.prepare-glow{width:360px;height:360px;margin:-180px 0 0 -180px}.prepare-details{overflow:auto;overscroll-behavior:contain;padding:4px 6px 4px 2px;scrollbar-width:thin}.prepare-kicker{font-size:10px}.prepare-faction{font-size:10px;margin-top:7px}.prepare-name{font-size:34px}.prepare-hp{margin-top:6px;gap:2px}.prepare-hp svg{width:13px;height:13px}.prepare-hp span{font-size:12px}.prepare-skills{margin-top:10px;gap:10px}.prepare-skill-head{gap:4px 8px}.prepare-skill-head h3{font-size:20px}.prepare-skill-tag{font-size:8px;padding:2px 7px}.prepare-skill-desc{font-size:13px;line-height:1.4}.prepare-skill-note{font-size:10px}.prepare-divider{margin-top:10px}.prepare-label{margin-top:9px;font-size:10px}.prepare-table-row{margin-top:7px;gap:12px}.prepare-seat{gap:5px}.prepare-seat img{width:30px;height:30px}.prepare-seat-name{font-size:12px}.prepare-seat-role{font-size:10px}.prepare-modes{margin-top:12px;gap:6px}.prepare-mode{min-height:58px;padding:8px;gap:4px}.prepare-mode-title{font-size:13px}.prepare-mode-icon svg{width:18px;height:18px}.prepare-mode-sub{display:none}.prepare-mode-check{width:15px;height:15px;top:7px;right:7px}.story-prepare .story-begin{height:44px;margin-top:10px;font-size:19px;flex-shrink:0}.prepare-online-overlay{padding:12px}.prepare-online-dialog{width:650px;padding:18px 22px}.prepare-online-dialog h2{font-size:25px}.prepare-online-grid{margin-top:14px;gap:12px}.prepare-online-panel{padding:12px;gap:7px}.prepare-online-panel-title{font-size:16px}.prepare-online-panel-text{font-size:12px}.prepare-online-kicker{font-size:10px}.prepare-soon{font-size:9px}.prepare-create-room{font-size:14px;min-height:44px}.prepare-online-dialog .prepare-code-label{margin-top:0}.prepare-code-input{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.story-prepare *{transition:none!important;animation:none!important}}

.prepare-profile{display:contents}
@media(orientation:landscape) and (max-height:650px){
 .prepare-details{overflow:hidden}.prepare-profile{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 4px 0}.prepare-modes{flex-shrink:0;margin-top:8px}.story-prepare .story-begin{margin-top:8px}.prepare-online-dialog{display:flex;flex-direction:column;overflow:hidden}.prepare-online-grid{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.prepare-online-panel{flex-shrink:0}
}
.prepare-online-dialog .prepare-name-label{font-size:13px;font-weight:600;margin:0;color:#4a3f30}.prepare-name-label span{font-weight:400;color:var(--muted-2)}.prepare-online-dialog .notice.error{font-size:13px;margin:14px 0 0}.prepare-online-panel > .prepare-code-input{flex:none}

.prepare-online-dialog .prepare-name-label{display:block}.prepare-name-label span{display:inline}