*{box-sizing:border-box} :root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;color:#54260d;background:#fff8ed;font-synthesis:none}body{margin:0;background:radial-gradient(ellipse at 0 4%,#ffdeed 0,transparent 20%),radial-gradient(ellipse at 100% 98%,#e8d8ff 0,transparent 22%),#fff8ed}.definitions{position:absolute;width:0;height:0}.app{height:100svh;height:100dvh;min-height:0;max-width:560px;margin:auto;padding:max(10px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}header{position:relative;flex:0 0 62px;display:flex;align-items:center;justify-content:center}h1{font-size:clamp(26px,7.5vw,39px);font-weight:1000;letter-spacing:-1.7px;margin:0;display:flex;align-items:center;gap:6px;text-shadow:0 3px 0 #fff,0 5px 8px #dfc7a5}h1 svg{width:48px;height:48px;filter:drop-shadow(0 3px 2px #dfba72)}.sound{position:absolute;right:0;top:0;border:0;background:transparent;color:#714421;font-size:20px;cursor:pointer;padding:6px;opacity:.75}.cards{flex:1;min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}.card{position:relative;border-radius:32px;box-shadow:inset 0 2px 7px #ffffffb3,0 5px 7px #75462619;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:7px 16px 9px;isolation:isolate}.jordo{background:radial-gradient(ellipse at 50% 30%,#e1f2ff,#a8d4fa)}.rya{background:radial-gradient(ellipse at 50% 30%,#e6ffeb,#bdf3cb)}.princess{background:radial-gradient(ellipse at 50% 30%,#ffe9f3,#fac8df)}h2{text-align:center;font-size:clamp(25px,7vw,37px);line-height:1.1;letter-spacing:-1px;margin:0;font-weight:1000}.character-row{display:grid;grid-template-columns:25% 50% 25%;align-items:center;min-height:0}.portrait{height:100%;width:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 3px 2px #69451d24)}.star-button{position:relative;width:100%;max-width:100px;aspect-ratio:1;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 4px 2px #b4823a36);transition:transform .12s;justify-self:center;-webkit-tap-highlight-color:transparent}.star-button img{width:100%;height:100%;display:block}.star-button:hover{transform:scale(1.06)}.star-button:active{transform:scale(.90)}.star-button:disabled{cursor:default;opacity:.45;transform:none}button:focus-visible{outline:3px solid #7144b9;outline-offset:3px;border-radius:18px}.total{font-size:clamp(24px,7vw,36px);text-align:center;font-weight:1000;line-height:1.05;margin:0;letter-spacing:-.8px}.total.pop{animation:pop .3s ease-out}@keyframes pop{50%{transform:scale(1.13)}}.notice{position:absolute;bottom:0;left:0;right:0;margin:0;text-align:center;font-size:12px;background:#fff8ed}.notice:empty{display:none}@media(min-width:700px){.app{padding-top:20px;padding-bottom:20px;gap:14px}header{flex-basis:66px}.card{padding:10px 25px 12px}.cards{gap:16px}}@media(max-height:650px){.app{gap:6px}header{flex-basis:48px}h1{font-size:28px}h1 svg{width:36px;height:36px}.cards{gap:8px}.card{padding:5px 14px 7px;border-radius:25px}h2{font-size:26px}.total{font-size:25px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Size the complete stack to the visible browser viewport, including mobile bars. */
html,body{height:100%;overflow:hidden}.app{overflow:hidden}.card{min-height:0;overflow:hidden}.character-row{overflow:hidden}.portrait{display:block;min-width:0;max-height:100%;align-self:stretch}.star-button{width:min(100%,clamp(44px,11dvh,90px));max-height:100%;align-self:center}
@media(max-height:560px){.app{padding:4px 12px;gap:4px}header{flex-basis:38px}h1{font-size:24px}h1 svg{width:30px;height:30px}.cards{gap:6px}.card{padding:4px 12px;border-radius:20px}h2{font-size:22px}.total{font-size:21px}}