/* Tom Birds. Chunky sticker look: thick brown ink, painted wood (the same texture the
 * blocks use, set as --tb-wood by game.js), bright flat fills, buttons that press down. */
:root {
  --ink: #2a140a;
  --cream: #fff4dc;
  --gold: #ffcf33;
  --go: #6cc43a;
  --go-dark: #3f8a1c;
  --red: #e2402e;
  --sky: #69c1f0;
  --tb-wood: linear-gradient(#e0a258, #c98840);
  --font: 'Lilita One', 'Arial Black', Impact, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--sky); }
body { font-family: var(--font); color: #fff; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; fill: currentColor; }

.tb { position: fixed; inset: 0; overflow: hidden; }
#tb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
body[data-screen="play"] #tb-canvas:active { cursor: grabbing; }
body:not(.is-ready) .tb-screen { opacity: 0; }

/* Outlined game text */
.tb-logo span, .tb-score, .tb-banner b, .tb-result-panel h2, .tb-res-score b, .tb-level-n, .tb-pause-panel h2, .tb-newbird-card h2, .tb-levels-head h2 {
  -webkit-text-stroke: var(--stroke, 5px) var(--ink);
  paint-order: stroke fill;
}

/* ── Buttons ── */
.tb-round {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--ink); background: var(--tb-wood); background-size: 160px;
  color: var(--cream); box-shadow: inset 0 -5px 0 rgba(60, 25, 5, .35), inset 0 3px 0 rgba(255, 230, 180, .45), 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.tb-round svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 var(--ink)); }
.tb-round:active, .tb-btn:active, .tb-play:active, .tb-chip:active, .tb-level:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(60, 25, 5, .35), 0 1px 0 var(--ink); }
.tb-round--big { width: 68px; height: 68px; }
.tb-round--big svg { width: 32px; height: 32px; }
.tb-round--go { background: var(--go); color: #fff; box-shadow: inset 0 -6px 0 var(--go-dark), inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--ink); }
.tb-round:focus-visible, .tb-btn:focus-visible, .tb-play:focus-visible, .tb-chip:focus-visible, .tb-level:focus-visible, .tb-world:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.tb-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 18px 10px;
  border: 3px solid var(--ink); border-radius: 16px; background: var(--cream); color: var(--ink);
  font-size: 22px; text-align: left;
  box-shadow: inset 0 -5px 0 rgba(120, 70, 20, .22), 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.tb-btn svg { width: 24px; height: 24px; flex: none; }
.tb-btn--go { background: var(--go); color: #fff; box-shadow: inset 0 -6px 0 var(--go-dark), 0 4px 0 var(--ink); text-shadow: 0 2px 0 var(--go-dark); }

/* ── Title ── */
.tb-screen { position: absolute; inset: 0; display: none; }
.tb-screen.is-on { display: flex; animation: tb-fade .35s ease-out; }
@keyframes tb-fade { from { opacity: 0; } }
.tb-title { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .0) 30%, rgba(20, 60, 90, .28)); }
.tb-title-box { display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translateY(-4vh); }
.tb-logo { display: flex; flex-direction: column; align-items: center; line-height: .82; font-weight: 400; transform: rotate(-4deg); }
.tb-logo span { display: block; }
.tb-logo-tom { --stroke: 9px; font-size: clamp(48px, 9vw, 92px); color: #fff; letter-spacing: 2px; margin-left: -1.6em; animation: tb-drop .7s .1s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.tb-logo-birds { --stroke: 12px; font-size: clamp(78px, 15vw, 160px); color: var(--gold); text-shadow: 0 8px 0 var(--ink); animation: tb-drop .7s .22s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes tb-drop { from { transform: translateY(-60px) scale(.7); opacity: 0; } }
.tb-ribbon {
  position: relative; padding: 8px 28px 10px; background: var(--red); color: #fff; font-size: clamp(15px, 2.2vw, 21px);
  border: 3px solid var(--ink); border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 4px 0 var(--ink);
  text-shadow: 0 2px 0 #8a1d10;
}
.tb-play {
  width: 116px; height: 116px; margin-top: 8px; border-radius: 50%; display: grid; place-items: center;
  border: 4px solid var(--ink); background: var(--go); color: #fff;
  box-shadow: inset 0 -9px 0 var(--go-dark), inset 0 5px 0 rgba(255, 255, 255, .4), 0 6px 0 var(--ink);
  animation: tb-breathe 2.4s 1s ease-in-out infinite;
}
.tb-play svg { width: 58px; height: 58px; margin-left: 8px; filter: drop-shadow(0 3px 0 var(--go-dark)); }
@keyframes tb-breathe { 50% { transform: scale(1.06) rotate(2deg); } }
.tb-title-row { display: flex; gap: 12px; margin-top: 6px; }
.tb-chip {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 8px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--cream); color: var(--ink); font-size: 17px; box-shadow: 0 3px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.tb-chip svg { width: 20px; height: 20px; }
.tb-chip[aria-pressed="true"], .tb-btn[aria-pressed="true"] { opacity: .7; }
.tb-save-note { max-width: 360px; color: #fff; font: 600 13px/1.4 system-ui, sans-serif; text-align: center; }
.tb-save-note:not(:empty) { padding: 6px 14px 7px; border-radius: 12px; background: rgba(42, 20, 10, .62); }
.tb-save-note a { color: #fff; }
.tb-back {
  position: absolute; left: max(16px, env(safe-area-inset-left)); top: 14px; padding: 8px 14px 10px; border: 3px solid var(--ink); border-radius: 12px;
  background: var(--cream); color: var(--ink); font-size: 16px; text-decoration: none; box-shadow: 0 3px 0 var(--ink);
}

/* ── HUD ── */
.tb-hud { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
.tb-hud[hidden] { display: none; }
.tb-hud-left { display: flex; gap: 10px; pointer-events: auto; }
.tb-hud-score { text-align: right; }
.tb-score { --stroke: 7px; font-size: clamp(30px, 4.6vw, 46px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.tb-best { margin-top: 4px; font-size: 15px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }

.tb-banner {
  position: absolute; left: 50%; top: 16px; display: flex; flex-direction: column; align-items: center; padding: 8px 26px 12px;
  background: var(--tb-wood); background-size: 180px; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 5px 0 var(--ink);
  transform: translate(-50%, -140%) rotate(-1.5deg); pointer-events: none; opacity: 0;
}
.tb-banner small { font-size: 14px; color: var(--cream); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-banner b { --stroke: 6px; font-size: clamp(22px, 3.4vw, 32px); font-weight: 400; color: var(--gold); }
.tb-banner.is-on { animation: tb-banner 3s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes tb-banner {
  0% { transform: translate(-50%, -140%) rotate(-1.5deg); opacity: 1; }
  14%, 78% { transform: translate(-50%, 0) rotate(-1.5deg); opacity: 1; }
  100% { transform: translate(-50%, -140%) rotate(-1.5deg); opacity: 1; }
}

.tb-hint {
  position: absolute; left: 50%; bottom: 22px; padding: 8px 20px 10px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--cream); color: var(--ink); font-size: 20px; box-shadow: 0 4px 0 var(--ink);
  transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .3s; pointer-events: none;
}
.tb-hint.is-on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; animation: tb-nudge 1s .3s ease-in-out infinite; }
@keyframes tb-nudge { 50% { transform: translate(-50%, -5px); } }

/* ── Level select ── */
.tb-levels { flex-direction: column; align-items: center; gap: 16px; padding: 16px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); background: rgba(16, 40, 64, .42); overflow-y: auto; }
.tb-levels-head { margin-top: auto; width: min(980px, 100%); display: flex; align-items: center; gap: 16px; }
.tb-levels-head h2 { --stroke: 6px; flex: 1; font-size: clamp(26px, 4vw, 40px); font-weight: 400; color: #fff; }
.tb-levels-total { display: flex; align-items: center; gap: 6px; padding: 6px 14px 8px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 19px; box-shadow: 0 3px 0 var(--ink); }
.tb-levels-total svg { width: 20px; height: 20px; color: #f2a900; }
.tb-world-tabs { width: min(980px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tb-world {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 10px 14px 12px;
  border: 3px solid var(--ink); border-radius: 14px; text-align: left; overflow: hidden;
  box-shadow: 0 4px 0 var(--ink); transition: transform .15s;
}
.tb-world::after { content: ''; position: absolute; inset: auto 0 0; height: 18px; background: var(--ground); border-top: 3px solid var(--ink); }
.tb-world--yard { background: linear-gradient(#69c1f0, #c9ecfb); --ground: #7fc63a; }
.tb-world--site { background: linear-gradient(#f0a860, #fbe6bf); --ground: #b9a27a; }
.tb-world--throne { background: linear-gradient(#2c2253, #7a4a7c 60%, #f0a35e); --ground: #ffd86b; }
.tb-world[aria-pressed="true"] { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 0 var(--ink), 0 0 0 4px #fff; }
.tb-world:disabled { filter: grayscale(.85) brightness(.75); cursor: not-allowed; }
.tb-world-n { font-size: 13px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-world b { font-weight: 400; font-size: clamp(17px, 2.2vw, 22px); color: var(--gold); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.tb-world-stars { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; margin-bottom: 14px; font-size: 14px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-world-stars svg { width: 15px; height: 15px; color: var(--gold); filter: drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink)); }

.tb-level-grid { margin-bottom: auto; width: min(980px, 100%); display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; padding-bottom: 10px; }
.tb-level {
  position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--tb-wood); background-size: 140px;
  box-shadow: inset 0 0 0 5px rgba(120, 60, 15, .35), inset 0 -6px 0 rgba(60, 25, 5, .3), 0 5px 0 var(--ink);
  transform: rotate(var(--tilt)); transition: transform .12s, box-shadow .08s;
  animation: tb-deal .4s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.tb-level:nth-child(2) { animation-delay: .04s; } .tb-level:nth-child(3) { animation-delay: .08s; } .tb-level:nth-child(4) { animation-delay: .12s; }
.tb-level:nth-child(5) { animation-delay: .16s; } .tb-level:nth-child(6) { animation-delay: .2s; } .tb-level:nth-child(7) { animation-delay: .24s; }
@keyframes tb-deal { from { transform: translateY(30px) rotate(8deg); opacity: 0; } }
.tb-level:not(:disabled):hover { transform: rotate(0) scale(1.06); }
.tb-level::before, .tb-level::after { content: ''; position: absolute; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #5b3418; box-shadow: 0 calc(100cqh - 16px) 0 #5b3418; }
.tb-level { container-type: size; }
.tb-level::before { left: 8px; } .tb-level::after { right: 8px; }
.tb-level-n { --stroke: 7px; font-size: clamp(30px, 5vw, 50px); line-height: 1; color: #fff; }
.tb-level-stars { display: flex; gap: 2px; }
.tb-level-stars i { width: clamp(14px, 2vw, 20px); color: rgba(60, 25, 5, .55); }
.tb-level-stars i.on { color: var(--gold); filter: drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)); }
.tb-level:disabled { background: #8c9097; background-image: var(--tb-stone, none); background-size: 140px; cursor: not-allowed; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), 0 5px 0 var(--ink); }
.tb-level:disabled::before, .tb-level:disabled::after { background: #555a61; box-shadow: 0 calc(100cqh - 16px) 0 #555a61; }
.tb-level-lock svg { width: clamp(26px, 4vw, 38px); color: #e9ebee; filter: drop-shadow(0 3px 0 var(--ink)); }

/* ── Pause ── */
.tb-pause { background: rgba(16, 30, 44, .5); }
.tb-pause.is-on { animation: none; }
.tb-pause-panel {
  width: min(320px, 86vw); height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px 22px;
  background: var(--tb-wood); background-size: 220px; border-right: 4px solid var(--ink); box-shadow: 8px 0 0 rgba(42, 20, 10, .35);
  animation: tb-slide .32s cubic-bezier(.3, 1.2, .5, 1);
}
@keyframes tb-slide { from { transform: translateX(-105%); } }
.tb-pause-panel h2 { --stroke: 7px; font-size: 40px; font-weight: 400; color: var(--gold); margin-bottom: 6px; }
.tb-pause-exit { margin-top: 8px; color: var(--cream); font-size: 17px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* ── Result ── */
.tb-result { align-items: center; justify-content: center; background: rgba(16, 30, 44, .5); }
.tb-result-panel {
  position: relative; width: min(440px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 22px 18px;
  background: var(--tb-wood); background-size: 240px; border: 4px solid var(--ink); border-radius: 20px;
  box-shadow: inset 0 0 0 6px rgba(120, 60, 15, .35), 0 8px 0 var(--ink);
  animation: tb-pop .45s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes tb-pop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.tb-result-panel h2 {
  --stroke: 7px; margin-top: -48px; padding: 6px 26px 10px; font-size: clamp(30px, 5vw, 42px); font-weight: 400; color: #fff;
  background: var(--go); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 var(--ink); transform: rotate(-2deg);
}
.tb-result.is-lost .tb-result-panel h2 { background: var(--red); }
.tb-res-level { color: var(--cream); font-size: 17px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-stars { display: flex; align-items: flex-end; gap: 8px; margin: 4px 0; }
.tb-star { width: 74px; height: 74px; color: rgba(60, 25, 5, .55); }
.tb-star svg { width: 100%; height: 100%; stroke: rgba(60, 25, 5, .7); stroke-width: 1.2px; }
.tb-star--mid { width: 92px; height: 92px; margin-bottom: 12px; }
.tb-star.is-on { color: var(--gold); animation: tb-star .5s cubic-bezier(.3, 1.8, .5, 1); }
.tb-star.is-on svg { stroke: var(--ink); stroke-width: 1.6px; filter: drop-shadow(0 3px 0 var(--ink)); }
@keyframes tb-star { from { transform: scale(2.2) rotate(-40deg); opacity: 0; } }
.tb-result.is-lost .tb-stars { display: none; }
.tb-res-score { display: flex; flex-direction: column; align-items: center; }
.tb-res-score span { color: var(--cream); font-size: 16px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-res-score b { --stroke: 8px; font-size: clamp(40px, 7vw, 56px); line-height: 1; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.tb-res-best { min-height: 1.2em; color: var(--cream); font-size: 17px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.tb-res-best.is-new { color: var(--gold); animation: tb-wiggle .6s 1.4s 3; }
@keyframes tb-wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.tb-res-rank { min-height: 1.2em; color: #fff; font: 700 14px/1.3 system-ui, sans-serif; text-shadow: 0 1px 2px var(--ink); text-align: center; }
.tb-res-actions { display: flex; gap: 16px; margin-top: 8px; }
.tb-res-actions [hidden] { display: none; }
.tb-link { margin-top: 4px; border: 0; background: none; color: var(--cream); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* ── New bird card ── */
.tb-newbird { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16, 30, 44, .55); }
.tb-newbird[hidden] { display: none; }
.tb-newbird-card {
  width: min(360px, 90vw); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 22px 20px;
  background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 var(--ink); text-align: center;
  animation: tb-pop .45s cubic-bezier(.3, 1.5, .5, 1);
}
.tb-newbird-card small { padding: 4px 14px 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 15px; border: 3px solid var(--ink); transform: rotate(-3deg); }
.tb-newbird-pic canvas { width: 150px; height: 150px; animation: tb-hop 1.4s ease-in-out infinite; }
@keyframes tb-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px) rotate(-6deg); } }
.tb-newbird-card h2 { --stroke: 7px; font-size: 34px; font-weight: 400; color: var(--gold); }
.tb-newbird-card p { font: 600 16px/1.4 system-ui, sans-serif; margin-bottom: 8px; }
.tb-newbird-card .tb-btn { justify-content: center; text-align: center; }

.tb-rotate {
  position: absolute; left: 50%; bottom: 16px; display: none; align-items: center; gap: 8px; padding: 8px 16px 10px; transform: translateX(-50%);
  border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 16px; box-shadow: 0 3px 0 var(--ink); pointer-events: none; white-space: nowrap;
}
.tb-rotate svg { width: 20px; height: 20px; animation: tb-turn 2s ease-in-out infinite; }
@keyframes tb-turn { 40%, 60% { transform: rotate(-90deg); } }
.tb-rotate.is-on { display: flex; }

/* ── Small screens ── */
@media (max-width: 760px) {
  .tb-level-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .tb-world { min-height: 76px; padding: 8px 10px 10px; }
  .tb-world b { font-size: 15px; }
  .tb-world-n { font-size: 11px; }
}
@media (max-height: 520px) {
  .tb-title-box { gap: 8px; transform: none; }
  .tb-play { width: 84px; height: 84px; }
  .tb-play svg { width: 42px; height: 42px; }
  .tb-logo-tom { font-size: 40px; }
  .tb-logo-birds { font-size: 76px; }
  .tb-levels { gap: 10px; padding-top: 10px; }
  .tb-world { min-height: 64px; }
  .tb-level-grid { gap: 10px; width: min(760px, 100%); }
  .tb-round { width: 46px; height: 46px; }
  .tb-round svg { width: 22px; height: 22px; }
  .tb-result-panel { padding: 16px 18px 12px; gap: 2px; }
  .tb-result-panel h2 { margin-top: -36px; font-size: 28px; }
  .tb-star { width: 52px; height: 52px; }
  .tb-star--mid { width: 64px; height: 64px; }
  .tb-res-score b { font-size: 38px; }
  .tb-round--big { width: 56px; height: 56px; }
  .tb-pause-panel { gap: 8px; }
  .tb-pause-panel h2 { font-size: 30px; }
  .tb-btn { min-height: 44px; font-size: 19px; }
  .tb-newbird-pic canvas { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}