/* Selected D: mint toy shelf, narrow lavender title tile, enlarged cream scoreboard. */
body[data-design="d"] {
  --ink:#25493e; --muted:#668176; --accent:#715096;
  --panel:#fffcf0; --line:#284f43; --row:#f0eddb;
  --control-bg:#fff8e7; --control-ink:#284b3f;
  --control-on:#70528f; --control-on-ink:#fff9ee;
  --board-left:19%; --board-right:5%; --board-top:309px; --board-bottom:104px;
  --panel-padding:22px;
}
body[data-design="d"] .stage { min-height:950px; background:#8bd6b9; }
body[data-design="d"] .backdrop:before { content:''; position:absolute; inset:18px; border:1px solid #2f6b4d3b; border-radius:27px; }
body[data-design="d"] .shape-1 { left:-12vw; bottom:-16vw; width:42vw; height:42vw; border-radius:50%; border:2px solid #345b4440; box-shadow:0 0 0 32px #fff1,0 0 0 34px #345b442b; }
body[data-design="d"] .shape-2 { right:-10vw; top:-23vw; width:44vw; height:44vw; border:2px solid #426a4b26; border-radius:50%; background:#a3e4c9; }
body[data-design="d"] .shape-3 { left:5%; right:5%; top:282px; height:9px; background:#4d8971; border:2px solid #284f43; border-radius:20px; box-shadow:0 5px 0 #5ea88b; }
body[data-design="d"] .brandbar { top:20px; left:4.8%; right:4.8%; height:67px; }
body[data-design="d"] .company-logo { width:240px; filter:drop-shadow(0 3px 0 #25493e13); }
body[data-design="d"] .fullscreen { border:2px solid #284f43; border-radius:15px; background:#fff9e8; box-shadow:3px 3px 0 #426f5b; }
body[data-design="d"] .title { left:5%; right:84.8%; top:var(--board-top); bottom:var(--board-bottom); display:flex; align-items:center; justify-content:center; background:#c8b4e7; border:3px solid #284f43; border-radius:24px; box-shadow:7px 7px 0 #4e826b; transform:rotate(-1.2deg); }
body[data-design="d"] .title:before { content:''; position:absolute; inset:9px; border:1px solid #7a629a80; border-radius:14px; pointer-events:none; }
body[data-design="d"] h1 { writing-mode:vertical-rl; font-size:clamp(51px,4.6vw,78px); line-height:1.15; letter-spacing:.06em; color:#4e3d66; text-shadow:3px 3px 0 #fdf5d9; white-space:nowrap; font-weight:950; }
body[data-design="d"] .ensemble { left:9%; right:9%; top:98px; height:184px; bottom:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:0; }
body[data-design="d"] .character { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:17.6%; max-width:225px; height:184px; aspect-ratio:auto; flex:0 1 17.6%; isolation:isolate; }
body[data-design="d"] .character:before { inset:19% 7% 1%; border:2px solid #42694f; border-radius:52px 52px 18px 18px; box-shadow:4px 0 0 #42694f21; }
body[data-design="d"] .character:after { left:13%; right:13%; bottom:2%; height:14px; border-radius:50%; background:#31553a26; filter:blur(4px); }
body[data-design="d"] .character img { height:100%; width:100%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 5px 2px #37523b16); }
body[data-design="d"] .character-black { transform:rotate(-5deg); z-index:1; }
body[data-design="d"] .character-black:before { background:#e9bdc9; }
body[data-design="d"] .character-cream { transform:rotate(3deg); z-index:2; }
body[data-design="d"] .character-cream:before { background:#afbee9; }
body[data-design="d"] .character-jester { z-index:3; transform:translateY(-6px); }
body[data-design="d"] .character-jester:before { background:#f4e6a6; }
body[data-design="d"] .character-jester img { height:93%; position:absolute; bottom:0; }
body[data-design="d"] .character-turtle { transform:rotate(-3deg); z-index:2; }
body[data-design="d"] .character-turtle:before { background:#c9b4e7; }
body[data-design="d"] .character-pink { transform:rotate(5deg); z-index:1; }
body[data-design="d"] .character-pink:before { background:#f3c28e; }
body[data-design="d"] .board-shell { border:3px solid #284f43; border-radius:25px; box-shadow:8px 8px 0 #4e826b; background:#fffcf0; }
body[data-design="d"] .board-shell:before { content:''; position:absolute; inset:9px; border:1px solid #b1b9a0; border-radius:14px; pointer-events:none; }
body[data-design="d"] .viewport.board-mode { gap:3px; }
body[data-design="d"] .board-row { min-height:47px; max-height:76px; padding:0 16px; border-radius:9px; grid-template-columns:43px 44px minmax(0,1fr) auto; gap:16px; border-bottom:1px solid #dce0ce; }
body[data-design="d"] .board-row:last-child { border-bottom:0; }
body[data-design="d"] .board-row:nth-child(2n) { background:#eff1e4; }
body[data-design="d"] .board-row.is-first { background:#e4d9f1; border:1px solid #c4acd7; }
body[data-design="d"] .br-rank { font-family:Arial,sans-serif; font-size:21px; font-weight:850; letter-spacing:-.06em; }
body[data-design="d"] .br-avatar { width:44px; height:44px; border:1px solid #a6b6a6; border-radius:11px; background:#fff9e8; }
body[data-design="d"] .br-name { font-size:clamp(18px,1.5vw,27px); line-height:1.25; font-weight:700; }
body[data-design="d"] .br-amount { font-size:clamp(20px,1.65vw,31px); font-weight:800; }
body[data-design="d"] .rank-card { gap:15px; }
body[data-design="d"] .rank-num { font-family:Arial,sans-serif; font-size:60px; font-weight:900; flex:none; }
body[data-design="d"] .avatar-wrap { width:210px; height:210px; flex:none; border:2px solid #284f43; border-radius:35px; background:#dacbe9; padding:9px; box-shadow:6px 6px 0 #beacd0; }
body[data-design="d"] .avatar-img { border-radius:25px; background:#e4d9ec; }
body[data-design="d"] .member-name { font-size:60px; line-height:1.2; }
body[data-design="d"] .member-amount { font-size:96px; line-height:1.1; }
body[data-design="d"] .controls { left:19%; right:5%; bottom:25px; gap:12px; }
body[data-design="d"] .control,body[data-design="d"] .page-button { border:2px solid #284f43; border-radius:13px; box-shadow:4px 4px 0 #4e826b; height:55px; }
body[data-design="d"] .control.is-on { border-color:#4e3d66; box-shadow:4px 4px 0 #4e3d66; }
body[data-design="d"] .page-button { width:55px; }
@media(min-width:1800px) {
  body[data-design="d"] { --board-top:340px; --board-bottom:110px; --panel-padding:24px; }
  body[data-design="d"] .stage { min-height:1070px; }
  body[data-design="d"] .brandbar { top:23px; }
  body[data-design="d"] .company-logo { width:285px; }
  body[data-design="d"] .ensemble { top:94px; height:223px; left:11%; right:11%; }
  body[data-design="d"] .character { height:223px; max-width:260px; }
  body[data-design="d"] .shape-3 { top:317px; left:7%; right:7%; }
  body[data-design="d"] h1 { font-size:78px; }
  body[data-design="d"] .board-row { min-height:55px; grid-template-columns:47px 52px minmax(0,1fr) auto; gap:20px; }
  body[data-design="d"] .br-avatar { width:52px; height:52px; border-radius:13px; }
  body[data-design="d"] .br-rank { font-size:25px; }
  body[data-design="d"] .controls { bottom:28px; }
  body[data-design="d"] .control,body[data-design="d"] .page-button { height:59px; }
  body[data-design="d"] .page-button { width:59px; }
  body[data-design="d"] .rank-card { gap:17px; }
  body[data-design="d"] .rank-num { font-size:70px; }
  body[data-design="d"] .avatar-wrap { width:240px; height:240px; padding:10px; border-radius:39px; }
  body[data-design="d"] .avatar-img { border-radius:27px; }
  body[data-design="d"] .member-name { font-size:72px; }
  body[data-design="d"] .member-amount { font-size:110px; }
}
@media(max-width:1100px) and (min-width:701px) {
  body[data-design="d"] { --board-left:19%; --board-right:5%; --board-top:267px; --board-bottom:100px; --panel-padding:18px; }
  body[data-design="d"] .stage { min-height:890px; }
  body[data-design="d"] .brandbar { top:14px; }
  body[data-design="d"] .company-logo { width:210px; }
  body[data-design="d"] .ensemble { top:90px; height:150px; left:7%; right:7%; }
  body[data-design="d"] .character { height:150px; }
  body[data-design="d"] .character:before { border-radius:38px 38px 15px 15px; }
  body[data-design="d"] .shape-3 { top:240px; }
  body[data-design="d"] .title { border-radius:20px; }
  body[data-design="d"] h1 { font-size:51px; }
  body[data-design="d"] .board-row { min-height:44px; grid-template-columns:26px 40px minmax(0,1fr) auto; gap:11px; padding:0 10px; }
  body[data-design="d"] .br-avatar { width:40px; height:40px; border-radius:10px; }
  body[data-design="d"] .br-rank { font-size:17px; }
  body[data-design="d"] .br-name { font-size:17px; }
  body[data-design="d"] .br-amount { font-size:20px; }
  body[data-design="d"] .rank-card { gap:14px; }
  body[data-design="d"] .rank-num { font-size:52px; }
  body[data-design="d"] .avatar-wrap { width:190px; height:190px; }
  body[data-design="d"] .member-name { font-size:48px; }
  body[data-design="d"] .member-amount { font-size:80px; }
  body[data-design="d"] .controls { bottom:25px; gap:8px; }
  body[data-design="d"] .control { min-width:133px; font-size:13px; padding:0 12px; }
  body[data-design="d"] .page-button { width:48px; }
  body[data-design="d"].has-long-names .br-name { font-size:15px; line-height:1.2; }
  body[data-design="d"].has-long-names .member-name { font-size:43px; }
  body[data-design="d"].has-long-names .member-amount { font-size:68px; }
}
@media(min-width:1101px) and (max-height:850px) {
  body[data-design="d"] { --board-top:280px; --board-bottom:100px; --panel-padding:20px; }
  body[data-design="d"] .stage { min-height:900px; }
  body[data-design="d"] .ensemble { top:90px; height:164px; }
  body[data-design="d"] .character { height:164px; }
  body[data-design="d"] .shape-3 { top:254px; }
  body[data-design="d"] .board-row { min-height:43px; grid-template-columns:38px 40px minmax(0,1fr) auto; }
  body[data-design="d"] .br-avatar { width:40px; height:40px; }
  body[data-design="d"] .rank-card { gap:14px; }
  body[data-design="d"] .rank-num { font-size:54px; }
  body[data-design="d"] .avatar-wrap { width:190px; height:190px; }
  body[data-design="d"] .member-name { font-size:54px; }
  body[data-design="d"] .member-amount { font-size:84px; }
}
@media(max-width:700px) {
  body[data-design="d"] { --board-left:17px; --board-right:21px; --board-top:238px; --board-bottom:101px; --panel-padding:13px; }
  body[data-design="d"] .stage { min-height:812px; }
  body[data-design="d"] .backdrop:before { inset:7px; border-radius:18px; }
  body[data-design="d"] .brandbar { top:10px; left:18px; right:19px; height:52px; }
  body[data-design="d"] .company-logo { width:154px; }
  body[data-design="d"] .fullscreen { height:43px; width:43px; border-radius:12px; box-shadow:2px 2px 0 #426f5b; }
  body[data-design="d"] .title { top:77px; bottom:auto; left:43px; right:45px; height:56px; transform:rotate(-2deg); border-radius:14px; border-width:2px; box-shadow:4px 4px 0 #4e826b; }
  body[data-design="d"] .title:before { inset:5px; border-radius:9px; }
  body[data-design="d"] h1 { writing-mode:horizontal-tb; font-size:31px; line-height:1.15; letter-spacing:.05em; text-shadow:2px 2px 0 #fff4dc; }
  body[data-design="d"] .ensemble { left:16px; right:16px; top:145px; height:70px; gap:0; }
  body[data-design="d"] .character { position:relative; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important; width:17.6%; height:70px; max-width:none; flex:0 1 17.6%; transform:none; }
  body[data-design="d"] .character-jester { transform:translateY(-3px); }
  body[data-design="d"] .character:before { inset:23% 3% 0; border-width:1px; border-radius:20px 20px 7px 7px; box-shadow:2px 0 0 #42694f21; }
  body[data-design="d"] .character:after { height:6px; filter:blur(2px); }
  body[data-design="d"] .character img { filter:drop-shadow(0 3px 1px #37523b16); }
  body[data-design="d"] .shape-3 { top:215px; height:6px; left:13px; right:13px; border-width:1px; box-shadow:0 3px 0 #5ea88b; }
  body[data-design="d"] .board-shell { border-width:2px; border-radius:17px; box-shadow:5px 5px 0 #4e826b; }
  body[data-design="d"] .board-shell:before { inset:6px; border-radius:10px; }
  body[data-design="d"] .viewport.board-mode { gap:3px; }
  body[data-design="d"] .board-row { grid-template-columns:20px 36px minmax(0,1fr) auto; gap:6px; min-height:40px; max-height:68px; padding:0 5px; border-radius:5px; }
  body[data-design="d"] .br-rank { font-size:13px; }
  body[data-design="d"] .br-avatar { width:36px; height:36px; border-radius:8px; }
  body[data-design="d"] .br-name { font-size:12px; line-height:1.25; font-weight:650; }
  body[data-design="d"] .br-amount { font-size:13px; font-weight:750; }
  body[data-design="d"] .rank-card { gap:14px; }
  body[data-design="d"] .rank-num { font-size:38px; }
  body[data-design="d"] .avatar-wrap { width:150px; height:150px; padding:7px; border-radius:28px; box-shadow:4px 4px 0 #beacd0; }
  body[data-design="d"] .avatar-img { border-radius:19px; }
  body[data-design="d"] .member-name { font-size:32px; line-height:1.2; }
  body[data-design="d"] .member-amount { font-size:50px; line-height:1.1; }
  body[data-design="d"] .controls { left:17px; right:21px; bottom:25px; gap:7px; }
  body[data-design="d"] .control,body[data-design="d"] .page-button { border-radius:10px; box-shadow:3px 3px 0 #4e826b; height:52px; }
  body[data-design="d"] .control { min-width:0; padding:0 7px; font-size:12px; gap:5px; }
  body[data-design="d"] .page-button { width:43px; }
  body[data-design="d"] .control.is-on { box-shadow:3px 3px 0 #4e3d66; }
  body[data-design="d"].has-long-names .stage { min-height:860px; }
  body[data-design="d"].has-long-names .br-name { font-size:12px; line-height:1.25; }
  body[data-design="d"].has-long-names .br-amount { font-size:12px; }
  body[data-design="d"].has-long-names .board-row:nth-child(-n+2) { min-height:49px; }
  body[data-design="d"].has-long-names .member-name { font-size:28px; }
  body[data-design="d"].has-long-names .member-amount { font-size:clamp(30px,9vw,44px); }
}