@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=DM+Sans:wght@400..700&display=swap');

:root{color-scheme:light;--ink:#202a23;--muted:#59625a;--paper:#fbf9f1;--line:#deded0;--gold:#f5c844;--green:#345943;--display:"Bricolage Grotesque",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #23714d;outline-offset:3px}
[hidden]{display:none!important}
.masthead{border-bottom:1px solid var(--line);background:#fffdf5}
.header-inner{width:min(100% - 40px,1080px);height:61px;margin:auto;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;color:var(--ink);text-decoration:none;font:800 27px/1 var(--display);letter-spacing:-1.3px}
.wordmark>span:nth-child(2){color:#3b684b}.wordmark-dot{color:#916700}
.logo{width:34px;height:34px;border-radius:10px;background:var(--gold);display:grid;place-items:center;margin-right:9px;letter-spacing:0;font:700 25px/1 var(--body)}
.utility{border:1px solid var(--line);border-radius:100px;background:transparent;padding:7px 12px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
.utility span{display:grid;place-items:center;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font-size:11px}
.utility:hover,.level:hover{background:#f0eddf}
main{max-width:720px;margin:20px auto 0;padding:0 16px}
.hero{min-height:160px;background:#183b2c;border-radius:18px;color:#fffaf0;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center}
.hero-text{position:relative;z-index:1;padding:20px 28px}
.date-line{margin:0 0 8px;color:#f6d36e;text-transform:uppercase;font-size:11px;letter-spacing:1.55px;font-weight:800;display:flex;align-items:center;gap:7px}
.date-dot{width:6px;height:6px;border-radius:50%;background:#f6d36e}
h1,h2{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.055em}
h1{font-size:clamp(36px,7.5vw,63px);line-height:.97}
h1 em{color:#ffdb72;font-style:normal}
.hero-sub{margin:9px 0 0;color:#e3eee4;font-size:14px}
.hero-art{position:absolute;right:20px;top:0;bottom:0;width:255px;pointer-events:none}
.globe{width:154px;height:154px;position:absolute;right:32px;top:4px;border:1.5px solid #e6c66e;border-radius:50%;transform:rotate(-22deg);opacity:.8;background:radial-gradient(circle at 35% 30%,#68855d55,transparent 68%),#274c36;box-shadow:0 0 42px #f3d07016}
.globe i{position:absolute;inset:-1px 25%;border:1px solid #d3c77e9c;border-radius:50%}
.globe i:nth-child(2){inset:-1px 10%}.globe i:nth-child(3){inset:26% -1px}.globe i:nth-child(4){inset:12% -1px}.globe i:nth-child(5){inset:49.6% 0;border-width:1px 0 0;border-radius:0}.globe i:nth-child(6){inset:0 49.7%;border-width:0 0 0 1px;border-radius:0}
.orbit{position:absolute;width:224px;height:61px;border:1px solid #f7d677af;border-top-color:#f7d6773b;border-radius:50%;right:0;top:52px;transform:rotate(-25deg)}

.spark{position:absolute;color:#ffdf81;font-size:19px}.spark-a{left:12px;top:36px}.spark-b{right:5px;top:27px;font-size:13px}.spark-c{right:13px;bottom:15px;font-size:17px}
.scoreboard{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:11px;margin:12px 0;background:#fffdf8}
.scoreboard>div{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--muted);font-size:13px;font-weight:600}
.scoreboard>div+div{border-left:1px solid var(--line)}
.scoreboard strong{margin-left:auto;color:var(--ink);font-weight:800;white-space:nowrap}
.score-icon{width:23px;height:23px;border-radius:6px;display:grid;place-items:center;font-weight:800}
.today-icon{background:#fff0bc;color:#6c5100}.total-icon{background:#e4eee0;color:#305d42}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.level{display:flex;align-items:center;gap:8px;text-align:left;min-width:0;min-height:53px;border:1px solid var(--line);border-radius:11px;background:#fffdf8;padding:7px 10px}
.level[aria-current=true]{background:#ffedac;border-color:#b79028;box-shadow:inset 0 0 0 1px #b79028}
.level-number{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#f0ede2;color:#4f574d;font-weight:800;font-size:12px}
.level[aria-current=true] .level-number{background:#f5c844;color:#34290f}
.level[data-result=hit] .level-number{background:#d7ead6;color:#254c31}
.level[data-result=miss] .level-number{background:#f4dfd2;color:#6a3d2d}
.level-name,.level-category{display:block;line-height:1.16}.level-name{font-size:13px;font-weight:800}.level-category{font-size:11px;color:#50564b;margin-top:3px}
.game{background:#fffef9;border:1px solid var(--line);border-radius:16px;padding:15px 17px 14px;box-shadow:0 3px 0 #eeebdf}
.round-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.round-meta{margin:0 0 2px;color:#446750;font-size:10px;text-transform:uppercase;letter-spacing:1.35px;font-weight:800}
.game h2{font-size:clamp(29px,6vw,40px);line-height:1.02}
.points{background:#eef3e8;border:1px solid #dce7d9;color:#35533f;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.instruction{font-size:13px;color:var(--muted);margin:7px 0 10px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tile{border:1px solid #ddded2;border-radius:9px;min-height:51px;background:#f7f6ee;padding:4px;line-height:1.1;font-size:clamp(11px,2.9vw,14px);font-weight:700;position:relative;overflow-wrap:anywhere}
.tile:hover:not(:disabled){background:#f2efdf;border-color:#a8ad9d}
.tile[aria-pressed=true]:not(:disabled){background:#ffedaa;border-color:#a9811f;box-shadow:inset 0 0 0 1px #a9811f}
.tile:disabled{cursor:default;color:#555e55}
.tile[data-mark=correct]{background:#e0eedc;border-color:#8aab83;color:#284730}
.tile[data-mark=wrong]{background:#f8e5db;border-color:#d2a08b;color:#733e2a}
.tile:disabled[data-mark=neutral]{opacity:.72}
.tile .flag{display:block;width:32px;height:22px;margin:auto;border:1px solid var(--line);border-radius:2px}
.tile .flag-label{display:block;font-size:10px;margin-top:2px}
.feedback{background:#edf3e8;border-radius:7px;margin:8px 0 0;padding:6px 9px;font-size:12px;color:#35533f}
.game-actions{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.selection{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px;font-weight:600}
.selection .pip{width:8px;height:8px;background:#edece0;border:1px solid #cbcdbd;border-radius:50%}
.selection .filled{background:#ebbd36;border-color:#9e7717}
.submit{border:1px solid #a47c19;border-radius:9px;background:var(--gold);box-shadow:0 2px 0 #a47c19;color:#2c2511;padding:8px 12px;min-height:38px;font-size:13px;font-weight:800;white-space:nowrap}
.submit span{margin-left:7px}
.submit:hover:not(:disabled){background:#ffda62}
.submit:disabled{cursor:default;background:#f1ecdb;color:#55594d;border-color:#dfd8c5;box-shadow:none}
footer{display:flex;align-items:center;justify-content:space-between;padding:9px 2px 13px;font-size:11px;color:var(--muted)}
.footer-brand{font-size:17px;color:#587259}
dialog{border:1px solid var(--line);border-radius:18px;background:#fffef8;color:var(--ink);width:min(440px,calc(100% - 30px));padding:0}
dialog::backdrop{background:#14271dbb}
.dialog-inner{padding:23px;position:relative}.dialog-inner h2{font-size:34px}.dialog-inner p,.dialog-inner li{font-size:14px;line-height:1.5}.dialog-inner ol{padding-left:21px}.close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:26px;line-height:1}
@media(max-width:540px){
  main{margin-top:11px;padding:0 11px}.header-inner{width:calc(100% - 22px);height:51px}.wordmark{font-size:24px}.logo{width:30px;height:30px}
  .hero{min-height:115px;border-radius:13px}.hero-text{padding:14px 14px}.hero-art{right:1px;transform:scale(.64);transform-origin:right center;opacity:.75;top:-24px;bottom:-24px}
  .hero-sub{font-size:12px;margin-top:6px}.date-line{font-size:9px;margin-bottom:5px}
  .scoreboard{margin:8px 0}.scoreboard>div{padding:5px 8px}
  .levels{gap:5px;margin-bottom:7px}.level{padding:5px;gap:4px;min-height:45px}.level-number{width:19px;height:21px}.level-name{font-size:11px}.level-category{font-size:10px}
  .game{padding:10px;border-radius:12px}.instruction{margin:5px 0 7px}.tiles{gap:5px}.tile{min-height:46px}.game-actions{margin-top:8px}.selection{gap:4px}
  footer{padding:6px 0}
}
@media(max-width:370px){.hero-art{opacity:.4;right:-15px}.level-number{display:none}.level{padding-left:7px}}
.tile-mark{position:absolute;right:3px;top:2px;font-size:10px;font-weight:900}
.tile[data-mark=correct],.tile[data-mark=wrong]{padding-right:13px}

.logo.bee-logo{width:46px;height:46px;display:block;object-fit:contain;background:transparent;border-radius:0;margin-right:7px;flex-shrink:0}
@media(max-width:540px){.logo.bee-logo{width:40px;height:40px;margin-right:6px}}

.header-actions{display:flex;gap:6px}
.attempts{font-size:11px;font-weight:700;color:var(--green);margin:0 0 7px}
@media(max-width:540px){.header-actions .utility{padding:6px 8px;font-size:11px}.wordmark{font-size:21px}.logo.bee-logo{width:34px;height:34px;margin-right:4px}.level-category{font-size:9px}.hero{min-height:105px}}

.learn-label{display:block;margin-top:3px;font-size:9px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.tile.learnable:hover{filter:brightness(.96)}
.learn-location{padding:10px 12px;border-radius:9px;background:#edf3e8;font-weight:700;color:#345943}
.learn-result{font-size:12px!important;color:var(--muted)}
#learn-title{font-size:30px;padding-right:12px}
.learn-links{display:flex;flex-direction:column;gap:12px;margin:18px 0 24px}
.learn-links a{color:#345943;font-weight:700}

select.utility{font-family:var(--body);color:var(--ink);cursor:pointer;max-width:106px}

#learn{max-height:calc(100dvh - 24px);overflow-y:auto}
.learn-picture{margin:12px 0}
.learn-picture img{display:block;width:100%;height:220px;object-fit:contain;background:#eef0e6;border-radius:10px}
.learn-picture figcaption{font-size:10px;color:var(--muted);margin-top:5px}
.learn-picture summary{cursor:pointer}
.learn-picture figcaption p{font-size:10px;line-height:1.4;overflow-wrap:anywhere;margin:5px 0}
@media(max-width:540px){.learn-picture img{height:180px}#learn .dialog-inner{padding:18px}#learn-title{font-size:26px}}

.flying-bee{
  position:absolute;
  width:42px;
  height:42px;
  object-fit:contain;
  left:0;
  top:0;
  offset-path:ellipse(110px 30px at 112px 30px);
  offset-rotate:25deg;
  offset-distance:25%;
  filter:drop-shadow(0 2px 3px #061b1270);
  animation:bee-orbit 4s ease-in-out 1 forwards;
}
@keyframes bee-orbit{
  from{offset-distance:25%}
  to{offset-distance:125%}
}
@media(prefers-reduced-motion:reduce){
  .flying-bee{animation:none}
}