:root{font-family:"Trebuchet MS","Segoe UI",sans-serif;color:#26364a;background:#fff8e9;--blue:#5b9eea;--pink:#f47b91;--yellow:#ffd84f;--green:#62c995;--ink:#26364a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0,#ffe1a3,transparent 33%),radial-gradient(circle at 95% 20%,#c9efff,transparent 34%),#fff8e9}.quest-app{width:min(1120px,94vw);margin:auto;padding:22px 0 50px}.hero{position:relative;padding:8px 4px 18px}.back{display:inline-block;color:#3974bd;font-weight:900;text-decoration:none;margin-bottom:14px}.kicker,.label{font-size:12px;letter-spacing:.16em;font-weight:900;color:#70839d}.hero h1{font:900 clamp(42px,7vw,78px)/.95 Georgia,serif;margin:6px 0 12px;color:#ef657c;text-shadow:0 3px 0 #fff}.hero p{font-size:18px;max-width:760px;margin:0;color:#526a82}.card{background:rgba(255,255,255,.9);border:3px solid #fff;box-shadow:0 12px 0 rgba(59,93,133,.12),0 20px 48px rgba(82,111,145,.16);border-radius:28px}.setup{padding:24px;display:grid;gap:16px}.setup h2,.setup h3{margin:0}.choice-row{display:flex;gap:10px;flex-wrap:wrap}.choice{border:0;border-radius:18px;padding:14px 20px;background:#e9f0f8;color:var(--ink);font-weight:900;font-size:16px;cursor:pointer}.choice.active{background:var(--yellow);box-shadow:0 5px 0 #e9b82d}.color-choices{display:flex;gap:12px;flex-wrap:wrap}.color-choice{width:60px;height:60px;border-radius:20px;border:4px solid #fff;box-shadow:0 5px 0 rgba(40,60,80,.18);cursor:pointer;font-size:26px}.color-choice.active{outline:4px solid var(--ink);transform:translateY(-3px)}.big-button{border:0;border-radius:18px;background:var(--pink);color:#fff;padding:15px 24px;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #d7576d}.big-button:active{transform:translateY(3px);box-shadow:0 3px 0 #d7576d}.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:16px 20px;margin-bottom:18px}.topbar strong{display:block;font-size:27px}.topbar #turn-help{display:block;color:#61748b;margin-top:3px}.dice-wrap{display:grid;justify-items:center;color:#71849a;font-size:11px;font-weight:900}.dice{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff1a8;border:3px solid #f5c63d;font-size:30px;font-weight:1000;box-shadow:0 5px 0 #e7b52f}.board{padding:18px;margin-bottom:18px}.board-title{display:flex;justify-content:space-between;align-items:end;gap:12px}.board-title h2{margin:4px 0 14px;font-size:28px}.legend{color:#70839d;font-weight:800}.path{display:grid;grid-template-columns:repeat(10,minmax(70px,1fr));gap:10px;padding:16px;border-radius:22px;background:linear-gradient(150deg,#a9ddff,#8bd8ba);box-shadow:inset 0 -8px 0 rgba(43,132,141,.18)}.space{position:relative;min-height:78px;border-radius:18px;background:#fff;border:3px solid #e5edf3;box-shadow:0 6px 0 rgba(65,103,130,.2);display:grid;place-items:center;font-size:28px;font-weight:1000;color:#557087}.space:nth-child(3n){background:#fff1a8}.space:nth-child(3n+1){background:#ffd5df}.space:nth-child(5n){background:#c8f2da}.space.finish{background:#fff;border-color:#f5c63d}.space .space-num{position:absolute;top:5px;left:8px;font-size:12px;color:#8395a5}.token{position:absolute;right:5px;bottom:4px;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(45,63,80,.3);font-size:16px;display:grid;place-items:center}.task-dot{font-size:16px;position:absolute;top:5px;right:7px}.task-card{padding:24px;text-align:center;margin-bottom:18px}.task-badge{display:inline-block;border-radius:999px;background:#c7efff;color:#2672a9;padding:7px 14px;font-weight:900}.task-card h2{font-size:30px;margin:12px 0}.task-prompt{font-size:44px;font-weight:1000;color:#ed6c7e;margin:18px}.task-card p{color:#61748b;font-size:17px}.answers{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.answer{border:0;border-radius:16px;background:#e7f2ff;padding:15px 22px;font-size:20px;font-weight:900;color:#31577c;cursor:pointer;box-shadow:0 4px 0 #bfd7ee}.answer:hover{background:#fff1a8}.text-button{border:0;background:none;color:#5b9eea;font-weight:900;margin-top:14px;cursor:pointer}.feedback{font-size:18px;font-weight:900;min-height:26px;margin-top:12px}.good{color:#33a76c}.bad{color:#df6574}.winner{text-align:center;padding:38px;margin-top:22px}.winner-emoji{font-size:70px}.winner h2{font-size:42px;color:#ed6c7e}@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.topbar .big-button{grid-column:1/-1}.path{grid-template-columns:repeat(5,minmax(54px,1fr));gap:8px}.space{min-height:64px;font-size:22px}.legend{font-size:12px}.hero h1{font-size:50px}}
:root{font-family:"Trebuchet MS","Segoe UI",sans-serif;color:#26364a;background:#fff8e9;--blue:#5b9eea;--pink:#f47b91;--yellow:#ffd84f;--green:#62c995;--ink:#26364a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0,#ffe1a3,transparent 33%),radial-gradient(circle at 95% 20%,#c9efff,transparent 34%),#fff8e9}.quest-app{width:min(1120px,94vw);margin:auto;padding:22px 0 50px}.hero{position:relative;padding:8px 4px 18px}.back{display:inline-block;color:#3974bd;font-weight:900;text-decoration:none;margin-bottom:14px}.kicker,.label{font-size:12px;letter-spacing:.16em;font-weight:900;color:#70839d}.hero h1{font:900 clamp(42px,7vw,78px)/.95 Georgia,serif;margin:6px 0 12px;color:#ef657c;text-shadow:0 3px 0 #fff}.hero p{font-size:18px;max-width:760px;margin:0;color:#526a82}.card{background:rgba(255,255,255,.9);border:3px solid #fff;box-shadow:0 12px 0 rgba(59,93,133,.12),0 20px 48px rgba(82,111,145,.16);border-radius:28px}.setup{padding:24px;display:grid;gap:16px}.setup h2,.setup h3{margin:0}.choice-row{display:flex;gap:10px;flex-wrap:wrap}.choice{border:0;border-radius:18px;padding:14px 20px;background:#e9f0f8;color:var(--ink);font-weight:900;font-size:16px;cursor:pointer}.choice.active{background:var(--yellow);box-shadow:0 5px 0 #e9b82d}.color-choices{display:flex;gap:12px;flex-wrap:wrap}.color-choice{width:60px;height:60px;border-radius:20px;border:4px solid #fff;box-shadow:0 5px 0 rgba(40,60,80,.18);cursor:pointer;font-size:26px}.color-choice.active{outline:4px solid var(--ink);transform:translateY(-3px)}.big-button{border:0;border-radius:18px;background:var(--pink);color:#fff;padding:15px 24px;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #d7576d}.big-button:active{transform:translateY(3px);box-shadow:0 3px 0 #d7576d}.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:16px 20px;margin-bottom:18px}.topbar strong{display:block;font-size:27px}.topbar #turn-help{display:block;color:#61748b;margin-top:3px}.dice-wrap{display:grid;justify-items:center;color:#71849a;font-size:11px;font-weight:900}.dice{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff1a8;border:3px solid #f5c63d;font-size:30px;font-weight:1000;box-shadow:0 5px 0 #e7b52f}.board{padding:18px;margin-bottom:18px}.board-title{display:flex;justify-content:space-between;align-items:end;gap:12px}.board-title h2{margin:4px 0 14px;font-size:28px}.legend{color:#70839d;font-weight:800}.path{display:grid;grid-template-columns:repeat(10,minmax(70px,1fr));gap:10px;padding:16px;border-radius:22px;background:linear-gradient(150deg,#a9ddff,#8bd8ba);box-shadow:inset 0 -8px 0 rgba(43,132,141,.18)}.space{position:relative;min-height:78px;border-radius:18px;background:#fff;border:3px solid #e5edf3;box-shadow:0 6px 0 rgba(65,103,130,.2);display:grid;place-items:center;font-size:28px;font-weight:1000;color:#557087}.space:nth-child(3n){background:#fff1a8}.space:nth-child(3n+1){background:#ffd5df}.space:nth-child(5n){background:#c8f2da}.space.finish{background:#fff;border-color:#f5c63d}.space .space-num{position:absolute;top:5px;left:8px;font-size:12px;color:#8395a5}.token{position:absolute;right:5px;bottom:4px;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 0 rgba(45,63,80,.3);font-size:16px;display:grid;place-items:center}.task-dot{font-size:16px;position:absolute;top:5px;right:7px}.task-card{padding:24px;text-align:center;margin-bottom:18px}.task-badge{display:inline-block;border-radius:999px;background:#c7efff;color:#2672a9;padding:7px 14px;font-weight:900}.task-card h2{font-size:30px;margin:12px 0}.task-prompt{font-size:44px;font-weight:1000;color:#ed6c7e;margin:18px}.task-card p{color:#61748b;font-size:17px}.answers{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.answer{border:0;border-radius:16px;background:#e7f2ff;padding:15px 22px;font-size:20px;font-weight:900;color:#31577c;cursor:pointer;box-shadow:0 4px 0 #bfd7ee}.answer:hover{background:#fff1a8}.text-button{border:0;background:none;color:#5b9eea;font-weight:900;margin-top:14px;cursor:pointer}.feedback{font-size:18px;font-weight:900;min-height:26px;margin-top:12px}.good{color:#33a76c}.bad{color:#df6574}.winner{text-align:center;padding:38px;margin-top:22px}.winner-emoji{font-size:70px}.winner h2{font-size:42px;color:#ed6c7e}@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.topbar .big-button{grid-column:1/-1}.path{grid-template-columns:repeat(5,minmax(54px,1fr));gap:8px}.space{min-height:64px;font-size:22px}.legend{font-size:12px}.hero h1{font-size:50px}}
.friends{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:14px;padding:12px;border-radius:20px;background:#fff4cf}.friend{height:72px;border-radius:16px;background-image:url('./assets-board/characters.png');background-size:500% 300%;background-repeat:no-repeat;box-shadow:0 4px 0 rgba(65,103,130,.15);border:3px solid #fff}.friend:nth-child(1){background-position:0 0}.friend:nth-child(2){background-position:25% 0}.friend:nth-child(3){background-position:50% 0}.friend:nth-child(4){background-position:75% 0}.friend:nth-child(5){background-position:100% 0}.friend:nth-child(6){background-position:0 50%}.friend:nth-child(7){background-position:25% 50%}.friend:nth-child(8){background-position:50% 50%}.friend:nth-child(9){background-position:75% 50%}.friend:nth-child(10){background-position:100% 50%}.friend:nth-child(11){background-position:0 100%}.friend:nth-child(12){background-position:25% 100%}.friend:nth-child(13){background-position:50% 100%}.friend:nth-child(14){background-position:75% 100%}.friend:nth-child(15){background-position:100% 100%}
.roll-button{background:#5b9eea;box-shadow:0 6px 0 #3974bd}
.path-gap{min-height:78px;display:grid;place-items:center;position:relative}.path-gap__line{position:absolute;width:100%;height:10px;border-radius:999px;background:#f7cf58;box-shadow:0 3px 0 rgba(116,93,39,.2)}.path-gap__friend{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 4px 0 rgba(65,103,130,.2);font-size:24px}
.friends{grid-template-columns:repeat(5,1fr)}
.path-divider{grid-column:1 / -1;display:grid;grid-template-columns:repeat(10,1fr);gap:8px;align-items:center;padding:10px 6px;background:#fff4cf;border-radius:18px;border:3px solid #fff;box-shadow:0 4px 0 rgba(65,103,130,.14)}.path-divider span{display:grid;place-items:center;font-size:27px;min-height:42px}
.ages{display:flex;gap:10px;flex-wrap:wrap}.ages label{display:flex;align-items:center;gap:6px;color:#627991;font-weight:900}.ages select{border:2px solid #d8e5ef;border-radius:12px;padding:9px;background:#fff;color:#2f506b;font-weight:800}