.wlg-wrap{
  --navy:#27315e;
  --wine:#b5163c;
  --wine-dark:#8d0f2f;
  --cream:#fff8ef;
  --sand:#edc9ad;
  --gold:#ffd45f;
  --card:rgba(255,255,255,.87);
  position:relative;
  max-width:1120px;
  min-height:650px;
  margin:24px auto;
  padding:22px 28px 34px;
  overflow:hidden;
  border-radius:28px;
  color:var(--navy);
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 80%,rgba(255,255,255,.55),transparent 25%),
    linear-gradient(145deg,#d7ad95 0%,#f3c9a5 48%,#ffd6a5 100%);
  box-shadow:0 24px 70px rgba(71,42,31,.22);
}
.wlg-wrap *{box-sizing:border-box}
.wlg-bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  pointer-events:none;
}
.wlg-bg-orb-one{width:320px;height:320px;left:-150px;bottom:-180px;background:rgba(255,255,255,.23)}
.wlg-bg-orb-two{width:260px;height:260px;right:-120px;top:90px;background:rgba(255,239,189,.28)}
.wlg-header,.wlg-level-bar,.wlg-game-area{position:relative;z-index:2}
.wlg-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.wlg-brand{display:flex;align-items:center;gap:11px}
.wlg-logo{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  color:#fff;font-size:24px;font-weight:900;background:linear-gradient(145deg,var(--wine),#e74364);
  box-shadow:0 8px 18px rgba(181,22,60,.25)
}
.wlg-brand strong{display:block;font-size:22px;line-height:1}
.wlg-brand small{color:rgba(39,49,94,.7)}
.wlg-header-actions{display:flex;align-items:center;gap:9px}
.wlg-pill{
  min-width:124px;padding:9px 16px;border-radius:999px;color:#fff;
  display:flex;justify-content:center;align-items:center;gap:8px;
  background:#5c5962;box-shadow:inset 0 1px rgba(255,255,255,.25)
}
.wlg-icon-btn{
  width:43px;height:43px;border:0;border-radius:50%;cursor:pointer;
  background:#5c5962;color:#fff;font-size:18px;box-shadow:0 6px 16px rgba(50,42,45,.18)
}
.wlg-level-bar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  margin:22px auto 8px;max-width:760px;font-weight:800
}
.wlg-progress-track{
  height:9px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden
}
.wlg-progress-track span{
  display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--wine),#ef5a75);
  transition:width .4s ease
}
.wlg-game-area{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
  gap:34px;align-items:center;margin-top:12px
}
.wlg-board-panel,.wlg-wheel-panel{
  min-height:505px;border:1px solid rgba(255,255,255,.5);
  border-radius:26px;background:var(--card);backdrop-filter:blur(12px);
  box-shadow:0 15px 38px rgba(78,45,36,.13)
}
.wlg-board-panel{padding:25px}
.wlg-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wlg-kicker{text-transform:uppercase;font-size:11px;letter-spacing:1.4px;font-weight:900;color:var(--wine)}
.wlg-panel-heading h2{margin:5px 0 0;font-size:28px}
.wlg-found-count{
  padding:8px 12px;border-radius:999px;background:#f4e7e1;color:var(--wine);font-weight:900
}
.wlg-word-board{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:365px;gap:11px;padding:24px 0
}
.wlg-answer-row{display:flex;justify-content:center;gap:6px}
.wlg-answer-tile{
  display:grid;place-items:center;width:47px;height:47px;border:3px solid var(--wine);
  border-radius:9px;background:#fffaf5;color:#fff;font-size:25px;font-weight:900;
  box-shadow:0 4px 0 rgba(141,15,47,.15);transition:.22s
}
.wlg-answer-row.is-found .wlg-answer-tile,
.wlg-answer-tile.is-revealed{
  background:linear-gradient(145deg,var(--wine),#d72c51);color:#fff;transform:translateY(-2px)
}
.wlg-answer-tile.is-hint{
  color:var(--wine);background:#fff0b9;animation:wlgPulse .8s infinite alternate
}
@keyframes wlgPulse{to{transform:scale(1.08)}}
.wlg-message{min-height:28px;text-align:center;font-weight:900}
.wlg-message.is-good{color:#198754}
.wlg-message.is-bad{color:#c82843}
.wlg-message.is-warn{color:#aa6b00}
.wlg-wheel-panel{
  padding:23px;display:flex;flex-direction:column;align-items:center;justify-content:center
}
.wlg-current-word{
  min-height:52px;display:grid;place-items:center;margin-bottom:12px;padding:8px 18px;
  border-radius:14px;color:var(--wine);font-size:26px;letter-spacing:5px;font-weight:900
}
.wlg-current-word span{font-size:14px;letter-spacing:0;color:rgba(39,49,94,.55)}
.wlg-current-word.is-shaking{animation:wlgShake .35s}
@keyframes wlgShake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}
.wlg-wheel-shell{
  position:relative;width:310px;height:310px;border-radius:50%;
  background:rgba(255,255,255,.93);box-shadow:0 20px 42px rgba(73,42,34,.16);
  touch-action:none;user-select:none
}
.wlg-letter{
  position:absolute;transform:translate(-50%,-50%);
  width:76px;height:76px;border:0;border-radius:50%;
  background:transparent;color:var(--navy);font-size:48px;font-weight:900;cursor:pointer;
  transition:.16s
}
.wlg-letter:hover,.wlg-letter.is-selected{
  color:#fff;background:var(--wine);transform:translate(-50%,-50%) scale(1.05);
  box-shadow:0 8px 18px rgba(181,22,60,.25)
}
.wlg-shuffle-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border:0;border-radius:50%;cursor:pointer;
  background:#f1f1ef;color:#aeb2b4;font-size:33px
}
.wlg-action-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:20px}
.wlg-action-btn{
  border:0;border-radius:15px;padding:11px 12px;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;column-gap:8px;text-align:left;
  background:#fff;color:var(--navy);box-shadow:0 8px 18px rgba(58,42,39,.1)
}
.wlg-action-btn span{grid-row:1/3;font-size:22px;align-self:center}
.wlg-action-btn b{font-size:14px}
.wlg-action-btn small{color:#8b8791}
.wlg-complete-modal{
  position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  padding:20px;background:rgba(32,27,39,.58);backdrop-filter:blur(6px)
}
.wlg-complete-modal[hidden]{display:none}
.wlg-modal-card{
  width:min(420px,100%);padding:34px;text-align:center;border-radius:25px;
  background:#fff;color:var(--navy);box-shadow:0 24px 70px rgba(0,0,0,.25);
  animation:wlgPop .35s ease
}
@keyframes wlgPop{from{opacity:0;transform:scale(.82)}}
.wlg-stars{color:#ffbd22;font-size:34px;letter-spacing:7px}
.wlg-modal-card h3{margin:12px 0 8px;font-size:32px}
.wlg-reward{font-size:26px;font-weight:900;color:var(--wine);margin:18px 0}
.wlg-next-btn{
  width:100%;border:0;border-radius:13px;padding:14px;background:var(--wine);
  color:#fff;font-weight:900;font-size:16px;cursor:pointer
}
.wlg-confetti{
  position:absolute;z-index:40;top:-18px;width:10px;height:18px;border-radius:2px;
  background:hsl(calc(var(--i, 1) * 37),85%,58%);
  animation:wlgFall 2s linear forwards
}
.wlg-confetti:nth-of-type(3n){background:#ffd34f}
.wlg-confetti:nth-of-type(3n+1){background:#f04e6b}
.wlg-confetti:nth-of-type(3n+2){background:#55b9ff}
@keyframes wlgFall{to{top:105%;transform:rotate(720deg)}}
@media(max-width:850px){
  .wlg-wrap{padding:18px}
  .wlg-game-area{grid-template-columns:1fr;gap:18px}
  .wlg-board-panel,.wlg-wheel-panel{min-height:auto}
  .wlg-wheel-panel{padding:28px 16px}
}
@media(max-width:520px){
  .wlg-wrap{border-radius:18px;padding:14px 10px 24px}
  .wlg-brand small{display:none}
  .wlg-pill{min-width:90px;padding:8px 11px}
  .wlg-icon-btn{width:38px;height:38px}
  .wlg-level-bar{grid-template-columns:auto 1fr;font-size:13px}
  .wlg-level-bar span:last-child{display:none}
  .wlg-board-panel{padding:18px 10px}
  .wlg-panel-heading h2{font-size:22px}
  .wlg-answer-tile{width:39px;height:39px;font-size:21px;border-width:2px}
  .wlg-wheel-shell{width:280px;height:280px}
  .wlg-letter{width:64px;height:64px;font-size:40px}
}

/* Compact desktop sizing */
@media (min-width: 851px){
  .wlg-wrap{
    max-width: 920px;
    min-height: 540px;
    padding: 16px 22px 24px;
  }
  .wlg-header{
    transform: scale(.94);
    transform-origin: center top;
  }
  .wlg-level-bar{
    margin-top: 14px;
    margin-bottom: 4px;
    max-width: 680px;
  }
  .wlg-game-area{
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 22px;
    margin-top: 6px;
  }
  .wlg-board-panel,
  .wlg-wheel-panel{
    min-height: 430px;
    border-radius: 22px;
  }
  .wlg-board-panel{padding:18px}
  .wlg-panel-heading h2{font-size:24px}
  .wlg-word-board{
    min-height: 300px;
    gap: 8px;
    padding: 16px 0;
  }
  .wlg-answer-tile{
    width: 39px;
    height: 39px;
    font-size: 21px;
    border-width: 2px;
  }
  .wlg-wheel-panel{padding:16px}
  .wlg-current-word{
    min-height: 42px;
    margin-bottom: 6px;
    font-size: 22px;
  }
  .wlg-wheel-shell{
    width: 245px;
    height: 245px;
  }
  .wlg-letter{
    width: 58px;
    height: 58px;
    font-size: 36px;
  }
  .wlg-shuffle-center{
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .wlg-action-row{
    margin-top: 12px;
    gap: 8px;
  }
  .wlg-action-btn{padding:8px 10px}
}