:root {
    --sky: #1f3550; --sky2: #2b4a6b; --grass: #4faf3a; --grass2: #46a034; --grass-dk: #2f7a25;
    --panel: #2a2118; --panel2: #3a2d20; --edge: #6b5233; --wood: #8a6134; --ink: #fff7e6; --dim: #d9c5a3;
    --gold: #f6c64b; --gold-dk: #b8862a; --pink: #ff5db7; --pink-dk: #c83285;
    --green: #5cc142; --green-dk: #2f8a25; --orange: #f0672a; --orange-dk: #b63d0f;
    --blue: #3f9be8; --blue-dk: #1f63a3; --red: #e03b3b; --red-dk: #8f1c1c; --stone: #a0a4b2;
    --r: 10px; --r-sm: 7px;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body {
    margin: 0; overflow: hidden; color: var(--ink);
    font-family: "Baloo 2", "Segoe UI", sans-serif; font-weight: 600;
    background: #1b1410;   /* dark wood panel: the HUD and bar read as a frame around the bright world */
    display: flex; flex-direction: column;
  }
  button { font-family: inherit; }
  .display { font-family: "Lilita One", "Baloo 2", sans-serif; font-weight: 400; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(0,0,0,.55); }
  .ico { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
  .ci { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-left: 1px; }

  /* ---- HUD ---- */
  .hud { flex: 0 0 auto; padding: 8px 8px 4px; display: flex; flex-direction: column; gap: 5px; }
  .hud-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .logo { font-size: 15px; color: var(--gold); flex: 0 0 auto; }
  .pill {
    display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 99px; border: 0; color: var(--ink);
    background: linear-gradient(#2a2a2a, #161616); box-shadow: 0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 11.5px; font-weight: 800; min-width: 0; cursor: pointer; transition: transform .08s, box-shadow .3s; position: relative;
  }
  .pill:active { transform: scale(.94); }
  .pill.hit { animation: pillpulse .7s ease-out; }
  @keyframes pillpulse { 0% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 0 rgba(246,198,75,.6); } 100% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 7px rgba(246,198,75,0); } }
  .p-compute { flex: 1; }
  .pill .bar { flex: 1; height: 7px; border-radius: 4px; background: #0d0d0d; overflow: hidden; min-width: 34px; }
  .pill .bar i { display: block; height: 100%; background: linear-gradient(#ffe477, var(--gold)); transition: width .4s; }
  .pill.full .bar i { background: linear-gradient(#ff8a8a, var(--red)); }
  .pill .txt { font-family: "Baloo 2"; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
  .pill .txt.up { color: var(--gold); } .pill .txt.down { color: #ff8a8a; }
  .fullchip { font: 800 8.5px/1 "Baloo 2"; letter-spacing: .08em; background: var(--red); color: #fff; padding: 3px 5px; border-radius: 99px; animation: bl 1.2s infinite; cursor: pointer; }
  .p-shield { background: linear-gradient(#25507a, #163a5c); }
  .cog { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: var(--dim); display: grid; place-items: center; cursor: pointer; position: relative; flex: 0 0 auto; transition: transform .08s; }
  .cog .ico { width: 16px; height: 16px; }
  .cog:active { transform: scale(.9) rotate(20deg); }
  .cog .dot { position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #777; border: 1.5px solid #1b1410; }
  .cog .dot.on { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }

  /* ---- village ---- */
  .field { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #3f9a31; }
  svg.village { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; transition: transform .25s ease; transform-origin: 50% 46%; }
  .tile { cursor: pointer; }                                   /* stroke = own fill (no seams); grid lines only while editing */
  svg.editing .tile { stroke: rgba(255,255,255,.35); stroke-width: .6; }
  .tile.ok { fill: rgba(120,255,120,.55); stroke: #fff; }
  .tile.bad { fill: rgba(255,80,80,.6); stroke: #fff; }
  .bld { cursor: pointer; transition: filter .12s, transform .15s ease; transform-box: fill-box; transform-origin: 50% 100%; --lift: 0px; }
  .bld:hover { filter: brightness(1.12); }
  .bld.sel { --lift: -4px; transform: translateY(var(--lift)); }
  .bld.tap { animation: tap .32s cubic-bezier(.2,.8,.2,1); }
  @keyframes tap { 0% { transform: translateY(var(--lift)) scale(1,1); } 30% { transform: translateY(var(--lift)) scale(1.05,.88); } 65% { transform: translateY(var(--lift)) scale(.97,1.06); } 100% { transform: translateY(var(--lift)) scale(1,1); } }
  .bld.carry { opacity: .3; }
  .bld.ping .top { animation: ping .9s ease-out 2; }
  @keyframes ping { 0% { stroke: #fff; stroke-width: 4; } 100% { stroke: #fff; stroke-width: 0; } }
  .decor, .builder { pointer-events: none; }
  .field.mode .bld { pointer-events: none; }
  .field.mode-wall .bld[data-type="wall"] { pointer-events: auto; }
  .L-fx, .L-sky, .L-selg { pointer-events: none; }
  #fx.shake { animation: shake .3s; }
  @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
  .lbl { font-family: "Baloo 2"; font-weight: 800; font-size: 8.5px; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 1.4; pointer-events: none; }
  .rklv { font-family: "Lilita One", "Baloo 2", sans-serif; font-size: 7px; fill: #2a1a00; letter-spacing: .04em; pointer-events: none; }
  .lvp { font-family: "Baloo 2"; font-weight: 800; font-size: 7.5px; fill: #2a1a00; pointer-events: none; }
  .ntag { pointer-events: none; }
  .emb { font-size: 9px; pointer-events: none; }
  .bpill { pointer-events: none; }
  .bpill .cd { font-family: "Baloo 2"; font-weight: 800; font-size: 9.5px; fill: #fff; }
  .bpill.soon .bg { animation: soon 1s ease-in-out infinite; }
  @keyframes soon { 0%,100% { fill: rgba(0,0,0,.7); } 50% { fill: rgba(47,138,37,.9); } }
  .bub { font-family: "Baloo 2"; font-weight: 800; font-size: 8px; fill: #2a1a00; letter-spacing: .04em; }
  .nt { font-family: "Lilita One", "Baloo 2", sans-serif; font-size: 8.5px; fill: #fff; letter-spacing: .02em; }
  .ctag { font-family: "Lilita One", "Baloo 2", sans-serif; font-size: 11px; fill: #ffe477; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 2; }
  .cloud { animation: drift 60s linear infinite; }
  @keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(460px); } }
  .birds { animation: fly 25s linear infinite; }
  @keyframes fly { 0% { transform: translate(-40px, 74px); } 20% { transform: translate(420px, 46px); } 100% { transform: translate(420px, 46px); } }

  /* ---- mode bar + toasts (top of the field) ---- */
  .overlay-top { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 5; }
  #modebar { pointer-events: auto; display: flex; align-items: center; gap: 8px; background: rgba(12,10,8,.88); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: 4px 4px 4px 12px; font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); max-width: 100%; }
  #modebar[hidden] { display: none; }
  #modetext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modebtn { border: 0; border-radius: 99px; padding: 4px 10px; font: 800 10px "Baloo 2"; letter-spacing: .06em; color: #fff; background: linear-gradient(var(--red), var(--red-dk)); box-shadow: 0 2px 0 rgba(0,0,0,.5); cursor: pointer; }
  .modebtn.done { background: linear-gradient(var(--green), var(--green-dk)); }
  .modebtn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
  #toasts { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 100%; background: rgba(20,16,12,.94); color: var(--ink); border-left: 4px solid #888; border-radius: var(--r-sm); padding: 6px 9px; font-size: 11px; line-height: 1.3; box-shadow: 0 6px 16px rgba(0,0,0,.45); animation: tin .22s cubic-bezier(.2,.8,.2,1); }
  .toast.out { animation: tout .25s forwards; }
  .toast.err { border-left-color: var(--red); }
  .toast.gain { border-left-color: var(--gold); }
  .toast.info { border-left-color: #8a8f9c; }
  .toast b { color: var(--gold); }
  .toast .tbtn { border: 0; border-radius: 99px; padding: 3px 9px; font: 800 10px "Baloo 2"; letter-spacing: .06em; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); cursor: pointer; flex: 0 0 auto; }
  .toast.err .tbtn { background: linear-gradient(#ff8a8a, var(--red)); color: #fff; }
  @keyframes tin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  @keyframes tout { to { opacity: 0; transform: translateY(-6px); } }

  /* ---- confirm chip (under the ghost) ---- */
  #confirm { position: absolute; display: flex; gap: 6px; z-index: 4; transform: translateX(-50%); animation: tin .18s cubic-bezier(.2,.8,.2,1); }
  #confirm[hidden] { display: none; }
  .cbtn { display: flex; align-items: center; gap: 4px; border: 2px solid rgba(0,0,0,.45); border-radius: 99px; padding: 5px 10px 5px 7px; color: #fff; font: 800 11px "Baloo 2"; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.5); white-space: nowrap; }
  .cbtn .ico { width: 14px; height: 14px; }
  .cbtn.ok { background: linear-gradient(var(--green), var(--green-dk)); }
  .cbtn.no { background: linear-gradient(var(--red), var(--red-dk)); padding: 5px 7px; }
  .cbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

  /* ---- sheet (popup over the village) ---- */
  .sheet {
    position: absolute; left: 8px; right: 8px; bottom: 6px; max-height: 52%; z-index: 6;
    display: flex; flex-direction: column;
    background: linear-gradient(var(--panel2), var(--panel)); border: 2px solid var(--edge); border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.6);
  }
  .sheet[hidden], .learn[hidden] { display: none; }
  .sh-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 11px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sh-head .thumb { flex: 0 0 auto; }
  .sh-head .ttl { flex: 1; min-width: 0; }
  .sheet h3 { margin: 0; font-size: 17px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet h3 small, .learn h3 small { font-family: "Baloo 2"; font-size: 11px; color: var(--dim); margin-left: 8px; letter-spacing: 0; }
  .sub { font-size: 10px; color: var(--dim); margin: 1px 0 0; line-height: 1.3; }
  .cat { display: inline-block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,.35); color: var(--dim); margin-left: 6px; vertical-align: middle; }
  .x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; font-weight: 800; display: grid; place-items: center; }
  .x:hover { color: #fff; background: rgba(0,0,0,.5); }
  .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 11px 10px; scrollbar-width: thin; scrollbar-color: var(--wood) transparent; }
  .body::-webkit-scrollbar { width: 4px; } .body::-webkit-scrollbar-thumb { background: var(--wood); border-radius: 2px; }
  .sheet p { margin: 0 0 6px; font-size: 11.5px; color: var(--ink); line-height: 1.4; }
  .sheet p.real { color: var(--dim); font-size: 10.5px; }
  .stats { display: flex; gap: 6px; margin: 2px 0 8px; flex-wrap: wrap; }
  .stat { font-size: 10.5px; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.35); }
  .stat b { color: var(--gold); }
  .stat.warn { background: rgba(224,59,59,.35); }
  .btns { display: flex; gap: 6px; }
  .btns + .btns { margin-top: 6px; }
  .btn {
    flex: 1; cursor: pointer; border: 2px solid rgba(0,0,0,.4); border-radius: 9px; padding: 8px 6px;
    color: #fff; font-family: "Lilita One", sans-serif; font-size: 13px; letter-spacing: .03em; text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0,0,0,.6); box-shadow: 0 4px 0 rgba(0,0,0,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
  .btn:disabled { opacity: .5; cursor: default; }
  .btn:disabled:active { transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.55); }
  .btn.off { opacity: .55; filter: saturate(.75); }          /* the right action, not available yet: still coloured, tooltip says why */
  .btn.off:active { transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.55); }
  .spill { font-size: 10.5px; line-height: 1.4; padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.1); color: var(--dim); margin: 0 0 6px; }
  .spill b { color: var(--ink); }
  .btn.sm { font-size: 11px; padding: 6px 6px; flex: 0 0 auto; }
  .b-green { background: linear-gradient(var(--green), var(--green-dk)); }
  .b-orange { background: linear-gradient(var(--orange), var(--orange-dk)); }
  .b-blue { background: linear-gradient(var(--blue), var(--blue-dk)); }
  .b-grey { background: linear-gradient(#7a7a7a, #454545); }
  .b-red { background: linear-gradient(var(--red), var(--red-dk)); }
  .b-gold { background: linear-gradient(var(--gold), var(--gold-dk)); color: #2a1a00; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
  .pbar { height: 8px; border-radius: 4px; background: #0d0d0d; overflow: hidden; margin: 4px 0 8px; }
  .pbar i { display: block; height: 100%; background: linear-gradient(#ffe477, var(--gold)); transition: width 1s linear; }
  .pbar.grn i { background: linear-gradient(#9ef58a, var(--green)); }
  .row { display: flex; align-items: center; gap: 8px; font-size: 11px; margin: 0 0 6px; }
  .row .lab { flex: 0 0 66px; color: var(--dim); }
  .row .pbar { flex: 1; margin: 0; }
  .row .val { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .hintline { font-size: 10.5px; color: var(--dim); margin: 6px 0 0; line-height: 1.4; }
  .hintline b { color: var(--ink); }
  .ribbon { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; background: rgba(224,59,59,.22); border: 1px solid rgba(224,59,59,.4); border-radius: var(--r-sm); padding: 5px 8px; margin: 0 0 8px; }
  .ribbon .tbtn { border: 0; border-radius: 99px; padding: 3px 9px; font: 800 10px "Baloo 2"; letter-spacing: .06em; color: #fff; background: linear-gradient(var(--red), var(--red-dk)); cursor: pointer; }

  /* jobs / lists */
  .job { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: center; background: rgba(0,0,0,.3); border-radius: var(--r-sm); padding: 6px 8px; margin: 0 0 6px; font-size: 11px; }
  .job b { display: block; font-size: 12px; }
  .job .pbar { grid-column: 1 / -1; margin: 0; }
  .job .tbtn { border: 0; border-radius: 99px; padding: 4px 9px; font: 800 10px "Baloo 2"; letter-spacing: .06em; color: #fff; background: linear-gradient(var(--blue), var(--blue-dk)); cursor: pointer; }
  .job .tbtn.gold { background: linear-gradient(var(--gold), var(--gold-dk)); color: #2a1a00; }
  .job .tbtn:disabled { opacity: .45; cursor: default; }
  .empty { text-align: center; color: var(--dim); font-size: 11.5px; padding: 14px 6px; line-height: 1.5; }
  .list { display: grid; gap: 6px; }
  .item {
    cursor: pointer; text-align: left; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.08); border-radius: 9px;
    padding: 6px 8px; color: var(--ink); font: 700 11px "Baloo 2", sans-serif; position: relative;
  }
  .item:hover:not(:disabled) { border-color: var(--gold); }
  .item:disabled { opacity: .45; cursor: default; }
  .item b { display: block; font-size: 12px; }
  .item i { font-style: normal; color: var(--gold); }
  .item i.no { color: #ff8a8a; }
  .item small { display: block; color: var(--dim); font-size: 9.5px; }
  .stars { color: var(--gold); letter-spacing: 2px; }
  .logline { font-size: 10px; color: var(--dim); line-height: 1.5; }
  .logline b { color: var(--ink); }
  .result { font-size: 11.5px; padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,.35); margin: 0 0 8px; line-height: 1.4; border-left: 4px solid var(--green); }
  .result.lose { border-left-color: var(--red); }

  /* ---- shop ---- */
  .tabs { display: flex; gap: 3px; flex: 1; min-width: 0; }
  .tab { flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: 5px 2px; font: 800 10.5px "Baloo 2"; color: var(--dim); background: rgba(0,0,0,.3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab.on { background: linear-gradient(var(--gold), var(--gold-dk)); color: #2a1a00; }
  /* two columns of horizontal cards: thumb left, name + full blurb right, count + price on the bottom row */
  .shop { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .sitem { position: relative; display: flex; align-items: flex-start; gap: 6px; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.08); border-radius: 9px; padding: 6px 6px 5px; color: var(--ink); cursor: pointer; text-align: left; min-width: 0; transition: transform .08s, border-color .12s; font: 700 11px "Baloo 2", sans-serif; }
  .sitem:hover, .sitem:focus-visible { border-color: var(--gold); outline: 0; }
  .sitem:active { transform: scale(.97); }
  .sitem.locked { opacity: .7; }
  .sitem.locked .thumb { filter: grayscale(1) brightness(.7); }
  .sitem.maxed .thumb { opacity: .75; }
  .sitem .thumb { width: 48px; height: 46px; flex: 0 0 auto; margin-top: 2px; }
  .stxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
  .sitem .nm { font: 800 12px/1.15 "Baloo 2"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sitem .bl { font: 600 10.5px/1.25 "Baloo 2"; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .prow { display: flex; align-items: center; gap: 4px; min-height: 22px; margin-top: auto; }
  .price { display: inline-flex; align-items: center; gap: 3px; font: 800 10px "Baloo 2"; color: var(--gold); background: rgba(0,0,0,.35); border-radius: 99px; padding: 2px 6px 2px 4px; margin-left: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
  .price .ico { width: 12px; height: 12px; }
  .price.done, .price.lock { font-size: 9.5px; padding: 2px 5px 2px 3px; }
  .price.done .ico, .price.lock .ico { width: 10px; height: 10px; }
  .price.no { color: #ff8a8a; }
  .price.lock { color: var(--dim); }
  .price.done { color: #9ef58a; }
  .count { font: 800 9px "Baloo 2"; color: var(--dim); background: rgba(0,0,0,.45); border-radius: 99px; padding: 2px 5px; white-space: nowrap; flex: 0 0 auto; }
  .count.done { color: #9ef58a; }
  .count.gold { color: var(--gold); }
  .mini { border: 0; border-radius: 99px; padding: 3px 7px; font: 800 9px "Baloo 2"; letter-spacing: .04em; text-transform: uppercase; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.5); flex: 0 0 auto; }
  .mini:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
  .mini.wide { width: 100%; margin-top: 4px; padding: 4px 6px; }
  .thumb { width: 56px; height: 44px; display: block; overflow: visible; }
  .sh-head .thumb { width: 44px; height: 36px; }

  /* ---- bottom bar ---- */
  .bbar { flex: 0 0 auto; display: flex; gap: 7px; padding: 6px 8px 9px; background: linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.35)); position: relative; z-index: 7; }
  .bbar .btn { padding: 10px 6px; font-size: 15px; position: relative; overflow: visible; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 rgba(0,0,0,.6); border-bottom-color: rgba(0,0,0,.55); }
  .bbar .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 rgba(0,0,0,.6); }
  .bico { width: 16px; height: 16px; flex: 0 0 auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
  .badge { position: absolute; top: -9px; right: -4px; background: linear-gradient(#ffe477, var(--gold)); color: #2a1a00; font: 800 10px/1 "Baloo 2"; text-transform: none; letter-spacing: 0; padding: 3px 6px; border-radius: 8px 8px 8px 2px; border: 2px solid #fff; text-shadow: none; box-shadow: 0 2px 4px rgba(0,0,0,.4); animation: bob 1.6s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

  /* ---- learn overlay: a dark scrim over the village, one wood card in the middle ---- */
  .learn { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.55); display: flex; align-items: stretch; padding: 6px 8px; }
  .learn[hidden] { display: none; }
  .lcard { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(var(--panel2), var(--panel)); border: 2px solid var(--edge); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.6); animation: lin .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes lin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .lcard.same { animation: none; }
  .lcard.shake { animation: lshake .35s; }
  @keyframes lshake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
  .learn .sh-head { padding: 7px 7px 6px 11px; gap: 6px; }
  .learn .body { padding: 8px 11px 10px; }
  .eyebrow { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
  .eyebrow.amber { color: #ffb84d; }
  .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font: 800 9.5px "Baloo 2"; color: var(--dim); background: rgba(0,0,0,.35); border-radius: 99px; padding: 3px 8px 3px 5px; white-space: nowrap; }
  .chip.hot { color: #ffe477; }
  .chip .ci { margin: 0; }
  .later { flex: 0 0 auto; border: 0; background: none; color: var(--dim); font: 700 11px "Baloo 2"; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
  .quote { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; line-height: 1.5; color: var(--dim); background: #14100c; border-left: 3px solid var(--gold-dk); border-radius: 0 6px 6px 0; padding: 7px 9px; margin: 0 0 8px; max-height: 64px; overflow: hidden; }
  .quote.think { font-family: inherit; font-style: italic; background: rgba(0,0,0,.25); border-left-color: var(--edge); }
  .quote.recap { border-left-color: #ffb84d; }
  .quote .qtag { display: block; font: 800 8.5px "Baloo 2"; letter-spacing: .1em; text-transform: uppercase; color: #ffb84d; margin-bottom: 2px; }
  .quote mark { background: transparent; color: var(--gold); font-weight: 800; }
  .term { font-size: 22px; margin: 0 0 8px; color: var(--gold); line-height: 1.1; }
  .opts { display: flex; flex-direction: column; gap: 6px; }
  .opt { width: 100%; min-height: 44px; text-align: left; cursor: pointer; color: var(--ink); font: 700 11.5px/1.35 "Baloo 2", sans-serif; padding: 7px 9px; background: linear-gradient(#4a3a28, #3a2d20); border: 2px solid rgba(0,0,0,.35); border-bottom: 5px solid #1e1610; border-radius: 9px; display: flex; gap: 8px; align-items: center; transition: filter .1s, border-color .1s, opacity .2s; }
  .opt .k { flex: 0 0 18px; height: 18px; display: grid; place-items: center; font-size: 9.5px; color: var(--dim); background: rgba(0,0,0,.4); border-radius: 5px; }
  .opt .k .ci { margin: 0; color: #fff; }
  .opt:hover:not(:disabled) { filter: brightness(1.12); }
  .opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 3px; }
  .opt:disabled { cursor: default; }
  .opt.picked { border-color: var(--gold); }
  .opt.right { background: linear-gradient(#3e8a2c, var(--green-dk)); border-bottom-color: #1d4f14; border-color: rgba(255,255,255,.15); color: #fff; }
  .opt.right .k { background: rgba(255,255,255,.25); }
  .opt.wrong { background: linear-gradient(#a52c2c, var(--red-dk)); border-bottom-color: #5c1010; color: #fff; }
  .opt.wrong .k { background: rgba(255,255,255,.2); }
  .opt.dim { opacity: .45; }
  .cfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--dim); }
  .ghost { color: var(--dim); text-decoration: underline; cursor: pointer; padding: 4px 0; }
  .ghost:hover { color: var(--ink); }
  .worth { color: var(--gold); font-weight: 800; }
  .verdict { margin: 0 0 10px; animation: vin .3s cubic-bezier(.2,.8,.2,1) .15s both; }
  .vnum { font-size: 22px; line-height: 1; display: inline-block; vertical-align: -2px; font-variant-numeric: tabular-nums; }
  @keyframes vin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .vhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
  .verdict h2 { margin: 0; font-size: 18px; flex: 1 1 auto; }
  .verdict.ok h2 { color: #9ef58a; }
  .verdict.no h2 { color: #ff8a8a; }
  .tag { font: 800 9.5px "Baloo 2"; padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.35); color: var(--dim); }
  .tag.new { background: rgba(246,198,75,.25); color: var(--gold); }
  .tag.gem { background: rgba(61,220,132,.2); color: #9ef58a; }
  .yield { font-size: 10.5px; line-height: 1.4; padding: 5px 8px; border-radius: 7px; margin: 0 0 6px; background: rgba(224,59,59,.22); border: 1px solid rgba(224,59,59,.4); }
  .yield a { color: var(--gold); text-decoration: underline; cursor: pointer; }
  .answer { padding: 9px 10px; border-radius: 9px; font-size: 12px; line-height: 1.45; background: rgba(0,0,0,.3); border: 2px solid var(--edge); }
  .verdict.ok .answer { border-color: var(--green-dk); }
  .verdict.no .answer { border-color: var(--red-dk); }
  .answer b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--gold); }
  .why { display: block; margin-top: 5px; font-size: 10.5px; color: var(--dim); font-style: italic; }
  .picked { display: block; margin-top: 5px; font-size: 10.5px; color: #ff8a8a; }
  .verdict .btns { margin-top: 8px; }
  .b-next { position: relative; }
  .abar { position: absolute; left: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.75); animation: shrink 7s linear forwards; }
  @keyframes shrink { from { width: 100%; } to { width: 0; } }
  /* home screen */
  .hero { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
  .hero .big { font-size: 44px; line-height: 1; color: var(--gold); }
  .hero-t b { display: block; font-size: 15px; }
  .hero-t small { color: var(--dim); font-size: 10.5px; }
  .meter { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 2px; }
  .meter i, .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-block; }
  .meter i.on { background: #3ddc84; box-shadow: 0 0 4px #3ddc84; }
  .how { display: grid; gap: 5px; font-size: 11px; line-height: 1.35; color: var(--ink); margin: 0 0 10px; }
  .how div { display: flex; gap: 8px; align-items: flex-start; }
  .how i { flex: 0 0 18px; height: 18px; display: grid; place-items: center; font: 800 10px "Baloo 2"; font-style: normal; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); border-radius: 50%; }
  .bank { display: grid; gap: 4px; }
  .bw { background: rgba(0,0,0,.3); border-radius: 8px; overflow: hidden; }
  .bw.open { outline: 1px solid var(--edge); }
  .bwh { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); padding: 7px 9px; text-align: left; cursor: pointer; font: 700 11.5px "Baloo 2"; min-height: 34px; }
  .bwh b { flex: 1; }
  .bwh small { color: var(--dim); font-size: 9px; }
  .dots { display: inline-flex; gap: 3px; }
  .dots i.on { background: var(--gold); }
  .bwd { padding: 0 9px 8px; font-size: 11px; line-height: 1.4; color: var(--ink); }
  .listen { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); color: var(--dim); font-size: 10.5px; line-height: 1.4; }
  .pulse { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #777; }
  .pulse.on { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; animation: bl 1.4s infinite; }
  @keyframes bl { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
  /* info sheet: the word behind the building */
  .what { margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid var(--edge); font-size: 11.5px; line-height: 1.4; }
  .what b { color: var(--gold); font-size: 12px; }
  .what .known { float: right; font: 800 9px "Baloo 2"; color: #9ef58a; display: inline-flex; align-items: center; gap: 2px; }
  .what p { margin: 3px 0 7px; }
  .what .btn { flex: 0 0 auto; }
  /* the word arriving on the village */
  .badge.pop { animation: pop .6s cubic-bezier(.2,.8,.2,1); }
  @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
  .pill.spin .ico { animation: spin .8s cubic-bezier(.2,.8,.2,1); }
  @keyframes spin { to { transform: rotateY(360deg); } }
  .gspark { position: fixed; z-index: 51; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; pointer-events: none; }
  .alertbob { animation: bob 1.2s ease-in-out infinite; }
  .beaconring { animation: ringpulse 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes ringpulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

  /* ---- army + attack (P6) ---- */
  .tdot { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 800 10px/1 "Baloo 2"; font-style: normal; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); border: 1.5px solid rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex: 0 0 auto; }
  .neg { color: #ff8a8a; } .pos { color: #9ef58a; } .dim { color: var(--dim); }
  .sheet.tall { max-height: 94%; }
  .sheet.mid { max-height: 72%; }
  .astrip { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 8px; }
  .achip { display: inline-flex; align-items: center; gap: 4px; font: 800 11px "Baloo 2"; background: rgba(0,0,0,.35); border-radius: 99px; padding: 2px 8px 2px 3px; }
  .acamp { margin-left: auto; font: 700 10px "Baloo 2"; color: var(--dim); }
  .rival { background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.08); border-radius: 10px; padding: 6px 8px 4px; margin: 0 0 8px; }
  .rival.looted { opacity: .7; }
  .rhead { display: flex; align-items: center; gap: 6px; font-size: 12px; }
  .rhead b { font-size: 13px; }
  .rmeta { margin-left: auto; font: 700 10px "Baloo 2"; color: var(--dim); white-space: nowrap; }
  .rloot { font: 700 11px "Baloo 2"; color: var(--dim); margin: 1px 0 2px; }
  .rloot b { color: var(--gold); }
  svg.scout { width: 100%; height: 176px; display: block; border-radius: 8px; background: #3f9a31; overflow: hidden; }
  .warnline { font: 800 11px "Baloo 2"; color: #ffb84d; display: flex; align-items: center; gap: 5px; margin: 0 0 6px; }
  .tag.hot { background: rgba(240,103,42,.3); color: #ffb84d; }
  .tag.held { background: rgba(92,193,66,.25); color: #9ef58a; }
  .tag.breach { background: rgba(224,59,59,.3); color: #ff8a8a; }
  .ribbon.gold { background: rgba(246,198,75,.18); border-color: rgba(246,198,75,.45); }
  .ribbon.gold .tbtn { background: linear-gradient(var(--gold), var(--gold-dk)); color: #2a1a00; }
  /* Exploit Kit: train rows + queue */
  .train { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 6px; }
  .thead { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--dim); margin: 0 0 4px; }
  .thead b { color: var(--gold); font-size: 12px; }
  .trow { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .tinfo { flex: 1; min-width: 0; font-size: 11px; line-height: 1.25; }
  .tinfo b { display: block; }
  .tinfo small { color: var(--dim); font-size: 9.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbtns { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .tbtns .tbtn, .tq .tbtn, .lbtns .tbtn { border: 0; border-radius: 99px; padding: 5px 9px; font: 800 10px "Baloo 2"; letter-spacing: .04em; color: #fff; background: linear-gradient(var(--green), var(--green-dk)); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.5); min-height: 26px; }
  .tbtns .tbtn.off { background: linear-gradient(#7a7a7a, #454545); opacity: .7; }
  .tbtn.orange { background: linear-gradient(var(--orange), var(--orange-dk)); }
  .lbtns .tbtn { background: linear-gradient(var(--blue), var(--blue-dk)); }
  .twhy { font: 700 9px "Baloo 2"; color: #ff8a8a; white-space: nowrap; }
  .tq { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--dim); padding: 6px 0 0; }
  .tq b { color: var(--ink); }
  .tqc { display: flex; gap: 4px; flex-wrap: wrap; }
  .tqchip { display: inline-flex; align-items: center; gap: 3px; font: 800 10.5px "Baloo 2"; color: var(--ink); background: rgba(0,0,0,.35); border-radius: 99px; padding: 2px 4px 2px 3px; }
  .tqchip .tdot { width: 15px; height: 15px; font-size: 8.5px; }
  .tx { border: 0; background: rgba(255,255,255,.12); color: var(--ink); width: 16px; height: 16px; border-radius: 50%; font: 800 11px/1 "Baloo 2"; cursor: pointer; display: grid; place-items: center; padding: 0; }
  .tx:hover { background: var(--red); color: #fff; }
  /* battle log cards */
  .lcardx { display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.3); border-radius: 9px; padding: 6px 8px; margin: 0 0 6px; border-left: 4px solid var(--orange); }
  .lcardx.defend { border-left-color: var(--blue); }
  .lico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--dim); }
  .lmain { flex: 1; min-width: 0; }
  .lline { display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lline b { overflow: hidden; text-overflow: ellipsis; }
  .lline.dim { font-size: 9.5px; color: var(--dim); white-space: normal; line-height: 1.35; }
  .mstars { display: inline-flex; gap: 1px; flex: 0 0 auto; }
  .mstars i { width: 11px; height: 11px; display: block; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
  .mstars i.got { background: var(--gold); } .mstars i.miss { background: rgba(255,255,255,.16); }
  .lbtns { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; align-items: stretch; }
  .lbtns .tbtn { padding: 3px 8px; min-height: 22px; }
  /* battle mode: field, strip, troop bar */
  .field.battle .bld { pointer-events: none; cursor: default; }
  .field.battle .bld:hover { filter: none; }
  svg.deploy .tile.ring { fill: rgba(120,255,120,.5); stroke: rgba(255,255,255,.7); stroke-width: .6; }
  svg.deploy .tile.in { fill: rgba(255,60,60,.16); stroke: rgba(255,80,80,.25); }
  .bld.dead { opacity: 0; transition: opacity .35s; }                    /* the rubble in .fxs takes its place */
  .bld.flash { filter: brightness(2.4) saturate(.5); transition: none; }  /* 80 ms hit flash */
  .troop { pointer-events: none; }
  .troop .tg { font: 800 6px "Baloo 2"; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: .7; }
  .ctag.big { font-size: 15px; fill: #ff8a8a; }
  .bs-time { font: 800 10.5px "Baloo 2"; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
  .field.shake3 { animation: shake .3s; }
  #bstrip { pointer-events: auto; width: 100%; }
  #bstrip[hidden] { display: none; }
  .bs-deploy, .bs-play { display: flex; align-items: center; gap: 6px; background: rgba(12,10,8,.9); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: 4px 4px 4px 10px; font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
  .bs-clock { font: 800 12px "Baloo 2"; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 28px; }
  .bs-clock.soon { color: #ff8a8a; animation: bl .6s infinite; }
  .bs-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--dim); font-size: 10.5px; }
  .bs-stars { display: inline-flex; gap: 2px; }
  .bs-stars i { width: 14px; height: 14px; display: block; background: rgba(255,255,255,.18); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); transition: background .2s; }
  .bs-stars i.on { background: var(--gold); animation: starpop .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes starpop { 0% { transform: scale(.2); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
  .bs-bar { flex: 1; height: 7px; border-radius: 4px; background: #0d0d0d; overflow: hidden; }
  .bs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ff8a8a, var(--red)); transition: width .3s; }
  .bs-pct { font: 800 11px "Baloo 2"; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
  .modebtn:disabled { opacity: .45; cursor: default; }
  /* the roster: five portrait chips (colour, name, count) + GO at the right end */
  .troopbar { flex: 0 0 auto; display: flex; gap: 4px; padding: 6px 8px 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35)); position: relative; z-index: 7; align-items: stretch; }
  .tchip { flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px solid rgba(0,0,0,.45); border-radius: 10px; background: linear-gradient(#3a2d20, #2a2118); color: var(--ink); cursor: pointer; padding: 4px 2px 3px; box-shadow: 0 3px 0 rgba(0,0,0,.55); transition: transform .08s, box-shadow .15s; }
  .tchip .tdot { width: 22px; height: 22px; font-size: 11px; }
  .tchip .tn { font: 800 9.5px/1 "Baloo 2"; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tchip .tc { font: 800 12px/1 "Baloo 2"; color: var(--gold); }
  .tchip.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(246,198,75,.45), 0 3px 0 rgba(0,0,0,.55); background: linear-gradient(#5a4530, #3a2d20); }
  .tchip.out { opacity: .45; filter: grayscale(.6); }
  .tchip.out .tc { color: var(--dim); }
  .tchip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
  .tgo { flex: 0 0 48px; border: 2px solid rgba(0,0,0,.45); border-radius: 10px; font-size: 16px; color: #fff; background: linear-gradient(var(--green), var(--green-dk)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 rgba(0,0,0,.6); cursor: pointer; }
  .tgo:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 rgba(0,0,0,.6); }
  .tgo:disabled { opacity: .45; cursor: default; transform: none; }
  .badge.count { background: linear-gradient(#fff, #d9dde6); border-radius: 99px; padding: 3px 6px; animation: none; }
  .badge.count.red { background: linear-gradient(#ff8a8a, var(--red)); color: #fff; animation: bob 1.6s ease-in-out infinite; }
  #redflash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(224,59,59,.5); opacity: 0; }
  #redflash.go { animation: rflash .6s ease-out; }
  @keyframes rflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
  .pill.hitup { animation: pillup .8s ease-out; } .pill.hitdown { animation: pilldown .8s ease-out; }
  @keyframes pillup { 0% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 0 rgba(92,193,66,.8); } 100% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 8px rgba(92,193,66,0); } }
  @keyframes pilldown { 0% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 0 rgba(224,59,59,.8); } 100% { box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 8px rgba(224,59,59,0); } }
  /* battle report */
  .rstars { display: flex; justify-content: center; gap: 10px; margin: 4px 0 6px; }
  /* dim outline stars paint at once; an earned star pops its gold fill in on its delay */
  .rstars i { width: 44px; height: 44px; display: block; }
  .rstars i.got { animation: rstar .45s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
  @keyframes rstar { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
  .rstars svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
  .rstars i svg path { fill: rgba(0,0,0,.35); stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
  .rstars i.got svg path { animation: rfill .1s linear var(--d, 0ms) both; }
  @keyframes rfill { to { fill: url(#g-gold); stroke: #8a5a12; stroke-width: 1; } }
  .stamp { text-align: center; font-family: "Lilita One", sans-serif; font-size: 18px; letter-spacing: .08em; padding: 4px 10px; border: 3px solid; border-radius: 8px; margin: 0 auto 8px; width: max-content; transform: rotate(-4deg); animation: stampin .4s cubic-bezier(.2,.8,.2,1) .7s; }
  @keyframes stampin { 0% { transform: rotate(-4deg) scale(1); } 45% { transform: rotate(-4deg) scale(1.28); } 100% { transform: rotate(-4deg) scale(1); } }
  .coach { display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; line-height: 1.4; color: var(--ink); background: rgba(63,155,232,.14); border: 1px solid rgba(63,155,232,.35); border-radius: 8px; padding: 6px 9px; margin: 0 0 8px; }
  .coach .ci { flex: 0 0 auto; margin-top: 2px; color: #7cc4ff; }
  .stamp.bad { color: #ff8a8a; border-color: #ff8a8a; }
  .stamp.good { color: #9ef58a; border-color: #9ef58a; }
  .rrows { display: grid; gap: 4px; margin: 0 0 8px; }
  .rrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; padding: 5px 9px; border-radius: 7px; background: rgba(0,0,0,.3); }
  .rrow b { font-size: 13px; color: var(--gold); }
  .rrow b.pos { color: #9ef58a; } .rrow b.neg { color: #ff8a8a; } .rrow b.dim { color: var(--dim); }
  .rrow small { font-size: 9.5px; color: var(--dim); }

  /* ---- coin flight ---- */
  .coin { position: fixed; width: 12px; height: 12px; z-index: 50; pointer-events: none; left: 0; top: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
  .coin svg { width: 12px; height: 12px; display: block; }

  /* ---- P7: logo / profile, help, league dot, quest strip + arrow ---- */
  .logo { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; font-size: 12.5px; letter-spacing: 0; transition: transform .08s; flex: 0 0 auto; }
  .p-compute { min-width: 0; overflow: hidden; }
  .p-compute .bar { min-width: 24px; }
  .logo:active { transform: scale(.97); }
  .lvchip.big { font: 800 10px/1 "Baloo 2"; letter-spacing: .06em; color: #fff; background: linear-gradient(#c4b5fd, #8b5cf6); border-radius: 99px; padding: 4px 7px; text-shadow: none; white-space: nowrap; flex: 0 0 auto; }
  /* the avatar: XP ring + level number (the Rack's level is on the Rack itself) */
  .avatar { position: relative; width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; margin-left: 3px; }
  .avatar .xpring { position: absolute; inset: 0; width: 26px; height: 26px; transform: rotate(-90deg); }
  .avatar .xpring circle { fill: none; stroke-width: 2.6; }
  .avatar .xpring .bg { stroke: rgba(255,255,255,.14); }
  .avatar .xpring .fg { stroke: #a78bfa; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: 62.83; transition: stroke-dashoffset .5s; }
  .avatar .av { width: 15px; height: 15px; display: block; }
  .avatar .lv { position: absolute; right: -6px; bottom: -4px; font: 800 8px/1 "Baloo 2"; font-style: normal; color: #fff; background: linear-gradient(#c4b5fd, #8b5cf6); border: 1.5px solid #1b1410; border-radius: 99px; padding: 2px 4px; text-shadow: none; }
  .avatar.pop { animation: pop .6s cubic-bezier(.2,.8,.2,1); }
  .cog.help { font: 800 14px/1 "Baloo 2"; color: var(--gold); }
  .pill .lg { width: 8px; height: 8px; border-radius: 50%; background: #cd7f32; color: #cd7f32; border: 1.5px solid rgba(0,0,0,.5); box-shadow: 0 0 5px currentColor; flex: 0 0 auto; margin-left: -1px; }
  .quest { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--edge); border-radius: 8px; padding: 4px 8px 4px 6px; background: linear-gradient(#3a2d20, #2a2118); color: var(--ink); font: 700 11px "Baloo 2"; cursor: pointer; text-align: left; box-shadow: 0 2px 0 rgba(0,0,0,.5); min-height: 26px; }
  .quest:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
  body.battle .quest { display: none !important; }   /* deploy / replay / report: the field gets the strip's 31px back */
  .quest .ico { width: 15px; height: 15px; }
  .quest .qtxt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quest .qsub { font-size: 10px; color: var(--dim); white-space: nowrap; }
  .quest .qrew { font-weight: 800; color: var(--gold); white-space: nowrap; }
  .quest.pop { animation: qpop .5s cubic-bezier(.2,.8,.2,1); }
  @keyframes qpop { 0% { transform: scale(1); } 40% { transform: scale(1.03); box-shadow: 0 0 0 4px rgba(246,198,75,.45); } 100% { transform: scale(1); } }
  #qarrow { position: fixed; z-index: 8; width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); animation: abob .9s ease-in-out infinite; }
  #qarrow[hidden] { display: none; }
  #qarrow svg { width: 100%; height: 100%; display: block; }
  @keyframes abob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
  .qlist { display: grid; gap: 5px; }
  .qs { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.3); font-size: 11px; opacity: .7; }
  .qs.cur { opacity: 1; outline: 1px solid var(--gold); }
  .qs.done { opacity: .5; }
  .qs.done b { text-decoration: line-through; }
  .qs > i { flex: 0 0 20px; height: 20px; display: grid; place-items: center; font: 800 10px "Baloo 2"; font-style: normal; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); border-radius: 50%; }
  .qs.done > i { background: linear-gradient(#9ef58a, var(--green)); }
  .qs .ci { margin: 0; }
  .qs > div { flex: 1; min-width: 0; }
  .qs b { display: block; line-height: 1.3; }
  .qs small { display: block; color: var(--dim); font-size: 9.5px; line-height: 1.3; }
  .qs .tbtn { border: 0; border-radius: 99px; padding: 4px 10px; font: 800 10px "Baloo 2"; letter-spacing: .06em; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); cursor: pointer; flex: 0 0 auto; }
  .how.big div { font-size: 12px; line-height: 1.4; }
  .how.big i { margin-top: 1px; }
  /* league + leaderboard */
  .lgcard { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid var(--edge); margin: 0 0 8px; font-size: 11px; }
  .lgbadge { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), var(--lg) 45%, rgba(0,0,0,.45)); border: 2px solid rgba(0,0,0,.4); flex: 0 0 auto; }
  .lgcard > div { flex: 1; min-width: 0; }
  .lgcard b { display: block; font-size: 13px; color: var(--lg); }
  .lgcard small { color: var(--dim); font-size: 10.5px; }
  .lgcard small b { display: inline; font-size: 10.5px; color: var(--ink); }
  .lgbonus { font: 800 10px "Baloo 2"; color: var(--gold); white-space: nowrap; }
  .subtabs { display: flex; gap: 4px; margin: 0 0 6px; }
  .stab { flex: 1; border: 0; border-radius: 99px; padding: 5px; font: 800 10px "Baloo 2"; color: var(--dim); background: rgba(0,0,0,.3); cursor: pointer; }
  .stab.on { background: rgba(255,255,255,.16); color: var(--ink); }
  .lb { display: grid; gap: 3px; }
  .lrow { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 7px; background: rgba(0,0,0,.25); font-size: 11px; min-height: 26px; }
  .lrow.you { background: rgba(246,198,75,.2); outline: 1px solid var(--gold); }
  .lrow .rk { flex: 0 0 26px; color: var(--dim); font-weight: 800; font-variant-numeric: tabular-nums; }
  .lrow .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lrow .nm small { color: var(--gold); font-size: 9px; font-weight: 800; }
  .lrow .lgm { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.5); flex: 0 0 auto; }
  .lrow .val { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
  .lrow.pop { animation: qpop .6s; }
  /* profile */
  .thumb.pf { width: 40px; height: 40px; }
  .namerow { display: flex; align-items: center; gap: 6px; }
  .name { flex: 1; min-width: 0; width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--edge); border-radius: 7px; color: var(--gold); font: 400 16px "Lilita One", "Baloo 2", sans-serif; padding: 3px 7px; letter-spacing: .02em; }
  .name:focus { outline: 2px solid var(--gold); }
  .xp { height: 6px; border-radius: 3px; background: #0d0d0d; overflow: hidden; margin: 5px 0 3px; }
  .xp i { display: block; height: 100%; background: linear-gradient(#c4b5fd, #8b5cf6); transition: width .4s; }
  .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .pcell { background: rgba(0,0,0,.3); border-radius: 8px; padding: 6px 7px; font-size: 10px; color: var(--dim); min-width: 0; }
  .pcell b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #0d0d0d; }
  .stack i { display: block; height: 100%; }
  .legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10px; color: var(--dim); }
  .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
  .legend b { color: var(--ink); }
  /* obstacles + the mining float */
  .obst { cursor: pointer; --lift: 0px; transform-box: fill-box; transform-origin: 50% 100%; }
  .obst .decor { pointer-events: auto; }
  .obst:hover .decor { filter: brightness(1.12); }
  .field.mode .obst, .field.battle .obst { pointer-events: none; }
  .obst.tap { animation: tap .32s cubic-bezier(.2,.8,.2,1); }
  .obadge { animation: bob 1.4s ease-in-out infinite; pointer-events: none; }
  body.sheet-open .obadge { display: none; }
  .thumb.ob { width: 40px; height: 36px; }
  .mine { font-family: "Lilita One", "Baloo 2", sans-serif; font-size: 10px; fill: #ffe477; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 2; pointer-events: none; }
  .item.srow b { display: flex; align-items: center; gap: 4px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* ---- the Claude chip: the LLM feeding the base ---- */
  .p-claude { flex: 1 1 auto; min-width: 0; gap: 5px; padding-left: 8px; }
  .p-claude .cdot { width: 7px; height: 7px; border-radius: 50%; background: #6b6b6b; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
  .p-claude.live .cdot { background: #5cc142; animation: blip 1.6s ease-in-out infinite; }
  @keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .p-claude .txt { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 11px; }
  .p-claude .txt i { font-style: normal; color: var(--dim); font-weight: 600; margin-left: 5px; font-size: 10px; }

  /* ---- camera controls ---- */
  #zoomctl { position: absolute; right: 8px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 6; opacity: .82; }
  #zoomctl:hover { opacity: 1; }
  #zoomctl .zb { width: 27px; height: 27px; border: 2px solid rgba(0,0,0,.45); border-radius: 9px; background: linear-gradient(#f0e8d6, #c9b48c); color: #3a2a12; font: 900 17px/1 "Baloo 2", sans-serif; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.5); display: grid; place-items: center; padding: 0; }
  #zoomctl .zb.fit { font-size: 15px; }
  #zoomctl .zb:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
  #zoomctl.zmax .zb:first-child, #zoomctl.zmin .zb:nth-child(2) { opacity: .45; }
  .field.mode #zoomctl, .field.battle #zoomctl { display: none; }
  .field.panning { cursor: grabbing; }
  .field.panning .bld, .field.panning .obst, .field.panning .tile { pointer-events: none; }

  /* ---- the land card in the shop ---- */
  .sitem.land { border-color: rgba(92,196,71,.35); }
  .sitem.land .thumb { width: 48px; height: 40px; }
  .sitem.land .bl b { color: var(--gold); }

  /* ---- gem packs ---- */
  .packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 8px; }
  .pack { position: relative; cursor: pointer; border: 2px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(0,0,0,.3); color: var(--ink); padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: "Baloo 2", sans-serif; transition: transform .08s, border-color .12s; }
  .pack b { font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }
  .pack small { font-size: 10px; color: var(--gold); font-weight: 800; }
  .pack i { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--pink); color: #fff; padding: 1px 5px; border-radius: 99px; white-space: nowrap; }
  .pack:hover { border-color: var(--gold); }
  .pack:active { transform: scale(.96); }
  .pack.soon { opacity: .8; }

  /* =====================================================================
     LESSON CARDS
     A lesson is not a flashcard, so it does not look like one. It leads with
     the skill it is building, then what actually happened in the session, then
     why that matters, and only then the question.
     ===================================================================== */
  .lhead { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
  .lskill { font: 800 9px "Baloo 2"; letter-spacing: .1em; text-transform: uppercase; color: #2a1a00; background: linear-gradient(var(--gold), var(--gold-dk)); padding: 3px 8px; border-radius: 99px; }
  .llevel { font: 800 9.5px "Baloo 2"; letter-spacing: .06em; color: var(--dim); margin-left: auto; }
  .term.lt { font-size: 20px; color: var(--ink); margin-bottom: 6px; }
  .levt { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--gold); background: #14100c; border-left: 3px solid var(--gold-dk); border-radius: 0 6px 6px 0; padding: 5px 8px; margin: 0 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lwhat { font-size: 12px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
  .lwhy { font-size: 11.5px; line-height: 1.5; color: var(--dim); margin: 0 0 10px; padding: 8px 10px; background: rgba(0,0,0,.28); border-radius: 8px; border-left: 3px solid var(--blue); }
  .lwhy b { display: block; font: 800 9px "Baloo 2"; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 3px; }
  .lq { font-size: 13px; line-height: 1.45; color: var(--ink); font-weight: 800; margin: 0 0 8px; }
  .lrecall { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); opacity: .78; }
  .lrecall .term.lt { font-size: 15px; }
  .eyebrow.live { color: #7fe0a0; }
  .eyebrow.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; margin-right: 5px; vertical-align: 1px; animation: bl 1.6s infinite; }

  /* =====================================================================
     PHONE
     It is live at game.cutworks.studio and played on a phone, so below 560px
     this stops being a shrunk desktop widget: real viewport height that
     survives the URL bar, safe-area insets, and nothing tappable under 44px.
     ===================================================================== */
  html, body { height: 100dvh; overscroll-behavior: none; }
  body { -webkit-tap-highlight-color: transparent; }
  button, .opt, .pill, .mini, .tbtn { touch-action: manipulation; }

  @media (max-width: 560px) {
    /* the frame: clear of the notch at the top and the home bar at the bottom */
    .hud { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-left)) 6px max(10px, env(safe-area-inset-right)); gap: 7px; }
    .bbar { padding: 8px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right)); gap: 9px; }

    /* a real app tab bar, not three small buttons */
    .bbar .btn { padding: 15px 8px; font-size: 17px; min-height: 56px; border-radius: 12px; }
    .bico { width: 20px; height: 20px; }

    /* type that survives arm's length */
    .logo { font-size: 17px; }
    .pill { font-size: 13px; padding: 6px 12px 6px 6px; min-height: 36px; }
    .pill .bar { height: 8px; }
    .term { font-size: 26px; }
    .term.lt { font-size: 23px; }
    .lwhat { font-size: 14px; }
    .lwhy { font-size: 13px; }
    .lq { font-size: 15px; }
    .opt { font-size: 13.5px; min-height: 56px; padding: 11px 12px; border-radius: 11px; }
    .opt .k { flex: 0 0 24px; height: 24px; font-size: 11px; }
    .sheet p { font-size: 13px; }
    .sheet p.real { font-size: 12px; }
    .sheet h3 { font-size: 19px; }
    .sub, .stat, .spill, .cfoot { font-size: 12px; }
    .btn { font-size: 15px; padding: 12px 8px; min-height: 48px; }

    /* nothing you can tap is smaller than a fingertip */
    .cog, .x { width: 40px; height: 40px; }
    .cog .ico { width: 20px; height: 20px; }
    .x { font-size: 22px; }
    .mini { padding: 9px 14px; font-size: 11px; min-height: 40px; display: inline-flex; align-items: center; }
    .mini.wide { min-height: 44px; }
    .later { font-size: 13px; padding: 8px 10px; }
    .ghost { padding: 8px 4px; display: inline-block; }

    /* sheets behave like bottom sheets: full width, taller, thumb-reachable */
    .sheet { left: 0; right: 0; bottom: 0; max-height: 74%; border-radius: 18px 18px 0 0; border-bottom: 0;
             padding-bottom: env(safe-area-inset-bottom); }
    .sheet.tall { max-height: 86%; }
    .sh-head { padding: 12px 12px 10px 14px; }
    .body { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
    .learn { padding: 0; }
    .lcard { border-radius: 18px 18px 0 0; border-bottom: 0; margin-top: max(10px, env(safe-area-inset-top)); }

    /* the zoom controls sit above the tab bar, not under a thumb */
    #zoomctl { right: 12px; bottom: 12px; gap: 8px; opacity: 1; }
    #zoomctl .zb { width: 44px; height: 44px; font-size: 21px; border-radius: 12px; }
  }

  /* a phone on its side: the world needs the height back, so the chrome shrinks */
  @media (max-height: 460px) and (orientation: landscape) {
    .hud { padding-top: 4px; padding-bottom: 2px; gap: 4px; }
    #hud2 { display: none; }
    .bbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
    .bbar .btn { min-height: 42px; padding: 8px 6px; font-size: 15px; }
    .sheet, .lcard { max-height: 94%; }
  }