/* Hit Point & Click: Look options (⋯ menu → Look). Each one is a class on <html> (fx1..fx8), set per device
   from prefs.fx; js/looks.js adds the icons, corner shapes, HP effects and roll dice. All on by default. */

/* ---------- shared values; idea 8 swaps them per theme ---------- */
:root {
  --lk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lk-tex: none;
  --lk-tex-size: cover;       /* one texture over the whole window (tiles showed seams); star charts repeat */
  --lk-tex-rep: no-repeat;
  --lk-csz: 30px;
  --lk-corner: var(--lk-c-flourish);
  --lk-head: var(--serif);
  --lk-name: var(--serif);
  --lk-frame: var(--gold-dim);
  --lk-glow: transparent;
  --lk-radius: 14px;
  --lk-book: 'EB Garamond', Georgia, serif;
}

/* =====================================================================
   2: textures (grain + vignette; with 8 each theme adds its own)
   ===================================================================== */
.fx2 body { background-image: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0, 0, 0, .35) 100%), var(--lk-grain); background-attachment: fixed; }
.fx2 :is(.panel, .pc, .lootbox, .party-grid, .turns, .glance, .g-card, .pt-drawer, dialog) { background-image: var(--lk-grain); }
.fx2.fx8 body { background-image: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0, 0, 0, .4) 100%), var(--lk-tex), var(--lk-grain);
  background-size: auto, var(--lk-tex-size), auto; background-repeat: no-repeat, var(--lk-tex-rep), repeat; }
/* light themes: no dark vignette */
.fx2:is([data-theme="parchment"], [data-theme="celestial"]) body { background-image: var(--lk-grain); }
.fx2.fx8:is([data-theme="parchment"], [data-theme="celestial"]) body { background-image: var(--lk-tex), var(--lk-grain);
  background-size: var(--lk-tex-size), auto; background-repeat: var(--lk-tex-rep), repeat; }

/* =====================================================================
   8: themed looks: texture, corner shape, heading font, frame colour, glow
   ===================================================================== */
.fx8 {
  --lk-head: 'Cinzel Decorative', var(--serif);
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* obsidian cracks */
.fx8:is([data-theme="infernal"], [data-theme="forge"], [data-theme="necro"]) {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .03' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .22 0 0 0 0 .05 -2 0 0 0 .32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lk-corner: var(--lk-c-spike); --lk-radius: 6px; }
.fx8[data-theme="infernal"] { --lk-head: 'Pirata One', var(--serif); --lk-name: var(--lk-head); --lk-frame: #b3301f; --lk-glow: rgba(255, 80, 20, .16); }
.fx8[data-theme="forge"] { --lk-head: 'Cinzel', var(--serif); --lk-frame: #a0602f; --lk-glow: rgba(255, 150, 60, .12);
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02 .04' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .55 0 0 0 0 .2 -2 0 0 0 .28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fx8[data-theme="necro"] { --lk-head: 'Pirata One', var(--serif); --lk-name: var(--lk-head); --lk-frame: #4c7a2f; --lk-glow: rgba(150, 240, 100, .12);
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .03' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .95 0 0 0 0 .3 -2 0 0 0 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* moss and leaves */
.fx8:is([data-theme="feywild"], [data-theme="forest"], [data-theme="sunken"]) {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .9 0 0 0 0 .5 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lk-corner: var(--lk-c-leaf); --lk-head: 'Uncial Antiqua', var(--serif); --lk-name: var(--lk-head); --lk-radius: 18px; --lk-csz: 34px;
  --lk-glow: rgba(160, 255, 190, .12); }
.fx8[data-theme="feywild"] { --lk-glow: rgba(255, 160, 220, .12); }
/* paper */
.fx8:is([data-theme="parchment"], [data-theme="celestial"]) {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .2' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .3 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lk-corner: var(--lk-c-bracket); --lk-head: 'IM Fell English SC', var(--serif); --lk-name: var(--lk-head); --lk-frame: var(--gold); --lk-radius: 3px; --lk-csz: 24px; }
.fx8[data-theme="celestial"] { --lk-corner: var(--lk-c-flourish); --lk-head: 'Cinzel Decorative', var(--serif); --lk-name: var(--serif); --lk-radius: 10px; }
/* ice */
.fx8[data-theme="frost"] {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.05 .008' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .9 0 0 0 0 1 0 0 0 .45 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lk-head: 'Cinzel', var(--serif); --lk-glow: rgba(150, 220, 255, .14); --lk-radius: 4px; }
/* star charts */
.fx8:is([data-theme="arcane"], [data-theme="starlight"], [data-theme="underdark"], [data-theme="royal"]) {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='%23fff'%3E%3Ccircle cx='30' cy='40' r='1' opacity='.7'/%3E%3Ccircle cx='170' cy='190' r='1' opacity='.6'/%3E%3Ccircle cx='205' cy='35' r='1.6' opacity='.8'/%3E%3Ccircle cx='95' cy='150' r='.9' opacity='.6'/%3E%3Ccircle cx='20' cy='215' r='1.2' opacity='.5'/%3E%3Ccircle cx='130' cy='80' r='.8' opacity='.8'/%3E%3Ccircle cx='225' cy='120' r='1' opacity='.5'/%3E%3Cpath d='M30 40 130 80 205 35' stroke='%23fff' stroke-width='.4' opacity='.25' fill='none'/%3E%3C/svg%3E");
  --lk-glow: color-mix(in srgb, var(--crimson3) 16%, transparent); --lk-tex-size: 240px 240px; --lk-tex-rep: repeat; }
.fx8[data-theme="underdark"] { --lk-corner: var(--lk-c-spike); --lk-radius: 6px; }
.fx8[data-theme="royal"] { --lk-frame: var(--gold); }
/* sand */
.fx8[data-theme="desert"] {
  --lk-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .03' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .5 0 0 0 0 .2 0 0 0 .45 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* =====================================================================
   1: stat-block cards: double frame, corner flourishes, banner headings
   ===================================================================== */
.fx1 :is(.panel, .party-grid, .turns, .glance, .g-card, .pt-drawer, .lootbox, .pc) { border-color: var(--lk-frame); border-radius: var(--lk-radius);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--lk-frame) 55%, transparent), inset 0 0 40px var(--lk-glow), var(--shadow); }
.fx1 :is(.panel, .party-grid, .turns, .glance, .g-card, .lootbox, .pc) { position: relative; }
.fx1 :is(.panel, .party-grid, .turns, .glance, .g-card, .lootbox, .pc)::after {
  content: ''; position: absolute; inset: 4px; pointer-events: none; z-index: 1;
  background: var(--gold); opacity: .75; -webkit-mask: var(--lk-corner); mask: var(--lk-corner);
  -webkit-mask-size: var(--lk-csz); mask-size: var(--lk-csz); }   /* the size set here, so a card can make its corners smaller */
/* smaller corners on the sheet and loot cards, so they don't sit on the content */
.fx1 :is(.panel, .lootbox, .pc) { --lk-csz: 20px; }
.fx1 :is(.panel, .lootbox, .pc)::after { opacity: .6; }
.fx1 .pc.add { border-style: dashed; }
.fx1 .pc.me { box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--gold), inset 0 0 40px var(--lk-glow), var(--shadow); }
/* headings: the theme's heading font with a tapered red rule under it */
.fx1 .panel > h2, .fx1 .panel > .hp-top > h2, .fx1 .panel > summary > h2, .fx1 .items-top > h2, .fx1 .glance > summary h2, .fx1 .turns-head h2,
.fx1 .roster-h, .fx1 .d-id h2 { font-family: var(--lk-head); }
.fx1 .panel > h2::after, .fx1 .panel > .hp-top > h2::after, .fx1 .items-top > h2::after { content: ''; display: block; height: 2px; margin-top: 6px; width: min(220px, 70%);
  background: linear-gradient(90deg, var(--crimson3), transparent); }
.fx1 .panel > h2:has(.seg)::after, .fx1 .panel > h2:has(.btn)::after { display: none; }
/* glance cards: banner headings */
.fx1 .g-card { padding: 16px 14px 14px; }
.fx1 .g-card.dcard { padding-top: 20px; }
.fx1 .g-card h3 { text-align: center; margin: 0 -4px 10px; padding: 5px 10px 6px; font-family: var(--lk-head);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc1) 75%, transparent) 14%, color-mix(in srgb, var(--acc1) 75%, transparent) 86%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--lk-frame) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--lk-frame) 70%, transparent);
  color: var(--gold2); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.fx1 .g-card h3 small { display: block; margin: 1px 0 0; color: var(--acc-text); opacity: .75; font-family: var(--sans); }
.fx1 .g-card h3::after { content: ''; display: block; height: 2px; margin: 7px auto -8px; width: 70%;
  background: linear-gradient(90deg, transparent, var(--crimson3), transparent); }
.fx1:is([data-theme="parchment"], [data-theme="celestial"]) .g-card h3 { color: #fff7ee; }
/* the party table */
.fx1 .pt-headrow { background: linear-gradient(180deg, color-mix(in srgb, var(--acc1) 80%, transparent), color-mix(in srgb, var(--acc2) 80%, transparent));
  border-bottom: 2px solid var(--lk-frame); color: var(--gold2); }
.fx1:is([data-theme="parchment"], [data-theme="celestial"]) .pt-headrow { color: #fff7ee; }
.fx1 .party-grid { padding: 4px; }
.fx1 .pt-row + .pt-row { border-top-color: color-mix(in srgb, var(--lk-frame) 40%, transparent); }
.fx1 :is(.pt-name, .pc-name, .crumb-name) { font-family: var(--lk-name); letter-spacing: .02em; }
.fx1 .d-sec h3 { font-family: var(--lk-head); border-bottom: 1px solid var(--lk-frame); padding-bottom: 4px; }
.fx1 dialog { border-color: var(--lk-frame); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--lk-frame) 55%, transparent), var(--shadow); }
.fx1 dialog h2 { font-family: var(--lk-head); }

/* =====================================================================
   3: token portraits: framed round tokens; the ring follows HP
   ===================================================================== */
.fx3 .pt-row, .fx3 .charid { --ring: #c9a35a; }   /* plain selectors: an :is() with an id would outrank the HP rules below */
.fx3 .pt-row:has(.pt-bar.ok), .fx3 #cardLayout:has(.hp-bar i.ok) .charid { --ring: #5fc45a; }
.fx3 .pt-row:has(.pt-bar.mid), .fx3 #cardLayout:has(.hp-bar i.mid) .charid { --ring: #e8a93a; }
.fx3 .pt-row:has(.pt-bar.low), .fx3 #cardLayout:has(.hp-bar i:not(.ok):not(.mid)) .charid { --ring: #e04848; }
.fx3 .pt-row:has(.pt-bar.down) { --ring: #6b6b6b; }
.fx3 :is(.pt-av, .d-av, .portrait, .pc .avatar) { border: 2px solid #120c08;
  box-shadow: 0 0 0 3px var(--ring, var(--gold-dim)), 0 0 0 5px #0009, 0 0 16px color-mix(in srgb, var(--ring, var(--gold-dim)) 55%, transparent), inset 0 0 10px #000a;
  transition: box-shadow .4s; }
.fx3 :is(.pt-av, .d-av) { width: 60px; height: 60px; }
.fx3 :is(.pt-av, .d-av, .portrait, .pc .avatar) img { filter: saturate(1.08) contrast(1.05); }
.fx3 .pt-row:has(.pt-bar.down) .pt-av img { filter: grayscale(1) brightness(.6); }
.fx3 .pt-row:has(.pt-bar.low) .pt-av, .fx3 #cardLayout:has(.hp-bar i:not(.ok):not(.mid)) .portrait { animation: lkRing 1.6s ease-in-out infinite; }
@keyframes lkRing { 50% { box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px #0009, 0 0 26px var(--ring), inset 0 0 10px #000a; } }
.fx3 .pt-who { gap: 14px; }
.fx3 .charid { gap: 16px; }
.fx3 .pc .avatar { margin: 4px; }

/* =====================================================================
   4: icons
   ===================================================================== */
.lk-ico { display: none; }
.fx4 .lk-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-right: .4em; flex: none; }
.fx4 .g-card h3 .lk-ico { width: 1.25em; height: 1.25em; }
.fx4 .pt-headrow :is(.pt-n, .pt-hp) .lk-ico { display: block; margin: 0 auto 2px; width: 17px; height: 17px; opacity: .9; }
.fx4 .pt-headrow .pt-hp .lk-ico { margin: 0 0 2px; }
.fx4 .pt-c > i .lk-ico { width: 11px; height: 11px; margin-right: 2px; vertical-align: -1px; }
.lk-hgrp { display: inline-flex; align-items: center; }
.fx4 .big3 b .lk-ico { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }

/* =====================================================================
   5: HP bars + hit / heal flash
   ===================================================================== */
.fx5 .hp-bar { height: 11px; border-radius: 3px; position: relative; border: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05); }
.fx5 .hp .hp-bar { height: 14px; }
.fx5 .pt-bar { margin-top: 6px; }
.fx5 .hp-bar i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 8px currentColor; transition: width .7s cubic-bezier(.2, .8, .2, 1);
  color: rgba(240, 80, 80, .6); }
.fx5 :is(.pt-bar.ok i, .hp-bar i.ok) { color: rgba(125, 187, 108, .5); }
.fx5 :is(.pt-bar.mid i, .hp-bar i.mid) { color: rgba(226, 174, 79, .5); }
.fx5 .pt-bar.low i, .fx5 .hp .hp-bar i:not(.ok):not(.mid) { background: linear-gradient(90deg, #a3202f, #f05050); animation: lkLow 1.2s ease-in-out infinite; }
@keyframes lkLow { 50% { filter: brightness(1.45); } }
.fx5 .hp-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .45) calc(10% - 1px) 10%); }
.fx5 :is(.pt-row, .panel.hp).lk-hit { animation: lkHit 1s ease-out; }
.fx5 :is(.pt-row, .panel.hp).lk-heal { animation: lkHeal 1s ease-out; }
.fx5 .pt-row.lk-hit .pt-hpnum, .fx5 .panel.hp.lk-hit .hp-num { animation: lkShake .45s ease-in-out; }
@keyframes lkHit { 0% { background-color: rgba(220, 40, 50, .5); box-shadow: inset 4px 0 0 #ff3b3b; } 100% { background-color: transparent; } }
@keyframes lkHeal { 0% { background-color: rgba(90, 200, 110, .35); box-shadow: inset 4px 0 0 #6be07a; } 100% { background-color: transparent; } }
@keyframes lkShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fx5 .pt-row.lk-hit .pt-hpnum > b, .fx5 .panel.hp.lk-hit .hp-num { color: #ff6b6b; }
.fx5 .pt-row.lk-heal .pt-hpnum > b, .fx5 .panel.hp.lk-heal .hp-num { color: #8ff09a; }

/* =====================================================================
   6: motion: cards lift, wax-seal messages, dice fly off roll buttons
   ===================================================================== */
.fx6 :is(.g-card, .pc, .lootbox) { transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.fx6 .glance-grid:not(.sorting) .g-card:not(.dragging):hover, .fx6 .pc:not(.add):hover, .fx6 .lootbox:hover { transform: translateY(-3px); }
.fx6 .pt-row:not(.pt-headrow) { transition: background .25s, transform .2s; }
.fx6 .pt-row:not(.pt-headrow):hover { transform: translateX(3px); }
.fx6 .g-card { animation: lkIn .45s ease-out both; }
.fx6 .glance-grid > .g-card:nth-child(2) { animation-delay: .04s; } .fx6 .glance-grid > .g-card:nth-child(3) { animation-delay: .08s; }
.fx6 .glance-grid > .g-card:nth-child(4) { animation-delay: .12s; } .fx6 .glance-grid > .g-card:nth-child(n+5) { animation-delay: .16s; }
@keyframes lkIn { from { opacity: 0; transform: translateY(8px); } }
.fx6 .rollbtn:active, .fx6 .rb:active, .fx6 .weapon:active { transform: scale(.97); }
/* wax seal message */
.fx6 #toast { padding: 20px 30px 20px 80px; border-radius: 6px; font-family: var(--serif); color: #3a2410;
  background: linear-gradient(180deg, #f3e6c8, #e2cfa2); border: 1px solid #a7854b; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.fx6 #toast::before { content: '⚔'; position: absolute; left: 14px; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%;
  display: grid; place-items: center; color: #f7d0b8; font-size: 22px;
  background: radial-gradient(circle at 35% 30%, #d04040, #8a1a22 60%, #5a0e14);
  box-shadow: 0 0 0 3px rgba(138, 26, 34, .55), 0 2px 6px rgba(0, 0, 0, .5), inset 0 -2px 4px rgba(0, 0, 0, .4);
  clip-path: polygon(50% 0, 62% 6%, 76% 4%, 84% 16%, 96% 24%, 94% 38%, 100% 50%, 94% 62%, 96% 76%, 84% 84%, 76% 96%, 62% 94%, 50% 100%, 38% 94%, 24% 96%, 16% 84%, 4% 76%, 6% 62%, 0 50%, 6% 38%, 4% 24%, 16% 16%, 24% 4%, 38% 6%); }
.fx6 #toast.show { animation: lkSeal .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes lkSeal { from { transform: translate(-50%, -50%) scale(.7) rotate(-4deg); } }
/* a little d20 tumbles up from the button you rolled with */
.lk-die { position: fixed; z-index: 90; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; color: var(--gold2);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); animation: lkDie .8s cubic-bezier(.2, .7, .3, 1) forwards; }
.lk-die svg { width: 100%; height: 100%; }
.lk-die svg .f { fill: var(--crimson2); stroke: var(--gold); stroke-width: 1.4; }
@keyframes lkDie {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translate(var(--dx, 20px), -60px) rotate(400deg) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(var(--dx, 20px) * 1.2), -74px) rotate(480deg) scale(.9); opacity: 0; } }

/* =====================================================================
   7: book text: only the typeface changes; font-size-adjust scales it to the
   letter height between its own and the normal font, so it reads about the same size
   ===================================================================== */
.fx7 :is(.g-card ul, .g-card p, .g-card th, .g-card td.g-att, .g-att small, .g-items small, .g-card h3 small, .g-tag, .d-sec p, .d-list, .d-spells, .d-line,
  .party-foot, .pt-cls, .pt-extra, .pt-chip, .pc-sum, .lede, .charsub, .tg-hint, .wnote, #tabsPanel p, #tabsPanel li, .notes, .fine, dialog p) {
  font-family: var(--lk-book); font-size-adjust: .47; }
.fx7 .g-card td.g-att b { font-weight: 600; }
.fx7 .g-card :is(td:not(.g-att), td:not(.g-att) b, .g-dcs span) { font-family: var(--sans); font-size-adjust: none; }   /* numbers stay in the clean font */
.fx7 :is(.pt-cls, .pc-sum, .g-card h3 small) { font-style: italic; }

/* the Look switches in the ⋯ menu */
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-top: 6px; }
.looks label.check, dialog .form .looks label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
dialog .form .looks input { width: auto; flex: none; margin: 0; }   /* the campaign menu's form styles stack labels; not here */
@media (max-width: 520px) { .looks { grid-template-columns: minmax(0, 1fr); } }