/* Total Football Ninja. One style: ink, paper, one hot orange. Everything leans forward. */
:root { --ink:#0a0a0b; --ink2:#141416; --paper:#f5f2ea; --hot:#ff4a1c; --mute:#8d8d92; --line:rgba(245,242,234,.14); --lean:-9deg; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font:400 17px/1.5 Barlow, system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
h1, h2, h3, .logo, .btn, .pill, .tag, .kicker, .nr, .tape, .title, .add, .cap, .mins b { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; text-transform:uppercase; }
h1 { font-size:clamp(58px, 9.4vw, 148px); line-height:.84; letter-spacing:-.01em; margin:0; }
h1 em { color:var(--hot); font-style:inherit; }
h2 { font-size:clamp(44px, 6vw, 84px); line-height:.9; margin:0 0 28px; }
h3 { font-size:28px; line-height:1; margin:14px 0 4px; }
.kicker { color:var(--hot); font-size:17px; letter-spacing:.14em; margin:0 0 14px; }
.lead { font-size:19px; color:#cfccc4; max-width:34ch; margin:22px 0 28px; }
.meta { color:var(--mute); margin:0; font-size:15px; }
.wrap { max-width:1240px; margin:0 auto; padding:84px 24px; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.star { display:inline-block; width:18px; height:18px; background:var(--hot); clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* ---------- top bar */
.top { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; background:rgba(10,10,11,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; font-size:24px; text-decoration:none; letter-spacing:.01em; white-space:nowrap; }
.logo b { color:var(--hot); }
nav { display:flex; align-items:center; gap:18px; }
.link { color:var(--mute); font-size:15px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line); white-space:nowrap; }
.link:hover { color:var(--paper); }
.pill { font-size:18px; text-decoration:none; padding:5px 14px; border:1px solid var(--line); transform:skewX(var(--lean)); letter-spacing:.04em; }
.pill b { color:var(--mute); margin-left:4px; }
.pill.on { border-color:var(--hot); } .pill.on b { color:var(--hot); }

/* ---------- language picker */
.lang { position:relative; display:inline-flex; align-items:center; }
.lang select { appearance:none; -webkit-appearance:none; background:none; border:0; color:var(--mute); cursor:pointer;
  font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; font-size:17px; letter-spacing:.06em; padding:4px 16px 4px 4px; }
.lang::after { content:""; position:absolute; right:4px; top:50%; width:6px; height:6px; margin-top:-5px; border:solid var(--mute); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); pointer-events:none; }
.lang select:hover, .lang select:focus { color:var(--paper); outline:none; }
.lang option { background:var(--ink2); color:var(--paper); font-style:normal; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- buttons: parallelograms */
.btn { display:inline-block; background:var(--hot); color:var(--ink); font-size:22px; letter-spacing:.03em; padding:13px 30px; transform:skewX(var(--lean)); text-decoration:none; transition:transform .12s, background .12s; }
.btn span { display:inline-block; transform:skewX(calc(var(--lean) * -1)); }
.btn:hover { transform:skewX(var(--lean)) translateX(5px); background:#ff6338; }
.btn.ghost { background:none; color:var(--paper); box-shadow:inset 0 0 0 1.5px var(--paper); }
.btn.ghost:hover { background:var(--paper); color:var(--ink); }
.btn:disabled { opacity:.5; pointer-events:none; }

/* ---------- hero: words left, the video big on the right */
.hero { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px; align-items:center; max-width:1500px; margin:0 auto; padding:56px 0 64px 24px; overflow:hidden; }
.screen { position:relative; transform:skewX(-4deg) translateX(3%); border-left:6px solid var(--hot); background:#000; overflow:hidden; aspect-ratio:16/9; }
.screen video { width:100%; height:100%; object-fit:cover; display:block; transform:skewX(4deg); }  /* no crop: the guide caption sits in the top-left corner */
.cap { position:absolute; right:0; bottom:0; background:var(--hot); color:var(--ink); font-size:17px; letter-spacing:.06em; padding:6px 26px 6px 18px; }
.cap b { margin-left:6px; }

/* ---------- video caption (follows the site language) */
.screen, .mvid { container-type:inline-size; }
.mvid { position:relative; }
.vcap { position:absolute; left:2.4%; top:3.4%; max-width:60%; display:flex; align-items:center; gap:1.2cqw;
  background:rgba(10,10,11,.86); border-left:4px solid var(--hot); padding:1.1cqw 1.6cqw 1.1cqw 1.2cqw; pointer-events:none;
  animation:capIn .25s ease-out; }
.screen .vcap { transform:skewX(4deg); left:3.2%; }            /* the hero frame is skewed; keep the caption straight */
.vcap b { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; color:var(--hot); font-size:clamp(20px, 4.2cqw, 44px); line-height:.9; }
.vcap div { display:grid; gap:.2cqw; min-width:0; }
.vcap strong { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(13px, 2.2cqw, 24px); line-height:1; }
.vcap span { font-size:clamp(11px, 1.45cqw, 16px); line-height:1.3; color:#d9d6ce; }
.vcap i { align-self:flex-start; font-style:normal; color:var(--mute); font-size:clamp(10px, 1.1cqw, 13px); margin-left:.4cqw; }
@keyframes capIn { from { opacity:0; transform:translateY(-4px); } }
.screen .vcap { animation-name:capInSkew; }
@keyframes capInSkew { from { opacity:0; transform:skewX(4deg) translateY(-4px); } }

/* ---------- drill list header + filter */
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.head h2 { margin:0; } .head h2 small { color:var(--hot); font-size:.42em; vertical-align:top; margin-left:4px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; text-transform:uppercase; font-size:17px; letter-spacing:.05em; padding:6px 16px; border:1px solid var(--line); color:var(--mute); transform:skewX(var(--lean)); transition:.12s; }
.chip:hover { color:var(--paper); border-color:var(--paper); }
.chip.on { background:var(--hot); border-color:var(--hot); color:var(--ink); }

/* ---------- drill cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:44px 28px; }
.card { min-width:0; }
.shot { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--ink2); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.shot video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.card:hover .shot video { transform:scale(1.04); }
.tag { position:absolute; left:0; bottom:0; background:var(--paper); color:var(--ink); font-size:15px; letter-spacing:.06em; padding:3px 12px; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.stars { display:inline-flex; align-items:center; }
.stars button { font-size:20px; line-height:1; color:#3a3a3e; padding:2px 1px; transition:color .1s, transform .1s; }
.stars button.on { color:var(--paper); }
.stars button.mine { color:var(--hot); }
.stars button:hover { transform:scale(1.25); color:var(--hot); }
.stars small { color:var(--mute); margin-left:8px; font-size:13px; }
.stars.big button { font-size:30px; }
.add { font-size:18px; letter-spacing:.05em; color:var(--hot); padding:4px 0; border-bottom:2px solid transparent; }
.add:hover { border-color:var(--hot); }
.add.on { color:var(--paper); }

/* ---------- idea form */
.idea { display:grid; grid-template-columns:1fr 1fr; gap:48px; border-top:1px solid var(--line); }
form { display:grid; gap:12px; }
input, textarea, select { width:100%; background:var(--ink2); border:1px solid var(--line); padding:13px 14px; border-radius:0; outline:none; resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:var(--hot); }
select { appearance:none; cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size:6px 6px; background-repeat:no-repeat; }
select.empty { color:var(--mute); } select option { color:var(--paper); background:var(--ink2); }
::placeholder { color:#6d6d72; }
.err { color:#ff8a6b; margin:0; font-size:15px; }
form .btn { justify-self:start; }

/* ---------- session sheet */
.sheet { max-width:900px; padding-top:40px; }
.back { color:var(--mute); text-decoration:none; font-size:15px; }
.title { display:block; width:100%; background:none; border:0; border-bottom:2px solid var(--line); padding:18px 0 8px; margin:0 0 8px; font-size:clamp(44px, 7vw, 84px); line-height:.9; color:var(--paper); }
input.title:focus { border-color:var(--hot); }
.empty { color:var(--mute); padding:40px 0; }
.plan { list-style:none; margin:28px 0 36px; padding:0; }
.plan > li { display:grid; grid-template-columns:44px 180px 1fr auto auto; gap:18px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); }
.nr { font-size:44px; line-height:.9; color:var(--hot); }
.plan img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.thumb { position:relative; } .thumb span { position:absolute; inset:0; display:grid; place-items:center; font-size:26px; background:rgba(10,10,11,.25); }
.what h3 { margin-top:0; } .what p { margin:4px 0 0; color:#cfccc4; font-size:15px; }
.note { margin-top:10px; padding:8px 10px; font-size:15px; }
.mins { display:flex; align-items:baseline; gap:6px; color:var(--mute); }
.mins input { width:66px; text-align:right; padding:8px; } .mins b { font-size:34px; color:var(--paper); line-height:1; }
.ctl { display:flex; gap:4px; } .ctl button { width:32px; height:32px; border:1px solid var(--line); color:var(--mute); } .ctl button:hover { color:var(--paper); border-color:var(--paper); } .ctl button:disabled { opacity:.25; pointer-events:none; }
.steps { margin:10px 0 0; padding-left:20px; color:#cfccc4; font-size:15px; } .steps li { margin:3px 0; } .steps li::marker { color:var(--hot); font-weight:600; }
.printonly { display:none; }

/* ---------- modals & toast */
.veil { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.78); display:grid; place-items:center; padding:20px; overflow:auto; }
.modal { position:relative; width:min(980px, 100%); background:var(--ink2); border-top:6px solid var(--hot); }
.modal video { width:100%; aspect-ratio:16/9; display:block; background:#000; }
.modal .body { padding:26px 28px 30px; display:grid; gap:12px; }
.modal h2 { font-size:clamp(34px, 5vw, 56px); margin:0; } .modal p { margin:0; }
.modal.small { width:min(430px, 100%); }
.x { position:absolute; right:10px; top:6px; z-index:2; font-size:34px; line-height:1; color:var(--paper); text-shadow:0 0 8px #000; }
.toast { position:fixed; left:50%; bottom:26px; z-index:60; transform:translate(-50%, 30px) skewX(var(--lean)); background:var(--paper); color:var(--ink); padding:10px 22px; font-weight:600; opacity:0; pointer-events:none; transition:.2s; }
.toast.on { opacity:1; transform:translate(-50%, 0) skewX(var(--lean)); }
footer { border-top:1px solid var(--line); padding:30px 24px 44px; color:var(--mute); font-size:15px; display:flex; gap:10px; align-items:center; justify-content:center; }

/* ---------- small screens */
@media (max-width: 860px) {
  .hero { grid-template-columns:1fr; padding:36px 0 44px; gap:30px; }
  .pitch { padding:0 20px; }
  .screen { transform:none; border-left-width:0; border-top:6px solid var(--hot); } .screen video { transform:none; width:100%; margin:0; }
  .wrap { padding:56px 20px; }
  .idea { grid-template-columns:1fr; gap:8px; }
  .plan > li { grid-template-columns:34px 1fr auto; } .plan img, .thumb { grid-column:2 / -1; grid-row:1; } .what { grid-column:2 / -1; } .nr { grid-row:1; }
  .mins { grid-column:2; } .ctl { grid-column:3; }
  .logo { font-size:20px; } .top { padding:10px 16px; flex-wrap:wrap; row-gap:6px; } nav { gap:14px; width:100%; justify-content:flex-end; }
  .pill { white-space:nowrap; }
  .grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ---------- print: a clean black-on-white session sheet */
@media print {
  :root { --paper:#111; --mute:#555; --line:#ccc; }
  body { background:#fff; color:#111; font-size:12pt; }
  .top, footer, .noprint, .veil, .toast { display:none !important; }
  .printonly { display:block; }
  .wrap { padding:0; max-width:none; }
  .title { font-size:34pt; border-color:#111; color:#111; }
  .plan > li { grid-template-columns:30px 150px 1fr auto; break-inside:avoid; }
  .what p, .steps { color:#222; }
  .mins input { border:0; background:none; width:36px; padding:0; font-weight:600; -moz-appearance:textfield; }
  .mins input::-webkit-inner-spin-button { display:none; }
  .printfoot { margin-top:18px; color:#777; font-size:10pt; }
}

/* sort choice, "just added" row, rating count */
.sort { display:flex; border:1px solid var(--line); transform:skewX(var(--lean)); }
.sort button { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.05em; padding:6px 14px; color:var(--mute); }
.sort button:hover { color:var(--paper); }
.sort button.on { background:var(--paper); color:var(--ink); }
.rowtitle { font-family:"Barlow Condensed", "Arial Narrow", sans-serif; font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:18px; color:var(--hot); margin:0 0 14px; }
.grid.new3 { margin-bottom:56px; padding-bottom:48px; border-bottom:1px solid var(--line); }
.stars small { white-space:nowrap; }
@media print { .sort, .rowtitle, .new3 { display:none !important; } }

/* sign-in extras */
.check { display:flex; align-items:center; gap:10px; color:var(--mute); font-size:15px; cursor:pointer; }
.check input { width:18px; height:18px; accent-color:var(--hot); padding:0; }
input.code { font-size:26px; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; }
.alt { display:flex; flex-wrap:wrap; gap:8px 18px; }