/* Shared, self-contained reels: identical on the website and in /play. */
.startReels .online-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.startReels .online-role{min-width:0}.startReels .online-slot{position:relative;overflow:hidden;border:2px solid #a9bfd7;border-radius:14px;background:#fffdf5;color:#071a36;box-shadow:inset 0 13px 20px -18px #293c5d,inset 0 -13px 20px -18px #293c5d}
.startReels .online-slot:after{content:'';position:absolute;pointer-events:none;border-block:2px solid #ff3045;background:linear-gradient(90deg,#ff304511,transparent 20%,transparent 80%,#ff304511)}
.startReels .online-track{display:grid;height:100%;align-items:center;text-align:center}.startReels .online-role-name{font-weight:900;letter-spacing:.06em}.startReels .online-value{display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;font-weight:950;line-height:1.15;padding:4px 8px}.startReels .online-neighbor{color:#66758a;padding:4px;line-height:1.2;overflow:hidden;max-height:36px}.startReels .is-spinning .online-track{animation:start-reel-roll var(--reel-speed,.16s) linear infinite;filter:blur(.5px)}.startReels .online-slot.has-landed{border:3px solid #ffe000;box-shadow:0 0 0 3px #ffe00022}
@keyframes start-reel-roll{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.startReels .is-spinning .online-track{animation:none;filter:none}}
.startReels{max-width:680px;margin:0 auto 22px;padding:20px;text-align:center}
.startReels h2{margin:5px 0 10px;font-size:clamp(22px,4vw,30px)}
.startReelsIntro{max-width:520px;margin:0 auto 18px;line-height:1.5}
.startReels .online-reels{gap:10px;margin:0 auto 16px;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.startReels .online-role-name{color:#ffe000;font-size:12px;min-height:34px;display:flex;align-items:center;justify-content:center;white-space:normal}
.startReels .online-slot{height:170px;border-width:2px}
.startReels .online-track{grid-template-rows:40px 90px 40px}
.startReels .online-slot:after{inset:40px 0}
.startReels .online-value{font-size:clamp(13px,2.5vw,20px);overflow-wrap:anywhere!important}
.startReels .online-neighbor{font-size:11px;overflow-wrap:anywhere!important}
.startReelsResult{margin:14px auto 0;max-width:520px;min-height:3em;line-height:1.5}
@media(max-width:420px){.startReels{padding:14px}.startReels .online-reels{gap:6px}.startReels .online-role-name{font-size:10px}.startReels .online-value{font-size:13px;padding:4px}.startReels .online-neighbor{font-size:10px;padding:4px}}

.allGameModes>summary,.shortLearn>summary{cursor:pointer;padding:16px;font-size:20px;font-weight:800}.allGameModes .compactStart{margin-top:16px}.allGameModes .quickStart{margin-top:18px}.startReelsHelp{font-size:14px;line-height:1.6;color:var(--muted,#bfd0e8)}

body .startReels{box-sizing:border-box;width:calc(100% - 32px);max-width:680px;background:linear-gradient(145deg,#0d3268,#071d40);border:1px solid #426ea8;border-radius:20px;color:#f8fbff;padding:24px;margin:24px auto 32px;text-align:center}
.theme-challenge{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center;gap:24px;max-width:880px;margin-inline:auto}.theme-photo{margin:0;width:100%;max-width:300px}.theme-photo img,.theme-photo-preview{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:14px}.theme-photo-preview{max-width:300px;margin:12px 0}.theme-challenge-copy{min-width:0}.theme-challenge h1,.theme-challenge h2{font-size:clamp(24px,4vw,36px);line-height:1.15;margin:8px 0 14px}.theme-challenge p{line-height:1.5}.theme-challenge:has(.theme-photo[hidden]){grid-template-columns:1fr}.theme-photo[hidden],.theme-photo-preview[hidden]{display:none!important}
#home #dwm-start{max-width:880px;margin:0 auto 24px;padding:22px}.allGameModes{max-width:680px;margin:24px auto;text-align:left}.allGameModes>summary{text-align:center;list-style:none;border:1px solid #ffe000;border-radius:14px;color:#ffe000}.allGameModes>summary::-webkit-details-marker{display:none}.allGameModes>summary:after{content:' ▾'}.allGameModes[open]>summary:after{content:' ▴'}
.homepage .closing .actions{justify-content:center}.homepage .closing{text-align:center}
@media(max-width:600px){.theme-challenge{grid-template-columns:1fr;gap:16px}.theme-photo{max-width:260px;justify-self:center}.theme-challenge-copy{text-align:center}.theme-challenge .btn{white-space:normal}body .startReels{padding:16px}}

/* The game-mode heading needs no decorative tricolour stripe. */
#home .allGameModes .p01Intro h1::after{content:none!important;display:none!important}

/* Shared five-choice list, open on both homepages. */
body .gameModeChoices{box-sizing:border-box;width:calc(100% - 32px);max-width:680px;margin:28px auto;padding:18px;background:#0d2c56;border:1px solid #315b91;border-radius:20px;color:#f8fbff}
.gameModeChoices .p01Intro{padding:18px 14px;text-align:center;border:1px solid #3a70b5;border-radius:22px;background:linear-gradient(110deg,#0c3978,#092755);margin-bottom:10px}
.gameModeChoices .p01Intro :is(h1,h2){margin:0 0 8px;font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.03em}.gameModeChoices .p01Intro p{line-height:1.5;margin:8px 0}.gameModeChoices .howOpen{display:inline-flex;margin-top:4px}
.gameModeChoices .compactChoices{display:grid;gap:10px}.gameModeChoices .recommendedLabel{display:block;color:#ffe52f;font-size:13px;font-weight:900;letter-spacing:.08em;margin:0 0 8px}
body #spelvormen.gameModeChoices .compactChoice{box-sizing:border-box;display:grid;grid-template-columns:32px minmax(0,1fr) 18px;gap:12px;align-items:center;width:100%;min-height:84px;padding:16px;text-align:left;text-decoration:none;cursor:pointer;font:inherit;border:1px solid #426ea8!important;border-radius:16px;background:linear-gradient(145deg,#0d3268,#071d40)!important;color:#fff!important}
body #spelvormen.gameModeChoices .compactChoice b{display:block;font-weight:900;font-size:17px;line-height:1.2}body #spelvormen.gameModeChoices .compactChoice small{display:block;margin-top:5px;line-height:1.4;font-size:14px;color:#c8d5e6!important}
body #spelvormen.gameModeChoices .compactChoice :is(.icon,.arrow,.appLineIcon){color:#ffe000!important}.gameModeChoices .appLineIcon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body #spelvormen.gameModeChoices .compactChoice.is-highlighted-mode{background:#ffe52f!important;color:#081c40!important;border-color:#ffe52f!important}
body #spelvormen.gameModeChoices .compactChoice.is-highlighted-mode small,body #spelvormen.gameModeChoices .compactChoice.is-highlighted-mode :is(.icon,.arrow,.appLineIcon){color:#17315c!important}
body #spelvormen.gameModeChoices .recommendedStart{padding:14px;border:2px solid #426ea8;border-radius:16px;background:#092958}body #spelvormen.gameModeChoices .recommendedStart:has(.is-highlighted-mode){border-color:#ffe52f;background:#193d70}
body #spelvormen.gameModeChoices .compactChoice:focus-visible{outline:3px solid #fff;outline-offset:3px}.gameModeChoices .startAccessNote{text-align:center;font-size:14px;line-height:1.5;margin:20px 8px 4px}
@media(max-width:420px){body .gameModeChoices{padding:12px}body #spelvormen.gameModeChoices .compactChoice{padding:12px;gap:8px;grid-template-columns:27px minmax(0,1fr) 12px}.gameModeChoices .recommendedStart{padding:10px}}

.gameModeChoices .howOpen{background:transparent;color:#fff;border:1px solid #537dad;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800;text-decoration:underline;box-shadow:none}

/* Compact first demonstration on the common entrance. */
.homepage #taartdemo{margin-top:24px;margin-bottom:12px;padding:20px}.homepage #taartdemo h1{font-size:clamp(27px,5vw,34px);line-height:1.15;margin:6px 0 10px}.homepage #taartdemo .startReelsIntro{font-size:16px;line-height:1.45;margin-bottom:14px}.homepage #taartdemo .online-slot{height:134px}.homepage #taartdemo .online-track{grid-template-rows:32px 70px 32px}.homepage #taartdemo .online-slot:after{inset:32px 0}.homepage #taartdemo .online-role-name{min-height:28px}.homepage #taartdemo .startReelsResult{min-height:0;margin-top:12px}.homepage #taartdemo .startReelsHelp{margin:12px auto 0;max-width:520px}.homepage #home-start .theme-challenge-copy{max-width:880px;margin:auto}.homepage #hall-of-fame .home-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.homepage #hall-of-fame figure{margin:0}.homepage #hall-of-fame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}.homepage #hall-of-fame figcaption{font-size:14px;margin-top:8px}.gameModeChoices .compactChoice:active{filter:brightness(1.08)}
@media(max-width:600px){.homepage #hall-of-fame .home-gallery-grid{grid-template-columns:1fr}.homepage #taartdemo{padding:16px;margin-top:16px}.homepage #taartdemo .online-value{font-size:14px}}

.startReelsSound{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:14px}.startReelsSound label{display:flex;align-items:center;gap:5px;min-height:44px;cursor:pointer}.startReelsSound input{width:20px;height:20px;accent-color:#ffe000}.startReelsSound .btn{font-size:13px;padding:8px 12px;min-height:44px}.startReelsSound [role=status]{flex-basis:100%;font-size:13px}.startReelsSound :focus-visible{outline:3px solid #ffe000;outline-offset:4px}