/* Hoppitree: Family Den game styles. Prefix every class with the game id. */

/* ---------- shared setup screen (same look for both games) ---------- */
.memory-stage { background: linear-gradient(180deg, rgba(232, 255, 240, .8), rgba(205, 242, 250, .75)); }
.treetop-stage { background: linear-gradient(180deg, rgba(214, 240, 255, .85), rgba(232, 255, 225, .8)); }
.memory-setup, .treetop-setup { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 20px); padding: clamp(8px, 2vh, 18px) 10px; }
.memory-set-row, .treetop-set-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); flex-wrap: wrap; max-width: 100%; }
.memory-set-lab, .treetop-set-lab { font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; color: var(--ink); min-width: 5.2em; text-align: right; }
.memory-set-opts, .treetop-set-opts { display: flex; gap: clamp(6px, 1vw, 12px); flex-wrap: wrap; justify-content: center; }
.memory-opt, .treetop-opt { min-width: 72px; min-height: 64px; padding: 6px 14px; border-radius: 20px; border: 4px solid #fff; background: #fff; font-size: clamp(16px, 1.9vw, 22px); font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 5px 0 rgba(29, 43, 83, .14); transition: transform .15s; }
.memory-opt b, .treetop-opt b { font-size: 1.7em; line-height: 1; }
.memory-opt em { font-style: normal; font-size: 1.5em; line-height: 1.1; }
.memory-opt.on, .treetop-opt.on { background: #FFF3B8; border-color: #FFB627; transform: scale(1.08); box-shadow: 0 5px 0 rgba(200, 130, 0, .35); }
.memory-opt:active, .treetop-opt:active { transform: scale(.95); }
.memory-ico { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; height: 31px; align-content: center; }
.memory-ico u { width: 9px; height: 9px; border-radius: 3px; background: #2BB24C; }
.memory-opt[data-v="8"] .memory-ico { grid-template-columns: repeat(2, 9px); }
.memory-opt[data-v="10"] .memory-ico { grid-template-columns: repeat(3, 9px); }
.memory-set-players, .treetop-set-players { display: flex; gap: clamp(8px, 1.4vw, 18px); justify-content: center; flex-wrap: wrap; max-width: 100%; }
.memory-pl, .treetop-pl { position: relative; width: clamp(84px, 14vw, 150px); min-height: 96px; padding: 8px 6px 10px; border-radius: 24px; border: 5px solid var(--pc); background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 6px 0 rgba(29, 43, 83, .14); }
.memory-pl-tok, .treetop-pl-tok { font-size: clamp(38px, 6vw, 64px); line-height: 1.1; }
.memory-pl-name, .treetop-pl-name { font-size: clamp(15px, 1.8vw, 21px); font-weight: 700; color: var(--pc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-pl-swap, .treetop-pl-swap { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--pc); font-size: 16px; display: grid; place-items: center; }
.memory-pl:active .memory-pl-tok, .treetop-pl:active .treetop-pl-tok { transform: scale(.9); }
.memory-set-go, .treetop-set-go { font-size: clamp(24px, 3.2vw, 34px); padding: 14px 54px; border-radius: 34px; }

/* ---------- shared celebration ---------- */
.memory-party, .treetop-party { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.4vh, 24px); padding: 12px; background: rgba(255, 255, 255, .9); text-align: center; }
.memory-party-title, .treetop-party-title { font-size: clamp(28px, 4.6vw, 52px); font-weight: 700; color: #178A3E; }
.memory-party-row, .treetop-party-row { display: flex; gap: clamp(8px, 2vw, 26px); justify-content: center; flex-wrap: wrap; }
.memory-party-p, .treetop-party-p { width: clamp(78px, 15vw, 160px); padding: 10px 6px; border-radius: 24px; border: 5px solid var(--pc); background: #fff; display: flex; flex-direction: column; align-items: center; font-size: clamp(14px, 1.8vw, 21px); box-shadow: 0 6px 0 rgba(29, 43, 83, .12); }
.memory-party-p b, .treetop-party-p b { color: var(--pc); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-party-tok, .treetop-party-tok { font-size: clamp(40px, 7vw, 78px); line-height: 1.1; animation: memory-bounce .7s ease-in-out infinite alternate; }
.memory-party-msg, .treetop-party-msg { font-size: clamp(20px, 2.8vw, 32px); font-weight: 600; }
@keyframes memory-bounce { from { transform: translateY(4px); } to { transform: translateY(-12px) rotate(6deg); } }

/* ---------- Match Together ---------- */
.memory-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); padding: clamp(6px, 1.2vw, 14px); --turn: #2BB24C; }
.memory-scores { display: flex; gap: clamp(4px, 1vw, 14px); justify-content: center; align-items: center; min-height: 74px; }
.memory-chip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 12px 4px 6px; border-radius: 999px; border: 4px solid var(--pc); background: #fff; opacity: .7; transition: all .25s; }
.memory-chip-tok { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.memory-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.memory-chip-txt b { font-size: clamp(13px, 1.6vw, 19px); color: var(--pc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-chip-star { font-style: normal; }
.memory-chip-txt i { font-style: normal; font-weight: 700; font-size: clamp(15px, 1.8vw, 21px); white-space: nowrap; }
.memory-chip.on { opacity: 1; background: var(--pc); padding: 6px 20px 6px 10px; box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(29, 43, 83, .25); z-index: 1; }
.memory-chip { flex: 0 0 auto; }
.memory-chip.on { flex: 0 1 auto; }
.memory-chip.on b, .memory-chip.on i { color: #fff; }
.memory-chip.on .memory-chip-txt b { font-size: clamp(17px, 2.4vw, 28px); }
.memory-chip.on .memory-chip-tok { font-size: clamp(34px, 4.4vw, 50px); animation: memory-bounce .6s ease-in-out infinite alternate; }
.memory-board { flex: 1; min-height: 0; display: grid; gap: var(--gap, 10px); justify-content: center; align-content: center; border-radius: 26px; box-shadow: inset 0 0 0 5px var(--turn); transition: box-shadow .3s; padding: 0; }
.memory-card { width: var(--cw, 90px); height: calc(var(--cw, 90px) * 1.25); padding: 0; border: 0; background: none; perspective: 700px; }
.memory-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .4s; }
.memory-card.up .memory-inner { transform: rotateY(180deg); }
.memory-back, .memory-front { position: absolute; inset: 0; border-radius: calc(var(--cw, 90px) * .16); display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 5px 0 rgba(29, 43, 83, .18); }
.memory-back { background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .28) 0 14%, transparent 15%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 8px, transparent 8px 16px), linear-gradient(150deg, #3BC14A, #12A3B5); border: calc(var(--cw, 90px) * .05) solid #fff; }
.memory-back svg { width: 68%; height: 68%; }
.memory-front { background: #fff; border: calc(var(--cw, 90px) * .05) solid #FFD23F; transform: rotateY(180deg); font-size: calc(var(--cw, 90px) * .58); line-height: 1; }
.memory-shape { width: 72%; height: 72%; }
.memory-card.done .memory-front { border-color: var(--pc); background: #F4FFF0; box-shadow: none; }
.memory-card.done { opacity: .82; }
.memory-card:not(.up):active .memory-inner { transform: scale(.94); }

/* ---------- Treetop Race ---------- */
.treetop-play { position: absolute; inset: 0; display: flex; gap: 8px; padding: clamp(4px, 1vw, 12px); --turn: #178A3E; }
.treetop-board { flex: 1; min-width: 0; min-height: 0; display: flex; }
.treetop-svg { width: 100%; height: 100%; display: block; font-family: var(--font); }
.treetop-branch { stroke: #8A5A3C; stroke-width: 18; stroke-linecap: round; fill: none; }
.treetop-trail { fill: none; stroke: #FFF8E1; stroke-width: 7; stroke-dasharray: 2 12; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.treetop-sp { fill: #FFF8E1; stroke: #7A4E2D; stroke-width: 4; }
.treetop-sp-lift { fill: #FFE066; stroke: #F2A900; stroke-width: 5; }
.treetop-sp-vine { fill: #BFEBFA; stroke: #1B8FB8; stroke-width: 5; }
.treetop-num { text-anchor: middle; dominant-baseline: central; font-weight: 700; fill: #1D2B53; }
.treetop-emo { text-anchor: middle; dominant-baseline: central; }
.treetop-lift-a { fill: none; stroke: #fff; stroke-width: 15; stroke-linecap: round; }
.treetop-lift-b { fill: none; stroke: #FFC933; stroke-width: 9; stroke-linecap: round; }
.treetop-vine-a { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.treetop-vine-b { fill: none; stroke: #2FA9D4; stroke-width: 7; stroke-linecap: round; }
.treetop-tok { transition: transform .32s cubic-bezier(.3, 1.5, .5, 1); }
.treetop-tok.glide { transition: transform 1.5s ease-in-out; }
.treetop-tok-in { transform-box: fill-box; transform-origin: center; }
.treetop-tok.on .treetop-tok-in { transform: scale(1.3); }
.treetop-tok.on circle { filter: drop-shadow(0 0 5px rgba(255, 210, 63, 1)); }
.treetop-tok.hop .treetop-tok-in { animation: treetop-hop .32s ease-out; }
@keyframes treetop-hop { 0% { transform: scale(1.3) translateY(0); } 50% { transform: scale(1.5) translateY(-9px); } 100% { transform: scale(1.3) translateY(0); } }

.treetop-panel { width: clamp(210px, 26vw, 330px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 18px); }
.treetop-turn { width: 100%; padding: 8px 10px 10px; border-radius: 28px; background: var(--turn); color: #fff; display: flex; flex-direction: column; align-items: center; line-height: 1.1; box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(29, 43, 83, .2); transition: background .3s; text-align: center; }
.treetop-turn-tok { font-size: clamp(40px, 6.5vh, 68px); line-height: 1.15; animation: memory-bounce .6s ease-in-out infinite alternate; }
.treetop-turn-name { font-size: clamp(22px, 3vw, 36px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treetop-turn i { font-style: normal; font-weight: 600; font-size: clamp(15px, 1.8vw, 21px); opacity: .95; }
.treetop-roll { display: flex; align-items: center; justify-content: center; gap: 12px; }
.treetop-die { width: clamp(92px, 15vh, 132px); height: clamp(92px, 15vh, 132px); flex-shrink: 0; padding: 12%; border-radius: 24%; border: 5px solid var(--turn); background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6%; box-shadow: 0 8px 0 rgba(29, 43, 83, .2); transition: border-color .3s; }
.treetop-die i { border-radius: 50%; background: transparent; }
.treetop-die i.on { background: #1D2B53; }
.treetop-die.ready { animation: treetop-pulse 1s ease-in-out infinite; }
.treetop-die.rolling { animation: treetop-roll .18s linear infinite; }
.treetop-die:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(29, 43, 83, .2); }
@keyframes treetop-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09) rotate(-3deg); } }
@keyframes treetop-roll { 0% { transform: rotate(-14deg) scale(1.05); } 50% { transform: rotate(14deg) scale(.96); } 100% { transform: rotate(-14deg) scale(1.05); } }
.treetop-count { width: clamp(64px, 10vh, 92px); height: clamp(64px, 10vh, 92px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(38px, 6.5vh, 60px); font-weight: 700; color: var(--turn); background: #fff; box-shadow: 0 5px 0 rgba(29, 43, 83, .12); }
.treetop-count:empty { visibility: hidden; }
.treetop-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.treetop-li { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 3px solid var(--pc); background: #fff; font-size: clamp(17px, 2vw, 22px); opacity: .75; }
.treetop-li b { color: var(--pc); min-width: 1.2em; text-align: center; }
.treetop-li.on { opacity: 1; box-shadow: 0 0 0 3px #FFD23F; }
.treetop-key { display: flex; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink-soft); flex-wrap: wrap; justify-content: center; }
.treetop-key span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.treetop-key i { width: 26px; height: 9px; border-radius: 5px; border: 2px solid #fff; box-sizing: content-box; }
.treetop-key-l { background: #FFC933; }
.treetop-key-v { background: #2FA9D4; }

@media (orientation: portrait) {
  .treetop-play { flex-direction: column; }
  .treetop-panel { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); grid-template-areas: 'turn roll list' 'turn roll key'; align-items: center; gap: 6px 10px; }
  .treetop-turn { grid-area: turn; }
  .treetop-roll { grid-area: roll; }
  .treetop-list { grid-area: list; align-self: end; }
  .treetop-key { grid-area: key; align-self: start; }
  .treetop-turn-tok { font-size: clamp(34px, 8vw, 60px); }
  .treetop-die { width: clamp(84px, 17vw, 128px); height: clamp(84px, 17vw, 128px); }
  .treetop-count { width: clamp(50px, 11vw, 88px); height: clamp(50px, 11vw, 88px); font-size: clamp(30px, 7vw, 56px); }
}
@media (max-width: 520px) {
  .memory-set-lab, .treetop-set-lab { min-width: 100%; text-align: center; }
  .memory-opt { min-width: 64px; padding: 4px 9px; }
  .memory-chip { padding: 3px 7px 3px 4px; border-width: 3px; gap: 3px; }
  .memory-chip:not(.on) .memory-chip-txt b { display: none; }
  .memory-chip.on { padding: 4px 12px 4px 6px; }
  .memory-chip:not(.on) .memory-chip-star { display: none; }
  .memory-chip:not(.on) .memory-chip-tok { font-size: 22px; }
  .memory-pl, .treetop-pl { min-height: 84px; }
  .treetop-roll { flex-direction: column; gap: 4px; }
  .treetop-count { width: 44px; height: 44px; font-size: 28px; }
  .treetop-key { font-size: 12px; gap: 4px; }
  .treetop-li { font-size: 15px; padding: 2px 7px 2px 4px; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .treetop-key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-inner, .treetop-tok, .treetop-tok.glide { transition: none; }
  .memory-party-tok, .treetop-party-tok, .memory-chip.on .memory-chip-tok, .treetop-turn-tok, .treetop-die.ready, .treetop-die.rolling, .treetop-tok.hop .treetop-tok-in { animation: none; }
}