/* Furia en Tierras Salvajes v0.5 — maqueta aprobada trasladada a una interfaz operativa.
   Solo presentación: las reglas siguen intactas en game.js de v0.3. */
:root{--gold:#d6ae68;--goldLight:#f8dfa6;--shadow:0 8px 28px #000b}
html,body{height:100%;width:100%;overflow:hidden;background:#070d0d}
body{font-family:Georgia, 'Times New Roman', serif}
button,select{font-family:inherit}
header{flex:0 0 66px;height:66px;padding:8px clamp(14px,2.3vw,38px);background:linear-gradient(180deg,rgba(5,10,13,.93),rgba(8,14,18,.86));border-bottom:1px solid #bc9b587c;box-shadow:0 3px 20px #0009;position:relative;z-index:50}
header:before{content:'⚜';font-size:37px;line-height:1;float:left;margin-right:19px;color:#b89450;text-shadow:0 2px 10px #000}
header h1{font-size:clamp(19px,2vw,31px);letter-spacing:.063em;color:#e4b864;text-shadow:0 3px 9px #000;line-height:1.08}
header .version{font:11px Georgia,serif;color:#b8aa90;margin-top:4px}
header .header-ctrl{gap:9px}
header .header-ctrl button{font-size:12px;background:#121a1eaa;border:1px solid #87724c;color:#e6d2a8}
header .tag{background:#091116c9;color:#f0d7a1;white-space:nowrap}
main.tabletop-ui{position:relative;display:block;flex:1 1 auto;min-height:0;max-width:none;padding:0;margin:0;overflow:hidden;isolation:isolate;background:#09110f}
main.tabletop-ui>.board-panel{position:absolute;inset:0;border:none;box-shadow:none;background:transparent;overflow:hidden;min-height:0;border-radius:0}
main.tabletop-ui .board-scroll{position:absolute;inset:0;min-height:0;height:100%;width:100%;border:0;background:linear-gradient(90deg,#050d0d33,#07100c08,#040b0e44),url('assets/ambient-table.webp') center center / cover no-repeat;cursor:grab}
main.tabletop-ui .board-scroll:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 22%,#0006 100%)}
main.tabletop-ui .board-scroll:after{box-shadow:inset 0 0 110px 35px #0408077a}
main.tabletop-ui .hex-world{z-index:1;filter:drop-shadow(0 5px 8px #0009)}
/* The only vivid hexagons are gameplay hexagons; the faint decorative background cannot be clicked. */
main.tabletop-ui .tile{filter:drop-shadow(0 4px 2px #020705);}
main.tabletop-ui .tile:before{background:#d1a66e}
main.tabletop-ui .tile img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
main.tabletop-ui .token{filter:drop-shadow(0 3px 4px #000)}
main.tabletop-ui .token-title{background:#05090be9;border:1px solid #c7aa77;color:#fff0ca;border-radius:50%;font-size:12px;min-width:22px;line-height:19px;text-align:center;padding:0 4px;top:84%;z-index:3}
main.tabletop-ui .control-token{filter:drop-shadow(0 2px 4px #000);}
/* HUD arriba, sin columnas rígidas. */
main.tabletop-ui .board-toolbar{position:absolute;top:11px;left:50%;right:auto;transform:translateX(-50%);z-index:18;max-width:calc(100% - 650px);width:max-content;min-width:0;padding:7px 13px;background:#081217df;border:1px solid #a68a5888;border-radius:12px;box-shadow:var(--shadow);backdrop-filter:blur(9px);flex-wrap:nowrap;gap:14px;justify-content:center}
main.tabletop-ui .board-toolbar b{font-size:13px;color:#e6bd77;white-space:nowrap}
main.tabletop-ui .board-toolbar .small-tag{font:12px Georgia,serif;white-space:nowrap}
main.tabletop-ui .board-toolbar .zoom-controls{gap:6px}
main.tabletop-ui .board-toolbar button{font:14px Georgia,serif;padding:5px 10px;color:#ebd5a9;background:#16242c}
main.tabletop-ui .board-toolbar #zoomValue{font-weight:bold;color:#ecc57c}
main.tabletop-ui .board-overlay{top:66px;left:50%;transform:translateX(-50%);right:auto;z-index:13;text-align:center;pointer-events:none}
main.tabletop-ui .board-overlay span{display:inline-block;max-width:420px;padding:5px 14px;font:12px Georgia,serif;border:1px solid #816a44a8;border-radius:18px;background:#060b0cd9;color:#e9d7b3}
main.tabletop-ui .board-footer{position:absolute;left:17px;bottom:15px;right:auto;top:auto;z-index:20;width:auto;max-width:min(360px,25vw);padding:7px 10px;background:#071315cf;border:1px solid #816a45a0;border-radius:9px;color:#dddbc9;box-shadow:0 5px 15px #0009;font:11px/1.4 Georgia,serif}
main.tabletop-ui .board-footer .legend{display:none}
/* Left action widget, same location as approved visual */
main.tabletop-ui .floating-panel-toggle{top:15px;z-index:32;border:1px solid #8c714bad;padding:5px 11px;background:#111b20dc;color:#f0d6a1;border-radius:8px;font-size:11px;box-shadow:0 4px 14px #0008}
main.tabletop-ui .floating-panel-toggle.actions-tab{left:20px}
main.tabletop-ui .floating-panel-toggle.left-tab{left:117px}
main.tabletop-ui .floating-panel-toggle.right-tab{right:21px}
main.tabletop-ui .floating-panel-toggle[aria-expanded="true"]{background:#392d1def;border-color:#bf945a}
main.tabletop-ui>.action-hud{top:60px;left:21px;width:clamp(200px,18vw,275px);max-height:min(68vh,580px);padding:0;z-index:25;overflow:visible;background:none;border:0;box-shadow:none;transition:transform .24s,opacity .24s}
main.tabletop-ui>.action-hud .turn-card{margin:0 0 7px;padding:14px 15px 12px;border:1px solid #b99455;background:linear-gradient(145deg,#0e181ded,#0a1013ed);backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 7px 25px #0009}
main.tabletop-ui>.action-hud .turn-title{font-size:23px;color:#efc77e;font-weight:bold}
main.tabletop-ui>.action-hud .turn-actions{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
main.tabletop-ui>.action-hud .turn-actions button{padding:8px 6px;font-size:12px;border-radius:7px}
main.tabletop-ui>.action-hud .turn-actions .primary{background:linear-gradient(170deg,#c49a55,#85612f);box-shadow:inset 0 1px #ffda955c;font-weight:700}
main.tabletop-ui>.action-hud .action-box{padding:9px;border:1px solid #a58752a0;background:#09151bcf;box-shadow:0 7px 20px #0009;backdrop-filter:blur(12px);border-radius:10px;max-height:35vh;min-height:0;overflow:auto}
main.tabletop-ui>.action-hud .rules-alert{background:#3a2b18e8;border:1px solid #987647;border-radius:9px}
/* Right in-play panel is compact and only expands for content or optional log. */
main.tabletop-ui>.played-panel{position:absolute;right:20px;top:60px;left:auto;bottom:auto;z-index:30;width:clamp(205px,18vw,260px);height:auto;max-height:47vh;overflow:hidden;background:linear-gradient(155deg,#111c23f2,#080f14ed);border:1px solid #b08b52b0;border-radius:12px;backdrop-filter:blur(9px);box-shadow:var(--shadow);transition:transform .25s,opacity .25s}
main.tabletop-ui>.played-panel .inner{padding:12px 12px 10px;max-height:47vh;min-height:0;overflow-y:auto}
main.tabletop-ui .played-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;padding-bottom:6px;border-bottom:1px solid #72634570}
main.tabletop-ui .played-heading h2{margin:0;font-size:16px;white-space:nowrap}
main.tabletop-ui .played-heading #logToggle{font-size:10px;padding:4px 5px;background:transparent;border:1px solid #5e5b4c;border-radius:6px;color:#d5c5a5;white-space:nowrap}
main.tabletop-ui>.played-panel .played-cards{min-height:0;max-height:27vh;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;overflow-y:auto;padding-top:10px}
main.tabletop-ui>.played-panel .played-cards .small-card{width:64px;flex:0 0 64px;max-width:64px;max-height:92px}
main.tabletop-ui>.played-panel .played-cards img{max-height:92px;object-fit:contain}
main.tabletop-ui>.played-panel .placeholder{font:11px/1.4 Georgia,serif;color:#aeb4b5;margin:5px 0;max-width:100%}
main.tabletop-ui .match-log{display:none;border-top:1px solid #745c35;margin-top:8px;padding-top:6px}
main.tabletop-ui>.played-panel.show-log .match-log{display:block}
main.tabletop-ui>.played-panel .event-log{min-height:0;max-height:135px;font:11px/1.4 system-ui,sans-serif}
main.tabletop-ui>.played-panel h3{margin:0 0 6px}
main.tabletop-ui>.preparation{position:absolute;top:60px;left:20px;z-index:41;width:min(300px,calc(100vw - 35px));max-height:calc(100% - 82px);overflow-y:auto;border:1px solid #a7864da0;background:#111c25f6;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
main.tabletop-ui>.preparation.is-collapsed{transform:translateX(calc(-100% - 45px));opacity:0;visibility:hidden;pointer-events:none}
main.tabletop-ui>.played-panel.is-collapsed{transform:translateX(calc(100% + 30px));opacity:0;visibility:hidden;pointer-events:none}
/* Four-card fan at the bottom center — never reserves real estate. */
main.tabletop-ui .player-dock{position:absolute;z-index:29;inset:auto 0 0 0;height:0;min-height:0;pointer-events:none;overflow:visible;border:0;background:transparent;box-shadow:none}
main.tabletop-ui .dock-top,main.tabletop-ui .dock-body{position:absolute;inset:auto 0 0 0;height:0;display:block;overflow:visible;padding:0;pointer-events:none;background:none;border:0;box-shadow:none}
main.tabletop-ui .dock-top .hand-title{display:none}
main.tabletop-ui .hand{position:absolute;left:50%;bottom:-111px;width:min(720px,66vw);height:320px;transform:translateX(-50%);padding:0;display:flex;align-items:flex-start;justify-content:center;gap:0;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none;transition:bottom .35s cubic-bezier(.2,.77,.19,1)}
main.tabletop-ui .hand-card{position:relative;flex:0 0 clamp(107px,11.2vw,169px);min-width:0;width:clamp(107px,11.2vw,169px);align-self:flex-start;display:block;margin:0 -9px;padding:3px;background:#140e0b;border:2px solid #ad8653;border-radius:13px;overflow:visible;pointer-events:auto;z-index:var(--fan-z,1);transform:rotate(var(--fan-angle,0deg)) translateY(var(--fan-offset,0px));transform-origin:50% 90%;box-shadow:0 10px 19px #000b,0 0 0 1px #0d0906;transition:transform .22s ease,box-shadow .22s ease}
main.tabletop-ui .hand-card img{width:100%;height:auto;aspect-ratio:672/936;object-fit:fill;display:block;border-radius:10px;box-shadow:none}
main.tabletop-ui .hand-card .card-caption{display:none}
main.tabletop-ui .hand-card:hover{z-index:22;transform:rotate(0deg) translateY(-45px) scale(1.10);box-shadow:0 14px 28px #000e,0 0 0 2px #dec483}
main.tabletop-ui .hand-card.active{z-index:23;transform:rotate(0deg) translateY(-48px) scale(1.11);box-shadow:0 15px 30px #000e,0 0 0 2px #ffc875}
main.tabletop-ui .player-dock.hand-expanded .hand{bottom:9px}
main.tabletop-ui .player-dock.hand-expanded .hand-card:hover{transform:rotate(0deg) translateY(-21px) scale(1.07)}
main.tabletop-ui .dock-top button{position:absolute;z-index:40;bottom:13px;pointer-events:auto;border:1px solid #bc995e;color:#f3daa7;background:#111e25ef;border-radius:9px;padding:7px 12px;box-shadow:0 4px 17px #000d;backdrop-filter:blur(9px);font:12px Georgia,serif;white-space:nowrap;transition:bottom .34s ease}
main.tabletop-ui #handToggle{left:50%;bottom:123px;transform:translateX(-50%);font-size:12px;border-radius:13px 13px 4px 4px}
main.tabletop-ui .player-dock.hand-expanded #handToggle{bottom:260px}
main.tabletop-ui #resourceToggle{left:calc(50% + min(370px,27vw));transform:translateX(-50%);bottom:24px}
main.tabletop-ui #pilesToggle{right:48px;bottom:178px;opacity:.89}
main.tabletop-ui .piles{position:absolute;right:22px;bottom:20px;display:flex;gap:12px;align-items:flex-end;padding:10px 12px 9px;background:#0a151bce;border:1px solid #94794cad;border-radius:13px;box-shadow:0 9px 24px #000b;backdrop-filter:blur(9px);pointer-events:auto;transition:transform .25s ease,opacity .25s ease}
main.tabletop-ui .pile{font:12px Georgia,serif;color:#f0d8ad;gap:6px}
main.tabletop-ui .pile .card-back,main.tabletop-ui .pile .discard-top{width:clamp(65px,5.8vw,88px);height:clamp(91px,8.2vw,122px);border-radius:11px}
main.tabletop-ui .pile .card-back{border:3px solid #bda277}
main.tabletop-ui .pile span b{color:#f2cf80}
main.tabletop-ui .pile .back-symbol{font-size:32px}
main.tabletop-ui .piles-collapsed .piles{transform:translateY(calc(100% + 36px));opacity:0;pointer-events:none}
main.tabletop-ui .piles-collapsed #pilesToggle{bottom:15px}
main.tabletop-ui .resource-tray{position:absolute;z-index:33;left:50%;right:auto;bottom:16px;width:min(860px,calc(100vw - 360px));max-height:min(330px,43vh);min-height:160px;display:flex;flex-direction:column;gap:8px;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;transform:translate(-50%,calc(100% + 60px));transition:transform .35s cubic-bezier(.2,.77,.19,1),opacity .25s,visibility .35s;border:1px solid #c5a16a;border-radius:16px 16px 0 0;background:linear-gradient(175deg,#1b2a2ff7,#081216fa);box-shadow:0 -15px 36px #000d;padding:15px 17px}
main.tabletop-ui .resource-tray.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
main.tabletop-ui .resource-cards{min-height:0;overflow-x:auto;overflow-y:auto;padding-bottom:10px}
main.tabletop-ui .resource-card{flex:0 0 90px}
main.tabletop-ui #resourceToggle[aria-expanded="true"]{bottom:24px!important;z-index:36}
main.tabletop-ui .dice-tray{position:absolute;bottom:190px;right:21px;z-index:40;width:245px;max-width:245px;background:#101b1df2;border:1px solid #a7895b;border-radius:12px;box-shadow:0 8px 24px #0009;transition:opacity .2s ease,transform .2s ease}
main.tabletop-ui .dice-tray.is-idle{opacity:0;transform:translateY(12px);pointer-events:none}
/* Compact controls at laptop resolutions; hand still centered and not cropped. */
@media(max-width:1450px){
 main.tabletop-ui .board-toolbar{max-width:calc(100% - 545px);gap:7px;padding:6px 9px}
 main.tabletop-ui .board-toolbar .control-hint{display:none}
 main.tabletop-ui>.played-panel{right:15px;width:210px}
 main.tabletop-ui>.action-hud{left:14px;width:214px}
 main.tabletop-ui #resourceToggle{left:calc(50% + min(315px,27vw))}
 main.tabletop-ui .hand{width:min(640px,61vw)}
 main.tabletop-ui .piles{right:12px}
 main.tabletop-ui #pilesToggle{right:32px}
}
@media(max-width:1060px){
 header h1{font-size:21px}
 header .tag{display:none}
 main.tabletop-ui .board-toolbar{max-width:calc(100% - 270px);top:11px}
 main.tabletop-ui .board-toolbar>b{display:none}
 main.tabletop-ui>.played-panel{width:175px;top:94px}
 main.tabletop-ui>.action-hud{width:183px;top:70px}
 main.tabletop-ui .board-overlay{top:63px}
 main.tabletop-ui .hand{width:65vw;bottom:-98px}
 main.tabletop-ui .hand-card{flex-basis:clamp(100px,12vw,128px);width:clamp(100px,12vw,128px);margin:0 -8px}
 main.tabletop-ui #handToggle{bottom:97px}
 main.tabletop-ui .player-dock.hand-expanded #handToggle{bottom:197px}
 main.tabletop-ui #resourceToggle{left:calc(50% + 24vw);bottom:14px}
 main.tabletop-ui .piles{right:10px;bottom:10px;gap:8px;padding:8px}
 main.tabletop-ui .pile .card-back,main.tabletop-ui .pile .discard-top{width:59px;height:83px}
 main.tabletop-ui #pilesToggle{right:16px;bottom:133px}
 main.tabletop-ui .resource-tray{width:min(610px,calc(100vw - 215px));max-height:40vh}
 main.tabletop-ui .dice-tray{bottom:145px;right:9px;max-width:190px}
 main.tabletop-ui .board-footer{max-width:220px}
}
@media(max-width:700px){
 header{height:56px;flex-basis:56px;padding:8px 9px}
 header:before{font-size:24px;margin-right:9px}
 header h1{font-size:clamp(14px,3.2vw,18px)}
 header .version{font-size:9px}
 header .header-ctrl button{font-size:10px;padding:5px}
 main.tabletop-ui .board-toolbar{left:50%;top:48px;max-width:calc(100% - 12px);padding:4px 7px;gap:4px}
 main.tabletop-ui .board-toolbar .small-tag{font-size:10px}
 main.tabletop-ui .board-toolbar .zoom-controls button{padding:3px 5px}
 main.tabletop-ui .board-overlay{top:90px}
 main.tabletop-ui .floating-panel-toggle{top:7px;padding:5px 7px;font-size:10px}
 main.tabletop-ui .floating-panel-toggle.actions-tab{left:8px}
 main.tabletop-ui .floating-panel-toggle.left-tab{left:86px}
 main.tabletop-ui .floating-panel-toggle.right-tab{right:8px}
 main.tabletop-ui>.action-hud{left:9px;top:102px;width:min(180px,34vw)}
 main.tabletop-ui>.played-panel{right:8px;top:103px;width:min(170px,32vw)}
 main.tabletop-ui .hand{width:74vw;bottom:-79px}
 main.tabletop-ui .hand-card{flex-basis:clamp(66px,17vw,112px);width:clamp(66px,17vw,112px);margin:0 -7px}
 main.tabletop-ui #handToggle{bottom:75px}
 main.tabletop-ui .player-dock.hand-expanded #handToggle{bottom:165px}
 main.tabletop-ui #resourceToggle{left:auto;right:145px;bottom:7px;transform:none}
 main.tabletop-ui .pile .card-back,main.tabletop-ui .pile .discard-top{width:43px;height:61px}
 main.tabletop-ui .pile{font-size:10px}
 main.tabletop-ui #pilesToggle{bottom:99px;right:12px}
 main.tabletop-ui .resource-tray{width:calc(100vw - 12px);bottom:9px;max-height:45vh}
 main.tabletop-ui .board-footer{left:6px;bottom:12px;max-width:25vw;font-size:10px}
 main.tabletop-ui .dice-tray{bottom:117px;right:6px}
}

/* v0.5 polish: title alignment and unobstructed card-fan handle */
header:before{position:absolute;left:18px;top:12px;float:none;margin:0}
header>div:first-child{margin-left:51px}
main.tabletop-ui #handToggle{bottom:5px!important;background:#101c21f5;box-shadow:0 0 13px #000c}
main.tabletop-ui .player-dock.hand-expanded #handToggle{bottom:5px!important}
@media(max-width:700px){header:before{left:8px;top:13px}header>div:first-child{margin-left:33px}}


/* v0.6 — Solo ornamentación. El motor y la interfaz funcional se conservan. */
/* El marco grande tiene una suave sombra sobre el mapa y nunca intercepta el mouse. */
main.tabletop-ui > .ornate-perimeter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 8;
  filter: drop-shadow(0 0 13px rgba(0,0,0,.48)) drop-shadow(0 0 11px rgba(0,0,0,.29));
}
/* v0.7: el remate central se mantiene por delante de las cartas, pero MUY abajo,
   para no tapar sus ilustraciones ni los textos de la mano. */
main.tabletop-ui .player-dock > .ornate-hand-crest {
  position: absolute;
  bottom: max(-125px, -9vw); /* Apenas sobresale por delante del borde inferior: las cartas quedan visibles */
  left: 50%;
  transform: translateX(-50%);
  width: min(710px, 55vw);
  height: auto;
  display: block;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 -7px 12px rgba(0,0,0,.62));
}
main.tabletop-ui .dock-top button {z-index: 40;}
@media (max-width: 1060px) {
  main.tabletop-ui .player-dock > .ornate-hand-crest {width: min(560px,61vw);}
}
@media (max-width: 700px) {
  main.tabletop-ui .player-dock > .ornate-hand-crest {width: 64vw;}
}
/* Evita que la capa del tablero aisle y tape sus controles: el marco queda entre mapa y HUD. */
main.tabletop-ui > .board-panel { isolation: auto; }

/* v0.8: losetas ajustables dentro de Preparación; no invade la mesa. */
main.tabletop-ui .bag-settings{margin:10px 0;padding:9px;border:1px solid #8d7146;border-radius:10px;background:#0c1720de;font:12px/1.4 Georgia,serif;color:#ded0b4}
main.tabletop-ui .bag-settings summary{cursor:pointer;color:#efc983;font-weight:bold}
main.tabletop-ui .bag-settings p{font-size:11px;color:#bcb9ab;margin:8px 0}
main.tabletop-ui .bag-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px}
main.tabletop-ui .bag-fields label{display:flex;align-items:center;justify-content:space-between;gap:3px;font:10px Georgia,serif}
main.tabletop-ui .bag-fields input{background:#0b151e;color:#f1d8a6;width:38px;min-width:0;text-align:center;border:1px solid #937849;border-radius:6px;padding:3px 1px;font:12px Georgia,serif}

/* Etapa 3: controles de expansión compactos, sin alterar el tablero flotante. */
.expansion-settings{margin:11px 0;padding:8px;border:1px solid #a5804c77;border-radius:10px;background:#191c22e0;}
.expansion-toggle{display:flex;align-items:center;gap:7px;color:#f3d7a7;font-size:12px;cursor:pointer}
.expansion-settings input[type="checkbox"]{accent-color:#d1a45c;}
.expansion-options{margin-top:10px;padding:7px 2px 2px;border-top:1px solid #8e6e48aa}
.expansion-options[hidden]{display:none!important}
.expansion-options .field{align-items:start;flex-wrap:wrap}
.expansion-options .field label{font-size:11px;flex:1;min-width:95px}
.expansion-options select{max-width:100%;font-size:11px;min-width:100px;flex:1}
.treasure-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px}
.treasure-count input{width:53px;border:1px solid #8d7654;border-radius:7px;background:#1a2730;color:#fff;padding:5px}
.wizard-strip{display:flex;align-items:center;gap:6px;margin:7px 0;padding:5px;background:#101b22e9;border:1px solid #886b45;border-radius:10px;font-size:11px;}
.wizard-strip[hidden]{display:none!important}
.wizard-strip img{height:53px;width:38px;object-fit:cover;object-position:top;border-radius:5px;cursor:pointer;}
.wizard-strip .wizard-text{flex:1}
.wizard-strip strong{color:#f3d296;display:block;}
.wizard-strip small{display:block;color:#a8c0c7}
.wizard-strip .wizard-badge{font-weight:700;color:#ffe3a9;}
.action-box button.spell-choice{border-color:#a47d4e;background:#2e2b2a;}
.treasure-notice{font-weight:600;color:#ffdea7;}
main.tabletop-ui .tile.treasure-tile::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;height:58%;background:url('assets/tiles/treasure_chest.png') center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(170,104,0,.55));z-index:4;pointer-events:none}

/* v1.1: ampliación limpia y foco exclusivamente en la carta. */
#cardModal.card-lightbox{background:rgba(1,4,8,.64);backdrop-filter:blur(14px) brightness(.70);-webkit-backdrop-filter:blur(14px) brightness(.70);cursor:zoom-out;z-index:250;}
#cardModal.card-lightbox > img{display:block;width:auto;height:auto;max-height:min(89vh,920px);max-width:90vw;object-fit:contain;border-radius:17px;box-shadow:0 20px 75px rgba(0,0,0,.8);cursor:zoom-out;}
main.tabletop-ui .hand-card.nebula-first{z-index:25!important;outline:3px solid #edd477;border-radius:11px;animation:nebula-required 1.1s ease-in-out infinite alternate;}
main.tabletop-ui .hand-card.nebula-target{z-index:24;outline:3px solid #b58dff;box-shadow:0 0 20px #b58dffcf;animation:nebula-required 1.2s ease-in-out infinite alternate;}
main.tabletop-ui .hand-card.spirit-paired{outline:2px solid #83e9cf;box-shadow:0 0 21px #60e7cfc0;}
@keyframes nebula-required {0%{filter:drop-shadow(0 0 5px #d4b6ff)}100%{filter:drop-shadow(0 0 20px #f2c55e)}}
.action-box .spirit-combine{border:1px solid #71cbb8;background:linear-gradient(100deg,#233e39,#162c32);color:#d6fff0;font-weight:600;}
.victory-banner{position:absolute;z-index:65;top:42%;left:50%;transform:translate(-50%,-50%);padding:22px 35px;min-width:280px;text-align:center;border:2px solid #f0ca80;border-radius:16px;background:linear-gradient(#282019ef,#10171aef);box-shadow:0 0 35px #ad84299c,0 10px 40px #000b;font:small-caps bold clamp(20px,3vw,37px) Georgia,serif;color:#ffe6a8;pointer-events:none;text-shadow:0 0 13px #d39b40;white-space:nowrap;}
.victory-banner[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){main.tabletop-ui .hand-card.nebula-first,main.tabletop-ui .hand-card.nebula-target{animation:none}}

/* v1.2.3 — mano estable: la zona que recibe el ratón NO se mueve. */
/* El abanico mantiene su inclinación. Hover y selección elevan únicamente
   el dibujo interior. Esto evita que la carta salga de debajo del puntero,
   pierda :hover, vuelva a entrar y oscile indefinidamente. */
main.tabletop-ui .hand-slot{
 position:relative;flex:0 0 clamp(107px,11.2vw,169px);
 width:clamp(107px,11.2vw,169px);min-width:0;margin:0 -9px;
 align-self:flex-start;transform:translateY(var(--fan-offset,0px)) rotate(var(--fan-angle,0deg));
 transform-origin:50% 90%;z-index:1;pointer-events:auto;
}
main.tabletop-ui .hand-slot:hover{z-index:24;}
main.tabletop-ui .hand-slot.is-selected,main.tabletop-ui .hand-slot.is-selected:hover{z-index:25;}
main.tabletop-ui .hand-slot .hand-card{
 display:block;position:relative;flex:none!important;width:100%!important;
 min-width:0!important;max-width:100%;margin:0!important;
 transform:translateY(0) scale(1)!important;
 transition:transform .2s cubic-bezier(.2,.72,.2,1),box-shadow .2s ease;
 transform-origin:50% 90%;
}
main.tabletop-ui .hand-slot:hover:not(.is-selected) .hand-card{
 transform:translateY(-18px) scale(1.025)!important;
 box-shadow:0 14px 28px #000e,0 0 0 2px #dec483;
}
/* La seleccion permanece marcada pero NO mantiene levantada la carta.
   Solo el puntero la eleva; al salir, vuelve al abanico, sin perder seleccion. */
main.tabletop-ui .hand-slot.is-selected:not(:hover) .hand-card{
 transform:translateY(0) scale(1)!important;
 border-color:#e5bb71;
 box-shadow:0 10px 19px #000b,0 0 0 1px #e5bb71;
}
main.tabletop-ui .hand-slot.is-selected:hover .hand-card{
 transform:translateY(-43px) scale(1.05)!important;
 border-color:#e5bb71;
 box-shadow:0 15px 30px #000e,0 0 0 2px #ffc875;
}
/* El juego usa una mano replegada o desplegada; ambas conservan exactamente
   las mismas reglas de selección sin giros ni vaivén. */
main.tabletop-ui .control-token,main.tabletop-ui .control-token:hover,main.tabletop-ui .control-token.target{z-index:3!important;}
main.tabletop-ui .token,main.tabletop-ui .token:hover,main.tabletop-ui .token.target{z-index:7;}
main.tabletop-ui .token.suppressed:not(.target){outline:2px solid #b497ee;border-radius:50%;}
@media(max-width:1100px){main.tabletop-ui .hand-slot{flex-basis:clamp(100px,12vw,128px);width:clamp(100px,12vw,128px);margin:0 -8px;}}
@media(max-width:650px){main.tabletop-ui .hand-slot{flex-basis:clamp(66px,17vw,112px);width:clamp(66px,17vw,112px);margin:0 -7px;}}

/* v1.2.5 — efectos de juego sin tocar el comportamiento del abanico */
@keyframes furia-hit-shake {
  0%,100%{filter:drop-shadow(0 3px 4px #000);}
  15%,50%,80%{filter:drop-shadow(0 0 10px #f55);}
}
@keyframes furia-hit-img {
  0%,100%{transform:translateX(0)}
  16%{transform:translateX(-5px) rotate(-5deg)}
  34%{transform:translateX(6px) rotate(4deg)}
  53%{transform:translateX(-4px) rotate(-3deg)}
  72%{transform:translateX(3px) rotate(2deg)}
}
main.tabletop-ui .token.hit-feedback{animation:furia-hit-shake .4s ease-out!important;}
main.tabletop-ui .token.hit-feedback img{animation:furia-hit-img .4s ease-out!important;}
@keyframes furia-hit-number {0%{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1;transform:translate(-50%,-12px) scale(1.25)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-42px) scale(1)}}
main.tabletop-ui .hit-damage-number{position:absolute;z-index:15;pointer-events:none;animation:furia-hit-number 1.2s ease-out forwards;color:#ffaaa6;text-shadow:0 2px 2px #210709,0 0 9px #ff4141;font:900 26px Georgia,serif;}
@keyframes furia-nebula-violet{0%,100%{filter:drop-shadow(0 0 4px #b875f6) drop-shadow(0 0 3px #a94aff)}50%{filter:drop-shadow(0 0 14px #e0a5ff) drop-shadow(0 0 11px #9a4eff)}}
main.tabletop-ui .token.nebula-victim,main.tabletop-ui .token.nebula-victim:hover{z-index:12!important;outline:3px solid #c480ff;border-radius:50%;animation:furia-nebula-violet 1s ease-in-out infinite;}
.action-box button.nebula-violet-choice{border:2px solid #c489ff;box-shadow:0 0 9px #a74bffa8;color:#f4d6ff;}
.action-box button.spirit-unlink{border:1px solid #bca578;color:#f4dec0;background:#26231f;font-size:12px;}
@media(prefers-reduced-motion:reduce){main.tabletop-ui .token.hit-feedback,main.tabletop-ui .token.hit-feedback img,main.tabletop-ui .token.nebula-victim{animation:none!important}main.tabletop-ui .hit-damage-number{animation:none;opacity:1;}}

/* v1.2.7 — VFX sobre el tablero; no interceptan los clics ni cambian reglas. */
main.tabletop-ui .tile.nebula-territory{isolation:isolate;}
main.tabletop-ui .tile.nebula-territory::after{
 content:'';position:absolute;inset:9% 6%;z-index:2;pointer-events:none;
 clip-path:polygon(50% 0,96% 24%,96% 76%,50% 100%,4% 76%,4% 24%);
 background:radial-gradient(ellipse at 40% 66%,#a55af041 0%,#6d2b9999 26%,#3b167077 46%,transparent 75%);
 mix-blend-mode:screen;animation:furia-nebula-haze 6.6s ease-in-out infinite alternate;
}
main.tabletop-ui .tile.nebula-total::after{
 background:radial-gradient(ellipse at 45% 52%,#c476ff85 0%,#7534aa9a 40%,#39126772 64%,transparent 80%);
 animation-duration:4.7s;
}
@keyframes furia-nebula-haze{from{opacity:.30;filter:blur(6px);transform:translateY(5px) scale(.93)}to{opacity:.82;filter:blur(2px);transform:translateY(-5px) scale(1.06)}}
main.tabletop-ui .hex-world .furia-fx-burst,main.tabletop-ui .hex-world .furia-fx-beam,main.tabletop-ui .hex-world .furia-fx-spark{
 position:absolute;z-index:13;pointer-events:none;will-change:opacity,transform;
}
main.tabletop-ui .furia-fx-beam{
 height:7px;transform-origin:left center;border-radius:100%;
 background:linear-gradient(90deg,transparent 0%,#ffdba7 26%,#fffdf7 67%,transparent 100%);
 box-shadow:0 0 10px 4px #ff8f4288,0 0 25px #fb6b45aa;
 animation:furia-beam .55s ease-out forwards;
}
main.tabletop-ui .furia-fx-beam.fx-nebula{background:linear-gradient(90deg,transparent,#d09bff,#7944fb,transparent);box-shadow:0 0 17px 7px #8d4affaa}
main.tabletop-ui .furia-fx-beam.fx-ray,main.tabletop-ui .furia-fx-beam.fx-spell{background:linear-gradient(90deg,transparent,#eee0ff,#86defe,transparent);box-shadow:0 0 16px #80dfff}
@keyframes furia-beam{0%{opacity:0;scale:.18 1}25%{opacity:1;scale:1 1}100%{opacity:0;scale:1 .2}}
main.tabletop-ui .furia-fx-burst{
 width:92px;height:92px;border-radius:50%;border:5px solid #ffbc63;
 box-shadow:0 0 20px 9px #ff903b94,inset 0 0 21px 8px #ffd4a06b;
 animation:furia-burst .9s ease-out forwards;
}
main.tabletop-ui .furia-fx-burst.fx-nebula{border-color:#be7afa;box-shadow:0 0 24px 10px #784bdba6,inset 0 0 17px #d598ff88;background:radial-gradient(circle,#ae73df33,transparent 70%)}
main.tabletop-ui .furia-fx-burst.fx-ray,main.tabletop-ui .furia-fx-burst.fx-spell{border-color:#96e5ff;box-shadow:0 0 25px 9px #6fc6ff8a,inset 0 0 20px #e1f9ff8a}
main.tabletop-ui .furia-fx-burst.fx-defense,main.tabletop-ui .furia-fx-burst.fx-shield{border-color:#fce4a6;box-shadow:0 0 20px 10px #f4cd70a1,inset 0 0 27px #ffe5a880;background:radial-gradient(circle,#ffeea748,transparent 68%)}
main.tabletop-ui .furia-fx-burst.fx-miss{opacity:.6;filter:grayscale(.5)}
@keyframes furia-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}22%{opacity:1;transform:translate(-50%,-50%) scale(.53)}70%{opacity:.83}100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}}
main.tabletop-ui .furia-fx-spark{width:9px;height:9px;border-radius:50%;background:#ffdf99;box-shadow:0 0 13px 5px #ffd57d99;animation:furia-spark .75s ease-out forwards}
main.tabletop-ui .furia-fx-spark.fx-nebula{background:#d8aeff;box-shadow:0 0 12px 4px #9251fcba}
main.tabletop-ui .furia-fx-spark.fx-spell{background:#d4f5ff;box-shadow:0 0 12px 4px #7fcaffc2}
@keyframes furia-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.65)}}

/* Selección separada de inspección de cartas: el botón Leer nunca gasta recursos. */
main.tabletop-ui .resource-cards{align-items:flex-start;gap:12px;padding:8px 5px 16px;}
main.tabletop-ui .resource-slot{flex:0 0 102px;min-width:102px;position:relative;overflow:visible;border:2px solid transparent;border-radius:12px;padding:2px;transition:border-color .15s,box-shadow .15s;}
main.tabletop-ui .resource-slot .resource-card{display:block;width:100%;max-width:none;min-width:0;flex:none;margin:0;border:0;background:transparent;padding:0;cursor:zoom-in;}
main.tabletop-ui .resource-slot.eligible{border-color:#eec57b;box-shadow:0 0 0 1px #ebbd54,0 0 17px #e4a446a8;}
main.tabletop-ui .resource-slot.eligible .resource-card{cursor:pointer;}
main.tabletop-ui .resource-slot.not-eligible{opacity:.68;}
main.tabletop-ui .resource-slot.eligible .resource-card:hover{filter:drop-shadow(0 0 10px #ffcf6c);}
main.tabletop-ui .resource-slot .resource-read{
 position:absolute;left:5px;right:5px;bottom:24px;z-index:5;padding:6px 2px;
 border:1px solid #eed4a5;border-radius:7px;background:#101922e8;color:#ffe6b3;
 font:700 11px Georgia,serif;white-space:nowrap;box-shadow:0 5px 12px #000b;
 opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity .16s,transform .16s;
}
main.tabletop-ui .resource-slot:hover .resource-read,main.tabletop-ui .resource-slot:focus-within .resource-read{opacity:1;transform:translateY(0);pointer-events:auto;}
main.tabletop-ui .resource-slot .resource-read:hover{background:#473520;border-color:#ffe4a3;}
main.tabletop-ui .resource-slot .resource-card small{right:4px;bottom:4px;}
@media(prefers-reduced-motion:reduce){
 main.tabletop-ui .tile.nebula-territory::after{animation:none!important;opacity:.45}
 main.tabletop-ui .furia-fx-burst,main.tabletop-ui .furia-fx-beam,main.tabletop-ui .furia-fx-spark{animation-duration:.01s!important}
}

/* v1.2.21: solo se tira desde el panel de Acciones izquierdo.
   El panel de la derecha queda reservado a resultados, nunca a un segundo botón. */
#rollDiceButton{display:none!important}

/* v1.2.30 — canal Foley, separado de la música */
.foley-settings{margin:10px 0;padding:10px 12px;border:1px solid #a5804c77;border-radius:10px;background:#191c22e0;color:#e9d2a4;font:13px/1.4 Georgia,serif}
.foley-settings .foley-row{display:flex;gap:10px;align-items:center}
.foley-settings label{font-weight:bold;min-width:63px}
.foley-settings input[type=range]{flex:1;min-width:60px;accent-color:#d8ae6d;cursor:pointer}
.foley-settings output{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
.foley-settings p{font:11px/1.4 Georgia,serif;opacity:.85;margin:5px 0 0}