/* kt-ui.css: styles for shared/kt-ui.js (tabs, collapsible boxes, drop-downs, collapsible tables, interlude card).
   Uses the host game's colour variables if they exist (--ink, --paper, --sun, --grape, --grape2, --cream) and falls back to the Academy colours. */
.ktabs{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.ktab{ flex:0 0 auto; min-height:56px; display:flex; align-items:center; gap:8px; padding:8px 16px; font:inherit; font-weight:900; font-size:1em; cursor:pointer;
  color:var(--ink,#1d2a4d); background:var(--paper,#fff); border:4px solid var(--ink,#1d2a4d); border-radius:20px; box-shadow:0 5px 0 var(--ink,#1d2a4d); white-space:nowrap; }
.ktab .kti{ font-size:1.3em; line-height:1; }
.ktab.on{ background:var(--sun,#ffd23f); transform:translateY(2px); box-shadow:0 3px 0 var(--ink,#1d2a4d); }
.ktab:focus-visible,.kacc summary:focus-visible,.ksel select:focus-visible,.kscroll:focus-visible{ outline:4px dashed var(--grape2,#5b3fe0); outline-offset:3px; }
.kpanel{ outline:none; }
.kacc-list{ display:flex; flex-direction:column; gap:12px; }
.kacc{ background:var(--paper,#fff); border:4px solid var(--ink,#1d2a4d); border-radius:22px; box-shadow:0 6px 0 var(--ink,#1d2a4d); overflow:hidden; color:var(--ink,#1d2a4d); margin-bottom:12px; }
.kacc-list .kacc{ margin-bottom:0; }
.kacc summary{ list-style:none; cursor:pointer; min-height:64px; display:flex; align-items:center; gap:12px; padding:10px 14px; }
.kacc summary::-webkit-details-marker{ display:none; }
.kacc .kai{ font-size:2em; line-height:1; flex:0 0 auto; }
.kacc .kat{ flex:1; min-width:0; display:flex; flex-direction:column; } .kacc .kat b{ font-size:1.05em; } .kacc .kat small{ font-weight:700; font-size:.78em; opacity:.8; }
.kchev{ flex:0 0 auto; width:14px; height:14px; border-right:5px solid currentColor; border-bottom:5px solid currentColor; transform:rotate(45deg); margin:0 6px 4px 0; transition:transform .15s; }
.kacc[open]>summary .kchev{ transform:rotate(-135deg); margin-bottom:-4px; }
.kacc[open]>summary{ background:var(--cream,#fff8e6); border-bottom:3px solid var(--ink,#1d2a4d); }
.kabody{ padding:12px 14px 14px; }
.kabody .pitchsvg{ margin:8px 0; }
.kscroll{ overflow-x:auto; max-width:100%; border-radius:12px; }
.ktable{ border-collapse:collapse; width:100%; min-width:420px; font-weight:700; font-size:.9em; }
.kcap{ text-align:left; font-weight:900; padding:0 0 6px; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ktable th,.ktable td{ border:3px solid var(--ink,#1d2a4d); padding:8px 10px; text-align:left; vertical-align:top; }
.ktable thead th{ background:var(--grape,#7b5cff); color:#fff; } .ktable tbody th{ background:var(--cream,#fff8e6); }
.ktable tbody tr:nth-child(even) td{ background:#f4f7ff; }
.knote{ font-size:.8em; font-weight:700; opacity:.8; margin:8px 0 0; }
.ksel{ display:flex; flex-direction:column; gap:6px; font-weight:900; margin:4px 0 12px; }
.ksel select{ min-height:60px; font:inherit; font-weight:800; padding:8px 40px 8px 14px; color:var(--ink,#1d2a4d); background:var(--paper,#fff); border:4px solid var(--ink,#1d2a4d); border-radius:18px; box-shadow:0 5px 0 var(--ink,#1d2a4d); width:100%; }
/* interlude / intro splash */
.inter{ text-align:center; padding:8px 0; }
.inter .bigico{ font-size:72px; line-height:1; display:inline-block; }
.inter .card{ margin:12px 0; } .inter .itag{ font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); font-size:.95em; }
.inter .itext{ font-size:1.15em; font-weight:800; margin:8px 0 0; }
.inter .isrc{ font-size:.72em; font-weight:700; opacity:.75; margin-top:8px; }
.inter .ballroll{ height:44px; position:relative; margin:14px 0 4px; overflow:hidden; }
.inter .ballroll i{ position:absolute; left:-40px; top:4px; font-style:normal; font-size:32px; animation:ktroll 2.4s linear infinite; }
@keyframes ktroll{ to{ left:100%; transform:rotate(720deg); } }
.inter .bigico.bounce{ animation:ktbounce 1s ease-in-out infinite; } @keyframes ktbounce{ 50%{ transform:translateY(-12px) scale(1.06); } }
.inter video{ width:100%; max-height:46vh; border:4px solid var(--ink,#1d2a4d); border-radius:20px; background:#000; }
@media (prefers-reduced-motion: reduce){ .inter .ballroll i,.inter .bigico.bounce{ animation:none; } }
body.calm .inter .ballroll i, body.calm .inter .bigico.bounce{ animation:none; }
@media (max-width:480px){ .ktable{ font-size:.82em; min-width:460px; } .ktable th,.ktable td{ padding:6px 8px; } }
/* media boxes (clips are 9:16, so they are height-limited) and position illustrations */
.mbox{ display:flex; justify-content:center; margin:6px 0 10px; }
.mbox video,.mbox .mstill{ width:auto; max-width:100%; max-height:46vh; aspect-ratio:9/16; object-fit:cover; border:4px solid var(--ink,#1d2a4d); border-radius:22px; background:#0d2c86; box-shadow:0 6px 0 var(--ink,#1d2a4d); }
.mbox.inter video,.mbox.inter .mstill{ max-height:38vh; }
.posimg{ display:block; width:100%; max-width:300px; height:auto; aspect-ratio:1/1; object-fit:cover; margin:6px auto 10px; border:4px solid var(--ink,#1d2a4d); border-radius:22px; background:#0d2c86; box-shadow:0 5px 0 var(--ink,#1d2a4d); }