@font-face{font-family:Barlow;src:url('../fonts/barlow-condensed-semibold.ttf');font-display:swap}
@font-face{font-family:Alfa;src:url('../fonts/alfa-slab-one.ttf');font-display:swap}
@font-face{font-family:Gothic;src:url('../fonts/grenze-gotisch.ttf');font-display:swap}
@font-face{font-family:Fell;src:url('../fonts/im-fell-english-sc.ttf');font-display:swap}
@font-face{font-family:Console;src:url('../fonts/share-tech-mono.ttf');font-display:swap}
:root{--ink:#222723;--red:#b72c27;--green:#23633e;--blue:#264e83;--yellow:#f2dc42;--rule:#c8cbc3;--paper:#faf7ee}
*{box-sizing:border-box;letter-spacing:0}
body{margin:0;background:#faf7ee url('../illustrations/boxboard-paper-1970.jpg') repeat;background-size:628px 628px;color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}
header,main,footer{max-width:1180px;margin:auto;padding:0 32px}
header{min-height:76px;display:flex;align-items:center;gap:28px;border-bottom:2px solid var(--ink)}
.wordmark{display:block;position:relative;overflow:hidden;aspect-ratio:5.85;width:100%}
.wordmark img{display:block;position:absolute;top:-50%;left:0;width:100%;height:auto}
.brand{width:176px;flex:none;text-decoration:none;color:var(--ink)}
header nav{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:700}
header nav a{text-decoration:none;padding:14px 0;color:var(--ink)}
header nav a:hover{text-decoration:underline;text-underline-offset:5px}
#server{font-size:12px;max-width:150px;color:#555e54;text-align:right}
.account-button{min-height:38px;padding:6px 10px;background:#fff;color:var(--ink);font-size:13px;white-space:nowrap}
.account-button:hover{background:#e4e8dc}
.admin-link{font-size:13px;font-weight:700;white-space:nowrap}
.news-section{padding:28px 0;border-top:2px solid var(--ink)}
.news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.news-list article{border-top:3px solid var(--red);padding:14px 0;white-space:pre-line}
.news-list time{font:600 13px Barlow,sans-serif;color:#555e54}
.news-list h3{font-size:21px;margin:5px 0 8px}
@media(max-width:650px){.news-list{grid-template-columns:1fr}}
.account-section{display:flex;justify-content:flex-end;padding:0 0 22px;border-bottom:1px solid var(--rule)}
.account-name{font-size:14px;font-weight:700;margin-right:10px}
#accountState{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#accountState button{font-size:13px;min-height:40px;padding:7px 12px}
#accountState button:not(:first-of-type){background:#fff;color:var(--ink)}
#accountState button:not(:first-of-type):hover{background:#e4e8dc}
.recent-actions{display:flex;gap:8px;flex-wrap:wrap}.recent-actions button{min-height:36px;padding:5px 10px;font-size:13px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:800;line-height:1.12}
h2{font-size:30px}h3{font-size:23px}
a{color:var(--green)}
button,input{font:inherit;min-height:46px;border:2px solid var(--ink);border-radius:2px}
button{cursor:pointer;font-weight:700;padding:10px 18px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:9px}
button:hover,.launch:hover{background:#184b2c}
button:disabled{opacity:.48;cursor:not-allowed}
button img,.launch img{width:24px;height:24px;object-fit:contain}
input{min-width:0;background:#fff;color:var(--ink);padding:10px 14px}
:is(input,button,a,summary):focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.intro{position:relative;height:410px;max-width:1440px;margin:auto;overflow:hidden;background:#fff;border-bottom:8px solid var(--red)}
.intro-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.intro-content{position:relative;max-width:1180px;margin:auto;padding:44px 32px;pointer-events:none}
.intro h1{max-width:450px}
.intro-content>[data-site-text=tagline]{font-size:25px;font-weight:700;line-height:1.25;margin-top:18px;max-width:390px}
.cover-link{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:15px;font-weight:700;color:var(--ink);text-underline-offset:6px;pointer-events:auto}
.cover-link span{font-size:25px;color:var(--red)}
.introduction{padding:30px 0;border-bottom:1px solid var(--rule)}
.introduction h2{font-size:25px;margin-bottom:12px}
.introduction p{font-size:16px;max-width:880px;line-height:1.65}
.arrival{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px 0 18px}
.eyebrow{font:600 14px/1.2 Barlow,sans-serif;text-transform:uppercase;color:var(--red);margin-bottom:8px}
#joinForm{display:flex;gap:10px;max-width:490px}
#joinCode{width:240px;text-transform:uppercase}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.badge{border:1px solid var(--ink);padding:4px 10px;font:600 14px/1.3 Barlow,sans-serif;white-space:nowrap;background:var(--yellow)}
.catalogue{border-top:3px solid var(--ink);padding:34px 0 48px}
.games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.game{--game-ink:var(--green);--game-paper:#e3ecdc;border:2px solid var(--ink);border-radius:2px;background:#faf7ee url('../illustrations/boxboard-paper-1970.jpg') repeat;background-size:628px 628px;display:flex;flex-direction:column;min-width:0;box-shadow:inset 0 0 18px #6c58331a,4px 4px 0 #22272316}
.game-art{position:relative;aspect-ratio:2.3;min-height:160px;background:var(--game-paper);color:var(--game-ink);border-bottom:2px solid var(--ink);overflow:hidden}
.game-art .game-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.game-art-label{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:9px;padding:7px 12px;background:var(--game-paper);border-top:2px solid var(--ink);border-right:2px solid var(--ink)}
.game-art-label img{width:30px;height:30px;object-fit:contain;flex-shrink:0}
.game-art-label span{font:600 15px/1.15 Barlow,sans-serif}
.game-body{display:flex;flex-direction:column;padding:24px;gap:16px;flex:1;min-width:0}
.game h3{font-size:27px;overflow-wrap:anywhere;color:var(--game-ink)}
.game p{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.game .meta{display:flex;gap:8px;flex-direction:column;font-size:13px;color:#485249}
.meta span{display:flex;gap:8px;align-items:center}.meta img{width:19px;height:19px}
.game details{font-size:14px;margin-bottom:4px}.game summary{cursor:pointer;padding:8px 0;font-weight:700}
.game details p{font-size:14px;margin:12px 0}.game .notice{border-left:3px solid var(--rule);padding-left:12px}
.game button,.game .launch,.game .availability{margin-top:auto;width:100%;min-height:46px}
.launch{display:flex;gap:9px;align-items:center;justify-content:center;text-decoration:none;border:2px solid var(--ink);border-radius:2px;background:var(--green);color:white;padding:10px 14px;font-weight:700}
.availability{display:flex;align-items:center;border-top:1px solid var(--rule);padding-top:14px;font-size:13px;color:#555e54}
.game[data-template=banana-republic]{--game-paper:#f5e638;--game-ink:#165b28}
.game[data-template=banana-republic] h3{font:24px/1.3 Alfa,serif}
.game[data-template=court-intrigue]{--game-paper:#e4c8cf;--game-ink:#6d273a}
.game[data-template=court-intrigue] h3{font:36px/1.1 Gothic,serif}
.game[data-template=diplomatic-map]{--game-paper:#c9dced;--game-ink:#264e83}
.game[data-template=diplomatic-map] h3{font:30px/1.2 Fell,serif}
.game[data-template=submarine-stations]{--game-paper:#d1ddc8;--game-ink:#2c4932}
.game[data-template=submarine-stations] h3{font:29px/1.2 Console,monospace}
.game[data-template=rule-panels]{--game-paper:#efcbc1;--game-ink:#922e28}
#recentSection{border-top:1px solid var(--rule);padding:26px 0}
.recent-list{margin-top:14px}.recent-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.recent-row:last-child{border-bottom:0}.recent-row div{min-width:0}.recent-row strong{display:block;overflow-wrap:anywhere}.recent-row small{color:#555e54}.recent-row a{white-space:nowrap;padding:10px 0}
.gesture-section{padding:34px 0 42px;border-top:3px solid var(--ink)}
.gesture-lead{max-width:830px;margin-top:14px;line-height:1.6}
.gesture-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.gesture-story{min-width:0}.gesture-story h3{margin-bottom:12px}.gesture-story>p{max-width:530px;line-height:1.6}
.gesture-illustration{display:block;width:100%;height:auto;margin:16px 0;mix-blend-mode:multiply}
.gesture-caption{font-size:16px;font-weight:700}.gesture-tech,.prototype-note{font-size:13px;color:#586057;margin-top:18px;border-left:3px solid var(--rule);padding-left:12px}
.exchange-preview{min-width:0;padding:14px 0;border-left:1px solid var(--rule);text-align:center}
.preview-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;font-size:13px}
.preview-controls label{display:flex;gap:8px;align-items:center;cursor:pointer;min-height:44px}
.preview-controls input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--green)}
.icon{width:44px;min-height:44px;flex-shrink:0;padding:0;font-size:28px;color:var(--ink);background:transparent;border:0}
.icon:hover{background:#e4e8dc}
.phone-pair{display:flex;align-items:center;flex-direction:column;position:relative}
.demo-phone{position:relative;width:224px;max-width:100%;border:7px solid #2d302c;border-radius:20px;background:#f5e638;padding:14px 12px;color:#165b28;box-shadow:3px 4px 0 #22272322}
.receiver-phone{height:170px;padding-bottom:22px}.sender-phone{height:246px;padding-top:22px}
.phone-speaker{position:absolute;left:calc(50% - 20px);width:40px;height:4px;border-radius:2px;background:#2d302c}
.sender-phone .phone-speaker{top:6px}.receiver-phone .phone-speaker{bottom:6px}
.phone-heading{display:flex;align-items:center;gap:9px;text-align:left;font-size:15px;font-weight:700;line-height:1.15}
.phone-heading img{width:28px;height:28px}.phone-heading small{display:block;font-size:10px;font-weight:400;margin-top:3px}
.phone-balance{margin-top:7px;font:600 27px/1.1 Barlow,sans-serif;font-variant-numeric:tabular-nums}
.phone-balance small{font:12px Arial,sans-serif}
.contact-indicator{height:32px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--green)}
.contact-indicator:before{content:'';width:7px;height:7px;background:currentColor;border-radius:50%}
[data-near=false] .contact-indicator{color:var(--red)}
.swipe-direction{position:absolute;top:106px;left:0;right:0;font-size:28px;line-height:1}
.banknote{width:180px;height:84px;min-height:84px;border:4px double #28613d;border-radius:0;color:#184a2c;background:#c1db9c;box-shadow:2px 3px 0 #28613d33;position:absolute;left:calc(50% - 90px);bottom:12px;display:flex;justify-content:space-between;gap:4px;align-items:center;padding:10px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .18s ease}
.banknote:hover{background:#b1d58a}.banknote:disabled{opacity:.45}
.banknote img{width:44px;height:44px;pointer-events:none}.banknote .note-corner{position:absolute;left:6px;top:2px;font:bold 11px Georgia,serif}
.note-face{display:flex;flex-direction:column;line-height:1}.note-face strong{font:bold 32px/1 Georgia,serif}.note-face small{font:700 10px/1.4 Arial,sans-serif}
.dragging .banknote{transition:none;cursor:grabbing;z-index:2}
.received-note{height:36px;width:180px;margin:10px auto 0;border:2px solid #28613d;background:#c1db9c;display:flex;align-items:center;justify-content:center;gap:18px;font:bold 23px Georgia,serif;opacity:0}
.received-note img{width:25px;height:25px}
[data-state=received] .received-note{opacity:1}
[data-state=sending] #previewNote{visibility:hidden}
.flying-note{position:fixed;bottom:auto;z-index:20;pointer-events:none;margin:0;transition:none;opacity:1!important}
.preview-status{min-height:42px;max-width:310px;margin:14px auto 8px;font-size:13px;line-height:1.4;display:flex;align-items:center;justify-content:center}
.preview-watch{background:#fff;color:var(--ink);margin:auto;padding:7px 14px;font-size:14px}.preview-watch:hover{background:#e4e8dc}
.workshop-section{border-top:3px solid var(--ink);padding:36px 0 52px}
.workshop-section>[data-site-text=conceptBody]{max-width:760px;margin-top:14px;line-height:1.65}
.workshop-link{display:inline-flex;align-items:center;gap:12px;margin-top:22px;min-height:44px;font-weight:700;text-underline-offset:5px}
.workshop-link span{font-size:24px;color:var(--red)}
#atelier-promo,#rejoindre,#gestes,#games-title{scroll-margin-top:20px}
footer{padding-top:20px;padding-bottom:24px;display:flex;justify-content:space-between;gap:16px;border-top:6px solid var(--green);font-size:12px;color:#555e54}
dialog{width:min(460px,calc(100% - 32px));border:3px solid var(--ink);border-radius:2px;padding:24px;color:inherit;background:#faf7ee url('../illustrations/boxboard-paper-1970.jpg') repeat;background-size:628px 628px}
dialog::backdrop{background:#18251888}.dialog-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
dialog p{margin-bottom:18px}dialog label{display:block;font-size:14px;margin-bottom:22px}dialog input{display:block;width:100%;margin-top:8px}dialog button[type=submit]{width:100%}
.google-sign-in{display:flex;align-items:center;flex-direction:column;gap:12px;margin:16px 0 4px}.google-sign-in>span{font-size:13px;color:#555e54}.google-sign-in #googleButton{min-height:44px}
.account-recovery{font-size:13px;line-height:1.5;color:#424b41}
.account-switch{display:block;width:100%;margin-top:14px;min-height:40px;border:0;background:transparent;color:var(--green);text-decoration:underline;text-underline-offset:3px;font-size:14px}.account-switch:hover{background:#e4e8dc}
#error,#createError,#accountError,#linkGoogleError{color:#8d2734;background:#fbe8eb;border-left:4px solid #c34857;padding:12px;margin-bottom:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1440px){.intro{height:460px}.intro-content{padding-top:56px}}
@media(min-width:1001px) and (max-width:1179px){.intro{height:350px}.intro h1{max-width:390px}.intro-content>[data-site-text=tagline]{font-size:23px}}
@media(min-width:651px) and (max-width:1000px){.intro{height:438px}.intro-image{top:auto;bottom:0;height:260px;object-position:72% center}.intro h1{max-width:390px}.intro-content{padding-top:20px}.intro-content>[data-site-text=tagline]{font-size:22px;margin-top:8px;max-width:none}.intro-content p br{display:none}.cover-link{display:none}}
@media(max-width:750px){header{gap:15px;flex-wrap:wrap;padding-top:16px;padding-bottom:12px}header nav{gap:16px;font-size:13px}#server{max-width:none;width:100%;text-align:left;font-size:11px}.account-section{justify-content:flex-start}#accountState{justify-content:flex-start}.gesture-layout{gap:20px}.exchange-preview{padding-left:16px}.preview-controls{gap:2px;font-size:12px}}
@media(max-width:650px){
 header,main,footer{padding-left:20px;padding-right:20px}header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}.brand{width:150px;grid-column:1;grid-row:1}.account-button{grid-column:2;grid-row:1}header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;margin-left:0;gap:10px}header nav a{padding:6px 0}#server{grid-column:1/-1;grid-row:3}
 .intro{height:376px}.intro-image{top:auto;bottom:0;height:218px;object-position:72% center}.intro-content{padding:20px}.intro h1{max-width:350px}.intro-content>[data-site-text=tagline]{font-size:20px;margin-top:8px;max-width:none}.intro-content p br{display:none}.cover-link{display:none}
 h2{font-size:26px}.introduction{padding:22px 0}.introduction h2{font-size:24px}.introduction p{font-size:15px}
 .arrival{align-items:stretch;flex-direction:column;gap:16px;padding:24px 0}#joinForm{max-width:none}#joinCode{width:100%}#joinForm button{padding:10px 12px;flex-shrink:0}#joinForm button img{display:none}
 .section-heading{gap:12px;align-items:flex-start}.gesture-section .section-heading{flex-direction:column}.gesture-section{padding:28px 0}.gesture-layout{grid-template-columns:1fr;gap:24px}.gesture-illustration{max-width:440px;margin:16px auto}.gesture-story>p{font-size:15px}.gesture-story .prototype-note{font-size:12px}.exchange-preview{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0}.preview-controls{font-size:13px;gap:12px}
 .games{grid-template-columns:minmax(0,1fr);gap:22px}.game-body{padding:20px}.game-art{min-height:148px}.game h3{font-size:25px}
 .workshop-section{padding:28px 0 36px}footer{flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}