.hr-game{--g-mint:#b8edcf;--g-gold:#d7c58e;--g-ink:#0a1813;position:relative;width:min(100%,980px);margin:auto;overflow:hidden;color:#e6ead6;background:#0c1b15;border:1px solid #415342;border-radius:18px;font-family:var(--ui,Nunito,sans-serif);box-shadow:0 26px 90px #0008;text-align:left}
.hr-game *{box-sizing:border-box}.hr-game button{font:inherit;cursor:pointer}.hr-game button:focus-visible{outline:2px solid #e8d69a;outline-offset:3px}.hr-game [hidden]{display:none!important}.hr-game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid #b2ceaa14;background:#11241c}.hr-game-title{display:flex;align-items:center;gap:11px}.hr-game-title strong{display:block;font-size:11px;letter-spacing:1.7px;font-weight:600;color:#c1d2b7}.hr-game-title span:not(.hr-game-live){display:block;margin-top:5px;font-size:11px;color:#8f9f8c}.hr-game-live{width:8px;height:8px;border:2px solid #b5d5a6;border-radius:50%;box-shadow:0 0 12px #b5d5a640}.hr-game-actions{display:flex;gap:7px}.hr-game-control{padding:7px 12px;color:#c8d5be;background:#1b3024;border:1px solid #40543d;border-radius:5px;font-size:11px!important}.hr-game-control:hover{background:#29402e}.hr-game-control:disabled{opacity:.35;cursor:default}.hr-game-scoreboard{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:700px;margin:auto;padding:17px 24px 13px}.hr-game-side{width:38%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}.hr-game-side>span{font-size:11px;font-weight:700;letter-spacing:1.5px}.hr-game-side>span small{display:block;font-size:8px;letter-spacing:1.2px;margin-top:4px;color:#82967e}.hr-game-side strong{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;color:#bce5c9}.hr-game-side strong small{font-size:8px;color:#7c927e}.hr-game-side-enemy>span{color:#e6b294}.hr-game-side-enemy strong{color:#e6b294}.hr-game-health{width:100%;height:4px;background:#24382a;border-radius:5px;overflow:hidden;margin-top:4px}.hr-game-health i{display:block;height:100%;background:#b0d7af;transition:width .15s linear}.hr-game-side-enemy .hr-game-health i{background:#d7a184}.hr-game-clock{flex-shrink:0;width:95px;text-align:center}.hr-game-clock strong{display:block;font-family:var(--display,Royale,sans-serif);font-size:30px;line-height:1;color:#e9e3c7;font-variant-numeric:tabular-nums;font-weight:400}.hr-game-clock span{display:block;margin-top:7px;font-size:7px;letter-spacing:1.6px;color:#8c9b7e;white-space:nowrap}.hr-game-clock .is-urgent{color:#e8ac85}.hr-game-board{position:relative;isolation:isolate;width:100%;overflow:hidden;background:#091b14}.hr-game-canvas{display:block;width:100%;height:auto;max-height:52vh;min-height:270px;object-fit:contain;touch-action:manipulation;cursor:crosshair}.hr-game-board-note{position:absolute;bottom:10px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none;font-size:7px;letter-spacing:1.6px;color:#78917b;opacity:.7}.hr-game-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:2;background:radial-gradient(ellipse at center,#0d2018df,#07110ccb);backdrop-filter:blur(3px)}.hr-game-intro{text-align:center;width:min(100%,430px)}.hr-game-eyebrow{display:block;font-size:9px;letter-spacing:2.2px;color:#b3be94;margin-bottom:14px}.hr-game-emblem{width:52px;height:52px;padding:12px;margin:0 auto 14px;color:#d7c58e;border:1px solid #9d95614d;border-radius:12px;transform:rotate(0deg);background:#bca76c08}.hr-game-emblem svg{width:100%;height:100%}.hr-game-intro h2{font-family:var(--display,Royale,sans-serif);font-size:40px;line-height:1.1;font-weight:400;color:#eef0dc;margin:0 0 14px;letter-spacing:-1.5px}.hr-game-intro p{font-size:13px;line-height:1.7;color:#abbba2;margin:0 auto 18px;max-width:350px}.hr-game-rules{display:flex;justify-content:center;gap:27px;margin:0 0 22px;font-size:10px;color:#a3af94}.hr-game-rules b{font-size:15px;font-weight:500;color:#d9d9b7;margin-right:4px}.hr-game-primary{border:1px solid #d5e6b3;border-radius:7px;padding:13px 30px;background:#bfdb9f;color:#183020;font-size:12px!important;font-weight:700!important;letter-spacing:.3px;box-shadow:0 6px 25px #0004;min-width:190px}.hr-game-primary:hover{background:#d2e9b8;transform:translateY(-1px)}.hr-game-intro>small{display:block;margin-top:14px;font-size:9px;color:#7e947a}.hr-game-result-stats{display:flex;justify-content:center;gap:24px;margin:0 0 24px}.hr-game-result-stats span{font-size:7px;letter-spacing:1px;color:#9cab8e}.hr-game-result-stats b{display:block;font-family:var(--display,Royale,sans-serif);font-size:27px;font-weight:400;color:#d5dfb9;margin-bottom:6px}.hr-game-command{position:relative;padding:0 24px 14px;background:linear-gradient(#102118,#13271d);border-top:1px solid #52634455}.hr-game-energy{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 0 11px}.hr-game-energy-icon{color:#a7bfed;font-size:14px}.hr-game-energy strong{font-size:15px;color:#d3e2e7;width:16px;text-align:right;font-variant-numeric:tabular-nums}.hr-game-energy>span:not(.hr-game-energy-icon){font-size:10px;color:#859389}.hr-game-energy small{font-size:8px;letter-spacing:1.5px;color:#94a48c;margin-left:4px}.hr-game-energy-track{display:flex;gap:3px;margin-left:8px}.hr-game-energy-track i{display:block;width:18px;height:6px;border-radius:1px;background:linear-gradient(90deg,#9db7c9 var(--fill),#31473f var(--fill))}.hr-game-hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:630px;margin:auto}.hr-game-card{position:relative;min-width:0;padding:9px 6px 12px;border:1px solid #586544;border-radius:8px;background:linear-gradient(145deg,#334631,#1c3024);color:#e0e4ce;text-align:center;transition:transform .15s,border-color .15s,background .15s;overflow:hidden;isolation:isolate}.hr-game-card:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 15%,var(--card-color),transparent 75%);opacity:.08;z-index:-1}.hr-game-card:hover{transform:translateY(-3px);border-color:#a9bc86}.hr-game-card[aria-pressed=true]{border-color:#d7d5a0;background:linear-gradient(145deg,#41573b,#243b2a);box-shadow:0 0 0 1px #b7c68b,0 0 20px #b6d89812;transform:translateY(-3px)}.hr-game-card.is-unaffordable{filter:saturate(.45)}.hr-game-card.is-unaffordable .hr-game-card-cost{color:#8b9a8a;background:#283b30}.hr-game-card-cost{position:absolute;top:7px;left:7px;width:22px;height:23px;display:grid;place-items:center;background:#bfd2dd;color:#233a3a;font-family:var(--display,Royale,sans-serif);font-size:16px;border:1px solid #e5f0de;border-radius:5px 5px 8px 8px;box-shadow:0 2px 8px #07190d66}.hr-game-card-key{position:absolute;right:9px;top:10px;font-size:9px;color:#71856c}.hr-game-card-art{display:block;width:37px;height:37px;margin:2px auto 7px;color:var(--card-color);filter:drop-shadow(0 3px 5px #0005)}.hr-game-card-art svg{width:100%;height:100%}.hr-game-card strong{display:block;font-size:11px;letter-spacing:.1px;font-weight:600;white-space:nowrap}.hr-game-card>small{display:block;margin-top:4px;font-size:8px;letter-spacing:.4px;color:#9daa8e}.hr-game-card-selected{display:block;position:absolute;bottom:0;left:0;right:0;font-size:5px;letter-spacing:1.4px;height:8px;line-height:8px;background:#c1d299;color:#263d25;opacity:0}.hr-game-card[aria-pressed=true] .hr-game-card-selected{opacity:1}.hr-game-deploy-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:14px auto 0;max-width:760px}.hr-game-lane{display:flex;align-items:center;justify-content:center;gap:13px;white-space:nowrap;min-width:137px;min-height:39px;padding:7px 12px;color:#c0d3ae;background:#243c2a;border:1px solid #566b47;border-radius:5px;font-size:11px!important;transition:background .15s,border-color .15s}.hr-game-lane:hover{background:#355135;border-color:#b7c58a}.hr-game-lane:disabled{opacity:.4;cursor:default}.hr-game-lane.is-unaffordable{color:#84977f}.hr-game-lane-marker{font-family:var(--display,Royale,sans-serif);color:#d2c78b;font-size:13px}.hr-game kbd{font:9px var(--ui,Nunito,sans-serif);padding:3px 4px;min-width:16px;text-align:center;border:1px solid #66785866;border-radius:3px;color:#9dab8b;background:#12281a}.hr-game-card-hint{text-align:center;font-size:9px;line-height:1.5;color:#95a58b;max-width:325px}.hr-game-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 21px;background:#0d1e15;border-top:1px solid #40513955;min-height:41px}.hr-game-notice{font-size:10px;line-height:1.45;color:#91a287;transition:color .2s}.hr-game-notice.is-active{color:#d4d9b2}.hr-game-help-button{border:0;background:none;padding:0;color:#b6c59f;font-size:10px!important;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}.hr-game-help{padding:17px 22px;background:#14271b;border-top:1px solid #43573b;font-size:11px;color:#a4b396;line-height:1.7}.hr-game-help strong{color:#d1dcc0;font-size:12px}.hr-game-help p{margin:6px 0 0}.hr-game-help kbd{display:inline-block;padding:0 4px;line-height:16px}.hr-game-deployed .hr-game-energy-icon{animation:hr-energy .3s ease-out}@keyframes hr-energy{50%{transform:scale(1.5);color:#ecf5cb}}
@media(min-width:1500px){.hr-game-canvas{max-height:55vh}}
@media(max-width:650px){.hr-game{border-radius:12px}.hr-game-top{padding:12px 13px;gap:8px}.hr-game-title{gap:7px}.hr-game-title strong{font-size:8px;letter-spacing:1.1px}.hr-game-title span:not(.hr-game-live){font-size:9px}.hr-game-actions{gap:5px}.hr-game-control{padding:6px 8px;font-size:10px!important}.hr-game-scoreboard{padding:13px 17px 10px;gap:12px}.hr-game-side>span{font-size:9px;letter-spacing:1px}.hr-game-side>span small{font-size:6px}.hr-game-side strong{font-size:15px}.hr-game-clock{width:70px}.hr-game-clock strong{font-size:25px}.hr-game-clock span{font-size:6px;letter-spacing:1px}.hr-game-canvas{max-height:none;min-height:0;aspect-ratio:880/680;object-fit:cover}.hr-game-board-note{bottom:7px;left:12px;right:12px;font-size:5px}.hr-game-overlay{padding:15px}.hr-game-intro h2{font-size:31px;letter-spacing:-1px;margin-bottom:10px}.hr-game-intro p{font-size:11px;line-height:1.6;margin-bottom:13px;max-width:290px}.hr-game-eyebrow{font-size:7px;margin-bottom:10px;letter-spacing:1.8px}.hr-game-emblem{width:39px;height:39px;padding:9px;margin-bottom:10px;border-radius:9px}.hr-game-rules{gap:18px;font-size:8px;margin-bottom:15px}.hr-game-rules b{font-size:12px}.hr-game-primary{padding:11px 24px;font-size:11px!important;min-width:170px}.hr-game-intro>small{font-size:7px;margin-top:10px}.hr-game-command{padding:0 12px 12px}.hr-game-energy{padding:10px 0;gap:5px}.hr-game-energy-track{gap:2px;margin-left:5px}.hr-game-energy-track i{width:13px;height:5px}.hr-game-energy small{font-size:6px;letter-spacing:1px}.hr-game-hand{gap:6px}.hr-game-card{border-radius:6px;padding:7px 3px 12px}.hr-game-card-cost{top:5px;left:5px;width:17px;height:19px;font-size:13px}.hr-game-card-key{display:none}.hr-game-card-art{width:30px;height:30px;margin:4px auto 7px}.hr-game-card strong{font-size:9px;letter-spacing:-.2px}.hr-game-card>small{font-size:6px;letter-spacing:.1px}.hr-game-deploy-row{gap:9px;margin-top:11px;flex-wrap:wrap}.hr-game-lane{min-width:0;width:calc(50% - 5px);min-height:39px;font-size:10px!important;gap:17px}.hr-game-card-hint{order:3;max-width:100%;width:100%;font-size:8px;min-height:25px;padding:0 8px}.hr-game-footer{padding:9px 13px;gap:9px;align-items:flex-start}.hr-game-notice{font-size:8px}.hr-game-help-button{font-size:9px!important}.hr-game-result-stats{gap:17px;margin-bottom:18px}.hr-game-result-stats span{font-size:6px}.hr-game-result-stats b{font-size:23px;margin-bottom:4px}.hr-game-help{padding:14px;font-size:10px}.hr-game-help strong{font-size:11px}}
@media(max-width:380px){.hr-game-title strong{font-size:7px}.hr-game-intro .hr-game-emblem{display:none}.hr-game-intro h2{font-size:28px}.hr-game-rules{margin-bottom:13px}.hr-game-intro p{font-size:10px}.hr-game-card strong{font-size:8px}.hr-game-card>small{font-size:5px}.hr-game-control{padding:6px}.hr-game-top{padding:10px}.hr-game-energy-track i{width:11px}}
@media(prefers-reduced-motion:reduce){.hr-game *{animation:none!important;transition:none!important}}
.hr-game.has-card-art .hr-game-card-art{width:48px;height:48px;margin-top:0;border-radius:8px;background-image:url("./assets/card-atlas.png");background-size:400% 200%;border:1px solid #a8b38a66;box-shadow:0 2px 9px #0005}.hr-game.has-card-art .hr-game-card-art svg{visibility:hidden}@media(max-width:650px){.hr-game.has-card-art .hr-game-card-art{width:38px;height:38px;margin-top:3px;border-radius:6px}.hr-game-lane{min-height:44px}}

/* The command desk stays beside the battlefield on desktop, so a complete
   match remains playable without scrolling between the arena and its cards. */
@media(min-width:800px){
  .hr-game{
    --arena-height:min(480px,calc(100svh - 235px));
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    grid-template-rows:auto auto var(--arena-height) auto auto;
    grid-template-areas:"heading heading" "score command" "board command" "footer footer" "help help";
    width:min(100%,980px);
    border-radius:12px;
  }
  .hr-game-top{grid-area:heading;padding:10px 18px;min-height:49px}
  .hr-game-scoreboard{grid-area:score;width:100%;max-width:none;min-height:64px;margin:0;padding:10px 22px;gap:18px}
  .hr-game-clock strong{font-size:28px}
  .hr-game-board{grid-area:board;height:var(--arena-height);min-height:0}
  .hr-game-canvas{width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;object-fit:contain}
  .hr-game-board-note{bottom:8px;left:16px;right:16px;font-size:6px}
  .hr-game-command{grid-area:command;display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;padding:18px 17px;border-top:0;border-left:1px solid #52634455;background:linear-gradient(135deg,#183123,#10241a)}
  .hr-game-energy{display:grid;grid-template-columns:14px 18px 24px 1fr;gap:7px;padding:0 0 17px;align-items:center;justify-content:normal}
  .hr-game-energy small{grid-column:4;grid-row:1;justify-self:end;margin:0;font-size:8px}
  .hr-game-energy-track{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:0}
  .hr-game-energy-track i{width:auto;height:6px}
  .hr-game-hand{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:10px;margin:0}
  .hr-game-card{min-height:110px;padding:10px 6px 12px}
  .hr-game-card strong{font-size:11px}
  .hr-game-card>small{font-size:8px}
  .hr-game-deploy-row{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:none;gap:8px;margin:17px 0 0}
  .hr-game-lane{width:100%;min-width:0;min-height:42px;justify-content:space-between;padding:9px 13px;gap:12px}
  .hr-game-lane:first-child{order:0}
  .hr-game-lane:last-child{order:1}
  .hr-game-card-hint{order:2;width:100%;max-width:none;min-height:56px;margin-top:4px;padding-top:11px;border-top:1px solid #7e93613d;text-align:left;font-size:10px;line-height:1.5}
  .hr-game-footer{grid-area:footer;min-height:38px;padding:9px 18px}
  .hr-game-help{grid-area:help;max-height:150px;overflow:auto}
}

@media(min-width:800px) and (max-height:700px){
  .hr-game-top{padding-block:8px;min-height:45px}
  .hr-game-scoreboard{min-height:60px;padding-block:8px}
  .hr-game-command{padding:12px 16px}
  .hr-game-energy{padding-bottom:12px;gap:5px}
  .hr-game-hand{gap:8px}
  .hr-game-card{min-height:91px;padding:8px 5px 11px}
  .hr-game.has-card-art .hr-game-card-art{width:35px;height:35px;margin-bottom:5px}
  .hr-game-card-art{width:29px;height:29px;margin-bottom:5px}
  .hr-game-card strong{font-size:10px}
  .hr-game-card>small{font-size:7px;margin-top:3px}
  .hr-game-card-cost{width:19px;height:20px;font-size:14px}
  .hr-game-deploy-row{margin-top:12px;gap:6px}
  .hr-game-lane{min-height:36px;padding-block:7px}
  .hr-game-card-hint{min-height:42px;margin-top:2px;padding-top:7px;font-size:9px;line-height:1.4}
  .hr-game-overlay{padding:15px}
  .hr-game-emblem{width:38px;height:38px;margin-bottom:10px;padding:8px}
  .hr-game-eyebrow{margin-bottom:9px}
  .hr-game-intro h2{font-size:34px;margin-bottom:10px}
  .hr-game-intro p{font-size:12px;line-height:1.5;margin-bottom:12px}
  .hr-game-rules{margin-bottom:15px}
  .hr-game-intro>small{margin-top:10px}
}

@media(max-width:799px){
  .hr-game-canvas{height:auto;aspect-ratio:880/620;min-height:0;max-height:max(210px,calc(100svh - 480px));object-fit:contain}
}

@media(max-width:799px) and (max-height:760px){
  .hr-game-overlay{padding:12px}
  .hr-game-intro .hr-game-emblem{display:none}
  .hr-game-eyebrow{margin-bottom:8px}
  .hr-game-intro h2{font-size:29px;margin-bottom:9px}
  .hr-game-intro p{font-size:10px;line-height:1.5;margin-bottom:10px}
  .hr-game-rules{margin-bottom:12px}
  .hr-game-intro>small{margin-top:8px}
  .hr-game-result-stats{margin-bottom:12px}
}
