/* Circle of Indian Life: page layout on top of the india.gg game page shell. Warm paper card and stage, dark site chrome. */
.cl{--ink:#22150d;--paper:#fff8e8;--sand:#fde8c0}
.cl .hud .pill.gen b{color:#ffcf99}
.cl .hud .who{font-weight:800;color:#eef0f6;overflow:hidden;text-overflow:ellipsis}
.cl .tm{appearance:none;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#cfd5e3;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;white-space:nowrap;min-height:44px}
.cl .tm[aria-pressed="true"]{background:rgba(255,153,51,.18);border-color:#ff9933;color:#ffe2c2}
.cl .stage{display:flex;flex-direction:column;background:#140f0a;align-items:center}
.cl .play{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;flex:1;min-height:0}
.cl .card{background:var(--paper);color:var(--ink);border-bottom:3px solid var(--ink);padding:7px 12px 9px;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;flex:none}
.cl .card.in{animation:clIn .35s ease-out}
@keyframes clIn{from{opacity:.2;transform:translateY(-6px)}}
.cl .meters{display:flex;align-items:center;gap:7px;min-height:38px}
.cl .m{display:inline-flex;align-items:center;gap:3px;background:#f6e6c3;border:2px solid var(--ink);border-radius:14px;padding:2px 8px 2px 4px;font-size:13px;position:relative;font-variant-numeric:tabular-nums}
.cl .m svg{width:18px;height:18px}
.cl .m b{min-width:1.4em;text-align:right}
.cl .m small{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.cl .m.bump{animation:bump .3s ease-out}
.cl .m .pop{position:absolute;left:50%;top:-8px;transform:translateX(-50%);font-weight:900;font-size:13px;font-style:normal;animation:mpop 1.6s ease-out forwards;white-space:nowrap;pointer-events:none}
.cl .m .pop.up{color:#1f7a3d}.cl .m .pop.down{color:#b3261e}
@keyframes mpop{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
.cl .timer{width:38px;height:38px;margin-left:auto;flex:none}
.cl .timer[hidden]{display:none}
.cl .timer .secs{font-size:13px;font-weight:800;fill:var(--ink)}
.cl .timer.warn .ring{stroke:#c6302a}.cl .timer.warn{animation:clShake .3s infinite}
@keyframes clShake{50%{transform:translateX(1px)}}
.cl .tags{display:flex;gap:5px;align-items:center;margin-top:4px;flex-wrap:wrap}
.cl .tag{display:inline-block;background:var(--ink);color:#fbe9c6;font-size:11px;font-weight:700;padding:1px 8px;border-radius:9px}
.cl .tag.mirror{background:#2f4a9c}.cl .tag.funny{background:#c2410c}
.cl .tag[hidden]{display:none}
.cl .card h2{margin:3px 0 0;font-size:16px;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.cl .card p{margin:2px 0 0;font-size:14px;line-height:1.33;font-weight:600;color:var(--ink)}
.cl .sw{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;background:var(--sand)}
.cl #stageSvg{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:400/520;touch-action:none;background:var(--sand)}
.cl .glow{fill:rgba(255,226,120,.18);stroke:#ffb627;stroke-width:3;animation:clGlow 1.3s ease-in-out infinite;pointer-events:none}
.cl .glow.src{stroke:#fff;stroke-dasharray:6 6;fill:none;animation:clDash 1s linear infinite}
.cl .glow.hot,.cl .hot .glow{stroke:#ff7a1a;stroke-width:5;fill:rgba(255,190,90,.3)}
.cl .picked .glow{stroke:#2f8f4e;stroke-width:5;animation:none;opacity:1}
@keyframes clGlow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes clDash{to{stroke-dashoffset:-12}}
.cl .cap rect{fill:var(--ink);opacity:.88}.cl .cap text{fill:#fff6dc;font-size:11px;font-weight:700;font-family:"Trebuchet MS",sans-serif}
.cl .cap.gold rect{fill:#a86b00;opacity:1}.cl .gold .glow{stroke:#ffd23f;stroke-width:4}
.cl .dim .glow{opacity:.25;animation:none}.cl .cap.dim{opacity:.55}
.cl .hit{fill:transparent;cursor:pointer;outline:none}
.cl .hit:focus-visible+.focusring,.cl .hitg:focus-visible .focusring{stroke:#2f4a9c;stroke-width:3;stroke-dasharray:4 3}
.cl .hitg{outline:none;cursor:pointer}
.cl .focusring{fill:none;stroke:transparent;pointer-events:none}
.cl .snap .glow{stroke:#2f8f4e;stroke-width:6}
.cl .tip{position:absolute;width:max-content;max-width:220px;background:var(--ink);color:#fff6dc;font-size:13px;line-height:1.3;padding:7px 10px;border-radius:10px;transform:translate(-50%,-100%);pointer-events:none;z-index:6;font-family:"Trebuchet MS",sans-serif}
.cl .tip[hidden]{display:none}
.cl .tip:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.cl .say{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;box-shadow:0 4px 0 var(--ink);font-family:"Trebuchet MS",sans-serif;cursor:pointer}
.cl .say[hidden]{display:none}
.cl .say.in{animation:clRise .35s ease-out}
.cl .say p{margin:0;font-size:15px;font-weight:700;line-height:1.35}
.cl .say .deltas{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cl .say .d{font-size:12px;font-weight:900;padding:2px 8px;border-radius:999px;border:1.5px solid var(--ink)}
.cl .say .d.up{background:#d3f5df;color:#0d6b32}.cl .say .d.down{background:#ffd6d2;color:#9b1c13}.cl .say .d.jug{background:#ffe08a;color:#6b4300}
.cl .say .echo{display:inline-block;margin-bottom:5px;font-size:12px;font-weight:900;color:#fff;background:#2f4a9c;border-radius:9px;padding:2px 8px}
.cl .say .flag{display:inline-block;margin-bottom:5px;font-size:12px;font-weight:900;color:#fff;background:#c6302a;border-radius:9px;padding:2px 8px}
.cl .say .tap{display:block;margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a6a43}
@keyframes clRise{from{transform:translateY(16px);opacity:0}}
.cl .tml{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;gap:6px;max-height:60%;overflow:auto}
.cl .tml[hidden]{display:none}
.cl .tml .ch{display:flex;gap:8px;align-items:flex-start;text-align:left;font:inherit;font-family:"Trebuchet MS",sans-serif;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:7px 10px;box-shadow:0 2px 0 var(--ink);cursor:pointer;min-height:44px}
.cl .tml .ch .k{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff6dc;display:grid;place-items:center;font-size:12px;font-weight:900}
.cl .tml .ch b{display:block;font-size:14px}.cl .tml .ch .tx span{font-size:12.5px;font-weight:600;line-height:1.3}
.cl .tml .ch.gold{border-color:#a86b00;background:#fff1c7}.cl .tml .ch.dim{opacity:.7}
.cl .tml .ch.picked{background:#d3f5df}
.cl .banner{position:absolute;left:12px;right:12px;top:12px;z-index:5;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:0 4px 0 var(--ink);text-align:center;font-family:"Trebuchet MS",sans-serif;animation:clRise .4s ease-out}
.cl .banner[hidden]{display:none}
.cl .banner h3{margin:0 0 6px;font-size:17px;font-weight:900}
.cl .banner .mode{display:inline-block;font-size:12px;font-weight:900;color:#fff;border-radius:9px;padding:2px 10px;margin-bottom:6px}
.cl .banner.repeat .mode{background:#2f8f4e}.cl .banner.rebel .mode{background:#d8432f}.cl .banner.mix .mode{background:#2f4a9c}
.cl .banner p{margin:0 0 8px;font-size:14px;font-weight:600}
.cl .banner .btn{width:100%}
/* overlays */
.cl .panel .art{width:220px;height:150px;animation:none}
.cl .found{display:inline-flex;gap:6px;align-items:center;font-size:.8rem;font-weight:800;color:#ffd9a8;background:rgba(255,153,51,.1);border:1px solid rgba(255,153,51,.35);border-radius:999px;padding:4px 10px;margin:0 0 8px}
.cl .rules{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px;text-align:left}
.cl .rules div{font-size:.78rem;color:#b4bccd;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px}
.cl .rules b{display:block;color:#fff;font-size:.82rem}
.cl .resume{display:flex;flex-direction:column;align-items:center;gap:0}
.cl .resume[hidden]{display:none}
.cl .resume small{font-weight:600;opacity:.8;font-size:.72rem}
.cl .cradles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.cl .cradle{appearance:none;font:inherit;cursor:pointer;border-radius:18px;border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#eef0f6;padding:10px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:44px}
.cl .cradle:hover,.cl .cradle:focus-visible{border-color:#ff9933;background:rgba(255,153,51,.12);outline:none}
.cl .cradle svg{width:92px;height:64px}
.cl .cradle b{font-size:1.1rem}.cl .cradle span{font-size:.72rem;color:#8b94ab;font-weight:700}
.cl .stamp{display:inline-block;margin:2px 0 8px;padding:5px 14px;border:3px solid #ffd166;color:#ffd166;border-radius:10px;font-weight:900;letter-spacing:.12em;font-size:.86rem;transform:rotate(-4deg);animation:clStamp .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes clStamp{from{transform:rotate(-4deg) scale(2.2);opacity:0}}
.cl .who2{font-size:.8rem;color:#8b94ab;font-weight:700;margin:-2px 0 6px}
.cl .goes{color:#ffcf99;font-weight:800;font-style:italic}
.cl .legs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:0 0 6px}
.cl .legs[hidden]{display:none}
.cl .legend{font-size:.72rem;font-weight:800;color:#1d1104;background:linear-gradient(180deg,#ffd08a,#ff9933);border-radius:999px;padding:3px 9px}
.cl .stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 8px}
.cl .stats3 div{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px 4px}
.cl .stats3 span{display:block;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8b94ab}
.cl .stats3 b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.cl .stats5{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 6px}
.cl .stats5 div{background:rgba(0,0,0,.22);border-radius:10px;padding:5px 2px}
.cl .stats5 span{display:block;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8b94ab}
.cl .stats5 b{font-size:.86rem;font-variant-numeric:tabular-nums}
.cl #tree .panel{max-width:400px}
.cl #treeSvg{display:block;width:100%;height:auto;border-radius:16px;margin:4px 0 8px}
.cl .coll{margin:10px 0 2px;text-align:left}
.cl .coll h3{margin:0 0 6px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#8b94ab;display:flex;justify-content:space-between}
.cl .coll ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.cl .coll li{font-size:.7rem;font-weight:700;line-height:1.2;padding:6px 7px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:#5d6680;min-height:2.4em;display:flex;align-items:center}
.cl .coll li.got{color:#eef0f6;border-color:rgba(255,153,51,.3);background:rgba(255,153,51,.08)}
.cl .coll li.got.fin{border-color:rgba(95,211,138,.4);background:rgba(95,211,138,.1)}
.cl .coll p.legs{display:block;font-size:.74rem;color:#b4bccd;text-align:left;margin-top:8px}
.cl .hidden{display:none}
.cl.textmode .glow{opacity:.35}
@media(max-height:700px){.cl .card h2{font-size:15px}.cl .card p{font-size:13px}.cl .meters{min-height:32px}.cl .panel .art{height:110px}}
@media(prefers-reduced-motion:reduce){.cl .glow,.cl .glow.src,.cl .timer.warn,.cl .card.in,.cl .say.in,.cl .banner,.cl .stamp{animation:none}}