[data-theme="whatdas"] .page-shell { width: min(1600px, calc(100% - 64px)); }
[data-theme="whatdas"] .app-heading { min-height: 190px; padding-top: 12px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 12px; }
[data-theme="whatdas"] .app-heading > :not(.game-engagement):not(.game-controls) { flex: 0 0 100%; max-width: none; }
[data-theme="whatdas"] .app-heading h1 { letter-spacing: .08em; }
[data-theme="whatdas"] .app-heading .game-engagement { margin: 0; }
[data-theme="whatdas"] .game-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
[data-theme="whatdas"] .difficulty-tabs { margin: 0; }
[data-theme="whatdas"] .mode-tab[aria-pressed="true"] { background: linear-gradient(145deg, #b2d2ff, #c2a8f4); color: #17243e; }
[data-theme="whatdas"] .game-workspace { grid-template-columns: minmax(220px, 1fr) minmax(480px, 2.4fr) minmax(260px, 1fr); gap: 28px; padding: 28px 0 40px; }
[data-theme="whatdas"] .game-primary { grid-column: 2; grid-row: 1 / span 3; width: min(100%, 660px); margin-inline: auto; }
[data-theme="whatdas"] .game-sidebar { display: contents; }
[data-theme="whatdas"] .game-play-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
[data-theme="whatdas"] .game-panel-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-theme="whatdas"] #puzzle-ready,
[data-theme="whatdas"] .game-actions { justify-content: center; }
[data-theme="whatdas"] #ranked-start { min-width: 210px; min-height: 52px; border-radius: 999px; border-color: #9dcdf5; background: linear-gradient(145deg, #374969, #302a57); color: #e4f3ff; box-shadow: 0 0 24px rgb(131 186 255 / 14%); }
[data-theme="whatdas"] #reveal { border-color: #ff8a91; background: linear-gradient(145deg, #a53d49, #762333); color: #fff3f3; box-shadow: 0 0 16px rgb(255 94 109 / 18%); }
[data-theme="whatdas"] #reveal:hover:not(:disabled) { border-color: #ffc0c4; background: linear-gradient(145deg, #bd4b58, #8b293c); }
[data-theme="whatdas"] #ranked-status { text-align: center; line-height: 1.6; }
[data-theme="whatdas"] #ranked-status:empty { display: none; }
[data-theme="whatdas"] #ranked-clock { width: fit-content; margin: 16px auto; padding: 12px 22px; border: 1px solid #6d82b7; border-radius: 18px; background: linear-gradient(145deg, #293d61, #222b4d); color: #bfcee9; text-align: center; }
[data-theme="whatdas"] #ranked-time { display: block; margin-top: 5px; font: 700 25px/1.2 var(--font-numbers); color: #c4e7ff; }
[data-theme="whatdas"] .puzzle-head { justify-content: center; text-align: center; margin: 12px 0 18px; }
[data-theme="whatdas"] .puzzle-head h2 { font: 700 15px/1.4 var(--font-display); color: #c3cbea; }
[data-theme="whatdas"] .target { position: relative; width: fit-content; min-width: 180px; margin: 0 auto 26px; padding: 18px 30px; flex-direction: column; align-items: center; gap: 8px; border: 1px solid #8a8acb; border-radius: 28px 28px 16px 16px; background: radial-gradient(ellipse at 12% 0, rgb(105 151 255 / 22%), transparent 65%), radial-gradient(ellipse at 100% 100%, rgb(177 128 255 / 19%), transparent 62%), linear-gradient(145deg, #293e70, #26234f); box-shadow: inset 0 1px rgb(219 232 255 / 12%), 0 10px 30px rgb(0 0 0 / 15%); }
[data-theme="whatdas"] .target-label { color: #c2cce6; letter-spacing: .14em; }
[data-theme="whatdas"] .target-value { font: 750 clamp(36px, 4vw, 48px)/1.1 var(--font-numbers); color: #c8eaff; }
[data-theme="whatdas"] .gold-star { position: absolute; right: 12px; top: 12px; font-size: 20px; }
[data-theme="whatdas"] .gold-star::before, [data-theme="whatdas"] .session-gold-star::before { content: ""; display: inline-block; width: 1em; height: 1em; background: #e5bf61; mask: url("../../assets/icons/ui-star.svg") center / contain no-repeat; }
[data-theme="whatdas"] .expression { gap: 6px; margin: 0 0 22px; }
[data-theme="whatdas"] .number-tile { min-height: 64px; border: 1px solid #788bc9; border-radius: 16px; background: linear-gradient(145deg, #354f83, #292b5e); color: #e5efff; font-family: var(--font-numbers); box-shadow: inset 0 1px rgb(219 232 255 / 10%); }
[data-theme="whatdas"] .operation-slot { min-height: 58px; border-radius: 12px; font-family: var(--font-numbers); border-color: #807bb4; color: #a9c7e9; }
[data-theme="whatdas"] .operation-slot.is-current { border-color: #aacbff; background: #38426a; color: #def1ff; }
[data-theme="whatdas"] .operation-slot.is-filled { color: #c8baff; }
[data-theme="whatdas"] .operator { border-color: #6a80ac; border-radius: 16px; background: linear-gradient(145deg, #304969, #202e50); color: #bde8ff; }
[data-theme="whatdas"] .operator-clear { border-color: #a37c9f; background: linear-gradient(145deg, #4b3859, #302c4d); color: #ffbfcc; }
[data-theme="whatdas"] .workings { padding: 18px 20px; border: 1px solid #6b6b9b; border-radius: 22px; background: linear-gradient(145deg, #283957, #242949); }
[data-theme="whatdas"] .working-expression,
[data-theme="whatdas"] .working-steps { font-family: var(--font-numbers); }
[data-theme="whatdas"] .game-status,
[data-theme="whatdas"] .solution { text-align: center; }
[data-theme="whatdas"] .result-share-actions { justify-content: center; }
[data-theme="whatdas"] .result-share-status:empty { display: none; }
[data-theme="whatdas"] .result-share-actions:not(:has(button:not([hidden]))) { margin: 0; }
[data-theme="whatdas"] .game-actions .button { border-radius: 999px; background: #263552; }
[data-theme="whatdas"] .game-quick-guide,
[data-theme="whatdas"] .game-sidebar > .daily-leaderboard { border: 1px solid rgb(157 160 235 / 42%); border-radius: 42px; padding: 30px 24px; background: radial-gradient(ellipse at 15% 12%, rgb(86 132 231 / 28%), transparent 66%), radial-gradient(ellipse at 92% 88%, rgb(158 106 224 / 24%), transparent 65%), linear-gradient(145deg, #253963, #172342 68%, #30234f); box-shadow: 0 0 0 7px rgb(154 159 222 / 4%), 0 0 0 8px rgb(154 159 222 / 14%); }
[data-theme="whatdas"] .game-quick-guide { grid-column: 1; grid-row: 1; }
[data-theme="whatdas"] .game-quick-guide li { padding-left: 30px; }
[data-theme="whatdas"] .game-quick-guide li::before { width: 22px; height: 22px; background: #3b3e67; color: #cae7ff; border: 1px solid #8788be; }
[data-theme="whatdas"] .game-sidebar > .daily-leaderboard { grid-column: 3; grid-row: 1; margin-top: 0; }
[data-theme="whatdas"] .daily-leaderboard .mode-tabs { margin-top: 14px; }
[data-theme="whatdas"] .game-sidebar .leaderboard-note { font-size: 12px; }
[data-theme="whatdas"] .game-sidebar .leaderboard-table-wrap { max-height: none; }
body[data-game-session][data-theme="whatdas"] .game-primary { max-width: 660px; }
body[data-game-session][data-theme="whatdas"] .puzzle-head { margin: 0 0 10px; }
body[data-game-session][data-theme="whatdas"] .game-play-panel[data-phase="playing"] .puzzle-head { display: none; }
body[data-game-session][data-theme="whatdas"] .target { min-width: 140px; margin-bottom: 12px; padding: 6px 22px; gap: 4px; }
body[data-game-session][data-theme="whatdas"] .target-value { font-size: 28px; }
body[data-game-session][data-theme="whatdas"] .expression { gap: 3px; margin-bottom: 12px; }
body[data-game-session][data-theme="whatdas"] .number-tile,
body[data-game-session][data-theme="whatdas"] .operation-slot { min-height: 42px; padding: 4px 0; font-size: clamp(12px, 2.8vw, 22px); border-radius: 8px; }
body[data-game-session][data-theme="whatdas"] .operator-row { gap: 6px; margin-bottom: 8px; }
body[data-game-session][data-theme="whatdas"] .operator { min-height: 40px; padding: 8px; font-size: 22px; line-height: 1; }
body[data-game-session][data-theme="whatdas"] .operator-clear { font-size: 12px; }
body[data-game-session][data-theme="whatdas"] .workings { max-height: 100px; overflow: auto; padding: 6px 12px; border-radius: 14px; }
body[data-game-session][data-theme="whatdas"] #puzzle-play .game-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
body[data-game-session][data-theme="whatdas"] #puzzle-play .game-actions .button { min-width: 0; min-height: 38px; padding: 6px; font-size: 11px; }
body[data-game-session][data-theme="whatdas"] #status { min-height: 18px; margin: 8px 0; font-size: 12px; line-height: 1.4; }
body[data-game-session][data-theme="whatdas"] .working-expression { margin: 6px 0; font-size: 13px; }
body[data-game-session][data-theme="whatdas"] .working-steps { margin: 0; font-size: 12px; }
body[data-game-session][data-theme="whatdas"] #ranked-clock { margin: 8px auto; padding: 6px 14px; }
body[data-game-session][data-theme="whatdas"] #ranked-time { display: inline; font-size: 18px; }
body[data-game-session][data-theme="whatdas"] #ranked-status { font-size: 12px; }
body[data-game-session][data-theme="whatdas"] #session-result { text-align: center; }
body[data-game-session][data-theme="whatdas"] #session-result h2 { margin: 0 0 8px; font: 900 26px var(--font-display); color: var(--accent); }
body[data-game-session][data-theme="whatdas"] #session-result > p { margin: 8px 0; }
body[data-game-session][data-theme="whatdas"] #session-result-message { font-size: 12px; }
body[data-game-session][data-theme="whatdas"] #session-result .result-share-actions { gap: 6px; margin-top: 8px; }
body[data-game-session][data-theme="whatdas"] #session-result .result-share-actions .button { min-width: 0; padding: 6px 12px; }
body[data-game-session][data-theme="whatdas"] #session-result .game-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-game-session][data-theme="whatdas"] #session-result .game-actions .button { flex: 1 1 110px; min-height: 40px; padding: 8px 10px; }
body[data-game-session][data-theme="whatdas"] #session-result #session-retry { flex-basis: 100%; min-height: 48px; border-color: #d7eeff; background: linear-gradient(135deg, #b2deff, #bfb0f4); color: #17243e; font-weight: 900; box-shadow: 0 0 20px rgb(157 175 255 / 20%); }
body[data-game-session][data-theme="whatdas"] #session-result #session-retry:hover:not(:disabled) { filter: brightness(1.1); }
body[data-game-session][data-theme="whatdas"] #session-result .result-secondary-button { border-color: #526282; background: transparent; color: #bdcbe1; font-size: 12px; }
body[data-game-session][data-theme="whatdas"] .session-time-label { color: var(--muted); font-size: 12px; letter-spacing: .12em; }
body[data-game-session][data-theme="whatdas"] #session-time { display: block; margin: 8px 0; color: var(--accent); font: 800 clamp(32px, 6vw, 52px) var(--font-numbers); letter-spacing: 0; }
body[data-game-session][data-theme="whatdas"] .session-global-average { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
body[data-game-session][data-theme="whatdas"] .session-gold-star { display: inline-block; color: #e5bf61; font-size: 32px; line-height: 1; filter: drop-shadow(0 0 10px rgb(229 191 97 / 35%)); }
body[data-game-session][data-theme="whatdas"] #session-review-dialog { width: min(360px, calc(100% - 32px)); text-align: center; }
body[data-game-session][data-theme="whatdas"] #session-review-expression,
body[data-game-session][data-theme="whatdas"] #session-review-solution { overflow-wrap: anywhere; font-family: var(--font-numbers); }
@media (max-width: 1400px) {
  [data-theme="whatdas"] .page-shell { width: calc(100% - 48px); }
}
@media (max-width: 1240px) {
  [data-theme="whatdas"] .game-workspace { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  [data-theme="whatdas"] .game-primary { grid-column: 1; grid-row: 1; }
  [data-theme="whatdas"] .game-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1; grid-row: 2; gap: 26px; align-items: start; }
  [data-theme="whatdas"] .game-quick-guide { grid-column: 1; grid-row: 1; }
  [data-theme="whatdas"] .game-sidebar > .daily-leaderboard { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  [data-theme="whatdas"] .page-shell { width: calc(100% - 32px); }
  [data-theme="whatdas"] .game-workspace { padding-top: 14px; }
  [data-theme="whatdas"] .game-sidebar { grid-template-columns: minmax(0, 1fr); }
  [data-theme="whatdas"] .game-sidebar > .daily-leaderboard { grid-column: 1; grid-row: 2; }
  [data-theme="whatdas"] .game-quick-guide,
  [data-theme="whatdas"] .game-sidebar > .daily-leaderboard { border-radius: 30px; padding: 26px 22px; }
  [data-theme="whatdas"] .expression { gap: 2px; }
  [data-theme="whatdas"] .number-tile,
  [data-theme="whatdas"] .operation-slot { min-height: 48px; font-size: 17px; border-radius: 9px; }
  [data-theme="whatdas"] .operator-row { gap: 6px; }
  [data-theme="whatdas"] .operator { border-radius: 12px; }
}
