@font-face{font-family:InkHand;src:url('/fonts/caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root{font-family:'Golos Text',sans-serif;color:#243a48;background:#e9e4d9}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #243a4828;background:transparent;border-radius:9px;min-height:44px;padding:10px 15px}button:hover{background:#243a480b}button:focus-visible,input:focus-visible{outline:3px solid #c76940;outline-offset:3px}header{padding:16px 28px;display:flex;gap:10px;align-items:center;background:#f7f4ec;border-bottom:1px solid #243a4820}.brand{display:flex;gap:12px;align-items:center;font-size:27px}.brand span{font-family:Literata,Georgia,serif;font-size:21px}.brand small{display:block;font:9px 'Golos Text',sans-serif;letter-spacing:2px;margin-top:4px}.stats{margin-left:auto;display:flex;gap:30px;font-size:12px}.stats b{display:block;font-size:20px;margin-top:4px}.stats span{min-width:60px}main{position:relative;flex:1;min-height:0;margin:18px 24px 0;border:1px solid #cfc9ba;box-shadow:0 6px 25px #3035260b;background:#faf7ee;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.paper-label{position:absolute;left:24px;top:18px;font-size:9px;letter-spacing:2px;color:#87918d;pointer-events:none}#toast{position:absolute;top:45px;left:50%;transform:translateX(-50%);background:#243a48;color:#fff;padding:10px 20px;border-radius:25px;opacity:0;pointer-events:none;transition:opacity .2s;font-size:13px;white-space:nowrap}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#faf7eef2;text-align:center;padding:20px;overflow:auto}.eyebrow{font-size:10px;letter-spacing:3px;color:#a15d40}h1{font:600 clamp(34px,5vw,65px)/1.1 Literata,Georgia,serif;margin:20px 0 10px}h1 em{color:#bc6244}p{font-size:14px;line-height:1.7;color:#6b7478}.instructions{display:flex;gap:35px;margin:15px 0 25px;font-size:28px}.instructions b{display:block;font-size:12px;margin:6px}.instructions small{display:block;font-size:11px;color:#6b7478}.primary{background:#243a48;color:#fff;padding:15px 30px;border:none}.primary:hover{background:#36586a}.hint{margin-top:15px;font-size:11px;color:#78817e}footer{display:flex;align-items:center;gap:25px;padding:14px 24px 18px}.tools{display:flex;gap:8px}.tools button{font-size:22px;display:flex;align-items:center;gap:9px}.tools span{font-size:13px}.tools .active{background:#243a48;color:white}kbd{font:10px inherit;opacity:.5}.ink{flex:1;max-width:290px;margin:auto}.ink label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-bottom:7px}.ink b{font-weight:400}.track{height:7px;background:#d5d6cd;border-radius:5px;overflow:hidden}#inkbar{height:100%;background:#366b77;transition:width .1s}.pen{font-size:12px;display:flex;align-items:center;gap:7px;white-space:nowrap}input{accent-color:#243a48;width:18px;height:18px}@media(max-width:720px){header{padding:10px 12px}.brand span{font-size:15px}.brand small{display:none}.stats{gap:10px}.stats span{min-width:35px;font-size:10px}.stats b{font-size:15px}header button{padding:7px;min-width:36px}main{margin:8px 8px 0}footer{gap:9px;padding:10px 8px;flex-wrap:wrap}.tools button{padding:8px 10px}.tools span{font-size:11px}kbd{display:none}.ink{min-width:90px}.pen{font-size:11px}.instructions{gap:15px}.instructions small{max-width:95px}.paper-label{font-size:8px}h1{margin:12px 0}p{margin:8px}.instructions{margin:8px 0 16px}}@media(max-height:550px){h1{font-size:32px;margin:8px}p{margin:4px}.instructions{margin:5px 0 12px}.hint{margin-top:8px}header{padding:8px 18px}footer{padding:8px 18px}.eyebrow{font-size:9px}}

.health-stat{min-width:125px!important}.health-track{display:block;height:6px;background:#dcd8cf;border-radius:4px;margin-top:5px;overflow:hidden}#healthbar{display:block;height:100%;width:100%;background:#568573;transition:width .2s,background .2s}.spellbook{position:absolute;right:18px;top:20px;pointer-events:none;display:grid;gap:7px;color:#7a8178;background:#faf7eedb;padding:14px;border:1px dashed #a5ad9b;transform:rotate(1deg);font-size:11px}.spellbook>b{font:italic 16px Literata,Georgia,serif;color:#536b66}.spellbook span{font-weight:600;color:#466c65;margin-top:5px}.spellbook small{font-size:10px;line-height:1.6}@media(max-width:900px){.spellbook{top:auto;bottom:14px;right:14px;padding:8px;font-size:10px;gap:3px}.spellbook small{display:none}.spellbook>b{font-size:12px}.health-stat{min-width:90px!important}.tools{gap:3px}.tools button{padding:8px}.tools span{font-size:11px}footer{gap:10px}}

[hidden]{display:none!important}.mode-grid{display:flex;gap:12px;margin:15px 0}.mode-grid button{background:#f2efe3;text-align:left;max-width:230px;padding:18px;border:1px solid #b9c6b6}.mode-grid button:hover{border-color:#47766d;background:#e4ebdf}.mode-grid strong{display:block;font-size:14px}.mode-grid small{display:block;font-size:11px;color:#6b7478;margin-top:9px;line-height:1.5}.join{display:flex;gap:9px;margin:8px}.join input{width:155px;height:44px;border:1px solid #b9c6b6;background:#faf7ee;border-radius:8px;padding:10px;font:14px 'Golos Text',sans-serif;text-transform:uppercase}#room-panel{position:absolute;inset:0;background:#faf7eef5;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;text-align:center;z-index:4}#room-panel h2{font:600 32px Literata,Georgia,serif;margin:16px 0 8px}#room-code{font-size:42px;letter-spacing:9px;margin:15px}#room-message{max-width:420px}.room-actions{display:flex;gap:10px}#resume-room{margin:8px}#toast{z-index:6}.tools{gap:4px}.tools button{padding:9px 11px}.spellbook{z-index:1}#overlay{z-index:3}.hint{max-width:500px}#room-status{user-select:all}.spellbook small{display:block!important}@media(max-width:900px){.spellbook{max-width:175px;opacity:.85}.spellbook small{font-size:9px}.tools button{padding:7px}.tools span{font-size:10px}.mode-grid{gap:7px}.mode-grid button{padding:12px;max-width:190px}.mode-grid strong{font-size:12px}footer{flex-wrap:wrap}.ink{max-width:none;min-width:100px}}@media(max-width:560px){.mode-grid{flex-direction:column;width:100%;max-width:320px;margin:8px}.mode-grid button{max-width:none;padding:9px 12px}.mode-grid small{margin-top:4px}#overlay h1{font-size:30px}#overlay p{font-size:12px}.spellbook{padding:6px;max-width:135px}.spellbook small{display:none!important}.stats{gap:7px}.brand span{font-size:13px}.health-stat{min-width:75px!important}.tools{width:100%;justify-content:space-between}.tools button{flex:1;justify-content:center}.tools span{font-size:10px}header{gap:5px}.stats span{min-width:28px}#room-panel h2{font-size:25px}}@media(max-height:600px){.mode-grid{margin:6px}.mode-grid button{padding:10px}.join{margin:4px}#overlay h1{font-size:32px}.spellbook{top:auto;bottom:12px}.spellbook small{display:none!important}}

details.spellbook{display:block;pointer-events:auto;top:18px;bottom:auto;max-width:230px}details.spellbook summary{cursor:pointer;font:italic 15px Literata,Georgia,serif;list-style:none;color:#47766d}details.spellbook[open]>span{display:block;margin:10px 0 4px}details.spellbook[open]>small{display:block!important;margin-bottom:6px}details.spellbook:not([open])>small,details.spellbook:not([open])>span{display:none!important}@media(max-width:900px){details.spellbook{top:16px;right:12px;max-width:180px}details.spellbook summary{font-size:12px}details.spellbook[open]{background:#faf7eef5;opacity:1}}@media(max-width:560px){details.spellbook{top:auto;bottom:12px}}

details.spellbook[open]{max-height:80%;overflow-y:auto}.tools button{gap:5px;padding:8px}.tools span{font-size:11px}#inkrate{font-size:9px;letter-spacing:0}@media(max-width:1100px){footer .tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;gap:4px}footer .tools button{justify-content:center;padding:7px 4px;gap:4px}.tools kbd{display:none}footer{padding:10px 18px;gap:9px;flex-wrap:wrap}.ink{margin:0;max-width:unset;flex:1}.pen{margin-left:auto}.tools span{font-size:10px}}@media(max-width:560px){footer .tools button{flex-direction:column;font-size:20px;gap:0;min-height:48px}.tools span{font-size:9px}footer{padding:7px 8px}details.spellbook[open]{max-height:85%}}

.fog-setting{display:flex;align-items:center;gap:8px;margin:8px;font-size:13px}.fog-setting small{font-size:10px;color:#78817e}.map-controls{position:absolute;bottom:14px;left:16px;display:flex;align-items:center;gap:5px;z-index:2;background:#faf7eee8;padding:4px;border:1px solid #b7bba7;border-radius:10px}.map-controls button{min-height:36px;width:36px;padding:5px;font-size:20px}.map-controls button.active{background:#243a48;color:white}#map-coordinates{font-size:10px;padding:0 7px}#minimap{position:absolute;right:16px;bottom:14px;width:180px;height:120px;border:1px solid #9fa99c;background:#e5e4d8;z-index:2;cursor:crosshair}#room-qr{display:block;background:white;padding:6px;border:1px solid #b7bba7;border-radius:10px;margin:5px auto}#room-code{font-size:30px;margin:8px}#room-panel{overflow:auto}#room-panel h2{font-size:26px}#qr-hint{margin:5px 0 12px}.tools{grid-template-columns:repeat(5,minmax(0,1fr))!important}#toast{max-width:calc(100% - 28px);white-space:normal;text-align:center}.paper-label{z-index:2;background:#faf7eec9;padding:5px;border-radius:5px}#overlay{background:#faf7eefb}.fog-setting input{flex-shrink:0}@media(max-width:560px){.fog-setting{flex-wrap:wrap;justify-content:center}.fog-setting small{width:100%}#minimap{width:120px;height:80px;right:8px;bottom:8px}.map-controls{bottom:8px;left:8px;gap:2px}.map-controls button{width:30px;min-height:32px}#map-coordinates{display:none}#room-panel{justify-content:flex-start;padding-top:15px}#room-panel p{font-size:12px}#room-qr{width:135px;height:135px}}

/* One locally hosted Cyrillic handwriting face for the whole notebook. */
body,button,input,select,textarea,kbd,summary,.brand span,.brand small,h1,h2,.spellbook summary,.eyebrow{font-family:InkHand,'Segoe Print','Comic Sans MS',cursive!important}body{font-size:21px}button{font-size:21px;border-radius:7px 13px 8px 12px / 12px 7px 14px 6px}header{padding-top:11px;padding-bottom:11px}.brand span{font-size:30px}.brand small{font-size:15px;letter-spacing:.4px}.stats{font-size:18px}.stats b{font-size:28px;line-height:1.05}.stats span{min-width:65px}.eyebrow{font-size:19px;letter-spacing:1px}h1{font-size:clamp(44px,5.7vw,76px);font-weight:700}h1 em{font-style:normal}p{font-size:22px;line-height:1.3}.mode-grid button{padding:12px 16px;border-radius:9px 5px 12px 7px}.mode-grid strong{font-size:23px}.mode-grid small{font-size:18px;line-height:1.1}.mode-grid button:nth-child(1){transform:rotate(-.6deg)}.mode-grid button:nth-child(3){transform:rotate(.5deg)}.hint{font-size:17px}.fog-setting{font-size:21px}.fog-setting small{font-size:16px}.join input{font-size:22px}.paper-label{font-size:15px;letter-spacing:.5px}.tools span{font-size:20px}.tools button{font-size:25px}.tools kbd{font-size:15px}.ink label,#inkrate{font-size:17px;letter-spacing:0}.pen{font-size:20px}.spellbook{font-size:19px;max-width:280px!important}.spellbook summary{font-size:23px!important}.spellbook small{font-size:18px;line-height:1.15}.spellbook span{font-size:20px}#toast{font-size:22px;line-height:1.15}#map-coordinates{font-size:16px}#room-panel h2{font-size:37px}#room-code{font-size:38px;letter-spacing:5px}.join{margin-top:5px}.health-stat{min-width:115px!important}@media(max-width:1100px){.tools span{font-size:19px}.brand span{font-size:25px}.brand small{font-size:13px}.stats{gap:18px}.mode-grid strong{font-size:21px}.mode-grid small{font-size:17px}}@media(max-width:720px){.brand span{font-size:22px}.stats{font-size:16px;gap:9px}.stats b{font-size:23px}.stats span{min-width:35px}.health-stat{min-width:95px!important}.mode-grid strong{font-size:20px}.mode-grid small{font-size:16px}.fog-setting small{font-size:15px}.paper-label{font-size:13px}.spellbook summary{font-size:19px!important}.pen{font-size:19px}.tools span{font-size:18px}}@media(max-width:560px){.brand span{font-size:19px}.stats{font-size:14px}.stats b{font-size:20px}.health-stat{min-width:80px!important}.mode-grid button{padding:7px 12px}#overlay h1{font-size:40px}#overlay p{font-size:18px}.mode-grid small{font-size:16px}#room-panel p{font-size:19px}.tools span{font-size:16px}#map-coordinates{display:none}}@media(max-height:650px){#overlay h1{font-size:38px;margin:6px}#overlay p{font-size:18px;margin:4px}.eyebrow{font-size:16px}.mode-grid strong{font-size:20px}.mode-grid small{font-size:16px}.fog-setting{margin:3px}.mode-grid{margin:5px 0}}

#overlay{justify-content:flex-start;padding:20px 18px}#overlay .eyebrow{margin-top:auto}#overlay>.hint:last-child{margin-bottom:auto}#overlay h1{line-height:1.02;margin:12px 0}#overlay p{margin:10px 0}.mode-grid{margin:12px 0}@media(max-height:900px){#overlay{padding:16px}#overlay .eyebrow{font-size:17px}#overlay h1{font-size:46px;margin:8px 0}#overlay p{font-size:20px;line-height:1.15;margin:6px 0}.mode-grid{margin:8px 0}.mode-grid button{padding:10px 12px}.mode-grid strong{font-size:20px;line-height:1.05}.mode-grid small{font-size:16px;line-height:1.1;margin-top:6px}.fog-setting{font-size:19px;margin:5px}.fog-setting small{font-size:15px}#overlay .hint{font-size:16px;margin-top:8px}}@media(max-height:650px){#overlay .eyebrow{font-size:14px}#overlay h1{font-size:35px;margin:5px}#overlay p{font-size:17px;margin:4px}.mode-grid{margin:5px}.mode-grid button{padding:7px 10px}.mode-grid strong{font-size:18px}.mode-grid small{font-size:15px}.fog-setting{margin:3px}.join button{padding:6px 12px}.join{margin:4px}}

.rune-diagram{display:block;width:100%;height:90px;color:#3b756d;overflow:visible}.rune-diagram path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.rune-diagram .thin{opacity:.4;stroke-width:2}.pen-stroke.frame{stroke-dasharray:450;animation:pen-outline 5s ease-in-out infinite}.pen-stroke.mark{stroke-dasharray:250;animation:pen-mark 5s ease-in-out infinite}.pen-stroke.last{stroke-dasharray:150;animation:pen-last 5s ease-in-out infinite}.stroke-number{font:700 18px InkHand;fill:#b15e4c}.start-dot{fill:#b15e4c}#visual-guide{display:grid;gap:9px;margin-top:12px}.guide-card{border-bottom:1px dashed #b8beac;padding-bottom:10px}.guide-card h4{font:700 24px InkHand;margin:0}.guide-card p{font-size:18px;margin:2px 0}.guide-card .rune-diagram{height:95px}details.spellbook[open]{max-width:285px!important}.tutorial-start{margin:8px 0;background:#e4ebde;border:1px dashed #698474;font-size:24px}.tutorial-start small{display:block;font-size:17px}#tutorial-panel{position:absolute;right:16px;top:66px;width:240px;z-index:3;background:#faf7eef2;border:1px dashed #66867a;border-radius:7px 14px 8px 11px;padding:12px;box-shadow:2px 4px 0 #526b6520}.tutorial-heading,.order-heading{display:flex;align-items:center;justify-content:space-between;font-size:19px}.tutorial-heading button,.order-heading button{min-height:28px;padding:0 7px;border:0}.tutorial-heading{color:#a46b42}#tutorial-panel h3{font:700 27px InkHand;margin:4px 0}#tutorial-panel p{font-size:20px;margin:5px 0;line-height:1.1}#tutorial-panel .rune-diagram{height:80px}#tutorial-camera{font-size:18px;width:100%;padding:5px;min-height:32px}#orders{position:absolute;left:16px;top:64px;width:225px;background:#faf7eef5;padding:10px;border:1px dashed #66867a;border-radius:12px 6px 11px 8px;z-index:3}.job-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.job-buttons button{display:flex;flex-direction:column;align-items:center;font-size:19px;padding:4px;min-height:56px}.job-buttons button.active{background:#d9e6d6;border-color:#47766d}.job-icon{width:44px;height:33px;display:block}.job-icon .rune-diagram{height:33px}.job-icon .stroke-number,.job-icon .start-dot{display:none}.job-icon path{animation:none!important;stroke-dasharray:none!important}#orders p{font-size:17px;line-height:1.1;margin:7px 0}#order-auto{font-size:18px;width:100%;padding:4px;min-height:32px}#squad{font-size:17px;width:auto;padding:0 8px}#squad.active{background:#3b756d;color:white}#tutorial-image:empty{display:none}@keyframes pen-outline{0%{stroke-dashoffset:450}28%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:450}}@keyframes pen-mark{0%,30%{stroke-dashoffset:250}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:250}}@keyframes pen-last{0%,55%{stroke-dashoffset:150}75%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:150}}@media(prefers-reduced-motion:reduce){.pen-stroke{animation:none!important;stroke-dasharray:none!important}}@media(max-height:900px){.tutorial-start{font-size:21px;padding:6px 16px;margin:5px 0}.tutorial-start small{font-size:15px}#overlay h1{font-size:40px}.mode-grid{margin:6px 0}#tutorial-panel .rune-diagram{height:65px}}@media(max-width:720px){#orders{left:8px;top:59px;width:185px}#tutorial-panel{right:8px;top:58px;width:200px;padding:9px}#tutorial-panel h3{font-size:23px}#tutorial-panel p{font-size:18px}.job-buttons button{font-size:17px}}@media(max-height:560px){#tutorial-panel,#orders{max-height:calc(100% - 110px);overflow:auto}#tutorial-panel .rune-diagram{height:52px}}

.pen-stroke.finish{stroke-dasharray:150;animation:pen-finish 5s ease-in-out infinite}@keyframes pen-finish{0%,72%{stroke-dashoffset:150}90%,95%{stroke-dashoffset:0}100%{stroke-dashoffset:150}}

/* The drawing guide stays above the map and its minimap. */
details.spellbook{z-index:5!important}details.spellbook[open]{background:#faf7eefc;opacity:1;box-shadow:0 5px 20px #243a4833}#select-units{font-size:17px;width:auto;padding:0 7px}#select-units.active{background:#3b756d;color:white}