/* PF2e Atlas / art-directed interface layer — original UI, no framework dependency. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#090e16;--panel:#152332;--card:#1b2b3b;--line:#384b60;
  --text:#f3f1e8;--muted:#a4b3be;--gold:#eac98a;--blue:#76bfe8;
  --red:#d67a71;--radius:16px;
  --ink:#070c12;--gold-strong:#ffdfa2;--gold-dim:#937249;--success:#82c7a6;
  --font-ui:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
  --font-display:Cinzel,Georgia,serif;
  font-family:var(--font-ui);
  color-scheme:dark;
}
*{scrollbar-color:#536477 #111d29}
html{background:#090e16}
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(ellipse 70% 48% at 75% -15%,#43546740,transparent 80%),
    radial-gradient(circle at 0% 80%,#39302738,transparent 48%),
    linear-gradient(115deg,#0b1019,#101b28 56%,#0a111b);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:repeating-linear-gradient(125deg,transparent 0 28px,#c5b6920b 29px,#c5b6920b 30px);
}
.shell{grid-template-columns:248px minmax(0,1fr)}
.sidebar{
  position:sticky;top:0;height:100vh;padding:24px 14px 18px;
  gap:8px;z-index:20;
  background:linear-gradient(177deg,#132332ef,#0a1421f5 70%,#0a1019);
  border-right:1px solid #b5985e42;box-shadow:6px 0 32px #0005;
}
.brand{display:flex;align-items:center;gap:12px;padding:5px 7px 26px;margin-bottom:6px;border-bottom:1px solid #a8895545;color:var(--gold)}
.brand-mark{display:block;width:56px;height:56px;flex:none;filter:drop-shadow(0 0 11px #e2b76b35)}
.brand-copy{display:grid;gap:3px;min-width:0}
.brand-name{font:700 18px/1.18 var(--font-display);letter-spacing:.028em;color:#f2d8a2}
.subbrand{margin:0;color:#8fa8b6;font:600 10px/1.4 var(--font-ui);letter-spacing:.18em;text-transform:uppercase}
.nav{
  font-weight:750;font-size:13px;letter-spacing:.01em;display:flex;align-items:center;gap:12px;
  position:relative;padding:13px 14px;border:1px solid transparent;border-radius:11px;
  transition:background .16s,border-color .16s,transform .16s,color .16s;
}
.nav .nav-ico{font-size:18px;width:22px;text-align:center;line-height:1;filter:grayscale(.18)}
.nav:hover{background:#ffffff0b;color:#f4e7d0;transform:translateX(2px)}
.nav.active{
  background:linear-gradient(95deg,#a4874c3a,#2e3c4788 85%);
  color:#ffe5ab;border-color:#cba66b72;box-shadow:inset 3px 0 #f0c17b,0 6px 18px #0003
}
.sidefoot{margin-top:auto;border-color:#aa91604a;padding:16px 11px;font-size:11px}
.sidefoot p{line-height:1.65}
.main{padding:30px clamp(16px,3vw,45px);max-width:1920px;margin:auto}
.top{position:relative;padding:5px 0 20px;border-bottom:1px solid #9d906f42;margin-bottom:23px;align-items:center}
.top::after{content:"";position:absolute;bottom:-1px;left:0;width:100px;height:1px;background:#f2c683}
.top h1{font:700 clamp(22px,2.2vw,31px)/1.22 var(--font-display);letter-spacing:.024em;color:#f4e0af;text-shadow:0 2px 18px #0006}
.top p{color:#a9bac9;font-size:12px;letter-spacing:.02em;margin-top:8px}
.panel{
  background:linear-gradient(147deg,#1a2b3ac9,#13202de8 68%,#121d2af2);
  border:1px solid #6d7a856b;box-shadow:0 12px 45px #0005,inset 0 1px #ffffff12;
  border-radius:17px;padding:19px
}
.panel h2{font:600 17px/1.35 var(--font-display);color:#ecd4a5;letter-spacing:.016em}
.panel h3{font:750 13px/1.4 var(--font-ui);color:#e0bb7e;letter-spacing:.035em}
.label{color:#b4c3cf;font-weight:650;letter-spacing:.01em}
.input,select,textarea{
  border:1px solid #516477;background:linear-gradient(#111e2b,#101a27);
  border-radius:10px;color:var(--text);box-shadow:inset 0 1px 4px #0003;
  transition:border-color .16s,box-shadow .16s
}
.input:hover,select:hover,textarea:hover{border-color:#8495a4}
.input:focus,select:focus,textarea:focus{outline:2px solid #d6b5778c;outline-offset:1px;border-color:#e0be83}
input[type="checkbox"]{accent-color:#eac98a}
.btn{
  border:1px solid #60738a;background:linear-gradient(165deg,#33495d,#233549 85%);
  border-radius:10px;color:#eff2f5;font-weight:700;font-size:12px;
  box-shadow:inset 0 1px #ffffff1a,0 3px 8px #0003;
  transition:background .15s,transform .13s,box-shadow .15s,border-color .15s
}
.btn:hover{background:linear-gradient(165deg,#415c73,#2a4053);border-color:#a1b0b9;transform:translateY(-1px);box-shadow:0 5px 14px #0005}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 8px #0004}
.btn.primary{background:linear-gradient(160deg,#edcc8c,#bd9257);border-color:#f5d69d;color:#1b1b1d;text-shadow:0 1px #fff5}
.btn.primary:hover{background:linear-gradient(160deg,#ffe5a5,#d8aa66)}
.btn.danger{background:linear-gradient(#603837,#392729);border-color:#9d6660;color:#ffd4cc}
.btn.danger:hover{background:#683b3c}
.btn:focus-visible,.nav:focus-visible,.cell:focus-visible,.token:focus-visible,.combat-entry:focus-visible{
  outline:2px solid #f1cf8c;outline-offset:2px
}
.btn:disabled{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed}
.badge,.pill{background:#253549;border-color:#7882977a;color:#f0dfbd;letter-spacing:.035em;font-weight:750}
.stat{background:linear-gradient(145deg,#172638,#101e2c);border:1px solid #5a708650;box-shadow:inset 0 1px #ffffff0a}
.stat strong{color:#f1c888}
.notice{background:linear-gradient(95deg,#2c3a4ad9,#2634448c);color:#cedde5;border-left-color:#d2ac70}
.card{
  background:linear-gradient(155deg,#243647,#19293a 74%);border:1px solid #60748a7e;
  box-shadow:0 8px 22px #0003,inset 0 1px #ffffff12;
  transition:transform .17s,box-shadow .17s,border-color .17s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 11px 25px #0007;border-color:#b4986d}
.card h3{font:600 16px/1.35 var(--font-display);color:#f0d49f}
.card p{color:#b8c8d1;line-height:1.55}
.card[data-kind="spell"]{border-top:2px solid #a695eb}
.card[data-kind="item"]{border-top:2px solid #85bba2}
.card[data-kind="feat"]{border-top:2px solid #85bce8}
.card[data-kind="class"]{border-top:2px solid #dfbc78}
.board-scroll{
  background:radial-gradient(ellipse at 50% 30%,#263743,#0a1420 75%);
  border:1px solid #a0a17b4d;border-radius:14px;box-shadow:inset 0 0 35px #0009;
  padding:clamp(10px,1.5vw,24px);touch-action:pan-x pan-y;
}
.board{
  border:2px solid #8c795d;box-shadow:0 10px 35px #000a,0 0 0 5px #0005;
  background-color:#354348;
  background-image:
    radial-gradient(circle at 10% 25%,#87928b14,transparent 23%),
    repeating-linear-gradient(125deg,#909c8914 0 2px,transparent 2px 20px),
    linear-gradient(35deg,#31454b,#3b4848 50%,#2c3b43);
}
.board::after{background-image:linear-gradient(to right,#e2d4b638 1px,transparent 1px),linear-gradient(to bottom,#e2d4b638 1px,transparent 1px)}
.cell{transition:background-color .12s,box-shadow .12s}
.cell:hover{box-shadow:inset 0 0 0 2px #e8d6a99c,inset 0 0 17px #f4d6a43c}
.cell.wall{
  background:linear-gradient(133deg,#667274,#3b4a53 45%,#263640);
  border:3px ridge #8c9692;box-shadow:inset 0 0 9px #121a1f,0 0 0 1px #182b36
}
.cell.door{
  background:repeating-linear-gradient(90deg,#8c522d,#8c522d 7px,#c58e4b 8px,#c58e4b 12px);
  border:3px solid #edc477;box-shadow:inset 0 0 10px #432617
}
.cell.water{background:repeating-radial-gradient(ellipse at 40% 70%,#88cadf50 0 2px,#316b86dc 5px,#154357ef 13px)}
.cell.difficult{background:repeating-linear-gradient(145deg,#608363cb 0 6px,#264e42d9 6px 12px)}
.cell.fogged::before{background:#03080ef5}
.token{
  border:3px double #f7e0a4;border-radius:50%;
  box-shadow:0 3px 9px #000c,inset 0 0 8px #0005;
  text-shadow:0 2px 4px #000b;font-size:11px;letter-spacing:.03em;
  background-image:radial-gradient(circle at 30% 25%,#ffffff33,transparent 70%);
  transition:transform .15s,box-shadow .2s
}
.token:hover{transform:scale(1.1)}
.token.selected{outline:2px solid #83d3ff;outline-offset:3px}
.token.active-turn{animation:atlas-pulse 1.9s ease-in-out infinite}
.combat-entry{transition:transform .14s,border-color .14s}
.combat-entry:hover{transform:translateX(2px);border-color:#d9c08e}
.combat-entry.current{background:linear-gradient(90deg,#574527,#293a42);border-color:#e6bb71}
.avatar{border:2px solid #e2bf80;box-shadow:0 7px 20px #0005;background:radial-gradient(circle at 30% 20%,#e9d8a2,#717a83 90%);font-family:var(--font-display)}
.character-head{margin-bottom:16px;padding:12px 0;border-bottom:1px solid #9d92644a}
.slot-row{background:#152536}
.slot-details strong{color:#e7d1a6}
.table-row{border-color:#4b6074}
.log-entry{animation:atlas-enter .25s ease both}
.loading{min-height:100vh;display:grid;place-items:center;font:600 18px var(--font-display);color:#f1cc89}
.footer-note{border-top:1px solid #7f806a35;padding-top:15px;line-height:1.7}
.audio-row{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:12px 0}
.audio-row label{min-width:135px;font-weight:700;font-size:12px;color:#c8d0d5}
.audio-row input[type=range]{accent-color:#edc988;flex:1;min-width:120px}
.sound-state{color:#d9c5a0;font-size:12px}
.splash-mark{width:64px;height:64px;filter:drop-shadow(0 0 13px #e6c17b2e);animation:atlas-enter .48s ease both}
.hero-ribbon{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.hero-ribbon .hero-kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#d7b883;font-weight:800}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.card-type{font:800 10px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#abb9c4}
.soft-orb{width:31px;height:31px;display:grid;place-items:center;border:1px solid #f1d6a078;border-radius:10px;background:#d7bc7b16;color:#efd8aa}
.fx-flash{animation:atlas-flash .38s ease-out both}
@keyframes atlas-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes atlas-pulse{50%{box-shadow:0 0 0 4px #f6d17e75,0 0 22px #f8d58296}}
@keyframes atlas-flash{30%{filter:brightness(1.34)}to{filter:brightness(1)}}
@media(max-width:1000px){
 .shell{display:block}.sidebar{position:relative;height:auto;padding:12px 16px;gap:8px;flex-direction:row;flex-wrap:wrap}
 .brand{margin:0;padding:0 16px 0 0;border:0}.brand-mark{width:39px;height:39px}.brand-name{font-size:13px}.subbrand{display:block;font-size:8px}
 .nav{width:auto;font-size:12px;padding:11px}.nav .nav-ico{font-size:15px;width:17px}.main{padding:20px}
}
@media(max-width:650px){
 .sidebar{gap:5px;justify-content:center}.brand{width:100%;justify-content:center;padding-bottom:10px}
 .nav{padding:9px 8px;font-size:11px;gap:5px;min-width:0}.nav .nav-ico{font-size:14px;width:14px}
 .main{padding:13px}.top{align-items:flex-start}.top h1{font-size:22px}
 .panel{padding:13px}.card:hover{transform:none}.btn:hover{transform:none}
}
html.atlas-reduced-motion *,html.atlas-reduced-motion *::before,html.atlas-reduced-motion *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.roll-result{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;
  gap:4px 12px;margin:12px 0 17px;padding:13px 16px;border:1px solid #d0aa6d9e;border-radius:13px;
  background:radial-gradient(circle at 85% 20%,#9575413b,transparent 55%),linear-gradient(115deg,#182b38,#14222f);
  box-shadow:inset 0 1px #f7e5c41a,0 8px 20px #0004
}
.roll-result::after{content:"✧";position:absolute;right:55px;top:5px;font-size:60px;color:#e4bc7633;pointer-events:none}
.roll-result strong{grid-column:2;grid-row:1/3;font:700 40px/1.12 var(--font-display);color:#ffe09d;text-shadow:0 0 19px #e5b56d46;z-index:1}
.roll-label{align-self:end;color:#ddbe88;text-transform:uppercase;letter-spacing:.12em;font-weight:850;font-size:10px}
.roll-detail{font-size:11px;color:#b5c3cf;overflow-wrap:anywhere}

/* Operational controls, map editing and compendium paging */
.catalog-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #b2a27c45}
.board.editor-mode,.board.editor-mode .cell{touch-action:none;user-select:none;-webkit-user-select:none}
.cell.door.open{
  background:linear-gradient(90deg,#2b312e 0 18%,#c49651b8 19% 24%,transparent 25% 75%,#c49651b8 76% 81%,#293530 82%);
  border:2px dashed #c9a46d99;box-shadow:inset 0 0 13px #101d22
}
.cell.door.open:hover{box-shadow:inset 0 0 0 2px #edda9c}
.board.editor-mode .cell{cursor:crosshair}
.board.editor-mode .cell:active{outline:2px solid #ecca8b;outline-offset:-2px}
.board-scroll:focus-within{border-color:#c7aa74}
@media(max-width:600px){.catalog-pager .row{width:100%;justify-content:space-between}}

.nav svg.nav-ico{width:20px;height:20px;flex:none;color:#dec391;filter:drop-shadow(0 0 5px #d5bc8240)}
.nav.active svg.nav-ico{color:#ffe4ab}
.card-type{display:flex;align-items:center;gap:7px}
.card-icon{width:17px;height:17px;display:inline-block;color:#ddc080}

.side-art{
  height:166px;margin:-16px -11px 14px;
  background-image:linear-gradient(to top,#0a1421 0%,#0a14212e 55%,transparent 90%),url('../assets/atlas-vista.svg');
  background-position:center,center;background-size:cover;
  border-radius:12px 12px 3px 3px;
  border-bottom:1px solid #c3a27661;
}


/* Feature graph + prompt-to-adventure workspaces */
.relation-layout,.adventure-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:18px;align-items:start}
.relation-layout .panel,.adventure-layout .panel{min-width:0}
.roadmap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;max-height:810px;overflow:auto;padding:4px 4px 12px}
.roadmap-level{background:linear-gradient(160deg,#192b39,#101e2c);border:1px solid #6f82915c;border-radius:12px;min-height:95px;padding:10px;position:relative}
.roadmap-level.level-future{border-style:dashed;opacity:.75}
.roadmap-header{font:700 12px var(--font-display);color:#f4d69c;border-bottom:1px solid #77818d3c;margin-bottom:9px;padding-bottom:7px}
.roadmap-slot{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;margin:4px 0 7px;border:1px solid #485b6b;border-radius:8px;padding:8px 9px;text-align:left;background:#203448;color:#e8f0f2;line-height:1.35}
.roadmap-slot span{font-size:11px;color:#b4c3cf}.roadmap-slot strong{font-size:12px;overflow-wrap:anywhere}
.roadmap-slot:hover{border-color:#f0c27a;background:#2b4356}
.roadmap-slot.slot-filled{border-color:#8ac59c;background:linear-gradient(125deg,#25473f,#1b353b)}
.roadmap-slot:disabled{opacity:.5;cursor:default}
.relation-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1fr) minmax(0,1fr);gap:13px;margin:18px 0 14px;align-items:start;position:relative}
.relation-chain,.relation-center{display:grid;gap:9px;position:relative}
.relation-flow:before{content:"";position:absolute;top:95px;left:15%;right:15%;height:2px;background:repeating-linear-gradient(90deg,#d4b174 0 13px,transparent 13px 20px);z-index:0;opacity:.8}
.relation-label{text-transform:uppercase;font-size:10px;letter-spacing:.1em;font-weight:850;color:#e7c889;min-height:16px}
.relation-node,.relation-main{display:grid;gap:6px;position:relative;z-index:1;border:1px solid #66869e;border-radius:11px;padding:11px 12px;background:linear-gradient(145deg,#20384a,#152635);text-align:left;color:#f3f0e5;min-height:62px}
.relation-node strong,.relation-main strong{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.relation-node small,.relation-main small{color:#b1c2cb;font-size:10px;overflow-wrap:anywhere}
.relation-node:hover,.relation-node:focus-visible{background:#344c5f;border-color:#f2c783;transform:translateY(-2px)}
.relation-main{background:linear-gradient(155deg,#7a6239,#33495c 87%);border:2px solid #e8c889;min-height:106px;align-content:center;box-shadow:0 0 24px #cbac6630}
.relation-main span{text-transform:uppercase;font-size:10px;letter-spacing:.12em}
.node-empty{font-size:11px;color:#91a4b4;padding:12px;border:1px dashed #566b7c;border-radius:10px;background:#1b2938}
.related-traits{display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow:auto}
.related-traits .relation-node{border-style:dashed;min-height:auto;flex:1 1 130px}
.relation-search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0;max-height:230px;overflow:auto}
.relation-search-results .relation-node{min-height:48px;padding:8px}
.rule-details{background:#172b39;border:1px solid #506374;border-radius:9px;padding:11px 14px;margin:13px 0;max-height:240px;overflow:auto}
.rule-details summary{cursor:pointer;color:#e4c791;font-weight:750}
.rule-details p{font-size:12px;line-height:1.6}
.adventure-prompt{min-height:125px;line-height:1.65}
.adventure-story{border:1px solid #9a896a;border-radius:15px;padding:17px 20px;margin-top:16px;background:radial-gradient(circle at 90% 10%,#94784a48,transparent 50%),linear-gradient(125deg,#27394a,#101f2a)}
.adventure-story h2{font:700 24px var(--font-display);color:#f0d5a0}
.adventure-story p{font-size:13px;line-height:1.65;color:#c8d5dc}
.story-kicker{letter-spacing:.2em;color:#f0c781;font-size:10px;font-weight:800}
.adventure-placeholder{display:grid;place-items:center;text-align:center;min-height:340px;padding:30px;border:1px dashed #8c8d7e88;border-radius:16px;background:radial-gradient(circle,#42566a33,#0d1d2c);color:#c4d3dd}
.adventure-placeholder>span{font-size:58px;color:#edca84}
.adventure-placeholder h2{font:600 21px var(--font-display)}
.adventure-placeholder p{max-width:360px;font-size:13px}
.room-pin{position:absolute;z-index:6;transform:translate(-50%,-50%);border:2px solid #f4d491;background:linear-gradient(#e9bf73,#926731);width:27px;height:27px;border-radius:50%;font:900 12px var(--font-ui);color:#1a2128;box-shadow:0 3px 12px #000c;cursor:pointer}
.room-pin:hover,.room-pin:focus-visible{outline:3px solid #90ccf5;z-index:10;transform:translate(-50%,-50%) scale(1.15)}
.room-list{display:grid;gap:7px;max-height:390px;overflow-y:auto;padding:2px}
.room-entry{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #43576a;background:#182a3b;color:#f0ece1;border-radius:10px;padding:9px 11px;min-height:55px}
.room-entry.active{background:linear-gradient(105deg,#4b4537,#203a4a);border-color:#e2bd81}
.room-entry>span:last-child{display:grid;gap:4px}.room-entry strong{font-size:12px}.room-entry small{font-size:11px;color:#a9bec9}
.room-number{display:grid;place-items:center;flex:none;border-radius:50%;width:31px;height:31px;background:#7b6041;border:1px solid #c5a879;color:#f6e5bf;font-weight:850}
.room-detail{margin-top:14px;border-top:1px solid #5e7084;padding:10px 2px 0;font-size:12px;line-height:1.7}
.room-detail h3{color:#f5d9a2;font:700 16px var(--font-display)}
.room-detail strong{color:#d4bb8f}
.room-detail details{border:1px dashed #927c5d;padding:9px;border-radius:7px}
@media(max-width:1280px){.relation-layout,.adventure-layout{grid-template-columns:1fr}.roadmap-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:600px}}
@media(max-width:730px){.roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.relation-flow{grid-template-columns:1fr;gap:8px}.relation-flow:before{left:50%;top:0;bottom:0;width:2px;height:auto}.relation-center{grid-row:2}.relation-search-results{grid-template-columns:1fr}}


/* Character skills + usable spell/gear cards */
.skill-sheet{border:1px solid #6b7a88;border-radius:12px;margin:20px 0;padding:12px 14px;background:#132738}
.skill-sheet summary{display:flex;gap:10px;align-items:center;justify-content:space-between;cursor:pointer;color:#eccb90;font-size:14px}
.skill-sheet summary>span{font-size:11px;color:#a8bdca;font-weight:500}
.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
.skill-line{display:grid;grid-template-columns:minmax(0,1fr) 44px 105px;align-items:center;gap:7px;border:1px solid #415669;border-radius:8px;padding:6px;background:#1a2e3e}
.skill-line select{min-width:0;width:100%;font-size:11px;padding:5px;min-height:30px}
.skill-link{background:none;border:none;color:#e5e9e9;text-align:left;padding:5px;min-width:0;overflow-wrap:anywhere;cursor:pointer;font-size:12px}
.skill-link:hover{text-decoration:underline;text-decoration-color:#e9c47e}
.skill-link small{font-size:10px;color:#cdb37a}
.skill-mod{font-size:14px;font-weight:850;color:#f4d292;text-align:center}
.character-loadout{margin-top:22px}
.character-loadout h2{font:650 19px var(--font-display);color:#ebd29e}
.loadout-sections{display:grid;gap:14px}
.loadout-sections h3{font-size:14px;margin:5px 0 9px;color:#e7cc98}
.loadout-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.loadout-card{display:flex;flex-direction:column;gap:7px;text-align:left;min-height:100px;padding:12px;border-radius:10px;border:1px solid #63829a;background:linear-gradient(140deg,#253b4e,#18283a);color:#f2f1e5}
.loadout-card:hover,.loadout-card:focus-visible{border-color:#e3c181;box-shadow:0 0 0 2px #f0c77626;transform:translateY(-1px)}
.loadout-card span{font-size:10px;color:#c5aa77;text-transform:uppercase;letter-spacing:.07em}
.loadout-card strong{font:650 13px var(--font-display);line-height:1.3;overflow-wrap:anywhere}
.loadout-card small{color:#a4c2cd;line-height:1.5;font-size:11px}
@media(max-width:680px){.skills-grid{grid-template-columns:1fr}.skill-sheet summary{flex-wrap:wrap}}


.art-preview{padding:12px;margin:15px 0;border-radius:14px;border:1px solid #e2c18c88;background:#0e1721;box-shadow:0 12px 35px #0008}
.art-preview img{width:100%;max-height:490px;object-fit:contain;border-radius:10px;display:block}
.art-preview .row{margin-top:11px}
.art-preview small{color:#cbbd9d;font-size:11px}


/* Distinct non-copyrighted, editable floor palettes for each generated setting */
.board.theme-forest{background-color:#293c32;background-image:radial-gradient(ellipse at 21% 19%,#94a4695e,transparent 36%),radial-gradient(ellipse at 68% 72%,#162a22,transparent 55%),repeating-linear-gradient(35deg,#59725425 0 5px,#243a3022 5px 16px),linear-gradient(#354e38,#20382e)}
.board.theme-forest .cell.wall{background:radial-gradient(circle,#4f6447,#23352e 70%);border-color:#607e5f}
.board.theme-ice{background-color:#4a7183;background-image:radial-gradient(circle at 25% 20%,#daf4fc8c,transparent 35%),repeating-linear-gradient(135deg,#bed9eb3b 0 3px,transparent 3px 19px),linear-gradient(#36586c,#142e43)}
.board.theme-ice .cell.wall{background:linear-gradient(145deg,#739bb0,#1b3e53);border-color:#aac9db}
.board.theme-fire{background-color:#382729;background-image:radial-gradient(circle at 70% 20%,#da78425c,transparent 43%),repeating-linear-gradient(-42deg,#c35e2424 0 2px,transparent 2px 18px),linear-gradient(#3e3332,#231a22)}
.board.theme-fire .cell.wall{background:linear-gradient(130deg,#554848,#201b22);border-color:#a46d55}
.board.theme-swamp{background-color:#394535;background-image:radial-gradient(circle at 40% 30%,#738d5560,transparent 40%),repeating-radial-gradient(circle at 60% 70%,#67887c26 0 5px,transparent 6px 19px),linear-gradient(#32483e,#1b2c2b)}
.board.theme-swamp .cell.wall{background:linear-gradient(140deg,#576750,#243a38);border-color:#72836a}
.board.theme-urban{background-color:#3d4956;background-image:repeating-linear-gradient(0deg,#7d8b8954 0 2px,transparent 2px 39px),repeating-linear-gradient(90deg,#7d8b8954 0 2px,transparent 2px 39px),linear-gradient(#4e5c65,#313c44)}
.board.theme-urban .cell.wall{background:linear-gradient(145deg,#849196,#354751);border-color:#a3afb3}
.board.theme-dungeon{background-color:#373941;background-image:radial-gradient(circle at 35% 55%,#a4988760,transparent 55%),repeating-linear-gradient(50deg,#78818525 0 3px,transparent 3px 20px),linear-gradient(#3d4650,#212f38)}


.system-switcher{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem;font-weight:700}
.system-switcher select{max-width:190px;min-width:120px;border:1px solid var(--line);background:#111c2b;color:var(--text);border-radius:9px;padding:9px}
.creature-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,0.9fr);gap:18px;align-items:start}
.creature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.creature-card{display:flex;flex-direction:column;gap:9px;min-height:210px}
.creature-card p{line-height:1.55}.creature-stats{display:flex;gap:8px;flex-wrap:wrap}
.creature-stats span{padding:5px 8px;background:#0c1724;border-radius:7px;font-weight:700;font-size:.8rem;color:var(--gold)}
@media(max-width:950px){.creature-layout{grid-template-columns:1fr}.system-switcher{flex-wrap:wrap}}

/* Arena-inspired low-friction AI providers and external generation handoff. */
.free-ai-panel,.arena-panel{border:1px solid #4b6072;border-radius:13px;background:linear-gradient(135deg,#102335,#172b3d);padding:15px;margin:16px 0;box-shadow:inset 0 1px #ffffff10}
.free-ai-panel strong,.arena-panel strong{color:#f3d9a6}
.free-ai-panel .row,.arena-panel .row{gap:10px;margin:9px 0;align-items:center}
.free-ai-panel .label,.arena-panel .label{margin:9px 0}
.free-ai-panel a,.arena-panel a{font-size:12px;text-decoration:underline;text-underline-offset:3px}
.arena-panel summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;color:var(--text);list-style:revert}
.arena-panel summary small{color:var(--muted)}
.arena-panel textarea{resize:vertical;min-height:95px;overflow-wrap:anywhere}
.arena-panel .muted{line-height:1.6}
@media(max-width:700px){.free-ai-panel .two{grid-template-columns:1fr}.free-ai-panel,.arena-panel{padding:11px}}