:root {
  --standard-card-width: 63mm;
  --standard-card-height: 88mm;
  --location-tile-width: 50mm;
  --location-tile-height: 75mm;
  --cube-outline-size: 10mm;
  --screen-card-width: var(--standard-card-width);
  --screen-card-height: var(--standard-card-height);
  --ink: #21332a;
  --muted-ink: #5d675f;
  --paper: #f7f3e8;
  --paper-dark: #ede6d7;
  --forest: #355d45;
  --forest-light: #739a75;
  --cream: #fffdf7;
  --line: #2f4939;
  --red: #b8423b;
  --red-dark: #812f2a;
  --gold: #e1bb42;
  --page: #d8ddd2;
  --event-ink: #273059;
  --event-line: #3b487f;
  --event-paper: #eeefff;
  --event-action: #f5d781;
  --tile-line: #294a3b;
  --gear-ink: #5b3d22;
  --gear-line: #80572e;
  --gear-paper: #fff1d8;
  --gear-accent: #d49842;
  --shadow: 0 14px 32px rgba(31, 53, 38, 0.18);
  --min-readable-copy: 7pt;
  --min-readable-label: 7pt;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.58), transparent 32%),
    linear-gradient(145deg, #e9e5d8, var(--page));
  font-family: Arial, Helvetica, sans-serif;
}

button, select, input, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { width: min(1800px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.page-header { margin-bottom: 20px; }
.eyebrow, .panel-kicker { margin: 0 0 5px; color: var(--forest); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; }
h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 0.95; }
h2 { font-size: 1.22rem; }
.header-copy { max-width: 840px; margin: 10px 0 0; color: var(--muted-ink); line-height: 1.48; }

.toolbar, .workspace, .collection-output {
  border: 1px solid rgba(47, 73, 57, 0.16);
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.78);
  box-shadow: var(--shadow);
}

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 16px; }
.control-group { display: grid; gap: 6px; min-width: 155px; }
.control-group.grow { flex: 1 1 260px; }
.control-group label, .form-field label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.control-group select, .control-group input, .form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid rgba(47, 73, 57, 0.35); border-radius: 10px; background: white; color: var(--ink);
}
.form-field textarea { min-height: 88px; resize: vertical; }
.toolbar-actions, .output-actions { display: flex; flex-wrap: wrap; gap: 8px; }
button { min-height: 40px; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--forest); color: white; font-size: 0.86rem; font-weight: 800; }
.secondary-button { background: #526f61; }
.accent-button { background: #8e6031; }
.danger-button { background: #8d3e38; }
.text-danger-button { min-height: auto; padding: 4px 0; background: transparent; color: #a23d38; text-decoration: underline; }
.status-message { margin: 16px 0 20px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 253, 247, 0.72); color: #3d493f; font-size: 0.92rem; }

.workspace { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(310px, 1fr) minmax(400px, 1.25fr); gap: 0; overflow: hidden; }
.library-panel, .form-panel, .preview-panel { min-height: 720px; padding: 18px; }
.library-panel, .form-panel { border-right: 1px solid rgba(47,73,57,.18); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.count-badge { display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 999px; background: var(--forest); color: white; font-size: .78rem; font-weight: 800; }
.library-list { display: grid; gap: 7px; max-height: 650px; overflow-y: auto; padding-right: 3px; }
.library-item { width: 100%; min-height: 54px; padding: 9px 10px; border: 1px solid rgba(47,73,57,.2); border-radius: 10px; background: #fffdf7; color: var(--ink); text-align: left; }
.library-item.is-selected { border-color: var(--forest); background: #e6f0e4; box-shadow: inset 3px 0 0 var(--forest); }
.library-item__name { display: block; font-weight: 800; line-height: 1.15; }
.library-item__meta { display: block; margin-top: 3px; color: var(--muted-ink); font-size: .75rem; }
.empty-state { padding: 18px; border: 1px dashed rgba(47,73,57,.3); border-radius: 12px; color: var(--muted-ink); line-height: 1.4; }

.editor-form { display: grid; gap: 12px; }
.form-section { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(47,73,57,.17); border-radius: 13px; background: rgba(255,255,255,.52); }
.form-section__title { margin: 0; color: var(--forest); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-field.full { grid-column: 1 / -1; }
.form-field--checkbox label { display:flex; align-items:center; gap:8px; min-height:42px; padding:9px 10px; border:1px solid rgba(47,73,57,.24); border-radius:9px; background:#fbfcf8; font-size:.82rem; letter-spacing:0; text-transform:none; }
.form-field--checkbox input { width:18px; height:18px; margin:0; accent-color:var(--forest); }
.form-help { margin: 0; color: var(--muted-ink); font-size: .76rem; line-height: 1.35; }
.preview-panel { display: grid; align-content: start; justify-items: center; background: linear-gradient(150deg, rgba(238,246,237,.9), rgba(245,241,231,.8)); }
.preview-stage { width: 100%; display: grid; place-items: center; }

.collection-output { margin-top: 22px; padding: 18px; }
.output-heading { align-items: center; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--location-tile-width), var(--standard-card-width))); gap: 8mm; align-items: start; }
.visual-card-button { display:block; width:fit-content; min-height:0; padding:0; border:0; border-radius:4mm; background:transparent; color:inherit; text-align:inherit; }
.visual-card-button > * { pointer-events:none; }
.visual-card-button:hover, .visual-card-button:focus-visible { outline: .9mm solid rgba(53,93,69,.45); outline-offset: 1.2mm; }
.visual-card-button.is-selected { outline: .7mm solid var(--forest); outline-offset: 1mm; }
.export-workspace { position: fixed; top: -100000px; left: -100000px; pointer-events: none; opacity: 0; }
.editor-dialog { width:min(980px, calc(100% - 32px)); max-height:min(900px, calc(100dvh - 32px)); padding:0; border:1px solid rgba(47,73,57,.22); border-radius:18px; background:var(--cream); color:var(--ink); box-shadow:0 24px 80px rgba(22,35,27,.38); }
.editor-dialog::backdrop { background:rgba(24,35,28,.5); }
.editor-dialog__shell { max-height:inherit; overflow:auto; padding:18px; }
.editor-dialog__heading { position:sticky; top:0; z-index:4; margin:-18px -18px 14px; padding:18px; border-bottom:1px solid rgba(47,73,57,.16); background:rgba(255,253,247,.96); backdrop-filter:blur(10px); }
.editor-dialog__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.form-field--file input { min-height:auto; padding:10px; border-style:dashed; background:#fbfcf8; }

/* Shared artwork fallback */
.image-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(21, 53, 32, .75); background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.52), transparent 22%), linear-gradient(145deg, #c6ddbc 0%, #7fa37e 100%); }
.image-fallback__icon { font-size: 3rem; }
.missing-image { display: none !important; }
.funding-bubble { display:inline-grid; min-width:4.8mm; height:4.8mm; place-items:center; padding:0 .7mm; border:.35mm solid #8a6a20; border-radius:999px; background:var(--gold); color:#3d2b04; font-weight:900; line-height:1; vertical-align:baseline; }

/* Research cards */
.research-card { width: var(--standard-card-width); height: var(--standard-card-height); overflow: hidden; border: .65mm solid var(--line); border-radius: 3mm; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); }
.research-card--event-discovery { border-color: var(--event-line); background: #f3f0ff; }
.research-card--event-discovery .research-card__art { border-color: var(--event-line); background: linear-gradient(165deg, rgba(255,255,255,.42), transparent 45%), linear-gradient(180deg,#d7d2ff,#938acb); }
.research-card--event-discovery .research-card__note-label { color: var(--event-line); }
.research-card__inner { display: flex; flex-direction: column; height: 100%; padding: 2mm; gap: 1.15mm; }
.research-card__art { position: relative; height: 33mm; flex: 0 0 33mm; overflow: hidden; border: .45mm solid var(--line); border-radius: 2mm; background: linear-gradient(165deg, rgba(255,255,255,.38), transparent 45%), linear-gradient(180deg,#b9d5b4,#7fa27c); }
.research-card__art-image { display:block; width:100%; height:100%; object-fit:cover; }
.research-card__art-fallback { position:absolute; inset:0; }
.research-card__tags { position:absolute; top:1.6mm; right:1.6mm; z-index:3; display:flex; max-width:57%; flex-wrap:wrap; justify-content:flex-end; gap:.8mm; }
.research-card__tag { display:grid; width:5.5mm; height:5.5mm; place-items:center; border:.25mm solid rgba(24,55,33,.22); border-radius:50%; background:rgba(255,255,255,.9); color:#213c2d; font-size:7pt; line-height:1; }
.tag-visual { display:grid; width:100%; height:100%; place-items:center; line-height:1; }
.tag-visual--image { display:block; width:100%; height:100%; object-fit:contain; }
.research-card__metadata { position:absolute; top:1.6mm; left:1.6mm; z-index:3; width:23mm; }
.research-card__publish-row { display:flex; align-items:center; gap:1mm; margin-bottom:1mm; }
.research-card__publish-bubble { display:grid; width:8.5mm; height:8.5mm; flex:0 0 auto; place-content:center; border:.45mm solid var(--line); border-radius:50%; background:white; text-align:center; }
.research-card__publish-value { font-size:9pt; font-weight:900; line-height:1; }
.research-card__difficulty { display:flex; gap:.6mm; }
.difficulty-box { width:3.5mm; height:3.5mm; border:.45mm solid var(--line); border-radius:.8mm; background:white; }
.difficulty-box--filled { background:var(--gold); }
.research-card__requirements { display:inline-flex; width:fit-content; flex-direction:column; align-items:center; gap:.4mm; padding:.8mm; border:.45mm solid var(--red-dark); border-radius:1.5mm; background:var(--red); color:white; }
.research-card__requirement-icon { display:grid; width:4mm; height:4mm; place-items:center; font-size:6.5pt; }
.research-card__name-group { min-height:14mm; }
.research-card__name { font-family:Georgia,'Times New Roman',serif; font-size:9.5pt; font-weight:800; line-height:1.03; }
.research-card__scientific-name { margin-top:.6mm; color:var(--muted-ink); font-size:6.5pt; font-style:italic; }
.research-card__focus-copy { margin-top:.9mm; color:#39483f; font-size:var(--min-readable-copy); line-height:1.18; }
.research-card__effect { padding:1.2mm 1.5mm; border:.35mm solid rgba(47,73,57,.28); border-radius:1.6mm; background:#fffdf7; }
.research-card__effect--immediate { border-color:#a56f1e; background:#fff1c7; }
.research-card__effect--engine { border-color:#3f7457; background:#dff0e6; }
.research-card__effect--none { border-color:rgba(47,73,57,.24); background:rgba(255,255,255,.58); }
.research-card__note-label { display:block; margin-bottom:.5mm; color:var(--forest); font-size:var(--min-readable-label); font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.research-card__effect-copy { font-size:6.5pt; line-height:1.16; }
.research-card__hour-grid { display:flex; width:fit-content; max-width:calc((3 * var(--cube-outline-size)) + (2 * 1.2mm)); flex-wrap:wrap; justify-content:center; gap:1.2mm; margin:1.2mm auto 0; padding-top:1.2mm; border-top:.25mm solid rgba(47,73,57,.22); }
.research-card__effect-copy + .research-card__hour-grid { margin-top:1.2mm; }
.research-card__effect--none .research-card__hour-grid { margin-top:0; padding-top:0; border-top:0; }
.research-card__hour-slot { width:var(--cube-outline-size); height:var(--cube-outline-size); flex:0 0 var(--cube-outline-size); border:.45mm dashed #52675a; border-radius:1mm; background:white; }
.research-card__note { margin-top:auto; padding-top:1.2mm; border-top:.25mm solid rgba(47,73,57,.24); color:#544f45; }
.research-card__note-copy { font-size:var(--min-readable-copy); font-style:italic; line-height:1.18; }
.research-card--long-progress .research-card__inner { gap:1mm; }
.research-card--long-progress .research-card__art { height:33mm; flex-basis:33mm; }
.research-card--long-progress .research-card__name-group { min-height:auto; }
.research-card--long-progress .research-card__effect { padding:1.1mm .8mm; }
.research-card--long-progress .research-card__hour-grid { max-width:calc((5 * var(--cube-outline-size)) + (4 * 1.2mm)); gap:1.2mm; margin-top:1mm; padding-top:1mm; }
.research-card--long-progress .research-card__note { padding-top:1mm; }

/* Gear cards */
.gear-card { width:var(--standard-card-width); height:var(--standard-card-height); overflow:hidden; border:.65mm solid var(--gear-line); border-radius:3mm; background:var(--gear-paper); box-shadow:var(--shadow); color:var(--gear-ink); }
.gear-card__inner { display:flex; flex-direction:column; height:100%; padding:2mm; gap:1.2mm; }
.gear-card__art { position:relative; height:29mm; flex:0 0 29mm; overflow:hidden; border:.45mm solid var(--gear-line); border-radius:2mm; background:linear-gradient(165deg, rgba(255,255,255,.46), transparent 45%),linear-gradient(180deg,#f0cf91,#bf8151); }
.gear-card__art-image { display:block; width:100%; height:100%; object-fit:cover; }
.gear-card__art-fallback { position:absolute; inset:0; }
.gear-card__cost { position:absolute; top:1.7mm; right:1.7mm; display:grid; width:9mm; height:9mm; place-content:center; border:.45mm solid #8a6a20; border-radius:50%; background:var(--gold); color:#3d2b04; text-align:center; line-height:1; }
.gear-card__cost strong { font-size:9pt; }
.gear-card__name-group { min-height:7mm; }
.gear-card__name { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:10pt; line-height:1.03; }
.gear-card__upgrade-track { display:flex; justify-content:center; gap:1.2mm; padding:1mm; border:.25mm solid rgba(128,87,46,.38); border-radius:1.5mm; background:rgba(255,255,255,.64); }
.gear-card__level { display:grid; width:var(--cube-outline-size); height:var(--cube-outline-size); place-items:center; gap:.1mm; padding:.7mm .4mm; border:.45mm solid rgba(128,87,46,.55); border-radius:1mm; background:rgba(187,129,81,.16); font-size:var(--min-readable-label); text-align:center; }
.gear-card__level--current { background:rgba(225,187,66,.42); }
.gear-card__level span { font-weight:900; }
.gear-card__effect, .gear-card__daily { padding:1.2mm 1.4mm; border:.25mm solid rgba(128,87,46,.35); border-radius:1.5mm; background:#fffdf7; font-size:6.5pt; line-height:1.18; }
.gear-card__daily-slots { display:flex; flex-wrap:wrap; gap:1.2mm; align-items:center; }
.gear-card__daily-slot { display:grid; width:var(--cube-outline-size); height:var(--cube-outline-size); place-items:center; border:.45mm dashed #80572e; border-radius:1mm; background:white; color:#80572e; font-size:6.5pt; font-weight:900; }
.gear-card__daily-slot--locked { border-style:solid; background:#eee3d5; }
.gear-card__note { margin-top:auto; padding:1mm 1.2mm 0; border-top:.25mm dashed rgba(128,87,46,.48); color:#6a4a26; font-size:var(--min-readable-copy); font-style:italic; line-height:1.16; }

/* Event cards */
.event-card { width: var(--standard-card-width); height: var(--standard-card-height); overflow:hidden; border:.65mm solid var(--event-line); border-radius:3mm; background:var(--event-paper); box-shadow:var(--shadow); color:var(--event-ink); }
.event-card__inner { display:flex; flex-direction:column; height:100%; padding:2mm; gap:1.2mm; }
.event-card__art { position:relative; height:25mm; flex:0 0 25mm; overflow:hidden; border:.45mm solid var(--event-line); border-radius:2mm; background:linear-gradient(165deg, rgba(255,255,255,.42), transparent 45%),linear-gradient(180deg,#c7c7f0,#8583bc); }
.event-card__art-image { display:block; width:100%; height:100%; object-fit:cover; }
.event-card__art-fallback { position:absolute; inset:0; }
.event-card__kind { position:absolute; right:1.6mm; top:1.6mm; padding:.8mm 1.2mm; border-radius:999px; background:rgba(255,255,255,.88); color:var(--event-line); font-size:var(--min-readable-label); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.event-card__name { font-family:Georgia,'Times New Roman',serif; font-size:11pt; line-height:1.02; }
.event-card__description { margin:0; font-size:6.5pt; line-height:1.2; }
.event-card__box { padding:1.4mm; border:.35mm solid var(--event-line); border-radius:1.6mm; background:white; }
.event-card__box--action { border-color:#a27a23; background:#fff5cf; }
.event-card__box--research { border-color:#6b4f93; background:#f5ecff; }
.event-card__box-label { display:block; margin-bottom:.7mm; font-size:var(--min-readable-label); font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.event-card__box-copy { font-size:6.5pt; line-height:1.18; }
.event-card__reward-name { display:block; margin:.7mm 0; font-family:Georgia,'Times New Roman',serif; font-size:7.2pt; font-weight:800; }
.event-card__rule { margin-top:auto; padding-top:1mm; border-top:.25mm dashed rgba(59,72,127,.5); font-size:var(--min-readable-copy); line-height:1.15; }
.event-card__rule strong { font-weight:900; }

/* Location tiles */
.location-tile { position:relative; width:var(--location-tile-width); height:var(--location-tile-height); overflow:hidden; border:.65mm solid var(--tile-line); border-radius:0; background:#c4ddba; box-shadow:var(--shadow); color:white; }
.location-tile__art-image { display:block; width:100%; height:100%; object-fit:cover; }
.location-tile__art-fallback { position:absolute; inset:0; }
.location-tile::after { content:none; }
.location-tile__topbar { position:absolute; z-index:3; top:2mm; left:2mm; right:2mm; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5mm; pointer-events:none; }
.location-tile__content { position:absolute; z-index:2; left:2mm; right:2mm; bottom:2mm; display:grid; gap:1.4mm; }
.location-tile__title-row { display:grid; grid-template-columns:1fr auto; align-items:start; gap:1.5mm; }
.location-tile__difficulty { display:flex; gap:.6mm; padding:.8mm; background:rgba(255,255,255,.82); border:.25mm solid rgba(33,64,47,.22); backdrop-filter:blur(1px); }
.location-tile__icons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.8mm; max-width:28mm; }
.location-tile__icon { display:grid; width:6mm; height:6mm; place-items:center; border-radius:50%; background:rgba(255,255,255,.86); border:.25mm solid rgba(33,64,47,.18); color:#21402f; font-size:7pt; backdrop-filter:blur(1px); }
.location-tile__icon--wild { background:#ffe78b; color:#3b3210; font-weight:900; }
.location-tile__name { width:fit-content; max-width:34mm; padding:1mm 1.4mm; border:.25mm solid rgba(255,255,255,.7); background:rgba(255,255,255,.76); color:#1f3328; font-family:Georgia,'Times New Roman',serif; font-size:9pt; font-weight:800; line-height:1.05; text-shadow:none; backdrop-filter:blur(1px); }
.location-tile__draw-bubble { display:grid; width:9mm; height:9mm; place-items:center; border:.45mm solid rgba(255,255,255,.92); border-radius:50%; background:rgba(255,255,255,.92); color:#203d2d; font-size:10pt; font-weight:900; }
.location-tile__capacity { display:flex; flex-wrap:nowrap; justify-content:center; gap:1.3mm; max-width:100%; padding:1mm; }
.location-tile__cube { width:var(--cube-outline-size); height:var(--cube-outline-size); border:.45mm solid rgba(255,255,255,.9); border-radius:1mm; background:rgba(255,255,255,.3); box-shadow:0 1px 3px rgba(0,0,0,.28); }
.location-tile__bonus { width:fit-content; max-width:100%; padding:1mm 1.4mm; border:.25mm solid rgba(255,255,255,.7); background:rgba(255,255,255,.74); color:#1f3328; font-size:6.5pt; line-height:1.18; text-align:left; backdrop-filter:blur(1px); }

.tts-sheet { --tts-item-width: var(--standard-card-width); --tts-item-height: var(--standard-card-height); display:grid; grid-template-columns:repeat(var(--tts-columns), var(--tts-item-width)); gap:0; width:calc(var(--tts-columns) * var(--tts-item-width)); }
.tts-sheet--locations { --tts-item-width: var(--location-tile-width); --tts-item-height: var(--location-tile-height); }
.tts-sheet .research-card, .tts-sheet .event-card, .tts-sheet .gear-card { border-radius:0; box-shadow:none; }
.tts-sheet .location-tile { width:var(--location-tile-width); height:var(--location-tile-height); border-radius:0; box-shadow:none; }
.tts-blank { width:var(--tts-item-width); height:var(--tts-item-height); background:transparent; }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: minmax(210px,.65fr) minmax(300px,1fr); }
  .preview-panel { grid-column: 1 / -1; min-height:auto; border-top:1px solid rgba(47,73,57,.18); }
  .form-panel { border-right:0; }
}

@media (max-width: 760px) {
  .app-shell { width:min(100% - 20px, 1800px); padding-top:18px; }
  .workspace { grid-template-columns:1fr; }
  .library-panel, .form-panel { border-right:0; border-bottom:1px solid rgba(47,73,57,.18); }
  .library-panel, .form-panel, .preview-panel { min-height:auto; }
  .library-list { max-height:260px; }
  .form-grid { grid-template-columns:1fr; }
  .collection-grid { grid-template-columns:1fr; }
  .visual-card-button { width:max-content; max-width:100%; }
  .preview-stage { overflow-x:auto; justify-content:start; }
}

@media print {
  body { background:white; }
  .page-header, .toolbar, .status-message, .workspace, .output-heading { display:none !important; }
  .app-shell { width:100%; padding:0; }
  .collection-output { border:0; box-shadow:none; padding:0; background:white; }
  .collection-grid { grid-template-columns:repeat(auto-fill, minmax(var(--location-tile-width), var(--standard-card-width))); gap:3mm; }
  .research-card, .event-card, .gear-card, .location-tile { box-shadow:none; break-inside:avoid; }
}

/* Project-saving UI */
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}