/* Look: kampung wood and paper. Cream panels with dark-wood ink, leaf-green actions, gold for coins and rewards. */
:root {
  --paper: #fff6e3; --paper-2: #f3e5c6; --ink: #3b2614; --ink-soft: #7a5a3c;
  --wood: #6b4423; --leaf: #2f7a4a; --leaf-dark: #22593a; --gold: #f2b632; --gold-deep: #c98a12; --red: #c8423b;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8cc0e0; color: var(--ink); font: 500 16px/1.45 var(--body); user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3f8a52, #22593a); color: #fff6e3; z-index: 90; }
#loading > div { display: grid; gap: 10px; justify-items: center; }
#loading b { font: 800 2.2rem var(--display); color: var(--gold); text-shadow: 0 4px 0 #8a5a10; }
#loading span { font: 700 1rem var(--body); }
#loading i { width: min(260px, 70vw); height: 12px; border-radius: 99px; background: rgba(255, 246, 227, .25); overflow: hidden; }
#loading em { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 99px; transition: width .2s; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > *, #hud button { pointer-events: auto; }
.topleft { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l)); display: grid; gap: 6px; max-width: min(62vw, 360px); pointer-events: none; }
#objective { background: rgba(255, 246, 227, .94); border: 2px solid var(--wood); border-radius: 14px; padding: 6px 12px 6px 8px; font: 700 .92rem/1.3 var(--body); box-shadow: 0 3px 0 rgba(59, 38, 20, .35); }
#objective .tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--leaf); color: #fff; font: 800 .7rem var(--display); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
#inventory { display: flex; gap: 5px; flex-wrap: wrap; }
#inventory .slot { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255, 246, 227, .9); border: 2px solid var(--wood); border-radius: 10px; }
.topright { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); display: flex; gap: 6px; align-items: center; }
.topright button { width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--wood); background: var(--paper); font-size: 1.35rem; box-shadow: 0 3px 0 rgba(59, 38, 20, .4); }
.topright button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59, 38, 20, .4); }
.coins { padding: 6px 12px; border-radius: 999px; background: rgba(59, 38, 20, .82); color: #ffe7a3; font: 800 1rem var(--display); }
.coins b { font-variant-numeric: tabular-nums; }
#actionBtn { position: absolute; right: calc(22px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); min-width: 118px; height: 118px; padding: 0 14px; border-radius: 60px;
  border: 4px solid #fff6e3; background: radial-gradient(circle at 35% 30%, #4caa6c, var(--leaf-dark)); color: #fff; font: 800 1.12rem/1.1 var(--display);
  box-shadow: 0 6px 0 #153d26, 0 10px 24px rgba(0, 0, 0, .3); animation: pulse 1.6s ease-in-out infinite; }
#actionBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #153d26; }
@keyframes pulse { 50% { box-shadow: 0 6px 0 #153d26, 0 0 0 10px rgba(242, 182, 50, .35); } }
#joy { position: fixed; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; background: rgba(255, 246, 227, .18); border: 3px solid rgba(255, 246, 227, .55); opacity: 0; pointer-events: none; z-index: 11; transition: opacity .15s; }
#joy.on { opacity: 1; }
#knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 246, 227, .85); transform: translate(-50%, -50%); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }

/* ---------- dialogue ---------- */
#dialog { position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); width: min(600px, calc(100vw - 24px)); z-index: 65;
  background: var(--paper); border: 3px solid var(--wood); border-radius: 20px; padding: 14px 18px 12px; box-shadow: 0 6px 0 rgba(59, 38, 20, .45), 0 12px 30px rgba(0, 0, 0, .25); animation: rise .25s ease-out; }
#dialog .who { position: absolute; top: -18px; left: 16px; display: flex; align-items: center; gap: 6px; padding: 2px 14px 2px 6px; border-radius: 999px; background: var(--wood); color: #fff6e3; font: 800 .95rem var(--display); }
#dialog .face { font-size: 1.3rem; }
#dialog p { margin: 8px 0 8px; font: 700 1.05rem/1.45 var(--body); }
#dialog .next { float: right; border: 0; background: var(--leaf); color: #fff; border-radius: 999px; padding: 6px 18px; font: 800 .95rem var(--display); }
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ---------- modal cards ---------- */
#modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: calc(16px + var(--safe-t)) max(16px, var(--safe-r)) calc(16px + var(--safe-b)) max(16px, var(--safe-l)); background: rgba(30, 20, 10, .38); }
.card { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border: 3px solid var(--wood); border-radius: 24px; padding: 22px 22px 18px; text-align: center;
  box-shadow: 0 8px 0 rgba(59, 38, 20, .45), 0 18px 40px rgba(0, 0, 0, .3); display: grid; gap: 10px; background-image: radial-gradient(circle at 10% 0%, #fffbef 0, transparent 50%); }
.pop { animation: pop .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.card h2 { margin: 0; font: 800 1.45rem/1.15 var(--display); color: var(--wood); text-wrap: balance; }
.card p { margin: 0; font-weight: 700; color: var(--ink); }
.card .small { font-size: .88rem; color: var(--ink-soft); font-weight: 600; }
.card .big { font-size: 3.4rem; line-height: 1; }
.cluehead { justify-self: center; padding: 3px 14px; border-radius: 999px; background: var(--wood); color: #ffe7a3; font: 800 .8rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.riddle { font: 700 1.08rem/1.55 var(--body) !important; color: var(--ink); background: var(--paper-2); border-radius: 14px; padding: 12px 14px; border: 2px dashed #c9a36a; }
.btn { border: 0; border-radius: 999px; padding: 12px 22px; background: var(--leaf); color: #fff; font: 800 1.05rem var(--display); box-shadow: 0 4px 0 var(--leaf-dark); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--leaf-dark); }
.btn.ghost { background: #fff; color: var(--leaf-dark); border: 2px solid var(--leaf); box-shadow: 0 3px 0 rgba(34, 89, 58, .35); }
.btn.small { padding: 6px 14px; font-size: .9rem; }
.btn.big { font-size: 1.3rem; padding: 14px 40px; }
.link { border: 0; background: none; color: var(--ink-soft); font: 700 .95rem var(--body); text-decoration: underline; padding: 4px; }

/* quiz */
.stars { display: flex; justify-content: center; gap: 6px; font-size: 1.7rem; color: #d9c9a8; }
.stars .got { color: var(--gold); text-shadow: 0 2px 0 var(--gold-deep); }
.stars .bump { animation: pop .4s; }
.stars.win { font-size: 2.6rem; }
.opts { display: grid; gap: 8px; }
.opt { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--wood); background: #fff; font: 800 1.02rem var(--body); box-shadow: 0 3px 0 rgba(59, 38, 20, .3); }
.opt.right { background: #d6f2dc; border-color: var(--leaf); }
.opt.wrong { background: #f8d6d3; border-color: var(--red); }
.fb { min-height: 1.4em; color: var(--leaf-dark) !important; }

/* journal */
.journal { text-align: left; }
.journal section h3 { margin: 4px 0 6px; font: 800 1.05rem var(--display); color: var(--wood); }
.journal section.solved { opacity: .62; }
.journal .cluehead { margin-bottom: 4px; }

/* map select */
.maps { width: min(560px, 100%); }
.coinbar { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 1.1rem var(--display); color: var(--wood); }
.maplist { display: grid; gap: 10px; }
.mapcard { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 18px; border: 2px solid var(--wood); background: #fff; box-shadow: 0 4px 0 rgba(59, 38, 20, .3); }
.mapcard:active { transform: translateY(2px); }
.mapcard .micon { font-size: 2.3rem; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: var(--paper-2); flex-shrink: 0; }
.mapcard .mtext { display: grid; gap: 1px; min-width: 0; }
.mapcard b { font: 800 1.12rem/1.2 var(--display); color: var(--wood); }
.mapcard small { color: var(--ink-soft); font-weight: 700; }
.mapcard .mprog { color: var(--leaf-dark); }
.mapcard.soon { opacity: .55; filter: grayscale(.5); cursor: default; }

/* wardrobe: sits low so the 3D player stays visible above it */
#modal:has(.wardrobe) { place-items: end center; background: linear-gradient(180deg, transparent 40%, rgba(30, 20, 10, .35)); }
.wardrobe { width: min(560px, 100%); max-height: 56vh; padding: 14px 16px 12px; gap: 8px; }
@media (orientation: landscape) { .wardrobe { max-height: 52vh; width: min(720px, 100%); } .wardrobe .items { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }
.tabs { display: flex; gap: 6px; overflow-x: auto; justify-content: center; flex-wrap: wrap; }
.tabs button { border: 2px solid var(--wood); background: #fff; border-radius: 999px; padding: 4px 14px; font: 800 .95rem var(--display); color: var(--wood); }
.tabs button.on { background: var(--wood); color: #ffe7a3; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.item { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; border: 2px solid #d8c39a; background: #fff; }
.item.on { border-color: var(--leaf); background: #e3f4e6; box-shadow: inset 0 0 0 2px var(--leaf); }
.item.prem { border-color: #b78be0; background: linear-gradient(180deg, #fff, #f3eafc); }
.item .sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(59, 38, 20, .3); display: grid; place-items: center; font-size: 1.4rem; background: var(--paper-2); }
.item .nm { font: 800 .85rem/1.15 var(--body); }
.item .pr { font: 800 .8rem var(--display); color: var(--gold-deep); }
.item.on .pr { color: var(--leaf-dark); }

/* toast */
#toast { position: fixed; left: 50%; top: calc(70px + var(--safe-t)); transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 32px); padding: 8px 18px; border-radius: 999px;
  background: rgba(59, 38, 20, .9); color: #fff6e3; font: 800 .98rem var(--body); text-align: center; pointer-events: none; }
#toast.show { animation: drop .3s ease-out; }
@keyframes drop { from { transform: translate(-50%, -12px); opacity: 0; } }

/* title */
#title { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, rgba(20, 50, 30, .1), rgba(20, 50, 30, .55)); transition: opacity .5s; }
#title.gone { opacity: 0; }
.tcard { width: min(460px, 100%); text-align: center; display: grid; gap: 12px; justify-items: center; color: #fff6e3; }
.tkicker { font: 800 .85rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: #ffe7a3; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
#title h1 { margin: 0; font: 800 clamp(3rem, 14vw, 5rem)/.92 var(--display); color: #fff6e3; text-shadow: 0 5px 0 var(--wood), 0 10px 26px rgba(0, 0, 0, .45); }
#title h1 span { color: var(--gold); text-shadow: 0 5px 0 #8a5a10, 0 10px 26px rgba(0, 0, 0, .45); }
#title p { margin: 0; max-width: 30ch; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.tfoot { margin-top: 10px; font: 700 .8rem var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

@media (max-width: 420px) {
  #objective { font-size: .84rem; }
  .topright button { width: 42px; height: 42px; font-size: 1.2rem; }
  #actionBtn { min-width: 104px; height: 104px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* account */
.acct { border: 0; border-radius: 999px; padding: 8px 16px; background: rgba(255, 246, 227, .92); color: var(--ink); font: 800 .92rem var(--body); box-shadow: 0 3px 0 rgba(59, 38, 20, .35); }
.acct.on { background: rgba(47, 122, 74, .92); color: #fff; }
.g { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: #fff; color: #4285f4; font: 800 .9rem/1 Arial, sans-serif; vertical-align: -5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.gbtn { display: grid; justify-items: center; min-height: 44px; }
.btn.gsign { background: #fff; color: #3c4043; border: 1px solid #dadce0; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.btn.danger { background: var(--red); box-shadow: 0 4px 0 #8a2620; }
.btn small { font: 700 .8rem var(--body); opacity: .9; }
.err { color: var(--red) !important; min-height: 1.2em; }
.avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--wood); }
.coinbar { flex-wrap: wrap; }
@media (orientation: landscape) and (max-height: 520px) {
  .tcard { gap: 8px; }
  #title h1 { font-size: clamp(2.4rem, 11vh, 4rem); }
  #title p { font-size: .92rem; }
  .tfoot { margin-top: 2px; }
}

/* close button that stays at the top while a long card scrolls */
.xclose { position: sticky; top: -8px; justify-self: end; margin: -12px -10px -44px 0; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--wood); background: var(--paper); color: var(--wood); font: 800 1.15rem/1 var(--display); box-shadow: 0 3px 0 rgba(59, 38, 20, .35); }
.xclose:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(59, 38, 20, .35); }

/* landscape only on phones (the Android app locks it; in a browser we ask) */
#rotate { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #3f8a52, #22593a); color: #fff6e3; }
#rotate > div { display: grid; gap: 10px; justify-items: center; }
#rotate b { font: 800 1.6rem var(--display); color: var(--gold); text-shadow: 0 3px 0 #8a5a10; }
#rotate span { font: 700 1rem var(--body); }
#rotate .phone { font-size: 4rem; animation: turn 1.8s ease-in-out infinite; }
@keyframes turn { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 599px) { #rotate { display: grid; } }

.tset { position: absolute; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--wood);
  background: var(--paper); font-size: 1.4rem; box-shadow: 0 3px 0 rgba(59, 38, 20, .4); }
/* two-choice switch in Settings */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.seg button { border: 0; border-radius: 12px; padding: 10px 8px; background: transparent; color: var(--wood); font: 800 1rem var(--display); }
.seg button[aria-pressed="true"] { background: var(--leaf); color: #fff; box-shadow: 0 3px 0 var(--leaf-dark); }
.card h2 + .seg { margin-top: -2px; }
@media (orientation: landscape) and (max-height: 520px) {
  .card.pause { width: min(560px, 100%); grid-template-columns: 1fr 1fr; }
  .card.pause h2, .card.pause #pResume { grid-column: 1 / -1; }
}

/* wardrobe: drag the character behind the panel; try-on and buy bar */
#modal:has(.wardrobe) { pointer-events: none; }
#modal .wardrobe { pointer-events: auto; }
.item.try { border-color: var(--gold-deep); background: #fff4d6; box-shadow: inset 0 0 0 2px var(--gold); }
.buybar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px 10px; border-radius: 14px; background: #fff4d6; border: 2px solid var(--gold); font: 700 .95rem/1.3 var(--body); }
.buybar span { flex: 1 1 200px; text-align: left; }
.item .sw svg { display: block; }
@media (orientation: landscape) and (max-height: 520px) {
  .card h2 { font-size: 1.15rem; }
  .card { gap: 8px; padding: 16px 18px 14px; }
}
@media (orientation: landscape) {
  #modal:has(.wardrobe) { place-items: center end; background: linear-gradient(90deg, transparent 35%, rgba(30, 20, 10, .3)); padding-right: max(14px, var(--safe-r)); }
  .wardrobe { width: min(470px, 56vw) !important; max-height: calc(100vh - 28px) !important; }
}

/* title logo */
.tlogo { width: min(300px, 62vw, 46vh); height: auto; border-radius: 18%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); animation: logoIn .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes logoIn { from { transform: scale(.7) rotate(-4deg); opacity: 0; } }
.tside { display: grid; gap: 12px; justify-items: center; }
#loading img { width: min(200px, 40vh); height: auto; border-radius: 18%; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
@media (orientation: landscape) {
  .tcard { width: min(820px, 100%); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; }
  .tlogo { width: min(340px, 72vh); }
  .tside { justify-items: center; }
}

.namein { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--wood); background: #fff; font: 800 1.2rem var(--body); color: var(--ink); text-align: center; user-select: text; -webkit-user-select: text; }
.namein:focus { outline: 3px solid var(--gold); }
.namerow { display: flex; align-items: center; justify-content: center; gap: 12px; font: 800 1.1rem var(--body); }
.buybar .btn:not(.ghost) { color: #fff; }
@media (orientation: landscape) {
  /* title: logo left, buttons right, the kampung folk in the middle */
  #title { background: linear-gradient(90deg, rgba(20, 50, 30, .45), transparent 30%, transparent 62%, rgba(20, 50, 30, .55)); place-items: stretch; padding: max(14px, var(--safe-t)) max(18px, var(--safe-r)) max(14px, var(--safe-b)) max(18px, var(--safe-l)); }
  .tcard { width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .tlogo { width: min(300px, 64vh); }
  .tside { width: min(330px, 38vw); }
}

/* jump button (left of the action button) and race HUD */
#jumpBtn { position: absolute; right: calc(150px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff6e3;
  background: radial-gradient(circle at 35% 30%, #f5c542, #c98a12); color: #3b2614; font: 800 1.6rem/1 var(--display); display: grid; place-items: center; align-content: center; gap: 0;
  box-shadow: 0 5px 0 #8a5a10, 0 8px 18px rgba(0, 0, 0, .3); }
#jumpBtn span { font-size: .72rem; letter-spacing: .04em; }
#jumpBtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5a10; }
#raceHud { position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
#raceHud span { padding: 6px 14px; border-radius: 999px; background: rgba(59, 38, 20, .85); color: #fff6e3; font: 800 1.05rem var(--display); font-variant-numeric: tabular-nums; }
#racePos { background: rgba(201, 138, 18, .95) !important; color: #2b1a08 !important; }
#countdown { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; pointer-events: none; font: 800 clamp(5rem, 22vh, 11rem)/1 var(--display); color: #fff6e3;
  text-shadow: 0 8px 0 var(--wood), 0 14px 30px rgba(0, 0, 0, .45); }
#countdown.pop { animation: cd .9s ease-out; }
@keyframes cd { from { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }
.results { width: 100%; display: grid; gap: 6px; text-align: left; }
.results div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid #e5d4ae; font: 800 1rem var(--body); }
.results div.me { border-color: var(--leaf); background: #e3f4e6; }
.results b { font: 800 1.2rem var(--display); }
.results span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.modes { display: grid; gap: 10px; }
.modes .mapcard small { white-space: normal; }

/* rooms: code, players, quick chat */
.roomcode { font: 800 2.6rem/1 var(--display); letter-spacing: .18em; color: var(--wood); background: var(--paper-2); border: 3px dashed #c9a36a; border-radius: 16px; padding: 10px 14px 6px; user-select: text; -webkit-user-select: text; }
.plist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.plist div { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 2px solid #e5d4ae; font: 700 .95rem var(--body); text-align: left; min-width: 0; }
.plist div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist div small { margin-left: auto; color: var(--ink-soft); }
.plist div.empty { color: var(--ink-soft); border-style: dashed; }
.mp-pick { display: grid; gap: 4px; }
.mp-pick .small { margin: 4px 0 0; text-align: left; color: var(--ink-soft); }
.mp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-tab, .mp-map { flex: 1 1 0; min-width: 0; border: 2px solid var(--wood); background: #fff; border-radius: 14px; padding: 10px 8px; font: 800 .98rem var(--display); color: var(--wood); box-shadow: 0 3px 0 rgba(59, 38, 20, .25); display: flex; align-items: center; justify-content: center; gap: 6px; }
.mp-tab:active, .mp-map:active { transform: translateY(2px); }
.mp-tab.on, .mp-map.on { background: var(--leaf); color: #fff; border-color: var(--leaf-dark); }
.mp-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 196px; overflow-y: auto; padding: 2px; }
.mp-maps .mp-map { flex: none; justify-content: flex-start; text-align: left; padding: 9px 10px; font-size: .9rem; }
.mp-map .mpi { font-size: 1.2rem; flex-shrink: 0; }
.mp-map b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-info { text-align: center; font-weight: 800; color: var(--leaf-dark); }
.joinrow { display: flex; gap: 8px; margin-top: 4px; }
.joinrow .namein { text-transform: uppercase; letter-spacing: .15em; }
.phrases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.phrases button { padding: 12px 6px; border-radius: 14px; border: 2px solid var(--wood); background: #fff; font: 800 1rem var(--body); box-shadow: 0 3px 0 rgba(59, 38, 20, .3); }
.phrases button:active { transform: translateY(2px); }
@media (orientation: landscape) and (max-height: 520px) { .lobby { width: min(560px, 100%); } .roomcode { font-size: 2rem; } }

/* ---------- rarity tiers (wardrobe) ---------- */
.item { position: relative; }
.item .tg { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; font: 800 .62rem/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.item.t-jarang { border-color: #4f8fd6; background: linear-gradient(180deg, #fff, #eaf3fd); }
.item.t-jarang .tg { background: #3a78c2; }
.item.t-epik { border-color: #e08a1e; background: linear-gradient(180deg, #fff, #fff0dc); box-shadow: 0 0 0 1px #f5c06a, 0 0 10px rgba(240, 160, 40, .35); }
.item.t-epik .tg { background: linear-gradient(90deg, #d8701a, #e9a52b); }
.item.t-prem .tg { background: #8a5cc4; }
.item.t-perintis { border-color: #c9962a; background: linear-gradient(180deg, #fffaf0, #fbe8b8); box-shadow: 0 0 0 1px #e8c05a, 0 0 12px rgba(220, 170, 50, .45); }
.item.t-perintis .tg { background: linear-gradient(90deg, #1d1b22, #6a5020); color: #ffe08a; }
.item.locked .sw { filter: grayscale(.7) opacity(.75); }
.item.locked .pr { color: #8a7a66; }
.item.on, .item.on.t-jarang, .item.on.t-epik { border-color: var(--leaf); background: #e3f4e6; }
.item.try, .item.try.t-jarang, .item.try.t-epik { border-color: var(--gold-deep); background: #fff4d6; }
.wardrobe .items { padding-top: 6px; row-gap: 14px; }

/* ---------- Misi Harian ---------- */
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #d64545; color: #fff; font: 800 .7rem var(--body); }
.daily { max-width: 560px; }
.daily h2 { margin: 10px 0 6px; font-size: 1rem; }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.streak div { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px solid #d8c39a; background: #fff; }
.streak small { font: 700 .66rem var(--body); color: #7a6248; }
.streak b { font: 800 .78rem var(--display); color: var(--gold-deep); white-space: nowrap; }
.streak .got { background: #e3f4e6; border-color: var(--leaf); }
.streak .today { border-color: var(--gold-deep); box-shadow: inset 0 0 0 2px var(--gold); background: #fff4d6; }
.streak i { position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--leaf); color: #fff; font: 800 .7rem/18px var(--body); font-style: normal; text-align: center; }
.missions { display: grid; gap: 8px; }
.mission { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 2px solid #d8c39a; background: #fff; text-align: left; }
.mission .mtxt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mission .mtxt b { font: 800 .9rem/1.2 var(--body); }
.mission .bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.mission .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.mission small { font: 700 .72rem var(--body); color: #7a6248; }
.mission.ready { border-color: var(--gold-deep); background: #fff8e6; }
.mission.claimed { opacity: .65; }
.mission .mdone { width: 32px; height: 32px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; font-weight: 800; }
.mission .btn[disabled] { opacity: .55; }
.mission .btn:not(.ghost) { color: #fff; }
.mission.pm { border-color: #b78be0; background: linear-gradient(180deg, #fff, #f6effd); }
.mission.pm .bar i { background: linear-gradient(90deg, #a77ad8, #7a4fb0); }
.mission.pm.ready { border-color: #7a4fb0; box-shadow: inset 0 0 0 2px #c9a8ee; }
.mission .mlock { font: 800 .8rem var(--display); color: #8a6aa8; white-space: nowrap; }
.passbuy { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; text-align: left; background: linear-gradient(90deg, #7a4fb0, #a35fc4); color: #fff; }
.passbuy div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.passbuy small { font: 700 .74rem/1.3 var(--body); opacity: .92; }
.passbuy .btn { background: #fff; color: #6a3f9c; white-space: nowrap; }
.item .fr { margin-top: -2px; font: 700 .66rem var(--body); color: #8a7058; letter-spacing: .02em; }

/* ---------- the journey: locked places, tickets, trip, passport ---------- */
.mapcard.locked { background: linear-gradient(180deg, #efe6d2, #e6dcc4); border-style: dashed; }
.mapcard.locked .micon { filter: grayscale(.8); opacity: .75; }
.mapcard.locked .mprog { color: #8a6a3a; }
.mapcard.buy { border-style: solid; border-color: var(--gold-deep); background: linear-gradient(180deg, #fff8e6, #ffefc8); }
.mapcard.buy .mprog { color: var(--gold-deep); font-weight: 800; }
.stars { color: #e0a020; letter-spacing: 1px; font-size: .95em; }
.reqs { display: grid; gap: 8px; text-align: left; }
.req { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 2px solid #d8c39a; background: #fff; }
.req span { font-size: 1.3rem; }
.req p { margin: 0; font-size: .9rem; }
.req.ok { border-color: var(--leaf); background: #e3f4e6; }
.ticket .tkt { display: grid; grid-template-columns: 82px 1fr; border-radius: 14px; overflow: hidden; border: 2px solid var(--wood); background: #fffaf0; text-align: left; }
.tk-l { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--gold); border-right: 3px dashed var(--wood); }
.tk-l small { font: 800 .7rem var(--display); letter-spacing: .1em; color: var(--wood); }
.tk-l b { font-size: 2.2rem; }
.tk-r { display: grid; gap: 1px; padding: 10px 14px; }
.tk-r small { font: 700 .66rem var(--body); color: #8a7058; text-transform: uppercase; letter-spacing: .08em; }
.tk-r b { font: 800 1rem var(--display); color: var(--wood); }
.tk-r span { justify-self: end; font: 800 1.05rem var(--display); color: var(--gold-deep); }
.trip-sky { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #8fd0f5, #e8f6ff); }
.trip-ferry .trip-ground { position: absolute; inset: auto 0 0 0; height: 46px; background: repeating-linear-gradient(90deg, #2f8ec2 0 20px, #3aa0d4 20px 40px); animation: waves 1s linear infinite; }
.trip-bus .trip-ground { position: absolute; inset: auto 0 0 0; height: 40px; background: #6b6b72; border-top: 8px solid #7fbf5a; }
.trip-bus .trip-ground::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: repeating-linear-gradient(90deg, #f2efe6 0 22px, transparent 22px 44px); animation: waves .5s linear infinite; }
.trip-plane .trip-ground { position: absolute; inset: auto 0 0 0; height: 30px; background: #9bd06a; }
.trip-go { position: absolute; left: -60px; bottom: 30px; font-size: 3rem; animation: trip 2.8s ease-in-out forwards; }
.trip-plane .trip-go { bottom: 70px; animation-name: tripfly; }
.trip-ferry .trip-go { transform: scaleX(-1); }
.trip-sun { position: absolute; right: 18px; top: 10px; font-size: 2rem; }
.trip-cloud { position: absolute; font-size: 1.8rem; opacity: .9; animation: drift 6s linear infinite; }
.trip-cloud.c1 { top: 14px; left: 20%; } .trip-cloud.c2 { top: 44px; left: 65%; animation-duration: 8s; }
@keyframes trip { from { left: -60px; } to { left: calc(100% + 20px); } }
@keyframes tripfly { 0% { left: -60px; bottom: 20px; } 60% { bottom: 80px; } 100% { left: calc(100% + 20px); bottom: 95px; } }
@keyframes waves { to { background-position: 40px 0; } }
@keyframes drift { to { transform: translateX(-80px); } }
.passport { max-width: 560px; }
.passport .pages { display: grid; gap: 10px; }
.pp { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; padding: 10px; border-radius: 14px; border: 2px solid #c9b48a; background: repeating-linear-gradient(0deg, #fbf6ea 0 22px, #f3ecdb 22px 23px); text-align: left; }
.pp.locked { opacity: .7; }
.stamp { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border-radius: 50%; border: 3px dashed #b9a47a; color: #b9a47a; transform: rotate(-8deg); }
.stamp span { font-size: 1.8rem; line-height: 1; }
.stamp small { font: 800 .58rem var(--display); letter-spacing: .08em; }
.stamp.on { border: 3px solid #c8423b; color: #c8423b; background: rgba(200, 66, 59, .06); box-shadow: inset 0 0 0 3px rgba(200, 66, 59, .25); }
.pinfo { display: grid; gap: 2px; min-width: 0; }
.pinfo b { font: 800 1rem var(--display); color: var(--wood); }
.pinfo ul { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.pinfo li { font-size: .78rem; color: #8a7058; }
.pinfo li.ok { color: var(--leaf-dark); font-weight: 700; }
.pinfo li i { font-style: normal; color: var(--gold-deep); font-weight: 800; }
.pinfo small { font-size: .78rem; color: #8a7058; }
.mapcard .mprog .stars { display: block; text-align: left; font-size: 1rem; }
.mapcard.final { border-color: #2f8a8a; background: linear-gradient(120deg, #e4f3ef, #f3ead2); }
.mapcard.final .micon { filter: none; opacity: .55; }
.pieces { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.pc { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px dashed #c9b48a; background: #f6efdd; }
.pc span { font-size: 1.4rem; filter: grayscale(1); opacity: .45; }
.pc small { font: 700 .58rem/1.1 var(--body); color: #8a7058; text-align: center; }
.pc.got { border-style: solid; border-color: var(--leaf); background: #e3f4e6; }
.pc.got span { filter: none; opacity: 1; }

/* no double-tap zoom on buttons and pop-ups; text boxes at 16px+ so iOS doesn't zoom in when typing */
#modal, #dialog, .card { touch-action: pan-x pan-y; }   /* scroll yes, pinch / double-tap zoom no */
button, .btn, .item, .mapcard { touch-action: manipulation; }
input, textarea, select { font-size: max(16px, 1em) !important; }
/* grown-up check before Google Play purchases */
.gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(30, 20, 10, .55); }
.gate .gq { font: 800 2.2rem var(--display); color: var(--wood); }
.gate .gopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gate .gopts .btn { font: 800 1.3rem var(--display); }

/* photo mode (Mod Kamera) */
#photoUi { position: fixed; inset: 0; z-index: 30; pointer-events: none; font-family: var(--display); }
#photoUi button, #photoUi input, #photoUi .ph-panel, #photoUi .ph-shot { pointer-events: auto; }
#photoUi.flash::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .85; animation: phflash .18s ease-out forwards; }
@keyframes phflash { to { opacity: 0; } }
.ph-close { position: absolute; top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l, 0px)); width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--wood); background: var(--paper); font-size: 1.3rem; color: var(--ink); box-shadow: 0 3px 0 rgba(59, 38, 20, .4); }
.ph-panel { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); width: min(230px, 42vw); padding: 10px 12px; border-radius: 16px; background: rgba(255, 246, 227, .9); border: 2px solid var(--wood); display: grid; gap: 4px; }
.ph-panel label { display: grid; gap: 1px; font: 700 .82rem var(--display); color: var(--ink); }
.ph-panel label i { font-style: normal; }
.ph-panel input[type=range] { width: 100%; accent-color: var(--leaf); height: 22px; margin: 0; }
.ph-toggles { display: flex; gap: 4px; margin-top: 4px; }
.ph-toggles button { flex: 1; padding: 6px 2px; border-radius: 10px; border: 2px solid var(--leaf-dark); background: var(--leaf); color: #fff; font: 700 .72rem var(--display); }
.ph-toggles button i { font-style: normal; display: block; }
.ph-toggles button.off { background: var(--paper-2); color: var(--ink-soft); border-color: #c8b48e; }
.ph-poses { position: absolute; left: calc(10px + var(--safe-l, 0px)); bottom: calc(14px + var(--safe-b)); display: flex; gap: 6px; }
.ph-poses button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--wood); background: var(--paper); font-size: 1.4rem; box-shadow: 0 3px 0 rgba(59, 38, 20, .4); }
.ph-snap { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(circle at 35% 30%, #f6c84a, var(--gold-deep)); font-size: 2rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.ph-snap:active { transform: translateX(-50%) scale(.94); }
.ph-help { position: absolute; left: 50%; bottom: calc(104px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 99px; background: rgba(40, 26, 14, .55); color: #fff6e3; font: 600 .78rem var(--body); white-space: nowrap; }
.ph-shot { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(20, 14, 8, .82); padding: 16px; }
.ph-shot img { max-width: min(92vw, 900px); max-height: 66vh; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.ph-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ph-acts button { padding: 10px 18px; border-radius: 14px; border: 2px solid var(--wood); background: var(--paper); font: 800 1rem var(--display); color: var(--ink); box-shadow: 0 3px 0 rgba(59, 38, 20, .4); }
.ph-acts button.main { background: var(--leaf); color: #fff; border-color: var(--leaf-dark); }
.ph-acts button i { font-style: normal; }
@media (max-height: 430px) { .ph-panel { width: min(190px, 32vw); gap: 0; padding: 5px 9px; } .ph-panel label { font-size: .7rem; } .ph-panel input[type=range] { height: 18px; } .ph-toggles button { padding: 3px 2px; font-size: .64rem; } .ph-poses button { width: 40px; height: 40px; font-size: 1.15rem; } .ph-snap { width: 66px; height: 66px; font-size: 1.6rem; } .ph-help { top: calc(14px + var(--safe-t)); bottom: auto; font-size: .7rem; } }

.tg-hat { display: grid; place-items: center; margin: 4px 0 2px; }
.tg-hat svg { width: 96px; height: 96px; }

/* ---------- Robot Penjelajah lab ---------- */
.card.lab { width: min(900px, 100%); grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; overflow: hidden; height: 100%; max-height: 640px; }
.labside { display: grid; gap: 10px; justify-items: center; align-content: start; }
.labside canvas { width: 100%; height: 320px; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #3a5566, #142029); touch-action: none; }
.labmain { display: grid; gap: 10px; align-content: start; overflow: auto; height: 100%; padding: 4px 4px 4px 0; }
.labinfo { display: grid; gap: 8px; justify-items: center; min-width: 0; width: 100%; }
.labinfo > b { font: 800 1.4rem var(--display); color: var(--wood); overflow-wrap: anywhere; }
.labinfo .parts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.labinfo .parts span { padding: 4px 12px; border-radius: 999px; background: rgba(59, 38, 20, .85); color: #ffe7a3; font: 800 1rem var(--display); }
.labinfo .busy { display: grid; gap: 6px; justify-items: center; padding: 8px 10px; border-radius: 12px; background: #e9f6fb; border: 2px solid #6fc3d9; font: 700 .85rem var(--body); }
.labinfo .busy .btn { color: #fff; font: 800 .88rem var(--display); }
@media (max-width: 640px) {
  .card.lab { grid-template-columns: minmax(0, 1fr); overflow: auto; height: auto; max-height: 100%; }
  .labmain { overflow: visible; height: auto; padding: 0; }
  .labside canvas { height: 240px; }
}
@media (max-height: 520px) and (min-width: 641px) { .card.lab { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } .labside canvas { height: 200px; } .labinfo > b { font-size: 1.15rem; } }
#labBody { display: grid; gap: 10px; }
#labBody h3 { margin: 4px 0 -4px; font: 800 .82rem var(--display); color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.expcard { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 18px; border: 2px solid var(--wood); background: #fff; }
.expcard .micon { font-size: 2.4rem; }
.expcard div { display: grid; min-width: 0; }
.expcard b { font: 800 1.3rem var(--display); color: var(--wood); }
.expcard small { color: var(--ink-soft); font-weight: 700; }
.statrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.statrow span { padding: 4px 10px; border-radius: 999px; background: var(--paper-2); font: 800 .85rem var(--body); }
.btn.gold { background: var(--gold); color: #5a3a08; box-shadow: 0 4px 0 var(--gold-deep); }
.btn.off { background: #a9b8ad; box-shadow: 0 4px 0 #8a988e; }
.mods { display: grid; gap: 8px; }
.mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 16px; background: #fff; border: 2px solid #e5d4ae; }
.mod .micon { font-size: 1.8rem; }
.mod .mt { display: grid; gap: 3px; min-width: 0; }
.mod .mt b small { color: var(--ink-soft); font-weight: 700; }
.mod .mt > small { color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
.lvbar { display: flex; gap: 3px; }
.lvbar i { width: 22px; height: 7px; border-radius: 4px; background: #e5d4ae; }
.lvbar i.on { background: var(--leaf); }
.mod .btn small { display: block; }
.mod .maxed { font: 800 .85rem var(--display); color: var(--leaf); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.swc { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d8c49a; }
.swc.on { box-shadow: 0 0 0 3px var(--leaf); }
.drow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ditem { position: relative; display: grid; justify-items: center; gap: 2px; width: 82px; padding: 8px 4px; border-radius: 14px; border: 2px solid #e5d4ae; background: #fff; font: 700 .75rem var(--body); color: var(--ink); }
.ditem span { font-size: 1.5rem; line-height: 1.2; }
.ditem.on { border-color: var(--leaf); background: #e3f4e6; }
.ditem em { font-style: normal; font: 800 .72rem var(--body); color: var(--gold-deep); }
.pat { display: block; width: 40px; height: 26px; border-radius: 6px; background: #ddd; }
.pat.p-none { background: linear-gradient(135deg, #e8c05a, #c99a2e); }
.pat.p-songket { background: repeating-linear-gradient(45deg, #7a1f2e 0 6px, #e8c05a 6px 8px); }
.pat.p-batik { background: radial-gradient(circle at 30% 40%, #e9d9a6 0 4px, transparent 5px), radial-gradient(circle at 70% 65%, #e9d9a6 0 4px, transparent 5px), #1f5f73; }
.pat.p-pua { background: repeating-linear-gradient(45deg, #7a2a1c 0 5px, #e8d6b0 5px 7px, #1e1410 7px 10px); }
.robotcard { border-color: #3d8fe0; background: linear-gradient(90deg, #eef6ff, #fff); }
.robot-res .rscore { font: 800 3rem/1 var(--display); color: var(--gold-deep); }
.robot-res .rgot { display: flex; gap: 10px; justify-content: center; }
.robot-res .rgot span { padding: 6px 14px; border-radius: 999px; background: rgba(59, 38, 20, .85); color: #ffe7a3; font: 800 1.1rem var(--display); }
.results small { color: var(--ink-soft); font-weight: 700; }
#raceTime.low { background: rgba(200, 66, 59, .92); animation: lowbat .6s ease-in-out infinite alternate; }
@keyframes lowbat { to { transform: scale(1.08); } }
.card.lab > .xclose { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 5; }   /* above the sticky tabs */
.card.lab > .labside { grid-column: 1; grid-row: 1; }
.card.lab > .labmain { grid-column: 2; grid-row: 1; }
@media (max-width: 640px) { .card.lab > .labmain { grid-column: 1; grid-row: 2; } }
.labmain .tabs { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 4px 48px 8px 0; margin-top: -4px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.labmain .tabs button { flex: none; padding: 4px 11px; font-size: .9rem; }
.labmain { grid-auto-rows: max-content; }
.lvbar i { width: 12px; }
.mod .chance { font-weight: 800 !important; }
.mod .chance.c100 { color: var(--leaf) !important; } .mod .chance.c70 { color: #b07a10 !important; } .mod .chance.c50 { color: #c8642b !important; } .mod .chance.c25 { color: var(--red) !important; }
.mod .btn { color: #fff; } .mod .btn small { color: #e8f6ec; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.subtabs button { border: 0; border-radius: 12px; padding: 7px 12px; background: transparent; color: var(--wood); font: 800 .9rem var(--display); }
.subtabs button.on { background: var(--leaf); color: #fff; box-shadow: 0 3px 0 var(--leaf-dark); }
.drow { padding-top: 4px; }
.ditem { width: 104px; padding: 12px 6px 10px; }
.ditem span { font-size: 2rem; }
.ditem.prem { border-color: #c9a3ff; background: linear-gradient(180deg, #f6efff, #fff); }
.ditem.prem.on { border-color: var(--leaf); }
.ditem .ptag { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: .8rem; }
.ditem em.pm { color: #7d3fd1; }
.labinfo > b[role=button] { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 12px; border: 2px dashed transparent; }
.labinfo > b[role=button]:hover { border-color: #d8c49a; }
.labinfo > b .pen { font-size: .9rem; opacity: .7; }
.labinfo .namein.small { width: 150px; padding: 6px 10px; font-size: 1.05rem; }
.subtabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.subtabs button { flex: none; padding: 7px 10px; }
a.btn { text-decoration: none; display: inline-block; }

/* ---------- Robot theme: the AmerInfoTech lab (dark glass, neon lines) ---------- */
.robo { --r-bg: #0a1420; --r-panel: #10203a; --r-panel-2: #152a48; --r-line: #24486a; --r-neon: #38d9f5; --r-neon-2: #4d7cff; --r-text: #e6f6ff; --r-dim: #8fb3c9; --r-gold: #ffd24a; --r-tech: "Orbitron", "Baloo 2", system-ui, sans-serif;
  color: var(--r-text); }
.card.robo { background: radial-gradient(circle at 20% 0%, rgba(56, 217, 245, .14), transparent 45%), radial-gradient(circle at 100% 100%, rgba(77, 124, 255, .16), transparent 50%),
    repeating-linear-gradient(0deg, rgba(56, 217, 245, .05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(56, 217, 245, .05) 0 1px, transparent 1px 28px), var(--r-bg);
  border: 2px solid var(--r-neon); box-shadow: 0 0 0 1px rgba(56, 217, 245, .25), 0 0 28px rgba(56, 217, 245, .35), 0 18px 40px rgba(0, 0, 0, .5); }
.robo h2 { color: var(--r-text); font-family: var(--r-tech); letter-spacing: .04em; text-shadow: 0 0 12px rgba(56, 217, 245, .5); }
.robo p, .robo .small:not(.btn), .robo small { color: var(--r-dim) !important; }   /* .small is also a button size */
.robo p b, .robo .small b { color: var(--r-text); }
.robo .riddle { background: var(--r-panel) !important; border: 1px solid var(--r-line) !important; color: var(--r-text) !important; }
.robo .cluehead { background: rgba(56, 217, 245, .08); border: 1px solid var(--r-neon); color: var(--r-neon); font-family: var(--r-tech); letter-spacing: .14em; box-shadow: 0 0 12px rgba(56, 217, 245, .3) inset; }
.robo .xclose { background: var(--r-panel); color: var(--r-neon); border: 2px solid var(--r-neon); box-shadow: 0 0 12px rgba(56, 217, 245, .4); }
.robo .btn { background: linear-gradient(90deg, var(--r-neon), var(--r-neon-2)); color: #04121c; font-family: var(--r-tech); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 16px rgba(56, 217, 245, .45), 0 4px 0 #1b3a8a; }
.robo .btn small { color: #0b2a3a !important; }
.robo .btn.ghost { background: transparent; color: var(--r-neon); border: 1.5px solid var(--r-neon); box-shadow: 0 0 10px rgba(56, 217, 245, .25) inset; }
.robo .btn.gold { background: linear-gradient(90deg, #ffd24a, #ff9a3c); color: #2a1600; box-shadow: 0 0 16px rgba(255, 190, 60, .5), 0 4px 0 #8a4a10; }
.robo .btn.off { background: #22344a; color: #6f8aa0; box-shadow: none; }
.robo .link { color: var(--r-dim); }
.robo .labside canvas { background: radial-gradient(circle at 50% 30%, #1d3a5c, #060d16 75%); border: 1px solid var(--r-line); box-shadow: 0 0 22px rgba(56, 217, 245, .25) inset; }
.robo .labinfo > b { color: var(--r-text); font-family: var(--r-tech); font-size: 1.25rem; letter-spacing: .08em; text-shadow: 0 0 10px rgba(56, 217, 245, .6); }
.robo .labinfo > b[role=button]:hover { border-color: var(--r-line); }
.robo .labinfo .parts span { background: var(--r-panel); border: 1px solid var(--r-line); color: var(--r-gold); font-family: var(--r-tech); font-size: .9rem; }
.robo .labinfo .busy { background: rgba(56, 217, 245, .08); border: 1px solid var(--r-neon); color: var(--r-text); }
.robo .namein { background: var(--r-panel); color: var(--r-text); border: 1.5px solid var(--r-neon); }
.robo .labmain .tabs { background: transparent; }
.robo .card.lab .labmain .tabs, .card.lab.robo .labmain .tabs { background: linear-gradient(var(--r-bg) 80%, transparent); }
.robo .tabs button { background: var(--r-panel); border: 1px solid var(--r-line); color: var(--r-dim); font-family: var(--r-tech); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 10px; padding: 7px 11px; }
.robo .tabs button.on { background: linear-gradient(90deg, rgba(56, 217, 245, .25), rgba(77, 124, 255, .25)); border-color: var(--r-neon); color: var(--r-text); box-shadow: 0 0 12px rgba(56, 217, 245, .45); }
.robo .subtabs, .robo .seg { background: var(--r-panel); border: 1px solid var(--r-line); }
.robo .subtabs button, .robo .seg button { color: var(--r-dim); font-family: var(--r-tech); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.robo .subtabs button.on, .robo .seg button[aria-pressed="true"] { background: rgba(56, 217, 245, .18); color: var(--r-neon); box-shadow: 0 0 0 1px var(--r-neon) inset, 0 0 12px rgba(56, 217, 245, .35); }
.robo #labBody h3 { color: var(--r-neon); font-family: var(--r-tech); font-size: .7rem; letter-spacing: .16em; }
.robo .expcard, .robo .mod, .robo .ditem, .robo .results div, .robo .buybar { background: linear-gradient(180deg, var(--r-panel-2), var(--r-panel)); border: 1px solid var(--r-line); color: var(--r-text); }
.robo .expcard b, .robo .mod .mt b { color: var(--r-text); font-family: var(--r-tech); letter-spacing: .04em; }
.robo .expcard { box-shadow: 0 0 18px rgba(56, 217, 245, .12) inset; }
.robo .statrow span { background: var(--r-panel); border: 1px solid var(--r-line); color: var(--r-text); }
.robo .ditem { color: var(--r-text); }
.robo .ditem.on, .robo .results div.me { border-color: var(--r-neon); background: linear-gradient(180deg, rgba(56, 217, 245, .2), var(--r-panel)); box-shadow: 0 0 14px rgba(56, 217, 245, .35); }
.robo .ditem.prem { border-color: #8a5cff; background: linear-gradient(180deg, #2a1d52, var(--r-panel)); }
.robo .ditem.prem.on { border-color: var(--r-neon); }
.robo .ditem em { color: var(--r-gold); } .robo .ditem em.pm { color: #c9a3ff; }
.robo .swc { border-color: var(--r-bg); box-shadow: 0 0 0 1.5px var(--r-line); }
.robo .swc.on { box-shadow: 0 0 0 2.5px var(--r-neon), 0 0 14px var(--r-neon); }
.robo .lvbar i { background: #1d3550; }
.robo .lvbar i.on { background: var(--r-neon); box-shadow: 0 0 6px var(--r-neon); }
.robo .mod .maxed { color: var(--r-gold); font-family: var(--r-tech); }
.robo .mod .chance.c100 { color: #4dff9a !important; } .robo .mod .chance.c70 { color: #ffd24a !important; } .robo .mod .chance.c50 { color: #ff9a3c !important; } .robo .mod .chance.c25 { color: #ff6a5a !important; }
.robo .results b { color: var(--r-gold); }
.robo .results span:last-child { color: var(--r-neon); font-family: var(--r-tech); }
.robo .pat { box-shadow: 0 0 0 1px var(--r-line); }
.robo.robot-res .rscore { color: var(--r-gold); font-family: var(--r-tech); text-shadow: 0 0 18px rgba(255, 210, 74, .6); }
.robo.robot-res .rgot span { background: var(--r-panel); border: 1px solid var(--r-line); color: var(--r-gold); font-family: var(--r-tech); }
.robo .labmain::-webkit-scrollbar { width: 6px; } .robo .labmain::-webkit-scrollbar-thumb { background: var(--r-line); border-radius: 3px; }
.ditem .dthumb { width: 84px; height: 84px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, #1d3a5c, #08111c 80%); box-shadow: 0 0 0 1px #24486a inset; }
.robo .drow { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.robo .ditem { width: auto; padding: 10px 8px 8px; border-radius: 14px; gap: 6px; }
.robo .ditem small { font: 800 .74rem var(--body); color: var(--r-text) !important; }
.robo .ditem.on .dthumb { box-shadow: 0 0 0 1.5px var(--r-neon) inset, 0 0 16px rgba(56, 217, 245, .35); }
.robo .ditem .pat { width: 84px; height: 84px; border-radius: 10px; }
.robo .subtabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; }
.robo .subtabs button { padding: 7px 2px; font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .robo .subtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.labside canvas { height: 380px; }
@media (max-height: 520px) and (min-width: 641px) { .labside canvas { height: 230px; } }
@media (max-width: 640px) { .labside canvas { height: 280px; } }
@media (max-width: 900px) {
  .robo .tabs button { font-size: .62rem; padding: 6px 7px; letter-spacing: .04em; }
  .robo .subtabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .robo .subtabs button { font-size: .66rem; }
}
.robo .mod .btn { color: #04121c; font-family: var(--r-tech); }
.robo .mod .btn small { color: #0b2a3a !important; font-family: var(--r-tech); }
.robo .mod .btn.off { color: #9fb4c6; }
.robo .mod .btn.off small { color: #8aa0b4 !important; }
/* the lab fits the screen: one row as tall as the card, each side scrolls on its own (short phone screens in landscape) */
.card.lab { grid-template-rows: minmax(0, 1fr); }
.card.lab > .labside, .card.lab > .labmain { height: 100%; min-height: 0; overflow-y: auto; }
.card.lab > .labside { scrollbar-width: none; }
@media (max-height: 520px) and (min-width: 641px) {
  .card.lab { padding: 12px 14px; gap: 12px; }
  .card.lab > .labside { grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
  .labside canvas { height: 100% !important; min-height: 110px; }
  .labside .cluehead { font-size: .62rem; padding: 2px 10px; }
  .labinfo { gap: 4px; } .labinfo > b { font-size: 1rem !important; }
  .labinfo .parts span { font-size: .78rem; padding: 2px 10px; }
}
@media (max-width: 640px) { .card.lab { grid-template-rows: auto; } .card.lab > .labside, .card.lab > .labmain { height: auto; overflow: visible; } }

/* Premium Store */
.card.store { width: min(460px, 100%); max-height: 100%; overflow-y: auto; }
.card.store .big { font-size: 2.6rem; margin: 0; }
.card.store h3 { margin: 12px 0 6px; font-size: 1rem; text-align: left; }
.packs { display: grid; gap: 8px; }
.pack { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.05); text-align: left; }
.pack .picon { font-size: 1.7rem; flex: none; }
.pack .pt { flex: 1; min-width: 0; display: grid; }
.pack .pt small { opacity: 0.75; }
.pack .btn { flex: none; width: auto; min-width: 86px; margin: 0; color: #fff; font-weight: 800; }
.pack .btn.off { opacity: 0.45; color: #3a2a18; }
#robotBtn.on { box-shadow: 0 0 0 2px #38d9f5; }