:root{color-scheme:light;--ink:#214c3f;--muted:#62766b;--paper:#faf8f0;--gold:#d9bd78;--line:#e1dfd0;--font:"Noto Sans Thai",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.6}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:disabled{cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible+span{outline:3px solid #bd812f;outline-offset:4px}.skip{position:absolute;top:-100px;left:12px;padding:12px;background:white;z-index:30}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{background:rgba(250,248,240,.97);border-bottom:1px solid var(--line)}.header-inner{max-width:1250px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19px 32px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:19px;font-weight:800;letter-spacing:1.5px}.brand-mark{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);width:45px;height:45px;border-radius:15px;font:700 30px Georgia,serif;letter-spacing:0}.brand-mark span{font-size:20px;color:var(--gold)}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:1px;color:#8e743c}.site-header nav{display:flex;gap:23px;font-size:13px;font-weight:600}.site-header nav a{padding:8px 0;text-decoration:none}.site-header nav a[aria-current]{border-bottom:2px solid #b29a57}
.page{max-width:1250px;margin:auto;padding:35px 32px 28px}.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:26px;padding:4px 0}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#917540;margin:0 0 9px}.intro h1{font-size:38px;line-height:1.28;letter-spacing:-1px;margin:0 0 13px;font-weight:800}.intro h1 span{display:block;font-size:20px;font-weight:500;letter-spacing:0;margin-top:8px}.intro-copy>p:not(.eyebrow){font-size:13px;color:var(--muted);margin:0 0 14px}.intro-tag{font-size:11px;display:inline-flex;align-items:center;gap:7px;background:#ecefde;border-radius:20px;padding:6px 12px}.intro-tag>span{color:#9b793c}.rimmi-welcome{display:flex;align-items:center;gap:16px;padding:0 20px;flex:none}.rimmi-welcome img{width:100px;height:182px;object-fit:contain}.rimmi-welcome p{background:white;border:1px solid var(--line);border-radius:20px 20px 20px 4px;padding:16px 20px;font-weight:600;font-size:13px;box-shadow:0 6px 20px #214c3f05}
.game-directory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}.game-card{position:relative;display:flex;gap:10px;border:1px solid var(--line);border-radius:17px;background:#f3f1e7;padding:17px 13px;text-decoration:none;min-height:134px}.game-icon{display:flex;align-items:center;justify-content:center;width:37px;height:37px;flex:none;border-radius:12px;background:#e4e8da;color:var(--ink);font-size:29px;line-height:1}.game-icon.emoji{font-size:23px}.card-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.card-body strong{font-size:15px;line-height:1.45;margin-top:7px}.card-body>span:last-child{font-size:10px;color:var(--muted);margin-top:5px}.status{font-size:9px;line-height:1.5;color:#697362;background:#e7e8dc;padding:3px 8px;border-radius:20px;white-space:nowrap}.status.ready{color:#fcf7e7;background:#345c49}.game-card.is-ready{background:#fffdf5;border-color:#b7a065;box-shadow:0 4px 0 #b7a06515}.is-ready:hover{border-color:#806b36;background:white}.card-arrow{position:absolute;right:12px;top:14px;color:#967b42;font-size:15px}
.dice-panel{scroll-margin-top:20px;background:#fffdf6;border:1px solid var(--line);border-radius:27px;padding:28px;box-shadow:0 10px 35px #214c3f06}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-heading h2{font-size:25px;letter-spacing:-.5px;line-height:1.35;margin:0 0 7px}.panel-heading h2 span{color:#ad8b41;font-size:19px}.panel-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0}.sound-toggle{display:flex;align-items:center;gap:7px;flex:none;background:#f3f3e9;border:1px solid var(--line);border-radius:24px;min-height:44px;padding:8px 15px;font-size:11px;color:var(--ink)}#sound-icon{font-size:20px;line-height:1}.sound-toggle[aria-pressed="false"]{color:#73786b;background:#f7f5ef}.count-picker{padding:0;border:0;margin:0 0 22px;display:flex;align-items:center;gap:16px}.count-picker legend{font-size:12px;font-weight:600;padding:0;margin-bottom:8px}.count-options{display:flex;gap:8px}.count-options label{position:relative;cursor:pointer}.count-options input{position:absolute;opacity:0;width:44px;height:44px;top:0;left:0;margin:0}.count-options span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:#f7f5eb;font-weight:700;font-size:16px}.count-options input:checked+span{color:#fff9e7;background:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 #142f28}.count-options input:disabled+span{opacity:.65;cursor:wait}
.play-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:25px}.dice-table{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 50% 35%,#365c49,#163a30);min-height:280px;padding:25px 18px;color:#f2e2b7;box-shadow:inset 0 0 0 7px #ffffff06}.dice-table::before{content:"";position:absolute;inset:14px;border:1px solid #e0bf7523;border-radius:14px;z-index:-1}.table-caption{font-size:8px;letter-spacing:2px;color:#d6c28a;opacity:.8}.dice-tray{width:100%;max-width:395px;min-height:154px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:18px;padding:20px 0}.die{width:85px;height:85px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px;gap:6px;border-radius:18px;background:linear-gradient(145deg,#fffdf6,#f1e7cf);border:1px solid #fff9df;box-shadow:0 7px 0 #c7b88f,0 14px 18px #0e241b66;flex:none}.pip{border-radius:50%;background:#245243;box-shadow:inset 0 1px 2px #122f2a4d}.die-empty{display:flex;align-items:center;justify-content:center;color:#b9af8d;font-size:30px;font-weight:500}.dice-table>p{font-size:10px;letter-spacing:.2px;margin:6px 0 0;color:#d9dcc6;min-height:16px}.is-rolling .die{animation:dice-shake .58s ease-in-out both;animation-delay:calc(var(--i,0)*25ms)}.is-rolling .dice-tray{opacity:.85}@keyframes dice-shake{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-8deg) translateY(-8px)}45%{transform:rotate(8deg) translateY(0)}70%{transform:rotate(-5deg) translateY(-5px)}}
.sparkles{position:absolute;inset:0;pointer-events:none;display:none}.sparkles i{font-style:normal;position:absolute;color:#efd68d;opacity:0}.sparkles i:nth-child(1){left:12%;top:28%}.sparkles i:nth-child(2){right:14%;top:24%;animation-delay:.08s}.sparkles i:nth-child(3){left:24%;bottom:20%;animation-delay:.12s}.sparkles i:nth-child(4){right:21%;bottom:18%;animation-delay:.18s}.show-sparkles .sparkles{display:block}.show-sparkles .sparkles i{animation:sparkle .7s ease-out both}@keyframes sparkle{0%{transform:translateY(8px) scale(.5);opacity:0}35%{opacity:.8}100%{transform:translateY(-18px) scale(1.1);opacity:0}}
.roll-controls{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:14px}.total-box>p:first-child{font-size:12px;margin:0;font-weight:600}.total-box output{display:block;font-size:73px;line-height:1.2;font-weight:800;letter-spacing:-3px;margin:4px 0}.total-box>p:last-child{font-size:11px;color:var(--muted);margin:5px 0 0;min-height:18px}.roll-button{width:100%;border:1px solid #bd9e59;border-radius:15px;background:linear-gradient(110deg,#ecdba6,#d9b96d);color:#244b3b;font-size:17px;font-weight:800;min-height:57px;box-shadow:0 4px 0 #b29655;transition:transform .12s,box-shadow .12s}.roll-button>span{font-size:26px;vertical-align:middle;margin-right:5px}.roll-button:hover:not(:disabled){filter:brightness(1.04)}.roll-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #b29655}.roll-button:disabled{opacity:.75}.rimmi-message{font-size:11px;color:var(--muted);margin:0;min-height:36px;padding:0 5px}.recent-rolls{margin-top:23px;display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding-top:16px}.recent-rolls[hidden]{display:none}.recent-rolls h3{font-size:11px;margin:0;white-space:nowrap}.recent-rolls ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.recent-rolls li{background:#f1f2e6;border:1px solid #e4e7d8;border-radius:10px;padding:5px 10px;font-size:10px;color:#55705f}.recent-rolls strong{color:var(--ink);font-size:12px}.game-note{font-size:10px;color:#768077;margin:22px 0 0;line-height:1.8}.noscript{color:#854326;background:#fff0d9;padding:12px;border-radius:12px}.coming-note{text-align:center;font-size:11px;color:var(--muted);margin:25px 0 0}footer{max-width:1250px;margin:0 auto;padding:20px 32px 28px;border-top:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;font-size:10px;color:#728174}footer a{text-decoration:none;font-weight:600}
@media(min-width:1100px){.count-picker{display:block}.count-picker legend{float:left;margin:13px 18px 0 0}}
@media(max-width:1000px){.game-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:112px;padding:15px 18px}.card-body strong{font-size:16px}.garden-card strong br{display:none}.rimmi-welcome{padding:0}.rimmi-welcome p{font-size:11px;padding:12px}.intro h1{font-size:34px}.play-layout{grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr);gap:20px}.dice-panel{padding:25px}}
@media(max-width:650px){.header-inner{padding:14px 18px;flex-wrap:wrap;gap:10px}.brand{font-size:15px;gap:8px;letter-spacing:1px}.brand-mark{width:36px;height:36px;border-radius:12px;font-size:25px}.brand-mark span{font-size:17px}.brand small{font-size:9px}.site-header nav{width:100%;justify-content:flex-end;font-size:11px;gap:22px}.site-header nav a{padding:5px 0}.page{padding:25px 18px 24px}.intro{align-items:flex-start;gap:6px;margin-bottom:22px}.eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:7px}.intro h1{font-size:29px;letter-spacing:-.8px}.intro h1 span{font-size:14px;margin-top:9px;line-height:1.6}.intro-copy>p:not(.eyebrow){font-size:11px;line-height:1.9;margin-bottom:11px}.intro-tag{font-size:9px;padding:5px 8px;line-height:1.7}.desktop-break{display:none}.rimmi-welcome{position:relative;display:block;align-self:center;flex-basis:76px}.rimmi-welcome img{width:76px;height:148px}.rimmi-welcome p{display:none}.game-directory{gap:9px;margin-bottom:20px}.game-card{min-height:145px;padding:12px 10px;gap:7px;align-items:flex-start;flex-wrap:wrap}.game-icon{width:29px;height:29px;border-radius:10px;font-size:25px}.game-icon.emoji{font-size:20px}.card-body{flex:1;min-width:90px}.status{font-size:8px;padding:2px 6px}.card-body strong{font-size:13px;margin-top:6px}.card-body>span:last-child{font-size:9px;line-height:1.7;margin-top:5px}.card-arrow{top:auto;bottom:10px;right:10px;font-size:13px}.garden-card strong br{display:block}.dice-panel{padding:19px 16px;border-radius:21px}.panel-heading{gap:9px;margin-bottom:18px}.panel-heading h2{font-size:21px;line-height:1.5}.panel-heading h2 span{font-size:15px}.panel-heading p:not(.eyebrow){font-size:10px}.sound-toggle{padding:7px 10px;gap:4px;font-size:9px;min-height:42px}#sound-icon{font-size:17px}.count-picker{display:block;margin-bottom:18px}.count-picker legend{font-size:11px;margin-bottom:10px}.count-options{gap:8px;justify-content:space-between}.count-options span,.count-options input{width:40px;height:42px}.play-layout{grid-template-columns:1fr;gap:21px}.dice-table{min-height:230px;padding:20px 14px}.table-caption{font-size:7px;letter-spacing:1.4px}.dice-tray{max-width:310px;min-height:125px;gap:15px;padding:20px 0}.die{width:72px;height:72px;border-radius:15px;padding:12px;gap:5px;box-shadow:0 6px 0 #c7b88f,0 12px 15px #0e241b66}.dice-tray[data-count="6"],.dice-tray[data-count="5"]{max-width:265px}.total-box output{font-size:59px;margin:3px 0;line-height:1.12}.total-box>p:first-child{font-size:11px}.roll-controls{gap:12px}.roll-button{min-height:54px;font-size:16px}.rimmi-message{font-size:10px;min-height:20px}.recent-rolls{align-items:flex-start;gap:8px;margin-top:18px}.recent-rolls li{font-size:9px;padding:4px 7px}.recent-rolls h3{font-size:10px;padding-top:4px}.game-note{font-size:9px;margin-top:18px}.coming-note{font-size:10px}footer{padding:18px;display:block;font-size:9px}footer a{display:block;margin-top:8px}}
@media(max-width:370px){.page{padding-left:13px;padding-right:13px}.intro h1{font-size:26px}.rimmi-welcome img{width:65px;height:137px}.rimmi-welcome{flex-basis:65px}.game-card{padding:11px 9px;gap:6px}.game-icon{width:25px;height:25px}.card-body{min-width:86px}.dice-panel{padding:17px 13px}.panel-heading h2{font-size:19px}.count-options{gap:6px}.count-options span,.count-options input{width:38px;height:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.sparkles{display:none!important}}
.health-play{margin-top:24px;padding:19px 22px;border:1px solid #dce3d1;border-left:3px solid #b9a05f;border-radius:15px;background:#f3f5e9;font-size:12px;line-height:1.9;color:#355a45}.health-play p{margin:0}.mission-input{display:block;width:100%;min-width:0;min-height:48px;margin:12px 0;padding:11px 13px;border:1px solid #cdd8c7;border-radius:10px;background:#fffdf5;font:500 14px/1.7 var(--font);color:var(--ink);box-shadow:inset 0 1px 2px #214c3f04}.mission-input::placeholder{color:#748171;opacity:1}.mission-input:focus-visible{outline:3px solid #bd812f;outline-offset:2px}.health-play .health-choice{color:#587160}.health-play .health-boundary{margin-top:10px;padding-top:10px;border-top:1px solid #dce3d1;font-weight:600;font-size:11px}
@media(max-width:650px){.health-play{margin-top:20px;padding:15px 13px;font-size:11px;line-height:1.9}.mission-input{font-size:16px;padding:11px 10px}.mission-input::placeholder{font-size:14px}.health-play .health-boundary{font-size:10px}}
.game-directory{align-items:start}
.garden-card{display:block;padding:0;overflow:hidden;background:#f1f3e7;border-color:#d5dcc9}
.world-preview{position:relative;margin:0;background:#dbe7ce;line-height:0}
.world-preview img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.world-preview figcaption{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:20px;background:#163a30e6;color:#fff9e7;font-size:8px;line-height:1.5}
.garden-card .card-body{padding:13px 15px 16px}
.garden-card .world-title{font-size:14px;line-height:1.4;letter-spacing:.15px;margin-top:8px}
.garden-card .world-subtitle{font-size:13px;font-weight:700;line-height:1.55;margin-top:6px}
@media(max-width:650px){.garden-card .card-body{padding:11px 10px 13px;min-width:0}.garden-card .world-title{font-size:12px;letter-spacing:0}.garden-card .world-subtitle{font-size:12px}.world-preview figcaption{font-size:7px;right:6px;bottom:6px}}
.wheel-panel{margin-top:26px}.wheel-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:38px;align-items:start}.wheel-play{min-width:0;text-align:center}.wheel-stage{position:relative;isolation:isolate;width:min(100%,350px);aspect-ratio:1;margin:10px auto 15px;filter:drop-shadow(0 8px 10px #214c3f13)}.wheel-stage svg{display:block;width:100%;height:100%;border:7px solid #d3b774;border-radius:50%;background:#eadba9;will-change:transform}.wheel-pointer{position:absolute;z-index:3;top:-9px;left:calc(50% - 13px);width:26px;height:30px;background:#a67f36;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 2px #214c3f40)}.wheel-hub{position:absolute;top:calc(50% - 23px);left:calc(50% - 23px);width:46px;height:46px;border:3px solid #f9f1da;background:#e3c787;box-shadow:0 3px 8px #214c3f35;border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:26px;line-height:1}.wheel-result{min-height:108px;margin-bottom:12px}.wheel-result>p:first-child{font-size:12px;color:var(--muted);margin:0 0 4px;overflow-wrap:anywhere}.wheel-result output{font-size:26px;line-height:1.5;display:block;font-weight:800;overflow-wrap:anywhere}.wheel-result>p:last-child{font-size:12px;color:#667966;margin:6px 0 0;overflow-wrap:anywhere}.wheel-play .roll-button{max-width:350px}.wheel-rimmi{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px}.wheel-rimmi img{object-fit:contain}.wheel-rimmi p{text-align:left;font-size:10px;line-height:1.9;color:var(--muted);margin:0}.wheel-settings{padding:22px;background:#f3f5e9;border:1px solid #dce3d1;border-radius:18px;min-width:0}.wheel-settings>label,.wheel-settings #wheel-task-fields>label{display:block;font-size:12px;font-weight:700;margin:0 0 7px}.wheel-settings label small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:2px}.wheel-settings input[type="text"],.wheel-settings textarea{width:100%;min-width:0;display:block;padding:10px 12px;font:400 14px/1.8 var(--font);color:var(--ink);background:#fffdf6;border:1px solid #cdd8c7;border-radius:10px;margin:0 0 15px}.wheel-settings textarea{resize:vertical;min-height:90px}.wheel-settings input:focus-visible,.wheel-settings textarea:focus-visible{outline:3px solid #bd812f;outline-offset:2px}.wheel-settings [disabled]{opacity:.7}.wheel-settings .field-help,.local-note{font-size:10px;color:var(--muted);line-height:1.8;margin:4px 0 10px}.wheel-settings .field-error{font-size:11px;color:#954528;margin:5px 0 9px}.wheel-count{font-size:11px;color:#466a53;margin:0 0 17px;font-weight:600}.wheel-settings .task-toggle{display:flex;align-items:center;gap:8px;margin:0 0 12px;min-height:40px}.task-toggle input{width:19px;height:19px;accent-color:var(--ink);margin:0}.wheel-settings [hidden]{display:none}.wheel-settings .local-note{margin-bottom:0}.wheel-panel .health-play{margin-top:22px}
@media(max-width:650px){.wheel-panel{margin-top:20px}.wheel-layout{grid-template-columns:1fr;gap:22px}.wheel-stage{width:min(100%,290px);margin-top:7px}.wheel-settings{padding:16px}.wheel-settings input[type="text"],.wheel-settings textarea{font-size:16px}.wheel-result output{font-size:24px}.wheel-result{min-height:98px}.wheel-rimmi p{font-size:10px}}
/* Clip only the rotating disc; the pointer, hub and effects stay outside the frame. */
.wheel-disc-frame{width:100%;height:100%;overflow:hidden;border-radius:50%}