.candy-modal[hidden], .candy-modal [hidden] { display: none !important; }
.candy-trail-open { overflow: hidden; }
.candy-modal { position: fixed; inset: 0; z-index: 12020; overflow: hidden; isolation: isolate; background: #b3d6df; color: #4c333e; font-family: "Nunito", "Trebuchet MS", sans-serif; }
.candy-scene { position: absolute; inset: 0; }
.candy-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -5px; }
.candy-modal button { box-sizing: border-box; min-width: 48px; min-height: 48px; padding: 10px 16px; border: 1px solid #dcc2b7; border-radius: 17px; background: #fffaf0f2; color: #583341; box-shadow: 0 4px 18px #65494118; font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.candy-modal button:hover { background: #fffdf7; }
.candy-modal button:focus-visible, .candy-scene canvas:focus-visible { outline: 3px solid #833653; outline-offset: 3px; }
.candy-modal button:disabled { cursor: default; color: #786b6b; background: #eee8e1; box-shadow: none; }
.candy-header { position: absolute; z-index: 2; transform: translateZ(0); inset: max(18px, env(safe-area-inset-top)) 24px auto; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.candy-header > * { pointer-events: auto; }
.candy-title { margin-right: auto; padding: 10px 22px; border: 1px solid #fff8eb; border-radius: 23px; background: #fffaf0ee; }
.candy-title p { margin: 0 0 3px; color: #8d4f66; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.candy-title h2 { margin: 0; font: 500 29px/1.15 Georgia, serif; }
.candy-racers { position: absolute; top: 108px; right: 24px; display: flex; gap: 9px; width: 350px; }
.candy-racer { box-sizing: border-box; flex: 1; min-width: 0; padding: 11px 14px 10px; border: 1px solid #fff9e9; border-radius: 18px; background: #fffaf0ed; box-shadow: 0 6px 22px #65494112; }
.candy-racer strong { display: block; font-size: 16px; }
.candy-racer strong small { color: #76625e; font-size: 10px; font-weight: 600; }
.candy-racer > span { display: block; margin: 3px 0 7px; font-size: 11px; color: #76625e; white-space: nowrap; }
.candy-progress { height: 5px; overflow: hidden; border-radius: 7px; background: #e7dfd7; }
.candy-progress > span { display: block; height: 100%; border-radius: inherit; background: #cb3466; }
.candy-racer-cocoa .candy-progress > span { background: #98623c; }
.candy-view { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 24px; }
.candy-footer { position: absolute; right: 24px; bottom: max(22px, env(safe-area-inset-bottom)); box-sizing: border-box; width: 350px; padding: 16px 18px 10px; border: 1px solid #fff9ed; border-radius: 26px; background: #fffaf1f4; box-shadow: 0 12px 44px #6549412b; }
.candy-draw-info { display: flex; align-items: center; gap: 15px; min-height: 86px; }
.candy-card-face { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; width: 68px; height: 86px; border: 1px solid #d9c6b7; border-radius: 14px; background: linear-gradient(155deg, #fffdf5, #f1e9de); color: #b78ca6; box-shadow: 0 4px 10px #79605716, inset 0 0 0 5px #fffdf8; font: 500 38px Georgia, serif; }
.candy-card-owner { margin: 0 0 5px; color: #76505f; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.candy-card-label { display: block; font: 500 21px/1.15 Georgia, serif; }
.candy-turn { margin: 7px 0 0; font-size: 12px; color: #a22f5c; font-weight: 800; }
.candy-symbol { display: block; width: 25px; height: 29px; background: var(--card-color); }
.candy-symbol-heart { clip-path: polygon(50% 96%, 8% 57%, 0 32%, 10% 11%, 28% 4%, 50% 23%, 72% 4%, 90% 11%, 100% 32%, 92% 57%); }
.candy-symbol-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.candy-symbol-sun { clip-path: polygon(50% 0, 62% 23%, 87% 12%, 77% 38%, 100% 50%, 77% 62%, 87% 88%, 62% 77%, 50% 100%, 38% 77%, 12% 88%, 23% 62%, 0 50%, 23% 38%, 12% 12%, 38% 23%); }
.candy-symbol-leaf { border-radius: 90% 0 90% 0; transform: rotate(-22deg); }
.candy-symbol-circle { height: 25px; border-radius: 50%; }
.candy-symbol-star { clip-path: polygon(50% 0, 61% 34%, 98% 36%, 69% 59%, 79% 96%, 50% 74%, 21% 96%, 31% 59%, 2% 36%, 39% 34%); }
#candy-hint { margin: 13px 0 10px; min-height: 36px; font-size: 14px; line-height: 1.3; }
[data-candy-draw] { width: 100%; min-height: 54px !important; background: #bc2b60 !important; border-color: #a62554 !important; color: #fffaf0 !important; font-size: 17px !important; }
[data-candy-draw]:hover { background: #a62554 !important; }
[data-candy-draw]:disabled { background: #eee8e1 !important; border-color: #ded4c8 !important; color: #786b6b !important; }
.candy-fair { margin: 9px 0 0; text-align: center; color: #79545f; font-size: 11px; }
.candy-save { font-size: 11px; }
.candy-save:empty { display: none; }
.candy-rules { position: absolute; z-index: 3; top: 110px; left: 24px; width: min(320px, calc(100% - 48px)); max-height: calc(100% - 122px); overflow-y: auto; box-sizing: border-box; padding: 14px 18px 18px; border: 1px solid #f8e6cf; border-radius: 22px; background: #fffaf1; box-shadow: 0 10px 50px #65494136, 0 0 0 100vmax #55484a44; }
.candy-rules > button:first-child { display: block; margin: 0 0 11px auto; }
.candy-rules img { display: block; width: 100%; height: 115px; object-fit: cover; border-radius: 12px; }
.candy-rules h3 { margin: 15px 0 9px; font: 500 25px Georgia, serif; }
.candy-rules p { font-size: 14px; line-height: 1.5; }
.candy-rules [data-candy-listen] { width: 100%; }
.candy-loading { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(310px, calc(100% - 32px)); padding: 25px; border-radius: 23px; background: #fffaf0; box-shadow: 0 9px 35px #65494126; text-align: center; font-weight: 800; }
.candy-ending { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); box-sizing: border-box; width: min(500px, calc(100% - 24px)); padding: 23px 25px 18px; border: 1px solid #fff7e6; border-radius: 29px; background: #fffaf1f4; box-shadow: 0 12px 55px #65494139; text-align: center; }
.candy-kicker { margin: 0; color: #805164; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.candy-ending h3 { margin: 8px 0 10px; font: 500 31px/1.15 Georgia, serif; }
.candy-ending-story { margin: 0 0 16px; line-height: 1.5; }
.candy-ending > div { display: flex; justify-content: center; gap: 10px; }
.candy-ending [data-candy-replay] { background: #f1d3df; border-color: #ddadc1; }
.candy-together { margin: 17px 0 0; color: #765463; font-size: 12px; line-height: 1.4; }
.candy-finished .candy-footer { display: none; }
.adventure-candy-open { display: flex; align-items: center; gap: 15px; width: 100%; margin: 14px 0; padding: 12px; border: 1px solid #e6c8d1; border-radius: 21px; background: #fff8ee; color: #61434c; text-align: left; font: inherit; cursor: pointer; }
.adventure-candy-open img { flex: none; width: 130px; height: 76px; border-radius: 13px; object-fit: cover; }
.adventure-candy-open > span:nth-child(2) { flex: 1; }
.adventure-candy-open strong { display: block; font-size: 19px; }
.adventure-candy-open small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.3; }
.adventure-candy-open > span:last-child { padding: 10px 16px; border-radius: 17px; background: #f2d5e1; font-weight: 800; }
@media (max-width: 700px) {
  .candy-header { inset: max(10px, env(safe-area-inset-top)) 10px auto; gap: 6px; }
  .candy-header button { padding: 9px 10px; border-radius: 15px; font-size: 13px; }
  .candy-title { flex: 1; min-width: 0; margin: 0; padding: 11px 5px; border-radius: 17px; text-align: center; }
  .candy-title p { display: none; }
  .candy-title h2 { font-size: 22px; }
  .candy-racers { top: max(76px, calc(env(safe-area-inset-top) + 66px)); left: 12px; right: 12px; width: auto; gap: 8px; }
  .candy-racer { padding: 9px 12px 8px; }
  .candy-racer strong { font-size: 14px; }
  .candy-racer > span { margin: 3px 0 5px; }
  .candy-view { top: max(156px, calc(env(safe-area-inset-top) + 146px)); bottom: auto; left: 12px; padding: 8px 12px !important; font-size: 12px !important; }
  .candy-footer { right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 12px 14px 8px; border-radius: 23px; }
  .candy-draw-info { min-height: 60px; gap: 12px; }
  .candy-card-face { width: 57px; height: 65px; border-radius: 12px; }
  .candy-card-label { font-size: 20px; }
  .candy-turn { margin-top: 4px; }
  #candy-hint { margin: 9px 0 8px; min-height: 18px; font-size: 13px; }
  .candy-fair { margin-top: 6px; font-size: 10px; }
  .candy-rules { top: 148px; left: 12px; width: calc(100% - 24px); max-height: calc(100% - 162px); overflow-y: auto; }
  .candy-ending { padding: 20px 18px 16px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .candy-ending h3 { font-size: 28px; }
  .candy-ending-story { font-size: 14px; }
  .candy-ending button { font-size: 14px; padding: 9px 13px; }
  .adventure-candy-open { gap: 10px; }
  .adventure-candy-open img { width: 80px; height: 80px; }
  .adventure-candy-open strong { font-size: 17px; }
  .adventure-candy-open small { font-size: 12px; }
  .adventure-candy-open > span:last-child { padding: 10px; font-size: 13px; }
}
@media (max-height: 540px) and (min-width: 701px) {
  .candy-header { top: 8px; }
  .candy-title { padding: 8px 15px; }
  .candy-title p { display: none; }
  .candy-title h2 { font-size: 23px; }
  .candy-racers { top: 72px; width: 320px; }
  .candy-footer { bottom: 8px; width: 310px; padding: 10px 14px 8px; }
  .candy-draw-info { min-height: 45px; }
  .candy-card-face { width: 47px; height: 50px; }
  .candy-card-label { font-size: 18px; }
  .candy-card-owner { margin-bottom: 3px; }
  .candy-turn { margin-top: 3px; }
  #candy-hint { margin: 7px 0; min-height: 18px; font-size: 12px; }
  .candy-fair { margin-top: 5px; }
  .candy-view { bottom: 10px; }
  .candy-rules { top: 70px; max-height: calc(100% - 80px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .candy-modal *, .candy-modal *::before, .candy-modal *::after { scroll-behavior: auto; } }