/* Feslottet – Trylleboka (the spellbook), its HUD button and the Trylleboka cluster on the free spell bar. Owner: WP-T (DESIGN5 §9). */

/* ---------- HUD button: left of Vennealbumet (the Kikkert chip moves one place left) */
.hud-book { top: calc(14px * var(--u)); right: calc(210px * var(--u)); width: calc(86px * var(--u)); height: calc(86px * var(--u)); border-radius: calc(26px * var(--u));
  background: linear-gradient(160deg, #fbf4ff, #e4d8ff); border: calc(4px * var(--u)) solid #fff; padding: calc(8px * var(--u));
  box-shadow: 0 calc(5px * var(--u)) 0 rgba(120, 90, 190, .25), 0 calc(10px * var(--u)) calc(24px * var(--u)) rgba(60, 40, 110, .2); transition: transform .12s; }
.hud-book:hover { transform: translateY(-2px) rotate(-2deg); }
.hud-book:active { transform: scale(.94); }
.hud-book-dot { position: absolute; right: calc(-5px * var(--u)); top: calc(-5px * var(--u)); width: calc(22px * var(--u)); height: calc(22px * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd84a 60%, #e0a91e); border: calc(3px * var(--u)) solid #fff; display: none; pointer-events: none;
  box-shadow: 0 0 0 calc(3px * var(--u)) rgba(255, 216, 74, .35); }
.hud-book-dot.on { display: block; }
.hud-kikkert { right: calc(306px * var(--u)); }
body.hud-task #hud .hud-book { opacity: .35; pointer-events: none; }
body.book-open #hud .hud-book { opacity: 0; pointer-events: none; }

/* ---------- the book panel */
.panel-wrap.tb-wrap > .panel { padding: 18px 22px 16px; background: linear-gradient(170deg, #fffaf3 0%, #fdf3ff 55%, #f4ecff 100%);
  border: 5px solid #fff; box-shadow: 0 0 0 6px #c9b8ff, 0 18px 60px rgba(60, 40, 110, .35); width: min(1080px, 94vw); }
.tb-book { display: flex; flex-direction: column; gap: 12px; min-height: min(620px, 84vh); }
.tb-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding-right: 72px; }
.panel-wrap.tb-wrap .panel-x { top: 14px; right: 14px; width: 64px; height: 64px; min-width: 64px; min-height: 64px; padding: 0; border-radius: 50%; }
.tb-tab { position: relative; width: 62px; height: 72px; border-radius: 18px; border: 3px solid #eadff7; background: #fff; cursor: pointer; padding: 4px 4px 12px;
  box-shadow: 0 4px 0 rgba(60, 40, 110, .12); transition: transform .1s; font-family: var(--font); }
.tb-tab.on { border-color: #b48cff; background: linear-gradient(#fff, #f1e8ff); transform: translateY(-3px); box-shadow: 0 6px 0 rgba(120, 80, 200, .25); }
.tb-tab.full { border-color: #f0c33c; }
.tb-tab-cover svg { width: 42px; height: 42px; display: block; margin: 6px auto 0; }
.tb-tab-season { border-color: #ffc98a; background: linear-gradient(#fff, #fff1df); }
.tb-tab-season.on { border-color: #f39a3c; }
.tb-tab-gem { display: block; width: 28px; height: 28px; margin: 12px auto 0; transform: rotate(45deg); border-radius: 6px; border: 3px solid #fff;
  background: linear-gradient(135deg, #fff 0%, #ff6f9f 30%, #5fc0ff 60%, #7ad66a 100%); box-shadow: 0 2px 0 rgba(60, 40, 110, .2); }
.tb-tab-img { width: 46px; height: 46px; display: block; margin: 0 auto; object-fit: contain; }
.tb-mini { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 6px; border-radius: 3px; background: #efe6fb; overflow: hidden; }
.tb-mini-f { height: 100%; background: linear-gradient(90deg, #ffd84a, #ff9cc8); border-radius: 3px; }
.tb-page { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* cards */
.tb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tb-card { position: relative; height: 176px; border-radius: 20px; border: 3px solid #eadff7; background: #fff; cursor: pointer; padding: 6px 4px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-shadow: 0 4px 0 rgba(60, 40, 110, .1); font-family: var(--font); }
.tb-card.sil { background: linear-gradient(170deg, #f6f0ff, #ebe2fb); border-style: dashed; border-color: #cdbdf0; }
.tb-card.got { border-color: #c9f0d8; background: linear-gradient(170deg, #fff, #f2fff7); }
.tb-card.gate { border: 3px solid #f0c33c; box-shadow: 0 0 0 4px rgba(255, 216, 74, .45), 0 4px 0 rgba(60, 40, 110, .1); animation: tbGate 1.4s ease-in-out infinite alternate; }
@keyframes tbGate { from { box-shadow: 0 0 0 3px rgba(255, 216, 74, .35), 0 4px 0 rgba(60, 40, 110, .1); } to { box-shadow: 0 0 0 9px rgba(255, 216, 74, .15), 0 4px 0 rgba(60, 40, 110, .1); } }
.tb-img { width: 116px; height: 116px; object-fit: contain; display: block; pointer-events: none; }
.tb-img.sil { filter: brightness(0) saturate(0); opacity: .42; }
.tb-word { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 2px; letter-spacing: .02em; }
.tb-word.big { font-size: 40px; }
.tb-q { position: absolute; right: 8px; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #9b7fe0; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(120, 90, 190, .25); pointer-events: none; font-family: var(--font); }
.tb-card.lockp::after { content: ''; position: absolute; left: 8px; top: 7px; width: 24px; height: 26px; opacity: .85; pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M6 12 V8 a6 6 0 0 1 12 0 v4' fill='none' stroke='%23c99a3c' stroke-width='3'/%3E%3Crect x='3' y='11' width='18' height='13' rx='3' fill='%23f3c26b'/%3E%3Ccircle cx='12' cy='17' r='2.2' fill='%23a87a22'/%3E%3C/svg%3E"); }
.tb-card-star { position: absolute; left: 6px; top: 4px; width: 30px; height: 30px; pointer-events: none; }
.tb-card-star svg, .tb-gate-star svg { width: 100%; height: 100%; display: block; }
.tb-tap { animation: tbTap .32s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tbTap { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

/* page head + progress */
.tb-head { display: flex; align-items: center; gap: 14px; padding: 0 6px; }
.tb-head-img { width: 64px; height: 64px; object-fit: contain; }
.tb-head-name { font-family: var(--font); font-size: 40px; font-weight: 700; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 0 6px; }
.tb-bar { flex: 1; height: 20px; border-radius: 10px; background: #efe6fb; overflow: hidden; box-shadow: inset 0 2px 0 rgba(60, 40, 110, .08); min-width: 120px; }
.tb-bar-f { height: 100%; border-radius: 10px; background: linear-gradient(90deg, #ffd84a, #ff9cc8 60%, #b48cff); transition: width .6s; }
.tb-count { font-size: 30px; color: var(--ink2); font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; }
.tb-count b { color: var(--ink); }
.tb-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: auto; }
.tb-btn { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(#fff, #efe4ff); color: #7d5fd0; cursor: pointer;
  box-shadow: 0 4px 0 rgba(60, 40, 110, .18); display: flex; align-items: center; justify-content: center; padding: 10px; }
.tb-btn svg { width: 100%; height: 100%; display: block; }
.tb-btn:disabled { opacity: .3; cursor: default; }
.tb-dots { display: flex; gap: 8px; }
.tb-dot { width: 14px; height: 14px; border-radius: 50%; background: #e3d6f5; }
.tb-dot.on { background: #b48cff; transform: scale(1.2); }

/* cover */
.tb-page.tb-cover { flex-direction: row; gap: 22px; align-items: stretch; }
.tb-cover-l { flex: 0 0 360px; display: flex; }
.tb-cover-r { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.tb-gate { flex: 1; border-radius: 28px; background: linear-gradient(170deg, #fff7d6, #ffe7f2 60%, #efe4ff); border: 4px solid #fff;
  box-shadow: 0 0 0 4px #ffd84a, 0 8px 0 rgba(60, 40, 110, .12); display: flex; flex-direction: column; align-items: center; padding: 14px; gap: 8px; }
.tb-gate-title { font-size: 30px; font-weight: 700; color: #b0731a; }
.tb-gate-pic { position: relative; width: 250px; height: 250px; border-radius: 26px; background: rgba(255, 255, 255, .75); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; }
.tb-gate-pic .tb-img { width: 200px; height: 200px; }
.tb-gate-pic .tb-q { width: 50px; height: 50px; font-size: 36px; right: 12px; top: 12px; }
.tb-gate-star { position: absolute; left: 10px; top: 10px; width: 48px; height: 48px; }
.tb-gate.none .tb-gate-star { position: static; width: 120px; height: 120px; }
.tb-gate-row { display: flex; gap: 16px; }
.tb-tryll { width: 84px; height: 84px; background: linear-gradient(#fff6c8, #ffd84a); }
.tb-hear { width: 84px; height: 84px; }
.tb-powers { display: flex; gap: 14px; justify-content: center; }
.tb-pow { position: relative; width: 104px; height: 104px; border: 0; background: none; cursor: pointer; padding: 0; }
.tb-pow .tb-gem { position: absolute; inset: 10px; transform: rotate(45deg); border-radius: 18px; border: 4px solid #fff;
  background: linear-gradient(135deg, #fff 0%, var(--pc) 45%, var(--pc) 100%); box-shadow: 0 6px 0 rgba(60, 40, 110, .18); }
.tb-pow.off .tb-gem { background: linear-gradient(135deg, #f4f0fa, #d9d1e6); filter: saturate(.2); }
.tb-pow-ico { position: absolute; inset: 26px; display: block; }
.tb-pow-ico svg { width: 100%; height: 100%; display: block; }
.tb-pow.on .tb-gem { animation: tbGem 2.4s ease-in-out infinite alternate; }
.tb-pow.tb-new { animation: tbGemNew 1.1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tbGemNew { 0% { transform: scale(.2) rotate(-90deg); } 60% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes tbGem { from { filter: brightness(1); } to { filter: brightness(1.12) drop-shadow(0 0 8px var(--pc)); } }
.tb-total { display: flex; align-items: center; gap: 14px; padding: 0 6px; }
.tb-fams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tb-fam { display: flex; align-items: center; gap: 8px; border-radius: 18px; border: 3px solid #eadff7; background: #fff; padding: 6px 10px; cursor: pointer;
  font-family: var(--font); box-shadow: 0 3px 0 rgba(60, 40, 110, .1); }
.tb-fam.full { border-color: #f0c33c; background: linear-gradient(#fffbe8, #fff); }
.tb-fam-img { width: 48px; height: 48px; object-fit: contain; }
.tb-fam-n { font-size: 22px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tb-book.tb-fullfx .tb-head { animation: tbFull 1.2s ease-in-out 2; }
@keyframes tbFull { 50% { transform: scale(1.04); filter: drop-shadow(0 0 12px #ffd84a); } }

@media (max-height: 700px) {
  .tb-card { height: 128px; } .tb-img { width: 80px; height: 80px; } .tb-word { font-size: 24px; }
  .tb-gate-pic { width: 210px; height: 210px; } .tb-gate-pic .tb-img { width: 170px; height: 170px; }
}
@media (max-width: 900px) { .tb-grid { grid-template-columns: repeat(4, 1fr); } .tb-cover-l { flex-basis: 300px; } }

/* ---------- the Trylleboka cluster of the free spell bar: floats above the bar's top-left corner (below it when the bar sits at the top) */
.panel-wrap.wand-wrap > .panel > .tb-wb { position: absolute; left: 26px; bottom: calc(100% + 4px); z-index: 4; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; padding: 6px 8px 8px; border-radius: 22px; background: rgba(255, 255, 255, .72); box-shadow: 0 4px 14px rgba(60, 40, 110, .18); }
.panel-wrap.wand-wrap.top > .panel > .tb-wb { bottom: auto; top: calc(100% - 4px); }
.panel-wrap.wand-wrap.reveal > .panel > .tb-wb { opacity: 0; pointer-events: none; }
.tb-wb-row { display: flex; gap: 8px; }
.tb-wb-book, .tb-wb-gate { position: relative; width: 56px; height: 56px; border-radius: 16px; border: 3px solid #fff; background: rgba(255, 255, 255, .85); cursor: pointer;
  padding: 4px; box-shadow: 0 3px 0 rgba(60, 40, 110, .15); }
.tb-wb-book svg { width: 100%; height: 100%; display: block; }
.tb-wb-gate { background: linear-gradient(170deg, #fff7d6, #ffe7f2); box-shadow: 0 0 0 3px #ffd84a, 0 3px 0 rgba(60, 40, 110, .15); }
.tb-wb-gate .tb-img { width: 100%; height: 100%; }
.tb-wb-gate .tb-q { width: 20px; height: 20px; font-size: 15px; right: -6px; top: -6px; }
.tb-wb-gems { display: flex; gap: 6px; padding-left: 4px; }
.tb-wb-gem { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 5px; transform: rotate(45deg); cursor: pointer; padding: 0;
  background: linear-gradient(135deg, #f4f0fa, #d9d1e6); box-shadow: 0 2px 0 rgba(60, 40, 110, .18); }
.tb-wb-gem.on { background: linear-gradient(135deg, #fff 0%, var(--pc) 45%, var(--pc) 100%); box-shadow: 0 0 8px var(--pc), 0 2px 0 rgba(60, 40, 110, .18); }
.tb-wb-gem.pop { animation: tbGemPop 1s cubic-bezier(.3, 1.6, .5, 1); }
.tb-wb-gem.wig { animation: tbGemWig .5s ease-in-out; }
@keyframes tbGemPop { 0% { transform: rotate(45deg) scale(.2); } 60% { transform: rotate(405deg) scale(1.6); } 100% { transform: rotate(405deg) scale(1); } }
@keyframes tbGemWig { 0%, 100% { transform: rotate(45deg); } 25% { transform: rotate(25deg); } 75% { transform: rotate(65deg); } }

/* ---------- the powers page (Krefter): one panel per gem */
.tb-powgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb-powcard { position: relative; border-radius: 24px; border: 4px solid #fff; background: linear-gradient(170deg, #fff, #f6f0ff); padding: 10px 14px;
  display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; min-height: 210px;
  box-shadow: 0 0 0 3px var(--pc), 0 6px 0 rgba(60, 40, 110, .1); }
.tb-powcard.off { box-shadow: 0 0 0 3px #ddd3ea, 0 6px 0 rgba(60, 40, 110, .08); cursor: pointer; }
.tb-powcard.off .tb-powex { filter: grayscale(1) brightness(.2); opacity: .25; }
.tb-powcard .tb-pow { grid-row: 1 / span 2; }
.tb-powex { display: flex; align-items: flex-end; gap: 4px; min-height: 104px; }
.tb-powimg { width: 92px; height: 92px; object-fit: contain; }
.tb-powimg.s { width: 58px; height: 58px; }
.tb-powimg.big { width: 112px; height: 112px; }
.tb-powimg.small { width: 46px; height: 46px; }
.tb-pownum { font-size: 52px; font-weight: 700; color: #b0731a; margin-right: 6px; align-self: center; }
.tb-powsmile { width: 54px; height: 54px; align-self: center; } .tb-powsmile svg { width: 100%; height: 100%; } .tb-powsmile circle:first-child { fill: #ffe66b; }
.tb-powwords { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 40px; }
.tb-powword { font-family: var(--font); font-size: 30px; font-weight: 700; background: rgba(255, 255, 255, .8); border: 0; border-radius: 12px; padding: 0 8px; cursor: pointer; color: var(--ink); }