:root{color:#243145;background:#fff7d8;font-family:Inter,Microsoft YaHei,PingFang SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--shadow-soft: 0 20px 45px rgba(74, 55, 22, .16);--shadow-button: 0 10px 0 rgba(63, 48, 22, .16)}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0}body:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 2px,transparent 2px 58px),repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 2px,transparent 2px 58px),linear-gradient(135deg,#fff8df,#dff7ff,#fef1ff);content:""}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.home-shell,.play-shell{width:min(100%,980px);min-height:100vh;margin:0 auto;padding:clamp(20px,4vw,40px)}.home-shell{display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vw,44px)}.home-intro{text-align:center}.eyebrow{display:inline-flex;align-items:center;min-height:36px;margin:0 0 12px;padding:0 18px;border:2px solid rgba(36,49,69,.12);border-radius:999px;background:#ffffffb3;color:#526070;font-size:.98rem;font-weight:800}.home-intro h1{margin:0;color:#26344a;font-size:clamp(2.55rem,7vw,5.4rem);line-height:1}.home-intro p:last-child{margin:14px 0 0;color:#536275;font-size:clamp(1.05rem,3vw,1.45rem);font-weight:700}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,3vw,24px);width:min(100%,760px);margin:0 auto}.game-card{position:relative;display:grid;min-height:clamp(150px,24vw,220px);padding:20px;overflow:hidden;border:3px solid rgba(255,255,255,.78);border-radius:24px;box-shadow:var(--shadow-button),var(--shadow-soft);color:#243145;text-align:center;text-decoration:none;place-items:center;transition:transform .18s ease,box-shadow .18s ease}.game-card:focus-visible,.icon-button:focus-visible,.dice-button:focus-visible,.start-button:focus-visible{outline:4px solid rgba(33,127,214,.35);outline-offset:4px}.game-card:hover{transform:translateY(-5px) rotate(-.5deg)}.game-card:active{transform:translateY(4px) scale(.98);box-shadow:0 4px #3f301624,0 12px 30px #4a371621}.game-card.is-disabled{opacity:.62;cursor:default}.game-card.is-disabled:hover,.game-card.is-disabled:active{transform:none}.card-sun{background:linear-gradient(150deg,#ffe16a,#ffb95f)}.card-mint{background:linear-gradient(150deg,#8ff0b5,#5cd4ef)}.card-sky{background:linear-gradient(150deg,#b9ddff,#92a8ff)}.card-rose{background:linear-gradient(150deg,#ffadc4,#ffd36d)}.game-title{align-self:end;font-size:clamp(1.45rem,4vw,2.2rem);font-weight:950;line-height:1.1}.game-subtitle{align-self:start;color:#243145bd;font-size:clamp(.9rem,2.4vw,1rem);font-weight:800}.mini-dice,.mini-traffic,.mini-puzzle,.mini-star{width:clamp(74px,13vw,106px);height:clamp(74px,13vw,106px)}.mini-dice{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px;border:5px solid rgba(36,49,69,.18);border-radius:22px;background:#fffdf5;box-shadow:inset -10px -12px #efdeb8a6;transform:rotate(7deg)}.mini-dice span{width:13px;height:13px;border-radius:50%;background:#26344a;place-self:center}.mini-dice span:nth-child(1){grid-area:1 / 1}.mini-dice span:nth-child(2){grid-area:1 / 3}.mini-dice span:nth-child(3){grid-area:2 / 2}.mini-dice span:nth-child(4){grid-area:3 / 1}.mini-dice span:nth-child(5){grid-area:3 / 3}.mini-traffic{display:grid;gap:7px;width:clamp(58px,10vw,76px);padding:10px;border:5px solid rgba(33,44,54,.16);border-radius:999px;background:#334155;box-shadow:inset -8px -10px #1018273d}.mini-traffic span,.light-bulb{border-radius:50%}.mini-traffic span{box-shadow:inset -4px -5px #2431452e}.mini-traffic .red{background:#ff5a66}.mini-traffic .yellow{background:#ffd34d}.mini-traffic .green{background:#55e488}.mini-puzzle{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:7px;transform:rotate(-5deg)}.mini-puzzle span{border-radius:18px;background:#ffffffd1;box-shadow:inset -6px -7px #4150701f}.mini-star{display:grid;color:#fff7b5;font-size:clamp(4.5rem,12vw,6.6rem);line-height:1;text-shadow:0 8px 0 rgba(60,48,18,.14);place-items:center}.play-shell{display:flex;flex-direction:column;gap:16px}.page-header{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;min-height:60px}.page-header h1{margin:0;font-size:clamp(1.65rem,4vw,2.5rem);line-height:1.1;text-align:center}.header-actions{display:flex;justify-content:end;gap:10px;min-width:56px}.icon-button{display:inline-grid;width:52px;height:52px;border:0;border-radius:18px;background:#ffffffd1;box-shadow:0 8px #3f30161a,0 12px 25px #4146581f;color:#26344a;cursor:pointer;place-items:center;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.icon-button svg{width:25px;height:25px;stroke-width:3}.icon-button:hover,.icon-button.is-active{background:#fff3a2}.icon-button:active{transform:translateY(4px);box-shadow:0 3px #3f30161a,0 8px 20px #4146581f}.home-button{text-decoration:none}.dice-shell{background:linear-gradient(180deg,#ffee9e57,#fff0 62%)}.dice-shell-honey{background:linear-gradient(180deg,#ffdc7352,#fff0 62%)}.dice-shell-sea{background:linear-gradient(180deg,#8bdeec47,#fff0 62%)}.dice-shell-candy{background:linear-gradient(180deg,#ffb3cb3d,#fff0 62%)}.dice-stage,.traffic-stage{display:grid;flex:1;min-height:0;padding:10px 0 28px;text-align:center;place-items:center}.dice-stage{align-content:center;gap:clamp(18px,4vw,30px);perspective:1200px}.dice-button{--dice-size: min(52vw, 245px);--dice-depth: calc(var(--dice-size) / 2);--dice-face-background: linear-gradient(145deg, rgba(255, 255, 255, .96) 0%, rgba(255, 245, 212, .96) 100%), #fff9e5;--dice-face-border: rgba(255, 255, 255, .76);--dice-face-highlight: rgba(255, 255, 255, .68);--dice-face-shade: rgba(231, 201, 137, .36);--dice-shadow-color: rgba(74, 52, 20, .19);--pip-primary: #e83f58;--pip-secondary: #ff6f7f;--pip-shade: rgba(140, 21, 44, .2);--dice-transform: rotateX(-14deg) rotateY(108deg) rotateZ(-2deg);--dice-from-transform: rotateX(-14deg) rotateY(108deg) rotateZ(-2deg);--dice-to-transform: rotateX(-14deg) rotateY(108deg) rotateZ(-2deg);--dice-spin-transform: rotateX(820deg) rotateY(700deg) rotateZ(610deg);position:relative;display:grid;width:calc(var(--dice-size) + 64px);height:calc(var(--dice-size) + 78px);border:0;background:transparent;cursor:pointer;place-items:center;touch-action:manipulation}.dice-skin-honey{--dice-face-background: linear-gradient(145deg, rgba(255, 247, 202, .98) 0%, rgba(255, 205, 101, .96) 100%), #ffdc72;--dice-face-border: rgba(255, 250, 222, .8);--dice-face-highlight: rgba(255, 255, 255, .56);--dice-face-shade: rgba(188, 124, 30, .26);--dice-shadow-color: rgba(109, 73, 20, .18)}.dice-skin-sea{--dice-face-background: linear-gradient(145deg, rgba(244, 255, 255, .98) 0%, rgba(137, 218, 235, .94) 100%), #a9ecf6;--dice-face-border: rgba(255, 255, 255, .78);--dice-face-highlight: rgba(255, 255, 255, .64);--dice-face-shade: rgba(55, 135, 159, .22);--dice-shadow-color: rgba(30, 90, 112, .18)}.dice-skin-candy{--dice-face-background: linear-gradient(145deg, rgba(255, 246, 252, .98) 0%, rgba(255, 176, 210, .94) 100%), #ffc2dc;--dice-face-border: rgba(255, 255, 255, .76);--dice-face-highlight: rgba(255, 255, 255, .62);--dice-face-shade: rgba(173, 68, 122, .2);--dice-shadow-color: rgba(126, 44, 88, .16)}.pip-style-blueberry{--pip-primary: #3159d8;--pip-secondary: #7397ff;--pip-shade: rgba(24, 56, 135, .24)}.pip-style-strawberry{--pip-primary: #e93f51;--pip-secondary: #ff7280;--pip-shade: rgba(141, 27, 44, .22)}.pip-style-banana{--pip-primary: #f2b52f;--pip-secondary: #ffe06a;--pip-shade: rgba(136, 89, 14, .18)}.dice-button:active .dice-cube{transform:var(--dice-transform) translateY(7px) scale(.98)}.dice-shadow{position:absolute;bottom:10px;width:calc(var(--dice-size) * .82);height:calc(var(--dice-size) * .16);border-radius:50%;background:var(--dice-shadow-color);filter:blur(2px);transform:rotateX(58deg);transition:transform .18s ease,opacity .18s ease}.dice-cube{position:relative;width:var(--dice-size);height:var(--dice-size);transform:var(--dice-transform);transform-style:preserve-3d;transition:transform .26s cubic-bezier(.18,.78,.28,1.02)}.dice-button.is-rolling .dice-cube{animation:dice-roll 1.25s cubic-bezier(.18,.8,.24,1.02) forwards}.dice-button.is-rolling .dice-shadow{animation:dice-shadow-bounce 1.25s ease forwards}.dice-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:clamp(27px,5.4vw,43px);border:clamp(5px,1.2vw,8px) solid rgba(255,255,255,.76);border-radius:clamp(34px,7vw,56px);border-color:var(--dice-face-border);background:var(--dice-face-background);box-shadow:inset 14px 16px 0 var(--dice-face-highlight),inset -18px -22px 0 var(--dice-face-shade);backface-visibility:hidden}.dice-face:before{position:absolute;top:9%;right:9%;bottom:9%;left:9%;border-radius:inherit;background:linear-gradient(135deg,#ffffff9e,#fff0);content:"";pointer-events:none}.dice-face-1{transform:rotateY(0) translateZ(var(--dice-depth))}.dice-face-2{transform:rotateY(90deg) translateZ(var(--dice-depth))}.dice-face-3{transform:rotateX(90deg) translateZ(var(--dice-depth))}.dice-face-4{transform:rotateX(-90deg) translateZ(var(--dice-depth))}.dice-face-5{transform:rotateY(-90deg) translateZ(var(--dice-depth))}.dice-face-6{transform:rotateY(180deg) translateZ(var(--dice-depth))}.dice-pip{z-index:1;position:relative;width:clamp(25px,4.8vw,40px);height:clamp(25px,4.8vw,40px);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.62),transparent 27%),linear-gradient(145deg,var(--pip-secondary) 0%,var(--pip-primary) 100%);box-shadow:inset -5px -7px 0 var(--pip-shade),0 3px #8f292d1a;place-self:center}.pip-style-strawberry .dice-pip{width:clamp(26px,5vw,42px);height:clamp(29px,5.4vw,46px);border-radius:58% 58% 52% 52%/68% 68% 46% 46%;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.72),transparent 22%),radial-gradient(circle at 38% 54%,rgba(255,232,155,.9) 0 5%,transparent 5.8%),radial-gradient(circle at 64% 45%,rgba(255,232,155,.88) 0 5%,transparent 5.8%),linear-gradient(145deg,var(--pip-secondary) 0%,var(--pip-primary) 100%);transform:rotate(-8deg)}.pip-style-strawberry .dice-pip:before{position:absolute;top:-19%;left:27%;width:46%;height:30%;border-radius:70% 30%;background:#62d985;box-shadow:7px 2px #42bd6a;content:"";transform:rotate(-10deg)}.pip-style-blueberry .dice-pip{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.74),transparent 25%),radial-gradient(circle at 60% 58%,rgba(42,70,159,.28) 0 16%,transparent 17%),linear-gradient(145deg,var(--pip-secondary) 0%,var(--pip-primary) 100%)}.pip-style-blueberry .dice-pip:before{position:absolute;top:10%;left:50%;width:28%;height:24%;border-radius:45% 55% 55% 45%;background:#19308057;content:"";transform:translate(-50%) rotate(18deg)}.pip-style-banana .dice-pip{width:clamp(34px,6vw,52px);height:clamp(26px,5vw,40px);border-radius:50%;background:radial-gradient(ellipse at 62% 28%,rgba(255,255,255,.65),transparent 20%),linear-gradient(145deg,var(--pip-secondary) 0%,var(--pip-primary) 76%);box-shadow:inset -4px -8px 0 var(--pip-shade),0 3px #8f62181a;clip-path:path("M 2 25 C 12 42, 43 42, 52 13 C 44 24, 20 27, 6 9 C 4 13, 2 18, 2 25 Z");transform:rotate(-18deg)}.pip-style-banana .dice-pip:before,.pip-style-banana .dice-pip:after{position:absolute;width:18%;height:20%;border-radius:50%;background:#7b5a28;content:""}.pip-style-banana .dice-pip:before{top:28%;left:3%}.pip-style-banana .dice-pip:after{right:2%;bottom:18%}.dice-pip.top-left{grid-area:1 / 1}.dice-pip.top-right{grid-area:1 / 3}.dice-pip.middle-left{grid-area:2 / 1}.dice-pip.center{grid-area:2 / 2}.dice-pip.middle-right{grid-area:2 / 3}.dice-pip.bottom-left{grid-area:3 / 1}.dice-pip.bottom-right{grid-area:3 / 3}.dice-caption{display:grid;gap:8px;min-width:min(80vw,280px);min-height:80px;place-items:center}.dice-caption strong{display:inline-grid;min-width:128px;min-height:54px;padding:0 24px;border:3px solid rgba(255,255,255,.72);border-radius:999px;background:#ffffffa8;box-shadow:0 8px #4e3c191a;color:#243145;font-size:clamp(1.45rem,4vw,2.2rem);line-height:1;place-items:center}.dice-caption span{color:#58677a;font-size:clamp(1rem,2.6vw,1.18rem);font-weight:900}.dice-option-group{display:grid;align-content:start;gap:10px;min-height:112px;padding:12px;border-radius:18px;background:#fff8d7c2}.dice-option-label{color:#526070;font-size:.96rem;font-weight:950}.dice-choice-row{display:flex;flex-wrap:wrap;gap:8px}.choice-chip{display:inline-flex;align-items:center;min-height:46px;padding:0 12px;gap:8px;border:3px solid transparent;border-radius:16px;background:#ffffffb8;box-shadow:0 5px #46381c17;color:#2d3a4f;cursor:pointer;font-size:.95rem;font-weight:950;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}.choice-chip:disabled{cursor:default;opacity:.64}.choice-chip:not(:disabled):hover,.choice-chip.is-selected{border-color:#26344a2e;background:#fff6b7}.choice-chip:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px #46381c17}.skin-swatch,.pip-swatch{flex:0 0 auto;width:24px;height:24px}.skin-swatch{border:3px solid rgba(255,255,255,.86);border-radius:8px;box-shadow:inset -5px -5px #614a221f;transform:rotate(-8deg)}.skin-swatch-cream{background:#fff5d5}.skin-swatch-honey{background:#ffd26b}.skin-swatch-sea{background:#9fe7f1}.skin-swatch-candy{background:#ffc2dc}.pip-swatch{position:relative;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.64),transparent 28%),linear-gradient(145deg,#ff6f7f,#e83f58);box-shadow:inset -3px -4px #8c152c29}.pip-swatch-strawberry{height:26px;border-radius:58% 58% 52% 52%/68% 68% 46% 46%}.pip-swatch-strawberry:before{position:absolute;top:-6px;left:7px;width:10px;height:8px;border-radius:70% 30%;background:#62d985;box-shadow:6px 2px #42bd6a;content:""}.pip-swatch-blueberry{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.7),transparent 28%),linear-gradient(145deg,#7397ff,#3159d8);box-shadow:inset -3px -4px #18388733}.pip-swatch-banana{width:28px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 62% 28%,rgba(255,255,255,.62),transparent 20%),linear-gradient(145deg,#ffe06a,#f2b52f);box-shadow:inset -3px -5px #88590e29;clip-path:path("M 1 14 C 7 26, 24 26, 28 5 C 24 13, 11 16, 3 4 C 2 7, 1 10, 1 14 Z");transform:rotate(-18deg)}.pip-swatch-banana:before,.pip-swatch-banana:after{position:absolute;width:5px;height:5px;border-radius:50%;background:#7b5a28;content:""}.pip-swatch-banana:before{top:7px;left:0}.pip-swatch-banana:after{right:0;bottom:5px}.dice-settings-panel{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.traffic-status{margin:0;color:#4b5b70;font-size:clamp(1.1rem,3vw,1.45rem);font-weight:900}.traffic-page{width:100%;max-width:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 72px),linear-gradient(180deg,#a0e7be3d,#fff9e100 58%)}.traffic-page:fullscreen{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 72px),linear-gradient(135deg,#fff8df,#dff7ff 52%,#fef1ff)}.settings-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:12px;width:min(100%,820px);margin:0 auto;padding:14px;border:3px solid rgba(255,255,255,.8);border-radius:24px;background:#ffffffc7;box-shadow:0 14px 35px #404f6421;animation:panel-in .24s ease}.settings-panel label{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;min-height:58px;gap:8px;padding:8px 10px;border-radius:18px;background:#fff8d7c2;color:#334155;font-weight:900}.settings-panel input{width:100%;min-width:0;height:42px;border:2px solid rgba(51,65,85,.12);border-radius:14px;background:#fff;color:#26344a;font-size:1.15rem;font-weight:950;text-align:center}.start-button{min-height:58px;padding:0 24px;border:0;border-radius:18px;background:#62d985;box-shadow:0 8px #2576432e,0 12px 26px #2d7d4929;color:#123220;cursor:pointer;font-weight:950;white-space:nowrap}.start-button:active{transform:translateY(4px);box-shadow:0 3px #2576432e,0 8px 18px #2d7d4929}.traffic-stage{align-content:center;gap:clamp(18px,4vw,28px)}.traffic-light{display:grid;width:min(46vw,210px);min-width:142px;padding:clamp(16px,4vw,26px);gap:clamp(14px,3vw,20px);border:8px solid rgba(255,255,255,.6);border-radius:999px;background:linear-gradient(145deg,#40506a,#263244),#334155;box-shadow:inset -14px -18px #0e152042,0 22px #232e4021,0 34px 50px #2a395033}.light-bulb{display:block;aspect-ratio:1;background:#1c2533;box-shadow:inset -8px -10px #00000038,inset 8px 8px #ffffff0d}.active-red .red{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.86),transparent 28%),#ff4d5d;box-shadow:0 0 34px #ff4d5db8,inset -8px -10px #941a2e33}.active-yellow .yellow{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),transparent 28%),#ffd23f;box-shadow:0 0 34px #ffd23fbf,inset -8px -10px #a071112e}.active-green .green{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.84),transparent 28%),#4de286;box-shadow:0 0 34px #4de286c2,inset -8px -10px #197b4233}.traffic-status{display:grid;gap:8px}.traffic-status strong{color:#243145;font-size:clamp(1.8rem,5vw,3rem);line-height:1}.traffic-status span{color:#5c6b7e}@keyframes dice-roll{0%{transform:var(--dice-from-transform) scale(1)}22%{transform:var(--dice-spin-transform) translateY(-16px) scale(1.05)}58%{transform:rotateX(1160deg) rotateY(820deg) rotate(700deg) translateY(6px) scale(.98)}82%{transform:var(--dice-to-transform) translateY(-8px) scale(1.02)}to{transform:var(--dice-to-transform) translateY(0) scale(1)}}@keyframes dice-shadow-bounce{0%,to{opacity:1;transform:rotateX(58deg) scale(1)}30%,78%{opacity:.58;transform:rotateX(58deg) scale(.68)}58%{opacity:.88;transform:rotateX(58deg) scale(1.05)}}@keyframes panel-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:720px){.home-shell,.play-shell{padding:18px}.home-shell{justify-content:start;padding-top:42px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:158px;padding:16px 10px;border-radius:22px}.page-header{grid-template-columns:50px 1fr auto;min-height:54px}.icon-button{width:48px;height:48px;border-radius:16px}.settings-panel{grid-template-columns:1fr}.start-button{width:100%}.dice-button{--dice-size: min(58vw, 220px)}.dice-option-group{justify-items:center;min-height:auto;gap:7px}.dice-settings-panel{grid-template-columns:1fr}.dice-choice-row{justify-content:center}.choice-chip{min-height:42px;padding:0 10px;border-radius:14px;font-size:.9rem}.traffic-light{width:min(56vw,210px)}}@media(max-width:380px){.game-grid{gap:12px}.game-card{min-height:142px}.game-title{font-size:1.28rem}.game-subtitle{font-size:.82rem}.page-header h1{font-size:1.42rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}