:root{--navy-950:#101d2a;--navy-900:#172739;--navy-800:#203a50;--navy-700:#2b4c64;--paper:#f3eadb;--paper-light:#fffaf0;--ink:#20242a;--orange:#ef8d5b;--orange-dark:#d96d3b;--gold:#e9bd62;--red:#d95451;--sans:"DM Sans",sans-serif;--serif:"DM Serif Display",Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.skip-link{position:fixed;z-index:100;top:-5rem;left:1rem;padding:.8rem 1rem;background:var(--gold)}.skip-link:focus{top:0}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;width:min(1440px,calc(100% - 96px));margin:0 auto;border-bottom:1px solid rgba(32,36,42,.18)}.brand{display:inline-flex;align-items:center;gap:.75rem}.brand-mark{display:grid;grid-template-columns:1fr 1fr;place-items:center;width:44px;height:44px;border:1px solid;border-radius:50%;font-size:.85rem;transform:rotate(-7deg)}.brand-mark span:last-child{color:var(--red)}.brand-name{font-size:.72rem;font-weight:700;line-height:1.05;letter-spacing:.12em;text-transform:uppercase}.site-header nav{display:flex;gap:2rem;font-size:.82rem}.site-header nav a{border-bottom:1px solid transparent}.site-header nav a:hover{border-color:currentColor}.game-intro{display:flex;align-items:end;justify-content:space-between;gap:4rem;width:min(1440px,calc(100% - 96px));margin:0 auto;padding:72px 0 42px}.eyebrow{display:flex;align-items:center;gap:.65rem;margin:0 0 1rem;color:#6f6a65;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.eyebrow span{width:26px;height:1px;background:var(--orange)}.game-intro h1{margin:0;color:var(--navy-900);font-family:var(--serif);font-size:clamp(4rem,7vw,7.5rem);font-weight:400;line-height:.8;letter-spacing:-.04em}.game-intro>p{max-width:450px;margin:0;color:#69635f;line-height:1.7}
.game-shell{position:relative;background:var(--navy-900);color:var(--paper-light)}.game-topbar{min-height:82px;display:flex;align-items:center;gap:1.5rem;padding:0 max(48px,calc((100vw - 1440px)/2));border-bottom:1px solid rgba(255,255,255,.13);background:var(--navy-950)}.top-stat{display:flex;align-items:center;gap:.45rem;padding-right:1.4rem;border-right:1px solid rgba(255,255,255,.15)}.top-stat span{color:#91a8ba;font-size:.61rem;letter-spacing:.1em;text-transform:uppercase}.top-stat strong{min-width:28px;color:#fff;font-family:var(--serif);font-size:1.18rem;font-weight:400}.game-topbar>p{flex:1;margin:0;color:#b8c7d2;font-size:.72rem;text-align:center}.top-actions{display:flex;gap:.5rem}.top-actions button{padding:.58rem .85rem;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:transparent;color:#d6e0e7;font-size:.68rem;cursor:pointer}.top-actions button.is-active{border-color:var(--orange);background:var(--orange);color:#17202a}.battlefield{position:relative;display:grid;grid-template-columns:1fr 360px 1fr;grid-template-rows:1fr;align-items:center;min-height:660px;overflow:hidden;background-color:var(--navy-800);background-image:radial-gradient(circle at center,rgba(239,141,91,.1),transparent 28%),url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}.battlefield::before{content:"";position:absolute;width:490px;height:490px;left:50%;top:50%;border:1px solid rgba(255,255,255,.1);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 65px rgba(16,29,42,.08),inset 0 0 0 66px rgba(255,255,255,.04)}.player-zone{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2.5rem}.player-heading{display:flex;align-items:center;gap:.7rem}.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--serif);font-size:1.1rem}.avatar.computer{background:#8198ad}.avatar.human{background:var(--orange);color:#17202a}.player-heading div{display:flex;flex-direction:column}.player-heading div span{color:#9db0bf;font-size:.58rem;letter-spacing:.11em;text-transform:uppercase}.player-heading div strong{font-size:.82rem}.player-heading>b{margin-left:1rem;padding:.4rem .65rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#b5c4cf;font-size:.62rem;font-weight:500;text-transform:uppercase}.player-heading>b span{color:#fff;font-size:.8rem}.deck-area{display:flex;align-items:center;gap:3rem;min-height:190px}.deck-stack,.played-card{position:relative;width:108px;height:150px;border:1px dashed rgba(255,255,255,.22);border-radius:9px}.deck-stack.has-cards{border:3px solid var(--paper-light);background:var(--orange);box-shadow:-7px 6px 0 #be633b,-13px 11px 0 rgba(9,20,29,.38)}.deck-stack.has-cards::before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.72);border-radius:5px;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(255,255,255,.15) 6px 7px)}.deck-stack.has-cards::after{content:"W";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.8);font-family:var(--serif);font-size:1.4rem}.card{position:absolute;inset:0;border-radius:9px;background:var(--paper-light);color:#17202a;box-shadow:0 10px 22px rgba(0,0,0,.28);animation:card-flip 230ms ease-out}.card.red{color:var(--red)}.card-rank{position:absolute;left:10px;top:9px;font-family:var(--serif);font-size:1.6rem;line-height:.72;text-align:center}.card-rank small{font-size:.85rem}.card-suit{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem}@keyframes card-flip{from{opacity:.3;transform:rotateY(80deg) scale(.9)}to{opacity:1;transform:rotateY(0) scale(1)}}.battle-center{position:relative;z-index:5;padding:2rem;text-align:center}.lesson-label{margin:0;color:var(--orange);font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.battle-center h2{margin:.7rem 0;font-family:var(--serif);font-size:2.3rem;font-weight:400}.battle-center>p:not(.lesson-label){margin:.5rem auto;color:#b8c8d3;font-size:.75rem;line-height:1.55}.rank-guide{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:1.3rem 0;color:#8099aa;font-size:.5rem;text-transform:uppercase}.rank-guide b{color:#e7edf0;font-size:.58rem;letter-spacing:.08em}.war-pot{display:inline-flex;gap:.55rem;align-items:center;padding:.42rem .7rem;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#91a8b8;font-size:.58rem;text-transform:uppercase}.war-pot strong{color:var(--gold);font-size:.8rem}.battle-button{display:flex;justify-content:space-between;gap:3rem;min-width:210px;margin:1.2rem auto 0;padding:1rem 1.15rem;border:0;border-radius:999px;background:var(--orange);color:#182433;font-weight:700;cursor:pointer;box-shadow:0 9px 20px rgba(0,0,0,.2)}.battle-button:hover{background:#f3a27a}.battle-button:disabled{opacity:.45;cursor:not-allowed}.war-lane{position:absolute;z-index:4;left:50%;display:flex;gap:7px;min-width:180px;transform:translateX(-50%)}.computer-war{top:95px}.human-war{bottom:95px}.war-back{width:36px;height:51px;border:2px solid var(--paper-light);border-radius:4px;background:var(--orange);box-shadow:0 5px 10px rgba(0,0,0,.24)}.war-back::after{content:"";display:block;margin:4px;height:calc(100% - 8px);border:1px solid rgba(255,255,255,.6);border-radius:2px}.battle-log{display:grid;grid-template-columns:180px 1fr;gap:2rem;min-height:120px;padding:26px max(48px,calc((100vw - 1200px)/2));background:var(--navy-950);border-top:1px solid rgba(255,255,255,.12)}.log-heading{display:flex;flex-direction:column;color:var(--orange);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.log-heading small{margin-top:.25rem;color:#738b9c;font-weight:400}.battle-log ol{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0;padding:0;list-style:none}.battle-log li{padding-left:1rem;border-left:1px solid rgba(255,255,255,.16);color:#a9bac6;font-size:.68rem;line-height:1.5}.battle-log li:first-child{color:#fff;border-color:var(--orange)}
.result-dialog{position:absolute;z-index:100;inset:82px 0 0;display:grid;place-items:center;padding:2rem;background:rgba(10,23,34,.88);backdrop-filter:blur(8px)}.result-dialog[hidden]{display:none}.result-card{width:min(520px,100%);padding:3rem;background:var(--paper);color:var(--ink);text-align:center}.result-card .eyebrow{justify-content:center}.result-mark{color:var(--orange-dark);font-size:2.5rem}.result-card h2{margin:.5rem 0 1rem;font-family:var(--serif);font-size:3rem;font-weight:400}.result-card>p:not(.eyebrow){color:#69635f;line-height:1.6}.result-card button{display:inline-flex;justify-content:space-between;gap:2rem;min-width:180px;padding:.9rem 1.1rem;border:0;border-radius:999px;background:var(--orange-dark);color:#fff;font-weight:700;cursor:pointer}.ad-section{padding:54px max(48px,calc((100vw - 1440px)/2));background:#e7ddcc;border-bottom:1px solid rgba(32,36,42,.13)}.ad-slot{width:min(970px,100%);min-height:120px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;gap:.25rem 2rem;margin:0 auto;padding:1.4rem 2rem;border:1px dashed rgba(32,36,42,.28);background:rgba(255,250,240,.42);color:#68736c}.ad-slot span{grid-column:1/-1;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.ad-slot strong{color:#46524b;font-family:var(--serif);font-size:1.35rem;font-weight:400}.ad-slot small{align-self:end;color:#7c867f;font-size:.66rem}.rules{display:grid;grid-template-columns:.9fr 2fr;gap:7rem;padding:130px max(48px,calc((100vw - 1440px)/2))}.section-label{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.section-label span,.rules-grid article>span{color:var(--orange-dark)}.section-label span{margin-right:.7rem}.rules-heading h2{margin:1.5rem 0 2rem;font-family:var(--serif);font-size:clamp(3rem,5vw,5rem);font-weight:400;line-height:.94;letter-spacing:-.035em}.rules-heading h2 em{color:var(--orange-dark);font-weight:400}.rules-heading>p{max-width:430px;color:#69635f;line-height:1.75}.rules-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(32,36,42,.2)}.rules-grid article{min-height:220px;padding:2rem;border-right:1px solid rgba(32,36,42,.2);border-bottom:1px solid rgba(32,36,42,.2)}.rules-grid article:nth-child(even){border-right:0}.rules-grid article>span{font-size:.68rem;font-weight:700}.rules-grid h3{margin:1.7rem 0 .7rem;font-family:var(--serif);font-size:1.65rem;font-weight:400}.rules-grid p{margin:0;color:#66615e;font-size:.88rem;line-height:1.7}.example{grid-column:1/-1;display:flex;align-items:center;gap:1rem;margin-top:80px;padding:2rem;background:#e4d9c6}.example-label{margin-right:auto;color:var(--orange-dark);font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.example-card{display:grid;place-items:center;width:64px;height:88px;border-radius:5px;background:var(--paper-light);font-family:var(--serif);font-size:1.5rem;box-shadow:0 5px 12px rgba(0,0,0,.12)}.example-card.red{color:var(--red)}.example-card small{font-size:.8rem}.example p{max-width:410px;margin:0 0 0 1rem;color:#625d59;font-size:.78rem;line-height:1.6}footer{display:flex;justify-content:space-between;gap:2rem;padding:32px max(48px,calc((100vw - 1440px)/2));background:var(--navy-950);color:#a6b6c1;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1000px){.battlefield{grid-template-columns:1fr 280px 1fr}.deck-area{gap:1rem}.deck-stack,.played-card{width:88px;height:122px}.battle-log ol{grid-template-columns:1fr 1fr}.rules{grid-template-columns:1fr;gap:4rem}.example{grid-column:1}}@media(max-width:760px){.site-header{width:calc(100% - 36px);height:78px}.site-header nav a:first-child{display:none}.game-intro{align-items:flex-start;flex-direction:column;gap:1.5rem;width:calc(100% - 36px);padding:55px 0 32px}.game-topbar{flex-wrap:wrap;justify-content:center;padding:14px 18px}.game-topbar>p{order:3;flex-basis:100%}.battlefield{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:720px;padding:32px 12px}.battle-center{grid-column:1/-1;grid-row:2;padding:1.5rem .4rem}.computer-zone{grid-column:1;grid-row:1}.human-zone{grid-column:2;grid-row:1}.player-heading{gap:.4rem}.player-heading>b{margin-left:0}.player-heading div{display:none}.deck-area{flex-direction:column-reverse;gap:.75rem}.computer-zone .deck-area{flex-direction:column}.war-lane{display:none}.battle-log{grid-template-columns:1fr;padding:24px 22px}.battle-log ol{grid-template-columns:1fr}.rules{padding:84px 22px}.rules-grid{grid-template-columns:1fr}.rules-grid article{min-height:auto;padding:1.5rem 0;border-right:0}.example{flex-wrap:wrap;margin-top:50px}.example-label{width:100%}.example p{max-width:none;margin:1rem 0 0}.ad-section{padding:34px 22px}.ad-slot{min-height:100px;padding:1.15rem}footer{align-items:flex-start;flex-direction:column;padding:32px 22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}