@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08291f}body{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:5px;font-family:'Gaegu','Apple SD Gothic Neo','Malgun Gothic',sans-serif}
/* Fixed poster proportions: one baked image, uniform scaling only, no sliced backgrounds */
.board{position:relative;width:min(calc(100vw - 10px),calc((100dvh - 10px)*.6187),690px);aspect-ratio:1116/1804;background:url('./assets/chalkboard.webp') center/100% 100% no-repeat;flex:none;container-type:inline-size;filter:drop-shadow(0 5px 12px #0009)}
button{cursor:pointer;font:inherit;touch-action:manipulation}
.month{position:absolute;top:13.65%;left:30%;width:40%;height:5.2%;display:flex;align-items:center;justify-content:space-between;color:#fff3da;font-size:clamp(17px,5.2cqw,35px);font-weight:700;text-shadow:1px 2px #000a;white-space:nowrap}.month button{border:0;background:transparent;color:#fff7e7;font-size:1.5em;line-height:1;padding:0 .1em}
.calendar{position:absolute;top:20.15%;left:5.5%;width:89%;height:44.9%;overflow:hidden}.days{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:y proximity;touch-action:pan-y}.days::-webkit-scrollbar{display:none}
.day{height:calc((100% - 7cqw)/5);margin-bottom:1.75cqw;border-radius:999px;background:#f7edd8;box-shadow:inset 0 0 0 1px #d1c3a4,0 2px 3px #0006;display:flex;align-items:center;gap:1.3%;padding:0 2%;scroll-snap-align:start;color:#0a392b}.day.today{background:#ffecb4;outline:2.5px solid #f0bf21;outline-offset:-2.5px}
.date{flex:0 0 12.5%;text-align:center;font-size:clamp(20px,6.3cqw,43px);font-weight:700;line-height:.83}.date small{display:block;font-size:.53em;margin-top:.24em}.date.saturday{color:#1476cf}.date.sunday{color:#d53d38}
.stickers{border-left:2px solid #bdb6a8;padding-left:2.2%;display:flex;align-items:center;gap:3%;flex:1;min-width:0;overflow:hidden;height:100%;padding-top:1.2cqw;padding-bottom:1.2cqw}.empty{font-size:clamp(12px,3.6cqw,25px);color:#878477;font-weight:700;white-space:nowrap}.sticker{font-size:clamp(17px,5.25cqw,36px);background:#1c2424;color:#fffdf6;border:1.3px solid #fef9ed;padding:.10em .30em;border-radius:5px;transform:rotate(var(--rotate)) scale(var(--scale));white-space:nowrap;font-weight:700;box-shadow:1px 2px 2px #0005;line-height:1.1;transform-origin:center}.count{white-space:nowrap;font-size:clamp(13px,3.6cqw,25px);font-weight:700}.add{flex:0 0 10%;aspect-ratio:1;border:2px solid #1b6b50;background:transparent;border-radius:50%;color:#146447;font-family:system-ui,sans-serif;font-size:clamp(21px,6cqw,43px);font-weight:900;display:grid;place-items:center;padding:0;line-height:1}
.nav{position:absolute;top:66.1%;left:20%;width:60%;height:5.1%;display:flex;align-items:center;justify-content:space-between;gap:3%}.nav button{border:0;background:transparent;color:#fff7e4;font-weight:700;text-shadow:1px 2px #0006}.nav button:first-child,.nav button:last-child{font-size:clamp(19px,5.4cqw,40px)}#today{border:1.5px solid #f5e9cd;border-radius:99px;padding:.16em .5em;white-space:nowrap;font-size:clamp(13px,3.6cqw,25px)}
.rank{position:absolute;left:30%;width:40%;top:81.3%;height:7.3%;display:flex;align-items:center;justify-content:center;color:#fff5dc;text-align:center}.norank{font-size:clamp(16px,4cqw,27px);font-weight:700}.rankrow{display:flex;align-items:center;gap:.65em;font-size:clamp(19px,4.8cqw,33px);line-height:1.05;margin:.09em 0;font-weight:700}.rankrow b{border-radius:50%;background:#f5c94d;color:#14382c;padding:0 .25em;min-width:1.2em}.rankrow span{flex:1;text-align:left}.rankrow em{color:#f5d25a;font-style:normal}
.manage{position:absolute;right:6%;bottom:2.3%;border:1px solid #fff0d2;border-radius:99px;color:#fff3db;background:#0d3429e8;padding:.14em .6em;font-size:clamp(14px,3.3cqw,24px);font-weight:700}.notice{position:absolute;left:10%;right:10%;top:73%;color:#ffdc65;text-align:center;font-size:clamp(12px,3cqw,20px);pointer-events:none}.notice:empty{display:none}
dialog{width:min(94vw,540px);max-height:85dvh;border:3px solid #95602f;border-radius:18px;background:#f5ecdb;color:#183a2d;padding:18px;box-shadow:0 10px 40px #0009;font-family:'Gaegu','Malgun Gothic',sans-serif}dialog::backdrop{background:#000b}.modalhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.modalhead h2{margin:0;font-size:32px}.modalhead button{background:none;border:0;font-size:28px}.modal-hint,.muted{color:#5c6d62;font-size:21px}.member-stickers{display:flex;flex-wrap:wrap;gap:13px;padding:16px 4px;max-height:40dvh;overflow-y:auto}.member-choice{background:#1e2828;color:#fff7df;border:2px solid #fff4dd;border-radius:6px;padding:9px 14px;font-size:27px;font-weight:700;transform:rotate(var(--angle));box-shadow:2px 3px 3px #0003}.member-choice[aria-pressed='true']{background:#f4c84d;color:#183c2c;border-color:#ba861c}.modalactions{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap}.modalactions button,.member button{background:#15523e;border:0;border-radius:10px;color:white;padding:9px 14px;font-size:22px;font-weight:700}.modalactions input{flex:1;min-width:130px;padding:10px;border:1px solid #bcb7a8;border-radius:9px;font-size:18px}.member{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d7c9b0;padding:8px 0;font-size:23px}.manage-link{background:#63736a!important}

/* v4.2: fixed-ratio board; only the five-day list scrolls. */
.sticker{flex:0 0 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1;will-change:transform}
.day{isolation:isolate}
.rankrow b{flex:0 0 1.25em}
.rankrow em{white-space:nowrap}
@media (max-width:380px){.sticker{font-size:5cqw}.count{font-size:3.4cqw}}

/* v4.3: member deletion controls only */
.member-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.member .delete-member{background:#ad3933;color:#fff}.member label{min-width:0;overflow-wrap:anywhere;flex:1}.member button:disabled{opacity:.5;cursor:wait}

/* v4.4: keep the illustrated leaderboard title clear; 1st place remains prominent. */
.rank{top:82.05%;height:6.25%;align-items:flex-start;overflow:hidden}
#ranking{width:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:.32cqw}
.rankrow{width:100%;margin:0;line-height:1.0;font-size:4.45cqw;gap:.48em;min-height:1.1em}
.rankrow:nth-child(n+2){font-size:3.55cqw}
.rankrow b{flex:0 0 1.22em;min-width:1.22em;padding:0;text-align:center}
.rankrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankrow em{flex:0 0 auto}
/* Sticker sizes are computed per day by fitStickers(); never hide a member name. */
.stickers{gap:0;overflow:hidden;padding-right:1px}
.sticker{font-size:var(--sticker-font,5.25cqw);max-width:none;overflow:visible;text-overflow:clip;flex:0 0 auto;margin-right:var(--sticker-gap,1.4cqw);padding:.08em .25em;transform-origin:center center}

/* v4.5: three leaderboard entries inside the existing painted frame.
   Board art remains untouched; only the live rows are repositioned. */
.rank{
  top:81.0%; height:8.2%; left:30%; width:40%;
  display:block; overflow:visible; text-align:left;
}
#ranking{
  display:grid; grid-template-rows:repeat(3,auto);
  align-content:start; row-gap:0; width:100%;
}
.rankrow{
  display:grid; grid-template-columns:1.25em minmax(0,1fr) auto;
  align-items:center; column-gap:.40em;
  width:100%; min-height:0; margin:0;
  font-size:4.3cqw; line-height:1.02;
  white-space:nowrap;
}
.rankrow:nth-child(n+2){font-size:3.45cqw;line-height:1.05}
.rankrow b{display:block;min-width:0;width:1.18em;height:1.18em;line-height:1.18em;padding:0;text-align:center;justify-self:center}
.rankrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.rankrow em{white-space:nowrap;text-align:right}

.member [data-rename]{background:#286c52}