@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--pink:#f5a8cb;--pink-deep:#e982b4;--pink-soft:#fff0f7;--ink:#51434b;--muted:#a995a0;--line:#f2dce7;--cream:#fffafc;--shadow:0 12px 34px rgba(191,126,157,.12)}
*{box-sizing:border-box}
body{margin:0;background:#fff7fb;color:var(--ink);font-family:'Noto Sans KR',sans-serif;min-height:100vh;background-image:radial-gradient(#f7dce9 1px,transparent 1px);background-size:22px 22px}
button{font:inherit;cursor:pointer}
.app-shell{max-width:1440px;margin:auto;padding:24px 28px 18px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:17px;background:#f9c5dc;color:#fff;font-size:26px;box-shadow:0 5px 0 #edaccb}
.eyebrow,.stage-kicker{margin:0;color:#c58ba7;font-size:10px;font-weight:800;letter-spacing:1.7px}
.brand h1{font:26px 'Jua',sans-serif;margin:2px 0 0;color:#624c59}
.top-actions{display:flex;align-items:center;gap:9px}.save-hint{font-size:12px;color:#ad94a1;margin-right:8px}
.soft-button,.primary-button{border:0;border-radius:12px;padding:11px 16px;font-size:12px;font-weight:800}.bgm-button{border:1px solid #f0cddd;border-radius:12px;padding:11px 14px;background:#fff3f8;color:#c9799d;font-size:12px;font-weight:800;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}.bgm-button.is-playing{background:#e98db7;border-color:#e98db7;color:#fff;box-shadow:0 3px 0 #d77ca5}.bgm-button:focus-visible{outline:2px solid #df8db2;outline-offset:2px}
.soft-button{background:#fff;color:#987d8c;border:1px solid var(--line)}.primary-button{background:#ee91bb;color:#fff;box-shadow:0 4px 0 #d97da7}
.game-layout{display:grid;grid-template-columns:230px minmax(400px,1fr) 340px;gap:16px;align-items:stretch}
.panel{background:rgba(255,255,255,.92);border:1px solid #f3e0e9;border-radius:21px;box-shadow:var(--shadow)}
.category-panel{padding:20px 15px;display:flex;flex-direction:column;height:680px;min-height:680px}
.panel-heading{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:0 2px 12px;height:72px;min-height:72px;flex:0 0 72px;box-sizing:border-box;border-bottom:1px dashed #f0dce6}.panel-heading .stage-kicker{display:block}
.category-nav{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.category-button{border:1px solid transparent;background:transparent;border-radius:13px;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;color:#9d8793;font-size:13px;font-weight:700;transition:.18s}
.category-button span{width:27px;height:27px;border-radius:9px;background:#fff0f6;color:#df91b4;display:grid;place-items:center;font-size:16px}
.category-button:hover{background:#fff7fb}.category-button.active{background:#fff0f6;border-color:#f6d5e4;color:#c86e99}.category-button.active span{background:#ee9fc1;color:white}
.rule-note{margin-top:auto;padding:14px;background:#fff8fb;border:1px dashed #f0d2e1;border-radius:13px}.rule-note b{font-size:10px;color:#d889ac;letter-spacing:1px}.rule-note p{font-size:11px;line-height:1.6;color:#a58d99;margin:6px 0 0}
.stage-panel{padding:20px 22px 15px;display:flex;flex-direction:column;height:680px;min-height:680px;overflow:hidden}
.stage-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 2px 12px;border-bottom:0;height:72px;min-height:72px;flex:0 0 72px;box-sizing:border-box}.stage-topline h2,.items-heading h2,.panel-heading h2{font:21px 'Jua',sans-serif;margin:4px 0 0;color:#654e5b}.live-dot{font-size:10px;letter-spacing:1px;color:#dc83aa;background:#fff1f7;padding:7px 10px;border-radius:20px;flex-shrink:0}
.stage-wrap{position:relative;flex:1 1 auto;width:100%;min-height:0;margin-top:0;border-radius:17px;overflow:hidden;background:linear-gradient(180deg,#fff8fb,#fff1f7);border:1px solid #f8e5ee;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.stage-wrap.drag-over{background:#ffebf4;outline:3px dashed #ee9fc1;outline-offset:-9px}
.character-stage{position:relative;width:min(100%,540px);height:auto;aspect-ratio:1/1;max-height:100%;z-index:2;pointer-events:none}
.character-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.base-layer{z-index:1}.hair-layer{z-index:10}.face-layer{z-index:20}.clothes-layer{z-index:30}
.hat-layer{z-index:40}
#accessoryLayers{position:absolute;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.set-layer{z-index:70}
#accessoryLayers{position:absolute;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}

.drop-message{position:absolute;bottom:15px;z-index:3;font-size:10px;color:#d6a3ba;letter-spacing:1px;opacity:.85;pointer-events:none}
.floor-shadow{position:absolute;left:50%;top:82.5%;transform:translateX(-50%);width:25%;height:2.4%;border-radius:50%;background:rgba(202,147,172,.18);filter:blur(6px);z-index:0;pointer-events:none}
.stage-footer{display:flex;justify-content:space-between;padding:13px 3px 0;color:#b69aa8;font-size:10px;font-weight:700;letter-spacing:.7px}.mini-heart{color:#ed9fc0;font-style:normal;margin-right:5px}
.items-panel{padding:20px 18px;height:680px;min-height:680px;display:flex;flex-direction:column;overflow:hidden}
.items-heading{display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;padding-bottom:12px;border-bottom:1px dashed #f0dce6;height:72px;min-height:72px;flex:0 0 72px;box-sizing:border-box}.items-heading-title{min-width:0;width:100%}.items-heading h2{font-size:21px;white-space:nowrap}.items-title-row{display:flex;align-items:center;gap:7px;width:100%;min-height:29px}.item-count{font-size:9px;color:#c49aaf;font-weight:800;letter-spacing:1px;white-space:nowrap;margin-left:auto;align-self:center}.accessory-reset-button{width:29px;height:29px;display:inline-grid;place-items:center;border:1px solid #f0cddd;background:#fff2f8;color:#c9799d;border-radius:9px;padding:0;font-size:19px;line-height:1;font-weight:700;cursor:pointer;transition:background .16s,transform .16s}.accessory-reset-button:hover{background:#ffe4f0;transform:rotate(-18deg)}.accessory-reset-button:focus-visible{outline:2px solid #df8db2;outline-offset:2px}.accessory-reset-button[hidden]{display:none}
.items-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:12px 2px 0;overflow-y:auto;align-content:start;flex:1 1 auto;min-height:0;max-height:none}
.item-card{position:relative;border:1px solid #f2e1e9;border-radius:13px;background:#fffafd;min-height:137px;padding:8px 7px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform .16s,border-color .16s,background .16s;cursor:grab;touch-action:pan-y;user-select:none}
.item-card:hover{transform:translateY(-2px);border-color:#edb2cc;background:#fff5fa}.item-card.equipped{border:2px solid #e994b8;background:#fff0f6}.item-card img{width:100%;height:102px;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.item-card span{font-size:10px;color:#9e8291;font-weight:700}.item-card.equipped:after{content:'✓';position:absolute;top:7px;right:8px;width:19px;height:19px;display:grid;place-items:center;background:#e990b7;color:white;border-radius:50%;font-size:11px}
.mobile-drag-tip{display:none;margin-top:auto;padding:10px;background:#fff5f9;border-radius:10px;text-align:center;font-size:10px;color:#bd91a6}
.footer-note{text-align:center;padding:18px 0 0;font-size:9px;color:#c4a5b5;letter-spacing:2px}.footer-note span{color:#e99bbc;margin:0 5px}
.drag-ghost{position:fixed;z-index:9999;width:112px;height:112px;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 8px 9px rgba(180,103,142,.2));opacity:.92}
.character-stage.snap{animation:snap .32s cubic-bezier(.2,.8,.2,1)}@keyframes snap{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);background:#654e5b;color:#fff;padding:11px 17px;border-radius:30px;font-size:12px;z-index:10000;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px) and (min-width:761px){.game-layout{grid-template-columns:180px minmax(300px,1fr) 270px;gap:11px}.category-panel,.stage-panel,.items-panel{height:620px;min-height:620px;padding-top:17px}.stage-wrap{min-height:0}.app-shell{padding:18px}.category-panel{padding-left:10px;padding-right:10px}.items-panel{padding-left:13px;padding-right:13px}}
@media(max-width:760px){body{background-size:18px 18px}.app-shell{padding:12px 10px 14px}.topbar{align-items:flex-start;margin-bottom:12px}.brand{gap:9px}.brand-mark{width:39px;height:39px;font-size:22px;border-radius:13px}.brand h1{font-size:21px}.eyebrow{font-size:8px}.top-actions{gap:6px}.save-hint{display:none}.soft-button,.primary-button{padding:9px 10px;font-size:10px;border-radius:10px}.bgm-button{padding:9px 9px;font-size:9px;border-radius:10px}.game-layout{display:flex;flex-direction:column;gap:10px}.category-panel{height:auto;min-height:0;padding:10px 11px;order:2}.panel-heading{display:none}.category-nav{padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.category-button{padding:7px 3px;flex-direction:column;gap:3px;text-align:center;font-size:9px;border-radius:10px}.category-button span{width:25px;height:25px;font-size:14px}.rule-note{display:none}.stage-panel{order:1;height:auto;min-height:0;padding:13px 12px 10px}.stage-topline{min-height:0;padding-bottom:10px}.stage-topline h2{font-size:18px}.stage-wrap{min-height:0;height:auto;aspect-ratio:1/1;margin-top:10px}.character-stage{width:100%;max-height:none}.drop-message{font-size:8px;bottom:8px}.floor-shadow{width:25%;height:2.4%}.stage-footer{padding-top:9px;font-size:8px}.items-panel{order:3;height:auto;min-height:0;padding:13px 12px}.items-heading{padding-bottom:9px}.items-heading h2{font-size:18px}.items-title-row{gap:6px;min-height:26px}.item-count{font-size:8px}.accessory-reset-button{width:26px;height:26px;font-size:17px}.items-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px 0;max-height:none;overflow:visible}.item-card{min-height:103px;padding:5px 3px;border-radius:10px}.item-card img{height:72px}.item-card span{font-size:8px}.item-card.equipped:after{width:16px;height:16px;font-size:9px;top:4px;right:4px}.mobile-drag-tip{display:block}.footer-note{font-size:8px;padding-top:12px}}
@media(max-width:380px){.brand h1{font-size:18px}.items-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-button{font-size:8px}}

/* drag feedback */

/* v10: responsive header controls */
.button-icon{display:inline-block;font-size:1.12em;line-height:1;vertical-align:middle;margin-right:5px}
.button-label{display:inline}

/* v10 mobile layout refinements */
@media(max-width:760px){
  .topbar{align-items:center;gap:7px}
  .brand{flex:1 1 auto;min-width:0;gap:8px}
  .brand-mark{flex:0 0 39px;width:39px;height:39px}
  .brand>div{min-width:0}
  .brand h1{font-size:18px;white-space:nowrap;line-height:1.2;letter-spacing:-.4px}
  .eyebrow{font-size:7px;letter-spacing:1.25px}
  .top-actions{flex:0 0 auto;gap:5px;align-items:center}
  .top-actions .save-hint{display:none}
  .top-actions .bgm-button,
  .top-actions .soft-button,
  .top-actions .primary-button{
    width:42px;height:42px;min-width:42px;padding:0;
    display:grid;place-items:center;border-radius:12px;
    line-height:1;box-shadow:none;
  }
  .top-actions .primary-button{box-shadow:0 3px 0 #d97da7}
  .button-icon{display:inline-block;margin:0;font-size:21px;line-height:1}
  .button-label{display:none}
  .top-actions .bgm-button.is-playing{box-shadow:0 3px 0 #d77ca5}

  /* A landscape 4:3 character stage reduces vertical scrolling on phones. */
  .stage-wrap{aspect-ratio:4/3;width:100%;height:auto;min-height:0;margin-top:10px}
  .character-stage{width:auto;height:100%;max-width:100%;max-height:none;aspect-ratio:1/1}

  /* Larger, easier-to-tap category controls, independent from desktop styles. */
  .category-nav{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .category-button{min-width:0;min-height:73px;padding:8px 1px 7px;gap:6px;font-size:11px;line-height:1.15;white-space:nowrap}
  .category-button span{width:34px;height:34px;min-width:34px;border-radius:11px;font-size:19px;line-height:1}
  .category-button.active{border-radius:12px}

  /* Three item cards per row on mobile. */
  .items-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 0;max-height:none;overflow:visible}
  .item-card{min-height:116px;padding:6px 4px 7px;border-radius:11px;gap:4px}
  .item-card img{height:82px}
  .item-card span{font-size:10px}
  .item-card.equipped:after{width:17px;height:17px;font-size:9px;top:5px;right:5px}
}
@media(max-width:360px){
  .brand h1{font-size:16px}
  .brand-mark{flex-basis:35px;width:35px;height:35px}
  .top-actions .bgm-button,
  .top-actions .soft-button,
  .top-actions .primary-button{width:38px;height:38px;min-width:38px}
  .category-button{font-size:10px;min-height:68px}
  .category-button span{width:31px;height:31px;min-width:31px;font-size:17px}
  .item-card{min-height:108px}
  .item-card img{height:75px}
}


/* v11: shared inner padding for the three main panels */
.category-panel,
.stage-panel,
.items-panel{
  padding:20px;
}
.panel-heading,
.stage-topline,
.items-heading{
  padding-left:0;
  padding-right:0;
}

/* Category icon images: replace the text glyph inside each category span with an img. */
.category-button span img{
  display:block;
  width:70%;
  height:70%;
  object-fit:contain;
}
@media(max-width:1050px) and (min-width:761px){
  .category-panel,
  .stage-panel,
  .items-panel{
    padding:17px;
  }
}
@media(max-width:760px){
  .category-panel,
  .stage-panel,
  .items-panel{
    padding:12px;
  }
}

/* v12: Category heading mirrors the stage-topline title block */
@media(min-width:761px){
  .category-panel .panel-heading{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding:0 2px 12px;
    height:72px;
    min-height:72px;
    flex:0 0 72px;
    box-sizing:border-box;
  }
  .category-panel .panel-heading>div{
    display:block;
    margin:0;
  }
  .category-panel .panel-heading .stage-kicker{
    display:block;
    margin:0;
  }
  .category-panel .panel-heading h2{
    font:21px 'Jua',sans-serif;
    margin:4px 0 0;
    color:#654e5b;
  }
}

/* v13: replaceable title logo artwork */
.brand-mark{
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
.brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
}


/* v14: 120% larger item thumbnails (wardrobe only; character layers stay untouched). */
.items-grid:not(.hair-catalog) .item-card{min-height:157px}
.item-card img{height:122px}
.items-grid.hair-catalog{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:12px 2px 14px;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:570px;
}
.hair-section{display:block;min-width:0}
.hair-section-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:1px 2px 8px;
  margin-bottom:9px;
  border-bottom:1px solid #f4e1e9;
}
.hair-section-heading h3{
  margin:0;
  color:#765d6b;
  font:18px 'Jua',sans-serif;
}
.hair-section-heading span{
  color:#c99ab0;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
}
.hair-items-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
@media(max-width:760px){
  .items-grid:not(.hair-catalog) .item-card{min-height:136px}
  .item-card img{height:98px}
  .items-grid.hair-catalog{
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:10px 0;
    max-height:none;
    overflow:visible;
  }
  .hair-section-heading{padding:1px 1px 7px;margin-bottom:7px}
  .hair-section-heading h3{font-size:16px}
  .hair-items-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media(max-width:360px){
  .items-grid:not(.hair-catalog) .item-card{min-height:128px}
  .item-card img{height:90px}
}


/* v15: hair color groups are collapsible */
.hair-section-toggle{
  appearance:none;
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:left;
  font:inherit;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.hair-section-toggle:focus-visible{
  outline:2px solid #e994b8;
  outline-offset:3px;
  border-radius:8px;
}
.hair-section-toggle .hair-section-subtitle{margin-left:auto}
.hair-section-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-left:7px;
  border-radius:50%;
  background:#fff0f6;
  color:#cf83a6;
  font-size:17px;
  font-weight:800;
  transition:transform .18s ease;
}
.hair-section-grid[hidden],
.hair-items-grid[hidden]{display:none!important}

/* Compatibility notes shown only in the relevant category. */
.category-notice{
  margin:9px 2px 0;
  padding:8px 10px;
  border:1px dashed #f0d2e1;
  border-radius:10px;
  background:#fff8fb;
  color:#b68a9e;
  font-size:10px;
  line-height:1.5;
}
.category-notice[hidden]{display:none!important}

/* v15: portrait item cards, 1:1.2, with thumbnails enlarged another 120%.
   The original character PNGs and their wear-on coordinates are untouched. */
.item-card{
  aspect-ratio:1 / 1.2;
  min-height:0;
  height:auto;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  justify-content:stretch;
  padding:6px 6px 8px;
  overflow:visible;
}
.item-card img{
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  object-fit:contain;
  transform:scale(1.2);
  transform-origin:center center;
  align-self:center;
  justify-self:center;
}
.item-card span{
  position:relative;
  z-index:1;
  display:block;
  text-align:center;
  line-height:1.2;
}
@media(max-width:760px){
  .category-notice{
    margin:7px 0 0;
    padding:7px 9px;
    font-size:9px;
  }
  .item-card{
    aspect-ratio:1 / 1.2;
    min-height:0;
    padding:5px 4px 7px;
  }
  .item-card img{
    width:100%;
    height:100%;
    transform:scale(1.2);
  }
  .item-card span{
    font-size:10px;
  }
}


/* v15.1: clipped image viewport keeps enlarged art clear of its caption */
.item-card{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  aspect-ratio:1 / 1.2;
  min-height:0;
  height:auto;
  padding:6px 6px 8px;
}
.item-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.item-thumb img{
  display:block;
  flex:0 0 100%;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-height:0;
  object-fit:contain;
  transform:scale(1.2);
  transform-origin:center center;
}
.item-card>span{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}


/* v17: stable item grid sizing for long catalogs + square cards */
.items-grid{
  align-content:start;
  grid-auto-rows:max-content;
  min-height:0;
}
.items-grid:not(.hair-catalog){
  overflow-y:auto;
  overflow-x:hidden;
}
.items-grid .item-card,
.hair-items-grid .item-card{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:0 !important;
  height:auto;
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-self:start;
}
.item-card .item-thumb{
  width:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.item-card .item-thumb img{
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  object-fit:contain;
}
.items-grid.hair-catalog{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
}
.hair-section{flex:0 0 auto}
.hair-items-grid{
  grid-auto-rows:max-content;
  align-content:start;
}
@media(max-width:760px){
  .items-grid:not(.hair-catalog){
    overflow:visible;
    grid-auto-rows:max-content;
  }
  .items-grid.hair-catalog{
    max-height:none;
    overflow:visible;
  }
  .items-grid .item-card,
  .hair-items-grid .item-card{
    aspect-ratio:1 / 1;
  }
}

.accessory-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* SY B-day: birthday decorations are always the topmost character layer. */
#birthdayLayers{position:absolute;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}
.birthday-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
@media(max-width:760px){
  .birthday-category-button{font-size:10px;letter-spacing:-.35px}
}

/* Sidebar layout adjustment: remove tip panel and fit SY B-day on one line. */
.category-panel{min-width:0;overflow:visible}
.category-button{white-space:nowrap;flex-wrap:nowrap}
.category-button span{flex:0 0 27px}
.birthday-category-button{font-size:12px;letter-spacing:-.25px;padding-left:9px;padding-right:9px;gap:8px}
@media(max-width:1050px) and (min-width:761px){
  .birthday-category-button{font-size:10px;gap:6px;padding-left:6px;padding-right:6px}
}
@media(max-width:760px){
  .birthday-category-button{font-size:9px;letter-spacing:-.4px;gap:3px;padding-left:2px;padding-right:2px}
  .birthday-category-button span{flex-basis:25px}
}

/* v19.8 category navigation polish */
.category-panel{display:flex;flex-direction:column;min-width:0}
.category-nav{flex:0 0 auto}
.birthday-category-button{font-size:13px;letter-spacing:0;padding:12px 13px;gap:12px}
.birthday-category-button span{flex:0 0 27px}
.rule-note{margin-top:auto;padding:10px 12px;flex:0 0 auto}
.rule-note b{display:block;margin-bottom:4px}
.rule-note p{font-size:10px;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
@media(max-width:1050px) and (min-width:761px){
  .birthday-category-button{font-size:11px;gap:8px;padding-left:8px;padding-right:8px}
  .birthday-category-button span{flex-basis:27px}
  .rule-note{padding:8px}
  .rule-note p{font-size:9px}
}
@media(max-width:760px){
  .rule-note{display:none}
  .birthday-category-button{font-size:9px;letter-spacing:-.4px;gap:3px;padding:7px 2px}
  .birthday-category-button span{flex-basis:25px}
}

/* Mobile: 7 categories in one row */
@media (max-width: 760px) {

  .category-panel {
    padding: 10px 6px;
  }

  .category-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
  }

  .category-button {
    min-width: 0;
    min-height: 64px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: clamp(7px, 2.1vw, 10px);
    white-space: nowrap;
    letter-spacing: -0.5px;
  }

  .category-button span {
    width: 25px;
    height: 25px;
    min-width: 25px;
    flex: 0 0 25px;
    font-size: 14px;
  }

  .birthday-category-button {
    font-size: clamp(6px, 1.9vw, 9px);
    letter-spacing: -0.7px;
  }
}

/* v20: intro landing screen */
[hidden]{display:none !important}
.intro-screen{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  padding:24px;background:#fff3f8;
  background-image:radial-gradient(#f7dce9 1px,transparent 1px);
  background-size:18px 18px;
}
.intro-card{
  width:min(100%,880px);min-height:570px;padding:56px 28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;background:rgba(255,255,255,.96);
  border:1px solid #f5e2eb;border-radius:42px;
  box-shadow:0 18px 55px rgba(191,126,157,.12);
}
.intro-hearts{margin-bottom:24px;color:#ee9abb;font-size:34px;letter-spacing:5px}
.intro-card h1{margin:0;color:#624c59;font:42px 'Jua',sans-serif}
.intro-card p{margin:18px 0 34px;color:#b69aa8;font-size:15px}
#startGameBtn{
  min-width:190px;border:0;border-radius:999px;padding:16px 30px;
  background:#ee91bb;color:#fff;font-size:15px;font-weight:800;
  box-shadow:0 5px 0 #d97da7;cursor:pointer;
}
#startGameBtn:active{transform:translateY(2px);box-shadow:0 3px 0 #d97da7}
@media(max-width:600px){
  .intro-screen{padding:18px}
  .intro-card{min-height: min(570px,72vh);padding:36px 18px;border-radius:30px}
  .intro-hearts{font-size:28px;margin-bottom:18px}
  .intro-card h1{font-size:30px}
  .intro-card p{font-size:12px;margin:14px 0 28px}
  #startGameBtn{min-width:170px;padding:14px 24px;font-size:13px}
}
/* iOS safe-area and narrow viewport guardrails */
html{min-width:0;-webkit-text-size-adjust:100%}
body{width:100%;overflow-x:hidden}
.app-shell{width:100%;min-width:0}
@supports(height:100dvh){
  .intro-screen{min-height:100dvh}
}

#categoryNotice {
  white-space: pre-line;
}