:root{color-scheme:light;--surface-page: #f6dfa8;--surface-page-mid: #edbf7a;--surface-page-deep: #c97543;--surface-cream: #fff4d2;--surface-bone: #f8edc7;--surface-clay: #d98b4a;--text-primary: #183f2d;--text-secondary: #49624d;--accent-leaf: #2f7a4f;--accent-leaf-dark: #1f5b3b;--accent-amber: #f6b23f;--accent-amber-light: #ffd76e;--accent-amber-deep: #d26b2b;--accent-sky: #62b9c7;--accent-sky-dark: #2f8d9b;--status-waiting: #ffd88b;--status-error: #c94336;--status-error-dark: #982f27;--focus-ring: #124cff;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--font-display: "Cooper Black", "Arial Rounded MT Bold", "Nunito Sans", system-ui, sans-serif;--font-body: "Nunito Sans", "Atkinson Hyperlegible", system-ui, sans-serif}*{box-sizing:border-box}html{min-height:100%;background:var(--surface-page)}body{min-width:320px;min-height:100dvh;margin:0;font-family:var(--font-body);color:var(--text-primary);background:radial-gradient(circle at 20% 10%,rgba(98,185,199,.34),transparent 28%),radial-gradient(circle at 82% 20%,rgba(246,178,63,.44),transparent 26%),linear-gradient(135deg,var(--surface-page),var(--surface-page-mid) 58%,var(--surface-page-deep))}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px dashed var(--focus-ring);outline-offset:4px}.app-shell{min-height:100dvh;padding:clamp(var(--space-4),3vw,var(--space-8))}.play-mat{position:relative;display:grid;gap:var(--space-6);width:min(1640px,100%);min-height:calc(100dvh - clamp(32px,6vw,64px));margin:0 auto;padding:clamp(var(--space-4),3vw,var(--space-8));overflow:hidden;border:4px solid rgba(24,63,45,.16);border-radius:28px;background:radial-gradient(circle at 12% 80%,rgba(47,122,79,.18),transparent 26%),radial-gradient(circle at 100% 6%,rgba(255,244,210,.82),transparent 24%),repeating-radial-gradient(circle at 0 0,rgba(24,63,45,.055) 0 1px,transparent 1px 18px),var(--surface-cream);box-shadow:0 18px 50px #432b1229}.kicker,.personality{margin:0;font-size:.78rem;font-weight:900;letter-spacing:.03em;color:var(--text-secondary)}h1,h2,p{margin:0}h1{font-family:var(--font-display);font-size:clamp(1.55rem,6.5vw,4.6rem);line-height:.9;overflow-wrap:anywhere}@media (max-width: 430px){.kicker{font-size:.68rem}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (min-width: 1100px) and (min-height: 760px){.app-shell{padding:var(--space-5)}.play-mat{gap:var(--space-5);min-height:calc(100dvh - 40px);padding:var(--space-6)}}.top-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(var(--space-2),2.4vw,var(--space-3))}.brand-mark{display:grid;place-items:center;width:clamp(44px,12vw,58px);height:clamp(44px,12vw,58px);border:3px solid rgba(24,63,45,.16);border-radius:18px;color:var(--text-primary);background:var(--accent-amber);box-shadow:0 6px 0 var(--accent-amber-deep)}.title-block{display:grid;gap:var(--space-1);min-width:0}.header-actions{display:inline-flex;align-items:center;justify-content:end;gap:var(--space-3);min-width:0}.header-roll{display:grid;place-items:center;width:clamp(52px,8vw,86px);min-width:52px;padding:0;border:0;color:inherit;background:transparent}.header-roll:hover{filter:brightness(1.04)}.header-roll:active{transform:translateY(2px)}.connection-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:44px;min-height:44px;padding:var(--space-2) var(--space-3);border:3px solid rgba(24,63,45,.14);border-radius:16px;color:var(--surface-cream);font-size:clamp(.78rem,2.4vw,.96rem);font-weight:900;white-space:nowrap;box-shadow:0 8px #183f2d29;transition:transform .24s ease-in-out,background-color .24s ease-in-out}.connection-button svg{flex:0 0 auto}.connection-button--unpaired,.connection-button--error{background:var(--status-error);box-shadow:0 8px 0 var(--status-error-dark),0 18px 30px #432b122e}.connection-button--connecting{background:var(--accent-sky);transform:translateY(-2px);box-shadow:0 8px 0 var(--accent-sky-dark),0 18px 30px #432b122e}.connection-button--connected{background:var(--accent-leaf);box-shadow:0 8px 0 var(--accent-leaf-dark),0 18px 30px #432b122e}.connection-button:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-2px)}.connection-button:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px #183f2d33,0 10px 18px #432b1229}.connection-button:disabled{cursor:default;opacity:.88}@media (max-width: 430px){.brand-mark{width:42px;height:42px;border-radius:14px}.header-actions{gap:var(--space-2)}.header-roll{width:46px;min-width:46px}.connection-button{min-width:42px;min-height:42px;padding:var(--space-2)}.connection-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}.hero-grid{display:grid;gap:var(--space-6);align-items:stretch}.dino-card{min-width:0;border:3px solid rgba(24,63,45,.12);border-radius:24px;background:#fff4d2d1;box-shadow:0 18px 50px #432b1229}.d20-wrap{display:grid;place-items:center;width:100%;aspect-ratio:1;filter:drop-shadow(0 8px 10px rgba(67,43,18,.22));transition:transform .52s cubic-bezier(.18,1.25,.35,1),filter .24s ease-in-out}.d20-wrap--rolling{animation:d20-wobble .52s cubic-bezier(.18,1.25,.35,1);filter:drop-shadow(0 12px 14px rgba(67,43,18,.3))}.d20-core{display:grid;place-items:center;width:100%;height:100%;clip-path:polygon(50% 0,86% 12%,100% 50%,86% 88%,50% 100%,14% 88%,0 50%,14% 12%);background:linear-gradient(145deg,rgba(255,244,210,.52),transparent 32%),radial-gradient(circle at 35% 30%,var(--accent-amber-light),var(--accent-amber) 36%,var(--accent-amber-deep) 100%)}.d20-face{font-family:var(--font-display);font-size:clamp(1.45rem,4vw,3rem);font-weight:900;line-height:.85;color:var(--text-primary);text-shadow:0 5px 0 rgba(255,244,210,.55)}.dino-copy{display:grid;gap:var(--space-3);min-width:0;max-width:760px}.dino-copy h2{font-family:var(--font-display);font-size:clamp(2rem,7vw,4rem);line-height:1;overflow-wrap:anywhere}.voice-button{display:inline-flex;align-items:center;justify-self:start;gap:var(--space-2);max-width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:2px solid rgba(24,63,45,.14);border-radius:16px;color:var(--text-primary);background:var(--accent-amber-light);box-shadow:0 5px 0 var(--accent-amber-deep);font-weight:900}.voice-button span{overflow-wrap:anywhere}.voice-button:hover:not(:disabled){filter:brightness(1.04)}.voice-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--accent-amber-deep)}.dino-card{display:grid;grid-template-rows:minmax(420px,1fr) auto;gap:var(--space-5);padding:var(--space-6)}.image-frame{position:relative;display:grid;place-items:center;min-width:0;min-height:420px;overflow:hidden;border:3px dashed rgba(24,63,45,.18);border-radius:20px;background:radial-gradient(circle at 50% 38%,rgba(98,185,199,.28),transparent 34%),var(--surface-bone)}.image-frame img{display:block;width:100%;max-width:100%;height:auto;max-height:620px;object-fit:contain;object-position:center;filter:drop-shadow(0 16px 36px rgba(24,63,45,.22))}.image-fallback{display:grid;justify-items:center;gap:var(--space-3);color:var(--accent-leaf-dark);font-family:var(--font-display);font-size:1.6rem;text-align:center}.fact-list{display:grid;gap:var(--space-2);margin:0;padding-left:var(--space-6);color:var(--text-secondary);font-size:clamp(1rem,2vw,1.18rem);font-weight:850;line-height:1.35;overflow-wrap:anywhere}.fact-list li::marker{color:var(--accent-amber-deep)}.dino-card a{color:var(--accent-leaf-dark);font-size:.88rem;font-weight:900;text-decoration-thickness:2px;text-underline-offset:3px}.error-banner{flex:0 0 auto;padding:var(--space-3) var(--space-4);border:3px solid rgba(201,67,54,.28);border-radius:16px;color:var(--surface-cream);background:var(--status-error);font-weight:900}@keyframes d20-wobble{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-8deg) scale(1.08)}70%{transform:rotate(7deg) scale(.96)}to{transform:rotate(0) scale(1)}}@media (min-width: 980px){.hero-grid{grid-template-columns:minmax(0,1fr)}}@media (min-width: 1100px) and (min-height: 760px){.dino-card{grid-template-columns:minmax(0,1.25fr) minmax(520px,.75fr);grid-template-rows:minmax(0,auto);align-items:center;gap:var(--space-6)}.image-frame{min-height:clamp(420px,52vh,560px)}.dino-copy{align-content:center;max-width:100%}.dino-copy h2{font-size:clamp(2.6rem,4vw,3.7rem)}.fact-list{font-size:clamp(.96rem,1.2vw,1.08rem)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms;scroll-behavior:auto;transition-duration:1ms}}.carousel-controls{position:absolute;left:50%;bottom:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border:2px solid rgba(24,63,45,.12);border-radius:18px;background:#fff4d2e6;box-shadow:0 10px 22px #432b1229;transform:translate(-50%)}.image-nav-button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:2px solid rgba(24,63,45,.14);border-radius:14px;color:var(--text-primary);background:var(--accent-amber-light);box-shadow:0 5px 0 var(--accent-amber-deep)}.image-nav-button:hover{filter:brightness(1.04)}.image-nav-button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-amber-deep)}.gallery-count{min-width:3.5rem;color:var(--text-secondary);font-size:.86rem;font-weight:900;text-align:center}.media-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center}.media-links a{display:inline-flex;align-items:center;gap:var(--space-1);max-width:100%;overflow-wrap:anywhere}.dino-picker{display:grid;grid-auto-flow:row;grid-template-columns:repeat(10,82px);grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:center;min-width:0;min-height:156px;padding:var(--space-3);overflow-x:auto;overscroll-behavior-x:contain;border:3px solid rgba(24,63,45,.12);border-radius:24px;background:#fff4d2d1;box-shadow:0 18px 50px #432b1229}.dino-picker-button{position:relative;display:grid;place-items:center;gap:var(--space-1);min-height:62px;padding:var(--space-1);border:2px dashed rgba(24,63,45,.18);border-radius:16px;color:var(--text-primary);background:var(--surface-bone);box-shadow:0 4px #183f2d1f}.dino-picker-button img{display:block;width:70px;height:47px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(24,63,45,.16))}.dino-picker-button span{position:absolute;right:6px;bottom:4px;display:grid;place-items:center;min-width:22px;height:22px;border-radius:999px;color:var(--text-primary);background:var(--accent-amber-light);font-size:.78rem;font-weight:900}.dino-picker-button--active{border-color:#d26b2b8c;background:#ffd88bb3;transform:translateY(-2px)}.dino-picker-button:hover{filter:brightness(1.03)}.dino-picker-button:active{transform:translateY(2px);box-shadow:0 2px #183f2d24}@media (min-width: 1100px) and (min-height: 760px){.dino-picker{justify-content:center;min-height:148px;padding:var(--space-2) var(--space-3)}}.dino-card--celebrating{position:relative;overflow:hidden}.dino-card--celebrating .celebration-burst{opacity:1;animation:celebration-burst-pop .52s cubic-bezier(.18,1.25,.35,1) both}.celebration-burst{position:absolute;inset:var(--space-4);z-index:2;display:grid;place-items:center;pointer-events:none;opacity:0}.celebration-burst:before,.celebration-burst:after{grid-area:1 / 1;width:min(58vmin,420px);aspect-ratio:1;border-radius:50%;content:"";opacity:0;transform:scale(.36);will-change:transform,opacity}.celebration-burst:before{border:3px dashed color-mix(in srgb,var(--accent-amber-deep) 76%,transparent);animation:celebration-ring .52s ease-out both}.celebration-burst:after{width:min(42vmin,300px);background:radial-gradient(circle,color-mix(in srgb,var(--accent-amber-light) 52%,transparent),transparent 68%);animation:celebration-glow .52s ease-out both}.celebration-spark{grid-area:1 / 1;width:clamp(10px,2vw,18px);aspect-ratio:1;border-radius:35% 65% 45% 55%;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-cream) 72%,transparent),transparent 42%),var(--accent-amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-amber-deep) 34%,transparent);opacity:0;transform:rotate(var(--spark-rotate, 0deg)) translateZ(0) scale(.62);transform-origin:center;will-change:transform,opacity,filter;animation:celebration-spark-flight .52s cubic-bezier(.18,1.25,.35,1) both;animation-delay:var(--spark-delay, 0ms)}.celebration-spark:nth-child(1){--spark-x: -150px;--spark-y: -72px;--spark-rotate: -20deg}.celebration-spark:nth-child(2){--spark-x: 132px;--spark-y: -96px;--spark-rotate: 32deg;--spark-delay: 24ms;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-cream) 68%,transparent),transparent 42%),var(--accent-sky)}.celebration-spark:nth-child(3){--spark-x: -116px;--spark-y: 92px;--spark-rotate: 18deg;--spark-delay: 48ms;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-cream) 70%,transparent),transparent 42%),var(--accent-leaf)}.celebration-spark:nth-child(4){--spark-x: 156px;--spark-y: 64px;--spark-rotate: -38deg;--spark-delay: 72ms;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-cream) 72%,transparent),transparent 42%),var(--accent-amber-light)}.celebration-spark:nth-child(5){--spark-x: 0;--spark-y: -132px;--spark-rotate: 12deg;--spark-delay: 36ms}.image-frame--alive{isolation:isolate}.image-frame--alive:before{position:absolute;inset:var(--space-4);z-index:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent-sky) 32%,transparent),transparent 70%);content:"";opacity:.72;transform:scale(.96);will-change:transform,opacity;animation:dino-ambient-breathe 4.2s ease-in-out infinite}.image-frame--alive img{position:relative;z-index:1;transform-origin:50% 82%;will-change:transform,filter;animation:dino-idle-alive 3.6s ease-in-out infinite}@keyframes celebration-burst-pop{0%{transform:scale(.86)}42%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes celebration-ring{0%{opacity:.88;transform:scale(.36) rotate(0)}to{opacity:0;transform:scale(1.18) rotate(18deg)}}@keyframes celebration-glow{0%{opacity:.78;transform:scale(.34)}to{opacity:0;transform:scale(1.22)}}@keyframes celebration-spark-flight{0%{opacity:0;filter:brightness(1);transform:rotate(var(--spark-rotate, 0deg)) translateZ(0) scale(.62)}22%{opacity:1;filter:brightness(1.08)}to{opacity:0;filter:brightness(1);transform:rotate(calc(var(--spark-rotate, 0deg) + 46deg)) translate3d(var(--spark-x, 120px),var(--spark-y, -80px),0) scale(.82)}}@keyframes dino-ambient-breathe{0%,to{opacity:.54;transform:scale(.94)}50%{opacity:.82;transform:scale(1.03)}}@keyframes dino-idle-alive{0%,to{filter:drop-shadow(0 16px 36px color-mix(in srgb,var(--text-primary) 22%,transparent));transform:translateZ(0) rotate(0) scale(1)}50%{filter:drop-shadow(0 20px 40px color-mix(in srgb,var(--text-primary) 24%,transparent));transform:translate3d(0,-8px,0) rotate(-.8deg) scale(1.01)}}@media (prefers-reduced-motion: reduce){.dino-card--celebrating .celebration-burst,.celebration-burst:before,.celebration-burst:after,.celebration-spark,.image-frame--alive:before,.image-frame--alive img{animation:none}.celebration-burst,.celebration-burst:before,.celebration-burst:after,.celebration-spark{opacity:0}}