/* ============================================================================
   博克岛皮肤 Berk skin — shared site-wide theme (linked after each page's inline
   <style> so these win the cascade; !important guards against page specifics).
   Goal: make the whole site feel like How-to-Train-Your-Dragon's Berk —
   carved wood, aged parchment, wrought iron, gold rivets, viking lettering.
   iPad-first: touch targets, no auto text-zoom, fluid widths.
   ============================================================================ */
@font-face{ font-family:'BerkRune'; src:url('/fonts/MedievalSharp.ttf') format('truetype'); font-display:swap; }
:root{ --berk-wood:#3a2616; --berk-wood-dark:#241509; --berk-iron:#4a4038; --berk-gold:#caa14a; --berk-ink:#2a1810; }

/* iPad / touch niceties */
html{ -webkit-text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

/* aged parchment ground (warm + faint woven fibre) */
body{
  background:
    radial-gradient(circle at 50% -2%, rgba(74,144,226,0.05), transparent 55%),
    repeating-linear-gradient(135deg, rgba(120,90,50,0.03) 0 7px, transparent 7px 14px),
    repeating-linear-gradient(45deg,  rgba(120,90,50,0.03) 0 7px, transparent 7px 14px),
    radial-gradient(circle at 50% 42%, #f1ddab 0%, #e2cb90 55%, #c7aa6c 100%) !important;
}

/* viking display font on Latin headings/accents; Chinese gets weight+spacing+gold */
h1,h2,h3,.brand-name,.title,.section-title h2,.welcome h1,.section-title .en,.welcome .runes,.brand-sub{
  font-family:'BerkRune','PingFang SC','Microsoft YaHei',serif !important;
  letter-spacing:1px;
}

/* top bar → carved wood plank sign */
.header,.topbar{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 40px, transparent 40px 80px),
    linear-gradient(180deg,#4a3018,#2a1a0c) !important;
  border:3px solid var(--berk-gold) !important; border-radius:12px !important;
  box-shadow:0 5px 0 var(--berk-wood-dark), 0 10px 24px rgba(0,0,0,0.45) !important;
  color:#f4e8c8 !important;
}
.header .brand-name{ color:#f7ecce !important; text-shadow:0 1px 0 #000; }
.header .brand-sub{ color:var(--berk-gold) !important; }
.topbar a{ color:#f4e8c8 !important; }

/* nav → wooden plaques, active = lit red; touch-sized */
.nav{ flex-wrap:wrap !important; }
.nav a{
  background:linear-gradient(180deg,#f3e6c4,#d8bf8a) !important;
  border:2px solid var(--berk-wood) !important; color:var(--berk-ink) !important;
  box-shadow:0 2px 0 rgba(58,38,22,0.55), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  min-height:40px !important;
}
.nav a.active{ background:linear-gradient(180deg,#b03318,#7a1f10) !important; color:#ffe8c8 !important; border-color:var(--berk-wood-dark) !important; }

/* buttons → forged iron + gold rim, comfy tap size */
.btn{ border:2px solid var(--berk-wood-dark) !important; box-shadow:0 3px 0 var(--berk-wood-dark) !important; min-height:44px; }
.btn.primary{ background:linear-gradient(180deg,#9a2a16,#6a160e) !important; color:#ffe8c8 !important; }

/* cards / panels → framed aged-parchment plaques */
.status-card,.dragon-card,.card,.egg-card{
  position:relative;
  border:2px solid var(--berk-wood) !important;
  box-shadow:inset 0 0 40px rgba(139,90,43,0.12), 0 6px 18px rgba(42,24,16,0.22) !important;
}
.status-card::after{ content:''; position:absolute; inset:5px; border:1px solid rgba(202,161,74,0.55); border-radius:7px; pointer-events:none; }
.status-card::before{ /* iron rivets in the corners */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background:
    radial-gradient(circle 3px at 11px 11px, var(--berk-iron) 60%, transparent 62%),
    radial-gradient(circle 3px at calc(100% - 11px) 11px, var(--berk-iron) 60%, transparent 62%),
    radial-gradient(circle 3px at 11px calc(100% - 11px), var(--berk-iron) 60%, transparent 62%),
    radial-gradient(circle 3px at calc(100% - 11px) calc(100% - 11px), var(--berk-iron) 60%, transparent 62%);
}

/* section titles get a gold sword flourish */
.section-title h2::before{ content:'⚔ '; color:var(--berk-gold); }