.common-game{--common-ink:#243f43;--common-green:#276956;box-sizing:border-box;width:min(1120px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;border:1px solid #d5dfd7;border-radius:24px;color:var(--common-ink);background:#f8f5ec;font-family:inherit;box-shadow:0 24px 100px #132d374d;overflow:hidden}
.common-game[open]{display:flex;flex-direction:column}.common-game::backdrop{background:#153a3b99}.common-game *{box-sizing:border-box}.common-game button,.common-game select{font:inherit;min-height:44px;border:1px solid #b5c5ba;border-radius:12px;padding:10px 16px;color:var(--common-ink);background:#fffcf4;cursor:pointer}.common-game button:hover:not(:disabled){background:#e7efdf}.common-game :focus-visible{outline:3px solid #b76130;outline-offset:3px}.common-game button:disabled{cursor:default}.common-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 28px 12px;flex-shrink:0}.common-eyebrow{font-size:.68rem;font-weight:750;letter-spacing:.15em;color:#52726b}.common-head h2{font-family:Georgia,serif;font-size:clamp(1.5rem,3vw,2.35rem);letter-spacing:-.04em;margin:5px 0}.common-head h2 span{color:#c17b45;padding-left:14px}.common-head button{flex-shrink:0}.common-tabs{display:flex;gap:6px;padding:0 28px 12px;flex-shrink:0;border-bottom:1px solid #dce2d5}.common-tabs button{border:none;background:transparent;font-size:.85rem}.common-tabs [aria-current]{background:#dce9dc;border-radius:12px;font-weight:750}.common-scroll{flex:1;min-height:0;overflow:auto;padding:20px 28px;overscroll-behavior:contain}.common-intro{text-align:center;max-width:650px;margin:0 auto}.common-intro h3{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.3rem);font-weight:500;line-height:1.06;letter-spacing:-.045em;margin:12px 0}.common-intro p{font-size:.95rem;line-height:1.6;max-width:520px;margin:12px auto}.common-example{display:flex;align-items:center;justify-content:center;gap:20px;font-size:.8rem;color:#52726b}.common-example img{width:88px;height:88px}.common-example img:last-child{width:60px;height:60px;transform:rotate(14deg)}.common-game fieldset{border:0;padding:0;margin:18px 0}.common-game legend{font-weight:700;margin-bottom:10px}.common-worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.common-world{position:relative;display:flex;flex-direction:column;align-items:center;background:#fffcf4;border:2px solid #e1e4d8;border-radius:18px;padding:12px;cursor:pointer}.common-world:has(input:checked){border-color:#38735f;background:#eaf0df}.common-world input{position:absolute;left:12px;top:12px;accent-color:#276956;width:20px;height:20px}.common-world img{width:65px;height:65px}.common-world span{font-size:.75rem;margin-top:5px}.common-options{display:grid;grid-template-columns:1fr 1fr;gap:20px}.common-options label{display:grid;gap:6px;font-size:.85rem;font-weight:650}.common-options select{width:100%}.common-game form>p{font-size:.8rem;color:#52726b}.common-toolbar{flex-shrink:0;border-top:1px solid #d5dfd0;background:#edf0e4;padding:10px 28px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 16px}.common-toolbar p{margin:0;font-size:.8rem}.common-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.common-toolbar .common-primary{background:#276956;border-color:#276956;color:white;font-weight:700}.common-toolbar .common-primary:hover{background:#1b5444}.common-status{grid-column:1/-1;line-height:1.4;min-height:1.4em}.common-round{display:flex;align-items:center;justify-content:space-between;gap:15px}.common-round h3{font-family:Georgia,serif;font-size:1.7rem;margin:5px 0}.common-round>span{font-size:.8rem;text-align:right;line-height:1.5}.common-instruction{text-align:center;margin:8px 0 16px;font-size:.9rem}.common-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.common-card{border:2px solid #d3dccd;background:#fffdf8;border-radius:32px;padding:12px;box-shadow:0 7px 0 #e8e4d6}.common-card h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;text-align:center;color:#668075;margin:0 0 7px}.common-symbols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.common-game .common-symbol{border:2px solid transparent;border-radius:16px;padding:3px;min-width:44px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;opacity:1;color:#38534e}.common-symbol img{display:block;max-width:100%;height:clamp(48px,8.5vw,100px);object-fit:contain}.common-symbol span{font-size:.66rem;line-height:1.2;text-align:center;overflow-wrap:anywhere;max-width:100%;margin-top:5px}.common-game .common-found{border:2px dashed #327354;background:#e3efdb}.common-three{grid-template-columns:repeat(3,minmax(0,1fr))}.common-paused{display:grid;place-content:center;text-align:center;min-height:250px}.common-paused>span{font-size:3rem;color:#4d7a64}.common-paused h3{font-family:Georgia,serif;font-size:2rem;margin:12px 0}.common-info{max-width:850px;margin:auto;line-height:1.7}.common-info h3,.common-ending h3{font-family:Georgia,serif;font-size:1.8rem;margin:0 0 10px}.common-info h4{margin-bottom:0}.common-guide{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.common-guide figure{margin:0;text-align:center;font-size:.75rem}.common-guide img{width:80px;max-width:100%;height:80px}.common-ending{border:1px solid #b5c5ad;background:#e7eedb;padding:20px;border-radius:16px;margin-bottom:22px}.common-catalogue-art{display:flex;justify-content:center;gap:5px}.common-catalogue-art img{width:65px;height:65px}.common-catalogue-art img:last-child{transform:rotate(15deg);width:48px}.common-catalogue-card{background:#eef0df!important;color:#243f43!important}
@media(max-width:700px){.common-head{padding:12px 16px 8px}.common-head .common-eyebrow{font-size:.55rem;letter-spacing:.08em}.common-head h2 span{display:none}.common-head button{padding:8px;font-size:.8rem}.common-tabs{padding:0 12px 8px;gap:0}.common-tabs button{padding:8px;font-size:.75rem}.common-scroll{padding:14px}.common-cards{gap:10px}.common-card{padding:6px;border-radius:20px}.common-symbols{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.common-game .common-symbol{min-height:82px;padding:2px}.common-symbol img{height:58px}.common-toolbar{padding:8px 14px;grid-template-columns:1fr}.common-toolbar>div{grid-row:1}.common-status{grid-column:1}.common-round h3{font-size:1.3rem}.common-guide{grid-template-columns:repeat(3,1fr)}.common-worlds{gap:6px}.common-world{padding:12px 5px}.common-world strong{font-size:.8rem}.common-world span{font-size:.65rem}.common-world img{width:52px;height:60px}.common-options{gap:10px}.common-three{grid-template-columns:1fr}.common-world input{left:5px;top:5px}.common-game{width:calc(100vw - 8px);height:calc(100dvh - 8px);border-radius:15px}}
@media(max-height:500px) and (min-width:550px){.common-head{padding:6px 16px}.common-head .common-eyebrow{display:none}.common-head h2{font-size:1.4rem}.common-tabs{padding-bottom:2px}.common-scroll{padding:8px 16px}.common-symbols{grid-template-columns:repeat(4,minmax(0,1fr))}.common-symbol img{height:48px}.common-game .common-symbol{min-height:76px}.common-toolbar{padding:5px 16px;grid-template-columns:1fr auto}.common-toolbar>div{grid-row:auto}.common-round h3{font-size:1.1rem}.common-instruction{margin:2px 0 6px}}
/* Give the task the space before decorative headings, including at enlarged text. */
.common-intro h3{font-size:clamp(1.6rem,3vw,2.3rem);margin:8px 0}.common-intro h3 br{display:none}.common-intro p{margin:8px auto}.common-example img{width:60px;height:60px}.common-example img:last-child{width:45px;height:45px}.common-game fieldset{margin:12px 0}.common-status{max-height:5.6em;overflow:auto}
@media(max-width:700px){.common-head .common-eyebrow{display:none}.common-head h2{font-size:1.15rem;letter-spacing:-.04em}.common-head{gap:6px;padding:8px 12px}.common-tabs button{padding:6px;font-size:.7rem}.common-toolbar button{font-size:.8rem;padding:8px 10px}.common-toolbar>div{gap:5px}.common-round h3{font-size:1.1rem}.common-round .common-eyebrow{font-size:.6rem}.common-round>span{font-size:.7rem}.common-instruction{font-size:.8rem;margin:4px 0 8px}.common-symbol span{font-size:.65rem}.common-scroll{padding:10px}.common-symbol img{height:50px}.common-game .common-symbol{min-height:78px}}
.common-game button{min-width:44px}.common-head>div{min-width:0}.common-head h2{overflow-wrap:anywhere}.common-head>button{max-width:50%}

[data-common-preview][hidden]{display:none!important}
/* Short screens need document-style reflow: do not reserve more chrome than
   the viewport can hold. Every picture, control and warning remains reachable. */
@media(max-height:500px){
    .common-game{overflow:auto;overscroll-behavior:contain}
    .common-game[open]{display:block}
    .common-head{flex-wrap:wrap}
    .common-tabs{flex-wrap:wrap}
    .common-scroll{overflow:visible;min-height:180px}
    .common-toolbar{grid-template-columns:minmax(0,1fr)}
    .common-toolbar>div{grid-row:1;min-width:0}
    .common-status{max-height:none;overflow:visible;overflow-wrap:anywhere}
}

/* Measured overflow also covers enlarged text on taller, narrow screens. */
.common-game.common-reflow{overflow:auto;overscroll-behavior:contain}
.common-game.common-reflow[open]{display:block}
.common-game.common-reflow .common-head,.common-game.common-reflow .common-tabs{flex-wrap:wrap}
.common-game.common-reflow .common-scroll{overflow:visible;min-height:180px}
.common-game.common-reflow .common-toolbar{grid-template-columns:minmax(0,1fr)}
.common-game.common-reflow .common-toolbar>div{grid-row:1;min-width:0}
.common-game.common-reflow .common-status{max-height:none;overflow:visible;overflow-wrap:anywhere}
/* Every match uses the identical cell of the illustrated atlas. */
.common-art{display:inline-block;flex-shrink:0;width:80px;height:80px;background-size:800% 800%;background-repeat:no-repeat;mix-blend-mode:multiply;font-style:normal;vertical-align:middle}.common-protea{background-image:url('/assets/common/southafrica-atlas.png');background-position:0 0}.common-symbol .common-art{width:clamp(54px,8vw,96px);height:clamp(54px,8vw,96px);max-width:none}.common-world .common-art{width:72px;height:72px}.common-guide .common-art{width:80px;height:80px;max-width:100%}.common-example .common-art{width:64px;height:64px}.common-catalogue-art .common-art{width:80px;height:80px}.common-catalogue-art .common-art:last-child{width:60px;height:60px;transform:rotate(12deg)}
@media(max-width:700px){.common-symbol .common-art{width:58px;height:58px}.common-world .common-art{width:54px;height:54px}.common-guide .common-art{width:65px;height:65px}}
.common-art{display:inline-flex;align-items:center;justify-content:center;background-image:none}.common-illustration{display:block;flex-shrink:0;background-repeat:no-repeat}
