/* Woodland menu: four painted wooden signs in an original sunlit forest clearing.
   The painting supplies rounded crowns, shaded bark and layered ground detail;
   the actual menu and avatar remain interactive foreground elements. */
body.qp-woodland {
  background-color: #62a456;
  background-image: url('./assets/woodland-home-painted.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.qp-woodland #deco { display: none; }
.qp-woodland .top {
  background: repeating-linear-gradient(2deg, #ffffff05 0 8px, #321d1c0a 8px 10px), linear-gradient(#91643c, #6c452b);
  border-bottom: 3px solid #d1aa67;
  box-shadow: inset 0 2px 0 #f6d89660, 0 4px 0 #2d291f80;
}
.qp-woodland .top .nm {
  color: #ffedb1;
  -webkit-text-stroke: 1px #51371f;
  text-shadow: 0 2px 0 #51371f;
}
.qp-woodland :is(#tbSnd, #tbHome, #tbRank, #tbOut) {
  --candy-top: #b5ce7c;
  --candy-mid: #7ba455;
  --candy-bottom: #587d39;
  --candy-edge: #395e2c;
  --candy-base: #304d24;
}
.qp-woodland #tbShop {
  --candy-top: #f4d486;
  --candy-mid: #d8a94e;
  --candy-bottom: #b58234;
  --candy-edge: #825723;
  --candy-base: #68401e;
}
body .homewrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 65px;
  inset: var(--qp-top-height) 0 0;
  max-width: 1220px;
  margin-inline: auto;
  padding: 34px 28px 42px;
  background: transparent;
  overflow: hidden;
}
body .homewrap > .col {
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-content: center;
  gap: 17px;
}
body .homewrap .mecard {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  height: min(510px, 100%);
  min-height: 438px;
  border: 5px solid #f0c879;
  border-radius: 23px;
  background: repeating-linear-gradient(90deg, #80502c 0 45px, #784728 45px 48px, #976338 48px 99px);
  box-shadow: inset 0 0 0 3px #5b321c, inset 0 5px 0 #fff1b243, 0 6px 0 #593b20, 0 12px 18px #153c3b38;
  overflow: hidden;
}
body .homewrap .mecard .pnl-h {
  justify-content: center;
  min-height: 48px;
  padding: 10px 15px;
  color: #fffbe2;
  font-family: var(--candy-font);
  font-size: 22px;
  background: linear-gradient(#be8c4d, #956132);
  border: 0;
  border-bottom: 3px solid #754722;
  border-radius: 16px 16px 0 0;
  box-shadow: inset 0 3px 0 #f4d99478;
  text-shadow: 0 2px 0 #674021;
}
body .homewrap .mecard .pnl-h::before { display: none; }
body .homewrap .mestage {
  padding: 10px;
  background: radial-gradient(ellipse at 50% 37%, #f5ffd780 0 35%, transparent 70%), linear-gradient(#b8eaba, #87ca9c 70%, #65b28b);
}
body .homewrap .mestage::before {
  inset: 6% 6%;
  width: auto;
  height: auto;
  background: #efffe526;
  border: 2px solid #edffd061;
  border-radius: 45% 45% 25px 25px;
  box-shadow: none;
}
body .homewrap .mestage::after { background: #26695140; bottom: 6%; }
body .homewrap #meStage > svg { height: min(280px, 100%); width: auto; max-width: 100%; }
body .homewrap .mecard > :last-child {
  padding: 16px 17px !important;
  background: linear-gradient(#ffedc2, #f4d89b) !important;
  border-top: 3px solid #a17335 !important;
}
body .homewrap .mecard > :last-child > :first-child { color: #744e2b !important; font-size: 21px !important; text-shadow: none; }
body .homewrap .mecard .hint, body .homewrap .mecard .hint b { color: #7d603c; font-size: 13px; line-height: 1.55; }

body .homewrap .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 90%;
  max-width: 620px;
  min-height: 0;
  margin: 0;
  padding: 3px 0 9px;
  gap: 17px;
  flex: 1;
  overflow: visible;
}
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 clamp(104px, 12.1vh, 130px);
  height: clamp(104px, 12.1vh, 130px);
  min-height: 0;
  width: var(--wood-width, 102%);
  max-width: none;
  padding: 7px 28px 8px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background-color: transparent;
  background-image: var(--wood-image);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 5px 0 #3a43344a);
  overflow: visible;
  text-align: center;
  transform: none;
  isolation: isolate;
  -webkit-text-stroke: 0;
  transition: filter .15s ease;
}
body .homewrap #mPractice { --wood-image: url('./assets/wood-planks.svg#cyan'); --wood-width: 102%; --wood-ink: #155b77; }
body .homewrap #mLive { --wood-image: url('./assets/wood-planks.svg#mint'); --wood-width: 110%; --wood-ink: #24664d; }
body .homewrap #mShop { --wood-image: url('./assets/wood-planks.svg#gold'); --wood-width: 94%; --wood-ink: #8c5b24; }
body .homewrap #mRank { --wood-image: url('./assets/wood-planks.svg#coral'); --wood-width: 104%; --wood-ink: #863a3a; }
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank)::before,
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank)::after { display: none; content: none; }
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) .ic { display: none; }
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 {
  margin: 0 0 4px;
  color: #fff;
  font-family: var(--candy-font);
  font-weight: 400;
  font-size: 39px;
  line-height: 1.08;
  letter-spacing: .015em;
  -webkit-text-stroke: 2px var(--wood-ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--wood-ink);
}
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p,
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p b {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-family: 'NanumSquareRound', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -.015em;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 2px var(--wood-ink);
}
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank):is(:hover, :active, .qp-pressed) {
  background-color: transparent;
  background-image: var(--wood-image);
  box-shadow: none;
  transform: none;
}
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank).lock { opacity: .9; filter: drop-shadow(0 5px 0 #3a43344a) saturate(.83); }
body .homewrap :is(#mPractice, #mLive, #mShop, #mRank):focus-visible { outline: 3px solid #fff5b1; outline-offset: 1px; }
body .homewrap .ticker {
  width: 100%;
  height: 37px;
  min-height: 37px;
  margin: 0;
  padding: 0 16px;
  color: #fff4d7;
  background: linear-gradient(#926437, #74502d);
  border: 2px solid #ddb776;
  border-radius: 11px;
  box-shadow: inset 0 2px 0 #e7bc7159, 0 3px 0 #4d3b23;
  font-size: 13px;
}
body .homewrap .ticker em { color: #ffe778; }
body .homewrap .fbanner { color: #754f25; background: linear-gradient(#fff0ae, #eed486); border: 3px solid #b98e49; border-radius: 13px; box-shadow: 0 3px 0 #77542c; padding: 8px 13px; }
body .homewrap .fbanner b { color: #815729; font-size: 16px; }

@media (min-width: 1650px) and (min-height: 850px) {
  body .homewrap { max-width: 1290px; grid-template-columns: 320px minmax(0, 1fr); gap: 85px; padding-block: 56px; }
  body .homewrap .mecard { height: 535px; }
  body .homewrap .menu { gap: 22px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 43px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p { font-size: 14px; }
}
@media (min-width: 661px) and (max-width: 1150px) {
  body .homewrap { grid-template-columns: 250px minmax(0, 1fr); gap: 42px; padding-inline: 22px; }
  body .homewrap .mecard { min-height: 434px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) { padding-inline: 21px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 34px; }
}
@media (min-width: 661px) and (max-height: 690px) {
  body .homewrap { padding-top: 17px; padding-bottom: 21px; gap: 45px; }
  body .homewrap > .col { gap: 13px; }
  body .homewrap .mecard { height: 468px; min-height: 434px; }
  body .homewrap .mecard .pnl-h { min-height: 43px; padding-block: 8px; font-size: 20px; }
  body .homewrap .mecard > :last-child { padding: 13px 14px !important; }
  body .homewrap .menu { gap: 13px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) { flex-basis: 94px; height: 94px; padding-block: 8px 9px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 33px; margin-bottom: 3px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p,
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p b { font-size: 12px; line-height: 1.3; }
  body .homewrap > .col:has(.fbanner) .menu { gap: 10px; }
  body .homewrap > .col:has(.fbanner) :is(#mPractice, #mLive, #mShop, #mRank) { flex-basis: 82px; height: 82px; padding-block: 5px 8px; }
  body .homewrap > .col:has(.fbanner) :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 29px; }
  body .homewrap > .col:has(.fbanner) :is(#mPractice, #mLive, #mShop, #mRank) p,
  body .homewrap > .col:has(.fbanner) :is(#mPractice, #mLive, #mShop, #mRank) p b { font-size: 11px; }
}
@media (min-width: 661px) and (max-width: 850px) {
  body .homewrap { grid-template-columns: 225px minmax(0, 1fr); gap: 23px; padding-inline: 18px; }
  body .homewrap .menu { width: 91%; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 28px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p,
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p b { font-size: 11px; }
}
@media (max-width: 660px) {
  body.qp-woodland {
    background-image: url('./assets/woodland-home-painted-mobile.png');
    background-position: center top;
  }
  body .homewrap { display: flex; flex-direction: column; max-width: 450px; padding: 18px 17px 28px; gap: 25px; overflow-y: auto; overflow-x: hidden; }
  body .homewrap .mecard { display: grid; grid-template-columns: 46% minmax(0, 1fr); grid-template-rows: 42px minmax(0, 1fr); width: 100%; height: 313px; min-height: 313px; flex: 0 0 313px; border-width: 4px; }
  body .homewrap .mecard .pnl-h { grid-column: 1 / -1; grid-row: 1; min-height: 42px; padding-block: 8px; font-size: 20px; }
  body .homewrap .mecard .mestage { grid-column: 1; grid-row: 2; padding: 4px; }
  body .homewrap #meStage > svg { height: min(252px, 100%); width: auto; }
  body .homewrap .mecard > :last-child { grid-column: 2; grid-row: 2; padding: 23px 11px !important; border-top: 0 !important; border-left: 2px solid #a17335 !important; }
  body .homewrap .mecard > :last-child > :first-child { font-size: 19px !important; }
  body .homewrap .mecard .hint { font-size: 12px; }
  body .homewrap > .col { height: auto; flex: 0 0 auto; gap: 19px; }
  body .homewrap .menu { width: 88%; max-width: 620px; min-height: 0; padding-bottom: 6px; gap: 16px; flex: none; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) { flex-basis: 94px; height: 94px; padding: 11px 15px 15px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) h3 { font-size: 28px; letter-spacing: 0; margin-bottom: 3px; }
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p,
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) p b { font-size: 11px; line-height: 1.3; }
  body .homewrap .ticker { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body .homewrap :is(#mPractice, #mLive, #mShop, #mRank) { transition: none; }
}