:root{color-scheme:light dark;--bg:#edf5f0;--panel:#fff;--ink:#10251d;--muted:#52675e;--line:#b9d0c5;--green:#147a47;--green2:#20a464;--gold:#f0b72f;--red:#c74646;--blue:#2a70c9;--shadow:0 14px 38px #163d2a22;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#d9f2e4,transparent 38%),var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.skip{position:fixed;left:8px;top:-100px;z-index:9999;background:#fff;color:#000;padding:12px}.skip:focus{top:8px}.app-head{min-height:96px;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:14px;align-items:center;padding:14px clamp(14px,4vw,38px);background:#10261e;color:#f7fff9;border-bottom:4px solid var(--gold)}.app-head h1{margin:2px 0;font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.05}.app-head p{margin:3px 0;color:#bdd5c8}.app-head small{color:#75dda7;font-weight:800;letter-spacing:.08em}.back,.icon-button{display:grid;place-items:center;min-width:48px;min-height:48px;border:1px solid #ffffff44;border-radius:12px;background:#ffffff12;color:#fff;text-decoration:none;font-size:1.45rem;cursor:pointer}.back:focus-visible,.icon-button:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
main{width:min(1180px,100%);margin:0 auto;padding:clamp(14px,3vw,34px);min-height:calc(100vh - 156px)}.panel{background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,28px);box-shadow:var(--shadow)}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px}.controls label{display:grid;gap:5px;font-weight:750}.controls input,.controls select,.input{min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);padding:10px 12px;min-width:150px}button.primary,button.secondary,.action{min-height:48px;padding:10px 18px;border-radius:10px;border:1px solid #0e6138;background:var(--green);color:#fff;font-weight:850;cursor:pointer}button.secondary{background:var(--panel);color:var(--ink);border-color:var(--line)}button:disabled{opacity:.55;cursor:not-allowed}.status{min-height:50px;padding:12px 14px;border-radius:12px;background:#e5f4eb;border:1px solid #b6dac5;font-weight:750}.result{padding:22px;border-radius:18px;background:linear-gradient(135deg,#17382a,#235541);color:white;text-align:center}.result strong.big{display:block;font-size:clamp(2.7rem,10vw,6rem);color:#ffe08a}.meter-grid,.stats-grid,.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.stat,.topic-card{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.stat b{display:block;font-size:1.35rem;color:var(--green)}.notice{padding:12px;border-radius:10px;background:#fff4cc;color:#593f00;border:1px solid #dfbd4d}.danger{background:#fee9e7;color:#6e1814;border-color:#eaa4a0}.hidden{display:none!important}footer{min-height:60px;display:flex;gap:18px;justify-content:space-between;align-items:center;padding:12px clamp(14px,4vw,38px);background:#10261e;color:#c9ddd3}footer a{color:#fff}
.board-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,320px);gap:20px;align-items:start}.board{width:min(100%,700px);aspect-ratio:1;display:grid;margin:auto;touch-action:manipulation;user-select:none}.cell{min-width:0;min-height:0;border:1px solid #1a3d2d;background:#f6fff9;color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer}.cell.dark{background:#47705d}.cell.light{background:#dae9e1}.piece{width:72%;height:72%;border-radius:50%;box-shadow:inset 0 -5px 9px #0004,0 3px 5px #0005}.p1{background:#f2c13c}.p2{background:#db4f4f}.piece.king::after{content:"★";display:grid;place-items:center;width:100%;height:100%;color:#fff;font-size:clamp(.8rem,4vw,1.5rem)}.winning{animation:pulse .7s alternate infinite;outline:4px solid #fff}.connect-board{aspect-ratio:7/6;grid-template-columns:repeat(7,1fr);background:#2366b5;padding:7px;gap:4px;border-radius:14px}.connect-board .cell{border-radius:50%;border:0;background:#eaf2ee}.connect-board .piece{width:86%;height:86%}.connect-board .piece.just-dropped{animation:drop .28s ease-out}.gomoku-board{grid-template-columns:repeat(15,1fr);background:#d8ad69;padding:8px}.gomoku-board .cell{position:relative;border:0;background:linear-gradient(90deg,transparent 47%,#664a27 48% 52%,transparent 53%),linear-gradient(transparent 47%,#664a27 48% 52%,transparent 53%)}.gomoku-board .piece{position:absolute;width:82%;height:82%}.dots-board{grid-template-columns:repeat(11,1fr);background:#fff}.dot,.edge,.box{display:grid;place-items:center}.dot::after{content:"";width:36%;height:36%;border-radius:50%;background:#17382a}.edge{border:0;background:transparent;cursor:pointer}.edge:hover,.edge:focus-visible{background:#a9dbc0}.edge.taken{background:var(--green)}.box.p1{background:#ffe49a}.box.p2{background:#ffc2c2}.master-row{display:grid;grid-template-columns:minmax(100px,1fr) auto;gap:10px;align-items:center;margin:8px 0}.peg-list{display:flex;gap:7px;flex-wrap:wrap}.peg{width:42px;height:42px;border-radius:50%;border:2px solid #ffffff88}.palette{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.palette button{width:48px;height:48px;border:3px solid transparent;border-radius:50%;cursor:pointer}.palette button[aria-pressed=true]{border-color:#111;outline:3px solid var(--gold)}
.name-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.question-card{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-grid button[aria-pressed=true]{background:var(--green);color:#fff}.share-card{position:relative;overflow:hidden}.share-card::before{content:"";position:absolute;inset:-50%;background:conic-gradient(#1b7048,#f0b72f,#2379b8,#1b7048);opacity:.13;animation:spin 12s linear infinite}.share-card>*{position:relative}.mixer-stage{position:relative;display:grid;place-items:center;min-height:clamp(500px,72vh,680px);margin-top:16px;padding:24px 12px;background:radial-gradient(circle at 50% 28%,#f8fff7 0,#b8f2d0 32%,#58b887 70%,#174f37 100%);border-radius:20px;overflow:hidden;isolation:isolate}.mixer-stage::before,.mixer-stage::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.32;z-index:-1}.mixer-stage::before{width:420px;height:420px;background:#ffdd70;left:-150px;top:-180px}.mixer-stage::after{width:360px;height:360px;background:#56bdf5;right:-130px;bottom:-140px}.mixer-figure{position:relative;height:clamp(440px,64vh,620px);width:auto;max-width:86vw;aspect-ratio:.46;display:grid;grid-template-rows:29fr 27fr 28fr 16fr;overflow:hidden;border-radius:42% 42% 20% 20%;filter:drop-shadow(0 24px 18px #081c1466);user-select:none;touch-action:pan-y;animation:mixer-float 4.6s ease-in-out infinite}.mixer-photo-stack{position:absolute;inset:0;z-index:1;pointer-events:none}.mixer-row{position:relative;z-index:2;min-height:0;cursor:ew-resize}.mixer-photo-part{position:absolute;left:0;right:0;top:var(--part-top);bottom:var(--part-bottom);background-image:var(--atlas);background-repeat:no-repeat;background-size:500% var(--bg-h);background-position:var(--x) var(--y);will-change:background-position}.mixer-layer-head{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - var(--fade)),transparent 100%);z-index:1}.mixer-layer-torso,.mixer-layer-legs{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}.mixer-layer-torso{z-index:2}.mixer-layer-legs{z-index:3}.mixer-layer-feet{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 100%);z-index:4}.mixer-controls{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;margin:8px 0}.mixer-controls button{min-height:48px}.mixer-controls span{text-align:center;font-weight:800}.legendary{display:inline-block;padding:8px 14px;border-radius:999px;background:#4b1b73;color:#fff6ad;font-weight:900}.favorite-list{display:grid;gap:8px}.favorite-list li{display:flex;justify-content:space-between;align-items:center;gap:12px}.topic-card button{width:100%;text-align:left;background:transparent;color:inherit;border:0;cursor:pointer}.topic-detail img{width:100%;max-height:360px;object-fit:cover;border-radius:14px}.quiz-options{display:grid;gap:8px}.quiz-options button{text-align:left}.offline-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#dff4e8;color:#155b37;font-weight:800}
.opponent-picker{display:grid;grid-template-columns:repeat(2,minmax(150px,230px));gap:10px;margin-bottom:18px}.mode-button{min-height:52px;border:2px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);font-weight:850;cursor:pointer}.mode-button.active{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 7px 18px #147a4733}.friend-lobby{margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--panel) 82%,var(--green) 18%)}.friend-lobby .controls{margin-bottom:8px}.room-message{min-height:28px;margin:6px 0;font-weight:800}.invite-card{display:grid;grid-template-columns:minmax(150px,1fr) minmax(240px,2fr);gap:16px;align-items:center;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}.invite-card strong{display:block;font-size:clamp(2rem,7vw,3.6rem);letter-spacing:.15em;color:var(--green)}.invite-card p{margin:4px 0}.invite-actions{display:flex;flex-wrap:wrap;gap:9px}.invite-actions>*{flex:1 1 130px;text-align:center}.whatsapp{display:flex;align-items:center;justify-content:center;background:#168a48;text-decoration:none}.room-qr{grid-column:1/-1;width:min(280px,100%);margin:auto;padding:12px;background:#fff;border-radius:13px}.room-qr svg{display:block;width:100%;height:auto}.player-chip{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 9px;border-radius:999px;font-size:.78rem;font-weight:900}.player-chip.p1{background:#f2c13c;color:#332600}.player-chip.p2{background:#db4f4f;color:#fff}.master-row:has(.player-chip){grid-template-columns:auto minmax(100px,1fr) auto}
@keyframes drop{from{transform:translateY(-400%)}to{transform:none}}@keyframes pulse{to{filter:brightness(1.5)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes mixer-float{50%{transform:translateY(-7px) rotate(.35deg)}}
@media(prefers-color-scheme:dark){:root{--bg:#07110d;--panel:#122019;--ink:#effaf4;--muted:#a6bbb0;--line:#334b40;--shadow:0 14px 38px #0008}.status{background:#173526;border-color:#316748}.notice{background:#3a3015;color:#ffe9a4}.danger{background:#3f1c1c;color:#ffceca}.connect-board .cell{background:#13211b}.dots-board{background:#d8e9df;color:#10251d}}
@media(max-width:760px){.app-head{grid-template-columns:48px minmax(0,1fr) 48px}.app-head p{display:none}.board-wrap{grid-template-columns:1fr}.board{width:100%}.cell{touch-action:manipulation}.mixer-stage{min-height:clamp(430px,58vh,520px);padding-inline:4px}.mixer-figure{height:clamp(360px,50vh,430px);width:auto;max-width:82vw}.controls>*{flex:1 1 145px}.controls button{flex:1 1 145px}.opponent-picker{grid-template-columns:1fr 1fr}.invite-card{grid-template-columns:1fr}.invite-actions>*{flex:1 1 120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
@media print{.app-head,.controls,footer,.rk-help-trigger{display:none!important}main{padding:0}.panel{box-shadow:none;border:0}}
.checkers-board{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}.checkers-board .cell{overflow:hidden}.checkers-board .piece{display:grid;min-width:0;min-height:0}
.mixer-layer-head{clip-path:polygon(0 0,100% 0,100% 70%,82% 88%,66% 100%,34% 100%,18% 88%,0 70%)}

/* Backgammon keeps the shared game shell but uses a full 24-point board. */
.backgammon-wrap{grid-template-columns:minmax(0,1fr) minmax(230px,310px)}
.backgammon-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:0 auto 10px;max-width:850px}.backgammon-toolbar p{margin:0;color:var(--muted);font-weight:700}.bg-dice{display:flex;gap:7px;margin-top:5px}.bg-die{width:52px;height:52px;border:2px solid #6d391f;border-radius:12px;background:#fff8e9;color:#23130c;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #6d391f}.bg-die span{font-size:2rem;line-height:.8}.bg-die small{font-size:.65rem}.bg-die.active{background:#ffd45e;outline:4px solid #1d8b68;transform:translateY(-2px)}
.backgammon-board{position:relative;display:grid;grid-template-columns:repeat(6,minmax(34px,1fr)) minmax(46px,.72fr) repeat(6,minmax(34px,1fr));grid-template-rows:1fr 1fr;width:min(100%,850px);aspect-ratio:1.68;margin:auto;padding:12px 72px 12px 12px;gap:0;background:linear-gradient(135deg,#6f351d,#3b1b10);border:9px solid #3b1b10;border-radius:18px;box-shadow:inset 0 0 0 3px #d79a4e,0 14px 30px #10231c55;overflow:hidden;touch-action:manipulation;user-select:none}
.bg-point{position:relative;min-width:0;border:0;background:transparent;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;padding:0 2px;cursor:pointer;color:#fff;overflow:hidden}.bg-point.bg-bottom{justify-content:flex-end;flex-direction:column-reverse}.bg-point::before{content:"";position:absolute;inset:0 5%;z-index:0;filter:drop-shadow(0 2px 1px #0005)}.bg-top::before{clip-path:polygon(0 0,100% 0,50% 92%)}.bg-bottom::before{clip-path:polygon(50% 8%,100% 100%,0 100%)}.bg-light::before{background:linear-gradient(#f1c881,#d99d4f)}.bg-dark::before{background:linear-gradient(#146b62,#0d443f)}.bg-point-number{position:absolute;z-index:2;font-size:.68rem;font-weight:900;opacity:.74;top:2px}.bg-bottom .bg-point-number{top:auto;bottom:2px}.bg-checkers{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;width:100%;padding-top:9px}.bg-bottom .bg-checkers{padding-top:0;padding-bottom:9px;flex-direction:column-reverse}.bg-checker{display:inline-block;width:clamp(22px,3.2vw,38px);height:clamp(22px,3.2vw,38px);border-radius:50%;border:2px solid #0005;box-shadow:inset 0 0 0 3px #fff4,inset 0 -5px 7px #0003,0 2px 4px #0005;flex:0 0 auto}.bg-checkers .bg-checker{margin-top:clamp(-10px,-.8vw,-5px)}.bg-bottom .bg-checkers .bg-checker{margin-top:0;margin-bottom:clamp(-10px,-.8vw,-5px)}.bg-player-1{background:radial-gradient(circle at 35% 28%,#fff9dd,#f1be42 58%,#9b5c0e)}.bg-player-2{background:radial-gradient(circle at 35% 28%,#ffb2a4,#c72d46 58%,#641129)}.bg-checkers b{background:#071b18dd;color:#fff;border-radius:999px;padding:1px 5px;font-size:.68rem}
.bg-point.is-source,.bg-bar.is-source{filter:drop-shadow(0 0 8px #70ffd0)}.bg-point.is-selected,.bg-bar.is-selected{outline:4px solid #ffd45e;outline-offset:-4px}.bg-point.is-target::after,.bg-off.is-target::after{content:"";position:absolute;z-index:5;width:22px;height:22px;border-radius:50%;background:#71f3bd;box-shadow:0 0 0 5px #fff8;top:50%;left:50%;translate:-50% -50%}.bg-point:focus-visible,.bg-bar:focus-visible,.bg-off:focus-visible,.bg-die:focus-visible{outline:4px solid #fff;outline-offset:-4px}
.bg-bar{background:linear-gradient(90deg,#29120b,#5c2d18,#29120b);color:#fff;border:0;border-inline:3px solid #d79a4e;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:9px 2px;cursor:pointer}.bg-bar strong{font-size:.72rem;writing-mode:vertical-rl;letter-spacing:.08em}.bg-bar-stack{display:flex;flex-direction:column;gap:8px}.bg-bar-stack>span{display:grid;place-items:center;font-weight:900}.bg-bar .bg-checker,.bg-off .bg-checker,.bg-score .bg-checker{width:24px;height:24px}
.bg-off{position:absolute;right:8px;top:12px;bottom:12px;width:56px;border:2px solid #d79a4e;border-radius:10px;background:#24130d;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-around;cursor:pointer}.bg-off>span{display:grid;place-items:center;font-weight:900}.bg-score{display:grid;gap:8px;margin:12px 0}.bg-score>div{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:9px;border:1px solid #ffffff2b;border-radius:12px;background:#ffffff10}.bg-score>div>span:last-child{grid-column:2;color:var(--muted);font-size:.88rem}
@media(max-width:760px){main:has(.backgammon-wrap){padding-inline:4px}.panel:has(.backgammon-wrap){padding-inline:6px}.backgammon-wrap{grid-template-columns:minmax(0,1fr)}.backgammon-wrap>div,.backgammon-wrap aside{min-width:0}.backgammon-toolbar{align-items:flex-start;flex-direction:column;min-width:0}.backgammon-toolbar p{max-width:100%;overflow-wrap:anywhere}.backgammon-board{width:100%;min-width:0;padding:7px 52px 7px 7px;border-width:5px;border-radius:12px;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(28px,.72fr) repeat(6,minmax(0,1fr));min-height:330px}.bg-off{width:42px;right:4px;top:7px;bottom:7px}.bg-checker{width:clamp(17px,6vw,30px);height:clamp(17px,6vw,30px);border-width:1px}.bg-checkers .bg-checker{margin-top:-7px}.bg-bottom .bg-checkers .bg-checker{margin-bottom:-7px}.bg-point-number{font-size:.58rem}.bg-die{width:48px;height:48px}.backgammon-wrap aside{margin-top:0}}
@media(max-width:430px){.backgammon-board{aspect-ratio:1.18;min-height:390px;padding-right:47px}.bg-off{width:38px}.bg-bar strong{font-size:.6rem}.bg-checker{width:19px;height:19px}.bg-checkers .bg-checker{margin-top:-5px}.bg-bottom .bg-checkers .bg-checker{margin-bottom:-5px}}

/* Mastermind: polished glass-like code pegs and a tactile colour tray. */
.favorite-list li{overflow-wrap:anywhere;min-width:0;gap:10px}
.favorite-list li button{flex-shrink:0;width:auto;white-space:normal}
.master-row .peg,#current .peg,#palette button{font-weight:800;text-align:center;color:#fff;text-shadow:0 1px 3px #000,0 0 2px #000}
.master-row .peg,#current .peg{position:relative;display:inline-block;width:clamp(34px,5vw,46px);height:clamp(34px,5vw,46px);flex:0 0 auto;border:2px solid #fff9;border-radius:50%;box-shadow:inset 0 3px 5px #fff9,inset 0 -8px 11px #07140f88,0 5px 9px #07140f77,0 0 0 2px #34483d;background-image:radial-gradient(circle at 31% 23%,#ffffffed 0 6%,#ffffff7d 7% 15%,transparent 16%),radial-gradient(circle at 70% 82%,#0006,transparent 44%)}
.master-row .peg.empty,#current .peg.empty{background:radial-gradient(circle at 34% 26%,#ffffffaa,#9eaaa4 28%,#36433d 74%,#18221e);border-color:#c2d0c8;box-shadow:inset 0 4px 7px #fff8,inset 0 -8px 12px #0009,0 4px 8px #07140f88}
.palette button{position:relative;overflow:hidden;border-color:#ffffffa8;box-shadow:inset 0 3px 5px #fff9,inset 0 -9px 11px #07140f99,0 5px 10px #07140f77}
.palette button::after{content:"";position:absolute;left:19%;top:12%;width:42%;height:20%;border-radius:50%;background:#ffffffbd;filter:blur(2px);pointer-events:none}
.crush-celebration{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 0%,#fff2fa,#fff 45%,#fff2d4)!important;border:2px solid #f189ca;box-shadow:0 0 0 5px #ed69c333,0 18px 55px #cf2da844!important;animation:crush-pop .68s cubic-bezier(.2,1.5,.45,1) both}
.crush-title{display:block;color:#a41b71;font-size:clamp(1.25rem,4vw,2.1rem);font-weight:1000;letter-spacing:.03em}.crush-line{padding:10px 14px;border-radius:999px;background:#ffe3f3;color:#7f155b;font-weight:900}
.crush-burst{position:absolute;z-index:-1;inset:10% 0 auto;text-align:center;font-size:clamp(2rem,8vw,5rem);letter-spacing:.3em;animation:crush-burst 1.4s ease-out both;pointer-events:none}
@keyframes crush-pop{0%{transform:scale(.86);filter:saturate(.6)}65%{transform:scale(1.025)}100%{transform:scale(1)}}@keyframes crush-burst{0%{opacity:0;transform:translateY(28px) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translateY(-65px) scale(1.4)}}
@media(prefers-reduced-motion:reduce){.crush-celebration,.crush-burst{animation:none!important}}