/* Tinker's Workshop. Builds on shop/shop-common.css (colors, buttons,
   modals). Phone-friendly: one column, big tap targets. */

body{ min-height:100vh; }
.wsHeader{ background:var(--panel); border-bottom:1px solid var(--border); padding:16px 16px 0 16px; position:sticky; top:var(--tbh, 0px); z-index:40; }
.wsTitleRow{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; max-width:900px; margin:0 auto; flex-wrap:wrap; }
.wsHeader h1{ margin:0 0 2px 0; font-size:21px; }
.wsHeader p{ margin:0; color:var(--ink-soft); font-size:13px; }
.wsHeadActions{ display:flex; gap:8px; align-items:center; }
.wsHeadActions .iconBtn{ width:38px; height:38px; font-size:16px; }
.lockBtn{ height:38px; padding:0 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink); }
.lockBtn.unlocked{ border-color:#b5dcc6; background:#eef8f2; color:var(--ok); }
.wsTabs{ display:flex; gap:2px; max-width:900px; margin:12px auto 0 auto; overflow-x:auto; scrollbar-width:none; }
.wsTabs::-webkit-scrollbar{ display:none; }
.wsTabs button{ flex-shrink:0; padding:10px 14px; border:none; background:none; font-size:14px; font-weight:600; color:var(--ink-soft);
  border-bottom:3px solid transparent; cursor:pointer; }
.wsTabs button.on{ color:var(--accent); border-bottom-color:var(--accent); }
.wsMain{ max-width:900px; margin:0 auto; padding:16px 16px 80px 16px; }
.wsTab{ display:none; }
.wsTab.on{ display:block; }
.muted{ color:var(--ink-soft); }
.small{ font-size:12.5px; }
.note{ font-size:12.5px; color:var(--ink-soft); margin:6px 0 12px 0; line-height:1.5; }

/* Cards */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:12px; }
.card h3{ margin:0 0 4px 0; font-size:16.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card .meta{ font-size:12.5px; color:var(--ink-soft); }
.card .desc{ font-size:13.5px; line-height:1.55; margin:8px 0; }
.card .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.card .actions .btn{ padding:9px 14px; }
.emptySlot{ border-style:dashed; text-align:center; color:var(--ink-soft); padding:22px 16px; }
.pill{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--ink-soft); white-space:nowrap; }
.pill.clean{ color:var(--ok); border-color:#b5dcc6; background:#eef8f2; }
.pill.side{ color:#8a5a00; border-color:#ecd6a4; background:#fdf6e6; }
.pill.malf{ color:#b3261e; border-color:#e7b3ae; background:#fbeceb; }
.pill.tier{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.effectBox{ border-left:3px solid #ecd6a4; background:#fdf9ef; padding:8px 10px; border-radius:6px; margin:6px 0; font-size:13px; line-height:1.5; }
.effectBox.malf{ border-left-color:#e7b3ae; background:#fdf3f2; }
.effectBox b{ display:block; margin-bottom:2px; }
.effectBox.unknown{ border-left-color:var(--border); background:var(--bg); color:var(--ink-soft); }

/* Build list */
.filterBar{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.filterBar input[type=search]{ flex:1 1 220px; height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:var(--panel); font-size:15px; }
.filterBar select{ height:42px; }
.chipRow{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chipRow button{ padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:var(--panel); font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.chipRow button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.invRow{ background:var(--panel); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; }
.invRow summary{ list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:10px; }
.invRow summary::-webkit-details-marker{ display:none; }
.invRow summary .n{ flex:1 1 auto; font-weight:600; font-size:14.5px; min-width:0; }
.invRow summary .n small{ display:block; font-weight:400; color:var(--ink-soft); font-size:12px; margin-top:2px; }
.invRow .body{ padding:0 14px 14px 14px; }
.matList{ margin:8px 0; padding:0; list-style:none; }
.matList li{ display:flex; align-items:baseline; gap:8px; font-size:13.5px; padding:4px 0; border-bottom:1px dashed var(--border); }
.matList li:last-child{ border-bottom:none; }
.matList .ok{ color:var(--ok); font-weight:700; }
.matList .no{ color:#b3261e; font-weight:700; }
.matList .where{ color:var(--ink-soft); font-size:12px; margin-left:auto; text-align:right; }

/* Materials */
.biomeHead{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:16px 2px 6px 2px; }
.matRow{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:6px; flex-wrap:wrap; }
.matRow .n{ flex:1 1 180px; min-width:0; font-weight:600; font-size:14px; }
.matRow .n small{ display:block; font-weight:400; color:var(--ink-soft); font-size:12px; }
.qtyGroup{ display:flex; gap:10px; flex-wrap:wrap; }
.qty{ display:flex; align-items:center; gap:4px; font-size:12.5px; }
.qty .lbl{ color:var(--ink-soft); width:52px; text-align:right; }
.qty .v{ min-width:18px; text-align:center; font-weight:700; }
.qty button{ width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--bg); cursor:pointer; font-size:14px; line-height:1; }
.qty button:disabled{ opacity:.35; cursor:default; }

/* Forms / dialogs */
.wsModalBox{ max-width:560px; }
.formRow{ margin-bottom:12px; }
.formRow > label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:4px; }
.formRow select, .formRow input[type=number], .formRow input[type=text], .formRow input[type=password]{ width:100%; height:40px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); font-size:15px; }
.rollLine{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rollLine input[type=number]{ width:90px !important; font-size:18px !important; font-weight:700; text-align:center; }
.rollLine .btn{ height:40px; }
.flags{ display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.calc{ font-size:13px; background:var(--bg); border-radius:8px; padding:8px 10px; margin:8px 0; line-height:1.6; }
.result{ border-radius:10px; padding:12px 14px; margin:10px 0; font-size:14px; line-height:1.55; }
.result.good{ background:#eef8f2; border:1px solid #b5dcc6; }
.result.mid{ background:#fdf6e6; border:1px solid #ecd6a4; }
.result.bad{ background:#fbeceb; border:1px solid #e7b3ae; }
.result h4{ margin:0 0 4px 0; font-size:15px; }
.pickList{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pickList button{ text-align:left; padding:9px 12px; border-radius:9px; border:1px solid var(--border); background:var(--panel); cursor:pointer; font-size:13.5px; }
.pickList button:hover{ border-color:var(--accent); }
.pickList button.on{ border-color:var(--accent); background:var(--accent-soft); }

/* Collect */
.modeRow{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.modeRow button{ padding:9px 14px; border-radius:10px; border:1px solid var(--border); background:var(--panel); font-weight:600; font-size:13.5px; cursor:pointer; color:var(--ink-soft); }
.modeRow button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.suggest{ position:relative; }
.suggestList{ position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--panel); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:260px; overflow-y:auto; display:none; }
.suggestList.show{ display:block; }
.suggestList div{ padding:8px 12px; cursor:pointer; font-size:13.5px; border-bottom:1px solid var(--border); }
.suggestList div:hover{ background:var(--bg); }

/* Rules + log */
.rulesText h3{ margin:18px 0 6px 0; font-size:16px; }
.rulesText p, .rulesText li{ font-size:13.5px; line-height:1.55; }
.rulesText ul{ padding-left:20px; margin:4px 0 8px 0; }
.rulesTable{ width:100%; border-collapse:collapse; font-size:13px; margin:6px 0 12px 0; background:var(--panel); }
.rulesTable th, .rulesTable td{ border:1px solid var(--border); padding:6px 8px; text-align:left; vertical-align:top; }
.rulesTable th{ background:var(--bg); font-size:12px; }
.tableWrap{ overflow-x:auto; }
.logRow{ font-size:13px; padding:8px 0; border-bottom:1px solid var(--border); line-height:1.5; }
.logRow .at{ color:var(--ink-soft); font-size:11.5px; display:block; }
.logRow .dm{ color:var(--accent); font-weight:700; font-size:11px; margin-left:4px; }

.dmNote{ font-size:12.5px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:8px 12px; margin-bottom:12px; }
@media (max-width:560px){
  .wsHeader{ padding:12px 12px 0 12px; }
  .wsMain{ padding:12px 12px 80px 12px; }
  .lockBtn{ font-size:12px; padding:0 10px; }
  .qty .lbl{ width:auto; }
}

/* Browse + DM editor */
.dmBar{ margin:0 0 10px 0; display:flex; gap:8px; flex-wrap:wrap; }
.usedIn{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.usedIn b{ color:var(--ink); font-weight:600; }
.editBtn{ padding:5px 10px; border-radius:7px; border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; }
.ruleWarn{ font-size:12px; color:#8a5a00; background:#fdf6e6; border:1px solid #ecd6a4; border-radius:8px; padding:6px 10px; margin:6px 0; line-height:1.5; }
.ruleWarn ul{ margin:2px 0 0 0; padding-left:18px; }
.edMats{ display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.edMats .rollLine span{ flex:1 1 auto; font-size:13.5px; }
.formRow textarea{ width:100%; border-radius:8px; border:1px solid var(--border); background:var(--bg); padding:8px 10px; font:inherit; font-size:14px; }
.readonlyNote{ font-size:12.5px; color:#b3541e; }
.btn.danger{ color:#b3261e !important; border-color:#e7b3ae !important; }
.btn.danger:hover{ background:#fbeceb !important; }

/* Round 3: DM secrets, view as player, sound, filters, wizard */
.lockBtn.dmLabel{ cursor:default; border-color:#b5dcc6; background:#eef8f2; color:var(--ok); }
.viewAsBtn{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.viewAsBtn.on{ background:var(--accent); color:#fff; }
.asPlayerBanner{ max-width:900px; margin:10px auto 0 auto; font-size:12.5px; font-weight:600; color:#8a5a00; background:#fdf6e6; border:1px solid #ecd6a4; border-radius:9px; padding:7px 12px; }
.effectBox.untold{ outline:2px dashed #e0b44c; outline-offset:-2px; }
.toldToggle{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.pill.untoldPill{ color:#8a5a00; border-color:#e0b44c; background:#fff7e0; }
.lastUse{ font-size:12.5px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px; padding:6px 10px; margin:6px 0; }
.lastUse ul, .useLines{ margin:4px 0 0 0; padding-left:18px; line-height:1.5; }
.dmSecret{ font-size:12.5px; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:4px 8px; margin:6px 0 0 0; }
.result.boom{ animation:wsShake .5s; }
@keyframes wsShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px) rotate(-1deg); } 40%{ transform:translateX(6px) rotate(1deg); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
@media (prefers-reduced-motion: reduce){ .result.boom{ animation:none; } }

.inventBar{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px 0; }
.inventBar > .btn{ align-self:flex-start; }
.myProps{ display:flex; flex-direction:column; gap:6px; }
.myProp{ font-size:13px; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:7px 10px; }
.myProp.approved{ border-color:#b5dcc6; background:#eef8f2; }
.myProp.rejected{ border-color:#e7b3ae; background:#fdf3f2; }
.linkBtn{ border:none; background:none; color:var(--accent); text-decoration:underline; cursor:pointer; font-size:12.5px; padding:0 2px; }
#proposalsBtn.attention{ border-color:#e0b44c !important; background:#fff7e0 !important; color:#8a5a00 !important; }
.propBox{ font-size:13.5px; line-height:1.5; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.propBox p{ margin:0 0 4px 0; }

.biomePanel{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px 12px; margin:0 0 12px 0; }
.biomePanel > summary{ cursor:pointer; font-weight:700; font-size:13.5px; }
.biomePanel.filtered{ border-color:var(--accent); }
.biomeChips{ display:flex; flex-wrap:wrap; gap:6px; }
.biomeChips button{ padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.biomeChips button.has{ background:#fdf6e6; border-color:#e0b44c; color:#8a5a00; }
.biomeChips button b{ display:inline-block; min-width:18px; padding:0 5px; margin-left:2px; border-radius:999px; background:#e0b44c; color:#fff; font-size:11px; }
.biomeChips button.off{ opacity:.45; text-decoration:line-through; background:var(--bg); border-style:dashed; }
.biomeAll{ display:flex; gap:6px; margin-top:8px; }
.biomeAll .btn{ padding:5px 10px; font-size:12px; }
.sortRow{ display:flex; gap:6px; align-items:center; margin:0 0 10px 0; flex-wrap:wrap; }
.sortRow button{ padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel); font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.sortRow button.on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.reqBox{ font-size:13px; background:#fdf6e6; border:1px solid #ecd6a4; border-radius:10px; padding:8px 12px; margin:8px 0; }
.reqBox.ok{ background:#eef8f2; border-color:#b5dcc6; }
.reqBox .reqHead{ font-size:12.5px; color:var(--ink-soft); margin-bottom:2px; }
.reqBox ul{ list-style:none; margin:0; padding:0; line-height:1.7; }
.reqBox .ok{ color:var(--ok); font-weight:700; } .reqBox .no{ color:#b3261e; font-weight:700; }
.reqBiome{ margin-top:6px; padding-top:6px; border-top:1px dashed #ecd6a4; color:#8a5a00; }

.wzSteps{ display:flex; gap:6px; margin-bottom:8px; }
.wzSteps span{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:1px solid var(--border); color:var(--ink-soft); background:var(--bg); }
.wzSteps span.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.wzSteps span.done{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.wzTitle{ margin:0 0 6px 0; font-size:15px; }
.wzHelp{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px 0; }
.wzCheck{ align-items:flex-start !important; font-size:13px; line-height:1.45; margin:4px 0; }
.wzPower button{ line-height:1.4; }
.dcPicker{ display:flex; align-items:center; gap:12px; margin:4px 0 8px 0; }
.dcPicker .btn{ width:44px; height:40px; font-size:18px; padding:0; }
.dcVal{ font-size:18px; min-width:70px; text-align:center; }
.wzNear{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.5; }
.wzFilter{ margin-top:10px; }
.wzFilter .checkboxRow{ font-size:12.5px; }
.wzMatList{ display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:6px; background:var(--bg); }
.wzMatList button{ text-align:left; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel); cursor:pointer; font-size:13.5px; }
.wzMatList button:hover{ border-color:var(--accent); }
.wzMatList .ok{ color:var(--ok); font-weight:700; font-size:12px; }
@media (max-width:560px){ .wsHeadActions{ flex-wrap:wrap; justify-content:flex-end; } }
.sortRow[hidden], .inventBar[hidden], .asPlayerBanner[hidden], .dmBar[hidden], .viewAsBtn[hidden]{ display:none !important; }
.wsHeadActions[hidden], .wsTabs[hidden]{ display:none !important; }
.bands{ width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px; }
.bands th{ text-align:left; white-space:nowrap; padding:3px 10px 3px 0; font-weight:700; vertical-align:top; }
.bands td{ padding:3px 0; }
.bands tr.hit th, .bands tr.hit td{ color:var(--accent); background:var(--accent-soft); }
.asPlayerBanner{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.asPlayerBanner.live{ background:#fbeceb; border-color:#e7b3ae; color:#b3261e; }
.tryToggle{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tryToggle input{ width:34px; height:18px; appearance:none; -webkit-appearance:none; background:#d9d2b8; border-radius:999px; position:relative; cursor:pointer; transition:background .15s; margin:0; }
.tryToggle input::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
.tryToggle input:checked{ background:#b3261e; }
.tryToggle input:checked::after{ left:18px; }
.liveDot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-left:6px; vertical-align:middle; opacity:.7; }
.invRow.flash, .card.flash{ animation:wsFlash 1.2s; }
@keyframes wsFlash{ 0%{ box-shadow:0 0 0 3px var(--accent); } 100%{ box-shadow:0 0 0 0 transparent; } }
#wsToast{ max-width:calc(100% - 32px); width:max-content; border-radius:14px; text-align:center; line-height:1.4; z-index:1200; }
/* Round 5 */
.effectBox{ position:relative; }
.effRm{ position:absolute; top:6px; right:6px; border:1px solid var(--border); background:var(--panel); border-radius:6px; font-size:11px; padding:2px 6px; cursor:pointer; color:#b3261e; }
.effectBox .effRm + b{ padding-right:56px; }
.effectBox.cleanBox{ border-left-color:#b5dcc6; background:#eef8f2; }
.dmBtn{ color:var(--accent) !important; border-color:var(--accent) !important; }
.warnBox{ font-size:13.5px; line-height:1.5; background:#fbeceb; border:1px solid #e7b3ae; color:#8a1c14; border-radius:10px; padding:10px 12px; margin:0 0 12px 0; }
.btn.danger:not(.subtle){ background:#b3261e !important; border-color:#b3261e !important; color:#fff !important; }
.logHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.logHead .note{ flex:1 1 240px; }
/* Toasts wrap onto more lines instead of being cut off */
#wsToast{ left:16px !important; right:16px !important; width:auto !important; max-width:560px; margin:0 auto; transform:translateY(12px) !important;
  white-space:normal; overflow-wrap:anywhere; text-align:left; border-radius:14px; line-height:1.45; }
#wsToast.show{ transform:none !important; }
/* Round 6: bigger, clickable toasts; sticky proposal answers */
#wsToast{ font-size:15.5px; font-weight:600; padding:12px 18px; pointer-events:auto; cursor:pointer; }
.myProp{ display:flex; align-items:flex-start; gap:10px; }
.myPropText{ flex:1 1 auto; min-width:0; }
.readBtn{ flex-shrink:0; border:1px solid currentColor; background:var(--panel); border-radius:8px; padding:4px 10px; font-size:12.5px; font-weight:700; cursor:pointer; color:inherit; }
.myProp.approved{ color:#1f6b45; }
.myProp.rejected{ color:#8a1c14; }
.matLink{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.matLink:hover{ color:var(--accent); }
.matDesc{ font-size:14.5px; line-height:1.6; margin:0 0 10px 0; }

/* Material info: clickable "Used in" inventions, and the invention details */
.usedInList{ list-style:none; margin:0 0 10px 0; padding:0; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.usedInBtn{ border:none; background:none; padding:2px 0; font:inherit; font-weight:600; color:var(--accent); cursor:pointer; text-align:left; }
.usedInBtn:hover{ text-decoration:underline; text-underline-offset:3px; }
.usedInBtn.here{ color:var(--ink); cursor:pointer; }
#buildList details.flash{ animation: invFlash 1.8s ease; }
@keyframes invFlash{ 0%,40%{ box-shadow:0 0 0 3px var(--accent); background:var(--accent-soft); } 100%{ box-shadow:none; } }
.usedInLink{ cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.usedInLink:hover{ color:var(--accent); }