/* A change of portfolio, printed beneath the original that remains unchanged. */
#website.society-experience #reroll-guide{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:48px 9%;align-items:center;background:var(--paper)}
#website.society-experience #reroll-guide h2{font-size:clamp(44px,5.3vw,84px);max-width:9ch}
#reroll-guide .reroll-copy>p{max-width:39ch}
#reroll-guide .reroll-switch{border:1px solid var(--ink);max-width:390px;padding:4px;gap:4px;margin:28px 0 18px}
#reroll-guide .reroll-switch button{font-size:14px;min-height:46px}
#reroll-guide .reroll-switch button:hover{background:#eae8e5}
#reroll-guide .reroll-switch button[aria-pressed=true]{background:var(--ink);color:var(--lemon)}
#website.society-experience #roll-explanation{min-height:48px;font-size:15px}
#website.society-experience #replay-roll{background:var(--lemon);border:0;padding:15px 18px;min-height:50px;justify-content:space-between;width:100%;max-width:390px;font-weight:700;margin-bottom:12px}
#website.society-experience #replay-roll:hover{background:var(--ink);color:var(--lemon)}
#reroll-guide .reroll-machine{width:100%;max-width:520px;justify-self:center;position:relative;padding:24px 26px 20px;background:#eae8e5;transform:rotate(2deg)}
#reroll-guide .roll-identity{display:flex;align-items:center;gap:14px;padding-bottom:18px}
#reroll-guide .roll-identity img{width:64px;height:64px;object-fit:contain;border:4px solid #fff;transform:rotate(-5deg)}
#reroll-guide .roll-identity>div{display:grid;gap:6px}
#reroll-guide .roll-character{font:900 23px/1 var(--display);text-transform:uppercase}
#reroll-guide .roll-identity div span{font-size:12px}
#reroll-guide .roll-keep{font:24px/1 'Permanent Marker',cursive;margin-left:auto;transform:rotate(-8deg);background:var(--lemon);padding:8px 11px}
#reroll-guide .roll-paper{background:#fff;padding:20px 20px 14px;position:relative;box-shadow:3px 10px 18px #14120f13}
#reroll-guide .roll-paper::before{content:'';position:absolute;top:-4px;left:-7px;right:-7px;height:5px;background:var(--ink);border-radius:3px}
#reroll-guide .roll-paper-top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px dashed #b4b2af}
#reroll-guide .roll-paper-top b{font-size:13px}
#reroll-guide .roll-paper-top>span{font:10px/1 var(--mono);color:var(--muted)}
#reroll-guide .roll-window{height:338px;overflow:hidden;padding:8px 0;background:none;transform:none;box-shadow:none}
#reroll-guide .roll-reel{gap:0}
#reroll-guide .roll-reel>div{display:flex;min-height:53px;padding:10px 4px;border-bottom:1px solid #e3e1de;background:none;gap:14px}
#reroll-guide .roll-reel>div{transition:background-color .12s}
#reroll-guide .roll-reel>div.is-hit{background:var(--lemon);padding-left:10px;padding-right:10px}
/* A crypto pick: a light lemon wash and a small tag, like the crypto cards of the lineup machine. */
#reroll-guide .roll-reel>div.is-crypto{background:color-mix(in srgb,var(--lemon) 38%,#fff);box-shadow:inset 4px 0 var(--lemon);padding-left:12px;padding-right:10px}
#reroll-guide .roll-reel>div.is-crypto i{display:block;margin-top:4px;font:600 9px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
#reroll-guide .roll-reel b{font-size:32px}
#reroll-guide .roll-reel span{display:block;font-size:12px;max-width:18ch;text-align:right;line-height:1.25}
#reroll-guide .roll-cost{margin:0;padding-top:14px;border-top:1px dashed #b4b2af;gap:12px;align-items:center}
#reroll-guide .roll-cost strong{font-size:50px;min-width:1.55em;font-variant-numeric:tabular-nums}
#reroll-guide .roll-cost span{font-size:11px;max-width:12ch}
#reroll-guide .roll-cost .roll-currency{margin-left:auto;text-align:right;color:var(--muted)}
#website.society-experience #reroll-guide .roll-escalation{font-size:12px;line-height:1.6;margin:16px 0 0;color:var(--ink)}
#reroll-guide .reroll-routing{grid-column:1/-1;display:grid;grid-template-columns:25% 1fr;align-items:center;gap:35px;padding-top:30px;border-top:1px solid #ceccc9}
#reroll-guide .reroll-routing h3{font:900 34px/.98 var(--display);text-transform:uppercase;margin:0 0 10px}
#website.society-experience #reroll-guide .reroll-routing p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
#reroll-guide .flow-destinations{display:flex;gap:3px;align-items:stretch}
#reroll-guide .flow-destinations li{display:flex;flex-direction:column;flex:var(--share);align-items:flex-start;justify-content:space-between;gap:24px;min-width:0;min-height:133px;padding:16px 12px;background:#eae8e5}
#reroll-guide .flow-destinations li:first-child{background:var(--ink);color:#fff}
#reroll-guide .flow-destinations li:nth-child(2),#reroll-guide .flow-destinations li:nth-child(3){background:var(--lemon)}
#reroll-guide .flow-value{font-size:38px;min-width:0;white-space:nowrap;margin:0;font-variant-numeric:tabular-nums}
#reroll-guide .flow-value small{font-size:16px;margin-left:1px}
#reroll-guide .flow-destinations li>span:nth-child(2){font-size:12px;line-height:1.2}
#reroll-guide .flow-destinations i{display:none}
#reroll-guide .reroll-detail{margin:0!important}
@media(max-width:1100px){
  #website.society-experience #reroll-guide{gap:36px 6%}
  #reroll-guide .reroll-machine{padding:20px 18px}
  #reroll-guide .reroll-routing{grid-template-columns:1fr;gap:20px}
  #reroll-guide .reroll-routing>div{display:flex;justify-content:space-between;gap:24px;align-items:center}
  #reroll-guide .reroll-routing h3{margin:0}
  #reroll-guide .reroll-routing h3 br{display:none}
}
@media(max-width:700px){
  #website.society-experience #reroll-guide{grid-template-columns:1fr;gap:32px}
  #website.society-experience #reroll-guide h2{font-size:56px}
  #reroll-guide .reroll-copy,#reroll-guide .reroll-machine,#reroll-guide .reroll-routing{grid-column:1}
  #reroll-guide .reroll-machine{width:94%;padding:18px 16px;transform:rotate(1deg)}
  #reroll-guide .roll-paper{padding:17px 14px 14px}
  #reroll-guide .roll-identity{gap:10px}
  #reroll-guide .roll-identity img{width:55px;height:55px}
  #reroll-guide .roll-character{font-size:21px}
  #reroll-guide .roll-keep{font-size:20px;padding:7px 8px}
  #reroll-guide .roll-cost strong{font-size:43px}
  #reroll-guide .roll-reel b{font-size:30px}
  #reroll-guide .roll-reel span{font-size:11px}
  #reroll-guide .reroll-routing>div{display:block}
  #reroll-guide .reroll-routing h3{font-size:32px;margin-bottom:10px}
  #reroll-guide .flow-destinations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
  #reroll-guide .flow-destinations li{grid-column:span 2;min-height:106px;padding:14px;gap:14px}
  #reroll-guide .flow-destinations li:nth-child(n+4){grid-column:span 3;min-height:78px;flex-direction:row;align-items:center}
  #reroll-guide .flow-value{font-size:34px}
  #reroll-guide .flow-destinations li>span:nth-child(2){font-size:12px}
}

#website.society-experience #replay-roll:disabled{opacity:.55;cursor:progress}
#reroll-guide .roll-reset{display:inline;margin-left:6px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#reroll-guide .roll-reset:hover{text-decoration-color:var(--lemon);text-decoration-thickness:3px}
