:root{font-family:Inter,system-ui,-apple-system,Arial,sans-serif;color:#ecf2f2;background:#101c2b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 0%,#1e3b47 0,transparent 45%),#101c2b}button,input{font:inherit}button{cursor:pointer;border:0;transition:transform .15s,background .15s}button:active{transform:scale(.97)}button:disabled{opacity:.42;cursor:not-allowed}header{height:70px;display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:auto;padding:0 20px;border-bottom:1px solid #ffffff14}.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;letter-spacing:1px}.brand small{font-weight:500;color:#9dadb5;font-size:10px;letter-spacing:2.5px;display:block}.mark{font-size:40px;color:#ffc567;line-height:0}main{max-width:1060px;margin:0 auto;padding:24px 16px 60px}.home{max-width:470px;margin:16px auto}.hero{text-align:center}.gem{color:#ffc567;font-size:82px;line-height:1.1;text-shadow:0 0 48px #ffc56755}.hero h1{font-size:clamp(32px,6vw,46px);letter-spacing:-1.5px;line-height:1.1;margin:6px auto 18px}.hero em{font-style:normal;color:#ffc567}.hero p{color:#aabac5;line-height:1.7;margin:0 auto 24px;max-width:390px}.panel{border:1px solid #344551;border-radius:20px;background:#1a2a3a;padding:24px;box-shadow:0 15px 40px #0002}label,.eyebrow{display:block;color:#9caeba;font-weight:800;letter-spacing:1.3px;font-size:11px;margin-bottom:9px}input{width:100%;padding:14px 16px;border:1px solid #405569;background:#101e2e;color:#fff;border-radius:11px;outline:none;font-size:16px}input:focus{border-color:#ffcb74}.join{margin-top:24px}.joinline{display:flex;gap:9px}.joinline input{max-width:42%;text-transform:uppercase;letter-spacing:3px;font-weight:800}.primary,.secondary,.ghost,.danger{border-radius:11px;padding:14px 15px;font-weight:800;font-size:14px}.primary{background:#ffc567;color:#20252d}.primary:hover{background:#ffda96}.secondary{background:#2a4756;color:#f0f8fa}.secondary:hover{background:#376073}.ghost{background:#ffffff10;color:#d6e4ea}.danger{background:#713b3f;color:#ffe7e7;margin:30px auto;display:block}.full{width:100%}.or{text-align:center;color:#7d93a2;margin:15px}.hint{text-align:center;color:#94aab8;font-size:12px;line-height:1.7;margin-top:18px}.hidden{display:none!important}.roomhead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:4px 0 20px}.roomhead h2{font-size:36px;margin:0;letter-spacing:5px;color:#ffc567}.roomhead .eyebrow{margin:0}.panel h3{margin:0 0 12px}.panel p{color:#aabac5;line-height:1.6}.dot{display:inline-block;width:7px;height:7px;background:#52dfa5;border-radius:100%;animation:pulse 1.3s infinite}@keyframes pulse{50%{opacity:.2}}.players{display:flex;flex-direction:column;gap:9px;margin:24px 0}.playerrow{display:flex;justify-content:space-between;border:1px solid #405365;padding:12px 14px;border-radius:10px}.playerrow b{color:#ffc567}.notice{background:#263b4d;border:1px solid #38566a;border-radius:12px;padding:12px 15px;margin-bottom:12px;font-size:14px}.scoreboard{display:flex;gap:9px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}.score{flex:1 0 115px;border:1px solid #3b4e60;background:#1a2b3d;border-radius:13px;padding:12px;min-width:0}.score.active{border-color:#ffc567;background:#273c46}.score .who{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score .nums{color:#ffc567;margin-top:8px;font-size:23px;font-weight:900}.score small{display:block;color:#93a7b3;font-size:11px}.boardwrap{border:1px solid #37505d;background:radial-gradient(circle at 50% 50%,#254b51,#152d3a);border-radius:16px;overflow:hidden}.boardtop{padding:13px 16px;display:flex;justify-content:space-between;font-size:13px;color:#d0e3e5;border-bottom:1px solid #ffffff16}.boardtop span{color:#adc2c8}#board{display:block;width:100%;height:min(57vh,510px);min-height:290px;touch-action:pan-x pan-y}#board .tile{fill:#ffe3ad;stroke:#d2a865;stroke-width:2;filter:drop-shadow(0px 3px 3px #0005)}#board .option{fill:#83e2b45e;stroke:#86ffc9;stroke-width:2;cursor:pointer;animation:pulse 1.5s infinite}#board text{font-family:system-ui;fill:#37434b;font-size:17px;font-weight:900;dominant-baseline:middle;text-anchor:middle;pointer-events:none}#board .optionmark{font-size:17px;fill:#e4fff3;pointer-events:none}.boardfoot{background:#182d38;text-align:center;padding:11px;color:#b0c8cc;font-size:12px}.trayhead{display:flex;align-items:center;justify-content:space-between;margin:19px 0 7px}.trayhead h3{margin:0;font-size:17px}.trayhead span{color:#9fb5c2;font-size:12px}.tray{display:flex;gap:9px;overflow-x:auto;padding:10px 3px 19px;min-height:110px}.tilebtn{background:transparent;padding:3px;border:2px solid transparent;border-radius:12px;flex:0 0 86px}.tilebtn.selected{border-color:#ffca6e;background:#ffc56720}.tilebtn svg{width:78px;height:75px}.tilebtn polygon{fill:#ffe1a8;stroke:#d7a960;stroke-width:2}.tilebtn text{font-size:17px;fill:#35414b;font-weight:900;text-anchor:middle;dominant-baseline:middle}.actionbar{display:flex;gap:11px}.actionbar button{flex:1}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:90vw;width:max-content;background:#ecf5ec;color:#21352a;padding:13px 19px;border-radius:12px;font-size:14px;font-weight:700;transition:.2s;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}#finished{text-align:center}#finished h2{color:#ffc567;font-size:30px}@media(min-width:730px){main{padding:30px 28px}.home{margin:38px auto}.boardwrap{max-width:100%}.tray{flex-wrap:wrap;overflow:visible}}

.modebox{margin:18px 0 20px;padding:15px;border:1px solid #405365;border-radius:12px;background:#122435}.modebox select{width:100%;padding:13px 12px;border-radius:10px;border:1px solid #536a78;background:#1f394b;color:#fff;font:inherit;font-size:15px}.modebox select:disabled{opacity:.65}.modebox .hint{text-align:left;margin:9px 0 0}

/* Personalización: avatar y color elegidos por cada jugador */
.customize{margin-top:22px;display:grid;gap:9px}.customize label:not(:first-child){margin-top:12px}.avatarchoices,.colorchoices{display:flex;flex-wrap:wrap;gap:8px}.avataroption{background:#122536;border:2px solid #415669;border-radius:12px;width:49px;height:49px;font-size:26px;display:grid;place-items:center}.avataroption.chosen,.coloroption.chosen{border-color:#ffca6e;box-shadow:0 0 0 2px #ffca6e30}.coloroption{background:#122536;border:2px solid #415669;border-radius:100%;width:40px;height:40px;padding:5px;display:grid;place-items:center}.coloroption span{display:block;width:100%;height:100%;background:var(--swatch);border-radius:50%}.customhint{margin:1px 0 0;color:#a0b5bf;font-size:12px}.playeridentity{display:inline-flex;align-items:center;gap:7px;min-width:0}.playeravatar{font-size:24px;flex-shrink:0}.playername{overflow:hidden;text-overflow:ellipsis;max-width:150px;white-space:nowrap}.playerswatch{height:12px;width:12px;flex:0 0 12px;background:var(--swatch);border:1px solid #0005;border-radius:50%}.score .playeravatar{font-size:19px}.score .who .playeridentity{max-width:100%}.score .who .playername{max-width:100px}.tilebtn polygon{fill:var(--tile-fill,#ffe1a8);stroke:var(--tile-edge,#d7a960)}.tilebtn text{fill:var(--tile-ink,#35414b)}#board .tile{stroke-width:2}#board .optionmark{fill:#e4fff3}

/* El anfitrión selecciona un solo color para las fichas de toda la partida. */
.coloroption:disabled{cursor:default;opacity:.78}.coloroption[data-room-color="black"] span{box-shadow:inset 0 0 0 1px #a0a5ad}.playerswatch{display:none}

.modechoices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modechoices button{border:2px solid #476072;border-radius:12px;background:#203748;color:#eaf4f7;padding:14px 10px;font-size:14px;font-weight:800;min-height:58px}.modechoices button.chosen{border-color:#ffc567;background:#635035;color:#fff4d5}.modechoices button:disabled{opacity:.6}.versionstamp{position:relative;text-align:center;color:#a5b5be;padding:0 0 18px;font-size:12px}.versionstamp span{font-weight:800;color:#ffc567}#settingsStatus{font-weight:700;color:#e2d6b6}

/* V5: números con espacio alrededor, incluso en fichas negras. */
#board text{font-size:16px} .tilebtn text{font-size:17px} .avatarchoices{max-height:210px;overflow-y:auto}

#modeHelp{color:#fce4af;font-weight:800;letter-spacing:.15px;padding:10px 12px;background:#263d45;border:1px solid #82683c;border-radius:9px}
.modechoices button.chosen{outline:2px solid #f2c878;outline-offset:2px}

/* V6: colocación libre sin pistas y rotación manual */
#board .free-target{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
#board .free-target:active{fill:#ffffff12}
.rotationpanel{display:flex;align-items:center;gap:14px;padding:2px 0 17px;color:#a9c4cf;font-size:13px}
.rotationpanel button{min-width:150px}
#placementHelpStatus{font-weight:700;color:#fce4af}

/* V7: giro real de toda la ficha (triángulo y números) a 120 grados. */
.tilebtn svg{overflow:visible}
.tilebtn .rotatable{transform-origin:50px 31px;transform-box:view-box;transition:transform .28s cubic-bezier(.2,.75,.3,1)}
/* Cada jugador puede alternar el tamaño localmente. */
.display-size-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid #405365;border-radius:12px;background:#1b3040}
.display-size-bar>span{font-size:11px;font-weight:800;color:#bbced9;letter-spacing:.5px}
.sizechoices{display:flex;gap:7px}
.sizechoices button{border-radius:9px;background:#274454;color:#edf4f8;border:2px solid #456172;padding:9px 11px;font-size:12px;font-weight:800}
.sizechoices button.chosen{border-color:#ffc567;background:#665038;color:#fff2cf}
body.compact-game #board{height:min(39vh,340px);min-height:200px}
body.compact-game .tray{gap:3px;min-height:75px;padding:4px 2px 10px}
body.compact-game .tilebtn{flex-basis:60px;padding:1px;border-radius:8px}
body.compact-game .tilebtn svg{width:55px;height:53px}
body.compact-game .trayhead{margin-top:12px}
body.compact-game .score{padding:8px;flex-basis:100px}
body.compact-game .score .nums{font-size:19px;margin-top:4px}
body.compact-game .boardfoot{padding:7px}
@media(max-width:360px){.display-size-bar>span{max-width:76px}.sizechoices button{padding:8px}}
@media(prefers-reduced-motion:reduce){.tilebtn .rotatable{transition:none}}

/* V7.1: centro geométrico exacto; las tres esquinas rotan sin desplazarse. */

/* V7.2: contragiro de los números para que permanezcan verticales.
   Los 120° se animan en sentido contrario a los del triángulo. */
.tilebtn .upright-number{transition:transform .28s cubic-bezier(.2,.75,.3,1);transform-box:view-box}
@media(prefers-reduced-motion:reduce){.tilebtn .upright-number{transition:none}}

/* V7.3: una referencia asimétrica demuestra físicamente el giro de 120°.
   La silueta de un triángulo equilátero sola es indistinguible tras ese giro. */
.tilebtn .tile-guide{stroke:var(--tile-ink,#35414b);stroke-width:3.1;stroke-linecap:round;fill:none;opacity:.65;pointer-events:none}

/* V7.4: giro de 60 grados por toque. Alternan punta arriba y abajo. */