@font-face {
  font-family:"JCC Editorial Serif";
  src:url("tools/orange-fortune/creator/fonts/jcc-editorial-serif-semibold.woff2") format("woff2");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
.creator-body { background: radial-gradient(ellipse at 75% 0%,#b9955112,transparent 55%),var(--bg); }
.creator-shell { width: min(1600px,calc(100% - 72px)); margin: auto; color:var(--text); }
.creator-shell .nav-bar { margin-bottom:0; gap:20px; }.creator-back {font-size:12px;color:var(--muted);text-decoration:none}.creator-shell .nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px}.creator-shell .animated-theme-toggle{width:42px;height:42px;padding:0}.creator-shell .toolbox-panel{right:0}
.creator-heading{display:flex;justify-content:space-between;align-items:center;padding:38px 0 36px}.creator-eyebrow{font-size:10px;letter-spacing:.2em;color:#a78245;margin:0 0 12px}.creator-eyebrow span{margin:0 12px}.creator-heading h1{font-size:clamp(26px,3vw,38px);letter-spacing:.02em;font-weight:650;margin:0 0 14px}.creator-heading p:not(.creator-eyebrow){font-size:13px;color:var(--muted);margin:0;line-height:1.8}.creator-heading-badge{display:grid;text-align:right;color:var(--muted);font-size:9px;letter-spacing:.15em;gap:6px}.creator-heading-badge b{font-size:40px;font-weight:400;letter-spacing:-.06em;color:#a78245}
.creator-workspace{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start}.creator-controls{display:grid;gap:14px}.creator-panel{padding:23px;background:var(--surface-solid);border:1px solid var(--line);border-radius:15px}.creator-section-title{display:flex;align-items:center;gap:10px;margin-bottom:20px}.creator-section-title>span{font-size:10px;color:#a78245;border:1px solid #a7824540;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.creator-section-title h2{font-size:14px;margin:0;font-weight:650}.creator-section-title>small{font-size:10px;margin-left:auto;color:var(--muted)}
.creator-field{display:block;font-size:11px;color:var(--muted);margin:0 0 15px}.creator-field small{font-size:9px;opacity:.8;margin-left:3px}.creator-field input,.creator-field select,.creator-field textarea,.creator-picker-filters input,.creator-picker-filters select{display:block;box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;padding:11px;margin-top:8px;min-width:0}.creator-field textarea{resize:vertical;line-height:1.7}.creator-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.creator-field:last-child{margin-bottom:0}.creator-help{font-size:10px;line-height:1.8;color:var(--muted);margin:12px 0 0}.creator-help.is-error{color:#c54c37}.creator-slots{display:grid;gap:8px}.creator-slot-row{display:flex;gap:6px;align-items:center}.creator-slot{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;border:1px dashed var(--line);background:var(--bg);color:var(--text);padding:10px;border-radius:8px;cursor:pointer;min-height:58px}.creator-slot>span:first-child{font-size:15px;color:#b4945e;width:35px;text-align:center}.creator-slot img{width:35px;height:45px;object-fit:cover;border-radius:4px}.creator-slot strong{display:block;font-size:12px;font-weight:550}.creator-slot small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.creator-slot.selected{border-style:solid}.creator-remove{border:0;background:none;color:var(--muted);cursor:pointer;padding:8px;font-size:18px}
.creator-secondary,.creator-primary{border-radius:8px;font:inherit;font-size:12px;padding:12px 17px;cursor:pointer}.creator-secondary{background:var(--bg);color:var(--text);border:1px solid var(--line)}.creator-primary{background:#b18a46;color:#171511;border:1px solid #d2ad69;font-weight:650;white-space:nowrap}.creator-wide{width:100%;text-align:left;display:flex;justify-content:space-between;gap:8px}.creator-wide span{font-size:10px;color:var(--muted)}.creator-body button:disabled{opacity:.45;cursor:not-allowed}.creator-body button:focus-visible,.creator-body input:focus-visible,.creator-body select:focus-visible,.creator-body textarea:focus-visible{outline:2px solid #bf9c5d;outline-offset:3px}.creator-backgrounds{display:grid;grid-template-columns:1fr 1fr;gap:12px}.creator-backgrounds button{padding:5px 5px 10px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--text)}.creator-backgrounds button[aria-pressed=true]{border-color:#b18a46;box-shadow:0 0 0 1px #b18a4640}.creator-swatch{height:47px;display:block;border-radius:5px;margin-bottom:9px;background:radial-gradient(ellipse at 85% 0%,var(--glow),transparent 75%),linear-gradient(125deg,var(--paper),var(--paper-end));position:relative;overflow:hidden}.creator-swatch:after{content:'';position:absolute;width:100px;height:100px;border:1px solid var(--accent);border-radius:50%;left:30%;top:-35px;opacity:.4}.creator-backgrounds strong{display:block;font-size:11px;font-weight:500;padding:0 5px}.creator-backgrounds small{display:block;font-size:8px;color:var(--muted);margin-top:5px;padding:0 5px}
.creator-preview-column{align-self:stretch}.creator-preview-sticky{position:sticky;top:24px;max-width:min(760px,calc((100dvh - 160px) * .75));margin-inline:auto}.creator-preview-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);padding:2px 0 14px}.creator-preview-heading i{display:inline-block;width:5px;height:5px;background:#91b69b;border-radius:50%;margin-right:7px}.creator-preview-mat{padding:20px;border:1px solid var(--line);border-radius:14px;background:repeating-linear-gradient(135deg,#80808005 0 1px,transparent 1px 7px),var(--surface-solid);box-shadow:0 20px 60px #00000008}.creator-preview{width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;box-shadow:0 6px 28px #0004}.creator-export-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:23px 2px}.creator-export-bar strong{font-size:12px;font-weight:500}.creator-export-bar p{font-size:10px;color:var(--muted);margin:7px 0 0}.creator-save-note{text-align:right;color:var(--muted);font-size:9px;margin:0}.creator-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:36px;padding:25px 0;color:var(--muted);font-size:10px}.creator-footer>span:last-child{font-size:8px;letter-spacing:.15em}
.theme-gilded{--paper:#161b22;--paper-end:#292921;--ink:#f4eee1;--soft:#c1b9a8;--accent:#d9b671;--glow:#bc8b343a;--glass:#080d1480;--rule:#c4a77340}.theme-jade{--paper:#0c2523;--paper-end:#17392f;--ink:#edf4de;--soft:#afc7b4;--accent:#c3ce91;--glow:#72ba8d38;--glass:#071d1a66;--rule:#b4d39b40}.theme-astral{--paper:#15192d;--paper-end:#2b2340;--ink:#f1edf8;--soft:#bab7d2;--accent:#c5b9ef;--glow:#ab79d043;--glass:#0a0c2066;--rule:#bdaceb40}.theme-ivory{--paper:#f3ecda;--paper-end:#ddd1b8;--ink:#372d20;--soft:#77634c;--accent:#8a6633;--glow:#e4bc6755;--glass:#fff9eb70;--rule:#9d7f4840}
/* Export dimensions are fixed; only the workbench preview is scaled. */
.fortune-poster { --poster-display:'JCC Editorial Serif','Noto Serif SC','Songti SC',serif; width:1200px; height:1600px; box-sizing:border-box; position:absolute; left:0; top:0; transform-origin:top left; overflow:hidden; padding:54px 56px 36px; color:var(--ink); background:var(--paper); font-family:'Segoe UI','PingFang SC','Microsoft YaHei UI','Microsoft YaHei',sans-serif; font-weight:400; font-kerning:normal; }
.fortune-poster * { box-sizing:border-box; }
.fp-background,.fp-veil { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.fp-veil { background:linear-gradient(180deg,#07111c00,#07111c18 16%,#07111c28 48%,#07111c18 83%,#07111c00); }
.theme-ivory .fp-veil { background:linear-gradient(180deg,#fff8e700,#fff8e712 20%,#fff8e71c 60%,#fff8e712 85%,#fff8e700); }
.fortune-poster:after { content:''; position:absolute; inset:22px; border:1px solid var(--rule); border-radius:18px; box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px var(--rule); pointer-events:none; }
.fp-header { height:174px; position:relative; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:25px; }
.fp-heading { min-width:0; flex:1; }
.fp-overline { font-size:13px; letter-spacing:4px; color:var(--accent); margin:0 0 18px; }
.fp-header h1 { font-family:var(--poster-display); font-size:46px; line-height:1.35; font-weight:600; letter-spacing:1.5px; margin:0; overflow-wrap:anywhere; }
.fp-header h1.fp-long-title { font-size:32px; }
.fp-brand { text-align:right; white-space:nowrap; align-self:center; }
.fp-brand b { display:block; font-family:var(--poster-display); font-size:26px; letter-spacing:3px; font-weight:600; color:var(--accent); margin:0 0 13px; }
.fp-brand small { font-size:10px; letter-spacing:2px; color:var(--soft); }
.fp-meta { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:15px; line-height:1.6; letter-spacing:.5px; font-variant-numeric:tabular-nums; color:var(--soft); margin-top:15px; }
.fp-meta span+span:before { content:'·'; margin-right:18px; color:var(--accent); }
.fp-meta:empty { display:none; }
.fp-content { position:relative; padding-top:24px; }
.fp-label { font-size:14px; letter-spacing:3px; color:var(--accent); display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; height:18px; }
.fp-label small { font-size:11px; color:var(--soft); letter-spacing:1px; }
.fp-deck { height:628px; }
.fp-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.fp-card { min-width:0; }
.fp-card-art { position:relative; width:240px; height:350px; margin:auto; }
.fp-card .fortune-card-frame { height:100%; aspect-ratio:auto; width:100%; filter:drop-shadow(0 10px 16px #0004); }
.fp-card .fortune-card-stars { font-size:23px; top:12%; }
.fp-card .fortune-card-category { font-size:14px; bottom:8%; }
.fp-card .fortune-card-shade { background:linear-gradient(0deg,#080a12dc,transparent 50%); }
.fp-card-number { text-align:center; font-size:10px; letter-spacing:3px; color:var(--accent); margin:12px 0 7px; }
.fp-card h2 { font-family:var(--poster-display); font-size:25px; font-weight:600; letter-spacing:1px; line-height:1.45; text-align:center; margin:0; height:68px; display:flex; align-items:center; justify-content:center; }
.fp-card-round { text-align:center; font-size:14px; color:var(--accent); margin:5px 0 12px; }
.fp-card-effect { font-size:17px; line-height:1.8; letter-spacing:.3px; color:var(--soft); margin:0; padding-top:12px; border-top:1px solid var(--rule); height:122px; overflow-wrap:anywhere; }
.fp-card-empty { height:350px; width:240px; margin:auto; border:1px dashed var(--rule); clip-path:polygon(50% 0,100% 16%,100% 84%,50% 100%,0 84%,0 16%); background:var(--glass); display:grid; place-content:center; text-align:center; color:var(--accent); font-size:40px; gap:12px; }
.fp-card-empty span { font-size:16px; color:var(--soft); letter-spacing:3px; }
.fp-formation { height:443px; }
.fp-formation-body { display:flex; align-items:flex-start; gap:28px; }
/* Regular pointy hexagons: H=2W/sqrt(3), pitch=106; alternate rows shift half a pitch. */
.fp-board { width:789px; height:391px; position:relative; flex:0 0 789px; }
.fp-cell { position:absolute; left:var(--x); top:var(--y); width:100px; height:115.470054px; }
.fp-hex { position:absolute; inset:0; background:var(--rule); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.fp-cell:has(.fp-unit) .fp-hex { background:var(--cost); }
.fp-unit { position:absolute; inset:3%; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); overflow:hidden; }
.fp-unit img { width:100%; height:100%; object-fit:cover; }
.fp-unit-name { position:absolute; bottom:20px; left:2px; right:2px; text-align:center; font-size:15px; font-weight:700; line-height:22px; color:#fff; background:transparent; text-shadow:0 1px 2px #000,0 0 3px #000,-.5px 0 #000,.5px 0 #000; white-space:nowrap; z-index:1; }
.fp-items { display:flex; gap:2px; position:absolute; top:17px; left:0; right:0; justify-content:center; z-index:2; }
.fp-items img { width:23px; height:23px; border:1px solid #c6aa72; border-radius:3px; }
.fp-board-empty { position:absolute; inset:0; display:grid; place-content:center; text-align:center; background:transparent; color:var(--soft); font-size:19px; gap:12px; border-radius:12px; }
.fp-board-empty strong { font-weight:400; color:var(--accent); font-size:31px; }
.fp-traits { display:grid; gap:8px; align-content:start; flex:1; min-width:0; }
.fp-trait { display:grid; grid-template-columns:38px 28px minmax(0,1fr); column-gap:10px; align-items:center; border:0; padding:0; font-size:18px; line-height:24px; min-height:38px; }
.fp-trait b { color:var(--accent); font-size:21px; font-weight:600; font-variant-numeric:tabular-nums lining-nums; text-align:center; line-height:24px; }
.fp-trait>span:last-child:not(.fp-trait-emblem) { min-width:0; font-weight:500; letter-spacing:.5px; overflow-wrap:anywhere; }
.fp-trait.fp-muted { display:block; padding-left:48px; margin:0; min-height:22px; line-height:22px; font-size:14px; }
.fp-trait-emblem { position:relative; width:38px; height:38px; flex:0 0 38px; }
.fp-trait-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.fp-trait-icon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; object-fit:contain; filter:brightness(0); }
.fp-muted { font-size:16px; color:var(--soft); margin:6px 0; line-height:1.8; }
.fp-operations { border-top:1px solid var(--rule); padding-top:18px; }
.fp-operations .fp-label { margin-bottom:16px; }
.fp-operations-body { display:grid; grid-template-columns:310px 1fr; gap:30px; }
.fp-plan { border-right:1px solid var(--rule); padding-right:25px; }
.fp-plan small { display:block; line-height:14px; color:var(--accent); font-size:12px; letter-spacing:2px; }
.fp-plan p { color:var(--soft); margin:3px 0 5px; height:43px; font-size:18px; line-height:1.5; overflow-wrap:anywhere; }
.fp-notebook p { font-size:19px; line-height:1.85; letter-spacing:.4px; color:var(--soft); white-space:pre-wrap; overflow-wrap:anywhere; margin:0; height:130px; }
.fp-footer { position:absolute; bottom:43px; left:56px; right:56px; border-top:1px solid var(--rule); padding-top:22px; display:flex; justify-content:space-between; align-items:center; color:var(--soft); font-size:14px; }
.fp-footer b { font-weight:500; color:var(--accent); letter-spacing:3px; }
.fp-footer small { font-size:10px; letter-spacing:2px; }
.is-showcase .fp-deck { height:790px; }
.is-showcase .fp-card-art,.is-showcase .fp-card-empty { width:290px; height:425px; }
.is-showcase .fp-card-effect { height:185px; font-size:19px; }
.is-showcase .fp-card h2 { font-size:28px; }
.is-showcase .fp-formation { padding-top:8px; }
.creator-layout-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; border:0; padding:0; margin:0 0 18px; }
.creator-layout-choice legend { font-size:11px; color:var(--muted); margin-bottom:10px; }
.creator-layout-choice label { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px; padding:10px 7px; cursor:pointer; }
.creator-layout-choice label:has(:checked) { border-color:#b18a46; background:#b18a460a; }
.creator-layout-choice input { accent-color:#b18a46; margin:0; padding:0; width:14px; height:14px; min-height:0; flex:0 0 14px; }
.creator-layout-choice strong { display:block; font-size:11px; font-weight:500; }
.creator-layout-choice small { display:block; font-size:9px; color:var(--muted); margin-top:5px; }
.creator-swatch { height:65px; }
.creator-swatch img { width:100%; height:100%; object-fit:cover; object-position:85% 5%; }
.creator-swatch:after { display:none; }
.creator-dialog,.creator-formation-dialog{background:var(--surface-solid);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 30px 100px #0005}.creator-dialog::backdrop,.creator-formation-dialog::backdrop{background:#0a1019b0;backdrop-filter:blur(5px)}.creator-dialog{width:min(1040px,calc(100vw - 36px));max-height:88vh;box-sizing:border-box}.creator-dialog>header,.creator-formation-dialog>header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.creator-dialog h2,.creator-formation-dialog h2{font-size:20px;margin:0}.creator-dialog>header>button{font-size:25px;background:none;border:0;color:var(--muted);cursor:pointer;padding:7px}.creator-picker-filters{display:flex;gap:10px}.creator-picker-filters input{flex:1}.creator-picker-filters select{width:110px}.creator-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 14px;margin-top:18px}.creator-pick{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:12px;cursor:pointer;min-width:0;text-align:left}.creator-pick[aria-pressed=true]{border-color:#bf9c5d}.creator-pick .fortune-card-frame{width:100%;height:235px;aspect-ratio:auto;filter:none}.creator-pick strong{display:block;font-size:12px;margin:12px 0 6px;line-height:1.5}.creator-pick small{font-size:10px;line-height:1.8;color:var(--muted);display:block}.creator-pick .pick-effect{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px}.creator-pick .fortune-card-stars{font-size:14px}.creator-pick .fortune-card-category{font-size:9px}.creator-formation-dialog{width:calc(100vw - 48px);max-width:1500px;height:92dvh;max-height:96dvh;box-sizing:border-box;padding:18px;overflow:hidden}.creator-formation-dialog[open]{display:flex;flex-direction:column}.creator-formation-dialog header{flex:0 0 auto;margin-bottom:12px}.creator-formation-dialog header p{font-size:11px;color:var(--muted);margin:8px 0 0}.creator-formation-dialog iframe{width:100%;min-height:0;flex:1;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
@media(min-width:1700px){.creator-workspace{grid-template-columns:380px minmax(0,1fr)}}
@media(max-width:1150px){.creator-shell{width:calc(100% - 40px)}.creator-workspace{grid-template-columns:310px minmax(0,1fr);gap:18px}.creator-panel{padding:18px}.creator-preview-mat{padding:12px}.creator-export-bar{align-items:flex-start;flex-direction:column}.creator-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.creator-shell{width:calc(100% - 28px)}.creator-heading{padding:28px 0}.creator-heading-badge,.creator-back{display:none}.creator-workspace{display:flex;flex-direction:column;gap:20px}.creator-controls,.creator-preview-column{width:100%}.creator-preview-column{order:-1}.creator-preview-sticky{position:static;max-width:none}.creator-preview-mat{padding:9px}.creator-export-bar{flex-direction:row;padding:16px 0}.creator-export-bar strong{display:none}.creator-export-bar p{font-size:10px;line-height:1.6;margin:0}.creator-save-note{font-size:9px}.creator-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.creator-pick .fortune-card-frame{height:210px}.creator-dialog{padding:18px}.creator-formation-dialog{width:calc(100vw - 12px);height:95dvh;padding:10px;border-radius:12px}.creator-formation-dialog header p{font-size:10px;line-height:1.5}.creator-formation-dialog h2{font-size:16px}.creator-formation-dialog header{gap:8px}.creator-footer>span:last-child{display:none}}
@media(max-width:480px){.creator-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.creator-picker-filters{flex-wrap:wrap}.creator-picker-filters input{flex-basis:100%}.creator-picker-filters select{flex:1}.creator-heading h1{font-size:27px}.creator-heading p:not(.creator-eyebrow){font-size:11px}.creator-dialog{width:calc(100vw - 16px);max-height:92dvh;padding:14px}.creator-pick{padding:9px}.creator-pick .fortune-card-frame{height:220px}}
@media(prefers-reduced-motion:reduce){.creator-body *{scroll-behavior:auto!important;transition:none!important}}
.creator-body [hidden]{display:none!important}

/* A single crop layer keeps card art visible in WebKit at preview scale. */
.creator-body .fortune-card-frame { clip-path:none; background:none; }

/* Single-screen editor. Poster/export geometry above remains independent. */
.creator-body { margin:0; }
.creator-shell { box-sizing:border-box; width:100%; max-width:1800px; height:100dvh; min-height:650px; padding:28px 22px 10px; display:grid; grid-template-rows:42px 48px minmax(0,1fr) 52px; gap:10px; }
.creator-shell .nav-bar { padding:0; min-height:0; }
.creator-heading { padding:0; }
.creator-heading .creator-eyebrow,.creator-heading-badge { display:none; }
.creator-heading h1 { font-size:22px; margin:0 0 5px; }
.creator-heading p:not(.creator-eyebrow) { font-size:11px; line-height:1.5; }
.creator-workspace { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,calc((100dvh - 220px) * .75)); grid-template-rows:minmax(0,1fr); gap:20px; align-items:stretch; }
.creator-controls { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; gap:12px; align-content:start; }
#panel-profile { grid-area:1 / 1; }
#panel-cards { grid-area:2 / 1; }
#panel-content { grid-area:1 / 2; }
#panel-materials { grid-area:2 / 2; }
.creator-panel { min-width:0; padding:14px; border-radius:12px; }
.creator-section-title { margin-bottom:12px; gap:8px; }
.creator-section-title>span { width:22px; height:22px; }
.creator-section-title h2 { font-size:13px; }
.creator-field { margin-bottom:10px; font-size:11px; }
.creator-field input,.creator-field select,.creator-field textarea { min-height:0; height:34px; padding:7px 9px; margin-top:5px; font-size:12px; }
.creator-field textarea { height:76px; resize:none; }
.creator-fields { gap:10px; }
.creator-help { font-size:10px; line-height:1.6; margin-top:8px; }
.creator-layout-choice { margin-bottom:12px; gap:8px; }
.creator-layout-choice legend { margin-bottom:7px; }
.creator-layout-choice label { padding:8px; }
.creator-slot { min-height:46px; padding:6px 8px; gap:9px; }
.creator-slot img { width:27px; height:34px; }
.creator-slot small { margin-top:4px; }
.creator-slots { gap:6px; }
#edit-formation { margin-top:10px; padding:9px 11px; }
#formation-status { margin-top:6px; }
.creator-backgrounds { gap:8px; }
.creator-backgrounds button { padding:4px 4px 8px; }
.creator-swatch { height:48px; margin-bottom:6px; }
.creator-preview-column { min-width:0; min-height:0; }
.creator-preview-sticky { position:static; max-width:none; height:100%; display:flex; flex-direction:column; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-solid); box-shadow:0 20px 60px #00000008; }
.creator-preview-heading { flex:0 0 22px; height:22px; align-items:center; padding:0; margin-bottom:12px; font-size:11px; }
.creator-preview-mat { min-height:0; flex:1; padding:0; border:0; border-radius:0; background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; container-type:size; }
.creator-preview { flex:none; width:min(100%,75cqh); }
.creator-toolbar { min-width:0; display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); padding-top:8px; }
.creator-export-bar { flex:1; min-width:0; padding:0; flex-direction:row; align-items:center; gap:10px; }
.creator-export-bar>div { margin-right:auto; }
.creator-export-bar strong { display:block; font-size:11px; }
.creator-export-bar p { margin:4px 0 0; font-size:10px; }
.creator-export-bar .creator-primary { padding:11px 20px; }
.creator-save-note { max-width:245px; line-height:1.6; }
.creator-panel-tabs,#open-preview { display:none; }
.creator-preview-dialog { width:min(600px,calc(100vw - 20px)); height:94dvh; max-height:96dvh; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-solid); color:var(--text); box-sizing:border-box; }
.creator-preview-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.creator-preview-dialog::backdrop { background:#08111ad0; }
.creator-preview-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none; }
.creator-preview-dialog h2 { margin:0; font-size:16px; }
#preview-dialog-body { flex:1; min-height:0; }
#preview-dialog-body .creator-preview-column { display:block; height:100%; }
@media(min-width:981px) and (max-height:900px) {
  .creator-shell { padding:28px 18px 8px; grid-template-rows:38px 38px minmax(0,1fr) 48px; gap:8px; }
  .creator-heading h1 { font-size:20px; margin-bottom:3px; }
  .creator-controls { gap:10px; }
  .creator-panel { padding:10px 12px; }
  .creator-preview-sticky { padding:10px 12px; }
  .creator-preview-heading { margin-bottom:8px; }
  .creator-section-title { margin-bottom:8px; }
  .creator-field { margin-bottom:7px; }
  .creator-field input,.creator-field select,.creator-field textarea { height:30px; padding:5px 8px; margin-top:4px; }
  .creator-field textarea { height:60px; }
  .creator-help { margin-top:6px; line-height:1.5; }
  .creator-layout-choice { margin-bottom:8px; }
  .creator-layout-choice label { padding:6px; }
  .creator-slot { min-height:42px; }
  .creator-slot img { height:30px; width:24px; }
  .creator-swatch { height:37px; }
}
@media(max-width:980px) {
  .creator-shell { padding:18px 14px 10px; min-height:600px; grid-template-rows:40px 44px 38px minmax(0,1fr) 58px; gap:10px; }
  .creator-shell .nav-bar { gap:12px; }
  .creator-heading h1 { font-size:20px; }
  .creator-heading p:not(.creator-eyebrow) { font-size:10px; }
  .creator-back { display:none; }
  .creator-panel-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .creator-panel-tabs button { min-width:0; font:inherit; font-size:11px; padding:7px 2px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--surface-solid); cursor:pointer; }
  .creator-panel-tabs button[aria-pressed=true] { color:var(--text); border-color:#b18a46; background:#b18a4612; }
  .creator-workspace { display:block; min-height:0; }
  .creator-controls { display:block; height:100%; }
  .creator-panel { display:none; padding:18px; height:100%; box-sizing:border-box; }
  .creator-panel.is-active { display:block; }
  .creator-panel .creator-section-title { margin-bottom:18px; }
  .creator-field { margin-bottom:14px; }
  .creator-field input,.creator-field select { height:38px; }
  .creator-field textarea { height:96px; }
  .creator-slot { min-height:58px; }
  .creator-slot img { width:35px; height:44px; }
  .creator-slots { gap:10px; }
  .creator-swatch { height:clamp(65px,12dvh,110px); }
  .creator-backgrounds { gap:12px; }
  .creator-preview-column { display:none; }
  .creator-toolbar { padding-top:8px; }
  .creator-save-note { display:none; }
  .creator-export-bar strong { display:none; }
  .creator-export-bar p { max-width:170px; line-height:1.5; }
  .creator-export-bar .creator-primary,#open-preview { padding:10px; font-size:11px; }
  #open-preview { display:block; }
}
@media(max-width:980px) and (max-height:730px) {
  .creator-shell { gap:7px; grid-template-rows:36px 37px 34px minmax(0,1fr) 52px; padding:18px 12px 8px; }
  .creator-panel { padding:12px; }
  .creator-panel .creator-section-title { margin-bottom:10px; }
  .creator-field { margin-bottom:8px; }
  .creator-field input,.creator-field select { height:32px; margin-top:4px; }
  .creator-field textarea { height:64px; }
  .creator-layout-choice { margin-bottom:8px; }
  .creator-help { margin-top:6px; }
}

.creator-formation-feedback { display:flex; gap:6px; align-items:center; margin-top:6px; }
.creator-formation-feedback #formation-status { flex:1; margin:0; }
#retry-formation { padding:6px; font-size:10px; }
@media(min-width:981px) and (max-height:900px) {
  .creator-slot { line-height:1.25; padding:4px 8px; }
  .creator-slot strong { font-size:11px; line-height:14px; }
  .creator-slot small { font-size:9px; line-height:12px; margin-top:3px; }
}
@media(min-width:981px) and (max-height:760px) {
  .creator-panel { padding:8px 10px; }
  .creator-preview-sticky { padding:8px 10px; }
  .creator-preview-heading { margin-bottom:6px; }
  .creator-section-title { margin-bottom:6px; }
  .creator-field { margin-bottom:5px; }
  .creator-field textarea { height:52px; }
  .creator-layout-choice { margin-bottom:6px; }
  .creator-help { margin-top:4px; }
}
/* Shared vertical grid: both settings columns and preview end on one baseline. */
@media(min-width:981px) {
  .creator-controls { grid-template-rows:repeat(2,minmax(min-content,1fr)); align-content:stretch; }
  .creator-panel { display:flex; flex-direction:column; }
  #portal-help { margin-top:auto; padding-top:6px; }
  #operations-fields { display:flex; flex-direction:column; flex:1; }
  #operations-fields>.creator-help { margin-top:auto; padding-top:6px; }
  .creator-slots { flex:1; grid-template-rows:repeat(3,minmax(0,1fr)); }
  .creator-slot { align-self:stretch; }
  .creator-backgrounds { flex:1; grid-template-rows:repeat(2,minmax(0,1fr)); }
  .creator-backgrounds button { display:flex; flex-direction:column; }
  .creator-swatch { flex:1; min-height:37px; width:100%; }
  .creator-swatch img { position:absolute; inset:0; }
}
@media(min-width:981px) and (max-height:760px) {
  #portal-help,#operations-fields>.creator-help { padding-top:4px; }
}

/* Portal rules in the editor: an over-limit deck is highlighted, never blocked. */
.creator-body { --creator-warn:#c54c37; --creator-ok:#3f9a78; }
[data-theme="dark"] .creator-body { --creator-warn:#ff8a73; --creator-ok:#6fd1ab; }
.creator-help.is-error,#export-status.is-error,#picker-budget.is-error { color:var(--creator-warn); }
.creator-portals { border:0; padding:0; margin:0 0 10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; min-width:0; }
.creator-portals legend { font-size:11px; color:var(--muted); margin-bottom:6px; padding:0; }
.creator-portals label { position:relative; display:block; min-width:0; border:1px solid var(--line); border-radius:8px; padding:7px 8px; cursor:pointer; background:var(--bg); }
.creator-portals input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.creator-portals strong { display:block; font-size:11px; font-weight:600; white-space:nowrap; }
.creator-portals small { display:block; font-size:9px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creator-portals label:has(:checked) { border-color:#b18a46; background:#b18a4612; box-shadow:0 0 0 1px #b18a4640; }
.creator-portals label[data-fit=over]:has(:checked) { border-color:var(--creator-warn); background:color-mix(in srgb,var(--creator-warn) 9%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--creator-warn) 35%,transparent); }
.creator-portals label:has(:focus-visible) { outline:2px solid #bf9c5d; outline-offset:2px; }
.creator-portal-fit { position:absolute; top:-7px; right:6px; font-style:normal; font-size:8px; line-height:13px; padding:0 5px; border-radius:99px; color:#fff; }
.creator-portal-fit:empty { display:none; }
.creator-portals [data-fit=fit] .creator-portal-fit { background:var(--creator-ok); }
.creator-portals [data-fit=over] .creator-portal-fit { background:var(--creator-warn); }
.creator-energy { min-width:0; align-self:end; margin:0 0 10px; font-size:11px; color:var(--muted); }
.creator-energy-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.creator-energy-head b { color:var(--text); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.creator-energy.is-over .creator-energy-head b { color:var(--creator-warn); }
.creator-energy-bar { position:relative; display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:3px; height:12px; margin-top:9px; }
.creator-energy-bar i { border-radius:2px; background:color-mix(in srgb,var(--line) 75%,transparent); transform:skewX(-14deg); }
.creator-energy-bar i.is-beyond { background:repeating-linear-gradient(135deg,transparent 0 2px,color-mix(in srgb,var(--line) 70%,transparent) 2px 3px); }
.creator-energy-bar i[data-tier] { background:var(--tier); }
.creator-energy-bar i.is-beyond[data-tier] { background:var(--creator-warn); }
.creator-energy-bar::after { content:''; position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:1px; left:calc(var(--limit,0) * (100% + 3px) - 2.5px); background:var(--text); opacity:.7; }
.creator-energy.is-over .creator-energy-bar::after { background:var(--creator-warn); opacity:1; }
.creator-tier { display:inline-block; font-weight:600; font-size:9px; line-height:14px; color:var(--text); padding:0 5px; margin-right:5px; border-radius:3px; background:color-mix(in srgb,var(--tier,#b18a46) 26%,transparent); }
.creator-slot>span:nth-child(2) { min-width:0; flex:1; }
.creator-slot-energy { flex:none; display:grid; place-items:center; width:22px; height:24px; font-style:normal; font-size:11px; font-weight:700; color:var(--tier-ink,#111); background:var(--tier); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.creator-slots.is-over .creator-slot.selected { border-color:color-mix(in srgb,var(--creator-warn) 65%,transparent); background:color-mix(in srgb,var(--creator-warn) 5%,var(--bg)); }
.creator-slots.is-over .creator-slot-energy { background:var(--creator-warn); color:#fff; }
.creator-pick { position:relative; }
.creator-pick.is-over { border-color:color-mix(in srgb,var(--creator-warn) 45%,var(--line)); }
.creator-pick-over { position:absolute; z-index:3; top:18px; right:18px; font-size:9px; line-height:16px; padding:0 7px; border-radius:99px; color:#fff; background:var(--creator-warn); box-shadow:0 2px 6px #0004; }
#picker-budget { margin-top:2px; }
.creator-layout-choice { grid-template-columns:repeat(3,minmax(0,1fr)); }
.creator-layout-choice label { min-width:0; position:relative; display:block; }
.creator-layout-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.creator-layout-choice label:has(:checked) { box-shadow:0 0 0 1px #b18a4640; }
.creator-layout-choice label:has(:focus-visible) { outline:2px solid #bf9c5d; outline-offset:2px; }
.creator-layout-choice strong { white-space:nowrap; }
.creator-layout-choice small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(min-width:981px) and (max-height:760px) { .creator-portals { margin-bottom:5px; } .creator-portals legend { margin-bottom:4px; } .creator-portals label { padding:4px 7px; } .creator-portals small { margin-top:2px; } .creator-energy { margin-bottom:5px; } .creator-layout-choice label { padding:4px 6px; } }
@media(max-width:520px) { .creator-portals small { white-space:normal; } .creator-portals label { padding:8px 7px; } }

/* Poster: portal, energy and rarity. Theme materials refine these in the finish sheet. */
.fortune-poster { --warn:#ff9d82; }
.fortune-poster.theme-ivory,.fortune-poster.theme-editorial { --warn:#b23c25; }
.fp-meta { width:max-content; max-width:100%; align-items:center; gap:8px 16px; font-size:15px; line-height:24px; }
.fp-meta span+span:before { margin-right:16px; }
.fp-portal-chip,.fp-energy-chip { display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.fp-portal-mark { width:22px; height:22px; flex:none; fill:none; stroke:var(--accent); stroke-width:3; }
.fp-portal-mark .is-core { fill:var(--accent); stroke:none; }
.fp-energy-chip { gap:4px; }
.fp-energy-chip b { font-size:20px; line-height:1; font-weight:600; color:var(--accent); }
.fp-energy-chip i { font-style:normal; color:var(--soft); margin:0 1px; }
.fp-energy-chip em { font-style:normal; font-size:12px; letter-spacing:1px; line-height:20px; padding:0 9px; margin-left:8px; border-radius:99px; color:var(--paper); background:var(--warn); }
.fp-energy-chip.is-over,.fp-energy-chip.is-over b { color:var(--warn); }
.fp-card-round { display:flex; justify-content:center; align-items:center; gap:10px; font-size:14px; line-height:22px; margin:5px 0 10px; color:var(--soft); white-space:nowrap; }
.fp-tier { font-size:13px; letter-spacing:2px; padding:0 9px 0 11px; border-radius:99px; color:var(--ink); background:color-mix(in srgb,var(--tier) 24%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tier) 70%,transparent); }
.fp-card-energy b { font-weight:600; color:var(--ink); }
.fp-card-effect { height:106px; }
/* Card recommendation layout: three cards, energy and portal; no board. */
.is-cards .fp-deck { height:auto; }
.is-cards .fp-cards { gap:34px; }
.is-cards .fp-card-art,.is-cards .fp-card-empty { width:320px; height:466px; }
.is-cards .fp-card .fortune-card-stars { font-size:27px; }
.is-cards .fp-card .fortune-card-category { font-size:16px; }
.is-cards .fp-card h2 { font-size:30px; height:64px; }
.is-cards .fp-card-round { font-size:15px; }
.is-cards .fp-card-effect { height:128px; font-size:19px; line-height:1.75; }
.fp-summary { display:grid; grid-template-columns:1.08fr 1fr; gap:28px; margin-top:40px; height:240px; }
.fp-energy-panel,.fp-portal-panel { position:relative; min-width:0; padding:22px 26px; border:1px solid var(--rule); border-radius:16px; background:var(--glass); }
.fp-summary .fp-label,.fp-recommend .fp-label { margin-bottom:14px; }
.fp-equation { display:flex; align-items:center; gap:12px; height:64px; font-family:var(--poster-display); font-variant-numeric:lining-nums tabular-nums; }
.fp-equation>i { font-style:normal; font-size:26px; color:var(--soft); }
.fp-eq-term { width:56px; height:56px; display:grid; place-items:center; font-size:30px; font-weight:600; color:var(--ink); border-radius:14px; background:color-mix(in srgb,var(--tier) 20%,transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tier) 75%,transparent); }
.fp-eq-term.is-empty { color:var(--soft); background:none; box-shadow:inset 0 0 0 1.5px var(--rule); }
.fp-eq-total { font-size:58px; line-height:1; font-weight:600; color:var(--accent); margin-left:4px; position:relative; }
.fp-equation small { font-size:22px; color:var(--soft); align-self:flex-end; margin-bottom:8px; font-family:inherit; }
.is-over .fp-eq-total { color:var(--warn); }
.fp-energy-track { position:relative; display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:4px; height:14px; margin-top:18px; }
.fp-energy-track i { border-radius:2px; background:var(--rule); transform:skewX(-16deg); }
.fp-energy-track i.is-beyond { opacity:.4; }
.fp-energy-track i[data-tier] { background:var(--tier); opacity:1; }
.fp-energy-track i.is-beyond[data-tier] { background:var(--warn); }
.fp-energy-track::after { content:''; position:absolute; top:-7px; bottom:-7px; width:2px; left:calc(var(--limit) * (100% + 4px) - 3px); background:var(--ink); opacity:.75; }
.is-over .fp-energy-track::after { background:var(--warn); opacity:1; }
.fp-energy-note { display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:15px; color:var(--soft); letter-spacing:.5px; }
.fp-energy-note em { font-style:normal; font-size:12px; letter-spacing:2px; line-height:20px; padding:0 9px; border-radius:99px; color:var(--paper); background:var(--warn); }
.fp-portal-name { display:flex; align-items:center; gap:14px; height:46px; }
.fp-portal-name .fp-portal-mark { width:40px; height:40px; stroke-width:2.4; }
.fp-portal-name b { font-family:var(--poster-display); font-size:29px; font-weight:600; letter-spacing:2px; color:var(--ink); }
.fp-portal-panel dl { margin:10px 0 0; }
.fp-portal-panel dl div { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-top:1px dashed var(--rule); font-size:16px; line-height:22px; }
.fp-portal-panel dt { color:var(--soft); letter-spacing:2px; font-size:14px; }
.fp-portal-panel dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
.fp-recommend { margin-top:40px; }
.fp-recommend p { position:relative; height:104px; margin:0; padding-left:28px; font-family:var(--poster-display); font-size:23px; line-height:1.7; letter-spacing:.6px; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.fp-recommend p::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:linear-gradient(180deg,var(--accent),transparent); }
/* Deck-library import: a plain notice, the saved drafts stay untouched. */
.creator-heading .creator-import{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.creator-import a{color:inherit}.creator-heading .creator-import.is-error{color:#c0574a}