:root{
  --bg:#0b0f16;--panel:#151a24;--soft:#1d2432;--line:#30394d;
  --text:#f7f9fc;--muted:#aab3c5;--purple:#7c5cff;--blue:#4da3ff;
  --red:#ff6b78;--green:#43d395;--yellow:#ffcf62
}
*{box-sizing:border-box}
html{font-size:17px}
body{
  margin:0;min-width:320px;color:var(--text);
  font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;
  background:
    radial-gradient(circle at 10% 0,rgba(124,92,255,.2),transparent 28%),
    radial-gradient(circle at 95% 30%,rgba(77,163,255,.12),transparent 30%),
    var(--bg);
  line-height:1.55
}
button{font:inherit}
.wrap{width:min(1280px,calc(100% - 28px));margin:25px auto 55px}
.hero,.status-bar,.panel-title,.board-head,.actions{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hero{align-items:flex-start;margin-bottom:20px}
.eyebrow,.panel-title span,.board-head span,.next-box>span,.modal-card>small{
  color:#a897ff;font-weight:950;letter-spacing:.14em;font-size:.76rem
}
h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1;margin:.1rem 0 .4rem}
h2{font-size:1.45rem;margin:.15rem 0}
.hero p,.board-head p{color:var(--muted);margin:.2rem 0}
.btn{min-height:52px;padding:0 21px;border:0;border-radius:13px;color:#fff;font-weight:900;cursor:pointer}
.primary{background:linear-gradient(135deg,var(--purple),#6042e6);box-shadow:0 10px 28px rgba(124,92,255,.2)}
.ghost{background:#202736;border:1px solid var(--line)}
.danger{color:#ffc1c8}
.status-bar{
  display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:16px;padding:16px 20px;
  border:1px solid var(--line);border-radius:18px;background:rgba(21,26,36,.92)
}
.status-bar div{text-align:center;border-right:1px solid var(--line)}
.status-bar div:last-child{border:0}
.status-bar small{display:block;color:var(--muted);font-weight:900;font-size:.75rem;letter-spacing:.08em}
.status-bar strong{font-size:1.35rem}
.game-layout{display:grid;grid-template-columns:335px 1fr;gap:16px}
.customer-panel,.board-panel{
  border:1px solid rgba(255,255,255,.07);border-radius:22px;background:rgba(21,26,36,.96);
  box-shadow:0 18px 60px rgba(0,0,0,.35)
}
.customer-panel{padding:22px;align-self:start}
.panel-title b{font-size:1.4rem;color:var(--yellow)}
.timer-track{height:10px;background:#0d121b;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:12px 0 18px}
.timer-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .12s linear}
.customer-card{padding:18px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,rgba(124,92,255,.13),var(--soft) 75%)}
.customer-top{display:flex;gap:14px;align-items:center}
.avatar-shell{width:96px;height:96px;flex:0 0 96px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.035)}
.customer-svg{width:90px;height:90px;overflow:visible}
.customer-name{font-size:1.35rem;font-weight:950}
.customer-line{font-size:.88rem;color:var(--muted);margin-top:3px}
.order-list{display:grid;gap:8px;margin-top:15px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:#10151e;border:1px solid #252e3f;font-weight:900}
.fruit-dot{width:19px;height:19px;border-radius:50%;display:inline-block;box-shadow:inset -3px -3px 0 rgba(0,0,0,.15),0 0 0 2px rgba(255,255,255,.12);vertical-align:-4px;margin-right:8px}
.next-box{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}
.next-card{display:flex;align-items:center;gap:10px;margin-top:10px;padding:11px;border-radius:14px;background:#10151e;color:var(--muted)}
.next-card .customer-svg{width:54px;height:54px}
.board-panel{padding:25px}
.board-head{align-items:flex-start;margin-bottom:18px}
.board-head p{max-width:400px;text-align:right;font-size:.9rem}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.grill{
  position:relative;min-height:154px;padding:14px 10px 8px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(150deg,#242c3b,#171d28 70%);transition:.16s;cursor:pointer
}
.grill:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.035);border-radius:13px;pointer-events:none}
.grill:hover{transform:translateY(-2px);border-color:#556078}
.grill.selected{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,92,255,.14),0 10px 28px rgba(0,0,0,.25)}
.slots{display:flex;height:125px;align-items:flex-end;justify-content:center;gap:7px}
.slot{width:27%;height:118px;display:flex;align-items:flex-end;justify-content:center;border-radius:12px;position:relative}
.slot.target{background:rgba(124,92,255,.1);outline:1px dashed rgba(168,151,255,.45)}
.skewer{position:relative;width:40px;height:112px;cursor:grab;transition:.14s;filter:drop-shadow(0 7px 6px rgba(0,0,0,.3))}
.skewer:hover,.skewer.selected{transform:translateY(-8px) scale(1.04)}
.stick{position:absolute;left:18px;top:4px;width:4px;height:107px;border-radius:4px;background:linear-gradient(90deg,#8c633f,#deb27a,#8c633f)}
.ball{position:absolute;left:5px;width:31px;height:31px;border-radius:48% 52% 45% 55%;border:2px solid rgba(255,255,255,.26);box-shadow:inset -7px -6px 0 rgba(0,0,0,.14),inset 5px 5px 0 rgba(255,255,255,.21)}
.ball:nth-of-type(2){top:17px}.ball:nth-of-type(3){top:45px}.ball:nth-of-type(4){top:73px}
.glint{position:absolute;left:11px;top:24px;width:8px;height:14px;border-radius:50%;background:rgba(255,255,255,.62);transform:rotate(25deg)}
.strawberry{background:#ef5d82}.grape{background:#9868d9}.mandarin{background:#ff9f57}.kiwi{background:#84cb6c}
.blueberry{background:#697ad0}.pineapple{background:#f1c355}.cherry{background:#d9446c}.peach{background:#ff9fac}.melon{background:#8ed17b}
.actions{justify-content:flex-end;margin-top:18px}
.toast{position:fixed;right:22px;bottom:22px;padding:14px 18px;border:1px solid var(--line);border-radius:13px;background:#222a39;opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;z-index:10}
.toast.show{opacity:1;transform:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(4,6,10,.78);backdrop-filter:blur(8px);z-index:20}
.modal.hidden{display:none}
.modal-card{width:min(440px,100%);padding:34px;border:1px solid var(--line);border-radius:24px;background:#151a24;text-align:center;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.modal-card h2{font-size:2rem;margin:.5rem 0}.modal-card p{color:var(--muted);margin-bottom:22px}
@media(max-width:950px){.game-layout{grid-template-columns:1fr}.customer-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.panel-title,.timer-track{grid-column:1/-1}.next-box{margin:0;padding:0;border:0}}
@media(max-width:700px){html{font-size:16px}.hero{flex-direction:column}.hero .btn{width:100%}.status-bar{grid-template-columns:1fr 1fr}.status-bar div:nth-child(2){border-right:0}.status-bar div:nth-child(-n+2){border-bottom:1px solid var(--line);padding-bottom:10px}.status-bar div:nth-child(n+3){padding-top:10px}.customer-panel{display:block}.next-box{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}.board{grid-template-columns:repeat(3,1fr)}.board-panel{padding:17px}.board-head{flex-direction:column}.board-head p{text-align:left}.grill{min-height:140px}.slots{height:112px}.actions{display:grid;grid-template-columns:1fr 1fr}.actions .btn{width:100%}}
@media(max-width:470px){.board{grid-template-columns:repeat(2,1fr)}}


/* ===== 통합 상단 메뉴 ===== */
.siteNav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}
.siteNavLink{
  min-height:70px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 17px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(21,26,36,.92);
  color:var(--muted);
  text-decoration:none;
  transition:.18s ease;
}
.siteNavLink:hover{transform:translateY(-2px);border-color:#59647c;color:#fff}
.siteNavLink.active{
  color:#fff;
  border-color:#ff7187;
  background:linear-gradient(135deg,rgba(255,107,120,.18),rgba(124,92,255,.12));
}
.navIcon{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;
  border-radius:13px;background:#10151e;font-size:1.35rem
}
.siteNavLink small{display:block;color:#a897ff;font-size:.68rem;font-weight:950;letter-spacing:.12em}
.siteNavLink b{display:block;font-size:1.02rem}

/* ===== 과일별 실루엣/무늬 구분 ===== */
.skewer{
  --fruit:#ef5d82;
}
.ball{
  background:var(--fruit);
}
.skewer.strawberry{--fruit:#ef5d82}
.skewer.grape{--fruit:#8f67dc}
.skewer.mandarin{--fruit:#ff9f57}
.skewer.kiwi{--fruit:#82c96c}
.skewer.blueberry{--fruit:#6676cc}
.skewer.pineapple{--fruit:#efc450}
.skewer.cherry{--fruit:#d83f69}
.skewer.peach{--fruit:#ff9dad}
.skewer.melon{--fruit:#8dce7c}

/* 딸기: 하트형 + 씨 */
.skewer.strawberry .ball{
  border-radius:55% 55% 62% 62% / 48% 48% 72% 72%;
  transform:rotate(45deg) scale(.86);
}
.skewer.strawberry .ball::before{
  content:"";
  position:absolute;
  inset:7px 8px;
  background:
    radial-gradient(circle at 25% 25%,#ffd788 0 1.2px,transparent 1.6px),
    radial-gradient(circle at 70% 30%,#ffd788 0 1.2px,transparent 1.6px),
    radial-gradient(circle at 35% 70%,#ffd788 0 1.2px,transparent 1.6px),
    radial-gradient(circle at 72% 72%,#ffd788 0 1.2px,transparent 1.6px);
  transform:rotate(-45deg);
}

/* 체리: 두 알처럼 보이는 쌍원 */
.skewer.cherry .ball{
  width:28px;height:28px;
  border-radius:50%;
  box-shadow:
    9px 2px 0 -2px #b92f55,
    inset -6px -5px 0 rgba(0,0,0,.15),
    inset 4px 4px 0 rgba(255,255,255,.2);
}
.skewer.cherry .ball::before{
  content:"";
  position:absolute;
  width:12px;height:10px;
  left:12px;top:-7px;
  border-left:2px solid #76a25d;
  border-top:2px solid #76a25d;
  transform:rotate(25deg);
}

/* 포도: 작은 알 송이 */
.skewer.grape .ball{
  border:0;background:transparent;box-shadow:none;
}
.skewer.grape .ball::before{
  content:"";
  position:absolute;left:4px;top:3px;width:12px;height:12px;border-radius:50%;
  background:#9a72df;
  box-shadow:12px 0 #8c62d4,6px 10px #a277e3,18px 10px #7f58c8,12px 20px #9268d7;
}

/* 귤: 납작한 원 + 조각선 */
.skewer.mandarin .ball{
  border-radius:48%;
  transform:scaleY(.82);
  background:
    conic-gradient(from 0deg,rgba(255,255,255,.18) 0 3deg,transparent 3deg 58deg,
    rgba(255,255,255,.18) 58deg 61deg,transparent 61deg 118deg,
    rgba(255,255,255,.18) 118deg 121deg,transparent 121deg 178deg,
    rgba(255,255,255,.18) 178deg 181deg,transparent 181deg 238deg,
    rgba(255,255,255,.18) 238deg 241deg,transparent 241deg 298deg,
    rgba(255,255,255,.18) 298deg 301deg,transparent 301deg),
    #ff9f57;
}

/* 키위: 단면 씨앗 */
.skewer.kiwi .ball{
  border-radius:50%;
  background:
    radial-gradient(circle,#f6e4a6 0 18%,transparent 19%),
    repeating-conic-gradient(#4d4d32 0 5deg,transparent 5deg 22deg),
    #84cb6c;
}

/* 블루베리: 별 꼭지 */
.skewer.blueberry .ball{
  border-radius:50%;
}
.skewer.blueberry .ball::before{
  content:"✦";
  position:absolute;
  left:8px;top:3px;
  font-size:12px;color:#313b73;
}

/* 파인애플: 격자 */
.skewer.pineapple .ball{
  border-radius:36% 36% 46% 46%;
  background:
    repeating-linear-gradient(45deg,transparent 0 6px,rgba(142,98,22,.28) 6px 8px),
    repeating-linear-gradient(-45deg,transparent 0 6px,rgba(142,98,22,.28) 6px 8px),
    #f1c355;
}

/* 복숭아: 가운데 홈 */
.skewer.peach .ball{
  border-radius:54% 54% 48% 48%;
}
.skewer.peach .ball::before{
  content:"";
  position:absolute;
  left:14px;top:1px;width:2px;height:27px;
  border-radius:99px;background:rgba(172,70,91,.38);
  transform:rotate(7deg);
}

/* 멜론: 줄무늬 */
.skewer.melon .ball{
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.18) 7px 9px),
    #8ed17b;
}

/* 각 탕후루에 종류 이름 표시 */
.skewer::after{
  position:absolute;
  left:50%;bottom:-17px;
  transform:translateX(-50%);
  font-size:9px;font-weight:950;white-space:nowrap;
  color:#d8deea;
  text-shadow:0 1px 3px #000;
}
.skewer.strawberry::after{content:"딸기"}
.skewer.grape::after{content:"포도"}
.skewer.mandarin::after{content:"귤"}
.skewer.kiwi::after{content:"키위"}
.skewer.blueberry::after{content:"블루베리"}
.skewer.pineapple::after{content:"파인애플"}
.skewer.cherry::after{content:"체리"}
.skewer.peach::after{content:"복숭아"}
.skewer.melon::after{content:"멜론"}

@media(max-width:700px){
  .siteNav{grid-template-columns:1fr}
}


/* ===== v3.2 과일 외곽선 제거 ===== */
.skewer .ball{
  border:none !important;
  outline:none !important;
}

/* 검은 테두리 대신 아주 약한 입체감만 유지 */
.skewer:not(.grape) .ball{
  box-shadow:
    inset -5px -5px 0 rgba(0,0,0,.08),
    inset 4px 4px 0 rgba(255,255,255,.16);
}

/* 체리는 두 알 표현에 필요한 그림자만 별도 유지 */
.skewer.cherry .ball{
  box-shadow:
    9px 2px 0 -2px #b92f55,
    inset -5px -4px 0 rgba(0,0,0,.08),
    inset 4px 4px 0 rgba(255,255,255,.15);
}

/* 포도는 기존 송이 모양 그대로 */
.skewer.grape .ball{
  border:none !important;
  box-shadow:none !important;
}


/* ===== v3.3 탕후루 디자인 완전 교체 ===== */
/* 예전 전역 과일 클래스가 꼬치 전체에 배경을 칠하던 문제 강제 제거 */
.skewer,
.skewer.strawberry,.skewer.grape,.skewer.mandarin,.skewer.kiwi,
.skewer.blueberry,.skewer.pineapple,.skewer.cherry,.skewer.peach,.skewer.melon{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.skewer{
  width:62px;
  height:122px;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.28));
  overflow:visible;
}
.skewer::before,.skewer::after{display:none !important}
.skewer .stick,.skewer .ball,.skewer .glint{display:none !important}
.candy-stick{
  position:absolute;
  left:29px;
  top:9px;
  width:5px;
  height:112px;
  border-radius:8px;
  background:linear-gradient(90deg,#7b5334 0%,#e4b77d 42%,#9a6840 100%);
  box-shadow:inset 1px 0 rgba(255,255,255,.35);
  transform:rotate(-1.5deg);
  z-index:0;
}
.candy-stick::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:-1px;
  width:7px;
  height:9px;
  background:#9b6942;
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.fruit-stack{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:-2px;
  z-index:1;
  pointer-events:none;
}
.fruit-art{
  display:block;
  width:48px;
  height:43px;
  margin-bottom:-8px;
  overflow:visible;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
.skewer:hover,.skewer.selected{
  transform:translateY(-8px) rotate(-2deg) scale(1.08);
}
.skewer.selected .fruit-art{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.75)) drop-shadow(0 4px 3px rgba(0,0,0,.2));
}
.slot{
  overflow:visible;
}
.slots{
  gap:3px;
}
.grill{
  min-height:166px;
  padding-top:17px;
}
.slots{height:136px}

/* 주문표의 과일도 단순 색점이 아니라 읽기 쉬운 표식으로 */
.fruit-dot{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}


/* 게임 시작 화면 */
.start-screen{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:22px;
  background:
    radial-gradient(circle at 20% 15%,rgba(239,93,130,.24),transparent 28%),
    radial-gradient(circle at 82% 22%,rgba(152,104,217,.22),transparent 27%),
    rgba(7,10,15,.94);
  backdrop-filter:blur(10px);transition:opacity .28s ease,visibility .28s ease
}
.start-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.start-card{
  width:min(520px,100%);padding:42px 34px 36px;text-align:center;border:1px solid rgba(255,255,255,.11);
  border-radius:30px;background:linear-gradient(155deg,rgba(35,42,57,.98),rgba(18,23,33,.98));
  box-shadow:0 30px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06)
}
.start-card>small{color:#b7a9ff;font-size:.78rem;font-weight:950;letter-spacing:.18em}
.start-card h1{margin:.45rem 0 .7rem;font-size:clamp(2.6rem,8vw,4.7rem);letter-spacing:-.06em}
.start-card p{margin:0;color:#c3cad8;font-size:1.05rem;line-height:1.75}
.start-fruits{font-size:2.45rem;letter-spacing:.15em;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3));animation:startFloat 2.4s ease-in-out infinite}
.start-fruits span{display:inline-block;transform:translateY(-8px)}
.start-rules{display:grid;gap:9px;margin:25px auto 27px;padding:16px 18px;text-align:left;border:1px solid var(--line);border-radius:16px;background:#10151e;color:#e9edf5;font-weight:800}
.start-button{width:100%;min-height:62px;font-size:1.12rem}
@keyframes startFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:470px){.start-card{padding:34px 22px 26px}.start-rules{font-size:.9rem}}

.siteNavLink.bombLink:hover{border-color:#ffb347;background:linear-gradient(135deg,rgba(255,179,71,.18),rgba(255,89,94,.08));}
@media(max-width:680px){.siteNav{grid-template-columns:1fr}.siteNavLink{min-height:64px}}

/* V4.1: 상단 메뉴를 데스크톱에서 항상 한 줄 3칸으로 표시 */
.siteNav{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:700px){.siteNav{grid-template-columns:1fr;}}

/* V4.2 navigation hardening */
.siteNav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-bottom:20px!important}
.siteNavLink{min-width:0!important;min-height:70px!important;display:flex!important;align-items:center!important;gap:13px!important;padding:12px 17px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:rgba(21,26,36,.92)!important;color:var(--muted)!important;text-decoration:none!important}
.siteNavLink.active{color:#fff!important;border-color:#ff7187!important;background:linear-gradient(135deg,rgba(255,107,120,.18),rgba(124,92,255,.12))!important}
.siteNavLink span:last-child{min-width:0}.siteNavLink small,.siteNavLink b{display:block!important}.siteNavLink b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.siteNav{grid-template-columns:1fr!important}.siteNavLink{min-height:64px!important}}