:root { --cc-ink:#153c35; --cc-teal:#256958; --cc-paper:#f5f7f1; --cc-gold:#e1b757; --cc-line:#d0ded5; }
body { background:var(--cc-paper); color:var(--cc-ink); }
.skip-link { position:absolute; top:-60px; left:12px; z-index:1000; padding:12px 20px; background:#fff; color:var(--cc-ink); }
.skip-link:focus { top:10px; }
:focus-visible { outline:3px solid #b67718; outline-offset:3px; }
button, .arena-link, select, input:not([type=checkbox]) { min-height:44px; }
.creature-art { overflow:hidden; padding:0!important; border-radius:14px; }
.pixel-habitat { position:relative; display:flex; width:100%; height:100%; min-height:136px; align-items:center; justify-content:center; background-size:cover; background-position:center; image-rendering:pixelated; isolation:isolate; overflow:hidden; }
.pixel-habitat::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 65%,rgba(8,25,22,.28)); z-index:-1; }
.habitat-backdrop { position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; image-rendering:pixelated; }
.pixel-window { --sprite-side:112px; position:relative; width:var(--sprite-side); height:var(--sprite-side); overflow:hidden; z-index:1; filter:drop-shadow(0 5px 0 rgba(8,30,21,.22)); }
.pixel-creature { image-rendering:pixelated; }
.pixel-window > .pixel-creature { display:block; position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:contain!important; image-rendering:pixelated; }
.pixel-creature.is-atlas { width:600%!important; height:600%!important; max-width:none!important; object-fit:fill!important; transform:translate(calc(var(--frame,0) * -100% / 6),calc(var(--row,0) * -100% / 6)); }
.portrait-creature { width:94%!important; height:94%!important; }
.habitat-element { position:absolute; bottom:8px; left:10px; background:rgba(12,38,31,.86); color:#fff; padding:2px 8px; font-size:.7rem; font-weight:800; border-radius:5px; }
.creature-card { border-radius:16px; box-shadow:0 3px 0 rgba(28,65,47,.06); }
.creature-card .creature-art { width:152px; min-width:152px; height:166px; }
.detail-art .pixel-habitat { min-height:270px; }
.detail-art .pixel-window { --sprite-side:192px; }
.creature-card .description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.practice-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; background:#173e33; color:#f6f6df; border:1px solid #214f40; border-radius:20px; padding:34px; margin:22px 0; overflow:hidden; }
.practice-hero h1 { color:#fff9dd; font-size:clamp(2rem,4vw,3.4rem); line-height:1.08; letter-spacing:-.045em; margin:8px 0 18px; }
.practice-hero .eyebrow { color:#f0ce80; }
.practice-hero p { max-width:510px; color:#dbe8d7; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin:22px 0 14px; }
.hero-actions a { color:#e4ead8; font-weight:750; }
.hero-actions .arena-link { display:inline-flex; align-items:center; background:#f2cf72; border-radius:9px; padding:10px 18px; color:#173e33; text-decoration:none; box-shadow:0 3px 0 #bd9b48; }
.practice-note { font-size:.8rem; }
.practice-entry { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:18px 0 0; padding:14px 18px; border:1px solid #bdcdbb; border-radius:12px; background:#edf2e6; }
.practice-entry a { color:#1d5948; font-weight:800; }
.practice-entry span { color:#53685a; font-size:.85rem; }
.account-disclosure { margin:16px 0; border:1px solid #d4e0d4; border-radius:12px; background:#fffdf6; }
.account-disclosure > summary { padding:14px 18px; min-height:48px; font-weight:800; cursor:pointer; }
.account-disclosure .access-panel { border:0; margin:0; }
.hero-creatures { display:flex; gap:10px; transform:rotate(-3deg); }
.hero-creatures .pixel-habitat { min-height:210px; border:4px solid #e2c680; border-radius:14px; box-shadow:0 8px 0 rgba(0,0,0,.15); }
.hero-creatures .pixel-habitat:nth-child(2) { transform:translateY(-18px); }
.practice-builder,.replay-panel { background:#fffdf6; border:1px solid var(--cc-line); border-radius:16px; padding:24px; margin:22px 0; scroll-margin-top:16px; }
.team-guidance { color:#53685a; max-width:800px; }
.practice-teams { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.team-picks { min-width:0; }
.team-picks legend { display:flex; justify-content:space-between; font-size:1.15rem; font-weight:800; }
.team-picks legend span { font-size:.85rem; color:#607466; }
.team-profile { color:#365c4b; padding:8px 10px; background:#edf2e6; border-radius:7px; font-size:.78rem; font-weight:650; }
.training-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.training-card { position:relative; display:flex; flex-direction:column; border:2px solid #d6e0d4; border-radius:12px; overflow:hidden; background:white; cursor:pointer; transition:border-color .12s,box-shadow .12s; }
.training-card:has(input:checked) { border-color:#26715a; box-shadow:0 0 0 2px #a6c2b4; }
.training-card:has(input:disabled) { cursor:default; }
.training-card input { position:absolute; left:8px; top:8px; width:23px; height:23px; z-index:3; accent-color:#236852; }
.training-card .pixel-habitat { height:112px; min-height:112px; }
.training-card .pixel-window { --sprite-side:80px; }
.training-name { font-size:.86rem; font-weight:850; padding:8px 9px 0; line-height:1.15; }
.training-role { font-size:.72rem; color:#596b60; padding:3px 9px; }
.training-stats { display:flex; justify-content:space-between; gap:4px; font-size:.75rem; padding:8px 9px; color:#597264; }
.training-stats b { color:#173d33; }
.training-secondary { padding-top:0; border-top:1px solid #edf1e7; }
.practice-start { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; }
.practice-start p { margin:0; font-size:.88rem; color:#546a5b; }
.replay-arena { background:linear-gradient(rgba(8,30,22,.38),rgba(8,30,22,.7)),url('/art/cc_habitat_alpine.png') center/cover; border-radius:14px; padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.replay-team h3 { color:#fff3c7; font-size:1rem; text-transform:uppercase; letter-spacing:.09em; margin:0 0 14px; }
.replay-fighter { display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; margin:10px 0; padding:8px; border-radius:10px; background:rgba(8,29,24,.9); color:#fffbe7; border:1px solid #6e8f72; }
.replay-fighter .pixel-habitat { min-height:80px; height:80px; border-radius:7px; }
.replay-fighter .pixel-window { --sprite-side:64px; }
.replay-fighter .habitat-element { display:none; }
.replay-fighter strong { font-size:.92rem; display:block; }
.fighter-role { font-size:.68rem; color:#cee0c9; display:block; }
.replay-fighter progress { width:100%; height:12px; accent-color:#aade80; margin:4px 0 0; }
.replay-fighter [data-health-label] { display:block; font-size:.7rem; color:#e0eccf; font-variant-numeric:tabular-nums; }
.replay-fighter.knocked-out { opacity:.55; filter:grayscale(1); }
.battle-hit { animation:cc-hit .22s ease-out; }
@keyframes cc-hit { 30% { transform:translateX(4px); border-color:#ffe49c; } 70% { transform:translateX(-2px); } }
.replay-announcement { margin:14px 0; padding:12px 16px; background:#edf2e6; border-radius:9px; font-weight:700; min-height:50px; }
.replay-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.practice-builder button,.replay-controls button { border:1px solid #b0903b; border-radius:9px; padding:10px 16px; background:#efd079; color:#173e33; font-weight:800; box-shadow:0 2px 0 #c7ab61; }
.replay-controls .secondary-action { background:#f5f7ef; border-color:#bbcdbe; box-shadow:none; color:#265745; }
.practice-builder button:hover,.replay-controls button:hover { filter:brightness(.96); }
.replay-controls label { display:flex; align-items:center; gap:6px; font-size:.84rem; min-height:44px; }
.replay-controls input[type=checkbox] { width:20px; height:20px; accent-color:#256958; }
.replay-transcript { margin-top:16px; font-size:.88rem; }
.replay-transcript summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; font-weight:750; }
.replay-transcript li { margin-bottom:8px; }
.reduce-motion *, .reduce-motion .battle-hit { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:900px) { .practice-hero { grid-template-columns:1fr; } .hero-creatures { max-width:450px; margin:auto; width:100%; } .hero-creatures .pixel-habitat { min-height:155px; } .practice-teams { grid-template-columns:1fr; } }
@media(max-width:540px) { .practice-hero { padding:22px; } .hero-creatures .pixel-window { --sprite-side:96px; } .practice-builder,.replay-panel { padding:14px; } .training-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .training-card .pixel-window { --sprite-side:96px; } .replay-arena { grid-template-columns:1fr; gap:14px; padding:12px; } .creature-card .creature-art { width:100%; min-width:0; height:170px; } .practice-start { align-items:stretch; flex-direction:column; } .replay-controls button { flex:1 0 40%; } }