/* Chaos Machine (lab): the Goblin's workshop - stats, goal, machine, merchant, vault, recipes - on top of
   hanzo.css / lab.css. */
.chaos { --cm-gold: #ffd94a; --cm-blue: #8ac4ff; --cm-exc: #19c81c; --cm-anc: #01df77; --cm-wing: #e7c3ff; --cm-violet: #8f6bff; }
.chaos .is-gold { color: var(--cm-gold); }
.chaos .is-blue { color: var(--cm-blue); }
.chaos .is-exc { color: var(--cm-exc); }
.chaos .is-anc { color: var(--cm-anc); }
.chaos .is-wings { color: var(--cm-wing); }
.chaos .is-poor { color: #ff8a8a; }

/* start menu over the machine art */
.chaos__menu { background: #0b0a08 center / cover no-repeat; }
.chaos__menu .hanzo__menubox { background: radial-gradient(ellipse at center, rgba(8, 7, 5, .86) 35%, rgba(8, 7, 5, .45) 80%); }
.chaos__howend { margin: 4px 2px 0; }
.chaos__zenpic { display: grid; place-items: center; font-weight: 900; color: var(--cm-gold); font-size: 13px; }

/* layout */
.chaos__game { display: flex; flex-direction: column; gap: 14px; }
.chaos__main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.chaos__machinecol, .chaos__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chaos h3 { margin: 12px 0 8px; font-size: 15px; }
.chaos__small { font-size: 12px; margin: 4px 0 0; }

/* stats */
.chaos__stats { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 12px; align-items: end; }
.chaos__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chaos__stat b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chaos__stat small { font-size: 12px; }
.chaos__zen { font-size: 34px; font-weight: 900; color: var(--cm-gold); font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(255, 217, 74, .25); }

/* the Goblin's goal */
.chaos__goal { border-color: rgba(255, 217, 74, .45); background: linear-gradient(180deg, rgba(255, 217, 74, .08), rgba(0, 0, 0, 0)); }
.chaos__goalhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; }
.chaos__goaltitle { display: block; font-size: 19px; margin: 4px 0; }
.chaos__goal p { margin: 0; line-height: 1.45; }
.chaos__reward { color: var(--cm-gold); font-weight: 800; }

/* the machine */
.chaos__machine { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--hz-line); border-radius: 14px;
    background: radial-gradient(circle at 50% 50%, rgba(120, 90, 255, .25), rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .55) 80%), var(--cm-bg) center / cover no-repeat, #0b0a08; }
.chaos__rune { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none;
    border: 2px dashed rgba(231, 190, 106, .35); box-shadow: 0 0 40px rgba(143, 107, 255, .25), inset 0 0 40px rgba(143, 107, 255, .2);
    background: conic-gradient(from 0deg, rgba(143, 107, 255, 0), rgba(143, 107, 255, .18), rgba(255, 217, 74, .12), rgba(143, 107, 255, 0)); animation: cm-spin 24s linear infinite; }
.chaos__machine.is-empty .chaos__rune { opacity: .35; }
.chaos__core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; text-align: center; width: 100%; box-sizing: border-box; }
.chaos__emptytext { max-width: 280px; margin: 0; font-weight: 700; text-shadow: 0 2px 6px #000; }
.chaos__slot { position: relative; width: 140px; height: 160px; display: grid; place-items: center; border: 1px solid rgba(231, 190, 106, .55); border-radius: 14px;
    background: radial-gradient(circle at 50% 55%, rgba(231, 190, 106, .18), rgba(0, 0, 0, .55) 72%); box-shadow: 0 0 24px rgba(0, 0, 0, .6); }
.chaos__slot img { max-width: 78%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.chaos__slot.is-gold { box-shadow: 0 0 22px rgba(255, 217, 74, .35); }
.chaos__slot.is-exc { box-shadow: 0 0 22px rgba(25, 200, 28, .35); }
.chaos__slot.is-anc { box-shadow: 0 0 22px rgba(1, 223, 119, .35); }
.chaos__slot.is-wings { box-shadow: 0 0 22px rgba(143, 107, 255, .5); }
.chaos__biglvl { position: absolute; top: 6px; left: 8px; font-size: 22px; font-weight: 900; color: #2a1d06; background: linear-gradient(180deg, #ffe39a, #d9a441); padding: 0 8px; border-radius: 7px; }
.chaos__bigname { font-size: 19px; font-weight: 800; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.chaos__iname { font-weight: 700; }

/* the roll: shake and spin while the server answers, then a flash */
.chaos__machine.is-working .chaos__rune { animation-duration: .7s; border-color: rgba(255, 217, 74, .8); box-shadow: 0 0 60px rgba(143, 107, 255, .7), inset 0 0 60px rgba(255, 217, 74, .35); }
.chaos__machine.is-working .chaos__slot { animation: cm-shake .18s linear infinite; }
.chaos__machine.is-working .chaos__slot img { filter: drop-shadow(0 0 14px rgba(160, 120, 255, .95)) brightness(1.3); }
.chaos__machine.is-tick .chaos__slot { animation: cm-pop .3s ease-out; }
.chaos__machine.is-win .chaos__slot { animation: cm-win .9s ease-out; }
.chaos__machine.is-fail .chaos__slot { animation: cm-fail .7s ease-out; }
.chaos__machine.is-burn .chaos__core { animation: cm-burn 1.2s ease-out; }
.chaos__fx { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.chaos__fxtext { font-size: clamp(28px, 5vw, 48px); font-weight: 900; letter-spacing: .02em; text-shadow: 0 4px 18px rgba(0, 0, 0, .95); animation: cm-rise 1.5s ease-out forwards; text-align: center; }
.chaos__fxtext.is-win { color: #ffe39a; }
.chaos__fxtext.is-fail { color: #ff9d9d; }
.chaos__fxtext.is-burn { color: #ff6a3d; }
.chaos__machine.is-win::after, .chaos__machine.is-burn::after, .chaos__machine.is-fail::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: cm-flash 1s ease-out forwards; }
.chaos__machine.is-win::after { background: radial-gradient(circle, rgba(255, 220, 120, .65), rgba(255, 220, 120, 0) 60%); }
.chaos__machine.is-fail::after { background: radial-gradient(circle, rgba(255, 90, 90, .45), rgba(255, 90, 90, 0) 60%); }
.chaos__machine.is-burn::after { background: radial-gradient(circle, rgba(255, 120, 40, .8), rgba(120, 20, 0, 0) 65%); }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@keyframes cm-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-2deg); } 50% { transform: translate(2px, -2px) rotate(1deg); } 75% { transform: translate(-1px, 2px) rotate(2deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes cm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cm-win { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 60px rgba(255, 220, 120, .9); } 100% { transform: scale(1); } }
@keyframes cm-fail { 0%, 40% { transform: translateX(-6px); } 20%, 60% { transform: translateX(6px); } 100% { transform: none; } }
@keyframes cm-burn { 0% { filter: none; } 30% { filter: brightness(2) sepia(1) hue-rotate(-30deg); transform: scale(1.05); } 100% { filter: none; transform: none; } }
@keyframes cm-rise { 0% { opacity: 0; transform: translateY(20px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes cm-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .chaos__rune, .chaos__machine * { animation: none !important; }
}
.chaos.is-busy .chaos__step, .chaos.is-busy .chaos__side, .chaos.is-busy .chaos__shop, .chaos.is-busy .chaos__recipes { pointer-events: none; opacity: .8; }

/* the next step */
.chaos__step { display: flex; flex-direction: column; gap: 10px; }
.chaos__steprow { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.chaos__steprow--small { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); flex-wrap: wrap; }
.chaos__steptext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.chaos__steptitle { font-size: 17px; }
.chaos__steptext .hanzo__bad, .chaos__steptext .hanzo__good { margin: 0; font-size: 13px; }
.chaos__cost { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
.chaos__chance { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; height: 62px; border-radius: 12px; border: 2px solid; background: rgba(0, 0, 0, .35); }
.chaos__chance b { font-size: 24px; line-height: 1; }
.chaos__chance small { font-size: 11px; color: var(--muted); }
.chaos__chance.is-good { border-color: #4ee36b; color: #4ee36b; }
.chaos__chance.is-mid { border-color: #ffd94a; color: #ffd94a; }
.chaos__chance.is-low { border-color: #ff6b6b; color: #ff6b6b; }
.chaos__boosts { display: flex; flex-wrap: wrap; gap: 8px; }
.chaos__boost { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--hz-line); border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: 13px; cursor: pointer; }
.chaos__boost img { width: 22px; height: 22px; object-fit: contain; }
.chaos__boost input { accent-color: #e3a63c; }
.chaos__stepper { width: 26px; height: 26px; border: 1px solid var(--hz-line); border-radius: 6px; background: #2a1f0c; color: var(--text); cursor: pointer; font-weight: 800; }
.chaos__stepper:disabled { opacity: .35; cursor: default; }
.chaos__stepbtns { display: flex; flex-direction: column; gap: 6px; }
.chaos__stepbtns .hanzo__btn--big { width: 100%; font-size: 17px; padding: 12px 20px; }
.chaos__stepbtns p { margin: 0; font-size: 13px; }
.chaos__steprow--small .chaos__stepbtns { flex-basis: 100%; }
.chaos__bankbtns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }

/* chips */
.chaos__gem { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.chaos__gem img { width: 20px; height: 20px; object-fit: contain; }
.chaos__gem.is-poor { color: #ff8a8a; }
.chaos__otags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.chaos__otags i { font-style: normal; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .15); color: var(--muted); }
.chaos__otags i.is-blue { color: var(--cm-blue); border-color: rgba(138, 196, 255, .4); }
.chaos__otags i.is-exc { color: var(--cm-exc); border-color: rgba(25, 200, 28, .45); }
.chaos__otags i.is-anc { color: var(--cm-anc); border-color: rgba(1, 223, 119, .45); }

/* tiles */
.chaos__tile { position: relative; flex: none; width: 50px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(231, 190, 106, .35); border-radius: 8px;
    background: radial-gradient(circle at 50% 55%, rgba(231, 190, 106, .13), rgba(0, 0, 0, .35) 70%); box-sizing: border-box; }
.chaos__tile img { max-width: 80%; max-height: 80%; object-fit: contain; pointer-events: none; }
.chaos__tile .hanzo__lvl { top: 2px; left: 2px; font-size: 10px; padding: 0 4px; }
.chaos__tile.is-exc { border-color: rgba(25, 200, 28, .55); }
.chaos__tile.is-anc { border-color: rgba(1, 223, 119, .6); }
.chaos__tile.is-wings { border-color: rgba(231, 195, 255, .6); box-shadow: 0 0 10px rgba(143, 107, 255, .35); }
.chaos__tile--big { width: 64px; height: 76px; }
.chaos__wtag { left: auto !important; right: 2px; background: linear-gradient(180deg, #e7c3ff, #8f6bff) !important; }
.chaos__excdot { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cm-exc); box-shadow: 0 0 6px var(--cm-exc); }

/* tooltips: the MU item card */
.chaos__tip { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 13px; line-height: 1.35; }
.chaos__tip .chaos__iname { font-size: 14px; margin-bottom: 4px; }
.chaos__tline { color: var(--text); }
.chaos__tsep { width: 80%; height: 1px; margin: 4px 0; background: rgba(255, 255, 255, .1); }
.chaos__tip .hanzo__tiprow { text-align: left; }
.chaos .hanzo__itemtip { max-width: 300px; }

/* jewel box */
.chaos__stash { display: flex; flex-wrap: wrap; gap: 8px; }
.chaos__stash > p { margin: 0; }
.chaos__jewel { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border: 1px solid var(--hz-line); border-radius: 10px; background: rgba(0, 0, 0, .3); cursor: help; flex: none; }
.chaos__jewel img { width: 30px; height: 30px; object-fit: contain; }
.chaos__jewel b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* vault */
.chaos__vault { display: flex; flex-direction: column; gap: 8px; }
.chaos__vault > p { margin: 0; }
.chaos__vrow { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); flex-wrap: wrap; }
.chaos__vbody { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.chaos__vbody .chaos__otags { justify-content: flex-start; }
.chaos__vbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.chaos__vbtns .hanzo__btn, .chaos__bankbtns .hanzo__btn, .chaos__matbtns .hanzo__btn, .chaos__offer .hanzo__btn { padding: 5px 10px; font-size: 13px; }

/* merchant */
.chaos__mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.chaos__mat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.chaos__matbody { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.chaos__matbtns { display: flex; gap: 4px; margin-left: auto; }
.chaos__matnote { margin: 6px 0 0; font-size: 12px; }
.chaos__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chaos__offer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--hz-line); border-radius: 12px; background: rgba(14, 12, 9, .6); text-align: center; }
.chaos__offer .chaos__iname { font-size: 13px; line-height: 1.25; }

/* recipes */
.chaos__recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.chaos__recipes > p { grid-column: 1 / -1; margin: 0; }
.chaos__recipe { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--hz-line); border-radius: 10px; background: rgba(0, 0, 0, .25); min-width: 0; }
.chaos__recipe p { margin: 0; }
.chaos__rhead { display: flex; align-items: center; gap: 8px; }
.chaos__rhead img { width: 36px; height: 36px; object-fit: contain; }
.chaos__rhead b { flex: 1; }
.chaos__server { font-size: 12px; white-space: nowrap; }
.chaos__results { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.chaos__rres img { width: 28px; height: 28px; object-fit: contain; }
.chaos__rrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.chaos__rrowtext { font-size: 13px; }
.chaos__rrowtext.is-poor { color: #ff8a8a; }
.chaos__rpick { display: flex; flex-wrap: wrap; gap: 6px; }
.chaos__pickitem { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; min-width: 62px; border: 2px solid transparent; border-radius: 10px; cursor: pointer; font-size: 11px; white-space: nowrap; }
.chaos__pickitem.is-sel { border-color: #8ab4ff; box-shadow: 0 0 10px rgba(138, 180, 255, .45); }
.chaos__pickitem input { position: absolute; opacity: 0; pointer-events: none; }
.chaos__opt { cursor: pointer; padding: 2px 6px; border: 1px dashed var(--hz-line); border-radius: 8px; }
.chaos__rfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.chaos__rfoot .chaos__chance { height: 46px; min-width: 64px; }
.chaos__rfoot .chaos__chance b { font-size: 18px; }
.chaos__rbtn { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.chaos__rbtn p { margin: 0; font-size: 12px; }

/* help */
.chaos__help summary { cursor: pointer; list-style: none; }
.chaos__help summary::-webkit-details-marker { display: none; }
.chaos__help summary h2 { display: inline; }
.chaos__help summary::after { content: " ▾"; color: var(--muted); }
.chaos__help[open] summary::after { content: " ▴"; }
.chaos__help ul { margin: 8px 0; padding-left: 20px; line-height: 1.55; }
.chaos__help li { margin: 3px 0; }

/* the site styles form inputs as text fields: the checkboxes get their plain look back */
.chaos .chaos__boost input[type="checkbox"], .chaos .chaos__opt input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; flex: none; }

@media (max-width: 1000px) {
    .chaos__main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .chaos__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chaos__stat--zen { grid-column: 1 / -1; }
    .chaos__zen { font-size: 28px; }
    .chaos__machine { min-height: 250px; }
    .chaos__rune { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
    .chaos__slot { width: 110px; height: 126px; }
    .chaos__mats, .chaos__recipes { grid-template-columns: 1fr; }
    .chaos__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chaos__steprow { flex-wrap: wrap; }
}