/* Brain Stars medieval look for the kid screens (from "BrainStars_Medieval_UI_Kit"): parchment panels with wooden
   frames, the navy-and-bolts top bar, stone-framed green buttons and a wooden tab bar, on a quiet castle courtyard.
   It sits on the app's light look (html.look-light) and only applies to kid screens (html.med, set in render()).
   The level map and the level screens have their own rules in levels.css; the parent area keeps its calm look.
   Remove this file's <link> in index.html to go back to the colour themes. */

/* ---------- palette: parchment, ink brown, gold; jewel tones for the game cards ---------- */
html.med { --l-base:#EFE0BC; --l-bg1:#E6D3A6; --l-bg2:#DCC79A; --l-ink:#3A2A14; --l-soft:#6B5232; --l-accent:#9A4A12; --l-line:#C9A86B; --l-tint:#FFF6DF;
  --l-panel2:#FFF3D6; --l-cur:#F3E3BE; --l-btn1:#FFD66B; --l-btn2:#E9A21B; --l-btnedge:#9A5B0E; --l-btnline:#FFF0C2; --l-edge:#B9975F;
  --l-ico:brightness(0) saturate(100%) invert(15%) sepia(35%) saturate(1400%) hue-rotate(5deg) brightness(.85);
  --l-ico-on:brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1800%) hue-rotate(10deg) brightness(.85);
  --a-t1a:#2E9AA8; --a-t1b:#1F6E7E; --a-t2a:#C8553D; --a-t2b:#9A3424; --a-t3a:#3B6FC9; --a-t3b:#26489A; --a-t4a:#3FA35A; --a-t4b:#257A3D;
  --page-deep:#1d2a24; --veil-top:.35; --veil-mid:.04; --veil-bot:.3;
  --bg-img:url("../img/kit/med/quiet-landscape.webp"); --bg-img-m:url("../img/kit/med/quiet-portrait.webp") }
html.med body { background:#1d2a24 }

/* ---------- text that sits on the courtyard ---------- */
html.med .intro h1, html.med .view > h2.light, html.med h2.gh { color:#fff; text-shadow:0 3px 0 #2f211d, 0 0 16px #000b }
html.med .intro p, html.med .intro .eyebrow, html.med .bs-eyebrow, html.med .bs-label { color:#FFF6DF; text-shadow:0 2px 0 #2f211d, 0 0 10px #000c }
html.med .intro .eyebrow { color:#FFD66B }

/* ---------- panels: parchment in a wooden frame; cards inside them are plain parchment ---------- */
html.med .panel, html.med .bs-panel { background:none !important; border:24px solid transparent !important; border-image:url("../img/kit/med/panel-parchment.webp") 120 fill / 24px stretch !important;
  border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; filter:drop-shadow(0 12px 20px #0008); color:var(--l-ink); padding:6px 4px 8px }
html.med .panel .card, html.med .panel .ccard, html.med .card { background:#FFF6DF; border:2px solid #C9A86B; border-radius:14px; box-shadow:0 3px 0 #B9975F; -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--l-ink) }
html.med .panel h1, html.med .panel h2, html.med .panel h3, html.med .panel p, html.med .panel strong { color:var(--l-ink); text-shadow:none }
html.med .panel .eyebrow { color:#9A4A12 }
html.med .helper, html.med .panel small, html.med .muted { color:var(--l-soft) }

/* ---------- the top bar: navy with bolts, like the kit's HUD ---------- */
html.med header.bs-top { position:relative; isolation:isolate; background:none; margin-top:6px; padding:4px 10px; min-height:60px }
html.med header.bs-top::before { content:""; position:absolute; z-index:-1; inset:0; border:12px solid transparent; border-image:url("../img/kit/med/hud-bar.webp") 50 100 fill / 12px 22px stretch; filter:drop-shadow(0 5px 8px #0008) }
html.med header.bs-top .wordmark { height:34px; width:auto }
html.med .bs-pill { background:none !important; border:0 !important; box-shadow:none !important; color:#FFE58A !important; padding:0 6px !important }
html.med .bs-pill + .bs-pill { border-left:2px solid #ffffff2a !important; border-radius:0 !important }
html.med .bs-dnav { background:#FFF3D6; border:2px solid #C9A86B } html.med .bs-dnav button { color:var(--l-ink) }
html.med .bs-dnav button[aria-current="page"] { background:linear-gradient(#FFE58A,#F2B53A); color:#3A2500 }

/* ---------- the tab bar at the bottom: a wooden board ---------- */
html.med .bs-nav { background:none !important; border:0; border-top:0 !important; box-shadow:none !important; border-image:none }
html.med .bs-nav::before { content:""; position:absolute; inset:0; z-index:-1; border:16px solid transparent; border-image:url("../img/kit/med/sign-wood.webp") 70 90 fill / 16px 20px stretch; filter:drop-shadow(0 -4px 10px #0006) }
html.med .bs-nav { isolation:isolate }
html.med .bs-nav button:not([aria-current="page"]) { color:#fff !important; text-shadow:0 2px 0 #2f211d !important; background:none }
html.med .bs-nav button[aria-current="page"] { background:linear-gradient(#FFE58A,#F2B53A) !important; color:#3A2500 !important; text-shadow:none !important; box-shadow:inset 0 2px 0 #fff9, 0 3px 0 #8A5A00 !important }

/* ---------- buttons: green stone-framed to go on, parchment for the rest ---------- */
html.med main .btn:not(.ghost):not(.sm):not(.danger), html.med .bs-playbtn { border:14px solid transparent !important; border-image:url("../img/kit/med/button-green.webp") 60 120 fill / 14px 26px stretch !important;
  background:none !important; box-shadow:none !important; color:#fff !important; text-shadow:0 2px 0 #0b4a25, 0 0 6px #0b4a25 !important; border-radius:0 !important; min-height:64px; padding:4px 16px; filter:drop-shadow(0 5px 5px #0005) }
html.med main .btn:not(.ghost):not(.sm):not(.danger):active, html.med .bs-playbtn:active { transform:translateY(3px); filter:drop-shadow(0 2px 2px #0005) }
html.med main .btn.ghost, html.med main .btn.sm { background:#FFF7E4 !important; color:#4A3214 !important; border:2px solid #8B6A3E !important; box-shadow:0 4px 0 #B9975F !important; text-shadow:none !important; border-radius:12px !important }
html.med main .btn.sm:not(.ghost) { background:linear-gradient(#FFE58A,#F2B53A) !important; color:#3A2500 !important; box-shadow:0 4px 0 #8A5A00 !important }
html.med main .btn:disabled { filter:grayscale(.8) opacity(.7) }

/* ---------- tabs, chips and switches ---------- */
html.med .tabs button, html.med .chips button, html.med .mtabs button { background:#FFF7E4; color:#4A3214; border:2px solid #C9A86B; box-shadow:0 3px 0 #B9975F }
html.med .tabs button[aria-selected="true"], html.med .tabs button[aria-current="page"], html.med .chips button[aria-pressed="true"], html.med .mtabs button[aria-selected="true"], html.med .mtabs button[aria-current="page"] {
  background:linear-gradient(#FFE58A,#F2B53A); color:#3A2500; border-color:#8A5A00; box-shadow:0 3px 0 #8A5A00 }
html.med .chip { background:#F3E3BE; color:#5A3E1C; border:1px solid #C9A86B }
html.med .kbar { background:#3b2a17; border:2px solid #C9A15A; box-shadow:inset 0 2px 0 #0006 } html.med .kbar i { background:linear-gradient(#FFE58A,#F2A21B) }
html.med input, html.med select, html.med textarea { background:#FFFBEF; color:#3A2A14; border:2px solid #C9A86B }
html.med :focus-visible { outline-color:#E8A62E !important }

/* ---------- the theme picker: the medieval look replaces the colour themes on kid screens ---------- */
html.med .themepick, html.med .themegrid, html.med .themes, html.med .themefield { display:none }
/* the champion carousel stands in the courtyard */
html.med .cs-stage { background:linear-gradient(#ffffff00 55%,#1d2a2466), url("../img/kit/med/quiet-landscape.webp") center 60%/cover !important; border:3px solid #8B6A3E; box-shadow:0 4px 0 #6b4a2a }