@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;background:#0d141b;color:#e8eee9;font-family:'DM Sans',sans-serif}header{height:82px;border-bottom:1px solid #27313a;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;letter-spacing:-4px;color:#f0f2e7;text-decoration:none}.brand span{color:#bbdc99;font-size:15px;margin-left:8px}.edition{font-size:11px;letter-spacing:2px;color:#b2b9be}.edition span{color:#636f76;margin:0 14px}button{font:inherit;cursor:pointer;color:#cbd3cd;background:transparent;border:1px solid #39434a;border-radius:5px;padding:10px 14px;font-size:12px}button:hover{background:#25342e;border-color:#b6d69c}main{max-width:1320px;margin:auto;padding:35px 40px 20px}.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#b9d99e;margin:0 0 9px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,3vw,38px);letter-spacing:-1.5px;font-weight:500;margin:0}h1 span{color:#bcda9b}.stats{display:flex;align-items:center;gap:18px}.stats span{font-size:9px;letter-spacing:1.4px;color:#83918e}.stats strong{font-family:'Space Grotesk',monospace;font-size:36px;font-weight:400}.stage{position:relative;border:1px solid #3a4547;border-radius:8px 8px 0 0;overflow:hidden;background:#152329}canvas{display:block;width:100%;aspect-ratio:1200/650;outline:none}.dialogue{display:flex;align-items:center;gap:25px;min-height:75px;background:#182127;border:1px solid #3a4547;border-top:0;padding:15px 24px;border-radius:0 0 8px 8px}.dialogue>span:first-child{font-size:10px;letter-spacing:1.5px;color:#cfb37c;min-width:98px}.dialogue p{font-size:14px;margin:0;color:#d4dbd7}.signal{margin-left:auto;color:#809879;font-size:9px;white-space:nowrap}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;color:#95a39f;font-size:11px}footer div{display:flex;align-items:center;gap:6px}kbd{font:10px 'DM Sans',sans-serif;border:1px solid #3b494b;border-bottom-width:3px;border-radius:4px;padding:5px 7px;color:#c9d2ce}i{width:10px}footer>span{font-size:9px;letter-spacing:1.2px}b{color:#bfdc9c;margin-left:8px}.note{color:#687c7d;font-size:11px;margin-top:25px}#hintText{color:#c7bd9c;font-size:13px;line-height:1.7}#win{position:absolute;inset:0;background:#0b1919d9;backdrop-filter:blur(5px);text-align:center;padding-top:16%}#win[hidden]{display:none}#win p{color:#b9d99e;font-size:12px;letter-spacing:3px}#win h2{font-family:'Space Grotesk';font-size:48px;font-weight:500;margin:15px}#win span{display:block;color:#a4b2aa;font-size:14px;margin-bottom:28px}#win button{background:#c3dda3;color:#182322;border:0;padding:14px 25px}@media(max-width:750px){main{padding:20px 12px}.stats span,.signal,footer>span{display:none}header{height:60px}.dialogue{gap:10px;padding:12px}.dialogue p{font-size:12px}footer{flex-wrap:wrap}footer div{gap:3px}i{width:3px}}
#intro{position:absolute;inset:0;text-align:center;background:#101e25ed;padding:5% 16px}#intro>p:first-child{font-size:10px;letter-spacing:2px;color:#c4dba8}#intro h2{font:500 clamp(24px,3.5vw,46px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:15px 0}.introcopy{font-size:13px;color:#9cadab;line-height:1.7}.lessons{display:flex;justify-content:center;gap:24px;margin:24px 0;font-size:11px}.lessons b{color:#b5cc96;margin:0 8px 0 0}#begin{background:#c0d99f;color:#142122;padding:13px 25px;border:0}#intro small{display:block;color:#6f8583;font-size:10px;line-height:1.7;margin-top:18px}.endnote{max-width:500px;margin:20px auto!important;font-size:12px!important;line-height:1.7;letter-spacing:0!important;color:#9cac9f!important}@media(max-width:750px){#intro{padding:1% 10px}#intro h2{font-size:23px;margin:7px}.lessons{margin:8px 0;gap:10px}.introcopy{font-size:10px;margin:8px}#intro small{margin-top:8px;font-size:8px}#intro>p:first-child{font-size:8px}#win h2{font-size:26px}}
#verification{position:absolute;left:15px;top:10px;padding:12px 18px;background:#192725;color:#d8e6bb;border:1px solid #accb90;z-index:5;font:14px monospace}
#campaign{width:min(960px,94vw);max-height:90vh;background:#14242a;color:#dbe4dc;border:1px solid #60716a;border-radius:12px;padding:28px;box-shadow:0 20px 100px #0009}#campaign::backdrop{background:#060c12cc;backdrop-filter:blur(5px)}.campaign-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.campaign-head h2{font:500 28px 'Space Grotesk',sans-serif;margin:8px 0}.campaign-head>button{font-size:24px;padding:0 10px}.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.room-card{text-align:left;min-height:125px;padding:17px;background:#1b3035}.room-card.current{border-color:#b4d595}.room-card span,.room-card strong,.room-card small{display:block}.room-number{color:#c1d49b;letter-spacing:1px;font-size:10px}.room-card strong{font-size:16px;margin:12px 0;color:#edf0dc}.room-card small{font-size:9px;line-height:1.6;color:#98aaa5}#campaign p{font-size:13px;line-height:1.6;color:#aabbaf}#campaign h3{font-weight:500}#campaign small{color:#839c95;line-height:1.6}#promo-form label{display:block;font-size:12px;margin-bottom:8px}#promo-form>div{display:flex;gap:10px}#promo-code{min-width:0;flex:1;background:#0e1b21;border:1px solid #60736c;border-radius:5px;padding:12px;color:#eff4e5;font:16px monospace}#campaign-status{min-height:24px;color:#dfc596!important}#win button{margin:5px}button:focus-visible,input:focus-visible{outline:2px solid #e1c381;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}@media(max-width:750px){.room-grid{grid-template-columns:repeat(2,1fr)}#campaign{padding:18px}.edition{display:none}.campaign-head h2{font-size:22px}#promo-form>div{flex-wrap:wrap}#rooms-button{font-size:10px}}
.sword-intro-controls{position:absolute;left:24px;right:24px;bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#0c191fe8;padding:12px 16px;border:1px solid #8d805e;border-radius:6px}.sword-intro-controls[hidden]{display:none}.sword-intro-controls p{font-size:13px;margin:8px 0 0;color:#d9d8bc}.sword-intro-controls button{white-space:nowrap;border-color:#b8a473}#sword-replay{margin-left:8px}.room-tier{color:#dab783!important}@media(max-width:750px){.sword-intro-controls{left:8px;right:8px;bottom:8px;padding:7px;gap:8px}.sword-intro-controls p{font-size:10px}.sword-intro-controls .eyebrow{font-size:8px}}

.music-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0;color:#a9b9b1;font-size:12px}.music-controls input{width:120px;accent-color:#bbdc99}.music-controls span{font-size:11px;color:#8fa29b}

#touch-controls,#mobile-audio,#touch-retry,.rotate-tip{display:none}
@media (pointer:coarse),(max-width:960px){
 body{padding-bottom:calc(86px + env(safe-area-inset-bottom));overscroll-behavior-y:contain}
 header{height:56px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:6px}
 header button{padding:8px;min-height:40px;font-size:10px}.edition{display:none}.brand{font-size:28px}
 #mobile-audio,#touch-retry{display:block}
 main{padding:12px max(12px,env(safe-area-inset-right)) 20px max(12px,env(safe-area-inset-left))}
 .stage{margin:auto}canvas{height:auto;touch-action:none}
 #intro,#win{overflow-y:auto;overscroll-behavior:contain;padding:12px;touch-action:pan-y}
 #intro{position:relative;inset:auto} .stage:has(#intro) canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}
 #intro h2{font-size:24px}.introcopy{font-size:12px}.lessons{flex-wrap:wrap;font-size:11px;margin:14px 0}#intro small{font-size:10px}#begin{min-height:44px}
 #win h2{font-size:24px}#win p{margin:6px;font-size:10px}#win span{font-size:12px;margin-bottom:8px}#win button{min-height:44px;padding:10px}.endnote{margin:8px auto!important}
 .dialogue{min-height:50px;gap:10px;padding:10px}.dialogue>span:first-child{min-width:64px;font-size:8px}.dialogue p{font-size:11px}.signal{display:none}
 .music-controls{display:none;position:fixed;top:60px;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));z-index:20;padding:12px;background:#182127;border:1px solid #60716a;border-radius:8px;margin:0}.music-open .music-controls{display:flex}
 #touch-controls{display:flex;justify-content:space-between;gap:8px;position:fixed;bottom:0;left:0;right:0;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#101b22ed;border-top:1px solid #3a4547;z-index:10;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 .touch-move,.touch-actions{display:flex;gap:7px}#touch-controls button{min-width:52px;min-height:56px;padding:8px;font-size:12px;font-weight:600;touch-action:none;border-radius:12px;background:#243738}#touch-controls button.held{background:#c0d99f;color:#142122;transform:translateY(2px)}#touch-controls button:disabled{opacity:.35;cursor:default}
 .rotate-tip{display:block;color:#a4b5ae;font-size:12px;line-height:1.5}footer{margin-top:12px}footer>div,footer>span{display:none}.note{font-size:10px;margin-top:12px}
 #campaign{max-height:calc(100dvh - 24px);width:calc(100vw - 20px);padding:16px;overscroll-behavior:contain}#close-campaign{min-width:44px;min-height:44px}#promo-form button{min-height:44px}.campaign-head{position:sticky;top:-16px;z-index:1;background:#14242a;padding:10px 0}.room-card{min-width:0;padding:12px}.room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 header{height:40px}header button{min-height:32px;padding:5px 8px}.brand{font-size:24px}main{padding-top:4px}.title,.rotate-tip{display:none}
 .stage{width:min(100%,calc((100dvh - 132px - env(safe-area-inset-bottom))*1200/650));min-width:240px}.stage:has(#intro){width:100%;max-height:calc(100dvh - 120px);overflow-y:auto}.stage:has(#intro) #intro{max-width:700px;margin:auto}
 .dialogue{min-height:28px;padding:5px 10px;max-width:650px;margin:auto}.dialogue p{font-size:10px}
 #touch-controls button{min-height:48px;min-width:60px}#touch-controls{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.music-controls{top:44px}
}

.touch-lessons{display:none}@media(pointer:coarse),(max-width:960px){.touch-lessons{display:block;font-size:12px;line-height:1.6;color:#c0d2c5;max-width:450px;margin:12px auto}.lessons{display:none}}

@media(max-width:960px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){#intro{padding:6px 12px}#intro>p:first-child{margin:4px;font-size:8px}#intro h2{font-size:21px;margin:5px}#intro h2+.introcopy,#intro small{display:none}#intro .touch-lessons{margin:6px auto;font-size:11px}#intro .introcopy{font-size:10px;line-height:1.5;margin:6px}#intro button{min-height:40px;padding:9px 16px;margin:2px}}

#landscape-menu{display:none}
#play-options{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);overflow-y:auto;border:1px solid #60716a;border-radius:12px;padding:18px;background:#14242a;color:#dbe4dc}
#play-options::backdrop{background:#060c12bb;backdrop-filter:blur(4px)}
.play-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.play-menu-heading h2{font-size:22px;margin:0}
.play-menu-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}#play-options button{min-height:44px}#menu-hint-text{font-size:13px;line-height:1.5;color:#dfc596}
#play-options .music-controls{display:flex;position:static;margin:12px 0 0;padding:0;border:0;background:transparent;box-shadow:none}
@media (max-width:960px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 body.game-started{padding:0;overflow:hidden;overscroll-behavior:none}
 .game-started>header,.game-started main>.title,.game-started footer,.game-started main>.note,.game-started .rotate-tip,.game-started main>#hintText{display:none}
 .game-started main{padding:0;max-width:none}.game-started main>.music-controls{display:none}
 .game-started .stage{
  position:fixed;
  left:calc(env(safe-area-inset-left) + (100vw - env(safe-area-inset-left) - env(safe-area-inset-right))/2);
  top:calc(env(safe-area-inset-top) + (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))/2);
  transform:translate(-50%,-50%);
  width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1200/650));
  min-width:0;max-height:none;margin:0;border:0;border-radius:0;
 }
 .game-started canvas{width:100%;height:auto;aspect-ratio:1200/650}
 .game-started #landscape-menu{display:block;position:fixed;top:max(6px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:14;min-height:44px;padding:8px 12px;background:#14242acc;border-color:#6f8177;font-size:12px}
 .game-started #touch-controls{background:transparent;border:0;pointer-events:none;padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .game-started .touch-move,.game-started .touch-actions{pointer-events:auto}
 .game-started #touch-controls button{min-width:56px;min-height:52px;background:#1b303599;border-color:#9aafa3b3;backdrop-filter:blur(1px);text-shadow:0 1px 2px #000}
 .game-started #touch-controls button.held{background:#c0d99fe6;text-shadow:none}
 .game-started .dialogue{position:fixed;left:50%;top:max(5px,env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:min(62vw,520px);min-height:0;padding:6px 10px;border:0;border-radius:6px;background:#0c191fd9;z-index:11;pointer-events:none;opacity:0;transition:opacity .15s}
 .game-started.caption-visible .dialogue{opacity:1}.game-started .dialogue>span{display:none}.game-started .dialogue p{font-size:12px;line-height:1.35}
 .game-started:has(#win:not([hidden])) #touch-controls{visibility:hidden}
 .game-started .sword-intro-controls{bottom:70px}
}

#touch-controls button small{display:block;font-size:9px;line-height:1.3;font-weight:400;margin-top:3px}
