@font-face{font-family:Rye;src:url('./assets/fonts/Rye-Regular.ttf') format('truetype');font-display:swap}

@font-face{font-family:Bitter;src:url('./assets/fonts/Bitter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{--paper:#eee0cb;--ink:#30221b;--muted:#705d49;--rust:#8c3e2c;--rule:#61432d38;--display:Rye,Georgia,serif;--serif:Bitter,Georgia,serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--serif);background-image:radial-gradient(ellipse at 15% 20%,#fff8ed88,transparent 65%),repeating-linear-gradient(94deg,#79563803 0 1px,transparent 1px 6px)}
a{color:inherit;text-decoration:none}
button,select{font:inherit}
a,select,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--rust);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure{margin:0}
h2{font:400 clamp(29px,3.5vw,44px)/1.2 var(--display);text-wrap:balance}
h3{font-size:19px;line-height:1.4}
p{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip-link{position:absolute;left:16px;top:0;transform:translateY(-150%);background:var(--ink);color:var(--paper);padding:10px 18px;z-index:10}
.skip-link:focus{transform:translateY(0)}
.topbar{max-width:1400px;margin:auto;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule)}
.brand{font:400 20px/1.1 var(--display);display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand small{display:block;font-size:16px}
.brand-star{font-size:34px;color:var(--rust)}
nav{display:flex;gap:26px;font-size:12px;font-weight:700}
nav a:hover,.text-link:hover{color:var(--rust);text-decoration:underline;text-underline-offset:5px}
.language-picker select{border:1px solid var(--rule);background:transparent;padding:8px;color:var(--ink);font-size:12px;cursor:pointer;min-height:42px}
.hero{max-width:1600px;min-height:650px;margin:auto;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-scene{position:absolute;right:0;top:0;width:75%;height:100%;object-fit:cover;object-position:60% center;z-index:0}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,#eee0cbf5 25%,#eee0cb9c 47%,#eee0cb00 75%),linear-gradient(0deg,var(--paper) 0%,#eee0cb00 16%);pointer-events:none}
.hero-content{position:relative;z-index:1;width:min(620px,55%);margin:55px 0 80px max(5%,calc((100% - 1180px)/2));padding-right:24px}
.eyebrow{font:700 10px/1.6 var(--serif);letter-spacing:.16em;color:var(--rust);text-transform:uppercase}
.hero h1{font:400 clamp(64px,7.8vw,112px)/.98 var(--display);letter-spacing:-.035em;margin:24px 0 22px}
.hero h1 span{display:block}
.hero-tagline{font:650 clamp(22px,2.2vw,29px)/1.35 var(--serif);max-width:420px}
.hero-body{margin-top:18px;max-width:410px;font-size:15px}
.hero-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin:28px 0 14px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:15px 25px;border:1px solid var(--ink);font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;box-shadow:3px 3px 0 #30221b28}
.button-dark{background:var(--ink);color:#f8ead6}
.button-dark:hover{background:var(--rust);border-color:var(--rust)}
.text-link{font-size:12px;font-weight:650;display:flex;gap:12px;align-items:center}
.browser-note{font-size:11px}
.scene-caption{position:absolute;z-index:1;bottom:35px;right:5%;font-size:9px;letter-spacing:.12em;color:var(--ink);background:#eee0cbbd;padding:4px 10px}
.frontier-rule{display:flex;gap:30px;align-items:center;justify-content:center;border-block:1px solid var(--rule);padding:16px;background:#8c3e2c07}
.frontier-rule p{font-size:11px;font-weight:750;letter-spacing:.16em;color:var(--ink)}
.frontier-rule span{color:var(--rust)}
.section{width:min(1180px,90%);margin:auto;padding:80px 0}
.section-head{max-width:690px;margin-bottom:35px}
.section-head h2{margin:12px 0 18px}
.section-head>p:last-child{font-size:14px;max-width:590px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.features article{border-top:2px solid var(--rule);padding-top:22px}
.feature-number{color:var(--rust);font-size:12px;font-weight:700}
.features h3{margin:14px 0 10px}
.features p{font-size:13px}
.showcase{background:#dfcdb47d;border-block:1px solid var(--rule);padding-bottom:60px}
.showcase .section{padding-bottom:0}
.gallery{width:min(1180px,90%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.gallery figure:first-child{grid-column:1/-1}
.image-frame{background:#d2bea4;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;outline:1px solid var(--rule);outline-offset:5px}
.gallery figure:first-child .image-frame{aspect-ratio:2.3}
.image-frame img{width:100%;height:100%;object-fit:cover}
.image-frame p{text-align:center;padding:25px;max-width:380px}
.gallery figcaption{display:flex;gap:15px;font-size:12px;margin:17px 0 0}
.gallery figcaption>span:first-child{color:var(--rust);font-weight:750}
.controls-section{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.game-loop{list-style:none;counter-reset:steps;padding:0;margin:0}
.game-loop li{counter-increment:steps;position:relative;padding:0 0 26px 45px}
.game-loop li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:2px;color:var(--rust);font-size:14px;font-weight:750}
.game-loop h3{font-size:17px;margin-bottom:6px}
.game-loop p{font-size:13px}
.device-note{font-size:12px;border-left:2px solid var(--rust);padding-left:14px}
.controls-card{background:#f5e8d5;border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-7px;padding:30px 32px;box-shadow:4px 5px 0 #62482c10;align-self:start}
.controls-card h3{font:400 22px var(--display);margin-bottom:20px}
.controls-card dl{margin:0}
.controls-card dl>div{display:grid;grid-template-columns:140px 1fr;gap:15px;padding:9px 0;border-bottom:1px solid var(--rule);align-items:center;font-size:12px}
.controls-card dd{margin:0;color:var(--muted)}
kbd{font:600 11px var(--serif);padding:4px 8px;background:#fff6e766;border:1px solid #79604766;display:inline-block;box-shadow:0 2px 0 #62482c12}
summary{cursor:pointer;font-size:12px;font-weight:700;padding:18px 0}
.controls-note{font-size:11px;margin-top:20px}
.leaderboard{border-top:1px solid var(--rule)}
.board{border:1px solid var(--rule)}
.board-head{display:grid;grid-template-columns:1fr 3fr 2fr 1fr;gap:15px;padding:16px 30px;background:#30221b;color:var(--paper);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.board-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px 45px;background:repeating-linear-gradient(0deg,#79563806 0 1px,transparent 1px 43px)}
.wanted-star{font-size:52px;color:#8c3e2c55}
.stamp{font-size:11px;font-weight:750;color:var(--rust);letter-spacing:.12em;border:2px solid var(--rust);padding:5px 12px;transform:rotate(-4deg);margin:5px 0 24px}
.board-empty h3{font-size:20px}
.board-empty p{font-size:12px;margin-top:10px}
.final-cta{text-align:center;padding:65px 5% 75px;background:#dbc5a67a;border-block:1px solid var(--rule)}
.final-cta h2{max-width:700px;margin:15px auto 20px}
.final-cta>p:not(.eyebrow){font-size:14px}
.final-cta .button{margin-top:28px}
.footer{width:min(1180px,90%);margin:auto;padding:40px 0;display:flex;justify-content:space-between;gap:30px;align-items:center}
.footer p{font-size:9px;letter-spacing:.08em;margin-top:10px}
.footer nav{font-size:11px;gap:18px}
.footer-meta{font-size:10px;color:var(--muted);display:flex;flex-direction:column;text-align:right;gap:5px}
[aria-disabled=true]{cursor:not-allowed;opacity:.75}

@media(min-width:1600px){.hero-content{margin-left:210px}
}

@media(max-width:1000px){.topbar{gap:15px;padding-inline:4%}
nav{gap:16px}
.hero{min-height:610px}
.hero-content{width:60%;margin-left:5%}
.hero-scene{width:85%}
.features{grid-template-columns:1fr 1fr}
.controls-section{gap:40px}
.footer{flex-wrap:wrap}
.controls-card{padding:27px 23px}
.controls-card dl>div{grid-template-columns:115px 1fr}
}

@media(max-width:650px){.topbar{flex-wrap:wrap;padding:16px 5%;gap:15px}
.topbar .brand{font-size:18px}
.topbar nav{order:3;width:100%;justify-content:space-between;gap:8px;border-top:1px solid var(--rule);padding-top:12px;font-size:11px}
.hero{min-height:730px;align-items:start}
.hero-scene{width:100%;height:55%;top:auto;bottom:0;object-position:center}
.hero:after{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 39%,#eee0cbbd 54%,#eee0cb00 72%),linear-gradient(0deg,var(--paper),transparent 18%)}
.hero-content{width:90%;margin:35px 5% 300px;padding:0}
.hero h1{font-size:65px;margin:18px 0}
.hero-tagline{font-size:22px;max-width:310px}
.hero-body{font-size:13px;max-width:340px}
.hero-actions{gap:18px;margin-top:22px}
.button{padding:14px 20px;font-size:11px}
.scene-caption{bottom:24px;left:5%;right:auto;max-width:90%;font-size:8px}
.frontier-rule{gap:14px}
.frontier-rule p{font-size:9px;letter-spacing:.12em}
.section{padding:55px 0}
.features{gap:26px 20px}
.features h3{font-size:17px}
.features p{font-size:12px}
.gallery{grid-template-columns:1fr;gap:26px}
.gallery figure:first-child{grid-column:auto}
.gallery figure:first-child .image-frame{aspect-ratio:16/9}
.controls-section{grid-template-columns:1fr;gap:30px}
.controls-card{padding:28px}
.controls-card dl>div{grid-template-columns:125px 1fr}
.board-head{padding:14px 16px;font-size:8px;gap:8px;grid-template-columns:1fr 2fr 2fr 1fr}
.board-empty h3{font-size:18px}
.footer{align-items:start;gap:25px}
.footer nav{flex-wrap:wrap}
.footer-meta{text-align:left;width:100%}
.final-cta{padding:55px 5%}
.language-picker select{font-size:11px}
.hero-content .eyebrow{font-size:9px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}
/* Ranking is the home page. Game presentation follows the board. */
.ranking-home{width:min(1180px,90%);margin:auto;padding:34px 0 45px}
.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:24px}
.ranking-heading h1{font:400 clamp(40px,5vw,64px)/1.1 var(--display);margin:10px 0 12px}
.ranking-heading>div>p:last-child{font-size:14px}
.ranking-heading .button{flex-shrink:0}
.ranking-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}
.period-switch{display:flex;border:1px solid var(--rule);padding:3px;gap:3px}
.period-switch button{border:0;background:transparent;color:var(--muted);padding:9px 17px;font-size:11px;font-weight:650;cursor:pointer}
.period-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ranking-status{font-size:9px;letter-spacing:.08em;color:var(--rust);font-weight:700}
.featured-vacancy{display:grid;grid-template-columns:90px 1.5fr 1fr 100px;gap:26px;padding:30px;background:var(--ink);color:#f5e8d5;box-shadow:4px 4px 0 #30221b22}
.featured-rank{display:flex;flex-direction:column;gap:8px}
.featured-rank b{font:400 48px/1 var(--display);color:#dec199}
.featured-rank span,.featured-link>span,.featured-bounty>span{font-size:9px;letter-spacing:.08em;color:#d9b786;text-transform:uppercase}
.featured-name h2{font:650 23px/1.3 var(--serif);margin-bottom:10px}
.featured-name p{font-size:12px;color:#cdbcaa}
.featured-link{display:flex;flex-direction:column;gap:9px;border-left:1px solid #eee0cb33;padding-left:24px}
.featured-link b{font-size:15px;font-weight:550;line-height:1.5}
.featured-link>span:last-child{font-size:22px}
.featured-bounty{display:flex;flex-direction:column;align-items:end;gap:14px}
.featured-bounty b{font-size:32px;color:#dec199}
.ranking-table-wrap{margin-top:22px}.ranking-table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}
.ranking-table th{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:10px 15px;border-bottom:1px solid var(--rule)}
.ranking-table td{padding:17px 15px;border-bottom:1px solid var(--rule);color:var(--muted)}
.ranking-table th:nth-last-child(-n+2),.ranking-table td:nth-last-child(-n+2){text-align:right}
.ranking-table .vacant-rank{font-size:19px;color:var(--rust);width:80px}
.ranking-period-state{font-size:11px;margin-top:17px;font-weight:650}
.ranking-notice{font-size:10px;margin-top:7px;max-width:720px}
.ranking-promise{display:flex;gap:22px;align-items:center;margin-top:25px;border-left:3px solid var(--rust);padding:10px 18px;background:#8c3e2c07}
.ranking-promise b{font-size:10px;letter-spacing:.04em;flex:0 0 230px}.ranking-promise p{font-size:12px}
.game-banner{position:relative;overflow:hidden;background:#d9c3a2;min-height:280px;display:flex;align-items:center;padding:40px max(5%,calc((100% - 1180px)/2))}
.game-banner img{position:absolute;right:0;top:0;width:50%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 35%)}
.game-banner>div{position:relative;width:60%;max-width:650px}.game-banner h2{font-size:30px;margin:12px 0}.game-banner>div>p:not(.eyebrow){font-size:13px;max-width:470px}.game-banner .text-link{margin-top:18px}
@media(max-width:850px){.featured-vacancy{grid-template-columns:70px 1.3fr 1fr;gap:20px;padding:25px}.featured-bounty{display:none}.featured-name h2{font-size:20px}.ranking-promise{align-items:start}.ranking-promise b{flex-basis:180px}}
@media(max-width:650px){.ranking-home{padding-top:25px}.ranking-heading{display:block;margin-bottom:20px}.ranking-heading h1{font-size:42px}.ranking-heading>div>p:last-child{font-size:12px}.ranking-heading .button{margin-top:18px}.ranking-status{font-size:8px;max-width:100px;text-align:right}.featured-vacancy{grid-template-columns:55px 1fr;gap:18px;padding:22px}.featured-rank b{font-size:34px}.featured-rank span{font-size:8px}.featured-name h2{font-size:18px}.featured-link{grid-column:2;border-left:0;border-top:1px solid #eee0cb33;padding:14px 0 0;gap:5px}.featured-link>span:last-child{display:none}.featured-link b{font-size:12px}.ranking-table th,.ranking-table td{padding:12px 7px}.ranking-table th:nth-child(3),.ranking-table td:nth-child(3){display:none}.ranking-table .vacant-rank{width:40px}.ranking-promise{display:block;padding:12px 15px}.ranking-promise p{margin-top:8px;font-size:11px}.game-banner{min-height:270px}.game-banner>div{width:90%}.game-banner h2{font-size:26px}.game-banner img{width:70%;opacity:.25}}

.account-button{font:inherit;border:1px solid var(--ink);background:transparent;color:inherit;padding:.5rem .8rem;cursor:pointer}
.account-paper{border:2px solid #503627;background:#eee1cc;color:#3c281e;padding:2rem;width:min(90vw,440px);max-height:85vh;overflow:auto;box-shadow:8px 8px 0 #503627}
.account-paper::backdrop{background:#241b13aa}.account-paper h2{font-family:Rye,serif;margin-bottom:1rem}.account-paper label{display:grid;gap:.3rem;margin:.8rem 0}.account-paper input{width:100%;box-sizing:border-box;padding:.7rem;border:1px solid #725640;background:#fff8ed;color:#34271d;font:inherit}.account-paper button,.ranking-pagination button{font:inherit;padding:.55rem .8rem;margin:.3rem;border:1px solid #725640;background:#d2b990;cursor:pointer}.account-paper button:disabled{opacity:.5}.account-close{float:right}.ranking-pagination{display:flex;justify-content:center;gap:1rem}.featured-link a{color:inherit}.ranking-table a{color:#8b3f2a;text-decoration:underline}
@media(max-width:650px){.account-button{font-size:.8rem}.topbar{flex-wrap:wrap;gap:.7rem}}

.featured-vacancy[hidden]{display:none}.destination-summary p{font-size:.85rem;font-weight:normal;margin:.35rem 0 0;max-width:32ch;line-height:1.4}.destination-summary a{overflow-wrap:anywhere}.account-paper li button{display:block;margin:.5rem 0 1rem}.account-paper a{display:inline-block;margin-top:1rem}.featured-link b{font-weight:normal}

.publication-guide{margin:1.6rem 0;padding:1.2rem 1.5rem;border:1px solid #b79c78;background:#eadbc3}.publication-guide h3{margin:0 0 .6rem;font-size:1.2rem}.publication-guide p{margin:.5rem 0;line-height:1.6}.publication-guide small{display:block}.publication-guide button{margin-top:1rem;padding:.6rem 1rem;background:#322319;color:#f4e6ce;border:0;cursor:pointer}