/* This stylesheet is loaded only by preview-demo.html. */
.hd-entry{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.hd-entry button,.hd-ai-entry{height:44px;min-width:182px;padding:0 24px;border:0;background:transparent url('/moon-cta-plate.png') center/100% 100% no-repeat;color:white;font-weight:850;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.hd-entry button:hover,.hd-ai-entry:hover{filter:brightness(1.12)}
.hd-entry button>span{display:grid;place-items:center;width:22px;height:22px;background:#fff;color:#8244e5;border-radius:50%;font:11px Arial}
.hd-entry small{color:#807298;font-size:12px}
.hd-ai-entry{font-size:14px;min-width:220px;margin:0 0 15px}
body.hero-demo-open{overflow:hidden!important}
#hero-demo{--hd-ink:#30205f;--hd-purple:#8045f1;position:fixed;inset:0;width:min(1100px,calc(100vw - 48px));height:min(850px,calc(100dvh - 40px));max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden;color:var(--hd-ink);background:#fffef8;border:2px solid #534084;border-radius:27px;box-shadow:0 8px 0 #cbbbe9,0 30px 100px #20124f66;font:15px/1.6 PortfolioSans,'Microsoft YaHei',sans-serif;isolation:isolate}
#hero-demo::backdrop{background:#17133896;backdrop-filter:blur(7px)}
#hero-demo *{box-sizing:border-box}
#hero-demo p{margin:0}
#hero-demo button{font:inherit;cursor:pointer}
#hero-demo [hidden]{display:none!important}
#hero-demo button:focus-visible{outline:3px solid #cf92ff;outline-offset:3px}
#hero-demo .hd-shell{height:100%;display:flex;flex-direction:column}
#hero-demo .hd-top{display:flex;gap:16px;align-items:center;padding:20px 28px 16px;border-bottom:1px solid #e9e1f5;flex:none}
#hero-demo .hd-symbol{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #c9b4f3;border-radius:14px;color:#7947cc;background:linear-gradient(140deg,#f3eaff,#e9f8ff);font-size:23px}
#hero-demo .hd-top h2{font-size:24px;line-height:1.35;font-weight:850;letter-spacing:.02em;margin:0}
#hero-demo .hd-top p{margin:5px 0 0;color:#87779e;font-size:13px}
#hero-demo .hd-top-copy{flex:1}
#hero-demo .hd-close{align-self:flex-start;width:42px;height:42px;border:1px solid #e0d4f2;border-radius:12px;background:#faf6ff;color:#65508f;font:30px/1 Arial}
#hero-demo .hd-close:hover{background:#efe6ff}
#hero-demo .hd-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(285px,1fr);gap:22px;padding:20px 26px 0;overflow:auto;overscroll-behavior:contain}
#hero-demo .hd-play-column{min-height:0;display:flex;flex-direction:column;gap:12px;align-items:center;padding:12px 18px 14px;border:1px solid #c6edf0;border-radius:19px;background:radial-gradient(ellipse at top,#e4fcff,#edfbf9 60%,#f0ecff);overflow:auto;overscroll-behavior:contain}
/* Stable wireframe surface: filters change card visibility, never the board height. */
#hero-demo .hd-device{position:relative;width:100%;max-width:420px;height:clamp(490px,calc(100dvh - 240px),620px);flex:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:46px 44px 92px 34px minmax(0,1fr) 52px;overflow:hidden;border:1px solid #a9c8ee;border-radius:18px;background:#eef7ff;box-shadow:0 3px 0 #c0d5ec,0 8px 24px #526e9812;color:#416394;container-type:inline-size}
#hero-demo .hd-game-top{display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#dceafa;border-bottom:1px solid #b6cfee;gap:8px}
#hero-demo .hd-game-top strong{font-size:16px;letter-spacing:.04em}
#hero-demo .hd-game-top small{font-size:10px;color:#6b86aa;white-space:nowrap}
#hero-demo .hd-page-link{padding:5px 8px;min-height:30px;border:1px solid #a7c4e7;border-radius:7px;background:#f3f9ff;color:#3f699f;font-size:11px;font-weight:700;white-space:nowrap}
#hero-demo .hd-formation-head{padding:5px 12px;display:flex;align-items:center;justify-content:space-between;font-size:12px;background:#c8daee}
#hero-demo .hd-team-tabs{display:flex;gap:5px}
#hero-demo .hd-team-tabs button{min-height:30px;padding:3px 9px;border:1px solid #a6c2e2;border-radius:6px;background:#eaf3fc;color:#56769e;font-size:11px}
#hero-demo .hd-team-tabs button[aria-pressed=true]{color:#fff;border-color:#426eaa;background:#5684c0;font-weight:800;box-shadow:0 2px 0 #aec4df}
#hero-demo .hd-formation-head span{font-size:11px;color:#5375a1}
#hero-demo .hd-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;gap:7px;padding:4px 12px 7px;background:#c8daee;min-height:0}
#hero-demo .hd-slot{position:relative;min-width:0;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#5074a5;touch-action:manipulation}
#hero-demo .hd-orb{width:100%;height:58px;border:1px solid #b2ccee;border-radius:10px;position:relative;display:grid;place-items:center;background:#f5faff;font:23px Arial;transition:border-color .15s,box-shadow .15s,background .15s}
#hero-demo .hd-slot small{font-size:10px;line-height:1.2;font-weight:700;white-space:nowrap}
#hero-demo .hd-slot-number{position:absolute;top:0;right:-2px;width:16px;height:16px;background:#e7f2ff;border:1px solid #a7c3e7;color:#5678a4;border-radius:5px;font-size:10px;line-height:14px}
#hero-demo .hd-slot.is-locked{color:#8197b4}
#hero-demo .hd-slot.is-locked .hd-orb{background:#dbe6f2;border-color:#b5c9df}
#hero-demo .hd-lock svg{width:22px;height:27px;fill:#eef4fb;stroke:#8da6c7;stroke-width:2}
#hero-demo .hd-slot.is-valid .hd-orb{border:2px dashed #dbb346;background:#fffae4;box-shadow:0 0 0 2px #fff5c66b}
#hero-demo .hd-slot.is-over .hd-orb{border:2px solid #c69723;background:#fff2b6;box-shadow:0 0 0 3px #f3d36c80}
#hero-demo .hd-slot.is-rejected .hd-orb{border-color:#ca8b88;background:#f6e6e4;box-shadow:0 0 0 2px #d6a6a45e}
#hero-demo .hd-slot.is-arrived .hd-orb{animation:hd-arrive .45s ease-out;border:2px solid #cfad4e;background:#fff4c2}
#hero-demo .hd-game-status{position:absolute;z-index:5;top:34%;left:50%;width:max-content;max-width:calc(100% - 28px);display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid #a6bfdc;border-radius:11px;background:#f5fafff7;box-shadow:0 5px 18px #36567e38;font-size:12px;color:#42638d;line-height:1.6;pointer-events:none;opacity:0;transform:translate(-50%,-5px);transition:opacity .18s ease,transform .18s ease}
#hero-demo .hd-game-status.is-visible{opacity:1;transform:translate(-50%,0)}
#hero-demo .hd-toast-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font:700 12px Arial}
#hero-demo .hd-toast-copy{min-width:0}
#hero-demo .hd-game-status[data-tone=success]{background:#f0fbf5f7;color:#40725c;border-color:#9ac7b2}
#hero-demo .hd-game-status[data-tone=warning]{background:#fff8e9f7;color:#90703b;border-color:#d9bf8f}
#hero-demo .hd-list-top{display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:12px;gap:8px}
#hero-demo .hd-count{font-size:10px;font-weight:400;white-space:nowrap;color:#8099b9;margin-left:4px}
#hero-demo .hd-list-top span{font-size:10px;color:#7792b3;white-space:nowrap}
#hero-demo .hd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;min-height:0;gap:8px;padding:5px 12px 12px;background:#edf6ff;overflow:auto}
#hero-demo .hd-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:0;min-width:0;border:1px solid #b5ceee;border-radius:9px;padding:28px 3px 7px;background:#f8fbff;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none;color:#5278ac;transition:box-shadow .15s,background .15s,border-color .15s}
#hero-demo .hd-card:hover{border-color:#7fa8da;background:#edf5ff}
#hero-demo .hd-card.is-selected{border:2px solid #d5a729;padding:27px 2px 6px;background:#fff6cd;box-shadow:0 0 0 2px #ffdf7390}
#hero-demo .hd-card.is-assigned{border-color:#729aca;background:#eaf3ff;box-shadow:inset 0 0 0 1px #bed3ed}
#hero-demo .hd-card-symbol{position:relative;flex:1;min-height:0;max-height:60px;width:100%;pointer-events:none}
#hero-demo .hd-hero-icon{display:block;width:clamp(28px,10cqw,48px);height:100%;max-height:48px;color:#93b5de;fill:currentColor;pointer-events:none;overflow:visible}
#hero-demo .hd-card-symbol .hd-hero-icon{position:absolute;inset:0;margin:auto;height:100%;max-height:100%}
#hero-demo .hd-orb .hd-hero-icon{width:34px;height:34px}
#hero-demo .hd-icon-soft{fill:#aec9e9}
#hero-demo .hd-icon-eye{fill:#577daa}
#hero-demo .hd-icon-cut{fill:#e6f1ff}
#hero-demo .hd-icon-line{fill:none;stroke:#587fac;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#hero-demo .hd-icon-stroke{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
#hero-demo .hd-card-name{font-size:clamp(10px,3cqw,13px);font-weight:750;line-height:1.3;white-space:nowrap;pointer-events:none}
#hero-demo .hd-type{position:absolute;top:3px;left:3px;display:block;min-width:14px;padding:0 3px;border:1px solid #c4d8ee;border-radius:4px;font-size:8px;line-height:12px;color:#6782a6;background:#edf4fd;pointer-events:none}
#hero-demo .hd-type[data-type=fire]{color:#967443;border-color:#e5d4af;background:#fcf2df}
#hero-demo .hd-type[data-type=water]{color:#587dab;border-color:#c5d9f0;background:#edf5ff}
#hero-demo .hd-type[data-type=wind]{color:#648a85;border-color:#c8ded9;background:#eef8f4}
#hero-demo .hd-type[data-type=nature]{color:#7c779f;border-color:#d9d4eb;background:#f2f0f9}
#hero-demo .hd-card-tag{position:absolute;top:-1px;left:-1px;right:-1px;padding:3px 1px;border:1px solid #426da5;border-radius:9px 9px 0 0;background:#416ca8;color:#fff;font-size:10px;font-weight:850;line-height:15px;text-align:center;white-space:nowrap;pointer-events:none}
#hero-demo .hd-card.is-assigned .hd-type{top:24px}
#hero-demo .hd-selected-tag{display:none;position:absolute;left:-5px;top:-6px;width:19px;height:19px;border:2px solid #fff;border-radius:50%;background:#d7ae3d;color:white;font:12px Arial;place-items:center;pointer-events:none}
#hero-demo .hd-card.is-selected .hd-selected-tag{display:grid}
#hero-demo .hd-filters{display:flex;gap:5px;padding:8px 10px;border-top:1px solid #d0e0f2;background:#edf6ff}
#hero-demo .hd-filters button{flex:1;border:1px solid #bdd4ee;background:#f5faff;color:#5c7faa;border-radius:8px;padding:4px 1px;font-size:11px;font-weight:700;min-height:34px}
#hero-demo .hd-filters button[aria-pressed=true]{background:#cfe5fc;border-color:#9bbfeb;color:#366ba9}
#hero-demo .hd-recommendations{grid-column:1;grid-row:3 / -1;min-height:0;overflow:auto;padding:12px;background:#edf6ff;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a4c4e8 transparent}
#hero-demo .hd-rec-intro{padding:0 1px 10px}
#hero-demo .hd-rec-intro h3{margin:0 0 4px;font-size:14px;color:#3f679a}
#hero-demo .hd-rec-intro p{font-size:11px;line-height:1.6;color:#6785ab}
#hero-demo .hd-rec-intro b{color:#365f95}
#hero-demo .hd-rec-list{display:grid;gap:10px}
#hero-demo .hd-rec-card{padding:10px;border:1px solid #b8cfee;border-radius:11px;background:#f9fcff}
#hero-demo .hd-rec-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}
#hero-demo .hd-rec-card h4{margin:0;font-size:13px;color:#436da4}
#hero-demo .hd-rec-card header small{font-size:10px;color:#8199b8}
#hero-demo .hd-rec-card p{font-size:10px;color:#7791b3;line-height:1.5;margin:4px 0 7px}
#hero-demo .hd-rec-lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:9px}
#hero-demo .hd-rec-member{position:relative;min-width:0;height:61px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 0 2px;border:1px solid #c7d9ee;border-radius:7px;background:#ecf4fe}
#hero-demo .hd-rec-member.is-locked{background:#e3ebf5}
#hero-demo .hd-rec-member .hd-hero-icon{width:27px;height:27px;flex:none}
#hero-demo .hd-rec-member .hd-lock svg{width:20px;height:24px}
#hero-demo .hd-rec-member small{font-size:9px;line-height:1.1;white-space:nowrap;color:#6889b3}
#hero-demo .hd-rec-position{position:absolute;top:0;left:3px;font-size:8px;line-height:12px;color:#97aecb}
#hero-demo .hd-apply{width:100%;min-height:32px;border:1px solid #4c78b2;border-radius:7px;background:#5e8cc6;color:#fff;font-size:11px;font-weight:800}
#hero-demo .hd-apply:hover{background:#4f7fbc}
#hero-demo .hd-apply:disabled{border-color:#b8cde4;background:#e3effa;color:#6c8cad;cursor:default}
#hero-demo .hd-rec-footnote{font-size:10px;line-height:1.6;color:#7d94b1;padding:10px 1px 0}
#hero-demo .hd-action-tools{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;width:100%;flex:none}
#hero-demo .hd-action-tools button{border:1px solid #c7b7e8;background:#fffefd;color:#67548b;border-radius:10px;min-height:36px;padding:6px 14px;font-size:12px;font-weight:700;box-shadow:0 2px 0 #ddd4ed}
#hero-demo .hd-action-tools button:hover{background:#f2ebff}
#hero-demo .hd-action-tools button:disabled{opacity:.4;cursor:default}
#hero-demo .hd-hints{width:100%;max-width:420px;border:1px solid #cce2ed;border-radius:11px;padding:10px 13px;background:#ffffffb8;color:#5d7494;font-size:12px}
#hero-demo .hd-hints p+p{margin-top:5px}
#hero-demo .hd-notes{min-height:0;overflow:auto;padding:2px 2px 15px;overscroll-behavior:contain}
#hero-demo .hd-notes-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
#hero-demo .hd-notes-heading h3{font-size:19px;margin:0;font-weight:850}
#hero-demo .hd-switch{border:0;background:transparent;display:flex;align-items:center;gap:7px;color:#8b78a3;padding:5px 0;font-size:11px}
#hero-demo .hd-switch i{display:block;width:36px;height:22px;border-radius:20px;background:#ccc4d8;position:relative}
#hero-demo .hd-switch i:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #40315b33;transition:transform .2s}
#hero-demo .hd-switch[aria-checked=true] i{background:#9460f1}
#hero-demo .hd-switch[aria-checked=true] i:after{transform:translateX(14px)}
#hero-demo .hd-task{padding:13px 15px;border:1px solid #dbd0fb;border-radius:13px;background:linear-gradient(110deg,#f4ecff,#f4faff);margin-bottom:12px}
#hero-demo .hd-task small{display:block;font-size:10px;color:#927dac;margin-bottom:4px;letter-spacing:.1em}
#hero-demo .hd-task strong{font-size:14px;display:block}
#hero-demo .hd-task p{font-size:12px;color:#9788a9;margin-top:5px}
#hero-demo .hd-note-card{padding:15px;margin-bottom:10px;border:1px solid #e2e5f4;border-radius:13px;background:linear-gradient(115deg,#fafcff,#fff);transition:background .2s,border-color .2s,box-shadow .2s}
#hero-demo .hd-note-card.is-current{border-color:#b599ec;background:linear-gradient(115deg,#f5efff,#f9fcff);box-shadow:inset 3px 0 #9b6be8}
#hero-demo .hd-note-card h4{display:flex;gap:10px;align-items:center;font-size:16px;margin:0 0 9px}
#hero-demo .hd-note-card h4 b{flex:none;display:grid;place-items:center;width:27px;height:27px;background:linear-gradient(145deg,#b588fb,#7c4aed);border-radius:50%;color:#fff;font:700 13px Arial;box-shadow:0 2px 0 #ded1f8}
#hero-demo .hd-note-card p{font-size:12px;color:#827697;line-height:1.85}
#hero-demo .hd-note-card strong{font-size:12px;color:#624d89;display:block;margin-bottom:3px}
#hero-demo .hd-feedback{padding:12px 14px;border:1px solid #cae6dd;border-radius:12px;background:#f3fcf7;color:#417b70;margin-top:13px;min-height:75px}
#hero-demo .hd-feedback b{font-size:11px;color:#69998d;display:block;margin-bottom:4px}
#hero-demo .hd-feedback p{font-size:13px;line-height:1.65}
#hero-demo .hd-note-off{padding:25px 15px;border:1px dashed #d7cce8;border-radius:13px;text-align:center;color:#8a7e9c;font-size:13px;background:#faf8ff}
#hero-demo .hd-boundary{margin-top:12px;color:#a094b0;font-size:10px;line-height:1.8}
#hero-demo .hd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 28px 14px;color:#a094b0;font-size:11px;flex:none}
#hero-demo .hd-foot span:first-child{color:#9078b2}
#hero-demo .hd-ghost{position:fixed;left:0;top:0;z-index:10;width:84px;height:108px;border:2px solid #d5a729;background:#fff6cd;border-radius:10px;box-shadow:0 8px 18px #06276377;pointer-events:none;overflow:hidden;opacity:.96;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 7px;will-change:transform}
#hero-demo .hd-ghost .hd-card-name{font-size:11px}
@keyframes hd-arrive{0%{transform:scale(.83);filter:brightness(1.65)}55%{transform:scale(1.1)}100%{transform:scale(1);filter:none}}
@media(max-height:850px) and (min-width:761px){#hero-demo{height:calc(100dvh - 28px)}#hero-demo .hd-top{padding:13px 24px 10px}#hero-demo .hd-layout{padding-top:12px;gap:16px}#hero-demo .hd-device{max-width:400px}#hero-demo .hd-top h2{font-size:22px}#hero-demo .hd-foot{padding-top:8px;padding-bottom:9px}#hero-demo .hd-note-card{padding:11px 13px}#hero-demo .hd-note-card h4{margin-bottom:5px;font-size:15px}#hero-demo .hd-note-card p{line-height:1.6}#hero-demo .hd-task{padding:9px 12px}#hero-demo .hd-play-column{padding:10px 12px}}
@media(max-width:760px){#hero-demo{width:calc(100vw - 18px);height:calc(100dvh - 20px);border-radius:20px}#hero-demo .hd-top{padding:14px 15px;gap:10px}#hero-demo .hd-symbol{width:37px;height:40px;font-size:20px}#hero-demo .hd-top h2{font-size:19px}#hero-demo .hd-top p{font-size:11px}#hero-demo .hd-close{width:34px;height:34px;font-size:26px}#hero-demo .hd-layout{display:block;padding:12px 12px 0;overflow:auto}#hero-demo .hd-play-column{overflow:visible;min-height:auto;padding:10px}#hero-demo .hd-device{max-width:410px;height:560px}#hero-demo .hd-notes{overflow:visible;margin-top:20px;padding:0 2px 8px}#hero-demo .hd-foot{padding:9px 14px;font-size:10px}#hero-demo .hd-foot span:last-child{display:none}.hd-entry{gap:8px}.hd-entry button{height:41px;min-width:165px;font-size:14px}}
@media(prefers-reduced-motion:reduce){#hero-demo *,#hero-demo *:after{animation:none!important;transition:none!important}}
@media(max-height:780px) and (min-width:761px){#hero-demo .hd-device{max-width:380px}#hero-demo .hd-play-column{gap:10px}}