/* The homepage games section: sage green, honey yellow, and original bee art. */
.ww-portal .hpg-section{--hpg-ink:#294b40;--hpg-green:#35664f;--hpg-line:#c7d9c5;margin:6px 0 8px;padding:30px;border:1px solid var(--hpg-line);border-radius:18px;background:#eaf2e4;color:var(--hpg-ink)}
.hpg-section,.hpg-section *{box-sizing:border-box}
.hpg-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:21px}
.ww-portal .hpg-heading h2{color:var(--hpg-ink);font-size:30px;margin:0 0 7px!important}
.ww-portal .hpg-heading p{font-size:15px;line-height:1.6;color:#4e6657}
.ww-portal .hpg-all{display:inline-flex;align-items:center;gap:12px;min-height:44px;flex-shrink:0;font-size:14px;font-weight:700;color:#28533e;text-decoration:underline;text-underline-offset:4px}
.hpg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hpg-card{min-width:0;padding:24px;border-radius:13px;border:1px solid #d9d1aa;background:#fffbeb;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 3px 0 #45603c0b}
.hpg-main-top{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;margin-bottom:13px}
.hpg-main-top>div{min-width:0}
.ww-portal .hpg-card h3{color:#294b40;font-size:29px;line-height:1.18;overflow-wrap:anywhere}
.ww-portal .hpg-label{display:inline-block;color:#755718;font-size:11px;font-weight:700;letter-spacing:.09em;line-height:1.5;text-transform:uppercase;margin-bottom:9px}
.ww-portal .hpg-challenge{font-size:16px;font-weight:700;color:#6f5820;margin-top:9px;line-height:1.5}
.hpg-art{display:block;flex:0 0 135px;width:135px;height:124px;object-fit:contain;margin:0;border:0;box-shadow:none}
.ww-portal .hpg-art{margin:0!important}
.ww-portal .hpg-description{font-size:15px;line-height:1.7;color:#4c6151;max-width:560px;margin:0 0 15px}
.ww-portal .hpg-meta{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:#635423;margin:0 0 21px}
.hpg-meta>span{padding:4px 8px;border:1px solid #e8dcae;border-radius:5px;background:#fff8da;line-height:1.5}
.ww-portal .hpg-play{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:11px 17px;margin-top:auto;border:1px solid #d8b53f;border-radius:7px;background:#f5d66b;color:#394523;font-size:14px;line-height:1.5;font-weight:700;text-decoration:none;box-shadow:0 2px 0 #cfad43}
.ww-portal .hpg-play:hover{background:#efcc51;color:#28391b;text-decoration:none}
.ww-portal .hpg-secondary{background:#f8fcf5;border-color:#c8dac0;justify-content:flex-start}
.hpg-book{display:block;width:44px;height:44px;padding:7px;border-radius:9px;background:#e7f0dc;color:#496c46;margin:0 0 13px!important}
.ww-portal .hpg-secondary h3{font-size:24px;margin-bottom:12px!important}
.ww-portal .hpg-secondary .hpg-description{font-size:14px;margin-bottom:18px}
.ww-portal .hpg-secondary .hpg-play{background:#35664f;border-color:#35664f;color:#fff;box-shadow:0 2px 0 #244a38}
.ww-portal .hpg-secondary .hpg-play:hover{background:#284e3c}
.ww-portal .hpg-note{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:17px;font-size:12px;color:#456047}
.hpg-note span::before{content:'✓';font-weight:700;margin-right:6px;color:#35664f}
.ww-portal .hpg-section a:focus-visible{outline:3px solid #0076aa;outline-offset:4px}
@media(max-width:1000px){.ww-portal .hpg-section{padding:25px}.hpg-grid{gap:16px}.hpg-card{padding:21px}.hpg-art{width:103px;height:100px;flex-basis:103px}.ww-portal .hpg-card h3{font-size:26px}.ww-portal .hpg-secondary h3{font-size:23px}}
@media(max-width:720px){.hpg-grid{grid-template-columns:1fr}.hpg-heading{align-items:flex-start}.hpg-art{width:125px;height:115px;flex-basis:125px}.hpg-secondary{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px}.hpg-book{grid-column:1;grid-row:1/4}.hpg-secondary>h3,.hpg-secondary>.hpg-description,.hpg-secondary>.hpg-play{grid-column:2}.hpg-secondary>.hpg-play{justify-self:start}}
@media(max-width:480px){.ww-portal .hpg-section{padding:20px 15px;border-radius:13px}.hpg-heading{flex-direction:column;gap:6px;margin-bottom:15px}.ww-portal .hpg-heading h2{font-size:27px}.ww-portal .hpg-heading p{font-size:14px}.hpg-card{padding:19px 16px}.hpg-main-top{display:block;position:relative}.hpg-art{position:absolute;top:0;right:0;width:62px;height:58px;margin:0}.ww-portal .hpg-main .hpg-label{display:flex;align-items:center;min-height:58px;padding-right:74px}.ww-portal .hpg-card h3{font-size:24px}.ww-portal .hpg-main h3{overflow-wrap:normal}.ww-portal .hpg-challenge{font-size:14px}.ww-portal .hpg-description{font-size:14px}.ww-portal .hpg-play{font-size:13px;width:100%;padding-inline:13px}.ww-portal .hpg-meta{gap:6px;font-size:10px}.ww-portal .hpg-secondary{display:flex}.hpg-secondary .hpg-book{margin-bottom:12px!important}.ww-portal .hpg-secondary h3{font-size:23px}.ww-portal .hpg-note{font-size:11px;gap:5px 13px}}
@media print{.ww-portal .hpg-section{break-inside:avoid}.hpg-card{box-shadow:none}.hpg-art{width:90px;height:85px;flex-basis:90px}}

/* A second game, with its own plum, cream and gold palette. */
.hpg-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hpg-grid-three .hpg-main-top{display:block;position:relative}
.hpg-grid-three .hpg-art,.hpg-grid-three .hpg-butler-art,.hpg-detective-art{position:absolute;right:0;top:0;width:78px;height:76px;max-width:78px;margin:0!important}
.hpg-grid-three .hpg-butler-art{background-size:auto 125px}
.ww-portal .hpg-grid-three .hpg-label{display:flex;align-items:center;min-height:80px;padding-right:88px;font-size:10px}
.ww-portal .hpg-grid-three h3{font-size:25px;overflow-wrap:normal}
.hpg-detective-art{border-radius:50%;background:url('/assets/games/detective-london.webp') 88% center/auto 100px no-repeat;border:2px solid #e4ce90}
.ww-portal .hpg-detective{background:#f0f5f6;border-color:#a9c5cf}
.ww-portal .hpg-detective :is(h3,.hpg-label,.hpg-challenge){color:#214d63}
.ww-portal .hpg-detective .hpg-description{color:#4b626e}
.hpg-detective .hpg-meta>span{background:#e2edf0;border-color:#b9d0d9;color:#285569}
.ww-portal .hpg-detective .hpg-play{background:#245a70;color:#fff9dd;border-color:#245a70;box-shadow:0 2px 0 #183f53}
.ww-portal .hpg-detective .hpg-play:hover{background:#163f52}
@media(max-width:1050px) and (min-width:721px){.hpg-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}.hpg-grid-three .hpg-butler{grid-column:1/-1}.hpg-grid-three .hpg-butler .hpg-description{max-width:none}}
@media(max-width:720px){.hpg-grid-three{grid-template-columns:1fr}}
.ww-portal .hpg-butler{background:#fff8ea;border-color:#dac9d6}
.ww-portal .hpg-butler h3,.ww-portal .hpg-butler .hpg-label,.ww-portal .hpg-butler .hpg-challenge{color:#694d78}
.ww-portal .hpg-butler h3{overflow-wrap:normal}
.ww-portal .hpg-butler .hpg-description{color:#64576a}
.hpg-butler-art{position:relative;flex:0 0 105px;width:105px;height:124px;background:url('/assets/games/stilmittel-butler.png') center top/auto 190px no-repeat}
.hpg-butler-book{position:absolute;bottom:0;right:0;width:34px;height:34px;padding:5px;border:1px solid #e4bb61;border-radius:50%;background:#fff8ea;color:#694d78}
.ww-portal .hpg-butler .hpg-meta{color:#694d78}
.hpg-butler .hpg-meta>span{background:#f5edf7;border-color:#d9c6df}
.ww-portal .hpg-butler .hpg-play{background:#694d78;border-color:#694d78;color:#fff;box-shadow:0 2px 0 #4b3557}
.ww-portal .hpg-butler .hpg-play:hover{background:#50385e;color:#fff}
.ww-portal .hpg-classic{margin:18px 0 0;font-size:12px;color:#4e6657;line-height:1.7}
.ww-portal .hpg-classic a{display:inline-block;min-height:32px;padding-block:6px;color:#46644d;text-decoration:underline;text-underline-offset:3px}
/* The same Butler artwork is used in the games overview. */
.wg-choice-butler{background:#fffaf0;border-color:#dac9d6}
.wg-choice-butler .wg-choice-art{background:#f4eaf5;border-color:#dac9d6}
.wg-butler-art{position:relative;width:150px;height:160px;background:url('/assets/games/stilmittel-butler.png') center top/auto 240px no-repeat}
.wg-butler-art .hpg-butler-book{width:42px;height:42px;bottom:9px;right:0}
.ww-article .wg-choice-butler h3,.wg-choice-butler .wg-choice-challenge{color:#694d78}
.wg-choice-butler .wg-choice-tags li{background:#f2e7f4;color:#694d78}
.wg-choice-butler .wg-choice-badge{background:#fff8ea;color:#694d78}
.wg-choice-butler .wg-choice-copy>.wg-secondary{background:#694d78;color:#fff;border-color:#694d78;box-shadow:0 3px 0 #4b3557}
.wg-choice-butler .wg-choice-copy>.wg-secondary:hover{background:#50385e}
.ww-article .wg-classic-link{font-size:13px;line-height:1.7;margin:17px 0 0;color:#655b69}
.wg-classic-link a{display:inline-block;min-height:32px;padding-block:6px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.hpg-butler-art{width:83px;height:110px;flex-basis:83px}}
@media(max-width:720px){.hpg-butler-art{width:105px;height:124px;flex-basis:105px}}
@media(max-width:480px){.hpg-butler-art{position:absolute;top:0;right:0;width:62px;height:62px;background-size:auto 105px}.hpg-butler-book{width:24px;height:24px;padding:3px}.ww-portal .hpg-butler .hpg-label{display:flex;align-items:center;min-height:62px;padding-right:74px}.ww-portal .hpg-butler h3{font-size:24px}.ww-portal .hpg-classic{font-size:11px}.wg-butler-art{height:145px}}