/* Design system v8: shared defaults; the site own CSS comes after. */
:root{--ink:#35113A;--ink-soft:#71406D;--ground:#FFF5FC;--surface:#FFFFFF;--line:#F1B9DD;--accent:#DB2777;--accent-ink:#FFFFFF;--focus:#9D174D;--star:#BC9A4E;--star-hot:#F2B10A;--card-radius:1.8rem .7rem 1.8rem .7rem;--card-shadow:0 10px 0 rgba(190,24,93,.18);--display-face:system-ui,sans-serif}
:root[data-theme="dark"]{--ink:#F8FAFC;--ink-soft:#D1D9E6;--ground:#260D2C;--surface:#38113E;--line:#9A68A0;--accent:#F9A8D4;--accent-ink:#35103A;--focus:#FDA4AF;--star:#C9A24A;--star-hot:#FCD34D}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#F8FAFC;--ink-soft:#D1D9E6;--ground:#260D2C;--surface:#38113E;--line:#9A68A0;--accent:#F9A8D4;--accent-ink:#35103A;--focus:#FDA4AF;--star:#C9A24A;--star-hot:#FCD34D}}
body{background:var(--ground);color:var(--ink)} a{color:var(--accent)} h1,h2{font-family:var(--display-face)} .brand{display:inline-flex;align-items:center;gap:.5rem}.site-logo{width:2rem;height:2rem;fill:none;stroke:var(--logo);stroke-width:2.4;flex:none}.card,.guide-list>li{border-radius:var(--card-radius);box-shadow:var(--card-shadow)}.card-icon,.section-icon{width:1.6rem;height:1.6rem;vertical-align:middle;margin-right:.55rem;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}.card-icon{float:left;margin-top:.1rem}.section-icon{width:1.3rem;height:1.3rem}.design-figure{display:flex;align-items:center;gap:1rem;padding:1rem;margin:1.5rem 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius)}.design-figure svg{width:88px;height:60px;stroke:var(--accent);fill:none;stroke-width:2}.rating{margin:2rem 0;padding:1rem;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}.rating-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:.25rem 0 1rem;padding:0;border:0;background:none}.rating-top .rating-status{margin:0;font-size:.95rem}.rating-top button{width:34px;height:34px;padding:4px}.rating-stars{display:flex;gap:.25rem}.rating button{width:44px;height:44px;padding:8px;background:transparent;color:var(--star);border:0;cursor:pointer;transition:color .12s ease}.rating button:hover,.rating button:focus-visible{color:var(--star-hot)}.rating-stars:hover button{color:var(--star-hot)}.rating-stars button:hover~button{color:var(--star)}.rating button[disabled]{cursor:default}.rating button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.rating svg{width:100%;height:100%;fill:currentColor}.rating-status{color:var(--ink-soft)}button:hover,.card:hover{filter:brightness(.96)}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.reviews{padding:8px 0 48px}
.reviews-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:24px}
.reviews-head h2{margin:0;font-family:var(--display-face);font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.03em}
.reviews-summary{margin:0;color:var(--ink-soft);font-size:15px;font-variant-numeric:tabular-nums}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.review-card{display:flex;flex-direction:column;gap:12px;margin:0;padding:22px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface);box-shadow:var(--card-shadow)}
.review-stars{font-size:15px;letter-spacing:2px;line-height:1}
.review-stars .on{color:var(--star-hot)}
.review-stars .off{color:var(--line)}
.review-card blockquote{margin:0;color:var(--ink);font-size:15px;line-height:1.55}
.review-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px;color:var(--ink-soft);font-size:13px}
.review-avatar{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;border-radius:50%;color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em}
.review-who{display:flex;min-width:0;flex-direction:column}
.review-who strong{color:var(--ink);font-size:14px}
.review-card figcaption time{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.reviews+.rating{margin-top:0}
@media(max-width:520px){.review-grid{grid-template-columns:minmax(0,1fr)}.review-card figcaption time{display:none}}

.review-form-wrap{max-width:720px;margin:32px auto 0;padding:24px;border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
.review-form-wrap h3{margin:0 0 6px;font-family:var(--display-face);font-size:20px}
.review-form-lede{margin:0 0 20px;color:var(--ink-soft);font-size:14px}
.review-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end}
#review-form label{display:block;margin-top:16px;font-size:14px;font-weight:700;color:var(--ink)}
.review-form-row label{margin-top:0}
#review-form input[type=text],#review-form textarea{box-sizing:border-box;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--card-radius)/2);background:var(--ground);color:var(--ink);font:inherit}
#review-form textarea{min-height:110px;resize:vertical}
.review-rating-label{display:block;color:var(--ink-soft);font-size:14px;font-weight:650}
.review-input-stars{display:flex;gap:2px;margin-top:6px}
.review-input-stars button{min-height:40px;width:36px;padding:0;border:0;background:transparent;color:var(--line);font-size:22px;cursor:pointer}
.review-input-stars button.on{color:var(--star-hot)}
.review-form-hint{margin:8px 0 0;color:var(--ink-soft);font-size:13px}
.review-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.review-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.review-form-foot button{min-height:44px;padding:0 18px;border:0;border-radius:calc(var(--card-radius)/2);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;cursor:pointer}
.review-form-foot button[disabled]{opacity:.6;cursor:default}
.review-status{margin:0;color:var(--ink-soft);font-size:14px}
@media(max-width:560px){.review-form-row{grid-template-columns:1fr}}

/* DiceDecide: tactile game-table rhythm with accessible pink and gold cues. */
body{background:radial-gradient(circle at 12% 0,#fff 0,transparent 26rem),var(--ground)}
header{min-height:72px;border-bottom:1px solid var(--line)}
header nav a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .7rem;border-radius:.8rem;font-weight:700}
header nav a:hover{background:var(--surface)}
.menu-toggle{display:none;min-width:44px;min-height:44px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.panel{border-color:var(--line);border-radius:var(--card-radius)}
.tool-panel{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 78%,var(--accent) 22%));overflow:hidden}
.tool-panel>p{max-width:62ch;color:var(--ink-soft)}
.calculator-form .actions button{min-height:52px;min-width:9rem;border-radius:1rem;box-shadow:0 6px 0 #9D174D;transition:transform .12s ease,box-shadow .12s ease}
.calculator-form .actions button:hover{transform:translateY(-2px);box-shadow:0 8px 0 #9D174D}
.calculator-form .actions button:active{transform:translateY(4px);box-shadow:0 2px 0 #9D174D}
.result{background:#FFF0F8;color:var(--ink);border:2px solid #E8A3CB;border-radius:1.35rem;box-shadow:inset 0 0 0 5px #FFF8FC}
.result>span{color:#71406D;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.result strong{color:#9D174D;font-size:clamp(2.8rem,10vw,5.4rem);line-height:1;margin:.15em 0}
.result .facts{border-top:1px dashed #D98ABB;padding-top:.8rem}
.result .facts small{display:block;color:#71406D;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.result .facts span{color:#35113A}
.dice-stage{min-height:150px;margin:.5rem 0 1rem;padding:.65rem;background:linear-gradient(135deg,#FFF0F8,#FCE1F0);border:1px dashed #D95A9D;border-radius:1.5rem}
.drawn-die{width:132px;height:132px;overflow:visible}
.die-shadow{fill:#9D174D;opacity:.22}.die-face{fill:#DB2777;stroke:#9D174D;stroke-width:3}.die-shine{fill:none;stroke:#F9A8D4;stroke-width:5;stroke-linecap:round;opacity:.8}
.die-number{fill:#FFF8FC;font-size:3rem;font-weight:900}.die-kind{fill:#FFE38A;font-size:.9rem;font-weight:900;letter-spacing:.12em}
.dice-stage.is-rolling .drawn-die{animation:dice-toss .48s cubic-bezier(.2,.8,.3,1)}
@keyframes dice-toss{0%{transform:translateY(0) rotate(0)}45%{transform:translateY(-18px) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}
.dice-switcher,.dice-family{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:.45rem;margin-top:1.2rem}
.dice-switcher a,.dice-family a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:.4rem;border:1px solid #D98ABB;border-radius:.9rem;background:var(--surface);color:var(--accent);font-weight:850;text-decoration:none}
.dice-switcher a:hover,.dice-family a:hover{background:#FFF0F8;border-color:var(--accent)}
.drawn-coin{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#DB2777;color:#FFF8FC;border:7px double #FFE38A;box-shadow:0 8px 0 #9D174D;font-size:3rem;font-weight:900}
.drawn-coin.is-flipping{animation:coin-flip .5s ease}
@keyframes coin-flip{50%{transform:translateY(-14px) rotateY(180deg)}}
.consent{position:relative;margin-top:1rem;box-shadow:none;border:1px solid var(--line);border-radius:1.2rem}
@media(max-width:620px){
 header{position:relative;flex-direction:row;align-items:center;padding:10px 0;min-height:64px}
 .brand{font-size:1.08rem}
 .menu-toggle{display:inline-grid;place-items:center;margin-left:auto}
 header>nav{display:none;position:absolute;top:58px;left:0;right:0;z-index:40;padding:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--card-shadow);grid-template-columns:1fr 1fr;gap:.35rem}
 header.nav-open>nav{display:grid}
 main{padding-top:12px}
 .breadcrumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:10px}
 .tool-panel{padding:16px}
 .tool-panel h1{font-size:1.8rem}
 .tool-panel>p{font-size:.94rem;margin:.35rem 0 .65rem}
 .dice-stage{min-height:122px}
 .drawn-die{width:108px;height:108px}
 form .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 input{padding:10px}
 .actions{margin-top:12px}
 .calculator-form .actions button{width:100%}
 .result{margin-top:18px;padding:15px}
 .result strong{font-size:3.2rem}
 .facts{grid-template-columns:1fr 1fr}
 .dice-switcher,.dice-family{grid-template-columns:repeat(4,minmax(44px,1fr))}
 .consent{align-items:stretch}
}

/* DiceDecide own face on top of the shared layer. The shared defaults sit in
   @layer shared and are weaker by cascade order, so nothing here needs
   !important. The review-wall rules live in the shared layer - every site that
   renders a wall gets them; only what is specific to this site belongs here. */

/* The wall and the rating widget close the home page together: the design
   layer appends .rating as the last block of <main>. */
.reviews ~ .rating { margin-top: 0; }