:root { --ink:#1b1b19; --orange:#fb7d07; --orange-light:#ff9837; --paper:#f8f8f8; --line:#e6e6e6; --muted:#777775; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:15px; line-height:1.45; }
.topbar { min-height:68px; padding:0 max(24px, calc((100vw - 1220px)/2)); background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--orange); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800; letter-spacing:-.02em; font-size:18px; }
.brand img { border-radius:8px; display:block; }
.brand i { font-size:13px; font-style:normal; font-weight:500; color:#b8b8b4; letter-spacing:0; }
.topbar nav { display:flex; gap:20px; align-items:center; }
.topbar nav a, .logout { color:#f4f4f1; text-decoration:none; font:inherit; font-size:14px; }
.logout { background:transparent; border:0; cursor:pointer; padding:5px 0; }
.container { width:min(1220px, calc(100% - 48px)); margin:0 auto; padding:52px 0 80px; }
.eyebrow { color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:6px 0 28px; font-size:clamp(33px, 5vw, 56px); line-height:1.04; letter-spacing:-.055em; }
h2 { margin:0; font-size:25px; letter-spacing:-.035em; line-height:1.15; }
p { margin:0; }
.hero { background:var(--ink); border:1px solid var(--ink); border-radius:25px; padding:30px; display:grid; gap:28px; grid-template-columns:1.05fr .95fr; align-items:end; position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:240px; height:240px; right:-105px; top:-130px; border-radius:50%; border:38px solid rgba(251,125,7,.7); }
.hero p { max-width:570px; color:#fff; font-size:18px; position:relative; z-index:1; }
.new-game { display:flex; gap:12px; align-items:end; position:relative; z-index:1; }
label { font-size:13px; font-weight:700; color:#2f2f2d; display:grid; gap:7px; }
input, textarea { width:100%; min-width:0; border:1px solid #d5d5d1; border-radius:9px; background:white; color:var(--ink); padding:12px 13px; font:inherit; font-size:15px; font-weight:500; outline:0; transition:border .15s, box-shadow .15s; }
input:focus, textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(251,125,7,.15); }
textarea { resize:vertical; min-height:86px; }
.new-game label { flex:1; }
.button { display:inline-flex; border:0; border-radius:9px; min-height:45px; padding:0 17px; align-items:center; justify-content:center; gap:16px; text-decoration:none; white-space:nowrap; cursor:pointer; font:700 14px/1 inherit; transition:transform .15s, background .15s; }
.button:hover { transform:translateY(-1px); }
.primary { color:var(--ink); background:var(--orange); box-shadow:0 8px 18px rgba(251,125,7,.23); }
.secondary { background:white; color:var(--ink); border:1px solid #cacac6; }
.section { margin-top:49px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:17px; }
.section-head span { font-size:13px; color:var(--muted); }
.games-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.game-card { min-height:146px; padding:19px; background:white; border:1px solid var(--line); border-radius:14px; color:var(--ink); text-decoration:none; position:relative; display:flex; flex-direction:column; align-items:flex-start; transition:box-shadow .15s, transform .15s, border .15s; }
.game-card:hover { box-shadow:0 12px 24px rgba(27,27,25,.1); transform:translateY(-2px); border-color:var(--orange); }
.game-card-meta, .prompt-meta { font-size:11px; color:#7c7c78; letter-spacing:.04em; text-transform:uppercase; }
.game-card b { margin-top:10px; font-size:18px; line-height:1.2; letter-spacing:-.025em; }
.game-card small { color:var(--muted); margin-top:8px; }
.arrow { color:var(--orange); position:absolute; right:18px; bottom:15px; font-size:23px; }
.empty { padding:24px; background:white; border:1px dashed #c4d1e5; border-radius:12px; color:var(--muted); }
.game-intro { display:flex; justify-content:space-between; align-items:end; padding:24px 0 29px; }
.game-intro h2 { margin:8px 0 8px; font-size:33px; }
.game-intro p { color:var(--muted); max-width:720px; }
.tag { display:inline-block; padding:4px 7px; background:#fff0e2; color:#b85600; border-radius:5px; font-size:10px; line-height:1; font-weight:800; letter-spacing:.07em; }
.player-link-card { margin-top:7px; padding:28px; display:grid; grid-template-columns:1fr 1.15fr; gap:25px; align-items:end; background:#fff4e9; border:1px solid #ffd7b5; border-radius:18px; border-left:7px solid var(--orange); }
.player-link-card h2 { margin:8px 0 7px; }
.player-link-card p { color:#5e4a3b; max-width:510px; }
.player-link-actions { display:grid; grid-template-columns:1fr auto; gap:10px; }
.player-link-actions input { grid-column:1 / -1; background:white; font-size:14px; }
.player-link-actions .button { min-height:42px; }
.player-container { max-width:940px; }
.player-intro { max-width:760px; margin-bottom:28px; }
.player-intro h1 { margin-bottom:13px; }
.player-intro p { font-size:17px; color:var(--muted); }
.player-generator { margin-bottom:55px; }
.sent-card { max-width:670px; margin:70px auto; padding:42px; background:var(--ink); border-radius:22px; color:white; }
.sent-card .tag { background:rgba(251,125,7,.18); color:#ffb46f; }
.sent-card h1 { margin:13px 0; color:white; }
.sent-card p { color:#cfcec9; font-size:17px; margin-bottom:26px; }
.generator { padding:28px; background:white; border:1px solid var(--line); border-radius:18px; border-top:4px solid var(--orange); }
.generator-head { display:flex; gap:14px; align-items:center; margin-bottom:25px; }
.generator-head>span, legend>span { color:var(--ink); background:var(--orange); width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.generator-head p { margin-top:5px; color:var(--muted); }
.generator-form { display:grid; gap:26px; }
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; }
.form-grid.single { grid-template-columns:1fr 1fr; }
fieldset { padding:0; margin:0; border:0; display:grid; gap:10px; }
legend { padding:0 0 9px; font-weight:800; font-size:16px; display:flex; align-items:center; gap:9px; }
.choice, .customer-choice { display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:14px; font-weight:500; color:#383835; transition:border .15s, background .15s; }
.choice:hover, .customer-choice:hover { border-color:var(--orange-light); }
.choice input, .customer-choice input { appearance:none; position:absolute; opacity:0; }
.choice:has(input:checked), .customer-choice:has(input:checked) { border-color:var(--orange); background:#fff7ef; box-shadow:inset 0 0 0 1px var(--orange); }
.choice-number { flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#f2f2ef; color:#a04a00; font-size:11px; font-weight:800; }
.choice:has(input:checked) .choice-number { color:var(--ink); background:var(--orange); }
.customer-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.customer-choice b, .customer-choice small, .tactic small { display:block; }
.customer-choice small, .tactic small { margin-top:4px; color:var(--muted); font-weight:500; line-height:1.35; }
.tactic-title { margin:5px 0 0; color:#454541; font-size:13px; font-weight:800; }
.tactic-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.tactic { display:none; min-height:113px; }
.tactic.active { display:flex; }
.submit-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:5px; border-top:1px solid var(--line); }
.submit-row p { max-width:480px; color:var(--muted); font-size:13px; }
.team-list { display:grid; gap:10px; }
.team-card { display:flex; align-items:center; gap:22px; padding:0 18px 0 0; background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border .15s, box-shadow .15s, transform .15s; }
.team-card:hover { border-color:var(--orange); box-shadow:0 10px 22px rgba(27,27,25,.08); transform:translateY(-1px); }
.team-link { min-width:0; flex:1; color:var(--ink); text-decoration:none; padding:17px 0 17px 21px; border-left:6px solid var(--orange); }
.team-link:hover .team-name { color:#b85600; }
.team-ordinal, .team-name, .team-detail { display:block; }
.team-ordinal { margin-bottom:6px; color:#b85600; font-size:10px; font-weight:800; letter-spacing:.1em; }
.team-name { font-weight:800; font-size:19px; letter-spacing:-.03em; }
.team-detail { margin-top:4px; color:var(--muted); font-size:13px; }
.team-detail i { color:var(--orange); font-style:normal; font-weight:800; }
.team-card-actions { display:flex; flex:none; align-items:center; gap:13px; }
.team-edit { color:#5c5c58; font-size:13px; font-weight:700; text-decoration:none; }
.team-edit:hover { color:#b85600; }
.team-list-action { margin-top:17px; }
.inline-actions { display:flex; gap:9px; align-items:center; }
.copy-source { display:none; }
.final-prompt { margin-top:34px; padding:28px; border:1px solid var(--line); border-radius:18px; background:#1b1b19; color:white; }
.final-prompt .tag { background:rgba(251,125,7,.18); color:#ffb46f; }
.final-prompt h2 { margin-top:8px; color:white; }
.final-prompt p { margin-top:6px; color:#c7c7c2; }
.final-prompt-head { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.final-prompt pre { margin-top:22px; color:#22221f; background:#fffdfb; border:0; max-height:430px; }
.prompt-list { display:grid; gap:14px; }
.prompt-card { background:white; border:1px solid var(--line); border-radius:13px; padding:18px; position:relative; }
.prompt-meta { display:flex; flex-wrap:wrap; gap:7px 12px; padding-right:180px; }
.prompt-actions { position:absolute; right:18px; top:14px; }
.copy { min-height:35px; padding:0 11px; background:#fff0e2; color:#a94e00; }
.copy.copied { background:#d6f5e1; color:#146b36; }
pre { margin:15px 0 0; padding:15px; background:#f5f8fd; color:#354056; border-radius:8px; white-space:pre-wrap; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height:230px; overflow:auto; }
.form-error { margin:10px 0; padding:12px; border-radius:8px; background:#fff0f0; color:#a23030; }
.login-bg { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 90% 10%, #ff9837 0, transparent 27%), radial-gradient(circle at 8% 90%, #fb7d07 0, transparent 28%), var(--ink); }
.login-card { width:min(100%, 500px); padding:39px; background:rgba(255,255,255,.98); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.22); }
.login-brand { color:var(--ink); margin-bottom:34px; }
.login-card h1 { font-size:40px; margin:9px 0 13px; }
.login-card>p { color:var(--muted); font-size:16px; }
.login-form { display:grid; gap:15px; margin-top:28px; }
.wide { width:100%; margin-top:4px; }
@media (max-width:800px) { .topbar { padding:0 20px; }.brand i { display:none; }.container { width:min(100% - 32px, 1220px); padding-top:35px; }.hero, .games-grid, .customer-options, .tactic-options, .player-link-card { grid-template-columns:1fr; }.new-game, .game-intro, .submit-row, .team-card, .final-prompt-head { flex-direction:column; align-items:stretch; }.player-link-actions { grid-template-columns:1fr; }.team-card { gap:0; padding-right:0; }.team-link { padding-right:18px; }.team-card-actions { padding:0 18px 17px; justify-content:space-between; }.inline-actions { flex-wrap:wrap; }.form-grid, .form-grid.single { grid-template-columns:1fr; }.prompt-meta { padding-right:0; }.prompt-actions { position:static; margin-top:12px; }.generator, .final-prompt, .player-link-card, .sent-card { padding:18px; } }