/* 3D goods workshop / Phase 3: fixed visible exhibition + scrollable controls. */
.workshop-modal {
  position: fixed; inset: 0; z-index: 170;
  display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(11, 20, 19, .81); backdrop-filter: blur(8px);
  overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
}
.workshop-modal.hidden { display: none!important; }
.workshop-room {
  width: min(1020px, 100%); max-height: min(880px, calc(100dvh - 24px));
  display: flex; flex-direction: column; color: #392b1e;
  background: #fbf0d5; border: 2px solid #e7c58d; border-radius: 22px;
  box-shadow: 0 24px 90px rgba(0,0,0,.48); overflow: hidden;
}
.workshop-header { display:flex; align-items:center; gap: 12px; padding: 14px 18px;
  background: linear-gradient(115deg,#523622,#74502e); color:#fff9e7; flex: 0 0 auto; }
.workshop-header-mark { font-size: 28px; line-height: 1; }
.workshop-header small { display:block; font-size:10px; letter-spacing:.18em; color:#f5ca82; font-weight:800; }
.workshop-header h2 { font-size:clamp(19px,3vw,27px); margin:2px 0 0; line-height:1.2; }
.workshop-close { margin-left:auto; width:43px; height:43px; flex:0 0 43px; border:1px solid #e5c99b;
  background:#785636; color:#fff; border-radius:50%; font-size:27px; font-weight:900; cursor:pointer; touch-action:manipulation; }
.workshop-close:focus-visible, .workshop-modal button:focus-visible, .workshop-modal a:focus-visible {
  outline:3px solid #38a2a1; outline-offset:3px;
}
.workshop-content { min-height:0; overflow-y:auto; padding: 16px 18px 18px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr); gap:18px; align-items:stretch; }
.workshop-scene { position:relative; min-height:350px; overflow:hidden; isolation:isolate; border:7px solid #a87948;
  border-radius:16px; background: repeating-linear-gradient(90deg,rgba(90,51,20,.08) 0 2px,transparent 2px 83px),
  linear-gradient(160deg,#f7deb1 0%,#e4bd81 68%,#bf915f 100%); box-shadow: inset 0 0 35px rgba(87,48,15,.2); }
.workshop-scene::before { content:""; position:absolute; left:0; right:0; top:0; height:15px; background:#986d43; box-shadow:0 5px 14px rgba(73,45,18,.23); }
.workshop-floor { position:absolute; inset:auto 0 0; height:24%; z-index:0; background: repeating-linear-gradient(2deg,transparent 0 47px,rgba(82,48,19,.2) 48px 50px),
  linear-gradient(#b7834b,#885a35); border-top:6px solid #76502f; }
.workshop-window {position:absolute; left:7%; top:12%; width:34%; height:34%; z-index:1; background:linear-gradient(#a1d8e5,#e8f4d3);
  border:10px solid #84542d; border-radius:5px; box-shadow:inset 0 0 0 4px #e7ba75,0 9px 13px rgba(79,40,15,.15); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:4px; }
.workshop-window i {display:block; background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 55%); border:1px solid rgba(255,255,255,.6)}
.workshop-shelf {position:absolute; top:12%; right:4%; width:43%; height:17%; border-bottom:11px solid #80512c; z-index:2;
  display:flex; gap:7px; align-items:flex-end; justify-content:space-evenly; font-size:clamp(21px,3vw,33px); text-shadow: 0 3px 3px rgba(80,48,20,.2); }
.workshop-craftsman { position:absolute; bottom:15%; left:7%; z-index:3; display:flex; flex-direction:column; align-items:center; gap:2px; }
.workshop-person { font-size:clamp(80px,12vw,132px); line-height:1.12; filter: drop-shadow(2px 9px 3px rgba(47,35,19,.24)); }
.workshop-craftsman span {font-size:12px; color:#fef3d8; font-weight:900; background:#75502e; border-radius:99px; padding:4px 11px; }
.workshop-exhibit { position:absolute; bottom:14%; right:9%; width:43%; height:36%; z-index:2; display:flex; align-items:center; flex-direction:column; justify-content:flex-end; }
.workshop-exhibit-label { font-size:clamp(13px,1.9vw,16px); font-weight:900; color:#573d23; background:rgba(255,246,216,.91); border-radius:10px; padding:5px 10px; margin-bottom:10px; }
.workshop-exhibit-shadow {height:12px; width:94%; background:rgba(35,21,9,.2); border-radius:50%; filter:blur(4px); order:4}
.workshop-exhibit-top {width:94%; height:22px; border:3px solid #ffe5ad; border-radius:50%; background:#c59152; box-shadow:0 5px 2px #76482c; order:2; }
.workshop-exhibit-base {height:59px; width:70%; margin-top:-2px; background:linear-gradient(90deg,#8e5a33,#bd8851 40%,#8a5430);
 border:2px solid #704629; border-radius:0 0 8px 8px; display:grid; place-items:center; order:3; box-shadow: inset 0 7px 10px rgba(30,12,4,.19); }
.workshop-exhibit-base span {font-size:10px; letter-spacing:.08em; color:#fff1d1; font-weight:900; }
.workshop-panel { background:#fffaf0; border:1px solid #e3ca9e; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px;
 box-shadow:inset 0 3px 14px rgba(82,52,17,.045); min-width:0; }
.workshop-progress {display:table; align-self:flex-start; border-radius:99px; background:#e3ecdc; color:#34603d; font-size:12px; font-weight:900; padding:6px 12px;}
.workshop-dialogue {font-size:clamp(15px,1.7vw,17px); line-height:1.86; margin:0; white-space:normal; overflow-wrap:anywhere; flex:1; }
.workshop-actions,.workshop-accepted {display:flex; flex-direction:column; gap:10px;}
.workshop-modal button,.workshop-modal a {font-family:inherit;}
.workshop-primary,.workshop-secondary {width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:12px;
 padding:10px 12px; cursor:pointer; font-weight:900; text-align:center; text-decoration:none; line-height:1.45; touch-action:manipulation; }
.workshop-primary {border:2px solid #23664b; color:#fff; background:#247750; box-shadow:0 5px 0 #194f37;}
.workshop-primary:hover {background:#1a6044;}
.workshop-secondary {border:1px solid #b79d79; background:#fff9ed; color:#69472e;}
.workshop-quest {margin:0; padding:12px; border-radius:11px; font-size:14px; font-weight:800; background:#eaf1db; border:1px solid #cee0b5;}
.workshop-hint {font-size:12px; line-height:1.7; margin:0; color:#564735; }
.workshop-pending:disabled {opacity:.62; cursor:not-allowed; box-shadow:none;}
.workshop-phase-note {font-size:12px; line-height:1.65; margin:0; color:#785c3b; border-left:3px solid #d8ad66; padding-left:10px;}
.workshop-exit {align-self:flex-end; color:#6c4d33; border:0; text-decoration:underline; background:transparent; font-size:13px; font-weight:750;
 cursor:pointer; padding:9px 5px; margin-top:auto; min-height:37px; touch-action:manipulation; }
@media(max-width:760px) {
 .workshop-modal {place-items:stretch;}
 .workshop-room {max-height:calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); width:100%;}
 .workshop-header {padding:10px 12px; gap:9px;}
 .workshop-header h2 {font-size:19px;}
 .workshop-close {width:39px;height:39px;flex-basis:39px;}
 .workshop-content {display:block; padding:10px;}
 .workshop-scene {min-height:180px; height:clamp(180px,30dvh,270px); border-width:5px; margin-bottom:10px;}
 .workshop-person {font-size:clamp(65px,15vw,95px);}
 .workshop-craftsman {bottom:13%;}
 .workshop-shelf {font-size:25px;}
 .workshop-exhibit {height:44%; bottom:11%;}
 .workshop-exhibit-base {height:44px;}
 .workshop-panel {padding:13px; gap:9px;}
 .workshop-dialogue {font-size:14px;line-height:1.65;}
}
@media(max-height:500px) and (orientation:landscape) {
 .workshop-room {max-height:calc(100dvh - 16px);}
 .workshop-header {padding:7px 13px;}
 .workshop-content {display:grid;grid-template-columns: 42% minmax(0,1fr);gap:10px;}
 .workshop-scene {height:auto;min-height:185px;margin:0;}
 .workshop-panel {padding:10px;}
 .workshop-dialogue {font-size:13px;line-height:1.55;}
}
@media(prefers-reduced-motion:reduce) {.workshop-modal * {scroll-behavior:auto;transition:none!important;}}

/* Phase 2 viewer: the translucent canvas ends visually at the existing pedestal top. */
.workshop-viewer {position:absolute; right:4%; bottom:calc(14% + 85px); width:53%; height:52%; z-index:4;
  border-radius:8px; overflow:hidden; touch-action:none; user-select:none; pointer-events:none;}
.workshop-viewer.workshop-has-model {pointer-events:auto; cursor:grab;}
.workshop-viewer.workshop-has-model:active {cursor:grabbing;}
.workshop-viewer-canvas {display:block; width:100%; height:100%; touch-action:none;}
.workshop-file-area {display:flex; flex-direction:column; gap:7px; padding:12px; border:2px dashed #b58f55;
  border-radius:12px; background:#fff7e8; min-width:0;}
.workshop-file-area.workshop-drop-hover {background:#e7f3dc; border-color:#247750;}
.workshop-file-area.workshop-loading {opacity:.65;}
.workshop-file-label {font-size:13px; font-weight:900; color:#51391f;}
.workshop-file-input {box-sizing:border-box; display:block; width:100%; min-width:0; max-width:100%; font-size:13px;
  color:#392b1e; background:#fffdf7; border-radius:8px; border:1px solid #d8c6a3; padding:7px;}
.workshop-file-input::file-selector-button {color:#fff; background:#27734f; padding:8px; border:0;
  margin-right:8px; border-radius:6px; font-weight:800; cursor:pointer;}
.workshop-drop-tip {font-size:11px; color:#71583a;}
.workshop-file-status {font-size:12px; line-height:1.55; margin:0; padding:8px 10px; border-radius:8px;
  overflow-wrap:anywhere; color:#425635; background:#edf1e6;}
.workshop-file-status[data-state="busy"] {color:#6c532e; background:#f9efd0;}
.workshop-file-status[data-state="error"] {color:#9e2832; background:#ffeded;}
.workshop-file-status[data-state="success"] {color:#216041; background:#dcf2df;}
.workshop-model-name {font-size:11px; color:#72573e; line-height:1.4; margin:0;
  overflow-wrap:anywhere; max-height:2.8em; overflow:hidden;}
.workshop-reset:disabled {opacity:.5; cursor:not-allowed;}
@media(max-width:760px) {
  .workshop-viewer {bottom:calc(11% + 62px); height:57%;}
  .workshop-file-area {padding:9px;}
}
@media(max-height:500px) and (orientation:landscape) {
  .workshop-viewer {bottom:calc(14% + 65px); height:54%;}
}

/* Phase 3 viewport repair (screenshots: the tall right form stretched the LEFT scene).
   Neither the craftsman nor the displayed GLB moves when controls are scrolled. */
.workshop-modal {
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  touch-action: auto;
}
.workshop-room {
  box-sizing: border-box;
  height: min(760px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  min-height: 0;
}
.workshop-header { padding: 10px 16px; }
.workshop-header-mark { font-size: 24px; }
.workshop-header h2 { font-size: clamp(17px, 2.4vw, 24px); }
.workshop-close { width: 38px; height: 38px; flex-basis: 38px; }
.workshop-content {
  flex: 1 1 auto;
  height: 0;
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(275px, .85fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}
.workshop-scene {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
}
.workshop-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 12px;
  gap: 8px;
  touch-action: pan-y;
}
.workshop-dialogue { flex: 0 0 auto; font-size: 14px; line-height: 1.55; }
.workshop-quest { padding: 8px 10px; font-size: 13px; }
.workshop-hint { font-size: 11px; line-height: 1.45; }
.workshop-file-area { padding: 8px; }
.workshop-exit { margin-top: 2px; }
.workshop-grade:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.workshop-result { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px; border: 2px solid #e7c079; border-radius: 12px; text-align: center;
  background: linear-gradient(135deg, #fff8e3, #fce5b9); }
.workshop-result.hidden { display: none!important; }
.workshop-result-label { color:#744a21; font-size: 13px; font-weight: 900; }
.workshop-score { color:#1b7046; font-size: clamp(28px,3vw,42px); line-height:1.1; }
.workshop-result-title { color:#624025; font-weight: 900; }
.workshop-result-comment { margin:0; line-height:1.55; font-size:13px; }
.workshop-reward-message { margin: 2px 0; padding: 9px; width:100%; box-sizing:border-box;
  border-radius: 8px; font-weight: 900; font-size: 13px; background:#dff2df; color:#236142; }
.workshop-reward-message[data-state="error"] { background:#ffeded; color:#972b35; }
.workshop-reward-message[data-state="claimed"] { background:#f0e7d6; color:#775630; }
.workshop-craftsman { bottom: 12%; }
.workshop-exhibit { bottom: 10%; }
.workshop-viewer { bottom: calc(10% + 84px); height: 54%; }
@media (max-width:760px) {
  .workshop-modal { place-items: center; }
  .workshop-room { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .workshop-header { padding: 7px 10px; }
  .workshop-header h2 { font-size: 17px; }
  .workshop-header small { font-size: 8px; }
  .workshop-header-mark { font-size: 20px; }
  .workshop-content { display: grid; grid-template-columns: minmax(0,1fr);
    grid-template-rows: clamp(160px, 34dvh, 260px) minmax(0,1fr);
    padding: 7px; gap: 7px; }
  .workshop-scene { height: 100%; min-height: 0; margin: 0; border-width: 4px; }
  .workshop-panel { height:100%; padding:9px; scrollbar-gutter: auto; }
  .workshop-person { font-size:clamp(58px,13vw,78px); }
  .workshop-craftsman { bottom:8%; }
  .workshop-exhibit { bottom:6%; height:48%; }
  .workshop-exhibit-label { padding:2px 6px; font-size: 11px; margin-bottom:3px; }
  .workshop-exhibit-top { height:13px; }
  .workshop-exhibit-base { height:28px; }
  .workshop-viewer { bottom:calc(6% + 47px); height:62%; width:53%; }
}
@media (max-height:500px) and (orientation:landscape) {
  .workshop-room { height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  .workshop-header { padding:4px 9px; }
  .workshop-content { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows:minmax(0,1fr); gap:6px; padding:5px; }
  .workshop-scene { height:100%; min-height:0; margin:0; }
  .workshop-panel { padding:7px; }
  .workshop-person { font-size:clamp(52px,10vh,75px); }
  .workshop-viewer { bottom:calc(10% + 60px); height:55%; }
}

/* The craftsman inspects the exhibit during the short scoring sequence. */
@keyframes workshop-inspect {0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
.workshop-judging .workshop-craftsman {animation:workshop-inspect .8s ease-in-out infinite;transform-origin:50% 95%;}
.workshop-result[data-excellent="true"] {border-color:#e6b64c;box-shadow:0 0 0 2px rgba(239,196,88,.25);}
@media(prefers-reduced-motion:reduce) {.workshop-judging .workshop-craftsman {animation:none;}}


/* Phase 4: a reference-inspired elder craftsman (no system emoji / OS-dependent appearance). */
.workshop-craftsman { left:5.5%; bottom:9%; width:clamp(115px,31%,205px); gap:0; pointer-events:none; }
.workshop-person { display:block; height:auto; width:100%; max-height:min(52dvh,315px); object-fit:contain; object-position:bottom;
  font-size:initial; line-height:normal; filter:drop-shadow(2px 9px 4px rgba(47,35,19,.26)); }
.workshop-craftsman>span { margin-top:-3px; white-space:nowrap; position:relative; z-index:1; }
@media(max-width:760px) {
 .workshop-craftsman { left:4%; bottom:5%; width:clamp(80px,27%,135px); }
 .workshop-person { max-height:185px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .workshop-craftsman { bottom:2%; width:clamp(75px,25%,140px); }
 .workshop-person { max-height:calc(100dvh - 90px); }
}

/* The result is a true full-room celebration, rather than a long right-hand form. */
.workshop-ceremony.hidden,.workshop-ceremony .hidden { display:none!important; }
.workshop-ceremony { position:absolute; inset:0; z-index:15; display:grid; place-items:center;
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
           max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at center,rgba(13,18,28,.85),rgba(3,6,12,.96));
  backdrop-filter:blur(6px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  animation:workshop-ceremony-in .22s ease-out both; }
.workshop-ceremony-card { width:min(690px,100%); max-height:calc(100dvh - 32px); min-width:0; overflow-y:auto;
  box-sizing:border-box; color:#fff8e3; background:linear-gradient(150deg,#3d3027,#241f2d 58%,#292a3b);
  border:2px solid #dbb66b; border-radius:22px; box-shadow:0 0 0 5px rgba(229,185,96,.12),0 18px 75px #000c;
  position:relative; display:flex; flex-direction:column; }
.workshop-ceremony-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
  background:radial-gradient(circle at 70% 12%,rgba(247,201,85,.13),transparent 48%); }
.workshop-ceremony-top,.workshop-ceremony-bottom {display:flex;align-items:center;gap:10px;z-index:1;position:relative;}
.workshop-ceremony-top {padding:12px 15px 6px 18px;}
.workshop-ceremony-eyebrow {font-weight:900;font-size:10px;letter-spacing:.15em;color:#e9c781;}
.workshop-ceremony-close {margin-left:auto;width:35px;height:35px;flex:0 0 35px;min-height:35px;
  border-radius:50%;border:1px solid #cfb47d;background:#574837;color:#fff;font-size:23px;cursor:pointer;}
.workshop-ceremony-body {display:grid;grid-template-columns:minmax(120px,.62fr) minmax(0,1.38fr);
  align-items:center;gap:9px;padding:0 22px 12px 13px;z-index:1;position:relative;min-height:0;}
.workshop-ceremony-craftsman {width:100%;max-height:min(46dvh,310px);object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));user-select:none;}
.workshop-ceremony-main {min-width:0;}
.workshop-judging-stage {text-align:center;padding:24px 6px;}
.workshop-ceremony-star {font-size:clamp(21px,4vw,34px);color:#ffe49a;letter-spacing:.24em;}
.workshop-ceremony-kicker {margin:14px 0 5px;color:#f8d99e;font-size:12px;font-weight:900;letter-spacing:.16em;}
/* Nine pulsing bars take the place of the literal "drumroll" heading.
   This visual is purely decorative; the real MP3 controls the result timing. */
.workshop-judging-meter {height:clamp(54px,8dvh,76px);width:min(100%,290px);margin:4px auto 13px;
  display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vw,9px);}
.workshop-judging-meter i {display:block;width:clamp(7px,1.3vw,11px);height:85%;flex:0 0 auto;
  border-radius:999px;background:linear-gradient(180deg,#fff7c9 0%,#f6c969 45%,#ca8746 100%);
  box-shadow:0 0 13px #ffd77d66;transform-origin:center;
  animation:workshop-meter-pulse 620ms ease-in-out infinite alternate;}
.workshop-judging-meter i:nth-child(2),.workshop-judging-meter i:nth-child(8){animation-duration:490ms;animation-delay:-220ms;}
.workshop-judging-meter i:nth-child(3),.workshop-judging-meter i:nth-child(7){animation-duration:740ms;animation-delay:-360ms;}
.workshop-judging-meter i:nth-child(4),.workshop-judging-meter i:nth-child(6){animation-duration:560ms;animation-delay:-125ms;}
.workshop-judging-meter i:nth-child(5){animation-duration:420ms;animation-delay:-310ms;}
@keyframes workshop-meter-pulse {from{transform:scaleY(.18);opacity:.65}to{transform:scaleY(1);opacity:1}}
.workshop-judging-stage p:not(.workshop-ceremony-kicker) {font-size:14px;line-height:1.6;color:#f0dcc0;}
.workshop-drum-progress {height:5px;background:#5c5148;border-radius:9px;overflow:hidden;margin:19px 15px 4px;}
.workshop-drum-progress i {display:block;width:100%;height:100%;background:linear-gradient(90deg,#b68b41,#fff2bd);
  transform-origin:left;animation:workshop-drumroll 4.52s linear both;}
.workshop-ceremony .workshop-result {box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:17px 14px;
  border:1px solid #e6c17b;background:linear-gradient(148deg,#fffae9,#ffe3a5);color:#593c23;
  box-shadow:0 0 27px rgba(255,213,107,.3);animation:workshop-result-pop .45s cubic-bezier(.2,1.55,.42,1) both;}
.workshop-ceremony .workshop-result-label {font-size:clamp(12px,2vw,15px);}
.workshop-ceremony .workshop-score {color:#237150;font-size:clamp(44px,7vw,78px);line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 #ffffffa3;}
.workshop-ceremony .workshop-result-title {font-size:clamp(15px,2vw,20px);}
.workshop-ceremony .workshop-result-comment {font-size:clamp(13px,1.7vw,15px);}
.workshop-ceremony .workshop-reward-message {font-size:clamp(12px,1.6vw,14px);line-height:1.5;}
.workshop-ceremony .workshop-hint {line-height:1.5;}
.workshop-ceremony .workshop-result[data-excellent="true"] {border-color:#fbe17c;box-shadow:0 0 22px #ffd66d80;}
.workshop-ceremony-bottom {padding:9px 14px 15px;justify-content:flex-end;flex-wrap:wrap;}
.workshop-ceremony-tool,.workshop-ceremony-return {border-radius:10px;padding:9px 12px;min-height:38px;
 font-weight:800;line-height:1.3;cursor:pointer;touch-action:manipulation;}
.workshop-ceremony-tool {background:#514c52;color:#fff4dd;border:1px solid #97836e;font-size:12px;}
.workshop-ceremony-return {background:#f4d185;color:#32261f;border:1px solid #e0b467;margin-left:auto;font-size:13px;}
.workshop-ceremony button:focus-visible {outline:3px solid #6cd3b6;outline-offset:2px;}
.workshop-ceremony.silent .workshop-drum-progress i {animation-duration:1.8s;}
@keyframes workshop-drumroll {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes workshop-result-pop {from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes workshop-ceremony-in {from{opacity:0}to{opacity:1}}
@media(max-width:560px) {
 .workshop-ceremony {padding:7px;}
 .workshop-ceremony-card {max-height:calc(100dvh - 14px);border-radius:16px;}
 .workshop-ceremony-top {padding:7px 9px 0;}
 .workshop-ceremony-eyebrow {font-size:8px;letter-spacing:.07em;}
 .workshop-ceremony-body {grid-template-columns:minmax(66px,.30fr) minmax(0,1fr);gap:4px;padding:0 9px 8px;}
 .workshop-ceremony-craftsman {max-height:190px;align-self:center;}
 .workshop-judging-stage {padding:12px 2px;}
 .workshop-judging-meter {height:clamp(42px,8dvh,60px);gap:5px;margin:3px auto 9px;}
 .workshop-ceremony .workshop-result {padding:9px 7px;gap:5px;}
 .workshop-ceremony .workshop-score {font-size:clamp(34px,9vw,54px);}
 .workshop-ceremony .workshop-result-label {font-size:11px;}
 .workshop-ceremony .workshop-result-comment {font-size:12px;}
 .workshop-ceremony .workshop-reward-message {padding:7px;font-size:11px;}
 .workshop-ceremony .workshop-hint {font-size:10px;}
 .workshop-ceremony-bottom {padding:5px 8px 9px;gap:6px;}
 .workshop-ceremony-tool,.workshop-ceremony-return {padding:6px 9px;min-height:35px;font-size:11px;}
}
@media(max-height:470px) and (orientation:landscape) {
 .workshop-ceremony-card {max-height:calc(100dvh - 12px);}
 .workshop-ceremony-body {grid-template-columns:90px minmax(0,1fr);padding:0 13px 5px;}
 .workshop-ceremony-craftsman {max-height:120px;}
 .workshop-ceremony .workshop-result {padding:7px;gap:3px;}
 .workshop-ceremony .workshop-score {font-size:34px;}
 .workshop-ceremony .workshop-result-comment {font-size:12px;}
 .workshop-ceremony .workshop-reward-message {font-size:11px;padding:5px;}
 .workshop-judging-stage {padding:8px;}
 .workshop-ceremony-bottom {padding:3px 10px 7px;}
}
@media(prefers-reduced-motion:reduce) {
 .workshop-ceremony,.workshop-ceremony .workshop-result {animation:none;}
 .workshop-drum-progress i {animation:none;transform:scaleX(1);}
}

/* Gold sparkle burst is reserved for a high random score. */
.workshop-ceremony[data-tier="excellent"] .workshop-ceremony-card::after {
 content:"✦　✧　★　✦　✧";position:absolute;inset:18% 5% auto;z-index:3;pointer-events:none;
 text-align:center;white-space:nowrap;overflow:hidden;letter-spacing:.4em;color:#ffe18a;font-size:clamp(14px,2vw,27px);
 text-shadow:0 0 10px #ffe18a;animation:workshop-sparkles 1.2s ease-out both;
}
@keyframes workshop-sparkles {from{opacity:0;transform:translateY(13px) scale(.5)} 35%{opacity:1}to{opacity:0;transform:translateY(-40px) scale(1.25)}}
@media(prefers-reduced-motion:reduce){.workshop-ceremony[data-tier="excellent"] .workshop-ceremony-card::after{animation:none;opacity:.4;transform:none;}}


/* Phase 5: full-size entry conversation, separate from the right-hand scroll area. */
.workshop-progress-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.workshop-progress-row .workshop-progress {margin:0;}
.workshop-talk-again {border:1px solid #a98a5e;border-radius:99px;padding:7px 11px;
  background:#fff2d6;color:#593d24;font-weight:850;font-size:12px;cursor:pointer;}
.workshop-dialogue.hidden {display:none!important;}
.workshop-greeting.hidden,.workshop-greeting .hidden {display:none!important;}
.workshop-greeting {position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at center,rgba(16,22,29,.78),rgba(4,9,16,.94));
  backdrop-filter:blur(5px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
.workshop-greeting-card {width:min(790px,100%);max-height:calc(100dvh - 24px);box-sizing:border-box;
  display:flex;flex-direction:column;overflow:auto;min-width:0;min-height:0;
  background:linear-gradient(145deg,#473324,#2b2526 65%,#202936);color:#fff6e5;
  border:2px solid #eac27b;border-radius:22px;box-shadow:0 0 0 5px #eac27b1a,0 22px 70px #000b;}
.workshop-greeting-heading {display:flex;align-items:center;gap:8px;padding:13px 16px 3px;}
.workshop-greeting-eyebrow {font-size:clamp(10px,1.45vw,13px);letter-spacing:.1em;color:#ffe2a9;font-weight:900;}
.workshop-greeting-close {margin-left:auto;min-width:39px;min-height:39px;border-radius:50%;
  border:1px solid #c9a677;background:#69503b;color:white;font-size:24px;cursor:pointer;}
.workshop-greeting-body {display:grid;grid-template-columns:minmax(110px,.35fr) minmax(0,1fr);
  align-items:center;gap:12px;padding:0 24px 9px 16px;min-height:0;}
.workshop-greeting-person {display:block;width:100%;max-height:min(43dvh,280px);object-fit:contain;
  object-position:center bottom;filter:drop-shadow(0 8px 9px #0008);}
.workshop-greeting-copy {min-width:0;}
.workshop-greeting-copy h3 {margin:0 0 11px;font-size:clamp(19px,2.7vw,27px);color:#ffdc95;}
.workshop-greeting-text {margin:0 0 13px;font-size:clamp(18px,2.35vw,23px);font-weight:750;
  line-height:1.65;min-height:5.0em;overflow-wrap:anywhere;}
.workshop-greeting-quest {margin:0;padding:11px 12px;border-radius:10px;
  color:#392614;background:#ffe3a0;font-weight:900;font-size:clamp(15px,1.85vw,19px);}
.workshop-greeting-hint {margin:9px 0 0;color:#f1d9b7;font-size:clamp(12px,1.4vw,14px);line-height:1.5;}
.workshop-greeting-actions {display:flex;gap:8px;align-items:center;justify-content:flex-end;
  flex-wrap:wrap;padding:12px 16px 17px;}
.workshop-greeting-actions button {border-radius:10px;padding:10px 13px;min-height:42px;
  cursor:pointer;font-weight:800;line-height:1.3;}
.workshop-greeting-sound,.workshop-greeting-skip {background:#524c4d;border:1px solid #ac8e6b;color:#fff4db;font-size:12px;}
.workshop-greeting-go {background:#ffda89;border:1px solid #eac074;color:#362517;font-size:clamp(13px,1.6vw,16px);}
@media(max-width:600px) {
  .workshop-greeting {padding:7px;}
  .workshop-greeting-card {max-height:calc(100dvh - 14px);border-radius:15px;}
  .workshop-greeting-heading {padding:7px 9px 0;}
  .workshop-greeting-eyebrow {font-size:9px;letter-spacing:.02em;}
  .workshop-greeting-close {min-width:34px;min-height:34px;}
  .workshop-greeting-body {grid-template-columns:minmax(72px,.27fr) minmax(0,1fr);gap:7px;padding:2px 10px 5px;}
  .workshop-greeting-person {max-height:160px;}
  .workshop-greeting-copy h3 {font-size:18px;margin-bottom:6px;}
  .workshop-greeting-text {font-size:clamp(15px,4vw,19px);line-height:1.55;min-height:0;margin-bottom:8px;}
  .workshop-greeting-quest {font-size:14px;padding:7px 8px;}
  .workshop-greeting-hint {font-size:11px;margin-top:5px;}
  .workshop-greeting-actions {padding:6px 9px 10px;gap:5px;}
  .workshop-greeting-actions button {padding:7px 9px;min-height:35px;font-size:11px;}
  .workshop-greeting-go {font-size:13px!important;flex:1 0 55%;}
}
@media(max-height:480px) and (orientation:landscape) {
  .workshop-greeting-heading {padding:4px 8px 0;}
  .workshop-greeting-body {grid-template-columns:95px minmax(0,1fr);gap:6px;padding:0 9px 2px;}
  .workshop-greeting-person {max-height:125px;}
  .workshop-greeting-copy h3 {font-size:17px;margin-bottom:3px;}
  .workshop-greeting-text {font-size:15px;line-height:1.35;min-height:0;margin:0 0 4px;}
  .workshop-greeting-quest {font-size:13px;padding:4px 7px;}
  .workshop-greeting-hint {font-size:10px;margin:3px 0;}
  .workshop-greeting-actions {padding:4px 9px 6px;gap:6px;}
  .workshop-greeting-actions button {min-height:31px;padding:4px 9px;}
}
@media(prefers-reduced-motion:reduce) {.workshop-greeting * {animation:none!important;transition:none!important;}}

.workshop-greeting-quest:not(.hidden) {animation:workshopQuestReveal .3s ease-out both;}
@keyframes workshopQuestReveal {from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce) {.workshop-greeting-quest {animation:none!important;}}

/* The scoring meter conveys the actively playing drumroll. Keep this specific
   short, user-initiated feedback moving even when reduced motion is requested.
   The remaining workshop animations continue to honor reduced-motion rules. */