/* ===== YTTC shared styles (public site + editor HQ) ===== */
:root{
  --bg:#F6E7A3;
  --bg-soft:#FAF0BE;
  --paper:#FBF5DC;
  --ink:#171310;
  --red:#CE2A1E;
  --red-dark:#A81F15;
  --muted:#6E6140;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}
[data-theme="night"]{
  --bg:#1E1811;
  --bg-soft:#272016;
  --paper:#2C2418;
  --ink:#F4E7B4;
  --red:#E8483A;
  --red-dark:#C93325;
  --muted:#B5A87E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  min-height:100vh;
}
body.no-motion *, body.no-motion *::before, body.no-motion *::after{
  animation:none!important;
  transition:none!important;
}
.display{
  font-family:'Anton','Arial Black',Impact,sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
  font-weight:400;
}

/* ---------- Banner ---------- */
#banner{
  background:var(--red);
  color:#FBF5DC;
  text-align:center;
  padding:.55rem 1rem;
  font-weight:700;
  border-bottom:3px solid var(--ink);
  font-size:.95rem;
}
#banner:empty{display:none}

/* ---------- Nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:3px solid var(--ink);
  display:flex;align-items:center;flex-wrap:wrap;
  gap:.25rem 1rem;
  padding:.6rem 1.2rem;
}
.logo{
  font-family:'Anton',Impact,sans-serif;
  font-size:1.35rem;
  text-transform:uppercase;
  display:flex;align-items:center;gap:.45rem;
  cursor:pointer;user-select:none;
  margin-right:auto;
}
.logo .star{color:var(--red)}
nav a.navlink, nav button.navlink{
  font-family:'Archivo',sans-serif;
  font-weight:900;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.05em;
  color:var(--ink);text-decoration:none;
  background:none;border:none;cursor:pointer;
  padding:.35rem .5rem;
  border-bottom:3px solid transparent;
}
nav a.navlink:hover{border-bottom-color:var(--ink)}
nav a.navlink.active{border-bottom-color:var(--red);color:var(--red)}

/* ---------- Pages ---------- */
.page{display:none;max-width:1060px;margin:0 auto;padding:2.5rem 1.4rem 4rem}
.page.active{display:block}

/* ---------- Hero ---------- */
#page-home{position:relative;text-align:center;padding-top:3.5rem;overflow:hidden}
.burst{position:absolute;left:2%;top:2.2rem;width:90px}
.hero-ball{position:absolute;right:4%;top:1.6rem;width:150px}
.hero-ball .ball-float{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
h1.hero{
  font-size:clamp(3.2rem,11vw,8.2rem);
  margin:1rem 0 .4rem;
}
.hero-sub{
  font-weight:900;font-size:clamp(1.05rem,2.6vw,1.7rem);
  margin-bottom:1.6rem;
}
.paddles{width:min(420px,72vw);margin:.4rem auto 1rem;display:block}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0 2rem}

.star-rule{
  display:flex;align-items:center;gap:.9rem;
  max-width:640px;margin:1.2rem auto;
  color:var(--red);font-size:1.3rem;
}
.star-rule::before,.star-rule::after{
  content:"";flex:1;border-top:4px solid var(--red);
}
.hero-contact{font-weight:700;font-size:1.05rem}
.hero-contact a{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Anton',Impact,sans-serif;
  text-transform:uppercase;letter-spacing:.04em;
  font-size:1.05rem;
  background:var(--red);color:#FBF5DC;
  border:3px solid var(--ink);
  box-shadow:var(--shadow-sm);
  padding:.65rem 1.5rem;
  cursor:pointer;text-decoration:none;
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.small{font-size:.85rem;padding:.4rem .9rem;box-shadow:3px 3px 0 var(--ink)}
.btn.danger{background:var(--ink);color:var(--bg)}

/* ---------- Section headers ---------- */
.section-head{text-align:center;margin-bottom:2.2rem}
.section-head h2{font-size:clamp(2.2rem,6vw,3.6rem)}
.section-head .kicker{
  display:inline-block;background:var(--ink);color:var(--bg);
  font-weight:900;text-transform:uppercase;font-size:.75rem;
  letter-spacing:.18em;padding:.25rem .8rem;margin-bottom:.8rem;
}
.section-head p.lede{max-width:600px;margin:.8rem auto 0;font-size:1.05rem}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  padding:1.5rem;
}
.card h3{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-weight:400;font-size:1.3rem;margin-bottom:.6rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem}
.tilt-l{transform:rotate(-.7deg)}
.tilt-r{transform:rotate(.7deg)}

.coach{display:flex;gap:.9rem;align-items:center}
.coach .avatar{
  width:56px;height:56px;flex:none;border:3px solid var(--ink);
  border-radius:50%;background:var(--red);color:#FBF5DC;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',Impact,sans-serif;font-size:1.3rem;
}
.coach .avatar.black{background:var(--ink);color:var(--bg)}
.coach small{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}

ul.values{list-style:none;margin-top:.4rem}
ul.values li{padding:.3rem 0 .3rem 1.5rem;position:relative;font-weight:500}
ul.values li::before{content:"★";color:var(--red);position:absolute;left:0}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow)}
th{
  background:var(--ink);color:var(--bg);
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.7rem .9rem;text-align:left;font-size:.95rem;
}
td{padding:.65rem .9rem;border-top:2px solid var(--ink);font-weight:500}
tbody tr:nth-child(even){background:var(--bg-soft)}
.table-wrap{overflow-x:auto}
.pill{
  display:inline-block;border:2px solid var(--ink);background:var(--bg);
  font-size:.72rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;padding:.1rem .55rem;border-radius:99px;
}
.pill.red{background:var(--red);color:#FBF5DC;border-color:var(--ink)}

/* ---------- Impact ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem;margin-bottom:2.5rem}
.stat{
  background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);
  text-align:center;padding:1.6rem 1rem 1.3rem;
}
.stat .num{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(2.6rem,6vw,4rem);color:var(--red);line-height:1;
}
.stat .label{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-top:.5rem}
blockquote.quote{
  border-left:6px solid var(--red);padding:.4rem 0 .4rem 1.2rem;
  font-size:1.15rem;font-weight:500;font-style:italic;max-width:560px;margin:0 auto;
}
blockquote.quote footer{font-style:normal;font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-top:.5rem;color:var(--muted);border:none;background:none;padding:0}

/* ---------- Forms ---------- */
form .field{margin-bottom:1.1rem}
label{display:block;font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;margin-bottom:.35rem}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;padding:.6rem .8rem;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--red);outline-offset:-1px}
textarea{resize:vertical;min-height:110px}
.form-note{font-size:.85rem;color:var(--muted);font-weight:600}
.form-card{max-width:560px;margin:0 auto}
.success-box{
  border:3px solid var(--ink);background:var(--red);color:#FBF5DC;
  box-shadow:var(--shadow-sm);padding:1.2rem 1.4rem;font-weight:700;
  margin-bottom:1.4rem;text-align:center;
}
.error-note{color:var(--red);font-weight:700;font-size:.88rem;margin-top:.6rem}

/* ---------- Settings ---------- */
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:2px dashed var(--ink);flex-wrap:wrap;
}
.setting-row:last-child{border-bottom:none}
.setting-row .desc{max-width:420px;font-size:.9rem;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:3px solid var(--ink);background:var(--paper)}
.seg button{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.05em;border:none;cursor:pointer;
  background:transparent;color:var(--ink);padding:.45rem .9rem;
}
.seg button.on{background:var(--red);color:#FBF5DC}
.switch{position:relative;width:64px;height:32px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .track{
  position:absolute;inset:0;background:var(--paper);border:3px solid var(--ink);
  cursor:pointer;transition:background .15s;
}
.switch .track::before{
  content:"";position:absolute;left:3px;top:2px;width:20px;height:20px;
  background:var(--ink);transition:transform .15s;
}
.switch input:checked + .track{background:var(--red)}
.switch input:checked + .track::before{transform:translateX(30px);background:#FBF5DC}

/* ---------- Editor HQ ---------- */
.admin-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.admin-tabs button{
  font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.04em;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  padding:.45rem 1rem;cursor:pointer;
  position:relative;
}
.admin-tabs button.on{background:var(--ink);color:var(--bg)}
.admin-panel{display:none}
.admin-panel.on{display:block}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem;margin-bottom:1.8rem}
.dash-card{border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);padding:1rem;text-align:center}
.dash-card .n{font-family:'Anton',Impact,sans-serif;font-size:2rem;color:var(--red)}
.dash-card .t{font-weight:900;text-transform:uppercase;font-size:.7rem;letter-spacing:.08em}
.edit-row{display:grid;grid-template-columns:1fr 130px 44px;gap:.6rem;margin-bottom:.6rem;align-items:center}
.edit-row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 44px;gap:.6rem;margin-bottom:.6rem;align-items:center}
.icon-btn{
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  font-weight:900;cursor:pointer;height:44px;font-size:1.1rem;
}
.icon-btn:hover{background:var(--red);color:#FBF5DC}
.admin-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;align-items:center}
.saved-flash{
  display:none;
  color:var(--red);font-weight:900;text-transform:uppercase;font-size:.8rem;
}
.saved-flash.show{display:inline}
.empty-note{padding:1.2rem;text-align:center;font-weight:700;color:var(--muted)}
.lock-icon{font-size:2.6rem;margin-bottom:.6rem}

.hq-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hq-header .who{font-weight:700}
.hq-header .who .name{color:var(--red);font-weight:900}
.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;max-width:860px;margin:0 auto}

.badge{
  display:inline-block;background:var(--red);color:#FBF5DC;
  border:2px solid var(--ink);border-radius:99px;
  font-size:.68rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.05em;padding:.05rem .55rem;vertical-align:middle;
}
.badge.dark{background:var(--ink);color:var(--bg)}
.badge.count{position:absolute;top:-10px;right:-10px;padding:.05rem .45rem}

/* Chat */
.chat-box{
  border:3px solid var(--ink);background:var(--paper);
  height:400px;overflow-y:auto;padding:1rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.msg{
  max-width:78%;border:2px solid var(--ink);background:var(--bg-soft);
  padding:.5rem .8rem;box-shadow:3px 3px 0 var(--ink);
  align-self:flex-start;overflow-wrap:anywhere;
}
.msg.mine{align-self:flex-end;background:var(--red);color:#FBF5DC}
.msg .meta{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin-bottom:.15rem}
.chat-form{display:flex;gap:.6rem;margin-top:.8rem}
.chat-form input{flex:1}

/* Todos */
.todo{
  display:flex;align-items:center;gap:.8rem;
  border:2px solid var(--ink);background:var(--paper);
  padding:.6rem .8rem;margin-bottom:.6rem;box-shadow:3px 3px 0 var(--ink);
  flex-wrap:wrap;
}
.todo input[type=checkbox]{width:20px;height:20px;accent-color:var(--red);flex:none;cursor:pointer}
.todo .txt{flex:1;font-weight:600;min-width:160px;overflow-wrap:anywhere}
.todo.done .txt{text-decoration:line-through;opacity:.55}
.todo .meta{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.todo-add{display:grid;grid-template-columns:1fr 180px auto;gap:.6rem;margin-bottom:1.2rem}

/* Team */
.member-row{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem 0;border-bottom:2px dashed var(--ink);flex-wrap:wrap;
}
.member-row:last-child{border-bottom:none}
.member-row .info{font-weight:700}
.member-row .info small{display:block;color:var(--muted);font-weight:600}
.member-row .controls{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.member-row .controls label{display:flex;align-items:center;gap:.35rem;margin:0;font-size:.7rem}
.member-row .controls input[type=checkbox]{width:18px;height:18px;accent-color:var(--red)}

/* Advanced settings */
.adv-section{
  border:3px solid var(--ink);background:var(--bg-soft);
  padding:1.2rem;margin-bottom:1.6rem;
}
.adv-section legend{
  font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:1.05rem;background:var(--ink);color:var(--bg);
  padding:.2rem .8rem;
}
.adv-warning{
  border:3px solid var(--ink);background:var(--red);color:#FBF5DC;
  box-shadow:var(--shadow-sm);padding:.9rem 1.2rem;font-weight:700;
  margin-bottom:1.6rem;
}

/* Actions menu (editor top right) */
.menu-wrap{position:relative}
.menu-pop{
  position:absolute;right:0;top:calc(100% + 8px);
  background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);
  min-width:240px;z-index:70;display:none;
}
.menu-pop.open{display:block}
.menu-pop .menu-head{
  background:var(--ink);color:var(--bg);
  font-weight:900;text-transform:uppercase;font-size:.68rem;letter-spacing:.12em;
  padding:.35rem .9rem;
}
.menu-pop button{
  display:block;width:100%;text-align:left;
  background:none;border:none;border-bottom:2px dashed var(--ink);
  padding:.6rem .9rem;cursor:pointer;color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.05em;
}
.menu-pop button:last-child{border-bottom:none}
.menu-pop button:hover{background:var(--red);color:#FBF5DC}

/* Visual editor */
.ve-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem;align-items:center}
.ve-frame{
  width:100%;height:640px;border:3px solid var(--ink);
  box-shadow:var(--shadow);background:var(--bg);display:block;
}

/* Sprites (draggable hero decorations) */
.sprite{position:absolute;z-index:5;user-select:none;touch-action:none}
.sprite svg{display:block;width:100%;height:auto;pointer-events:none}
.sprite img{
  display:block;width:100%;height:auto;pointer-events:none;
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  background:var(--paper);
}
.sprite.text-sprite{
  font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  color:var(--red);white-space:nowrap;line-height:1;
}
body.edit-mode .sprite{cursor:grab;outline:2px dashed transparent;outline-offset:4px}
body.edit-mode .sprite:hover{outline-color:var(--red)}
body.edit-mode .sprite.selected{outline:3px dashed var(--red)}
.sprite-ctl{position:absolute;top:-16px;right:-16px;display:flex;gap:4px;z-index:6}
.sprite-ctl button{
  width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;
  background:var(--paper);color:var(--ink);font-weight:900;cursor:pointer;
  line-height:1;font-size:.85rem;padding:0;
}
.sprite-ctl button:hover{background:var(--red);color:#FBF5DC}
body.edit-mode [data-c]{outline:1px dashed rgba(206,42,30,.55);outline-offset:2px;cursor:text;min-width:1ch}
body.edit-mode [data-c]:focus{outline:3px solid var(--red);background:var(--paper)}
.edit-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:99;
  background:var(--ink);color:var(--bg);
  font-weight:900;text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;
  text-align:center;padding:.45rem .8rem;
}

/* ---------- Footer ---------- */
footer{
  border-top:3px solid var(--ink);background:var(--bg-soft);
  text-align:center;padding:1.6rem 1rem;font-weight:700;font-size:.9rem;
}
footer .star{color:var(--red)}
footer a.staff{color:var(--muted);font-weight:700;font-size:.8rem;text-decoration:underline}

@media (max-width:640px){
  .burst{width:56px;top:1rem}
  .hero-ball{width:92px}
  .edit-row-4{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .edit-row-4 .icon-btn{grid-column:span 2}
  .todo-add{grid-template-columns:1fr}
}