/* A sunny Italian postcard; original game layout and controls stay intact. */
:root{--paper:#fbf4df;--ink:#244d61;--muted:#67736d;--red:#b94d35;--red-dark:#963920;--line:#d9d6ba;--cream:#fffdf3;--sage:#58734a}
body{background-image:radial-gradient(#b6a67412 .7px,transparent .7px);background-size:5px 5px}
body:before{content:'';height:5px;display:block;background:linear-gradient(90deg,#537852 0 33.333%,#fffdf3 33.333% 66.666%,#ba4b34 66.666%)}
.site-header{border-bottom:1px solid #bfc9b6;padding-top:23px}
.brand{font-family:var(--serif);font-size:22px;font-weight:600}
.brand-icon{color:#bd7c1d;font-family:var(--sans)}
.brand-dot{color:var(--red)}
.italian-flag{width:18px;height:12px;background:linear-gradient(90deg,#537852 0 33.333%,#fffdf3 33.333% 66.666%,#ba4b34 66.666%);box-shadow:0 0 0 1px #c9c9ad;border-radius:1px}
.intro{padding:45px 0 41px;gap:36px;position:relative}
.intro-copy{position:relative;z-index:1}
.intro .eyebrow{color:#9c553b;font-size:9px;letter-spacing:1.65px}
h1{font-size:clamp(49px,6vw,77px);letter-spacing:-2.8px;margin-bottom:19px}
h1 em{color:var(--red)}
.lead{color:#5b6d70}
.intro-signature{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--ink);margin:20px 0 0}
.intro-signature span{color:var(--red);margin-left:7px}
.postcard{width:290px;flex-shrink:0;transform:rotate(5deg);margin:0 14px 0 0;position:relative;text-align:center}
.postcard img{display:block;width:100%;height:auto;box-shadow:3px 6px 0 #d4caac60,0 7px 15px #755f2420}
.postcard:before{content:'';display:block;position:absolute;width:80px;height:23px;background:#e9d297b0;top:-9px;left:100px;z-index:1;transform:rotate(-11deg);border:1px solid #d5ba7238}
.postcard>span{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:14px;color:#6e7759}
.visit-card{background:#f2eacb;border-color:#dfd4a9;border-top:3px solid #c89835;border-radius:2px 2px 5px 5px}
.visit-card>.eyebrow{color:#7f673b;font-size:8px;letter-spacing:1.35px}
.visit-card h2{color:var(--ink)}
.card-divider,.example-note{border-color:#d4c694}
.score strong{color:var(--ink)}
.progress-track{background:#d9d4b5}
.board-heading .eyebrow{color:#5a7680}
.size-tag{border-color:#b4c8ca;color:#446c7b;background:#f0f3e8}
.board-paper{position:relative;border:1px solid #a9bec0;box-shadow:4px 5px 0 #d4ddcc;padding-top:23px;background:#fffdf4}
.board-paper:before{content:'';position:absolute;inset:0 0 auto;height:6px;background:repeating-linear-gradient(90deg,#477888 0 17px,#fffdf3 17px 34px);border-radius:2px 2px 0 0}
.paper-top{color:#577a82}
.bingo-cell{background:#f3f4e7;border-color:#ccd7c6;color:#31596b;border-radius:3px}
.cell-number{color:#688481}
.bingo-cell.selected{background:#f4d5b7;border-color:#c7835a;color:#863a25}
.bingo-cell.winning{background:#dee8ce;border-color:#7d995c;color:#3c5b31}
.paper-bottom{color:#657c76}
.paper-bottom>span:last-child{color:#bd871f}
.sound-card{background:#f3f3e6;border-color:#c8d2bc}
.sound-card textarea{background:#fffdf5;border-color:#c4cdb8;color:var(--ink)}
.instructions li>span{color:#b96c36}
.bingo-banner{background:#e8eccf;border-color:#a4b87d}
footer{color:#65736b;border-color:#c6cdb4}
dialog{border-color:#c6cdb4;background:#fffaf0}
.win-dialog{background:radial-gradient(ellipse at top,#f9e8a5,transparent 64%),#fffaf0}
.win-star{color:#bb811d}
.size-picker input:checked+span{background:#f5dfba}
@media(hover:hover){.bingo-cell:hover{background:#e8edda;border-color:#729599}.bingo-cell.selected:hover{background:#edc49c}.bingo-cell.winning:hover{background:#d2e0bb}}
@media(max-width:1000px) and (min-width:701px){.postcard{width:215px;margin-right:3px}.postcard:before{left:65px}.intro{gap:20px}.intro .eyebrow{font-size:8px}.intro h1{font-size:59px}.lead{font-size:13px}.sound-heading{flex-wrap:wrap;gap:0}}
@media(max-width:700px){.site-header{padding-top:16px}.brand{font-size:20px}.brand-icon{font-size:29px}.edition{font-size:8px}.intro{padding:29px 0 28px;gap:0}.intro h1{font-size:46px;letter-spacing:-1.6px;max-width:none;margin-bottom:13px}.intro .eyebrow{font-size:7px;letter-spacing:1.05px}.lead{font-size:12px}.intro-signature{font-size:12px;margin-top:13px}.postcard{display:none}.visit-card>.eyebrow{font-size:7px;letter-spacing:1px}.board-paper{padding-top:20px}.board-heading .eyebrow{font-size:7px;letter-spacing:1.4px}.sound-heading{flex-wrap:nowrap}.paper-top{font-size:6px}.board-heading h2{font-size:27px}.win-dialog h2{font-size:76px}}
@media(max-width:370px){.intro h1{font-size:41px}.brand{font-size:17px}.edition{font-size:7px}.intro .eyebrow{font-size:6.5px}.visit-card>.eyebrow{font-size:6px;letter-spacing:.9px}}