/* Cover-led warm paper, stitched toys and the colours of the supplied wordmark. */
:root{--bg:#fff4dc;--ink:#593519;--mut:#997950;--line:#ecd7b1;--panel:#fffaf0;--panel2:#f8ead1;--gold:#ffc44d;--blue:#2586aa;--green:#5e922f}
body{background:#fff4dc;color:#593519;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif}button,a,input,textarea{font-family:inherit}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{background:#c39c71;border-radius:10px}.screen{isolation:isolate}#home{background:linear-gradient(90deg,#fff3de9c,#fff8e5d9 30%,#fff8e5d9 70%,#fff3de9c),url('assets/ruang-bermain-cover.png?v=2') center/cover fixed}#home:before,#setup:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 15% 30%,#ffffffc0 0 2px,transparent 3px),radial-gradient(circle at 80% 65%,#ffd173b0 0 3px,transparent 4px);background-size:230px 190px,310px 270px;animation:paper-drift 35s linear infinite}#home:after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,#e8a139 0 60px,#ed7047 60px 120px,#2c8eaa 120px 180px,#809c32 180px 240px,#8e5195 240px 300px);opacity:.9}.site-nav{padding:22px 35px;max-width:1260px;min-height:96px}.brand{gap:10px;color:#674024;letter-spacing:.8px}.brand-undian{font-size:11px;letter-spacing:2px;font-weight:850}.rb-logo{display:inline-block;width:138px;aspect-ratio:770/350;background-image:url('assets/ruang-bermain-cover.png?v=2');background-size:217.14% auto;background-position:47.9% 32.32%;border-radius:35%;clip-path:polygon(9% 2%,84% 3%,90% 12%,91% 39%,100% 48%,100% 93%,94% 99%,43% 90%,9% 100%,1% 87%,0 56%,11% 43%);vertical-align:middle;filter:drop-shadow(0 4px 0 #9f63391c)}.nav-note{color:#8e6c48;font-size:12px}.sound-control{border-color:#dcbf93;background:#fffaf0b0;color:#795024}.home-main{padding:14px 32px 0;max-width:1080px;margin:0 auto}.hero-copy .eyebrow{font-size:9px;letter-spacing:2.8px;color:#a06b31}.hero-copy h1{margin:15px auto 2px;line-height:1;letter-spacing:0}.hero-undian{display:block;font-size:29px;letter-spacing:7px;font-weight:650;color:#674024;transform:rotate(-3deg);margin-bottom:0}.hero-logo{display:block;width:390px;max-width:90%;margin:4px auto 0}.hero-copy p{margin:6px 0 10px;color:#8c6841;font-size:13px;line-height:1.8}.mode-cards{margin:26px 0 22px;gap:25px}.mode-card{border:1px solid #e5cb9d;border-radius:23px;background:#fffcf3;box-shadow:0 7px 0 #8c5d2a08,0 14px 34px #734b1920;transition:transform .2s,box-shadow .2s}.mode-card:hover{border-color:#d6a84d;box-shadow:0 15px 28px #76431526;transform:translateY(-4px) rotate(-.35deg)}.mode-card.team:hover{transform:translateY(-4px) rotate(.35deg)}.mode-art{height:169px}.mode-art:after{content:"";position:absolute;inset:0;border-bottom:4px solid #fff9ee88;pointer-events:none;background:linear-gradient(180deg,transparent 80%,#8b50141a)}.individual .mode-art{background:#f6d992}.mode-art>img{filter:saturate(1.15);opacity:.9}.team .mode-art{background:linear-gradient(155deg,#262845,#71517b);isolation:isolate}.team .mode-art>img{filter:brightness(.57) saturate(.8)}.art-pill{color:#886129;background:#fffcdfcc;border:1px dashed #d7a155;padding:7px 11px;font-size:8px}.team .art-pill{color:#fff0bd;background:#3b274a9c;border-color:#ba97cb}.mode-body{padding:21px 25px}.mode-number{color:#b18a51;font-size:9px}.mode-body h2{color:#6e4122;font-size:24px;margin-top:9px}.mode-body h2>span{color:#c09358}.mode-body p{color:#a0815c;font-size:12px;margin-bottom:18px}.mode-foot{border-top:1px dashed #e8d8b9;padding-top:14px}.mode-foot>span{color:#a08664}.mode-foot>b{color:#a77126}.team .mode-foot>b{color:#896294}.home-benefits{color:#947348;font-size:10px}.home-footer{border-color:#e9d5b0;color:#ab8b63;margin:29px 0 20px}.home-footer>span:first-child{color:#a07a46}.duck-mascot{width:96px;height:72px;background:url('assets/m_duck.png') 0 0/288px 72px no-repeat;transform:scaleX(-1);left:30%;bottom:23px;image-rendering:pixelated}.knight-mascot{bottom:20px;left:53%;filter:drop-shadow(0 6px 2px #68462528)}.team-one{left:32%;bottom:20px}.team-three{left:60%;bottom:28px;width:64px;height:48px;background-size:192px 48px}.mini-portal{position:absolute;border:2px solid #b99bfc;box-shadow:0 0 0 7px #bb93f725,0 0 24px #f4c2ff50,inset 0 0 26px #dab1ff50;width:93px;height:110px;bottom:15px;border-radius:50%;z-index:-1;animation:portal-breathe 3s ease-in-out infinite}.portal-a{left:30%;transform:rotate(-8deg)}.portal-b{left:57%;border-color:#f4cf76;box-shadow:0 0 0 7px #ffcf7620,0 0 25px #ffcf7650,inset 0 0 20px #ffcf7650;animation-delay:-1.5s}.art-spark{color:#fff6d3;top:55px;left:17%;font-size:24px}.finish-flag{color:#92682d}.btn{border-color:#e5d0ad;background:#fffaf1;color:#845b30}.btn:hover{background:#ffefcf;border-color:#d5ac6a}.btn.gold,.btn.green{background:linear-gradient(#ffd976,#ffc346);border-color:#e9ac34;color:#6a4116;box-shadow:0 3px 0 #bf862023}.btn.gold:hover,.btn.green:hover{background:#ffcf5d}.btn:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:#cd8726}#setup{background:linear-gradient(100deg,#fff4dedb,#fff9eef7 35%,#fff9eef7 75%,#fff1d7d9),url('assets/ruang-bermain-cover.png?v=2') center/cover fixed}.setup-heading{margin:22px 0}.setup-heading h1{color:#76431f;letter-spacing:-1px}.setup-heading p{color:#a17d50}.eyebrow{color:#b18343}.badge{background:#fff0c8;color:#9a722f;border-color:#ebd09c}.badge b{color:#985d1d}.card{background:#fffdf7ef;border-color:#ecdbbd;box-shadow:0 6px 16px #7c461b05}.card h2{color:#80522d}.step-number{color:#9f651b;background:#fff0bc}.card .sub{color:#aa8a5f}.seg{background:#fbf3e4;border-color:#eee0c7}.seg button{color:#b29872}.seg button.on{background:#ffe3a0;color:#8a5c22}.seg button:hover:not(.on){background:#fff0c9;color:#956d35}label.f{color:#a18358}.mset{border-color:#eee2ca;background:#fcf7ec}.mset.on{background:#fff3ca;border-color:#d8ac4c;box-shadow:0 0 0 1px #e3bf65}.mset span{color:#9c8055}.mset canvas{image-rendering:auto}.arena-choices{background:none}.arena-choices button{border-color:#eddec2}.arena-choices small{color:#ab8240}input[type=text],input[type=number],select,textarea{background:#fffbf2;border-color:#eadbc0;color:#795633}input:focus,textarea:focus,select:focus{border-color:#d7ae62;box-shadow:0 0 0 3px #ffe3a150}.chips{background:#fffaf0;border-color:#efe2c9}.chip{background:#fbf1dc;border-color:#eee0c3}.chip.grp{border-color:#e4cb93}.chip .x,.chip small{color:#b59565}.empty{color:#b39b75}.extras{border-color:#ead5b4}.extras summary{color:#946937}.extras summary span,#setupSummary{color:#ac8b5e}.opt{border-color:#f0e4d0}.opt .d{color:#af9572}.sw{background:#eadfc9;border-color:#deceb0}.sw.on{background:#ffda79;border-color:#e4b443}.sw.on:after{background:#b8872d}.hitem{background:#fff4dc}.hitem .rk{background:#ffe4a6;color:#9b6b22}.hitem .mn small{color:#b09268}.launch-box .sub{color:#ae9168}#boot{background:#fff5df}.logo{color:#a06a2b}.logo span{-webkit-text-fill-color:#b4966b}.start{font-size:15px}.result-member{display:flex;gap:10px;align-items:center}.result-member canvas{flex-shrink:0;image-rendering:auto}.group-members>div{line-height:1.5;overflow-wrap:anywhere}.group-pod h2{overflow-wrap:anywhere}#result{background:radial-gradient(ellipse at 50% 0,#67503a,#2f2725)}#ceremony{background:radial-gradient(ellipse at 50% 40%,#7c6541,#2e2927)}#race #racePhase{background:#5a402ee6}.rtitle{color:#ffe0a1}.duration-note{min-height:17px}
/* The group scene is a separate, bounded canvas animation plus an accessible live roster. */
#groupScene{background:#231f33;color:#fff3d6;overflow:hidden}.portal-backdrop{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#242136ed,#34243bd9 60%,#271e32f5),url('assets/ruang-bermain-cover.png?v=2') center/cover}.portal-header{padding:26px 32px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #ecd6a51c;background:#231e2c70}.portal-header .eyebrow{font-size:8px;letter-spacing:2.7px;color:#d9b877}.portal-header h1{font-size:25px;font-weight:650;margin:7px 0 0;letter-spacing:-.5px}.portal-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.portal-controls .btn{background:#ffffff09;color:#e3d5c3;border:1px solid #e6c6a130;font-size:11px}.portal-controls .btn:hover{background:#ffffff18}.portal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0}.portal-stage{position:relative;min-height:0;overflow:hidden}.portal-caption{position:absolute;top:26px;left:20px;right:20px;text-align:center;z-index:1;pointer-events:none}.portal-caption>span{font-size:8px;letter-spacing:2.7px;color:#d6b373}.portal-caption h2{font-size:clamp(23px,3vw,42px);font-weight:700;color:#fff0cc;margin:12px auto 8px;max-width:90%;overflow-wrap:anywhere;line-height:1.13;text-shadow:0 4px 20px #05051288}.portal-caption p{font-size:12px;color:#c6b4c9;margin:0}#portalCanvas{position:absolute;left:0;top:126px;width:100%;height:calc(100% - 185px);image-rendering:auto}.portal-progress{position:absolute;bottom:20px;left:10%;right:10%;text-align:center}.portal-progress>span{font-size:10px;color:#baa6be}.portal-progress>div{height:3px;background:#ffffff12;border-radius:3px;margin:12px auto 0;max-width:330px;overflow:hidden}.portal-progress i{display:block;height:100%;background:#ecc078;transition:width .3s}.portal-roster{background:#18152563;border-left:1px solid #ecd6a51c;display:flex;flex-direction:column;min-height:0;padding:24px 18px}.roster-heading{display:flex;align-items:center;gap:13px;margin-bottom:22px}.roster-heading>span{font-size:24px;color:#deb570}.roster-heading h2{font-size:14px;margin:0 0 6px;font-weight:600}.roster-heading p{font-size:10px;margin:0;color:#a591ad}#gTeams{overflow:auto;min-height:0;position:relative;scrollbar-color:#645069 transparent}.portal-team{border:1px solid #e2cef01a;background:#ffffff04;border-radius:13px;margin-bottom:10px;padding:13px;transition:background .3s,border-color .3s}.portal-team.is-active{border-color:var(--team-color);background:#ffffff0a}.portal-team header{display:flex;gap:9px;align-items:center}.team-number{display:grid;place-items:center;width:24px;height:24px;color:#23202b;background:var(--team-color);font-weight:800;font-size:11px;border-radius:8px;flex-shrink:0}.portal-team h3{font-size:11px;margin:0;flex:1;overflow-wrap:anywhere;color:#e9dced}.team-count{font-size:9px;color:#ab98b4}.team-empty{font-size:10px;color:#8f7e9c;margin:12px 0 2px}.arriving-member{display:flex;align-items:center;gap:8px;border-top:1px solid #ffffff0a;padding-top:6px;margin-top:6px;font-size:11px;color:#d4c4db;animation:member-arrive .4s ease-out}.arriving-member canvas{width:25px;height:25px;flex-shrink:0}.arriving-member span{overflow-wrap:anywhere;min-width:0}.portal-team:first-child{margin-top:1px}
@keyframes paper-drift{to{background-position:230px -190px,-310px -270px}}@keyframes portal-breathe{50%{opacity:.65;filter:brightness(1.2)}}@keyframes member-arrive{from{opacity:0;transform:translateX(-10px)}}
@media(min-width:1400px){.home-main{padding-top:28px}.mode-art{height:185px}.hero-logo{width:420px}}
@media(max-width:760px){.site-nav{padding:17px 20px;gap:10px;min-height:75px}.brand .rb-logo{width:105px}.brand-undian{font-size:9px}.home-main{padding-top:16px}.hero-logo{width:320px}.hero-undian{font-size:25px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.8px}.home-benefits{font-size:8px;gap:13px}.portal-header{padding:18px;align-items:flex-start}.portal-header h1{font-size:20px}.portal-controls{gap:5px}.portal-controls .btn{padding:6px 8px;font-size:9px}.portal-layout{grid-template-columns:minmax(0,1fr) 220px}.portal-roster{padding:18px 12px}.portal-caption h2{font-size:26px}.portal-caption p{font-size:11px}.portal-caption>span{font-size:7px;letter-spacing:1.4px}.mode-body h2{font-size:21px}.mode-body{padding:20px}.setup-heading h1{font-size:32px}}
@media(max-width:540px){.brand{gap:7px}.brand .rb-logo{width:96px}.brand-undian{font-size:8px;letter-spacing:1px}.hero-copy h1{margin-top:18px}.hero-logo{width:290px}.hero-copy p{font-size:12px}.mode-art{height:150px}.mode-cards{margin-top:24px;gap:20px}.home-footer{gap:12px;font-size:9px}.portal-header{padding:14px 15px;display:block}.portal-header h1{font-size:21px}.portal-controls{justify-content:flex-start;margin-top:13px;gap:6px}.portal-layout{grid-template-columns:1fr;grid-template-rows:minmax(310px,1fr) 180px}.portal-roster{padding:10px 12px;border-left:0;border-top:1px solid #ffffff15}.roster-heading{display:none}#gTeams{display:flex;gap:10px;overflow:auto;align-items:stretch}.portal-team{flex:0 0 180px;margin:0;overflow:auto}.portal-caption{top:16px}.portal-caption h2{font-size:25px;margin-top:8px}.portal-caption p{font-size:10px}#portalCanvas{top:99px;height:calc(100% - 140px)}.portal-progress{bottom:12px}.portal-progress>span{font-size:9px}.portal-progress>div{margin-top:7px}.team-one{left:29%}.team-three{left:60%}.mini-portal{height:100px;width:80px}.hero-mascot{animation-duration:2s}}
@media(prefers-reduced-motion:reduce){#home:before,#setup:before,.mini-portal,.arriving-member{animation:none!important}}
/* Keep the supplied cover at the edges; its lettering must not compete with the title. */
#home{background:linear-gradient(90deg,#fff3de8c,#fff8e5fc 29%,#fff8e5fc 71%,#fff3de8c),url('assets/ruang-bermain-cover.png?v=2') center/cover fixed}
.portal-backdrop{background:radial-gradient(ellipse at 38% 58%,#563e62d9,#231e32f5 80%),url('assets/ruang-bermain-cover.png?v=2') left center/300% auto}
@media(max-width:540px){#home{background:linear-gradient(#fff5e1ed,#fff8e5fa),url('assets/ruang-bermain-cover.png?v=2') center/cover fixed}}
.portal-layout,.portal-stage,.portal-roster,#gTeams{min-width:0;max-width:100%}
.portal-caption h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:540px){.portal-layout{grid-template-columns:minmax(0,1fr)}}

.mset canvas,.result-member canvas,.arriving-member canvas{image-rendering:pixelated}