:root{font-family:ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;color:#21435a;background:#d7f5ff}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 10% 85%,#fff4b0 0,transparent 22%),radial-gradient(circle at 90% 20%,#e3ffb9 0,transparent 25%),linear-gradient(#a7e9ff,#e2faff 52%,#b6ed98)}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:4px solid #ffad2f;outline-offset:3px}.app{max-width:1450px;margin:auto;padding:14px clamp(12px,2vw,28px)}header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 auto 22px}.brand{display:flex;align-items:center;gap:10px}.flower{font-size:clamp(35px,5vw,65px)}h1{font-size:clamp(28px,4.2vw,57px);line-height:1;margin:0;color:#ee8d17;text-shadow:0 3px white,2px 5px #af6c28;letter-spacing:-1.5px}h1 span{color:#39a33c}.brand p{margin:9px 0 0;font-size:clamp(12px,1.3vw,17px);font-weight:800;color:#426b52}.top-actions{display:flex;gap:7px}.iconbtn{background:#fff9dc;border:3px solid white;border-radius:18px;box-shadow:0 5px #b3d6c2;padding:9px 12px;font-size:20px}main{display:grid;grid-template-columns:minmax(190px,255px) minmax(0,1fr) minmax(190px,255px);gap:clamp(12px,2vw,25px);align-items:start}.panel{border:3px solid #fff8d4;border-radius:25px;background:linear-gradient(150deg,#fffef1,#fff4c7);padding:17px;box-shadow:0 9px 0 #7ebc84,0 14px 22px #346d7230}.panel h2{font-size:20px;margin:0 0 17px;color:#715028}.controls button:not(.subtle){width:100%;border-radius:15px;border:0;font-weight:900;padding:13px 10px;margin-bottom:11px}.mode{background:#dff1ff;color:#24577a;box-shadow:0 4px #9bc4e1}.mode.active{background:linear-gradient(#6ad56a,#24a447);color:white;box-shadow:0 4px #18813b}.controls label{display:block;font-size:13px;font-weight:800;margin:8px 0 6px}.controls select{width:100%;padding:11px;border-radius:12px;border:2px solid #d4bc7b;background:white;margin-bottom:14px}.controls .primary,.primary{background:linear-gradient(#ffbb46,#f78b24);color:#fff;border:0;border-radius:14px;padding:13px;font-weight:900;box-shadow:0 4px #b76b24}.controls .secondary{background:#fff;color:#376f96;box-shadow:0 4px #c1d6e3}.subtle{border:0;background:transparent;color:#786847;text-decoration:underline;width:100%;padding:10px}.instructions{background:#fff9e4;border:2px dashed #e4c889;border-radius:16px;padding:12px;margin-top:16px;line-height:1.5}.instructions p{font-size:13px;margin:7px 0 0}.game{min-width:0;text-align:center}.status{display:flex;align-items:center;justify-content:center;gap:12px;background:#fffbe8;border:3px solid white;box-shadow:0 5px #a5d5c1;border-radius:18px;padding:11px;margin-bottom:20px;font-size:clamp(14px,1.7vw,20px)}.disc{display:inline-block;flex:none;width:27px;height:27px;border-radius:50%;border:3px solid #ffffff9c;box-shadow:inset -4px -5px 0 #0002,inset 3px 3px 0 #fff8,0 2px 3px #0002}.red{background:linear-gradient(135deg,#ff7c85,#ed2549 65%)}.yellow{background:linear-gradient(135deg,#fff68c,#ffbb0c 70%)}.board-wrap{width:100%;max-width:680px;margin:auto}.board-area{position:relative;padding-top:37px}.arrows{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(7,1fr);height:39px}.arrow{border:0;background:transparent;font-size:24px;color:#ff9b1c;font-weight:900;filter:drop-shadow(0 2px white);padding:0;transition:transform .15s}.arrow:hover,.arrow:focus-visible{transform:translateY(4px)}.arrow:disabled{opacity:.25;cursor:not-allowed}.board{background:linear-gradient(135deg,#3aafff,#0878e1 40%,#0860c6);border:clamp(6px,1vw,12px) solid #1264bb;border-radius:clamp(12px,2vw,25px);box-shadow:0 8px #004d9c,0 15px 25px #16526b60,inset 0 3px 7px #a3e7ff;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1vw,11px);padding:clamp(7px,1.4vw,15px);aspect-ratio:7/6.2;touch-action:manipulation}.cell{position:relative;min-width:0;min-height:0;border-radius:50%;background:radial-gradient(circle at 45% 38%,#c9f2ff,#83c7ee 75%);box-shadow:inset 2px 4px 9px #003d8d,0 1px 2px #ffffffa8;cursor:pointer}.cell .piece{position:absolute;inset:5%;border-radius:50%;box-shadow:inset 3px 4px 0 #fff8,inset -5px -7px 0 #0002,0 2px 4px #0003;border:2px solid #fff7}.piece.red{background:radial-gradient(circle at 32% 25%,#ffacb3,#ff3458 62%,#ce1239)}.piece.yellow{background:radial-gradient(circle at 32% 25%,#fff8a5,#ffcd19 60%,#e69a00)}.piece.drop{animation:pop .27s ease-out}.piece.winner{animation:glow 0.8s infinite alternate;outline:4px solid white}@keyframes pop{from{transform:translateY(-80px) scale(.7);opacity:.4}to{transform:translateY(0) scale(1);opacity:1}}@keyframes glow{to{filter:brightness(1.3);box-shadow:0 0 16px 7px #fff991}}.hint{font-weight:800;font-size:13px;margin-top:21px;color:#477c61}.message{min-height:30px;font-size:18px;font-weight:900;color:#bf6a11;margin-top:9px}.scorecard{display:flex;justify-content:space-between;align-items:center;padding:13px 10px;border-radius:16px;margin:12px 0;background:white;border:2px solid #e4d7b0}.redcard{border-color:#ffc3cc}.yellowcard{border-color:#f5d66c}.player{display:flex;gap:9px;align-items:center}.player b{display:block;font-size:14px}.player small{display:block;color:#768080;margin-top:3px}.scorecard>strong{font-size:28px}.drawcard{font-weight:800}.ways{margin-top:25px;background:#fff9e6;padding:12px;border-radius:16px}.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:15px}.ways-grid span{font-size:10px;line-height:1.1;white-space:nowrap}.ways-grid small{display:block;margin-top:10px;font-size:11px;font-weight:800}footer{text-align:center;font-size:13px;font-weight:800;color:#538356;margin-top:35px}dialog{border:4px solid white;border-radius:24px;max-width:440px;width:calc(100% - 30px);padding:22px;background:#fffbe9;color:#375267;box-shadow:0 20px 90px #1238}dialog::backdrop{background:#102e49a0}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0}.dialog-head button{border:0;background:#f6ddc0;border-radius:50%;width:36px;height:36px;font-size:20px}dialog p{line-height:1.6}dialog .primary{width:100%}#confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:10px;height:15px;animation:fall 2.8s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(650deg)}}.hidden{display:none!important}@media(max-width:960px){main{grid-template-columns:minmax(0,1fr) minmax(180px,230px)}.controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}.controls h2,.controls .instructions{grid-column:1/-1}.mode-buttons{display:flex;gap:10px}.controls button:not(.subtle){margin:0}.controls label{grid-column:1;align-self:end}.controls select{grid-column:1;margin:0}.controls #new{grid-column:2}.controls #undo{grid-column:1}.controls #resetScores{grid-column:2}.game{grid-column:1}.score{grid-column:2}}@media(max-width:650px){.app{padding:12px 9px}header{margin-bottom:15px}.brand{gap:3px}.flower{font-size:32px}h1{font-size:29px}.brand p{font-size:10px;margin-top:6px}.iconbtn{font-size:16px;padding:7px}main{display:flex;flex-direction:column;gap:17px}.game{order:0;width:100%}.controls{order:1;display:grid;width:100%;grid-template-columns:1fr 1fr}.score{order:2;width:100%}.status{margin-bottom:11px;padding:8px}.board-area{padding-top:27px}.arrows{height:27px}.arrow{font-size:19px}.board{gap:5px;padding:6px;border-width:6px}.hint{margin-top:17px}.score .ways-grid{max-width:350px;margin-inline:auto}.controls .instructions{margin-top:4px}.controls .mode-buttons{grid-column:1/-1}.mode-buttons .mode{font-size:12px}.controls h2{margin-bottom:0}.scorecard{margin:7px 0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Character gallery and celebration */
.score-avatar{width:55px;height:67px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 2px #0002)}.character-dialog,.victory-dialog{width:min(94vw,650px);max-height:88dvh;overflow:auto;border-radius:25px}.character-tabs{display:flex;gap:8px;margin:14px 0}.character-tabs button{flex:1;border:2px solid #b6d9bc;border-radius:13px;padding:11px 6px;background:#f5fff3;font-weight:800;cursor:pointer}.character-tabs button.selected{background:#d4f7bc;border-color:#4eaf61}.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;max-height:49dvh;overflow:auto;padding:4px}.character-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:135px;background:#fffdf3;border:3px solid #d5e9c9;border-radius:16px;cursor:pointer;color:#24492f;font-size:12px;font-weight:800}.character-choice img{width:79px;height:103px;object-fit:contain}.character-choice.picked{border-color:#ffb51e;background:#fff3bf;box-shadow:0 0 0 2px #ffcf6a}.character-choice:focus-visible{outline:3px solid #1678c9}.victory-dialog{text-align:center;width:min(94vw,460px);background:linear-gradient(160deg,#fffde3,#d5fbd4)}.victory-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.victory-stage img{width:min(55vw,210px);height:270px;object-fit:contain;animation:victory-dance .7s ease-in-out infinite alternate;transform-origin:bottom center;filter:drop-shadow(0 12px 6px #3b77462a)}.victory-rays{font-size:30px;animation:twinkle 1s ease-in-out infinite alternate}.victory-name{font-weight:900;font-size:23px;color:#1d6c42}.victory-stage p{font-size:19px;font-weight:900;color:#c37c09}.victory-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.victory-actions button{min-width:140px}@keyframes victory-dance{0%{transform:translateY(0) rotate(-8deg) scale(1)}100%{transform:translateY(-24px) rotate(8deg) scale(1.06)}}@keyframes twinkle{to{transform:scale(1.15);opacity:.65}}@media(prefers-reduced-motion:reduce){.victory-stage img,.victory-rays{animation:none}}@media(max-width:600px){.character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.character-choice{min-height:112px}.character-choice img{height:80px;width:65px}.score-avatar{width:40px;height:52px}}

/* v2.1: clean accessible title and compact game-first tablet/mobile layout */
h1{color:#155b80;text-shadow:none;letter-spacing:-.035em;font-weight:900;line-height:1.12}
h1 span{color:#237a43}
.brand p{color:#31556a;font-weight:700;line-height:1.25;margin-top:3px}
.flower{filter:none}
@media (max-width:960px){
 .app{padding:8px 12px}
 header{margin-bottom:9px}
 main{display:flex;flex-direction:column;gap:10px}
 .game{order:1;width:100%}
 .controls{order:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:8px;border-radius:15px;box-shadow:0 3px #7ebc84}
 .controls h2,.controls .instructions,.controls label,.controls #resetScores{display:none}
 .controls .mode-buttons{grid-column:1;display:flex;gap:5px;min-width:0}
 .controls .mode-buttons .mode{flex:1;min-width:0;padding:9px 4px;margin:0;font-size:clamp(10px,1.6vw,13px)}
 .controls select{grid-column:2;grid-row:1;margin:0;padding:9px 4px;min-width:0;font-size:13px}
 .controls #chooseCharacters{grid-column:3;grid-row:1;width:auto;white-space:nowrap;padding:9px 8px;margin:0;font-size:12px}
 .controls #new{grid-column:4;grid-row:1;width:auto;white-space:nowrap;padding:9px 8px;margin:0;font-size:12px}
 .controls #undo{grid-column:4;grid-row:2;width:auto;padding:7px;margin:0;font-size:12px}
 .score{order:2;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-radius:15px;box-shadow:none}
 .score h2,.score .ways{display:none}
 .scorecard{flex:1;min-width:0;margin:0;padding:5px 9px}
 .score-avatar{height:40px;width:32px}
 .scorecard>strong{font-size:19px}
 .status{margin-bottom:7px;padding:6px;box-shadow:none}
 .board-wrap{width:min(100%,calc((100dvh - 285px)*1.10),680px);min-width:0}
 .board-area{padding-top:25px}
 .arrows{height:25px}
 .hint{margin-top:9px}
 .message{min-height:18px;margin-top:3px}
 footer{display:none}
}
@media(max-width:650px){
 .app{padding:6px 7px}
 header{gap:5px;margin-bottom:7px}
 .flower{font-size:25px}
 h1{font-size:clamp(23px,6vw,31px);letter-spacing:-.045em}
 .brand p{font-size:10px;margin-top:1px}
 .top-actions{gap:4px}
 .iconbtn{font-size:15px;padding:5px 7px;border-width:2px;border-radius:11px;box-shadow:none}
 main{gap:8px}
 .controls{order:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px}
 .controls .mode-buttons{grid-column:1/5;grid-row:1}
 .controls .mode-buttons .mode{font-size:12px;padding:7px 3px}
 .controls select{grid-column:1/3;grid-row:2;padding:7px 4px;font-size:12px}
 .controls #chooseCharacters{grid-column:3/5;grid-row:2;font-size:12px;padding:8px 3px}
 .controls #new{grid-column:1/3;grid-row:3;font-size:12px;padding:7px 3px}
 .controls #undo{grid-column:3/5;grid-row:3;font-size:12px;padding:7px 3px}
 .controls button:not(.subtle){margin:0}
 .game{order:1}
 .score{order:2;padding:6px;gap:4px}
 .scorecard{padding:4px;gap:3px}
 .score-avatar{height:32px;width:26px}
 .scorecard .player{gap:3px}
 .scorecard .disc{width:13px;height:13px;border-width:1px}
 .scorecard .player b{font-size:10px}
 .scorecard .player small{font-size:9px;margin-top:0}
 .scorecard>strong{font-size:16px}
 .drawcard{font-size:11px}
 .status{font-size:13px;padding:5px;margin-bottom:6px}
 .status .disc{width:19px;height:19px}
 .board-wrap{width:min(100%,calc((100dvh - 315px)*1.1));max-width:530px}
 .board-area{padding-top:22px}
 .arrows{height:22px}
 .arrow{font-size:17px}
 .board{gap:clamp(3px,1vw,5px);padding:5px;border-width:5px;box-shadow:0 4px #004d9c}
 .hint{margin-top:7px;font-size:11px}
 .message{font-size:13px;min-height:15px}
}
@media(max-width:650px) and (max-height:650px){
 .brand p,.hint{display:none}
 .controls{padding:4px;gap:3px}
 .controls .mode-buttons .mode,.controls #new,.controls #undo,.controls #chooseCharacters{padding:5px 2px}
 .board-wrap{width:min(100%,calc((100dvh - 275px)*1.1))}
}
@media(max-width:960px) and (orientation:landscape) and (max-height:650px){
 .app{padding:4px 8px}
 header{margin-bottom:4px}
 .brand p{display:none}
 h1{font-size:25px}
 main{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:8px}
 .controls{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:5px}
 .controls .mode-buttons{display:flex;flex-direction:column}
 .controls select,.controls #chooseCharacters,.controls #new,.controls #undo{width:100%}
 .game{grid-column:2;grid-row:1}
 .score{grid-column:1/-1;grid-row:2}
 .board-wrap{width:min(100%,calc((100dvh - 100px)*1.1))}
 .hint,.message{display:none}
}