/* Forever Toggles page (js/launcher/toggles.js). The demo panel is the add-on's
   own art (art/toggles/), white on transparent, tinted here the way the game
   tints it: the colour multiplies the art and the art's own shape masks it.
   Sizes follow the add-on's layout (Panel.lua), in pixels at scale 1. */

.ft-title { margin-bottom: 14px; }
.ft-meta { margin-top: 12px; color: var(--text-2); font-size: 14px; text-shadow: 0 1px 2px #000; }
.ft-block { margin-top: 44px; }
.ft-h3 { margin-top: 26px; font: 400 20px var(--font-display); color: var(--text); text-shadow: 0 1px 2px #000; }
.ft-p { margin-top: 6px; color: var(--text-2); text-shadow: 0 1px 2px #000; }
.ft-note { margin-top: 16px; color: var(--text-2); max-width: 40em; text-shadow: 0 1px 2px #000; }

.ft-dl { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ft-dl > div { padding: 12px 14px; border-radius: 8px; background: rgba(13, 10, 7, .78); border: 1px solid rgba(94, 71, 48, .75); }
.ft-dl dt { font: 700 16px var(--font-ui); color: var(--text); }
.ft-dl dd { margin: 3px 0 0; color: var(--text-2); }

.ft-classes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.ft-classes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(13, 10, 7, .72); border: 1px solid rgba(94, 71, 48, .6); }
.ft-classes img { grid-row: span 2; width: 30px; height: 30px; border-radius: 4px; border: 1px solid #000; }
.ft-classes b { font: 700 15px/1.2 var(--font-ui); color: var(--text); }
.ft-classes span { font-size: 14px; line-height: 1.3; color: var(--text-2); }

.ft-steps { margin-top: 16px; }
.ft-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 5px; color: var(--text-2); text-shadow: 0 1px 2px #000; }
.ft-cmds { margin: 12px 0 0; display: grid; gap: 8px; }
.ft-cmds > div { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; }
.ft-cmds dt { margin: 0; }
.ft-cmds dd { margin: 0; color: var(--text-2); text-shadow: 0 1px 2px #000; }

/* ---------- the demo screen ---------- */
.ft-demo { margin-top: 34px; }
.ft-ctl { display: flex; gap: 6px; }
.ft-screen {
  position: relative; margin-top: 14px; height: 430px; border-radius: 10px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--rim); user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, rgba(8, 6, 4, .5), rgba(8, 6, 4, .66)), #0b0806 url("../art/launcher/poster/camp.jpg") 50% 45% / cover no-repeat;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .6);
}
.ft-track { height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.ft-track i { display: block; height: 100%; width: 0; background: var(--gold-2); }
.ft-credit { margin-top: 8px; font: 500 12px/1.4 var(--font-ui); color: var(--text-3); text-shadow: 0 1px 2px #000; }
.ft-credit a { color: var(--text-2); }
.ft-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; min-height: 50px; padding: 14px 18px 12px;
  text-align: center; font: 600 15px/1.4 var(--font-ui); color: #fff; text-shadow: var(--outline);
  background: linear-gradient(180deg, rgba(5, 4, 3, 0), rgba(5, 4, 3, .82) 38%);
}

/* tinted textures */
.ft-screen .tx {
  position: absolute; display: block; pointer-events: none;
  background: var(--c, #fff) var(--img) center / 100% 100% no-repeat; background-blend-mode: multiply;
  -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat;
}
.ft-screen .tx.ring { --img: url("../art/toggles/ring.png"); }
.ft-screen .tx.runes { --img: url("../art/toggles/runes.png"); }
.ft-screen .tx.sigil { --img: url("../art/toggles/sigil.png"); }
.ft-screen .tx.glow { --img: url("../art/toggles/glow.png"); mix-blend-mode: screen; }
.ft-screen .tx.mask { --img: url("../art/toggles/mask.png"); }
.ft-screen .tx.gear { --img: url("../art/toggles/gear.png"); }
.ft-screen .tx.g-play { --img: url("../art/toggles/play.png"); }
.ft-screen .tx.g-pause { --img: url("../art/toggles/pause.png"); }
.ft-screen .tx.fill { --img: url("../art/toggles/fill.png"); }
.ft-screen .tx.runes { mix-blend-mode: screen; }
.ft-screen .ft-ico { position: absolute; display: block; border-radius: 50%; overflow: hidden; pointer-events: none; }
.ft-screen .ft-ico img { display: block; width: 119%; height: 119%; margin: -9.5%; max-width: none; }
.ft-screen .mid { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---------- the panel ---------- */
.ft-panel {
  --cc: #69ccf0; --trim: #d9b25e; --bronze: #6b5133; --ink: #0d0a07; --off: #f26b54; --ok: #78d65c; --dim: #8c7d68; --parch: #f1e8d6;
  position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 66px; width: 240px; height: 154px; z-index: 2;
  scale: 1.35; transform-origin: 50% 100%;   /* larger than in the game, so the parts read on a web page */
  transition: width .35s var(--ease), height .35s var(--ease);
}
.ft-panel button { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.ft-chrome { position: absolute; inset: 0; transition: opacity .3s; }
.ft-bg {
  position: absolute; inset: 0; opacity: .97;
  background: #211811 url("../art/toggles/leather.png") 0 0 / 128px 128px repeat; background-blend-mode: multiply;
}
.ft-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); }
.ft-panel[data-bg="medium"] .ft-bg { opacity: .75; }
.ft-panel[data-bg="light"] .ft-bg { opacity: .5; }
.ft-frame { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(217, 178, 94, .75), inset 0 0 0 2px rgba(13, 10, 7, .9); }
.ft-frame::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(217, 178, 94, .16); }
.ft-name { position: absolute; left: 94px; top: 11px; font: 700 16px/1.2 var(--font-ui); color: var(--cc); text-shadow: 1px 1px 0 #000; }
.ft-panel .ft-gear { right: 11px; top: 13px; width: 16px; height: 16px; }
.ft-gear .tx { --c: var(--trim); inset: 0; opacity: .8; }
.ft-gear:hover .tx, .ft-gear:focus-visible .tx { --c: #ffd100; opacity: 1; }
.ft-panel .ft-bar { left: 94px; right: 14px; top: 36px; height: 16px; overflow: hidden; background: rgba(13, 10, 7, .92); box-shadow: inset 0 0 0 1px rgba(217, 178, 94, .5); }
.ft-fill { --c: var(--cc); inset: 1px; transition: opacity .3s; }
.ft-panel:not(.linked) .ft-fill { opacity: .6; }
.ft-panel.paused .ft-fill { --c: #ad2a16; opacity: .85; }
.ft-spark { --c: var(--parch); top: -7px; left: -44px; width: 44px; height: 30px; opacity: 0; }
.ft-panel.running.linked:not(.calm) .ft-spark { opacity: .75; animation: ft-spark 2.6s linear infinite; }
@keyframes ft-spark { from { left: -44px; } to { left: 100%; } }
.ft-bartext { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--font-ui); color: var(--parch); text-shadow: var(--outline); }
.ft-link { position: absolute; left: 94px; top: 60px; display: flex; align-items: center; gap: 6px; }
.ft-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); opacity: .6; }
.ft-panel.linked .ft-dot { background: var(--ok); opacity: 1; }
.ft-linktext { font: 600 11px/1 var(--font-ui); color: var(--dim); text-shadow: 1px 1px 0 #000; }
.ft-panel.linked .ft-linktext { color: var(--parch); }
.ft-div { position: absolute; left: 16px; right: 16px; top: 92px; height: 1px; background: rgba(217, 178, 94, .3); }

/* the crest: the master switch */
.ft-panel .ft-crest { left: 16px; top: 14px; width: 60px; height: 60px; border-radius: 50%; transform-origin: 0 0; z-index: 2; transition: left .35s var(--ease), top .35s var(--ease), scale .35s var(--ease); }
.ft-crest > * { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ft-cglow { --c: var(--cc); width: 120px; height: 120px; opacity: .45; transition: opacity .4s; }
.ft-runes { --c: var(--cc); width: 86px; height: 86px; opacity: .8; transition: opacity .6s; }
.ft-crest .ft-back { --c: var(--ink); width: 54px; height: 54px; }
.ft-crest .ft-ico { width: 54px; height: 54px; }
.ft-crest .ft-ico img { transition: filter .3s; }
.ft-ring { --c: var(--trim); width: 66px; height: 66px; }
.ft-crest:hover .ft-ring, .ft-crest:focus-visible .ft-ring { --c: var(--parch); }
.ft-badge { position: absolute; left: auto !important; top: auto !important; right: -5px; bottom: -5px; width: 22px; height: 22px; transform: none !important; }
.ft-badge > * { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ft-bdisc { --c: var(--ink); width: 20px; height: 20px; }
.ft-bring { --c: var(--trim); width: 25px; height: 25px; }
.ft-glyph { --c: var(--ok); width: 15px; height: 15px; margin-left: .5px; }
.ft-panel.paused .ft-glyph { --c: var(--off); }
.ft-panel.paused .ft-cglow { opacity: 0; }
.ft-panel.paused .ft-runes { --c: var(--dim); opacity: .3; }
.ft-panel.paused .ft-ring { --c: var(--bronze); }
.ft-panel.paused .ft-crest:hover .ft-ring { --c: var(--trim); }
.ft-panel.paused .ft-crest .ft-ico img { filter: grayscale(1) brightness(.6); }

/* the switches */
.ft-panel .ft-sigil {
  left: calc(46px + var(--i) * 56px); top: 96px; width: 36px; height: 36px; border-radius: 50%; z-index: 3;
  transition: left .35s var(--ease), top .35s var(--ease), scale .3s var(--ease), opacity .25s;
  transition-delay: calc(var(--i) * 35ms);
}
.ft-sigil > i, .ft-sigil > .ft-ico { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ft-sigil .ft-back { --c: var(--ink); width: 31px; height: 31px; }
.ft-sigil .ft-ico { width: 31px; height: 31px; }
.ft-sigil .ft-ico img { filter: grayscale(1) brightness(.55); transition: filter .25s; }
.ft-sring { --c: var(--bronze); width: 39px; height: 39px; }
.ft-label { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; font: 600 11px/1.1 var(--font-ui); color: var(--dim); text-shadow: 1px 1px 0 #000; transition: opacity .2s; }
.ft-sigil.on .ft-ico img { filter: none; }
.ft-sigil.on .ft-sring { --c: #ffd100; }
.ft-sigil.on .ft-label { color: var(--parch); }
.ft-sigil:hover .ft-sring, .ft-sigil:focus-visible .ft-sring { --c: var(--trim); }
.ft-sigil.on:hover .ft-sring, .ft-sigil.on:focus-visible .ft-sring { --c: var(--parch); }
.ft-panel.paused .ft-sigil .ft-ico { opacity: .6; }
.ft-panel.nolabels .ft-label { opacity: 0; }
.ft-crest.pop, .ft-sigil.pop { animation: ft-pop .22s var(--ease); }
@keyframes ft-pop { from { transform: scale(1.2); } to { transform: none; } }

/* compact: the crest and one row of switches */
.ft-panel[data-mode="compact"] { width: 240px; height: 66px; }
.ft-panel[data-mode="compact"] :is(.ft-name, .ft-gear, .ft-bar, .ft-link, .ft-div) { opacity: 0; visibility: hidden; }
.ft-panel[data-mode="compact"] .ft-crest { left: 17px; top: 12px; scale: .7; }
.ft-panel[data-mode="compact"] .ft-sigil { left: calc(84px + var(--i) * 52px); top: 8px; }

/* medallion: only the crest; the switches fan out on hover */
.ft-panel[data-mode="medallion"] { width: 88px; height: 88px; }
.ft-panel[data-mode="medallion"] .ft-chrome { opacity: 0; visibility: hidden; }
.ft-panel[data-mode="medallion"] .ft-crest { left: 14px; top: 14px; }
.ft-panel[data-mode="medallion"] .ft-sigil { left: 26px; top: 26px; scale: .3; opacity: 0; pointer-events: none; }
.ft-panel[data-mode="medallion"].fan .ft-sigil { left: calc(26px + var(--fx)); top: calc(26px + var(--fy)); scale: 1; opacity: 1; pointer-events: auto; }
.ft-chrome :is(.ft-name, .ft-gear, .ft-bar, .ft-link, .ft-div) { transition: opacity .25s; }

/* ---------- announcement, tooltip, options, pointer ---------- */
.ft-announce { position: absolute; left: 50%; top: 22px; z-index: 5; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); opacity: 0; white-space: nowrap; pointer-events: none; }
.ft-announce.show { animation: ft-ann 1.7s var(--ease) forwards; }
@keyframes ft-ann { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.ft-announce b { font: 400 28px/1 var(--font-display); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, .8); }
.ft-aicon { position: relative; width: 34px; height: 34px; flex: none; }
.ft-aicon > * { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ft-aicon .ft-back { --c: var(--ink); width: 30px; height: 30px; }
.ft-aicon .ft-ico { width: 30px; height: 30px; }
.ft-aicon img.off { filter: grayscale(1) brightness(.6); }
.ft-aicon .tx.sigil { --c: #d9b25e; width: 38px; height: 38px; }

.ft-tooltip {
  position: absolute; z-index: 7; width: max-content; max-width: 230px; padding: 8px 10px 9px; display: grid; gap: 2px; pointer-events: none;
  background: var(--tip); border: 1px solid var(--tip-rim); border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 10px 24px rgba(0, 0, 0, .6);
  font: 500 13px/1.35 var(--font-ui); color: #fff;
}
.ft-tooltip b { font: 600 15px var(--font-ui); }
.ft-tooltip .y { color: var(--gold); }
.ft-tooltip .g { color: #1eff00; }
.ft-tooltip .r { color: #ff4c3b; }
.ft-tooltip .s { color: var(--text-3); }

.ft-options {
  position: absolute; right: 14px; top: 14px; z-index: 4; width: 196px; padding: 10px 12px 12px; display: grid; gap: 6px;
  background: #211811 url("../art/toggles/leather.png") 0 0 / 128px 128px repeat; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 1px rgba(217, 178, 94, .75), inset 0 0 0 2px rgba(13, 10, 7, .9), 0 12px 30px rgba(0, 0, 0, .6);
}
.ft-otitle { text-align: center; font: 400 17px/1.3 var(--font-display); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.ft-options button {
  min-height: 26px; padding: 3px 8px; border-radius: 3px; cursor: pointer;
  background: rgba(13, 10, 7, .85); border: 1px solid rgba(217, 178, 94, .45);
  font: 600 13px var(--font-ui); color: var(--text);
}
.ft-options button:hover, .ft-options button:focus-visible { border-color: rgba(255, 209, 0, .95); color: var(--gold); }

.ft-cursor { position: absolute; left: 0; top: 0; z-index: 8; width: 0; height: 0; pointer-events: none; transition: transform .8s cubic-bezier(.45, .05, .25, 1); }
.ft-cursor svg { position: absolute; left: -4px; top: -2px; width: 24px; height: 24px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .6)); }
.ft-clickfx { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.ft-clickfx.go { animation: ft-click .4s var(--ease) forwards; }
@keyframes ft-click { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }

@media (max-width: 900px) {
  .ft-screen { height: 440px; }
  .ft-panel { bottom: 84px; scale: 1.15; }
  .ft-cmds > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ft-panel { scale: 1; }
  .ft-options { right: auto; left: 50%; top: 10px; transform: translateX(-50%); }
  .ft-announce b { font-size: 24px; }
  .ft-caption { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-screen *, .ft-screen *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .ft-announce.show { opacity: 1; }
}
.reduce .ft-screen *, .reduce .ft-screen *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
.reduce .ft-announce.show { opacity: 1; }

/* Folder paths are long and have no spaces: let them break anywhere on a phone. */
#view-toggles .mono { overflow-wrap: anywhere; }