@font-face{font-family:Barlow;src:url('/BarlowCondensed-Medium.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

@font-face{font-family:Barlow;src:url('/BarlowCondensed-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}

@font-face{font-family:Kalam;src:url('/Kalam-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

:root{--cream:#faedcf;--green:#05483e;--deep:#032c29;--line:#a4b39a66;--gold:#f5bc42;color-scheme:dark;font-family:Barlow,'Arial Narrow',sans-serif;color:var(--cream);background:var(--deep);font-synthesis:none}

*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 80%,#07594b 0,#034238 45%,#032b28 100%);font-size:18px}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:640px;margin:auto;padding:22px 18px 16px;border-bottom:1px solid var(--line)}
header a{display:flex}
header img{width:185px;height:auto;filter:brightness(0) saturate(100%) invert(94%) sepia(16%) saturate(395%) hue-rotate(339deg) brightness(103%) contrast(96%)}
#connection{font-weight:700;font-size:12px;letter-spacing:.8px;text-align:right;max-width:135px}
#connection::before{content:'';display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#e8b65b}
#connection[data-state=connected]::before{background:#84a77a}
#connection[data-state=idle]::before{background:#a6b2a4}
main{max-width:640px;margin:auto;padding:16px 14px 30px}
h1,h2,p{margin:0}
h1{font-size:55px;line-height:.94;font-weight:700}
h2{font-size:24px;line-height:1.1}
button{color:var(--green)}
.eyebrow,.stamp{font-size:14px;letter-spacing:1.5px;font-weight:700}
.muted,.table-note{color:#cfdbc4;font-size:16px;line-height:1.4;text-align:center;margin-top:15px}
.handwritten{font-family:Kalam,cursive;font-size:21px;line-height:1.4;color:#dce1b6}
.primary{display:block;width:100%;border:0;border-radius:8px;background:#166555;color:var(--cream);font-weight:700;font-size:22px;padding:12px 10px;min-height:48px}
.primary:disabled{opacity:.48}
.primary:not(:disabled):active{transform:scale(.985)}
.join-poster{padding:22px 7px 24px}
.poster-heading{display:flex;align-items:center;justify-content:space-between}
.poster-heading h1{font-size:68px;font-style:italic}
.join-globe{width:125px}
.join-poster .handwritten{margin-top:12px}
.ticket{padding:20px;background:var(--cream) url('/paper.png');border-radius:14px;color:var(--green)}
.form-heading{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #628b7255;padding-bottom:10px;margin-bottom:14px;font-weight:700;font-size:13px;letter-spacing:1px}
.ticket label{display:block;font-weight:700;font-size:18px;margin:16px 0 5px}
.ticket input{width:100%;background:#fff7e6;color:var(--green);border:1px solid #779984;border-radius:6px;padding:10px 12px;font-size:22px;min-height:48px}
.ticket #code{font-size:30px;letter-spacing:6px;text-transform:uppercase;font-weight:700}
.ticket .primary{margin-top:22px}
.status{border:1px solid #9cbaa16b;background:#054b4080;border-radius:8px;padding:14px;margin:18px 0;font-size:19px;text-align:center;line-height:1.3}
.paused{background:#675b2c;color:var(--cream);margin:8px 0;font-size:17px}
.table-heading{display:flex;align-items:center;gap:10px;margin:0 0 14px;min-height:35px}
.player-chip{display:flex;align-items:center;gap:7px;min-width:0}
.player-chip strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:20px}
.avatar{width:35px;height:35px;flex-shrink:0}
.room-label{font-size:13px;letter-spacing:.9px;white-space:nowrap;margin-left:auto}
.my-score{text-align:right;font-size:32px;line-height:1}
.my-score span{display:block;font-size:12px;margin-top:3px}
.lobby-heading{padding:25px 5px}
.lobby-heading h1{margin:10px 0 15px;font-style:italic}
.score-list{list-style:none;padding:0;margin:0}
.score-list li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #819b7966}
.score-list li:last-child{border:0}
.place{font-size:22px;min-width:17px}
.score-list .avatar{width:41px;height:41px}
.score-name{flex:1;font-size:23px;font-weight:700}
.score-list small{display:block;font-size:11px;letter-spacing:1px}
.score-list strong{text-align:right;font-size:28px}
.score-list .me .score-name{color:#14695a}
footer{position:relative;max-width:640px;margin:20px auto 0;text-align:center;overflow:hidden;color:#a4c2a8;font-size:14px;padding:40px 0 20px}
footer span{position:relative}
.footer-links{position:relative;display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:0 12px 16px;font-size:17px}
.footer-links a{min-height:32px;padding:5px 3px;text-underline-offset:4px}
.join-privacy{font-size:17px;line-height:1.35;margin-top:18px}
.adult-notice{border:1px solid #ddb76a;border-radius:10px;background:#5d4b2580;color:var(--cream);padding:15px;margin:12px 0}
.adult-notice strong{font-size:17px;letter-spacing:1px}
.adult-notice p{font-size:18px;line-height:1.35;margin-top:7px}
.policy-page{max-width:760px;padding:34px 22px;line-height:1.5;font-size:21px}
.policy-document header,.policy-document footer{max-width:760px}
.policy-page h1{font-size:58px;margin-bottom:24px}
.policy-page h2{font-size:29px;line-height:1.2;margin:30px 0 12px}
.policy-page p{margin:14px 0}
.policy-page a{overflow-wrap:anywhere;text-underline-offset:4px}
.policy-page li{margin:12px 0}
.policy-page ol{padding-left:24px}
.policy-date{font-size:17px;color:#cfdbc4}
.footer-panorama{position:absolute;width:100%;height:80px;object-fit:cover;left:0;bottom:0;opacity:.3}
#notice:empty{display:none}
#notice{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;width:min(90%,540px);padding:14px 18px;border-radius:10px;background:var(--cream);color:var(--green);box-shadow:0 4px 24px #001d1bb0;text-align:center;font-size:20px}
.end-card{text-align:center;padding:65px 10px}
.end-card h1{margin:18px 0}
.end-card p{font-size:23px;margin-bottom:25px}
.end-card a{font-size:24px;font-weight:700}

/* The same board hierarchy as the native app, sized for a phone controller. */
.gameplay{background-attachment:fixed}
.gameplay::after{content:'';position:fixed;pointer-events:none;z-index:0;bottom:0;left:0;right:0;height:150px;background:url('/art/Hills.svg') bottom center / cover no-repeat;opacity:.4}
.gameplay header,.gameplay main{position:relative;z-index:1}
.gameplay header{padding:14px 14px 9px;border:0;flex-direction:row-reverse}
.gameplay header img{width:155px}
.gameplay #connection{text-align:left;max-width:160px;font-size:10px}
.gameplay main{padding:0 10px max(22px,env(safe-area-inset-bottom));min-height:calc(100svh - 62px);display:flex;flex-direction:column}
.gameplay footer{display:block;padding:10px 8px;margin-top:0}
.gameplay footer>span,.gameplay footer>.footer-panorama{display:none}
.gameplay .table-heading{margin:0 3px 8px;min-height:26px}
.gameplay .avatar{width:26px;height:26px}
.gameplay .player-chip strong{font-size:17px}
.gameplay .room-label{font-size:11px}
.round-strip{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;margin:0 3px 9px;padding:5px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:17px;font-weight:700;white-space:nowrap}
.round-dots{display:flex;gap:3px;align-items:center}
.round-dots i{width:10px;height:10px;background:#486c60;border-radius:50%}
.round-dots .done{background:var(--cream)}
.score-pill{display:flex;align-items:center;gap:6px;font-size:15px}
.score-pill b{background:var(--cream);color:var(--green);border-radius:100px;padding:2px 8px;font-size:19px;min-width:27px;text-align:center}
.category-card{position:relative;display:flex;align-items:center;gap:9px;min-height:78px;padding:7px 32px 7px 8px;margin-bottom:8px;border-radius:19px;background:var(--cream);color:var(--green)}
.category-art{width:70px;height:65px;object-fit:cover;border-radius:14px;flex-shrink:0}
.category-copy{min-width:0}
.category-card h1{text-transform:uppercase;font-size:29px;font-style:italic;line-height:1;letter-spacing:-.4px}
.category-card p{font-size:16px;line-height:1.12;margin-top:5px;font-style:italic}
.category-prompt-label{display:block;margin-top:5px;font-size:12px;line-height:1.2;font-weight:700}
.category-copy p{margin-top:2px}
.category-info{position:absolute;right:10px;top:12px}
.category-info summary{border:1.5px solid var(--green);border-radius:50%;width:19px;height:19px;line-height:16px;text-align:center;font-weight:700;font-family:Georgia,serif;font-size:15px;list-style:none;cursor:pointer}
.category-info summary::-webkit-details-marker{display:none}
.category-info[open]{z-index:5}
.category-info-body{position:absolute;right:-5px;top:26px;width:min(340px,84vw);max-height:65dvh;overflow-y:auto;overscroll-behavior:contain;padding:16px;background:#fff6e3;border:1px solid #91ab94;border-radius:10px;box-shadow:0 5px 16px #00272255;font-size:17px;line-height:1.4;text-align:left}
.category-info-body p{position:static;font-style:normal;font-size:17px;line-height:1.4;margin:6px 0 15px}
.category-info-body h2{font-size:21px;line-height:1.15;margin:16px 0 6px}
.category-info-body h2:first-child{margin-top:0}
.category-example{padding:10px 12px;border-left:3px solid #91ab94;background:#ecebd5;border-radius:4px}
.category-example p{margin-bottom:0}
.category-info-body h3{font-size:19px;margin-top:12px}
.category-info-body ul{padding-left:20px;margin:8px 0}
.category-info-body li{margin:10px 0;overflow-wrap:anywhere}
.category-info-body a{color:var(--green);text-decoration:underline}
.category-info .country-references summary{border:0;border-radius:0;width:auto;height:auto;line-height:1.3;text-align:left;font:inherit;font-weight:700;padding:8px 0}
.turn-status{display:flex;flex-wrap:wrap;align-items:center;gap:5px;line-height:1.1;font-size:16px;font-weight:700;margin:2px 4px 9px}
.turn-status small{font-size:14px;font-weight:400;margin-left:auto}
.turn-dot{width:7px;height:7px;background:#96b978;border-radius:50%}
.countries{display:grid;gap:5px}
.country{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:50px;padding:3px 8px 3px 3px;text-align:left;border:2px solid transparent;border-radius:10px;background:var(--cream);transition:border-color .16s,background-color .16s,transform .16s;touch-action:pan-y}
.country-art{width:48px;height:45px;object-fit:cover;border-radius:7px;flex-shrink:0}
.country-name{flex:1;min-width:0;font-size:21px;line-height:1.02;font-weight:700}
.country.selected{border-color:var(--gold);background:#fff2d5}
.country.claimed{opacity:.65}
.country.selected .country-name{color:var(--green)}
.country.drop-target{border-color:var(--gold);background:#fff7db;transform:scale(1.015);box-shadow:0 0 0 3px #f5bc4255}
.claim-label{display:block;font-size:12px;font-weight:400;line-height:1.2;margin-top:3px}
.token-slot{border:1.5px dashed #71988288;border-radius:6px;width:29px;height:30px;text-align:center;font-size:24px;line-height:25px;color:#39746088;flex-shrink:0}
.call-panel{margin-top:12px}
.call-heading{display:flex;align-items:center;justify-content:space-between;margin:0 4px 8px}
.call-heading h2{font-size:22px}
.call-heading span{font-size:14px;color:#c4d2b8}
.ranks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin:0 4px 11px}
.ranks-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rank{--token:#f45232;display:inline-flex;align-items:center;justify-content:center;background:var(--token);color:var(--green);border:0;border-radius:7px;font-size:29px;line-height:1;font-weight:700;flex-shrink:0;width:37px;height:38px}
.rank-1{--token:#f45132}
.rank-2{--token:#42a9c5}
.rank-3{--token:#f7c146}
.rank-4{--token:#ef84a3}
.rank-5{--token:#f59d45}
.rank-6{--token:#85a778}
.rank-7{--token:#b394c5}
.ranks .rank{width:100%;height:45px;box-shadow:0 3px 0 #001e1a80,inset 0 1px 0 #ffffff44;touch-action:none;user-select:none;-webkit-user-select:none;transition:opacity .16s,transform .16s,box-shadow .16s}
.ranks .rank.selected{outline:2px solid var(--cream);outline-offset:2px;transform:translateY(-2px)}
.ranks .rank:disabled{opacity:.24;box-shadow:none}
.ranks .drag-source{opacity:.3;transform:none}
.placed-token{width:29px;height:30px;font-size:25px;border-radius:5px}
.preview-token{outline:1px solid #fff5dc;outline-offset:1px}
.double{display:flex;align-items:center;gap:7px;margin:5px 3px 11px;font-size:16px;font-weight:700;cursor:pointer}
.double img{width:20px;height:28px}
.double small{display:block;font-size:12px;color:#c9d6bd;font-weight:400;line-height:1.1}
.double input{margin-left:auto;width:20px;height:20px;accent-color:#f5bc42}
.call-help{text-align:center;font-size:12px;color:#b8cdb4;margin-top:7px;line-height:1.15}
.call-receipt{display:flex;align-items:center;gap:11px;border:1px solid #8caa8c66;border-radius:9px;padding:12px;margin-top:15px}
.call-receipt strong{font-size:23px;display:block}
.call-receipt .eyebrow{font-size:12px}
.receipt-check{font-size:26px;margin-left:auto;color:#9fc588}
.section-title{font-size:22px;margin:4px 6px 6px}
.reveal-list{display:grid;gap:5px}
.result{display:flex;align-items:center;gap:7px;min-width:0;min-height:49px;padding:3px 7px 3px 3px;border-radius:10px;background:var(--cream);color:var(--green);animation:row-in .2s ease-out both}
.result .country-art{width:45px;height:44px}
.rank-number{font-size:23px;font-weight:700;color:var(--token);background:none;min-width:13px;text-align:center}
.result-name{flex:1;min-width:0;font-size:21px;font-weight:700;line-height:1.05}
.result-value{font-size:23px;line-height:1;font-weight:700;text-align:right;margin-left:auto;white-space:nowrap;padding-left:3px}
.result-value small{display:block;font-size:12px;line-height:1.2;font-weight:400;color:#7d8e79;margin-top:3px}
.result .placed-token{width:25px;height:28px;font-size:23px;margin-left:1px}
.call-title{margin-top:14px}
.your-call{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border-radius:8px;background:var(--cream);color:var(--green);min-height:39px}
.your-call .rank{width:28px;height:29px;font-size:25px;border-radius:5px}
.your-call>span:not(.rank){font-size:19px;font-weight:700;line-height:1.1;flex:1}
.your-call i{font-style:normal;padding:0 5px}
.your-call strong{font-size:27px}
.your-call small{display:block;font-size:10px;letter-spacing:.7px}
.next-round{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;overflow:hidden;background:#176858;border-radius:8px;padding:13px 10px;min-height:51px;margin-top:auto;text-align:center;font-size:23px;font-weight:700}
.your-call+.next-round,.reveal-list+.next-round{margin-top:20px}
.next-round i{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#c2d3a4;transform-origin:left;transition:transform .2s linear}
.winner-card{text-align:center;padding:16px 10px 18px}
.winner-card h1{font-size:38px;margin-top:8px}
.winning-score{font-size:45px;font-weight:700;margin-top:9px}
.winning-score span{font-size:17px}
.standings{padding:6px 15px;border-radius:12px;background:var(--cream);color:var(--green);margin-bottom:15px}
.drag-ghost{position:fixed;z-index:99;left:0;top:0;pointer-events:none;width:52px;height:53px;font-size:39px;box-shadow:0 6px 18px #00282488;will-change:transform}
.dragging-token{user-select:none;-webkit-user-select:none;cursor:grabbing}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes row-in{from{opacity:.5;transform:translateY(4px)}
to{opacity:1;transform:translateY(0)}
}

@media(min-width:480px){.gameplay main{padding-left:18px;padding-right:18px}
.gameplay header{padding-left:22px;padding-right:22px}
.category-card{min-height:95px;gap:13px}
.category-art{width:88px;height:80px}
.category-card h1{font-size:35px}
.category-card p{font-size:19px}
.country,.result{min-height:62px}
.country-art,.result .country-art{width:59px;height:55px}
.country-name,.result-name{font-size:26px}
.result-value{font-size:28px}
.result-value small{font-size:15px}
.round-dots i{width:12px;height:12px}
.round-dots{gap:4px}
.section-title{font-size:26px}
.your-call>span:not(.rank){font-size:24px}
.rank-number{font-size:28px}
.ranks .rank{height:53px;font-size:34px}
}

@media(max-width:360px){.gameplay header img{width:135px}
.gameplay #connection{font-size:9px}
.round-strip{font-size:15px}
.round-dots{gap:2px}
.round-dots i{width:8px;height:8px}
.score-pill{font-size:13px}
.country-name,.result-name{font-size:18px}
.result-value{font-size:20px}
.result{gap:5px}
.result .country-art{width:39px;height:42px}
.category-card h1{font-size:26px}
.category-card p{font-size:14px}
.category-art{width:61px;height:60px}
.turn-status small{font-size:12px}
.ranks{gap:6px}
.ranks .rank{height:40px;font-size:26px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}