.tool-workshop { --workshop-hue:152; display:grid; gap:12px; min-width:0 }
.workshop-dice { --workshop-hue:208 }
.workshop-pumpkin { --workshop-hue:29 }
.workshop-snowman { --workshop-hue:196 }
.workshop-witch { --workshop-hue:275 }
.workshop-hero, .workshop-stage, .workshop-puzzle, .workshop-feed, .premium-card {
  display:grid; gap:8px; justify-items:center; text-align:center; min-width:0; padding:clamp(16px,4vw,28px);
  border-radius:22px; border:1px solid hsl(var(--workshop-hue,43) 63% 65% / .25);
  background:radial-gradient(ellipse at 50% 0%,hsl(var(--workshop-hue,43) 75% 56% / .23),transparent 75%), var(--panel, #202725);
}
.workshop-hero > span { font-size:clamp(58px,15vw,96px); line-height:1.12; filter:drop-shadow(0 9px 12px #0008) }
.workshop-hero strong { font-size:clamp(17px,5vw,25px); overflow-wrap:anywhere }
.workshop-hero small, .workshop-caption, .workshop-feed small, .workshop-upgrade small { opacity:.78; line-height:1.45 }
.workshop-caption { display:block; text-align:center; margin:0 }
.workshop-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.workshop-controls .btn { flex:1 1 125px; min-width:0; min-height:44px }
.workshop-result,.workshop-reset { padding:13px; border:1px solid hsl(var(--workshop-hue) 60% 65% / .25); border-radius:14px; text-align:center; background:#ffffff08 }
.workshop-result { display:grid; gap:4px; font-size:18px; animation:workshop-appear .25s ease-out }
.workshop-result small { font-size:12px; opacity:.8 }
.workshop-die-button { border:0; background:none; padding:12px; perspective:500px; cursor:pointer }
.workshop-die-button:disabled { cursor:default }
.workshop-die { display:grid; width:clamp(72px,22vw,112px); aspect-ratio:1; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr); gap:6%; padding:13%; place-items:center; border-radius:22%; transform-origin:center;
  background:linear-gradient(145deg,#fff,#f2eadb 68%,#c9bea9); box-shadow:0 6px 0 #9f937f,0 13px 21px #0009,inset 0 0 0 2px #fff9;
}
.workshop-die i { width:70%; aspect-ratio:1; border-radius:50% }
.workshop-die .pip { background:#171716; box-shadow:inset 0 1px 2px #0009 }
.workshop-die-button.rolling { animation:workshop-roll 3s cubic-bezier(.17,.69,.20,1) both }
.workshop-die.mini { width:32px; padding:4px; box-shadow:0 2px 0 #a99d8d; flex:none }
.workshop-faces { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto);
  grid-auto-flow:column; list-style:none; margin:0; padding:0; gap:7px }
.workshop-faces li,.workshop-loot li { border:1px solid #ffffff20; border-radius:12px; background:#ffffff09; padding:8px }
.workshop-faces li { display:flex; gap:8px; align-items:center; font-size:clamp(11px,3.3vw,14px); overflow-wrap:anywhere }
.workshop-faces .winner { border-color:#9ed586; background:#8ed57726 }
.workshop-loot { list-style:none; display:grid; gap:7px; padding:0; margin:0; animation:workshop-appear .32s ease-out }
.workshop-levels { display:flex; align-items:center; justify-content:center; gap:4px; width:100%; max-width:380px; margin:0 auto }
.workshop-levels span { flex:1; min-width:0; height:10px; border-radius:3px; background:#0c131c80; border:1px solid #ffffff22 }
.workshop-levels .filled { background:linear-gradient(#acec9a,#49a863); border-color:#93da7d }
.workshop-levels b { font-size:12px; margin-inline-start:5px; white-space:nowrap }
.workshop-stage { min-height:218px; position:relative; overflow:hidden }
.workshop-gesture,.workshop-food { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; background:none; border:none; color:inherit }
.workshop-gesture { width:clamp(132px,46vw,195px); min-height:116px; font-size:clamp(66px,19vw,104px); line-height:1.1; z-index:1 }
.workshop-gesture.held,.workshop-food:active { cursor:grabbing }
.workshop-gesture[data-shake].held { animation:workshop-shake .25s ease-in-out infinite alternate }
.workshop-particles { position:absolute; inset:0; pointer-events:none }
.workshop-particles span { position:absolute; top:39%; left:calc(50% - 12px); font-size:26px; z-index:2; animation:workshop-fall .88s ease-in both }
.workshop-scratch { position:relative; display:grid; place-items:center }
.workshop-scratch > span { position:absolute; font-size:65px; z-index:0 }
.workshop-scratch button { opacity:var(--snow); filter:drop-shadow(0 0 10px #c7f6ff); transition:opacity .22s }
.workshop-square-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.workshop-square-grid .compact-item { min-width:0; min-height:82px; padding:6px; text-align:center }
.workshop-square-grid .compact-item > span { font-size:28px }
.workshop-square-grid .compact-item.selected { box-shadow:inset 0 0 0 2px #bb9afa; background:#a977fa28 }
.workshop-quests { display:grid; gap:9px }
.workshop-quests .daily-card { padding:12px }
.witch-book { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; color:#493121; min-height:160px; border-radius:13px;
  border:6px solid #673d36; box-shadow:0 5px 0 #392926,0 11px 20px #0005; background:#ecd5ac; animation:workshop-appear .25s ease-out }
.witch-book > div { display:grid; align-content:center; justify-items:center; text-align:center; gap:9px; padding:12px; min-width:0;
  background:linear-gradient(90deg,#fff3d0,#ecd2a6); overflow-wrap:anywhere }
.witch-book > div + div { background:linear-gradient(90deg,#b58f62,#f6e2bb 15%,#f4deb8); border-left:1px solid #97724b }
.witch-book span { font-size:44px }.witch-book p { margin:0; font-weight:700 }
.workshop-energy { display:flex; align-items:center; gap:10px; padding:0 8px }
.tool-workshop progress { accent-color:#8bcc87; width:100%; min-width:0 }
.workshop-energy strong { white-space:nowrap }
.workshop-puzzle { padding:12px; gap:11px }
.workshop-name { display:grid; gap:8px }
.workshop-name input { padding:12px; border-radius:12px; background:#ffffff10; border:1px solid #ffffff30; color:inherit; font:inherit; font-size:16px }
.workshop-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.workshop-stats > div,.workshop-upgrade { display:grid; gap:6px; padding:11px; border-radius:14px; border:1px solid #ffffff20; background:#ffffff09 }
.workshop-stats > div { text-align:center }
.workshop-upgrade > div:first-child { display:grid; gap:4px }
.workshop-upgrade .workshop-levels { max-width:none }
.workshop-feed-target { width:min(100%,240px); padding:13px; border-radius:20px; font-size:70px; background:#98d18117 }
.workshop-basket { display:flex; justify-content:center; align-items:center; gap:7px; position:relative; font-size:22px }
.workshop-food { position:relative; font-size:42px; z-index:2; padding:6px }
.workshop-food:disabled { opacity:.4 }
.workshop-travel { position:relative; overflow:hidden; padding:12px 12px 34px; border-radius:18px; background:linear-gradient(#244d3c,#183d2c 62%,#745039 65%,#493b2a); min-height:105px }
.workshop-travel div { text-align:center; white-space:nowrap; font-size:clamp(25px,8vw,42px); opacity:.8 }
.workshop-travel span { position:absolute; left:clamp(0px, var(--travel,0%), calc(100% - 46px)); bottom:9px; white-space:nowrap;
  font-size:24px; transition:left .32s linear; animation:workshop-bob .38s ease-in-out infinite alternate }
.premium-card { --workshop-hue:42; gap:10px }
.premium-card.is-inactive { --workshop-hue:36 }
.premium-card .premium-art { width:min(50%,170px); height:105px; display:grid; place-items:center; overflow:hidden }
.premium-card .premium-art svg,.premium-card .premium-art img { width:100%; height:100%; object-fit:contain }
.premium-badge { display:inline-flex; padding:5px 12px; border-radius:999px; background:#ffc87321; color:#ffe0a5; font-size:13px; font-weight:700 }
.premium-card h3,.premium-card p { margin:0 }
.premium-card p { opacity:.88; max-width:36ch }
.premium-perks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; width:100%; margin-top:6px }
.premium-perks span { display:grid; gap:3px; align-content:center; min-height:66px; padding:6px; border-radius:12px; background:#ffffff0b; font-size:12px }
.premium-perks b { font-size:21px }
.premium-actions { margin-top:12px }
@keyframes workshop-roll {
  0% { transform:rotate(0deg) rotateX(0deg) }
  18% { transform:rotate(560deg) rotateX(38deg) }
  45% { transform:rotate(1120deg) rotateX(-32deg) }
  78% { transform:rotate(1410deg) rotateX(18deg) }
  100% { transform:rotate(1440deg) rotateX(0deg) }
}
@keyframes workshop-fall { from { transform:translateY(0) scale(.7); opacity:1 } to { transform:translate(var(--fall-x),125px) rotate(30deg); opacity:0 } }
@keyframes workshop-shake { from { transform:translateY(-7px) rotate(-5deg) } to { transform:translateY(7px) rotate(5deg) } }
@keyframes workshop-bob { from { transform:translateY(2px) rotate(-4deg) } to { transform:translateY(-4px) rotate(4deg) } }
@keyframes workshop-appear { from { opacity:0; transform:translateY(8px) scale(.98) } to { opacity:1; transform:none } }
@media(prefers-reduced-motion:reduce) {
  .workshop-die-button.rolling,.workshop-gesture[data-shake].held,.workshop-travel span,.workshop-cauldron .held i { animation:none }
}

.workshop-cauldron { display:grid; justify-items:center; gap:12px; padding:12px; border-radius:20px;
  background:radial-gradient(ellipse at center,#b174ed30,transparent 76%),#ffffff08 }
.workshop-cauldron button { position:relative; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 28px #a36ee050 }
.workshop-cauldron i { position:absolute; top:6%; left:43%; font-size:32px; opacity:.7; pointer-events:none }
.workshop-cauldron .held i { animation:workshop-bob .3s ease-in-out infinite alternate }
.workshop-crystals { display:grid; grid-template:repeat(3,48px)/repeat(3,48px); gap:6px; align-items:center; justify-items:center }
.workshop-crystals > span { grid-area:2/2; font-size:41px; filter:drop-shadow(0 0 12px #cf9fef90) }
.workshop-crystals .btn { width:100%; height:100%; padding:0; font-size:23px }
.crystal-0 { grid-area:1/2 }.crystal-1 { grid-area:2/3 }.crystal-2 { grid-area:3/2 }.crystal-3 { grid-area:2/1 }
.workshop-crystals .lit { box-shadow:0 0 14px #d7a6f6b0; border-color:#e5bafd; background:#b779d33d }

.admin-timer-skip { display:inline-grid; place-items:center; vertical-align:middle; margin-inline-start:6px; width:28px; height:28px;
  min-width:28px; padding:0; border:1px solid #ffcb726a; border-radius:50%; background:#efb34e29; color:inherit; font-size:13px; cursor:pointer }
.admin-timer-skip[hidden] { display:none }
.admin-timer-skip:disabled { opacity:.55 }
.workshop-snow-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px }
.workshop-snow-slot { min-width:0; position:relative }
.workshop-snow-slot > .admin-timer-skip { position:absolute; top:4px; right:4px; margin:0 }
.workshop-snowball { display:grid; width:100%; aspect-ratio:1; align-content:center; justify-items:center; gap:5px;
  border:1px solid #9de2fb74; border-radius:44% 44% 36% 36%; background:radial-gradient(ellipse at 50% 24%,#9deaff42,#243c5f70);
  color:inherit; padding:5px; box-shadow:inset 0 0 0 3px #95d9ff13,0 4px 8px #0003; cursor:pointer }
.workshop-snowball:disabled { opacity:.62; cursor:default }
.workshop-snowball > span { font-size:clamp(22px,8vw,44px); filter:drop-shadow(0 3px 5px #63c9f974) }
.workshop-snowball small { font-size:clamp(10px,3.1vw,13px); text-align:center }
.workshop-altar { display:grid; justify-items:center; gap:9px; text-align:center; padding:16px; border-radius:22px;
  background:radial-gradient(ellipse at 50% 25%,#b897fb33,transparent 75%),var(--panel); border:1px solid #b897fb51 }
.workshop-altar > strong { font-size:21px }
.workshop-altar-orbit { display:grid; grid-template:1fr / 35px 1fr 35px; grid-template-areas:"left crystal right"; align-items:center;
  width:min(100%,225px); min-height:126px; padding:12px; border-radius:50%; background:radial-gradient(ellipse,#a57feb48,#30204765 65%,transparent 66%);
  border:1px dashed #d4b9fc63; box-shadow:0 8px 20px #13111a73 }
.workshop-altar-orbit > span { grid-area:crystal; font-size:65px; filter:drop-shadow(0 0 15px #d8aeff83) }
.workshop-altar-orbit > :nth-child(2) { grid-area:left }
.workshop-altar-orbit > :nth-child(3) { grid-area:right }
.workshop-altar-orbit > button,.workshop-altar-orbit > i { display:grid; place-items:center; font-size:19px; font-style:normal;
  color:#dbbbfa; width:35px; height:35px; padding:0; line-height:1; border-radius:50%; border:1px solid #d7b1f781; background:#332850 }
.workshop-altar .workshop-energy { width:min(100%,245px) }
.workshop-essences { display:flex; justify-content:center; min-height:58px; gap:4px; flex-wrap:wrap }
.workshop-essences > button { display:grid; justify-items:center; gap:3px; width:48px; background:transparent; border:0; font-size:27px;
  color:inherit; cursor:grab; touch-action:none; position:relative; z-index:2 }
.workshop-essences small { font-size:11px }
.workshop-basket { display:flex; min-height:94px; width:min(100%,228px); justify-content:center; align-items:center; gap:2px;
  border:8px solid #ae7842; border-radius:50%; padding:8px 7px; box-shadow:inset 0 0 16px #422712,0 6px 12px #0005;
  background:repeating-linear-gradient(0deg,#b08149 0 4px,#694521 4px 6px,#925d2e 6px 9px) }
.workshop-basket .workshop-food { font-size:clamp(26px,9vw,38px); padding:0 2px; filter:drop-shadow(0 4px 4px #44260bb0) }
.workshop-basket .workshop-food:nth-child(2) { rotate:14deg }

.map-player > .admin-timer-skip { pointer-events:auto; margin:3px 0 0; }

.workshop-essences > button:disabled { opacity:.46; cursor:default }

.workshop-scratch > [hidden] { display:none }
.workshop-gesture-meter { display:flex; width:min(100%,285px); align-items:center; gap:9px; font-size:13px }
.workshop-gesture-meter > progress { flex:1; min-width:0 }
.workshop-gesture-meter > b { min-width:3.5ch; text-align:end; white-space:nowrap }
.workshop-cauldron .btn { border-radius:12px; box-shadow:none; min-height:44px }
.workshop-patrol-scene { display:flex; align-items:center; justify-content:space-between; width:min(100%,350px); font-size:25px; padding-inline:8px }
.workshop-patrol-track { position:relative; width:calc(100% - 22px); height:27px; margin:1px 11px 5px;
  background:#664632; border-radius:9px; border:1px solid #a66c4e; box-shadow:inset 0 3px 8px #0005 }
.workshop-patrol-gap { position:absolute; inset-block:0; left:var(--gap-left); width:var(--gap-width); border-radius:6px;
  background:#528c5a; border:1px solid #abe2a6; box-shadow:0 0 11px #7bce7370 }
.workshop-patrol-marker { position:absolute; top:50%; left:0; transform:translate(-50%,-55%); font-size:25px;
  line-height:1; filter:drop-shadow(0 2px 4px #000c) }
.workshop-puzzle[data-patrol] .btn { min-height:44px; width:min(100%,245px) }
.workshop-puzzle.missed .workshop-patrol-track { opacity:.65 }
