/* Shared page layout. Keep game CSS inside the game shadow root. */
:root, .dark{--background: #f5f4ec; --foreground: #192e34; --primary: #fbe352; --primary-foreground: #192e34; --border: #192e34; --ring: #268b90; --radius: .5rem;}
*{box-sizing: border-box;}
body{margin: 0px; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif;}
button, a, canvas{-webkit-tap-highlight-color: transparent;}
button{cursor: pointer;}
button:disabled{cursor: default; opacity: 0.35;}
button:focus-visible, a:focus-visible, canvas:focus-visible{outline: rgb(239, 117, 92) solid 3px; outline-offset: 4px;}
.arcade{min-height: 100svh; background-image: radial-gradient(rgba(27, 52, 51, 0.075) 0.8px, transparent 0.8px); background-size: 7px 7px; padding: 0px 4vw;}
.masthead{height: 90px; display: flex; align-items: center; border-bottom: 1px solid rgba(32, 59, 52, 0.15); justify-content: space-between;}
.wordmark{font-size: 32px; font-weight: 1000; letter-spacing: -2px; color: inherit; text-decoration: none; font-style: italic; transform: rotate(-3deg);}
.wordmark span{font-size: 12px; vertical-align: top; margin-left: 3px;}
.edition, .kicker, footer{font-family: monospace; font-weight: 700; font-size: 12px; letter-spacing: 1.2px;}
.edition.right{color: rgb(99, 113, 109);}
.game-layout{max-width: 1464px; margin: 30px auto; display: grid; grid-template-columns: 1fr minmax(352px, 480px) 1fr; gap: clamp(30.8px, 4vw, 74.8px); align-items: center;}
.side h1{font-size: clamp(35px, 3.3vw, 53px); line-height: 1.06; letter-spacing: -2.5px; font-weight: 900; margin: 24px 0px;}
.side h1 span{display: inline-block; transform: rotate(-3deg); background: rgb(249, 223, 85); padding: 0px 8px 5px; margin-left: -8px;}
.side p{font-size: 17.6px; line-height: 1.6; color: rgb(105, 118, 113);}
.live-dot{display: inline-block; width: 7px; height: 7px; background: rgb(59, 138, 105); border-radius: 50%; margin-right: 6px;}
.instructions{display: grid; grid-template-columns: 26px 1fr; gap: 24px 11px; margin-top: 40px;}
.instructions > span{font: 12px monospace; color: rgb(134, 145, 139); padding-top: 4px;}
.instructions strong{font-size: 17.6px;}
.instructions p{font-size: 15.4px; margin: 4px 0px 0px; line-height: 1.4;}
.keyboard-hint{font-size: 13.2px; color: rgb(105, 118, 113); margin-top: 33px;}
kbd{font: 11px monospace; border-width: 1px 1px 3px; border-style: solid; border-color: rgb(169, 178, 168); border-image: none; border-radius: 4px; padding: 5px 7px; background: rgb(255, 255, 255); margin-right: 7px;}
.machine{border: 4px solid rgb(25, 46, 52); border-radius: 22px; overflow: hidden; box-shadow: rgb(25, 46, 52) 8px 9px 0px, rgba(25, 51, 46, 0.125) 0px 20px 45px; background: rgb(25, 46, 52); position: relative; width: 100%;}
.level-ticket{border: 1px solid rgb(188, 198, 185); background: rgb(251, 252, 242); padding: 26px 24px; border-radius: 3px; box-shadow: rgb(224, 228, 215) 4px 4px 0px; transform: rotate(2deg);}
.level-ticket h3{font-size: 30.8px; letter-spacing: -1px; margin: 15.4px 0px 0px; font-weight: 900;}
.level-ticket p{font-size: 15.4px; margin: 8.8px 0px 24.2px;}
.level-ticket ol{list-style: none; padding: 0px; margin: 0px;}
.level-ticket li{display: flex; gap: 11px; align-items: center; font-size: 13.2px; border-top: 1px dashed rgb(197, 206, 193); padding: 17.6px 0px; color: rgb(135, 145, 139);}
.level-ticket li > span{font: 11px monospace;}
.level-ticket li.current{color: rgb(25, 46, 52);}
.level-ticket li.current > span{background: rgb(251, 227, 82); box-shadow: rgb(251, 227, 82) 0px 0px 0px 6px; border-radius: 2px;}
.level-ticket li.done{color: rgb(49, 134, 101);}
.level-ticket li b{margin-left: auto; font: 9px monospace; background: rgb(246, 217, 211); color: rgb(149, 72, 62); padding: 3px 5px; border-radius: 3px;}
.best-ticket{margin: 35px auto 0px; text-align: center; display: flex; align-items: center; flex-direction: column; gap: 8px;}
.best-ticket > span{font: 10px monospace; letter-spacing: 2px;}
.best-ticket strong{font-size: 38.5px; font-weight: 900;}
.best-ticket small{font-size: 13.2px; color: rgb(113, 129, 119);}
footer{max-width: 1464px; margin: 30px auto 0px; display: flex; justify-content: space-between; padding: 20px 0px; border-top: 1px solid rgba(32, 59, 52, 0.15); font-size: 9px; color: rgb(108, 122, 112); letter-spacing: 1px;}
footer i{display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(88, 158, 116); margin-right: 7px;}
@media (min-width: 1100px) and (max-height: 850px){
.game-layout{grid-template-columns: 1fr minmax(330px, 401px) 1fr; margin: 23px auto;}
.masthead{height: 70px;}
.side h1{font-size: 40px;}
.level-ticket{max-width: 270px;}
footer{margin-top: 16px;}
}
@media (max-width: 1000px){
.game-layout{grid-template-columns: 1fr minmax(330px, 451px); gap: 35px;}
.right-side{display: none;}
.edition.right{display: none;}
.side h1{font-size: 38px;}
.kicker{font-size: 10px;}
}
@media (max-width: 700px){
.arcade{padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);}
.masthead{height: 57px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none;}
.wordmark{font-size: 24px;}
.edition{font-size: 9px; letter-spacing: 0.8px;}
.game-layout{display: block; margin: 0px auto; max-width: 430px;}
.side{display: none;}
.machine{border-width: 3px; box-shadow: rgb(25, 46, 52) 3px 4px 0px; border-radius: 17px;}
footer{font-size: 8px; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; margin-top: 9px; padding: 9px 0px;}
footer > span:last-child{display: none;}
}
@media (prefers-reduced-motion: reduce){
*{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
}
.machine{container-type: inline-size;}
.intro-page .masthead, .intro-page footer, .intro-page .side{visibility: hidden;}
@media (max-width: 700px){
.intro-page .masthead, .intro-page footer{visibility: hidden;}
}
@media (min-width: 701px){
.intro-page .masthead, .intro-page footer, .intro-page .side{visibility: visible;}
}
.wordmark{display: inline-flex; align-items: center;}
.wordmark > span{align-self: flex-start; margin-top: 8px;}
@media (max-width: 700px){
.wordmark > span{margin-top: 4px;}
}
@media (max-width: 700px){
html, body{margin: 0px; background: rgb(25, 46, 52);}
.arcade{padding: 0px; min-height: 100dvh; background-image: none;}
.arcade .masthead, .arcade footer, .arcade .side{display: none;}
.game-layout{display: block; margin: 0px; max-width: none; width: 100%;}
.machine{border: 0px; border-radius: 0px; box-shadow: none; height: 100dvh; display: flex; flex-direction: column; width: 100%;}
}
.level-ticket{position: relative;}
.chapter-next{position: absolute; top: 17px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid rgb(25, 46, 52); border-radius: 6px; background: rgb(251, 227, 82); color: rgb(25, 46, 52);}
.level-ticket > .kicker{padding-right: 34px;}
:root{--workshop-bg: #111110; --workshop-panel: #211f1b; --workshop-text: #f3f0e7; --workshop-muted: #b7b1a5; --workshop-gold: #c5a064; --workshop-line: #423b2d;}
body{background: var(--workshop-bg);}
.arcade{background: var(--workshop-bg); color: var(--workshop-text);}
.masthead{max-width: 1464px; margin: auto; height: 122px; border-color: var(--workshop-line); gap: 24px;}
.studio-logo{display: block; width: 165px; height: 110px; object-fit: contain; flex-shrink: 0;}
.edition{color: var(--workshop-muted);}
.game-layout{margin-top: 40px; margin-bottom: 40px;}
.side .kicker{color: var(--workshop-gold);}
.live-dot{background: var(--workshop-gold);}
.side h1{color: var(--workshop-text);}
.side h1 span{background: var(--workshop-gold); color: var(--workshop-bg);}
.side p, .keyboard-hint{color: var(--workshop-muted);}
.instructions > span{color: var(--workshop-gold);}
kbd{background: var(--workshop-panel); color: var(--workshop-text); border-color: rgb(117, 99, 72);}
.level-ticket{background: var(--workshop-panel); border-color: var(--workshop-line); box-shadow: rgb(9, 9, 9) 4px 4px 0px; transform: none; border-radius: 0px;}
.level-ticket .kicker{color: var(--workshop-gold);}
.level-ticket h3{color: var(--workshop-text);}
.level-ticket li{border-color: var(--workshop-line); color: rgb(147, 140, 127);}
.level-ticket li.current{color: var(--workshop-text);}
.level-ticket li.current > span{background: var(--workshop-gold); box-shadow: 0 0 0 6px var(--workshop-gold); color: var(--workshop-bg); border-radius: 0px;}
.level-ticket li.done{color: rgb(189, 208, 175);}
.level-ticket li b{background: rgb(69, 53, 34); color: rgb(232, 199, 138);}
.chapter-next{border: 1px solid var(--workshop-gold); border-radius: 0px; background: transparent; color: var(--workshop-gold); box-shadow: rgb(84, 67, 43) 2px 2px 0px;}
.chapter-next:hover{background: rgb(52, 43, 30);}
 .best-ticket small{color: var(--workshop-muted);}
.best-ticket > svg, .best-ticket > span{color: var(--workshop-gold);}
.best-ticket strong{color: var(--workshop-text);}
.arcade > footer{border-color: var(--workshop-line); color: var(--workshop-muted);}
footer i{background: var(--workshop-gold);}
@media (min-width: 701px){
.machine{border-color: rgb(52, 46, 35); box-shadow: rgb(8, 8, 8) 8px 9px 0px, rgba(0, 0, 0, 0.333) 0px 20px 45px;}
}
@media (min-width: 1100px) and (max-height: 850px){
.masthead{height: 90px;}
.studio-logo{height: 80px; width: 120px;}
}
@media (max-width: 700px){
.arcade{background: rgb(25, 46, 52);}
.arcade .masthead{display: none;}
.game-layout{margin: 0px;}
}
.machine{color: rgb(25, 46, 52);}
.wordmark{transform: none;}
.wordmark img{object-fit: contain;}
#machine{background: rgb(0, 0, 0);}
#game-container{width: 100%; height: min(calc(137.5cqw + 129px), 857px); position: relative; background: rgb(0, 0, 0);}
@media (max-width: 700px){
#machine{height: 100dvh;}
#game-container{height:100%;position:absolute;inset:0;}
}
html{line-height: 1.5; text-size-adjust: 100%;}
.best-ticket{margin: 35px auto 0px; gap: 8px;}
.best-ticket > svg{display: block; width: 24px; height: 24px; flex-shrink: 0;}
.best-ticket > span{font: 10px monospace; letter-spacing: 2px;}
.best-ticket strong{font-family: Arial, Helvetica, sans-serif; font-size: 38.5px; font-weight: 900; line-height: 1.5;}
.best-ticket small{font-size: 13.2px; line-height: 1.5;}