/* DojoCraft RPG atmosphere: shared, presentation-only tokens and surfaces. */
:root{
  --rpg-font:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rpg-panel:#111920;
  --rpg-panel-raised:#17232b;
  --rpg-cave:#07080d;
  --rpg-border:#40505a;
  --rpg-border-soft:rgba(123,145,154,.28);
  --rpg-edge-light:rgba(210,225,221,.105);
  --rpg-edge-dark:rgba(0,0,0,.58);
  --rpg-highlight:var(--lime);
  --rpg-notch:7px;
  --rpg-label-spacing:.12em;
  --rpg-texture:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);
  --rpg-dither:
    radial-gradient(circle at 1px 1px,rgba(210,225,221,.045) 0 1px,transparent 1.2px) 0 0/8px 8px;
  --rpg-window-shadow:
    inset 0 1px 0 var(--rpg-edge-light),
    inset 0 -2px 0 var(--rpg-edge-dark),
    0 14px 34px rgba(0,0,0,.18);
  --rpg-step-shape:polygon(var(--rpg-notch) 0,calc(100% - var(--rpg-notch)) 0,100% var(--rpg-notch),100% calc(100% - var(--rpg-notch)),calc(100% - var(--rpg-notch)) 100%,var(--rpg-notch) 100%,0 calc(100% - var(--rpg-notch)),0 var(--rpg-notch));
}

/* Low-contrast cave depth. It is deliberately abstract rather than illustrative. */
html{background:var(--rpg-cave)}
body{
  background-color:var(--rpg-cave);
  background-image:
    radial-gradient(ellipse at 14% -8%,rgba(61,87,91,.18),transparent 38%),
    radial-gradient(ellipse at 88% 17%,rgba(73,51,91,.1),transparent 33%),
    linear-gradient(135deg,transparent 0 17%,rgba(255,255,255,.012) 17% 18%,transparent 18% 52%,rgba(0,0,0,.11) 52% 54%,transparent 54%),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.012) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(0,0,0,.07) 31px 32px);
  background-attachment:fixed;
}
@media(min-width:1200px){
  body{
    background-image:
      linear-gradient(180deg,rgba(5,5,10,.42),rgba(5,5,10,.68)),
      radial-gradient(ellipse at 50% 8%,transparent 0 24%,rgba(4,4,8,.3) 68%,rgba(4,4,8,.55) 100%),
      url("assets/backgrounds/dojo-tatami.webp");
    background-position:center,center,center top;
    background-repeat:no-repeat;
    background-size:cover,cover,cover;
    background-attachment:fixed;
  }
}
.app-shell{position:relative;isolation:isolate;background:transparent}
@media(max-width:1199px){
  .app-shell::before{
    content:'';
    position:fixed;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(5,5,10,.54),rgba(5,5,10,.76)),
      radial-gradient(ellipse at 50% 8%,transparent 0 20%,rgba(4,4,8,.32) 64%,rgba(4,4,8,.62) 100%),
      url("assets/backgrounds/dojo-tatami.webp") center top/cover no-repeat;
  }
}
@media(max-width:1199px) and (orientation:portrait){
  .app-shell::before{
    background-position:center,center,12% top;
    background-size:cover,cover,auto 100svh;
  }
}
.sidebar{
  background:
    linear-gradient(90deg,rgba(255,255,255,.018),transparent 3px),
    var(--rpg-dither),
    linear-gradient(180deg,#0e1017,#090a10 78%);
  border-right-color:var(--rpg-border-soft);
  box-shadow:inset -2px 0 0 rgba(0,0,0,.42),8px 0 30px rgba(0,0,0,.12);
}
.workspace{position:relative;isolation:isolate}
.workspace::before{
  content:'';
  position:fixed;
  z-index:-1;
  inset:0 0 0 250px;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(rgba(255,255,255,.009) 1px,transparent 1px) 0 0/64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 68%);
}

/* One compact title plate per page; no extra labels or copy. */
.topbar .page-header-copy{
  flex:1 1 auto;
  min-width:0;
}
.topbar .page-header-copy #page-title{
  position:relative;
  width:max-content;
  max-width:100%;
  margin-left:-12px;
  padding:5px 22px 8px 12px;
  border-left:2px solid color-mix(in srgb,var(--rpg-highlight) 42%,var(--rpg-border));
  background:linear-gradient(90deg,rgba(17,25,32,.9),rgba(17,25,32,.34) 72%,transparent);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,calc(100% - 9px) 100%,0 100%);
  overflow-wrap:normal;
  word-break:normal;
  white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}
.topbar .page-header-copy #page-title::after{
  content:'';
  position:absolute;
  left:12px;
  right:28px;
  bottom:2px;
  height:1px;
  background:linear-gradient(90deg,var(--rpg-border),transparent);
}

/* Shared window language for non-form surfaces. */
:where(.game-card,.game-list-row,.class-card,.coach-card,.profile-preview,.beast-preview,.beast-profile,.curriculum-period,.cycle-preview-panel,.framework-items-panel,.framework-item,.kids-general-card,.schedule-dashboard-controls,.schedule-day,.schedule-view-empty,.detail-hero,.session-hero,.similar-game-card,.empty){
  box-shadow:var(--rpg-window-shadow);
}
:where(.game-list-row,.curriculum-period,.cycle-preview-panel,.framework-items-panel,.framework-item,.kids-general-card,.schedule-dashboard-controls,.schedule-day,.schedule-view-empty,.similar-game-card,.empty){
  border-color:color-mix(in srgb,var(--rpg-border) 76%,var(--line));
}

/* Strong treatment: character identity and personal planning surfaces. */
#view:has(.beast-page),
#view:has(.profile-layout),
#view:has(.coach-grid),
#view:has(.personal-lesson-grid){position:relative;isolation:isolate}
#view:has(.beast-page)::before,
#view:has(.profile-layout)::before,
#view:has(.coach-grid)::before,
#view:has(.personal-lesson-grid)::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:-22px -28px -42px;
  pointer-events:none;
  background:
    radial-gradient(circle at 17% 12%,rgba(216,255,89,.055),transparent 31%),
    radial-gradient(circle at 82% 38%,rgba(124,92,170,.045),transparent 29%),
    var(--rpg-texture);
  mask-image:linear-gradient(to bottom,#000 0 72%,transparent 100%);
}
.personal-lesson-card{
  border-color:var(--rpg-border-soft);
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),transparent 42%),
    var(--rpg-texture),
    var(--surface-raised);
  clip-path:var(--rpg-step-shape);
}
.personal-lesson-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:6px;
  border:1px solid rgba(166,184,186,.105);
  clip-path:var(--rpg-step-shape);
}
.class-library-toolbar,.team-view-row{
  padding-bottom:11px;
  border-bottom:1px dashed var(--rpg-border-soft);
}

/* Shared restrained character-panel frame. */
.beast-preview,.beast-profile,.profile-preview{
  position:relative;
  border-color:var(--rpg-border);
  border-radius:var(--rpg-notch);
  box-shadow:inset 0 0 0 1px rgba(4,8,11,.72),0 14px 34px rgba(0,0,0,.16);
  clip-path:var(--rpg-step-shape);
}
.beast-preview::after,.beast-profile::after,.profile-preview::after{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:5px;
  border:1px solid var(--rpg-border-soft);
  clip-path:inherit;
}

/* Dojo Beast gets the strongest character-sheet treatment. */
.beast-preview{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(216,255,89,.08),transparent 42%),
    var(--rpg-texture),
    linear-gradient(160deg,var(--rpg-panel-raised),#0b1015 78%);
}
.beast-preview::before{
  content:'';
  position:absolute;
  inset:14px 18px auto;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--rpg-highlight) 28% 72%,transparent);
  opacity:.48;
}
.beast-preview .beast-art-large{
  filter:drop-shadow(0 13px 8px rgba(0,0,0,.28));
}
.beast-preview .eyebrow,
.beast-profile h2,
.beast-progression h3,
.beast-section-heading>span,
.sidebar-beast-link>.eyebrow,
.coach-beast small{
  font-family:var(--rpg-font);
  font-weight:700;
  letter-spacing:var(--rpg-label-spacing);
  text-transform:uppercase;
}
.beast-preview .eyebrow{color:var(--rpg-highlight);font-size:9px}
.beast-preview h2{
  position:relative;
  min-width:min(100%,220px);
  padding:8px 14px;
  border-block:1px solid var(--rpg-border-soft);
  background:rgba(4,8,11,.42);
  font-size:25px;
  line-height:1.12;
}
.beast-identity{font-family:var(--rpg-font);font-size:10px;letter-spacing:.035em}
.beast-profile{
  background:var(--rpg-texture),linear-gradient(145deg,rgba(24,37,45,.9),rgba(9,13,18,.94));
}
.beast-profile>h2{padding-bottom:10px;border-bottom:1px solid var(--rpg-border-soft);font-size:14px}
.beast-profile dl{font-family:var(--rpg-font)}
.beast-profile dt{font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.beast-profile dd{font-family:Manrope,Arial,sans-serif}

/* Crisp stats without sacrificing numeric readability. */
.beast-growth-heading strong{font-family:var(--rpg-font);letter-spacing:.04em}
.beast-progress-track{
  height:11px;
  padding:2px;
  border-color:var(--rpg-border);
  border-radius:2px;
  background:repeating-linear-gradient(90deg,#080d11 0 11px,#111a20 11px 12px);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.75);
}
.beast-progress-track span{
  border-radius:0;
  background:repeating-linear-gradient(90deg,var(--rpg-highlight) 0 10px,#b8dc3d 10px 11px);
  box-shadow:0 0 8px rgba(216,255,89,.16);
}
.beast-path,.beast-quests,.beast-badges{border-top-style:dashed;border-top-color:var(--rpg-border-soft)}
.beast-path li,.beast-quests article,.beast-badges>div>span{
  border-radius:3px;
  border-color:var(--rpg-border-soft);
  background:var(--rpg-texture),rgba(7,12,16,.66);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.beast-quests article{border-left:3px solid color-mix(in srgb,var(--rpg-highlight) 52%,var(--rpg-border))}
.beast-quests article>strong,.beast-badges b{font-family:var(--rpg-font);font-size:10px;letter-spacing:.025em}
.beast-badges>div>span{min-width:112px;padding:9px 10px}
.beast-badges>div>span::before{content:'◆';color:var(--rpg-highlight);font:700 8px var(--rpg-font)}

/* Coach identity receives a quieter character-card frame. */
.coach-card{
  position:relative;
  border-radius:8px;
  border-color:var(--rpg-border-soft);
  background:var(--rpg-texture),linear-gradient(145deg,#17232a,#111a20);
  box-shadow:inset 0 0 0 1px rgba(4,8,11,.36);
}
.coach-card::before,.coach-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
  width:12px;
  height:12px;
  border-color:color-mix(in srgb,var(--rpg-highlight) 30%,var(--rpg-border));
}
.coach-card::before{top:7px;left:7px;border-top:1px solid;border-left:1px solid}
.coach-card::after{right:7px;bottom:7px;border-right:1px solid;border-bottom:1px solid}
.coach-avatar{border-radius:7px;border-color:var(--rpg-border);box-shadow:inset 0 0 0 2px rgba(5,9,12,.56)}
.coach-identity h2{letter-spacing:-.02em}
.coach-identity p,.coach-rank-label{font-family:var(--rpg-font);letter-spacing:.07em;text-transform:uppercase}
.coach-beast{padding:8px 5px 6px;border-left:1px dashed var(--rpg-border-soft)}

/* Personal profile remains coach-first with only a light identity treatment. */
.profile-preview{
  background:radial-gradient(circle at 70% 4%,rgba(216,255,89,.045),transparent 35%),var(--rpg-texture),var(--rpg-panel);
}
.profile-preview h2{letter-spacing:-.025em}
.profile-title{font-family:var(--rpg-font);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* Moderate treatment: browsing and academy-structure surfaces. */
.game-card{
  border-color:color-mix(in srgb,var(--rpg-border) 60%,transparent);
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),transparent 38%),
    var(--rpg-texture),
    var(--surface-raised);
}
.game-list-row{
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--game-environment-color) 3%,transparent),transparent 34%),
    var(--rpg-texture),
    var(--surface-raised);
}
.game-card:hover,.game-list-row:hover{box-shadow:inset 0 1px 0 var(--rpg-edge-light),0 17px 38px rgba(0,0,0,.24)}
.curriculum-period,.cycle-preview-panel,.framework-items-panel{
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),transparent 44%),
    var(--rpg-texture),
    var(--rpg-panel);
}
.curriculum-period,.framework-item,.kids-general-card{border-radius:var(--rpg-notch)}
.framework-item{
  background:
    linear-gradient(90deg,rgba(255,255,255,.02),transparent 32%),
    rgba(8,13,17,.52);
}
.framework-items-panel>.class-heading,
.cycle-preview-panel>.cycle-preview-heading{
  padding-bottom:13px;
  border-bottom:1px dashed var(--rpg-border-soft);
}
.detail-hero,.session-hero{
  border:1px solid var(--rpg-border-soft);
  background:
    linear-gradient(145deg,rgba(255,255,255,.022),transparent 48%),
    var(--rpg-texture),
    var(--surface-raised);
}

/* Light treatment: time-critical and form-heavy work stays quiet. */
.schedule-dashboard-controls,.schedule-day,.schedule-view-empty{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 9px 22px rgba(0,0,0,.1);
}
.schedule-dashboard-controls{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent-blue) 6%,transparent),transparent 48%),
    var(--surface-raised);
}
.schedule-day>header{box-shadow:inset 0 -1px 0 rgba(0,0,0,.38)}
.form-wrap>.form-card,.class-builder>.form-card,.class-builder>.class-panel{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.08);
}
.teaching-shell{
  background:radial-gradient(circle at 50% 0,rgba(56,168,255,.025),transparent 34%);
}
.teaching-header,.teaching-game-card,.teaching-picker,.teaching-controls{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.11);
}

/* Tiny mode accent only; Teaching Mode structure remains unchanged. */
.teaching-mode-label{font-family:var(--rpg-font);letter-spacing:var(--rpg-label-spacing)}
.teaching-mode-label i{border-radius:1px;box-shadow:none}

@media(max-width:900px){
  .workspace::before{inset:0;background-size:48px 48px}
  #view:has(.beast-page)::before,
  #view:has(.profile-layout)::before,
  #view:has(.coach-grid)::before,
  #view:has(.personal-lesson-grid)::before{inset:-16px -20px -32px}
  .coach-beast{border-left:0}
}
@media(max-width:620px){
  :root{--rpg-notch:5px}
  body{
    background-image:
      radial-gradient(ellipse at 18% -5%,rgba(61,87,91,.13),transparent 34%),
      repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.009) 39px 40px);
    background-attachment:scroll;
  }
  .app-shell::before{
    background:
      linear-gradient(180deg,rgba(5,5,10,.58),rgba(5,5,10,.78)),
      radial-gradient(ellipse at 50% 7%,transparent 0 15%,rgba(4,4,8,.34) 59%,rgba(4,4,8,.66) 100%),
      url("assets/backgrounds/dojo-tatami.webp") 12% top/auto 100svh no-repeat;
  }
  .workspace::before{display:none}
  .topbar .page-header-copy #page-title{
    width:fit-content;
    margin-left:-7px;
    padding:4px 15px 6px 7px;
    overflow-wrap:normal;
    word-break:normal;
    white-space:normal;
  }
  .topbar .page-header-copy #page-title::after{left:7px;right:20px}
  .beast-preview,.beast-profile,.profile-preview{box-shadow:inset 0 0 0 1px rgba(4,8,11,.7),0 9px 22px rgba(0,0,0,.13)}
  .beast-preview h2{min-width:0;width:100%;font-size:22px}
  .beast-profile>h2{font-size:13px}
  .coach-card::before,.coach-card::after{width:9px;height:9px}
  .coach-beast{border-top-style:dashed}
  .personal-lesson-card::after{inset:4px}
  .class-library-toolbar,.team-view-row{padding-bottom:8px}
}

@media(prefers-reduced-motion:reduce){
  .beast-progress-track span{transition:none!important}
}