:root{font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3b4037;background:#f7f0e5;--paper:#fffdf7;--ink:#3b4037;--line:#e4dccb;--accent:#536e43;--soft:#eaf0dc}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);padding:10px 14px;font-weight:650;touch-action:manipulation}button:hover{filter:brightness(.97)}button:disabled{opacity:.48;cursor:not-allowed}button.active{background:var(--soft);border-color:#71925d;box-shadow:inset 0 0 0 1px #71925d}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}header{max-width:1480px;margin:auto;display:flex;align-items:center;padding:16px 26px;gap:20px}.brand{display:flex;align-items:center;gap:10px;flex:1}.brand img{width:72px;height:72px;object-fit:contain}.brand h1{font-size:24px;margin:0;line-height:1.15;letter-spacing:-1px}.brand h1 span{display:block;font-size:11px;letter-spacing:3px;margin-top:5px}.brand small{font-size:12px;color:#7a7d6f}.wallet{background:#ffe8a6;padding:9px 25px;border-radius:20px;min-width:140px}.wallet small{display:block;font-size:10px;letter-spacing:1px}.wallet strong{font-size:24px}nav{display:flex;gap:7px}main{max-width:1480px;margin:auto;padding:0 26px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr);gap:20px}.arena,.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 7px 24px #4a4b3310;overflow:hidden}.arena-bar{display:flex;gap:12px;align-items:center;padding:12px 18px}.arena-bar b{flex:1}.arena-bar span{font-size:11px;letter-spacing:1px;color:#7b836e}.arena-bar button{padding:5px 12px}#canvas-wrap{background:#b5d69b;position:relative}canvas{display:block;width:100%;height:auto;touch-action:none;outline:none}.health{padding:12px 17px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;font-size:12px}.health progress{width:100%;height:10px;accent-color:#7ea454}.health #counts{grid-column:1/-1;color:#7b806f}#selection{padding:0 16px}#selection .actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}#selection button{padding:6px 9px;font-size:12px}#buffs{padding:0 16px;display:flex;gap:6px;flex-wrap:wrap}.pill{background:#e4f0f3;border-radius:10px;padding:3px 9px;font-size:12px}#spellbag{padding:8px 16px;display:flex;gap:7px;flex-wrap:wrap}#spellbag button{font-size:12px;padding:6px 9px}footer{display:flex;padding:12px 16px;gap:8px;border-top:1px solid var(--line)}footer .primary{flex:1}.castle-card{display:flex;gap:7px;align-items:center;padding:12px 14px;background:#f5f0df}.castle-card img{width:90px;height:90px;object-fit:contain}.castle-card div{flex:1}.castle-card h2{font-size:18px;margin:0}.castle-card p{font-size:12px;margin:4px 0;color:#7a7d6f}.castle-card button{font-size:12px;padding:9px}.tabs{display:flex;padding:12px 12px 5px;gap:5px}.tabs button{flex:1;padding:8px 4px;font-size:12px}.shop{max-height:590px;overflow:auto;padding:10px 14px 18px;overscroll-behavior:contain}.card{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px;margin-bottom:8px;background:#fff}.card img{width:58px;height:58px;object-fit:contain}.card .info{flex:1;min-width:0}.card b{font-size:14px}.card p{margin:3px 0;font-size:11px;line-height:1.4;color:#777e6c}.card button{font-size:12px;white-space:nowrap;padding:8px 10px}.card.locked{opacity:.6}.shop h3{font-size:13px;margin:15px 0 8px}.hint{font-size:12px;color:#7c806f}.toggle{display:flex;gap:10px;align-items:center;padding:10px 3px;font-size:13px}.toggle input{width:20px;height:20px;accent-color:var(--accent)}.status{max-width:1480px;margin:12px auto;padding:0 30px;font-size:11px;color:#919485;display:flex;justify-content:space-between;gap:12px}dialog{border:1px solid var(--line);border-radius:24px;padding:26px;background:var(--paper);color:var(--ink);max-width:540px;width:calc(100% - 30px);max-height:85vh;overflow:auto;box-shadow:0 20px 80px #252c3440}dialog::backdrop{background:#17212288;backdrop-filter:blur(5px)}dialog h2{margin:0 0 15px}dialog h3{font-size:15px;margin:15px 0 7px}dialog p{font-size:14px;color:#727865}dialog .buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}dialog button{margin-bottom:5px}dialog .hero{width:120px;display:block;margin:auto}.badge{padding:10px;background:var(--soft);border-radius:12px;margin:6px 0}.danger{color:#a64141}#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#303a2d;color:white;border-radius:16px;padding:12px 22px;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .15s;z-index:99}#toast.show{opacity:1}body.iron{--paper:#202b36;--ink:#e3e8e9;--line:#3d4a58;--accent:#c68b49;--soft:#354535;background:#141e28;color:var(--ink)}.iron .card{background:#25323d}.iron .castle-card{background:#2d3540}.iron #canvas-wrap{background:#43534c}.iron .wallet{background:#8a6639;color:#fff}body.iron .hint,.iron .card p,.iron .castle-card p{color:#a7b3b8}.iron dialog p{color:#bdc6c9}@media(min-width:1500px){main{grid-template-columns:minmax(0,1.8fr) minmax(350px,1fr)}}@media(max-width:850px){header{padding:12px;gap:8px}.brand img{width:50px;height:50px}.brand h1{font-size:18px}.brand small{display:none}.wallet{min-width:90px;padding:6px 12px}.wallet strong{font-size:19px}nav button{padding:8px}main{padding:0 10px;grid-template-columns:1fr;gap:12px}.arena,.panel{border-radius:18px}.shop{max-height:380px}.status{padding:0 14px;font-size:10px}footer{position:sticky;bottom:0;background:var(--paper)}.castle-card img{width:65px;height:65px}}

@media(min-width:851px){.arena{align-self:start}#canvas-wrap{display:flex;justify-content:center}canvas{width:auto;max-width:100%;max-height:calc(100dvh -350px)}.shop{max-height:calc(100dvh -290px)}}

/* Larger type and a denser workspace: use the screen for the game, not outer margins. */
:root{font-size:18px}header,main,.status{max-width:2100px;width:calc(100% - 28px);padding-left:0;padding-right:0}header{padding-top:12px;padding-bottom:12px;gap:14px}.brand h1{font-size:28px}.brand small{font-size:15px}.brand h1 span{font-size:13px}.wallet small{font-size:13px}.wallet strong{font-size:28px}main{gap:12px;grid-template-columns:minmax(0,1.45fr) minmax(440px,1fr)}.arena,.panel{border-radius:18px}.arena-bar{font-size:20px;padding:10px 14px}.arena-bar span{font-size:15px}.health{font-size:16px;padding:9px 14px}.health progress{height:14px}.hint{font-size:15px}.pill{font-size:15px}#selection{padding:0 14px}#selection small,#spellbag small{font-size:15px}#selection button,#spellbag button{font-size:15px}#selection .actions{margin:5px 0}#spellbag{padding:5px 14px}footer{padding:10px 14px;position:sticky;bottom:0;z-index:3;background:var(--paper)}footer button{font-size:18px}.castle-card{padding:10px;gap:5px}.castle-card img{width:76px;height:76px}.castle-card h2{font-size:22px}.castle-card p{font-size:16px}.castle-card button{font-size:16px}.tabs{padding:8px 9px 4px}.tabs button{font-size:17px;padding:9px 5px}.shop{padding:7px 10px 12px}.card{padding:8px;gap:7px;margin-bottom:7px;border-radius:13px}.card img{width:70px;height:70px}.card b{font-size:18px}.card p{font-size:15px;line-height:1.4}.card button{font-size:16px;padding:9px 10px}.shop h3{font-size:18px;margin:12px 0 7px}.toggle{font-size:17px;padding:8px 2px}.status{font-size:13px;margin-top:8px}dialog{max-width:760px;padding:24px;font-size:18px}dialog p{font-size:17px}dialog h3{font-size:19px}dialog .hint{font-size:15px}dialog label{display:block;font-size:17px;margin:12px 0 6px}dialog input{display:block;width:100%;margin-top:5px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:18px}dialog form{margin:14px 0}dialog form button{margin-top:8px}dialog button{font-size:17px}.google-button{width:100%;padding:14px;background:#fff;color:#343a36}#online-status{white-space:pre-wrap;color:#93612d}.account-email{font-weight:700}.cloud-summary,.invite-code{padding:14px;background:var(--soft);border-radius:12px}.invite-code small{display:block}.invite-code strong{font-size:32px;letter-spacing:5px;margin-right:16px}.friend-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.friend-row p{font-size:15px;margin:3px 0}.friend-row>div:last-child{display:flex;gap:5px;flex-wrap:wrap}.friend-row button{font-size:15px;padding:8px}a{color:var(--accent)}
@media(min-width:851px){canvas{width:100%;height:auto;max-height:none}.shop{max-height:calc(100dvh -245px)}}
@media(min-width:1900px){.shop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.shop>.hint,.shop>h3,.shop>.toggle,.shop>button{grid-column:1/-1}.card{margin:0;align-items:center}.card img{width:62px;height:62px}.card b{font-size:17px}.card p{font-size:15px}.card button{padding:8px;font-size:15px}}
@media(max-width:1000px){main{grid-template-columns:1fr}header,main,.status{width:calc(100% - 20px)}header{flex-wrap:wrap}.brand{min-width:180px}.brand img{width:50px;height:50px}.brand h1{font-size:23px}.brand small{display:none}nav{gap:5px}nav button{font-size:15px;padding:8px 10px}.wallet{min-width:100px;padding:7px 12px}.wallet strong{font-size:24px}.shop{max-height:440px;display:block}.card{margin-bottom:7px}.tabs button{font-size:16px}.status{flex-wrap:wrap}.friend-row{align-items:flex-start}}


.card[data-terrain-tool]{cursor:pointer}.card[data-terrain-tool]:hover,.card[data-terrain-tool]:focus-visible{outline:2px solid var(--accent,#648148);outline-offset:-2px}.card[data-terrain-tool].active{box-shadow:inset 0 0 0 2px var(--accent,#648148)}

.shop{max-height:none;overflow:visible;overscroll-behavior:auto}.panel{align-self:start}

dialog.achievement-dialog{max-width:1160px}.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.achievement-card{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px}.achievement-card h3{font-size:22px;margin:0 0 8px}.achievement-card h4{font-size:18px;margin:16px 0 5px}.achievement-card p{font-size:17px;line-height:1.65;margin:6px 0;color:var(--ink)}.achievement-state{font-weight:700}.achievement-levels{list-style:none;padding:0;margin:14px 0}.achievement-levels li{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:16px}.achievement-levels .earned{color:var(--accent)}.achievement-next{font-weight:700;border-top:1px solid var(--line);padding-top:10px}@media(max-width:760px){.achievement-grid{grid-template-columns:1fr}.achievement-card{padding:14px}}

/* Large readable artwork: dimensions include the transparent sprite padding. */
.card img{width:112px;height:112px;flex:0 0 112px;object-fit:contain}.card{min-height:126px;padding:10px;gap:12px}.castle-card img{width:108px;height:108px;flex:0 0 108px}.brand img{width:82px;height:82px}.card .info{line-height:1.5}.card b{font-size:19px}.card p{font-size:16px}@media(min-width:1900px){.card img{width:112px;height:112px}.card b{font-size:18px}}@media(max-width:600px){.card img{width:96px;height:96px;flex-basis:96px}.card{gap:8px;min-height:110px}.card b{font-size:17px}.card p{font-size:15px}.brand img{width:56px;height:56px}}

footer #speed{min-width:76px;flex:0 0 auto}footer #start{min-width:130px}footer #start[aria-pressed="true"]{background:#a87935;border-color:#a87935}

.card[data-card]{cursor:pointer}.card[data-card]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.card[data-card]:has(button:disabled){cursor:not-allowed}

nav{flex-wrap:wrap}nav #android-app{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:13px;padding:10px 14px;font-weight:700;background:var(--accent);color:#fff;border:1px solid var(--accent)}nav #android-app:hover{filter:brightness(1.08)}@media(max-width:1000px){nav #android-app{font-size:15px;padding:8px 10px}}