/* The Club, preferences and milestones share the home screen's tropical bar. */
dialog:is([data-screen="club"],[data-screen="settings"],[data-screen="level"]){
  width:min(94vw,460px);max-height:92dvh;padding:22px 20px 24px;
  border:4px solid #b37531;border-radius:28px;outline:2px solid #fff1bb;
  background:linear-gradient(145deg,#fff9df,#ffe4a5);color:#754623;
  box-shadow:inset 0 0 0 3px #fff5d0,inset 0 -7px #e9b467,0 7px #744420,0 24px 65px #123f4e80;
  overflow:auto;scrollbar-gutter:stable;scrollbar-color:#b77b36 #ffe5ad;
}
dialog:is([data-screen="club"],[data-screen="settings"],[data-screen="level"])::backdrop{
  background:linear-gradient(#123e5659,#51310c80),url('menu-art.webp') center/auto 100% no-repeat,#126f89;
  backdrop-filter:blur(3px);
}
dialog:is([data-screen="club"],[data-screen="settings"]) .close{
  top:10px;right:10px;width:40px;height:40px;min-width:40px;min-height:40px;
  border:2px solid #b77b36;border-radius:12px;background:linear-gradient(#fff7d7,#ffdb91);
  color:#805027;box-shadow:inset 0 2px #fff,0 3px #94602d;font-size:29px;line-height:1;z-index:5;
}
.tropical-heading{position:relative;isolation:isolate;margin:-22px -20px 18px;padding:23px 23px 25px;min-height:190px;border-bottom:3px solid #bd8136;overflow:hidden;background:linear-gradient(90deg,#143e4ddd,#16394266 70%,#09618630),url('menu-art.webp') center 38%/cover;color:white;box-shadow:0 3px #fff4c0;}
.tropical-heading:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#754017aa,transparent 65%);pointer-events:none}
dialog .tropical-heading h2{position:relative;z-index:1;max-width:78%;margin:22px 0 9px;color:#fff5b4;font-size:clamp(27px,7vw,34px);font-weight:1000;line-height:1.04;letter-spacing:-.035em;text-shadow:0 3px #6e381d,1px 0 #6e381d,-1px 0 #6e381d;overflow-wrap:break-word}
.tropical-heading .badge,dialog[data-screen="level"] .badge{background:linear-gradient(#627ff0,#354fc3);border:1px solid #23398e;color:#fff8d4;box-shadow:inset 0 1px #a2b2ff,0 2px #17386b80;padding:6px 13px;font-size:13px;font-weight:900;letter-spacing:.025em}
.heading-cocktail{position:absolute;right:6px;bottom:8px;width:94px;height:114px;object-fit:contain;transform:rotate(9deg);filter:drop-shadow(0 5px 3px #14394488);z-index:0;pointer-events:none}
.tropical-heading .player-title,.tropical-heading p{position:relative;z-index:1;max-width:75%;font-size:14px;line-height:1.4;color:#fff7da;text-shadow:0 1px 2px #153541;margin:0;font-weight:700}
.club-heading{padding-right:48px;gap:8px;align-items:center}
.club-heading>b{font-size:19px;color:#ffde58;white-space:nowrap;text-shadow:0 2px #70411c}
dialog[data-screen="club"] .club-tabs{top:-22px;gap:3px;padding:5px;border:2px solid #263d99;border-radius:15px;background:linear-gradient(#5777e9,#3349b6);box-shadow:inset 0 2px #97acff,0 4px #ab7235;margin:0 -5px 19px;z-index:4}
dialog[data-screen="club"] .club-tabs button{min-height:44px;padding:9px 2px;font-size:13px;line-height:1.15;color:#fff8d3;border:1px solid transparent;border-radius:10px;overflow-wrap:normal}
html:lang(de) dialog[data-screen="club"] .club-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog[data-screen="club"] .club-tabs button[aria-current="page"]{background:linear-gradient(#fff8d8,#ffdf91);border-color:#bc842e;color:#794622;box-shadow:inset 0 2px #fffdf3,0 2px #293b8f}
dialog[data-screen="club"] .date-label{font-size:14px;font-weight:800;color:#845222}
dialog[data-screen="club"] .goal-card{position:relative;margin:16px 0;padding:15px;border:2px solid #ca9048;border-radius:19px;background:linear-gradient(120deg,#fffdf0,#fff0c7);box-shadow:inset 0 2px #fff,0 4px #e2b36b}
dialog[data-screen="club"] .goal-card.ready{border-color:#d9a126;background:linear-gradient(120deg,#fffdf0,#ffe9a5);box-shadow:inset 0 2px #fff,0 4px #c89945}
dialog[data-screen="club"] .goal-card>div{align-items:flex-start;font-size:17px;font-weight:900;line-height:1.3}
dialog[data-screen="club"] .goal-card>div>span{font-size:14px;line-height:1.6;color:#93652e;font-weight:700}
dialog[data-screen="club"] .goal-card progress{height:11px;margin:15px 0;background:#e0c897;border:1px solid #c3a46c;box-shadow:inset 0 2px 2px #ae8b4e55;accent-color:#10bd13}
dialog[data-screen="club"] .goal-card progress::-webkit-progress-bar{background:#e0c897}
dialog[data-screen="club"] .goal-card progress::-webkit-progress-value{background:linear-gradient(#63ef35,#0abb1d);border-radius:10px;box-shadow:inset 0 2px #b1ff75}
dialog[data-screen="club"] .goal-card progress::-moz-progress-bar{background:linear-gradient(#63ef35,#0abb1d);border-radius:10px}
dialog[data-screen="club"] .reward-button{min-height:48px;font-size:16px;line-height:1.3;border:2px solid #3a960f;border-radius:13px;background:linear-gradient(#32f000,#0bc600);box-shadow:inset 0 2px #b6ff83,inset 0 -3px #00ad00,0 3px #367709;color:#fff;text-shadow:0 2px #2e730c;font-weight:1000}
dialog[data-screen="club"] .reward-button:disabled{background:linear-gradient(#ffeac0,#f2d394);border-color:#c79c55;box-shadow:inset 0 2px #fff8df,0 2px #d2ab6a;color:#78542a;text-shadow:none}
dialog[data-screen="club"] .claimed .reward-button{background:#e4f5cc;border-color:#99bb62;color:#3f681f;box-shadow:inset 0 2px #f6ffea,0 2px #bfce8d}
dialog[data-screen="club"] .scene-card{border-radius:19px;box-shadow:inset 0 2px #fff,0 4px #bb833e;background:linear-gradient(#fff9e7,#ffdfa2);border-color:#bd8136}
dialog[data-screen="club"] .scene-card.selected{border-color:#20b516;box-shadow:0 0 0 2px #edffc5,0 4px #338a18}
dialog[data-screen="settings"] .settings-heading{min-height:175px}
dialog[data-screen="settings"] .settings-heading h2{max-width:80%;margin-top:21px}
dialog[data-screen="settings"] .language-setting{margin-top:0;border-color:#c78e43;background:linear-gradient(#fffdf0,#ffe7b0);box-shadow:inset 0 2px white,0 3px #d9ac65;border-radius:17px}
dialog[data-screen="settings"] .language-setting select{width:100%;background:#fffef4;border:2px solid #b98949;border-radius:11px;color:#704720}
dialog[data-screen="settings"] .settings-panel h3{font-size:18px;font-weight:1000;margin-top:22px;color:#80461e}
dialog[data-screen="settings"] .setting-row{background:linear-gradient(115deg,#fffdf0,#fff0c9);border:2px solid #d0a05c;box-shadow:inset 0 2px #fff,0 3px #e0b773;border-radius:17px;margin:13px 0}
dialog[data-screen="settings"] .setting-copy small{font-size:14px;color:#795a34}
dialog[data-screen="settings"] .setting-row[aria-checked="true"] .switch-track{background:linear-gradient(#41eb13,#0abc00);border-color:#318b11;box-shadow:inset 0 2px #9bf364,0 2px #afc582}
dialog[data-screen="settings"] .switch-status{font-size:12px;color:#735427}
dialog[data-screen="settings"] .settings-scenes{border:2px solid #2d46aa;background:linear-gradient(#6783f1,#3b55c4);box-shadow:inset 0 2px #a4b5ff,0 3px #263a8b;border-radius:14px;color:#fff8d6;text-shadow:0 1px #243781;font-size:16px;min-height:48px}
dialog[data-screen="settings"] .settings-footer{bottom:-24px;background:linear-gradient(#ffe4a500,#ffe4a5 25%);padding:12px 0 7px;z-index:3}
dialog[data-screen="settings"] .settings-footer .primary{border-radius:18px;border-width:2px;min-height:55px;font-size:18px;box-shadow:inset 0 3px #a5ff68,inset 0 -3px #00a800,0 4px #367709}
dialog[data-screen="level"]{width:min(92vw,410px);text-align:center;background:linear-gradient(#fff4ceeb,#ffe0a1f7),url('menu-art.webp') center/cover;scrollbar-gutter:auto}
.level-celebration h2{margin:15px 0 3px;color:#fff9cb;text-shadow:0 3px #9a4f20,2px 0 #9a4f20,-2px 0 #9a4f20,0 -1px #9a4f20;font-size:clamp(32px,9vw,43px);letter-spacing:-.03em;font-weight:1000}
.level-stage{position:relative;isolation:isolate;overflow:hidden;height:245px;display:grid;place-items:center;margin:8px 0 0}
.level-rays{position:absolute;width:245px;height:245px;border-radius:50%;background:repeating-conic-gradient(#ffcd4470 0deg 14deg,transparent 14deg 30deg);mask-image:radial-gradient(black 35%,transparent 70%);z-index:-1;animation:level-rays 18s linear infinite}
.level-plaque{position:relative;width:174px;min-height:198px;margin-right:30px;padding:16px 10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-9deg);border:3px solid #a84039;outline:2px solid #ffdf93;border-radius:29px;background:linear-gradient(135deg,#ff8b79,#ec4a64 70%,#d73768);box-shadow:inset 0 3px #ffc6ac,inset 0 -7px #c43259,0 7px #883b31,0 12px 16px #b36a3540;color:#fff}
.level-plaque>span:first-child{font-size:18px;font-weight:1000;letter-spacing:.06em;color:#fff2a0;text-shadow:0 2px #a64c27}
.level-plaque strong{line-height:1.1;letter-spacing:-.05em;font-weight:1000;text-shadow:0 4px #a92e4b,2px 0 #a92e4b,-2px 0 #a92e4b;max-width:100%}
.level-stars{color:#ffe566;font-size:28px;line-height:1.3;text-shadow:0 2px #b47320;white-space:nowrap}
.level-cocktail{position:absolute;right:0;bottom:3px;width:116px;height:155px;object-fit:contain;transform:rotate(10deg);filter:drop-shadow(0 5px 3px #9c593b55)}
.level-score{display:flex;align-items:center;justify-content:center;gap:15px;padding:11px 14px;border:2px solid #bf8840;border-radius:15px;background:linear-gradient(#fffdf0,#ffe7ad);box-shadow:inset 0 2px white,0 3px #d4a358}
.level-score span{font-size:13px;line-height:1.2;font-weight:900;max-width:45%;text-align:left}.level-score b{font-size:26px;font-weight:1000;color:#925024;overflow-wrap:anywhere;min-width:0}
dialog[data-screen="level"] p{font-size:14px;line-height:1.4;margin:17px 8px;color:#855b34}
.level-continue{max-width:none;min-height:64px;font-size:29px;margin:14px 0 6px;border-radius:21px}
.level-plaque{animation:level-arrive .4s ease-out}
@keyframes level-arrive{from{opacity:0;transform:translateY(18px) rotate(-15deg) scale(.8)}to{opacity:1;transform:rotate(-9deg)}}
@keyframes level-rays{to{transform:rotate(360deg)}}
.quiet-effects .level-rays,.quiet-effects .level-plaque{animation:none}
@media(prefers-reduced-motion:reduce){.level-rays,.level-plaque{animation:none}}
@media(max-width:360px){
  dialog:is([data-screen="club"],[data-screen="settings"],[data-screen="level"]){padding:20px 14px 22px;border-radius:23px}
  .tropical-heading{margin:-20px -14px 18px;padding:23px 16px;min-height:183px}.heading-cocktail{width:74px;height:98px}
  dialog .tropical-heading h2{font-size:27px;max-width:80%}.club-heading{padding-right:44px}.club-heading>b{font-size:16px}
  dialog[data-screen="club"] .club-tabs{top:-20px;margin-inline:-6px;grid-template-columns:repeat(2,minmax(0,1fr))}.club-tabs button{font-size:14px!important}
  dialog[data-screen="club"] .goal-card{padding:12px}.level-stage{height:221px}.level-cocktail{width:96px;height:135px;right:-5px}.level-plaque{width:158px;min-height:181px}
}
@media(max-height:650px){dialog[data-screen="level"] .level-stage{height:192px}.level-plaque{min-height:170px;padding-block:10px}.level-cocktail{height:130px}.level-celebration h2{font-size:32px}.level-continue{min-height:54px}.level-rays{height:200px;width:200px}}