/* Original world surfaces. Piece assets and clocks remain legible with effects off. */
body[data-world]{background:var(--world-paper,var(--paper));color:var(--world-ink,var(--ink));transition:background-color .4s,color .4s}
body[data-world] .board-frame{border-color:var(--world-frame,#566f50)}
body[data-world] .clock{position:relative;isolation:isolate;min-width:74px;font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap;transition:background-color .2s,color .2s}
body[data-world] .clock.low-time{color:#fff;background:#a64042!important;box-shadow:0 0 0 2px #e0a798}
body[data-world] .clock.active{font-weight:750}
body[data-world] .world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
body[data-world] .world-option{padding:0;overflow:hidden;text-align:left;border:1px solid #c8cfc3;border-radius:12px;background:#f8faf4;color:#294137}
body[data-world] .world-option[aria-pressed=true]{outline:3px solid var(--world-accent);outline-offset:3px}
body[data-world] .world-option img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
body[data-world] .world-option .world-copy{display:block;padding:14px}
body[data-world] .world-option strong{font-family:Georgia,serif;font-size:20px;font-weight:normal;display:block}
body[data-world] .world-option small{display:block;font-size:11px;line-height:1.7;color:#788378;margin-top:6px}
body[data-world=classic] .clock[data-color=w]{border:1px solid #c4cbb6;border-bottom:3px solid #899b7c;background:#eef0e3;color:#344d3d;border-radius:6px}
body[data-world=classic] .clock[data-color=b]{border:1px solid #6c7f69;border-bottom:3px solid #293d30;background:#405443;color:#edf0e3;border-radius:6px}
body[data-world=classic] .clock.active{box-shadow:0 0 0 2px #a6ba91}
body[data-world=immortals] .board-frame{border-width:7px;box-shadow:0 0 0 1px #c9a976,0 10px 28px #5c482423}
body[data-world=immortals] .square{background-image:repeating-linear-gradient(116deg,transparent 0 12px,#fff2 13px,transparent 14px 30px)}
body[data-world=immortals] .clock[data-color=w]{border:1px solid #af8747;border-top:3px solid #b98e43;border-bottom:3px solid #b98e43;border-radius:3px 3px 11px 11px;background:linear-gradient(90deg,#d5b574 0 5%,transparent 5% 95%,#d5b574 95%),linear-gradient(120deg,#fff2cc,#e4c68d);color:#594829;padding-left:18px;padding-right:18px}
body[data-world=immortals] .clock[data-color=w]:after{content:'◆';position:absolute;left:5px;top:50%;transform:translateY(-50%);color:#287b82;font-size:8px}
body[data-world=immortals] .clock[data-color=b]{border:2px solid #9b7747;border-radius:3px 3px 13px 13px;background:linear-gradient(90deg,#aa5549 0 7%,transparent 7% 93%,#aa5549 93%),linear-gradient(130deg,#5c4e3c,#292e2b);color:#f1d49c;padding-left:19px;padding-right:19px}
body[data-world=immortals] .clock[data-color=b]:after{content:'';position:absolute;bottom:3px;left:23%;right:23%;height:2px;border-top:1px solid #c49b5b;border-bottom:1px solid #c49b5b}
body[data-world=immortals] .clock.active{box-shadow:0 0 0 2px #c9ac70,0 3px 9px #795e3c35}
body[data-world=crusades] .board-frame{border-width:7px;box-shadow:0 0 0 1px #9aaf9b,0 10px 28px #244c4724}
body[data-world=crusades] .square{background-image:linear-gradient(145deg,#fff2,transparent 45%,#163a3510)}
body[data-world=crusades] .clock[data-color=w]{border:2px solid #91a1a2;border-top:4px solid #3f6890;border-radius:15px 15px 4px 4px;background:linear-gradient(90deg,#b8c5c3 0 5%,transparent 5% 95%,#b8c5c3 95%),linear-gradient(130deg,#ffffef,#dde3db);color:#344b62;padding-left:19px;padding-right:19px}
body[data-world=crusades] .clock[data-color=w]:after{content:'';position:absolute;bottom:3px;left:33%;right:33%;height:1px;background:#3f6890}
body[data-world=crusades] .clock[data-color=b]{border:2px solid #b39b68;border-top-width:3px;border-radius:24px 24px 5px 5px;background:linear-gradient(90deg,#9c8553 0 4%,transparent 4% 96%,#9c8553 96%),linear-gradient(130deg,#42776b,#1c4540);color:#f4ddab;padding-left:20px;padding-right:20px}
body[data-world=crusades] .clock[data-color=b]:after{content:'◇';position:absolute;bottom:0;left:48%;font-size:8px;line-height:8px;color:#d5b773}
body[data-world=crusades] .clock.active{box-shadow:0 0 0 2px #b7c2a5,0 3px 9px #335b4235}
body[data-world=cosmos] .board-frame{border-width:7px;box-shadow:0 0 0 1px #8ba7bd,0 0 22px #40b3c526,0 12px 30px #18294028}
body[data-world=cosmos] .square{background-image:linear-gradient(135deg,#faffff16,transparent 45%),linear-gradient(90deg,#bbf7ff13 1px,transparent 1px),linear-gradient(#bbf7ff13 1px,transparent 1px)}
body[data-world=cosmos] .square.dark{background-image:linear-gradient(135deg,#55cad412,transparent 60%),linear-gradient(90deg,#dcbbff19 1px,transparent 1px),linear-gradient(#dcbbff19 1px,transparent 1px)}
body[data-world=cosmos] .clock[data-color=w]{border:1px solid #62b9c8;border-top:3px solid #80e3ed;border-radius:3px 13px 3px 13px;background:linear-gradient(120deg,#e9ffff,#acd9e3);color:#244b65;padding-left:18px;padding-right:18px;box-shadow:inset 0 0 0 3px #eefcff66}
body[data-world=cosmos] .clock[data-color=w]:after{content:'';position:absolute;bottom:4px;left:20%;right:20%;height:1px;background:#5abdc9;box-shadow:0 2px 0 #5abdc933}
body[data-world=cosmos] .clock[data-color=b]{border:1px solid #bb91d8;border-top:3px solid #cc8fe0;border-radius:13px 3px 13px 3px;background:linear-gradient(120deg,#664087,#302145);color:#f4d9fc;padding-left:18px;padding-right:18px;box-shadow:inset 0 0 0 3px #a06dc222}
body[data-world=cosmos] .clock[data-color=b]:after{content:'';position:absolute;bottom:4px;left:20%;right:20%;height:1px;background:#e49bcf;box-shadow:0 2px 0 #e49bcf33}
body[data-world=cosmos] .clock.active{box-shadow:0 0 0 2px #97b8d5,0 0 14px #7bafea44}
body[data-world] .square.capture-flash:before{content:'';position:absolute;inset:8%;border:2px solid var(--world-accent);border-radius:50%;z-index:5;pointer-events:none;animation:javi-capture .4s ease-out both}
@keyframes javi-capture{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.3)}}
body[data-world] .board-frame.victory{animation:javi-victory .8s ease-out 1}
@keyframes javi-victory{30%{box-shadow:0 0 0 5px var(--world-accent),0 0 35px #d7c88566}100%{box-shadow:0 10px 28px #244c4724}}
body[data-effects=off] .capture-flash:before{display:none}
body[data-effects=off] .board-frame.victory{animation:none}
body[data-effects=off] .square{background-image:none!important}
@media(max-width:650px){body[data-world] .board-frame{border-width:4px}body[data-world] .clock{min-width:69px;font-size:18px;padding-top:6px;padding-bottom:6px}.world-grid{gap:12px!important}body[data-world] .world-option .world-copy{padding:10px}body[data-world] .world-option strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){body[data-world],body[data-world] .clock{transition:none}body[data-world] .capture-flash:before,body[data-world] .board-frame.victory{animation:none}}

/* Mesopotamia: alabaster palace relief against glazed lapis brickwork. */
body[data-world=mesopotamia] .board-frame{border-width:7px;border-style:double;box-shadow:0 0 0 2px #b28c4f,0 12px 30px #3c334e30}
body[data-world=mesopotamia] .square.light{background-image:repeating-linear-gradient(173deg,transparent 0 18px,#805c3010 19px,transparent 20px 35px)}
body[data-world=mesopotamia] .square.dark{background-image:linear-gradient(0deg,transparent 48%,#ead9b91c 49% 51%,transparent 52%),linear-gradient(90deg,transparent 48%,#ead9b91c 49% 51%,transparent 52%)}
body[data-world=mesopotamia] .clock[data-color=w]{border:2px solid #b08c56;border-top:5px double #b08c56;border-radius:2px;background:linear-gradient(90deg,#774b82 0 7%,transparent 7% 93%,#774b82 93%),linear-gradient(120deg,#ffefcf,#cfb48e);color:#403046;padding:8px 19px;box-shadow:0 3px 0 #78634e}
body[data-world=mesopotamia] .clock[data-color=w]:after{content:'';position:absolute;bottom:2px;left:20%;right:20%;height:2px;border-top:1px solid #774b82;border-bottom:1px solid #774b82}
body[data-world=mesopotamia] .clock[data-color=b]{border:2px solid #d0a65d;border-top:5px dashed #d0a65d;border-radius:11px 11px 2px 2px;background:linear-gradient(90deg,#d0a65d 0 5%,transparent 5% 95%,#d0a65d 95%),repeating-linear-gradient(0deg,transparent 0 11px,#d0a65d20 12px,transparent 13px),linear-gradient(120deg,#326a9c,#183a64);color:#fff0cc;padding:8px 20px;box-shadow:0 3px 0 #142e4e}
body[data-world=mesopotamia] .clock.active{box-shadow:0 0 0 2px #d6b676,0 4px 12px #3c334e35}
body[data-world] .clock.low-time{color:#fff!important}
@media(max-width:650px){body[data-world=mesopotamia] .board-frame{border-width:4px}}