:root{--bg:#eef4ea;--bg-sky:linear-gradient(180deg, #cfe8f7 0%, #e9f3e3 70%);--surface:#fff;--surface-2:#f5f8f2;--ink:#1f2a22;--muted:#5e6d62;--line:#d9e3d4;--brand:#2e7d4f;--brand-ink:#fff;--good:#2e9d57;--bad:#d64545;--warn:#f08c1a;--shadow:0 6px 24px #1f2a221a;--radius:16px;--font-head:"Fredoka", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-head);margin:0;font-weight:600}button{font:inherit;color:inherit}.muted{color:var(--muted)}.hint{color:var(--muted);margin:.5rem 0;font-size:.92rem}.btn{cursor:pointer;border:0;border-radius:999px;padding:.65rem 1.2rem;font-weight:700;transition:transform .1s,box-shadow .15s,background .15s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 3px #1d5a37}.btn.primary:hover:not(:disabled){background:#338c59}.btn.ghost{border:2px solid var(--line);background:0 0}.btn.ghost:hover{background:var(--surface-2)}.btn.good{background:var(--good);color:#fff}.btn.bad{background:var(--bad);color:#fff}.btn.big{padding:.85rem 1.5rem;font-size:1.05rem}.btn-row{flex-wrap:wrap;gap:.6rem;margin-top:.75rem;display:flex}.btn-row .btn{flex:1}.icon-btn{border:2px solid var(--line);background:var(--surface);cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;width:38px;height:38px;font-weight:800;display:inline-grid}.icon-btn:hover{background:var(--surface-2)}.swatch{border-radius:4px;flex-shrink:0;width:14px;height:14px;display:inline-block}.swatch.big{border-radius:7px;width:28px;height:28px}.dot{border-radius:50%;flex-shrink:0;width:14px;height:14px}.setup{background:var(--bg-sky);grid-template-columns:1.1fr 1fr;align-items:center;gap:2rem;min-height:100vh;padding:3rem clamp(1rem,5vw,5rem);display:grid}.setup-hero .logo{font-size:4.5rem;animation:30s linear infinite spin-slow;display:inline-block}.setup-hero h1{color:var(--brand);margin:.5rem 0 1rem;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1}.tagline{max-width:34rem;font-size:1.2rem;line-height:1.5}.legend{flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.5rem;display:flex}.legend-item{align-items:center;gap:.45rem;font-weight:600;display:inline-flex}.setup-card{background:var(--surface);box-shadow:var(--shadow);border-radius:24px;padding:2rem}.setup-card h2{font-size:1.6rem}.resume{border-radius:var(--radius);background:#e6f4ea;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;display:flex}.resume div{flex-direction:column;display:flex}.resume span{color:var(--muted);font-size:.9rem}.player-inputs{gap:.6rem;margin:1rem 0;padding:0;list-style:none;display:grid}.player-inputs li{align-items:center;gap:.6rem;display:flex}.player-inputs input{border:2px solid var(--line);min-width:0;font:inherit;border-radius:12px;flex:1;padding:.7rem .9rem;font-size:1rem}.player-inputs input:focus{border-color:var(--brand);outline:none}.color-pick{cursor:pointer;border-radius:50%;flex-shrink:0;width:40px;height:40px;position:relative;box-shadow:inset 0 0 0 3px #ffffff80}.color-pick select{opacity:0;cursor:pointer;position:absolute;inset:0}.setup-actions{flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:1.5rem;display:flex}.game{background:var(--bg);grid-template:"top top top""players board turn"1fr/280px 1fr 380px;height:100vh;display:grid}.topbar{background:var(--surface);border-bottom:1px solid var(--line);grid-area:top;align-items:center;gap:1.5rem;padding:.6rem 1.25rem;display:flex}.brand{font-family:var(--font-head);color:var(--brand);white-space:nowrap;font-size:1.3rem;font-weight:700}.top-actions{gap:.4rem;margin-left:auto;display:flex}.sidebar{padding:1rem;overflow-y:auto}.players-panel{border-right:1px solid var(--line);background:var(--surface-2);grid-area:players}.turn-panel{border-left:1px solid var(--line);background:var(--surface);grid-area:turn}.panel-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:.25rem 0 .6rem;font-size:.8rem}.players{gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none;display:grid}.players li{background:var(--surface);border:2px solid #0000;border-radius:12px;align-items:center;gap:.55rem;padding:.65rem .75rem;transition:border-color .2s,transform .2s;display:flex}.players li.active{border-color:var(--pc);box-shadow:0 4px 14px color-mix(in srgb, var(--pc) 30%, transparent);transform:translate(4px)}.pname{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:700;overflow:hidden}.stat{background:var(--surface-2);white-space:nowrap;border-radius:999px;padding:.15rem .5rem;font-size:.85rem;font-weight:700}.stat.fiches{color:var(--brand);background:#e3f3e8}.stat.waste{color:#7a5a3a;background:#f3ece3}.piles{gap:.5rem;margin-bottom:1.5rem;display:grid}.pile{background:var(--surface);border-radius:12px;align-items:center;gap:.6rem;padding:.55rem .75rem;display:flex}.pile-name{flex:1;font-size:.92rem}.pile strong{font-family:var(--font-head);font-size:1.15rem}.log summary{cursor:pointer;color:var(--muted);font-weight:700}.log ol{color:var(--muted);gap:.35rem;margin:.5rem 0 0;padding:0;font-size:.85rem;list-style:none;display:grid}.board{background:var(--bg-sky);grid-area:board;min-height:0;position:relative;overflow:hidden}.tower-canvas{position:absolute;inset:0}.tower-canvas canvas{touch-action:none;display:block}.board-hint{box-shadow:var(--shadow);pointer-events:none;white-space:nowrap;background:#ffffffeb;border-radius:999px;padding:.5rem 1.1rem;font-weight:700;animation:.3s pop-in;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.board-help{color:var(--muted);pointer-events:none;white-space:nowrap;font-size:.8rem;position:absolute;bottom:.6rem;left:50%;transform:translate(-50%)}.risk-badge{color:#fff;pointer-events:none;border-radius:999px;padding:.3rem .9rem;font-size:.9rem;font-weight:800;position:absolute;top:3.8rem;left:50%;transform:translate(-50%)}.risk-low{background:var(--good)}.risk-mid{background:#c9a227}.risk-high{background:var(--warn)}.risk-max{background:var(--bad);animation:.4s infinite shake}.meter{flex:1;max-width:520px;position:relative}.meter-label{justify-content:space-between;margin-bottom:.25rem;font-size:.9rem;font-weight:700;display:flex}.meter-label strong{font-family:var(--font-head);font-size:1.1rem}.meter-track{grid-template-columns:repeat(10,1fr);gap:3px;display:grid}.meter-seg{background:#e2e8df;border-radius:4px;height:14px;transition:background .4s}.meter-seg.on{background:hsl(calc(120 - var(--i) * 13), 70%, 45%)}.meter-warning{color:#fff;background:var(--bad);z-index:2;border-radius:999px;margin-top:4px;padding:.1rem .6rem;font-size:.78rem;font-weight:800;animation:1s infinite pulse;position:absolute;top:100%;right:0}.meter-danger .meter-label strong{color:var(--bad)}.meter-high .meter-label strong{color:var(--warn)}.meter.flash-up{animation:.5s shake}.meter.flash-up .meter-track{filter:drop-shadow(0 0 6px #d64545cc)}.meter.flash-down .meter-track{filter:drop-shadow(0 0 6px #2e9d57cc)}.turn-head{border-radius:var(--radius);background:color-mix(in srgb, var(--pc) 14%, white);border-left:6px solid var(--pc);flex-direction:column;margin-bottom:1rem;padding:.8rem 1rem;display:flex}.turn-no{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:700}.turn-name{font-family:var(--font-head);font-size:1.5rem;font-weight:600}.dice-row{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.die{flex-direction:column;align-items:center;gap:.25rem;display:flex}.die-face{border-radius:14px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:64px;height:64px;padding:9px;display:grid;box-shadow:inset 0 -4px #0003,0 4px 10px #00000026}.die-face.empty{background:var(--surface-2);border:2px dashed var(--line);box-shadow:none;font-family:var(--font-head);color:var(--muted);grid-template-columns:1fr;place-items:center;font-size:1.6rem;display:grid}.die-face span{place-items:center;display:grid}.die-face .pip:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 1.5px #00000040}.die.rolling .die-face{animation:.25s linear infinite roll}.die-label{font-size:.8rem;font-weight:800}.held{background:var(--surface-2);border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .75rem;font-size:.9rem;font-weight:700;display:flex}.phase-body{animation:.35s slide-in}.game-card{background:var(--surface-2);border:3px solid var(--line);box-shadow:var(--shadow);border-radius:20px;padding:1.2rem;animation:.5s card-flip}.game-card h3{margin:.2rem 0 .5rem;font-size:1.35rem}.card-type{text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:999px;padding:.2rem .65rem;font-size:.75rem;font-weight:800;display:inline-block}.card-knowledge{background:#eef5fd;border-color:#2f7fd1}.card-knowledge .card-type{background:#2f7fd1}.card-action{background:#fdf1ec;border-color:#e4572e}.card-action .card-type{background:#e4572e}.card-choice{background:#f6eefa;border-color:#8e44ad}.card-choice .card-type{background:#8e44ad}.card-event{background:#fff8e8;border-color:#f3a712}.card-event .card-type{background:#d98e04}.card-text{margin:.6rem 0;font-size:1.1rem;font-weight:600;line-height:1.45}.answer{background:#fff;border-radius:12px;padding:.75rem .9rem;line-height:1.45;animation:.3s pop-in}.answer span{text-transform:uppercase;color:var(--muted);font-size:.75rem;font-weight:800;display:block}.timer{background:#00000012;border-radius:999px;place-items:center;height:30px;margin:.6rem 0;font-weight:800;display:grid;position:relative;overflow:hidden}.timer-bar{background:var(--good);transition:width .2s linear,background .3s;position:absolute;top:0;bottom:0;left:0}.timer span{position:relative}.timer.warn .timer-bar{background:#c9a227}.timer.urgent .timer-bar{background:var(--warn)}.timer.critical .timer-bar{background:var(--bad)}.timer.critical{animation:.5s infinite pulse}.votes{gap:.45rem;margin:.5rem 0 0;padding:0;list-style:none;display:grid}.votes li{background:#fff;border-radius:12px;align-items:center;gap:.45rem;padding:.45rem .6rem;display:flex}.vote-name{text-overflow:ellipsis;flex:1;font-weight:700;overflow:hidden}.chip-btn{border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;padding:.3rem .7rem;font-size:.85rem;font-weight:700}.chip-btn.good.active{background:var(--good);border-color:var(--good);color:#fff}.chip-btn.bad.active{background:var(--bad);border-color:var(--bad);color:#fff}.choices{gap:.6rem;display:grid}.choice{text-align:left;cursor:pointer;border:3px solid #0000;border-radius:14px;gap:.25rem;padding:.8rem .9rem;transition:transform .15s,border-color .15s;display:grid}.choice:hover{transform:translateY(-2px)}.choice-a{background:#f4ece6}.choice-a:hover{border-color:#7a5a3a}.choice-b{background:#e3f3e8}.choice-b:hover{border-color:var(--good)}.choice-key{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:800}.choice-text{font-size:1.02rem;font-weight:700}.choice-effect{color:var(--muted);font-size:.82rem}.effects,.result-stats{flex-wrap:wrap;gap:.4rem;margin:.6rem 0;display:flex}.effect{color:#fff;border-radius:999px;padding:.25rem .7rem;font-size:.85rem;font-weight:800;animation:.4s pop-in}.effect.good{background:var(--good)}.effect.bad{background:var(--bad)}.color-select h3{margin-bottom:.3rem}.color-grid{grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem;display:grid}.color-btn{text-align:left;border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;align-items:center;gap:.6rem;padding:.7rem;transition:border-color .15s,transform .15s;display:flex}.color-btn .swatch{background:var(--c)}.color-btn:hover:not(:disabled){border-color:var(--c);transform:translateY(-2px)}.color-btn:disabled{opacity:.35;cursor:not-allowed}.color-btn span:last-child{flex-direction:column;display:flex}.color-btn small{color:var(--muted);font-size:.78rem}.pick-info{border-radius:var(--radius);background:var(--surface-2);align-items:flex-start;gap:.8rem;padding:1rem;display:flex}.result{border-radius:20px;padding:1.2rem;animation:.4s pop-in}.result.success{border:3px solid var(--good);background:#e3f3e8}.result.fail{border:3px solid var(--bad);background:#fbeaea}.result h3{font-size:1.5rem}.result ul{padding-left:1.1rem;line-height:1.5}.result .btn{width:100%}.modal-backdrop{z-index:50;background:#141e168c;place-items:center;padding:1rem;animation:.25s fade-in;display:grid;position:fixed;inset:0}.modal{background:var(--surface);border-radius:24px;width:min(640px,100%);max-height:calc(100vh - 2rem);padding:1.75rem;animation:.35s pop-in;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal .close{position:absolute;top:1rem;right:1rem}.rules h3{margin-top:1.2rem}.rules li{margin:.35rem 0;line-height:1.45}.rule-colors{padding:0;list-style:none}.rule-colors li{align-items:baseline;gap:.5rem;display:flex}.end{text-align:center;width:min(520px,100%)}.end-emoji{font-size:4rem;animation:1s infinite alternate bounce}.end h2{font-size:2rem}.end-meter h2{color:var(--bad)}.end-cycle h2{color:var(--good)}.end-message{font-size:1.05rem;line-height:1.5}.ranking{text-align:left;gap:.4rem;margin:1rem 0;padding:0;list-style:none;display:grid}.ranking li{background:var(--surface-2);border-radius:12px;align-items:center;gap:.6rem;padding:.6rem .8rem;display:flex}.ranking li.winner{background:#fff4d6;border:2px solid #f3a712}.rank-name{flex:1;font-weight:800}.rank-stat{font-size:.9rem;font-weight:700}@keyframes spin-slow{to{transform:rotate(360deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(.9)}}@keyframes fade-in{0%{opacity:0}}@keyframes slide-in{0%{opacity:0;transform:translateY(12px)}}@keyframes card-flip{0%{opacity:0;transform:perspective(600px)rotateY(-70deg)}}@keyframes roll{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(.9)}to{transform:rotate(360deg)scale(1)}}@keyframes shake{0%,to{translate:0}25%{translate:-3px}75%{translate:3px}}@keyframes pulse{50%{opacity:.6}}@keyframes bounce{to{transform:translateY(-10px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=1100px){.game{grid-template-columns:230px 1fr 330px}}@media (width<=860px){.setup{grid-template-columns:1fr;padding:1.5rem 1rem}.setup-card{padding:1.25rem}.game{grid-template:"top""board"58vh"turn""players"/1fr;height:auto;min-height:100vh}.topbar{z-index:10;flex-wrap:wrap;gap:.5rem 1rem;padding:.6rem 1rem;position:sticky;top:0}.meter{flex-basis:100%;order:3;max-width:none}.sidebar{border:0;overflow:visible}.board,.turn-panel{scroll-margin-top:110px}.players{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.players li.active{transform:none}.board-hint{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 2rem)}}
