:root {
  --result-cream: #fff2c8;
  --result-wood: #6d351b;
  --result-wood-dark: #2b130d;
  --result-gold: #f2b43f;
  --result-green: #7bd333;
  --result-cyan: #6be8ff;
}

/*
 * The Placement page is composed inside the design-system stage (src/ui/stage.js): a fixed
 * 1600 × 900 logical canvas that is scaled uniformly to the real viewport. Everything in here is
 * therefore expressed in stage units — percentages of the page (which fills the stage) and rem —
 * never in viewport units. A `100svh` page or `vw` type inside the scaled stage tracks the real
 * viewport instead of the canvas: on a 2560 × 1330 monitor the page grew to 1.5 × the stage and
 * pushed the action buttons below the fold; on a phone it shrank into the top 40 % of the screen.
 */
.screen-placement,
.screen-placement .gdd-screen-host {
  width: 100%;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

.screen-placement .gdd-placement-page,
.screen-placement .gdd-result-world {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.screen-placement > .gdd-global-bar { display: none; }

.gdd-placement-page {
  color: var(--result-cream);
  font-family: var(--font-ui);
  text-shadow: 0 2px 0 #35140b, 0 0 5px rgba(45, 15, 10, 0.55);
}

.gdd-result-world {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(5, 33, 40, 0.08), rgba(7, 25, 25, 0.34)),
    url('/assets/lobby-reference/lobby-arena-bg.png') center/cover no-repeat;
}

.gdd-result-title {
  position: absolute;
  z-index: 3;
  left: 29%;
  top: 1.5%;
  width: 42%;
  height: 18%;
  display: grid;
  place-content: center;
  text-align: center;
}

.gdd-result-title > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.gdd-result-title > *:not(img) { position: relative; z-index: 1; }
.gdd-result-title span,
.gdd-result-title small { color: #8cf2ff; font-size: .72rem; font-weight: 1000; letter-spacing: .15em; }
.gdd-result-title h1 { margin: .12em 0; color: #fff5d7; font-size: 3.2rem; line-height: .9; letter-spacing: .02em; }
.gdd-result-title small { color: #ffd66c; }

.gdd-result-board {
  position: absolute;
  z-index: 2;
  left: 15%;
  right: 15%;
  top: 19%;
  bottom: 16%;
  display: grid;
  grid-template-rows: 18% 1fr;
  gap: 2%;
  padding: 1.25% 1.6% 1.5%;
  border: 6px solid #b76d2b;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(91,42,20,.97), rgba(38,17,12,.98));
  box-shadow: inset 0 0 0 3px #35170d, inset 0 0 2.5rem #190a07, 0 1rem 2rem rgba(9,20,18,.58);
}

.gdd-result-board::before,
.gdd-result-board::after { content:''; position:absolute; z-index:-1; left:7%; right:7%; height:8%; border:4px solid #75401c; border-radius:50%; background:#a86629; }
.gdd-result-board::before { top:-3%; }
.gdd-result-board::after { bottom:-3%; }

.gdd-result-rewards {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2%;
  padding: .4% 2%;
  border: 2px solid #d89a3f;
  border-radius: .8rem;
  background: linear-gradient(180deg,#7a3d1f,#4a2112);
}
.gdd-result-rewards > strong { color:#ffe39a; font-size:.9rem; letter-spacing:.08em; }
.gdd-result-rewards > span { min-width:0; display:flex; justify-content:center; gap:4%; color:#fff4d2; }
.gdd-result-rewards > span b { white-space:nowrap; font-size:1.12rem; }
.gdd-result-rewards > span small { align-self:center; color:#f5c9a6; }
.gdd-result-rewards > small { color:#e8c395; font-size:.7rem; white-space:nowrap; }

.gdd-placement-page .gdd-placement {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4,minmax(0,1fr));
  grid-auto-flow: column;
  gap: 2% 1.3%;
}

.gdd-placement-page .gdd-placement article {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 11% 15% minmax(0,1fr) auto;
  align-items: center;
  gap: 2%;
  padding: .5% 2%;
  border: 2px solid #8e5128;
  border-radius: .72rem;
  background: linear-gradient(180deg,rgba(76,35,20,.98),rgba(42,18,13,.98));
  box-shadow: inset 0 0 0 1px rgba(255,202,110,.12), 0 .3rem .45rem rgba(10,5,3,.3);
}
.gdd-placement-page .gdd-placement article.is-podium { border-color:#d5a041; }
.gdd-placement-page .gdd-placement article.is-champion { background:linear-gradient(180deg,#886226,#533315); box-shadow:inset 0 0 1rem #ffd65b33,0 0 .7rem #f3b93a55; }
.gdd-placement-page .gdd-placement article.is-you { border-color:var(--result-cyan); outline:2px solid rgba(107,232,255,.32); background:linear-gradient(180deg,#315b61,#18363b); }
.gdd-result-rank { color:#ffd768 !important; font-size:1.45rem !important; text-align:center; }
.gdd-result-avatar { width:min(100%,4.6rem); height:auto; max-height:100%; min-height:0; aspect-ratio:1; justify-self:center; display:grid; place-items:center; overflow:hidden; border:2px solid #e4ad4d; border-radius:50%; background:#28130d; }
.gdd-result-puppy { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 .18rem .14rem rgba(0,0,0,.48)); }
.gdd-result-identity { min-width:0; }
.gdd-result-identity strong,.gdd-result-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gdd-result-identity strong { color:#fff4d4; font-size:1.05rem; }
.gdd-result-identity small { color:#75e9ff; font-size:.65rem; font-weight:900; }
.gdd-result-hp { color:#b8fb78; font-size:.82rem; white-space:nowrap; }

.gdd-result-actions { position:absolute; z-index:4; left:50%; bottom:3.1%; width:min(39%,620px); height:10%; transform:translateX(-50%); display:grid; grid-template-columns:1.65fr 1fr; gap:3%; }
.gdd-result-actions button { min-width:0; min-height:44px; border:3px solid #e1a442; border-radius:.8rem; color:#fff5d9; font-size:1.42rem; font-weight:1000; text-shadow:0 2px #35140b; box-shadow:inset 0 0 0 2px rgba(255,238,176,.17),0 .5rem .8rem rgba(17,8,4,.4); }
.gdd-result-actions .is-play-again { border-color:#a4d44d; background:linear-gradient(#8bd436,#397d19); }
.gdd-result-actions .is-home { background:linear-gradient(#8a4926,#4b2112); }
.gdd-result-actions button:focus-visible { outline:3px solid var(--result-cyan); outline-offset:2px; }
.gdd-result-proof { position:absolute; z-index:3; right:1.5%; bottom:1%; max-width:28%; margin:0; overflow:hidden; color:#d7bc8e; font-size:.58rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }

/* Lesson result (onboarding spec §3): same plaque, step checklist instead of standings. */
.gdd-placement-page.is-lesson .gdd-result-board.is-lesson { grid-template-rows: auto 1fr; }
.gdd-placement-page.is-lesson .gdd-result-rewards > span { white-space: normal; }
.gdd-lesson-steps { margin: 0; padding: 0 .6rem; list-style: none; display: grid; gap: .3rem; align-content: start; overflow: auto; }
.gdd-lesson-steps li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .5rem; padding: .35rem .8rem; border: 2px solid #7b522d; border-radius: .7rem; background: rgba(0,0,0,.28); color: #fff4d4; font-size: 1rem; font-weight: 800; }
.gdd-lesson-steps li > b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #e4ad4d; color: #ffd66c; }
.gdd-lesson-steps li[data-done="true"] { border-color: #83d530; }
.gdd-lesson-steps li[data-done="true"] > b { background: #83d530; border-color: #83d530; color: #10260a; }
.gdd-result-actions.is-lesson { width: min(56%,820px); grid-template-columns: repeat(var(--lesson-actions,3),1fr); }
.gdd-result-actions.is-lesson[data-actions="2"] { --lesson-actions: 2; }
.gdd-result-actions.is-lesson[data-actions="3"] { --lesson-actions: 3; }
.gdd-result-actions.is-lesson .is-replay { background: linear-gradient(#e2a63c,#8f5a14); }