*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:#23232b;background:#f1efea}header{padding:28px max(4vw,18px);color:white}header small{letter-spacing:2px}header h1{font-size:clamp(28px,4vw,48px);margin:12px 0}header p{max-width:800px}.pill{display:inline-block;padding:7px 12px;border-radius:30px;color:#5a2404}main{max-width:1450px;margin:auto;padding:20px}nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}button,.btn{font:inherit;border:1px solid #d0b99a;border-radius:9px;background:white;color:#5c1820;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e6ac25}.primary{background:#bd0018;color:white;border:0}.panel{background:white;padding:22px;margin:16px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hero-card{display:grid;grid-template-columns:minmax(200px,1fr) 1fr;align-items:center;gap:25px}.hero-card img{width:100%;border-radius:12px}.form label{display:block;font-weight:700;margin:14px 0;font-size:14px}.form input,.form select{display:block;width:100%;font:inherit;padding:11px;border-radius:8px;border:1px solid #c7b6a0;margin-top:7px;background:#fff}.muted{color:#6a6259;font-size:13px;line-height:1.6}.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.note{padding:13px;background:#fff0d0;border-left:4px solid #c78d20;font-size:13px;line-height:1.6}#alert:not(:empty){padding:12px;border-radius:8px;background:#ffead9;color:#851622;margin-bottom:12px}.room-code{font-size:32px;letter-spacing:5px;font-weight:900;color:#bc001c}.lobby-list{list-style:none;padding:0}.lobby-list li{padding:14px;border:1px solid #dfd3ba;border-radius:9px;margin:8px 0}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#169b65;margin-right:6px}.dot.off{background:#aaa}.game-layout{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr);gap:24px;align-items:start}.player-ribbon{display:flex;gap:8px;flex-wrap:wrap}.player-badge{min-width:100px;flex:1;border-top:5px solid var(--p);font-size:13px}.player-badge.current{outline:2px solid #c40a20}.player-badge strong,.player-badge small{display:block}.player-badge.mine:after{content:'TÚ';font-size:9px;color:#b00016}#status{padding:14px;margin:15px 0;font-weight:800;background:#fff5df}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;aspect-ratio:1;gap:2px;margin:24px 0 34px;transform:rotateX(var(--tilt,0deg));transform-style:preserve-3d}.board button{padding:0;position:relative;aspect-ratio:1;min-width:0;overflow:hidden;border-radius:4px;line-height:1;transform:none!important}.five-board{background:#df9a28;border:8px solid #b57c1f}.five-board .cellcard{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:#fff8dc;border:2px solid #ce8f2e;border-radius:3px;color:#24545e;font-weight:900;font-size:clamp(9px,1.35vw,20px)}.cellcard img{height:100%;width:100%;object-fit:contain}.cellcard .tinygraph{width:85%;height:85%}.token{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffff88,var(--p) 50%,#0008);border:3px solid var(--p);box-shadow:0 3px 0 #0006,0 7px 8px #0009;color:white;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center}.checker-board{background:#ccd32a;border:8px solid #a6b824;padding:0}.checker-board .original-cell{height:100%;width:100%;object-fit:fill}.move{outline:4px solid #ffbe00;outline-offset:-4px}.selected{outline:4px solid #d20924!important;outline-offset:-4px}.hand{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.hand button,.table-cards button,.catalog-card{width:91px;aspect-ratio:180/260;height:auto;padding:0;position:relative;border:0;box-shadow:0 3px #8a4b1c,0 8px 12px #230a1533;overflow:hidden}.hand img,.table-cards img,.catalog-card img{width:100%;height:100%;display:block}.table-cards{display:flex;flex-wrap:wrap;gap:14px;min-height:150px;background:radial-gradient(ellipse,#ae1327,#540611);border:10px solid #b17b29;border-radius:12px;padding:18px;box-shadow:0 7px #643a13}.order{position:absolute;top:3px;right:3px;border-radius:50%;background:#bb001a;color:white;padding:5px;font-size:12px}.hidden-hand{padding:20px;text-align:center;border:2px dashed #cfb69a;border-radius:12px;background:#fffaf0}.actions select,.actions input{font:inherit;padding:10px;border-radius:8px;border:1px solid #c9baa5;max-width:160px}.actions label{font-size:12px}.logs{max-height:270px;overflow:auto;padding-left:22px;font-size:13px;line-height:1.7}.reference-cover{width:100%;border-radius:9px}details{font-size:13px;line-height:1.6;margin:15px 0}details li{margin:8px 0}.catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.catalog .catalog-card{width:100%;max-width:150px;margin:auto}.family{padding:16px;background:#fff9eb;border-radius:12px;margin:16px 0}.catalog-label{font-size:11px;text-align:center;margin:8px 0}.hint{font-size:12px;color:#725d36}.help-flow{counter-reset:steps}.help-flow p{margin:12px 0}.resume{background:#f5eee0;padding:12px;border-radius:10px}.connected{color:#087a4c}.connection-error{color:#a30015}footer{font-size:12px;text-align:center;line-height:1.7;padding:28px}.offline-badge{padding:8px;background:#fff3cb;border-radius:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:850px){.game-layout,.grid2,.hero-card{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.board{margin:16px 0 24px;border-width:5px;gap:1px}.five-board .cellcard{font-size:clamp(8px,2.2vw,17px);border-width:1px}.token{font-size:11px;border-width:2px}.hand button,.table-cards button{width:73px}.panel{padding:15px}main{padding:12px}.room-code{font-size:26px}.catalog{gap:6px}}
:root{--tilt:0deg}