:root { --navy:#08233c; --cream:#fff9ec; --gold:#bd903c; }
body { display:block; background:#efe7d2; padding:24px; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #008bcc; outline-offset:5px; }
.home { position:relative; display:grid; grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr); max-width:1440px; margin:auto; overflow:hidden; border:1px solid #d4b267; border-radius:24px; background:var(--cream); box-shadow:0 16px 60px #08233c20; }
.home-tools { position:absolute; z-index:2; right:20px; top:20px; display:flex; gap:10px; }
.tool { display:grid; place-items:center; width:46px; height:46px; border:2px solid var(--gold); border-radius:50%; background:#fff9ecf5; color:var(--navy); cursor:pointer; box-shadow:0 3px 10px #08233c18; }
.tool svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover { background:#f4e4bf; }
.tool.effects-toggle { width:auto; padding:0 12px; font:600 12px system-ui,sans-serif; }
.welcome { padding:58px 42px 30px; text-align:center; align-self:center; }
.eyebrow { margin:0 0 22px; color:#875820; font:600 11px/1.5 system-ui,sans-serif; letter-spacing:.32em; }
.game-title { margin:0; }
.monopoly { display:block; padding:12px 8px 15px; border:3px solid var(--gold); border-radius:9px; background:linear-gradient(145deg,#ed2628,#b90010); color:#fff9ec; font:bold clamp(32px,4.2vw,61px)/1 Georgia,serif; letter-spacing:-.055em; box-shadow:inset 0 0 0 3px #fff0bd,0 5px 0 #08233c0a; text-shadow:2px 3px 0 #591c0a; }
.edition { display:block; margin:16px 0 0; padding-bottom:16px; border-bottom:2px solid var(--gold); font:bold clamp(21px,2.3vw,33px)/1.2 Georgia,serif; letter-spacing:.02em; }
.tagline { margin:22px 0 14px; font:bold clamp(24px,2.3vw,33px)/1.25 Georgia,serif; }
.game-promise { margin:0 0 24px; color:#876125; font:700 12px/1.5 system-ui,sans-serif; letter-spacing:.13em; }
.play-menu { display:grid; gap:12px; }
.live-counts { display:flex;justify-content:center;gap:22px;margin-top:22px;font:13px/1.5 system-ui,sans-serif; }
.live-counts strong { display:block;font:bold 26px/1.3 Georgia,serif;color:var(--navy); }
#live-status { margin:8px 0 0;font-size:11px; }
.watch-list { display:grid;gap:12px;max-height:50vh;overflow:auto; }
.watch-game { display:grid;gap:6px;padding:16px;border:1px solid #bd903c;border-radius:10px;background:white;color:#08233c;text-decoration:none;font:15px/1.5 system-ui,sans-serif; }
.watch-game:hover { background:#f2e6cb; }
.watch-game span { font-size:12px;color:#4c5b65; }
.play-button { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:62px; padding:12px 16px; border:2px solid var(--navy); border-radius:12px; background:#fffdf6; color:var(--navy); font:bold clamp(17px,1.7vw,24px)/1.25 Georgia,serif; cursor:pointer; box-shadow:0 4px 0 #08233c10; transition:background .15s,transform .15s; }
.play-button.primary { background:var(--navy); color:var(--cream); border-color:var(--gold); box-shadow:inset 0 0 0 2px #fff9ec20,0 4px 0 #08233c10; }
.play-button:hover { background:#f2e6cb; transform:translateY(-2px); }
.play-button.primary:hover { background:#143e5c; }
.play-button span { font:36px/1 system-ui,sans-serif; }
.play-button svg { flex:none; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.help-link { margin:20px 0 0; padding:5px 10px; border:0; background:none; color:var(--navy); text-decoration:underline; text-underline-offset:4px; font:18px Georgia,serif; cursor:pointer; }
.room-note { margin:14px 0 20px; font:italic 15px/1.6 Georgia,serif; color:#4c5b65; }
.room-note span { display:block; font:12px/1.7 system-ui,sans-serif; }
.home-links { display:flex; justify-content:center; align-items:center; gap:16px; }
.home-links a { color:var(--navy); font:600 13px/1.5 system-ui,sans-serif; text-decoration:none; padding:6px; }
.home-links a:hover { text-decoration:underline; }
.location { margin:20px 0 0; color:#876125; font:600 9px/1.5 system-ui,sans-serif; letter-spacing:.26em; }
.local-art { position:relative; display:flex; flex-direction:column; justify-content:center; gap:0; padding:88px 24px 28px 0; background:linear-gradient(160deg,#fff9ec 10%,#f3dfab 65%,#dac183); }
.school-photo { position:relative; z-index:1; margin:0; padding:5px; border:2px solid var(--gold); border-radius:16px; background:var(--cream); box-shadow:0 8px 30px #08233c20; }
.school-photo img { width:100%; height:auto; display:block; border-radius:9px 9px 0 0; }
.school-photo figcaption { display:flex; justify-content:space-between; gap:10px; padding:10px 8px 5px; font:600 12px/1.5 system-ui,sans-serif; }
.school-photo figcaption span { font-weight:400; font-size:10px; }
.board-art { position:relative; overflow:hidden; aspect-ratio:3.2; margin:18px -24px 0 -20px; }
.board-art img { position:absolute; width:100%; height:auto; top:0; left:0; transform:translateY(-58.8%); }
.art-caption { align-self:center; margin:12px 0 0; padding:12px 28px; border:2px solid var(--gold); border-radius:10px; background:var(--navy); color:var(--cream); text-align:center; font:bold clamp(16px,1.7vw,24px)/1.2 Georgia,serif; letter-spacing:.04em; }
@media(min-width:1600px) { body { padding-top:40px; } }
@media(max-width:900px) { body { padding:12px; } .home { grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr); } .welcome { padding:52px 22px 26px; } .local-art { padding-right:16px; } .school-photo figcaption { display:block; } .school-photo figcaption span { display:block; } .board-art { margin-right:-16px; } }
@media(max-width:680px) { body { padding:0; } .home { border:0; border-radius:0; display:flex; flex-direction:column; } .home-tools { top:12px; right:12px; } .tool { width:38px; height:38px; } .tool svg { width:20px; height:20px; } .welcome { width:100%; padding:70px 24px 26px; } .eyebrow { margin-bottom:18px; font-size:10px; } .monopoly { font-size:clamp(38px,10vw,64px); } .edition { font-size:clamp(22px,6vw,35px); } .tagline { font-size:28px; } .play-button { font-size:21px; } .local-art { padding:0 18px 28px; } .school-photo figcaption { display:flex; } .board-art { margin-left:-18px; margin-right:-18px; } .location { margin-top:14px; } }
@media(prefers-reduced-motion:reduce) { .play-button { transition:none; } }
.monopoly { border:0; border-radius:0; padding:0; background:none; color:var(--navy); box-shadow:none; text-shadow:none; font-size:clamp(40px,4.7vw,67px); letter-spacing:-.04em; }
.edition { margin-top:12px; color:var(--navy); }
.home { border-radius:16px; }
.combined-art { display:block; padding:0; background:#fff9ec; }
.combined-scene { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media(max-width:680px) { .home { border-radius:0; } .monopoly { font-size:clamp(40px,11vw,68px); } .combined-art { padding:0; } .combined-scene { height:auto; } }
@media(max-width:680px) {
  .combined-art { order:-1; }
  .combined-scene { height:clamp(220px,36svh,320px); object-fit:cover; }
  .welcome { padding:24px 24px 26px; }
  .eyebrow { margin-bottom:10px; }
  .tagline { margin:16px 0 10px; font-size:24px; }
  .game-promise { margin-bottom:16px; }
}