*{box-sizing:border-box}body{margin:0;background:#102a27;color:#f8efcc;font-family:monospace;overscroll-behavior:none;touch-action:none;height:100dvh;display:flex;flex-direction:column;align-items:center}button{font:700 14px monospace;color:#f8efcc;background:#1f4940;border:1px solid #6e8f69;padding:11px 16px;cursor:pointer;box-shadow:0 3px #071f1c}button:hover{background:#397050}button:focus-visible{outline:3px solid #f6d985}header{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:18px 24px}.brand{font-size:24px;font-weight:bold;letter-spacing:4px}.brand span{display:block;font-size:11px;letter-spacing:3px;color:#afc2a2;margin-top:5px}header button{font-size:12px;padding:9px;margin-left:8px}#stage{position:relative;width:min(calc(100vw - 48px),calc((100dvh - 155px)*1.6),1152px);aspect-ratio:1.6;border:4px solid #71936c;box-shadow:0 0 0 5px #071e1a,0 20px 50px #0008;background:#498350;overflow:hidden}canvas{width:100%;height:100%;image-rendering:pixelated;display:block}#location,#quest,#hint{position:absolute;background:#12342ded;border:1px solid #71936c;padding:8px 12px;font-size:12px;letter-spacing:1px;pointer-events:none}#location{top:14px;left:14px}#quest{top:51px;left:14px;color:#f5da91;max-width:85%}#hint{bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap}#hint:empty{display:none}#title{position:absolute;inset:0;background:linear-gradient(#0c2d2660,#082c26c9);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#title small{letter-spacing:3px;font-size:12px}h1{font-size:clamp(38px,7vw,90px);letter-spacing:8px;margin:14px 0 0;text-shadow:4px 4px #08271e,-2px -2px #d4b76a;color:#ffe5a3}#title p{font-size:24px;letter-spacing:5px;margin:0 0 30px}#title button{background:#e4bb63;color:#173a2e;padding:17px 24px;border:2px solid #ffe5a3;box-shadow:0 5px #6f5a34}#title aside{color:#c3d5af;line-height:1.9;margin-top:22px;font-size:12px}#dialog{position:absolute;bottom:16px;left:16px;right:16px;background:#12362ff5;border:3px double #f4d897;padding:16px 20px;box-shadow:0 5px #061c19;max-height:80%;overflow:auto}#speaker{color:#f9d477;letter-spacing:2px;font-size:14px}#speech{font-size:clamp(14px,1.5vw,19px);line-height:1.55;margin:12px 0;white-space:pre-line}#actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#actions button{background:#f1d48f;color:#153a2e;border-color:#ffebba}#inventory{position:absolute;inset:15px;background:#12362ffa;border:3px double #f4d897;padding:20px;overflow:auto}#inventory h2{color:#f5d685;margin-top:0}#inventory p,#objectives{font-size:15px;line-height:1.75}#end{position:absolute;top:8%;left:0;right:0;text-align:center;pointer-events:none}#end small,#end p{background:#12342dec;padding:8px;font-size:12px;letter-spacing:2px}#end h1{font-size:44px;margin:8px}footer{display:flex;justify-content:space-between;width:min(1152px,calc(100% - 48px));padding:22px 0;font-size:12px;color:#a9c3ac}footer i{font-style:normal;color:#6d9a83}#party{letter-spacing:3px}#party b{color:#e9c779}#touch{display:none}[hidden]{display:none!important}
@media(pointer:coarse),(max-width:700px){header{padding:12px 15px}.brand{font-size:20px}header button{padding:8px;font-size:11px}#stage{width:calc(100vw - 16px);flex:1;aspect-ratio:auto;min-height:230px;max-height:calc(100dvh - 240px)}canvas{object-fit:cover}#touch{height:140px;display:flex;width:100%;justify-content:space-between;align-items:center;padding:5px 30px 10px}#a{border-radius:50%;width:66px;height:66px;font-size:25px;background:#d3ad5a;color:#193c30;border:4px solid #f0d591}footer{padding:10px 0;justify-content:center}footer>span:first-child{display:none}#title h1{font-size:46px}#title p{font-size:20px;margin-bottom:20px}#title small{font-size:10px;letter-spacing:1px}#title aside{margin-top:14px}#location{top:8px;left:8px;font-size:10px}#quest{top:38px;left:8px;font-size:10px;padding:6px}#dialog{left:8px;right:8px;bottom:8px;padding:12px}#speech{font-size:14px}#actions button{padding:10px;font-size:12px}#end h1{font-size:32px}#end p{font-size:10px}#hint{font-size:10px} }
@media(max-height:500px) and (orientation:landscape){header{padding:6px 16px}#stage{width:calc(100vw - 190px);max-height:none;height:calc(100dvh - 90px)}#touch{position:absolute;bottom:5px;pointer-events:none;height:130px;padding:8px}#touch button{pointer-events:auto}#a{width:52px;height:52px}footer{padding:8px}#title aside{display:none}}

#title{background:#041322ed;gap:12px;padding:14px}#title .start-logo{display:block;width:auto;max-width:90%;height:62%;object-fit:contain}#title aside{margin-top:0}#title button{padding:12px 20px}#heroes{position:absolute;inset:0;z-index:5;background:#071626f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center}#heroes img{min-height:0;max-height:70%;max-width:100%;object-fit:contain;background:white}#heroes small,#heroes strong{color:#ffe5a3;font-size:14px;letter-spacing:2px}#heroes button{flex-shrink:0}@media(max-height:500px){#title{gap:6px;padding:6px}#title .start-logo{height:65%}#heroes{gap:6px;padding:8px}#heroes img{max-height:60%}#heroes small,#heroes strong{font-size:11px}}

header:has(#exitfootball:not([hidden])) .brand{display:none}header:has(#exitfootball:not([hidden])){justify-content:center}#party{letter-spacing:1px}#exitfootball{color:#ffe4a0}@media(max-width:700px){#party{font-size:11px}header:has(#exitfootball:not([hidden])) button{font-size:11px;padding:8px}}

#counter{font-size:10px;color:#dac98d;text-align:center;padding:0 8px 8px}header{padding:12px 18px}.brand span{font-size:9px;letter-spacing:1px}#title h1{font-size:clamp(30px,6vw,65px);letter-spacing:4px}#title .subtitle{font-size:clamp(12px,2vw,18px);letter-spacing:2px;margin:0 0 8px}#title label{font-size:12px}#leader{font:700 18px monospace;background:#203d32;color:#ffe5a3;padding:10px 24px;border:2px solid #cbb273}#joystick{position:relative;width:108px;height:108px;border-radius:50%;background:#57796455;border:2px solid #99b39b88;touch-action:none;pointer-events:auto}#stick{position:absolute;left:32px;top:32px;width:40px;height:40px;border-radius:50%;background:#dfc37999;border:2px solid #f4dd9daa;pointer-events:none}#gameactions{display:flex;align-items:center;gap:8px}#defend,#swap{font-size:10px;padding:12px 6px;max-width:70px}#touch{padding-left:20px;padding-right:15px}#heroes canvas{width:100%;height:auto;max-height:40%;object-fit:contain;background:transparent}#party{letter-spacing:0;font-size:10px}#dialog{z-index:10}#inventory{z-index:11}#hint{max-width:94%;white-space:normal;text-align:center}#a{font-size:12px}header button{margin-left:3px}#title{overflow:auto}#title aside{font-size:10px}@media(max-height:500px){#counter{display:none}#title h1{font-size:26px;margin:0}#title .subtitle{font-size:10px}#title label{font-size:10px}#leader{font-size:14px;padding:4px}#title button{padding:6px}#joystick{width:86px;height:86px}#stick{left:21px;top:21px}#gameactions{pointer-events:auto;max-width:95px;flex-wrap:wrap}#a{width:44px;height:44px}#defend,#swap{font-size:9px;padding:8px 4px}}

#title .start-logo{height:45%;max-width:90%}#heroes img{background:transparent;max-height:72%}#title{gap:8px}@media(max-height:500px){#title .start-logo{height:40%}}

#portraits{display:flex;justify-content:center;gap:8px;width:min(100%,510px)}#title .hero-choice{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:5px;padding:5px 4px 9px;background:#15352d;color:#f8eac5;border:2px solid #607c62;box-shadow:0 3px #051e19;font-size:13px}#title .hero-choice[aria-pressed="true"]{border-color:#ffe190;background:#45633e;color:#fff3c2;box-shadow:0 0 0 2px #ae8244,0 4px #061f19}#portraits canvas{width:72px;height:84px;max-width:100%;object-fit:contain;image-rendering:pixelated}#title .start-logo{height:36%}#title aside{display:none}#choose-label{font-size:12px;letter-spacing:1px}@media(max-width:700px){#portraits{gap:5px}#title .hero-choice{font-size:11px;padding:3px 2px 8px}#portraits canvas{height:74px}#title{padding:10px;gap:12px}#title .start-logo{height:37%}}@media(max-height:500px){#title{gap:5px}#title .start-logo{height:26%}#portraits{width:350px}#portraits canvas{width:42px;height:45px}#title .hero-choice{font-size:10px;padding:2px}#title #start{font-size:11px;padding:7px}}