/* =====================================================================================================
   Visual polish layer (loaded after base.css + effects.css): larger, warmer, more game-like.
   Sizes: UI text = --base-size (17px at 100%), story text = --story-size (19.5px), line-height 1.6.
   Every colour comes from the theme variables, so each theme keeps its identity.
   ===================================================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --r-lg: calc(var(--radius) + 6px); --glow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { font-size: 1.45em; letter-spacing: .02em; } h2 { font-size: 1.3em; } h3 { font-size: 1.12em; }
.small { font-size: .9em; } .muted { color: var(--muted); }
button, .button, input, select, textarea { font-size: 1em; }
button, .button { padding: 8px 15px; border-radius: var(--radius); transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, filter .15s; }
button:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--accent), 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
button:active:not(:disabled) { transform: translateY(1px) scale(.99); filter: brightness(.95); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 82%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.25); text-shadow: none; }
button.small { padding: 5px 11px; font-size: .9em; } button.big { padding: 12px 22px; font-size: 1.08em; }
input, select, textarea { padding: 8px 10px; }
.card { border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); }
.pill { font-size: .82em; padding: 2px 9px; } .badge { font-size: .86em; }
/* ornamental divider */
hr, .orn { border: 0; height: 14px; margin: 14px 0; background: radial-gradient(circle, var(--accent) 0 2.5px, transparent 3px) center / 14px 14px no-repeat, linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 90%, var(--accent)) 20%, color-mix(in srgb, var(--line) 90%, var(--accent)) 80%, transparent) center / 100% 1px no-repeat; }
/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--line)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- story column ---------- */
#messages { gap: 14px; padding-top: 14px; padding-bottom: 18px; }
.msg { font-size: var(--story-size); line-height: 1.62; padding: 14px 20px; border-radius: var(--r-lg); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.msg.dm { max-width: min(75ch, 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--dm-bg) 96%, #fff) 0%, var(--dm-bg) 40%); }
.msg.dm > p:first-of-type { margin-top: .2em; }
.msg .who { font-size: .62em; letter-spacing: .14em; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); margin-bottom: 4px; }
/* decorative first letter on openings / new scenes */
.msg.dm.opening > p:first-of-type::first-letter, .msg.dm.new-scene > p:first-of-type::first-letter { font-family: var(--font-heading); font-size: 2.6em; float: left; line-height: .85; margin: .06em .1em 0 0; color: var(--accent); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
/* NPC speech inside narration: **Name:** “line” */
.msg.dm strong + q, .msg.dm .npc-line { font-style: italic; }
.msg.dm blockquote { margin: .5em 0; padding: .3em .9em; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
/* player lines: distinct (right-aligned, accent edge) */
.msg.player { font-size: calc(var(--story-size) * .95); max-width: min(62ch, 80%); border-right: 4px solid var(--accent); background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 10%, var(--player-bg)), var(--player-bg)); }
.msg.player.said q { font-size: 1.02em; }
.msg.roll { font-size: .95em; } .msg.system, .msg.notes span { font-size: .9em; }
/* new messages fade/slide in */
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg-new, .flow-in, .msg.dm.streaming { animation: msgIn .35s var(--ease) both; }

/* ---------- choices: big game buttons directly under the narration ---------- */
#messages > #choices, #messages > #pendingRoll { margin: 4px 0 6px; align-self: stretch; max-width: min(84ch, 100%); }
#choices { display: grid !important; grid-template-columns: 1fr; gap: 10px; max-height: none; overflow: visible; }
#choices.hidden, #pendingRoll.hidden { display: none !important; }
@media (min-width: 1500px) { #choices { grid-template-columns: 1fr 1fr; } }
#choices .choices-title { grid-column: 1 / -1; font-family: var(--font-heading); font-size: 1.25em; color: var(--accent); letter-spacing: .04em; display: flex; align-items: center; gap: 10px; }
#choices .choices-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }
.choice { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; min-height: 62px; padding: 10px 16px 10px 12px; text-align: left; width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel)) 0%, var(--panel) 100%); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: var(--r-lg);
  box-shadow: 0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
.choice:hover:not(:disabled), .choice:focus-visible { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--panel)) 0%, color-mix(in srgb, var(--accent) 6%, var(--panel)) 100%); box-shadow: var(--glow), 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent); transform: translateY(-1px); }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice .k, .opt .k { flex: none; display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; font-family: var(--font-heading); font-weight: 700; font-size: 1.05em; color: var(--bg); background: var(--accent); border: 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); padding: 0; }
.choice .choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice .choice-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.choice .choice-head b { font-size: 1.2em; line-height: 1.25; font-weight: 700; color: var(--text); }
.choice .choice-desc { font-size: 1em; color: var(--muted); line-height: 1.35; display: block !important; }
.choice .pill, .opt .pill { font-size: .85em; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--panel2)); }

/* ---------- required roll: a big centred call to action ---------- */
#pendingRoll { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 20px; border: 2px solid var(--accent); border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 20%, var(--panel)) 0%, var(--panel) 70%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent), var(--shadow); }
#pendingRoll .cta-head { font-family: var(--font-heading); font-size: 1.1em; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
#pendingRoll .roll-title { font-size: 1.3em; } #pendingRoll .grow { flex: none; }
#pendingRoll .cta-row { justify-content: center; gap: 10px; flex-wrap: wrap; }
.roll-cta { font-size: 1.3em !important; padding: 12px 34px !important; min-height: 58px; border-radius: 99px !important; }
.roll-cta kbd { font-size: .6em; opacity: .75; margin-left: .5em; border: 1px solid currentColor; border-radius: 4px; padding: 0 .35em; }

/* ---------- input ---------- */
#inputForm { padding: 10px calc(var(--gap) * 1.5) 12px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--panel) 85%, transparent); }
.input-row textarea { font-size: calc(var(--story-size) * .92); line-height: 1.45; border-radius: var(--r-lg); min-height: 2.9em; }
#sendBtn { min-width: 90px; font-size: 1.05em; }

/* ---------- dialogue view ---------- */
#dialogueBox { border: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line)); border-radius: var(--r-lg); padding: 14px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel)); box-shadow: var(--shadow); max-height: 52vh; }
.dlg-head b { font-family: var(--font-heading); font-size: 1.3em; } .dlg-head .avatar { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent); }
.dlg-line { font-size: var(--story-size) !important; font-style: italic; padding: 10px 14px; margin: 10px 0 !important; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 var(--radius) var(--radius) 0; }
.dlg-opts { gap: 8px !important; }
.opt { display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 9px 14px 9px 10px; width: 100%; text-align: left; border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--r-lg); background: var(--panel2); }
.opt:hover:not(:disabled), .opt:focus-visible { border-color: var(--accent); box-shadow: var(--glow); }
.opt .opt-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.opt .tone { font-size: .78em !important; } .opt .opt-line { font-size: 1.12em; font-weight: 600; line-height: 1.35; }

/* ---------- combat ---------- */
#combatBox { border-width: 2px; border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow); }
#combatBox [data-cact] { font-size: 1.08em !important; min-height: 48px; padding: 9px 18px !important; font-weight: 600; }
#combatBox .cbt { border-radius: var(--radius); }

/* ---------- top bar, left summary, right strip ---------- */
#topbar { padding: 8px 14px; gap: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff), var(--panel)); box-shadow: 0 2px 12px rgba(0,0,0,.18); position: relative; z-index: 5; }
#topbar h1 { font-size: 1.35em; }
#left { padding: 12px; } #left .card, #left .summary { border-radius: var(--r-lg); }
#tabs { width: 70px; gap: 4px; } #tabs button { padding: 7px 2px; font-size: 1.2em; border-radius: var(--radius); }
#tabs button span { font-size: .55em; max-width: 64px; }
#tabs button.on { box-shadow: inset 3px 0 0 var(--accent); }
#panelBody { padding: 14px 16px; }
.panel-title { font-size: 1.3em; }

/* ---------- main menu, create screen, settings, gallery ---------- */
.mm-head .brand { font-size: clamp(2em, 5.2vh, 3.1em); }
.mm-item { font-size: 1.12em; padding: clamp(9px, 1.6vh, 14px) 20px; border-radius: var(--r-lg); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.mm-item:hover, .mm-item:focus-visible { box-shadow: inset 4px 0 0 var(--accent), var(--glow), 0 6px 18px rgba(0,0,0,.3); }
.setup-sec { border-radius: var(--r-lg); padding: 18px 20px; }
.setup-sec h2 { font-size: 1.4em; }
.uni-card { border-radius: var(--r-lg); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.uni-card:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glow); }
.uni-card b, .uni-card .name { font-size: 1.05em; }
.seg button { padding: 10px 18px; font-size: 1em; }
.modal-box { border-radius: var(--r-lg); padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: modalIn .22s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.set-tabs button { font-size: 1em; padding: 8px 14px; }
.gal-group h3 { font-size: 1.25em; }
#panelBody > * { animation: msgIn .25s var(--ease) both; }

/* ---------- small windows (1280×720 at 125–150% = 1024×576 … 853×480) ---------- */
@media (max-width: 1100px) { :root { --story-size: calc(var(--base-size) * 1.08); } .msg { padding: 12px 16px; } }
@media (max-height: 620px) {
  .choice { min-height: 52px; padding: 7px 12px 7px 10px; } .choice .choice-head b { font-size: 1.1em; }
  #pendingRoll { padding: 12px; } .roll-cta { min-height: 48px; padding: 8px 26px !important; }
  #dialogueBox { max-height: 46vh; } .dlg-head .avatar { width: 44px; height: 44px; }
  #inputForm { padding-top: 6px; padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@media (prefers-reduced-motion: no-preference) { #messages { scroll-behavior: smooth; } }

/* ---------- title screen: painted backdrop, Ken Burns drift, fog, embers, title treatment ---------- */
#home { position: relative; overflow: hidden; isolation: isolate; background: #120d0a; }
.mm-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.mm-art { position: absolute; inset: -4%; background: #1a1410 center / cover no-repeat; animation: kenburns 60s ease-in-out infinite alternate; will-change: transform; filter: saturate(.92) brightness(.82); }
@keyframes kenburns { from { transform: scale(1.02) translate3d(-1%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1.2%, 0); } }
.mm-fog { position: absolute; inset: -10% -30%; opacity: .45; background: radial-gradient(ellipse 40% 18% at 30% 78%, rgba(255,240,220,.22), transparent 70%), radial-gradient(ellipse 45% 20% at 75% 85%, rgba(255,235,210,.18), transparent 70%); animation: fogdrift 40s linear infinite alternate; }
@keyframes fogdrift { to { transform: translate3d(12%, -2%, 0); } }
#mmEmbers { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.mm-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 70% at 50% 55%, rgba(12,8,5,.72) 0%, rgba(12,8,5,.45) 55%, rgba(12,8,5,.15) 100%), linear-gradient(180deg, rgba(10,6,4,.55) 0%, transparent 25%, transparent 70%, rgba(10,6,4,.8) 100%); }
#home .mm-wrap { position: relative; z-index: 1; }
.mm-title { font-family: 'Cinzel', var(--font-heading) !important; font-weight: 700; font-size: clamp(2.2em, 6.4vh, 3.6em) !important; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff3cf 0%, #f0c46a 45%, #b9792a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60,30,8,.9)) drop-shadow(0 0 22px rgba(255,170,70,.45)); }
.mm-title .mm-crest { -webkit-text-fill-color: initial; color: #f0c46a; }
.mm-sub { color: #e9d8b8 !important; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.main-menu { width: min(500px, 100%); }
#home .mm-item { min-height: 58px; background: linear-gradient(180deg, rgba(48,34,24,.86), rgba(28,19,13,.88)); border: 1px solid rgba(232,166,74,.38); color: #f6ead6; backdrop-filter: blur(2px); }
#home .mm-item b { font-size: 1.12em; } #home .mm-item small { color: #d6c3a2; font-size: .86em; }
#home .mm-item:hover, #home .mm-item:focus-visible { border-color: #f0b257; background: linear-gradient(180deg, rgba(78,52,30,.92), rgba(40,26,16,.92)); box-shadow: 0 0 0 1px #f0b257, 0 0 24px rgba(240,178,87,.45), inset 4px 0 0 #f0b257; }
#home .home-screen { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#home .mm-badges .badge { background: rgba(20,14,10,.75); }
.mm-foot { margin-top: auto; padding-top: 14px; font-size: 13px; color: rgba(240,225,200,.75); text-shadow: 0 1px 4px #000; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .mm-art, .mm-fog { animation: none; } #mmEmbers { display: none; } }
@media (max-height: 600px) { .mm-foot { display: none; } #home .mm-item { min-height: 46px; } }

/* ---------- in-adventure HUB + full-screen views (replaces the right icon strip) ---------- */
#game { grid-template-columns: var(--left-w) minmax(0, 1fr) !important; grid-template-areas: "top top" "left chat" !important; }
body.layout-chat-left #game { grid-template-columns: minmax(0, 1fr) var(--left-w) !important; grid-template-areas: "top top" "chat left" !important; }
body.layout-focus #game, body.layout-chat-right #game { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "top" "chat" !important; }
@media (max-width: 860px) { #game { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "top" "chat" !important; } }
#tabs { display: none !important; }
#right { display: none !important; }
body.panel-open #right { display: block !important; position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(4px); border: 0; animation: modalIn .2s var(--ease) both; }
body.panel-open #panelBody { display: block !important; position: absolute; inset: 0; width: auto; right: 0; top: 0; padding: clamp(10px, 2.2vh, 22px) clamp(12px, 3vw, 44px); overflow: auto; background: var(--bg); background-image: var(--bg-image); border: 0; box-shadow: none; }
#panelBody .closepanel { display: none !important; }
.scr-top { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); position: sticky; top: calc(-1 * clamp(10px, 2.2vh, 22px)); background: var(--bg); z-index: 2; padding-top: 6px; }
.scr-top h2 { margin: 0; font-size: 1.55em; } .scr-top .grow { flex: 1; }
.scr-body { max-width: 1500px; margin: 0 auto; }
.scr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.hub-btn { font-family: var(--font-heading); font-weight: 700; font-size: 1.05em; padding: 8px 16px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.hub-btn kbd { font-size: .62em; opacity: .7; margin-left: 4px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
@media (max-width: 1100px) { .hub-btn kbd { display: none; } }
.hub-top h2 { font-size: 1.8em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 22vw, 290px), 1fr)); gap: clamp(10px, 1.6vw, 18px); max-width: 1500px; margin: 0 auto; }
.hub-tile { position: relative; display: flex !important; align-items: center; gap: 14px; text-align: left; min-height: clamp(78px, 12vh, 112px); padding: 14px 18px; border-radius: var(--r-lg);
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%, var(--panel) 70%); box-shadow: var(--shadow);
  animation: msgIn .3s var(--ease) both; animation-delay: calc(var(--d, 0) * 18ms); }
.hub-tile:hover, .hub-tile:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--glow), 0 10px 26px rgba(0,0,0,.3); }
.hub-tile .ht-icon { font-size: 2.2em; line-height: 1; width: 1.4em; text-align: center; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hub-tile .ht-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; padding-right: 26px; }
.hub-tile b { font-family: var(--font-heading); font-size: 1.15em; } .hub-tile small { color: var(--muted); font-size: .9em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-tile .dot { position: absolute; top: 8px; right: 10px; font-style: normal; background: var(--accent); color: var(--bg); border-radius: 99px; padding: 1px 8px; font-weight: 700; font-size: .85em; }
.hub-tile .ht-key { position: absolute; bottom: 6px; right: 10px; font-size: .72em; opacity: .55; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; }
@media (max-height: 620px) { .hub-tile { min-height: 64px; padding: 8px 12px; } .hub-tile .ht-icon { font-size: 1.7em; } .hub-tile small { -webkit-line-clamp: 1; } }

/* ---------- Skills & Perks screen ---------- */
.sk-screen { display: grid; grid-template-columns: clamp(170px, 16vw, 230px) minmax(0, 1fr); gap: 18px; }
.sk-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sk-head .lvl-big { font-family: var(--font-heading); font-size: 1.6em; } .sk-head .grow { flex: 1; min-width: 160px; }
.sk-cats { display: flex; flex-direction: column; gap: 6px; }
.sk-cats button { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 12px; font-size: 1.02em; border-radius: var(--radius); }
.sk-cats button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); box-shadow: inset 4px 0 0 var(--accent); font-weight: 700; }
.sk-cats .dot { font-style: normal; background: var(--accent); color: var(--bg); border-radius: 99px; padding: 0 8px; font-size: .8em; font-weight: 700; }
.sk-main { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr); gap: 18px; align-items: start; min-width: 0; }
@media (max-width: 1150px) { .sk-main { grid-template-columns: 1fr; } }
.sk-skills { display: grid; gap: 10px; }
.sk-skill { padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.sk-skill .row1 { display: flex; align-items: baseline; gap: 10px; } .sk-skill .row1 b { font-size: 1.12em; flex: 1; }
.sk-skill .rank { font-family: var(--font-heading); font-size: 1.2em; color: var(--accent); }
.sk-skill .xpbar { height: 10px; border-radius: 99px; background: var(--panel2); overflow: hidden; margin: 6px 0 4px; border: 1px solid var(--line); }
.sk-skill .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); }
.sk-tree { position: relative; padding: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); }
.sk-tree h3 { margin-top: 0; }
.pt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.pt-col { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.pt-col > .pt-skill { font-family: var(--font-heading); font-size: .95em; color: var(--muted); text-align: center; margin-bottom: 6px; }
.pt-node { position: relative; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); min-height: 56px; display: flex; flex-direction: column; gap: 2px; }
.pt-node + .pt-node { margin-top: 22px; }
.pt-node + .pt-node::before { content: ''; position: absolute; left: 50%; top: -24px; height: 22px; border-left: 3px solid var(--line); }
.pt-node b { font-size: 1em; } .pt-node small { color: var(--muted); font-size: .82em; }
.pt-node.owned { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel2)); } .pt-node.owned + .pt-node::before { border-color: var(--good); }
.pt-node.ready { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); cursor: pointer; }
.pt-node.ready:hover { box-shadow: var(--glow), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.pt-node.locked { opacity: .62; filter: saturate(.5); }

/* ---------- trade screen ---------- */
.trade-screen { position: fixed; inset: 0; z-index: 80; background: var(--bg); background-image: var(--bg-image); overflow: auto; animation: modalIn .22s var(--ease) both; }
.tr-wrap { max-width: 1400px; margin: 0 auto; padding: clamp(10px, 2.2vh, 22px) clamp(12px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.tr-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: var(--r-lg); background: var(--panel); border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.tr-who { display: flex; gap: 14px; align-items: center; } .tr-who h2 { margin: 0; font-size: 1.5em; }
.tr-who .portrait.big { width: 96px; height: 116px; } .tr-ph { display: grid; place-items: center; font-family: var(--font-heading); font-size: 2.4em; }
.tr-pills { gap: 6px; margin-top: 6px; } .pill.disp-friendly, .pill.disp-warm { border-color: var(--good); color: var(--good); } .pill.disp-wary, .pill.disp-hostile { border-color: var(--danger); color: var(--danger); }
.tr-me { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .tr-money { font-size: 1.4em; } .tr-enc { color: var(--muted); }
.haggle-btn { border: 2px solid var(--accent); font-weight: 700; }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .tr-cols { grid-template-columns: 1fr; } }
.tr-col { padding: 12px 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); min-width: 0; }
.tr-col h3 { margin: 0 0 8px; font-size: 1.25em; }
.tr-list { display: flex; flex-direction: column; gap: 6px; }
.tr-item { display: grid; grid-template-columns: minmax(0, 1fr) 3.4em 5.5em auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid transparent; }
.tr-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.ti-name { display: flex; flex-direction: column; min-width: 0; } .ti-name small { color: var(--muted); } .ti-name small.warn { color: var(--danger); }
.ti-qty { color: var(--muted); text-align: right; } .ti-price { font-weight: 700; text-align: right; color: var(--accent); }
.tr-log { display: flex; flex-wrap: wrap; gap: 8px; } .tr-log span { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font-size: .9em; }
.opt.tone-trade { border-color: var(--good); } .opt.tone-trade .tone { color: var(--good); }
#coach.coach { z-index: 90000; } /* above the hub, screens and trade view; below the dice overlay */

/* ---- small screens / high Windows scaling (e.g. 1280x720 at 150% = 853x480 CSS px) ---- */
@media (max-width: 1100px) { .mm-title { font-size: clamp(1.7em, 4.2vw, 2.6em) !important; } }
@media (max-height: 640px) {
  #home .mm-item { min-height: 40px; padding: 6px 16px; font-size: 1em; }
  #home .mm-item small { display: none; }
  #mainMenu { gap: 6px; }
  .mm-title { font-size: clamp(1.6em, 7vh, 2.4em) !important; margin-bottom: 8px; }
}
/* Skills: compact rows in a two-column grid so a whole category fits with little scrolling */
.sk-skills { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.sk-skill { padding: 8px 12px; }
.sk-skill .xpbar { height: 8px; margin: 4px 0 2px; }
@media (max-height: 640px) { .sk-head { padding-top: 8px; padding-bottom: 8px; } .sk-skill .row1 b { font-size: 1em; } }
/* Skills & Perks: compact two-line skill rows, compact perk nodes, and on narrower screens the category
   tabs go across the top so skills and the perk tree can stay side by side (less scrolling at 125–150%). */
.sk-skills { grid-template-columns: 1fr; gap: 6px; align-content: start; }
.sk-skills .section-title { margin: 0 0 2px; }
.sk-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 6px 12px; }
.sk-skill .row1 { grid-column: 1 / -1; } .sk-skill .row1 b { font-size: 1.02em; }
.sk-skill .xpbar { margin: 0; height: 7px; }
.sk-skill > .muted.small { white-space: nowrap; font-size: .8em; }
.pt-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pt-node { padding: 6px 10px; min-height: 42px; }
.pt-node + .pt-node { margin-top: 14px; } .pt-node + .pt-node::before { top: -16px; height: 14px; }
.sk-tree { padding: 10px 12px; } .sk-tree h3 { margin-bottom: 8px; }
@media (max-width: 1150px) {
  .sk-screen { grid-template-columns: 1fr; gap: 10px; }
  .sk-cats { flex-direction: row; flex-wrap: wrap; } .sk-cats button { padding: 6px 12px; }
  .sk-main { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.4fr); gap: 12px; }
}
@media (max-width: 760px) { .sk-main { grid-template-columns: 1fr; } }
/* main menu: every item visible without scrolling down to ~640px tall (smaller still → compact rules above) */
#home .mm-item { padding: clamp(6px, 1.1vh, 12px) 20px; min-height: 0; }
#home .mm-item b, #home .mm-item small { line-height: 1.2; }
#mainMenu { gap: clamp(5px, 1vh, 10px); }
@media (max-height: 900px) { .mm-title { margin-bottom: clamp(8px, 2vh, 18px) !important; } }
@media (max-height: 820px) { .mm-sub { display: none; } .mm-head { margin-bottom: 12px !important; } .mm-wrap { padding-top: 18px !important; } #home .mm-item { padding-top: clamp(5px, .9vh, 10px); padding-bottom: clamp(5px, .9vh, 10px); } }
/* short screens: perk descriptions move to the tooltip, nodes and header get tighter */
@media (max-height: 900px) {
  .pt-node .pt-desc { display: none; }
  .pt-node { min-height: 0; padding: 5px 9px; } .pt-node b { font-size: .95em; line-height: 1.25; }
  .sk-head { padding: 6px 14px; gap: 10px; } .sk-head .lvl-big { font-size: 1.3em; }
  .sk-skill { padding: 4px 10px; } .sk-skill .row1 b { font-size: .98em; }
  .sk-tree > p.small { display: none; }
}
.pt-cols { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.sk-main { grid-template-columns: minmax(230px, .75fr) minmax(0, 1.6fr); }
@media (max-width: 760px) { .sk-main { grid-template-columns: 1fr; } }
@media (max-height: 900px) { .pt-node { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; } .pt-node > small:not(.pt-desc) { font-size: .74em; } .pt-node + .pt-node { margin-top: 10px; } .pt-node + .pt-node::before { top: -12px; height: 10px; } }
/* Wickwyrd brand: full logo (emblem + wordmark) as the main-menu hero; candle-flicker glow */
@keyframes wwFlicker{0%,100%{filter:drop-shadow(0 0 18px rgba(255,170,70,.26)) drop-shadow(0 6px 10px rgba(0,0,0,.55))}42%{filter:drop-shadow(0 0 26px rgba(255,186,90,.40)) drop-shadow(0 6px 10px rgba(0,0,0,.55))}58%{filter:drop-shadow(0 0 15px rgba(255,150,60,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.55))}}
.mm-title.mm-hero{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;filter:none!important;display:flex!important;justify-content:center;margin:0 auto 4px!important;font-size:1em!important;line-height:0}
.mm-logo-full img{display:block;height:clamp(96px,19vh,250px);width:auto;max-width:min(92vw,520px);object-fit:contain;animation:wwFlicker 5.5s ease-in-out infinite}
@media (max-width:860px){.mm-logo-full img{height:clamp(120px,24vh,200px)}}
@media (max-height:900px){.mm-logo-full img{height:clamp(84px,15vh,150px)}}
@media (max-height:700px){.mm-logo-full img{height:clamp(72px,13vh,110px)}}
@media (prefers-reduced-motion:reduce){.mm-logo-full img{animation:none;filter:drop-shadow(0 0 18px rgba(255,170,70,.26))}}