.basic-rules-overlay{position:fixed;inset:var(--shared-header-height) 0 0;z-index:9500;background:#080f19;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));box-sizing:border-box;color:#f3eddc}
.basic-rules-frame{width:min(1150px,100%);height:100%;max-height:740px;display:grid;grid-template-rows:44px minmax(0,1fr) 52px;gap:12px;min-width:0;min-height:0}
.basic-rules-frame>header,.basic-rules-frame>footer{display:flex;align-items:center;gap:12px;min-width:0}.basic-rules-frame>header{justify-content:space-between;border-bottom:1px solid #66758b}.basic-rules-frame>header>span{color:#ecd08e;font-size:16px;font-weight:700}.basic-rules-frame>footer{border-top:1px solid #66758b;padding-top:8px}.basic-rules-frame>footer>span{margin-right:auto;white-space:nowrap;color:#c2ccda}
.basic-rules-frame button{min-height:44px;padding:8px 16px;border:1px solid #8c7e5b;border-radius:8px;background:#1d2c3c;color:#f5f0de;font-size:14px;line-height:1.2;cursor:pointer}.basic-rules-frame button:disabled{opacity:.4;cursor:default}.basic-rules-frame [data-rules-next]{background:#deb966;color:#171508;min-width:90px;font-weight:700}.basic-rules-frame button:focus-visible{outline:2px solid #fff1b8;outline-offset:2px}
.basic-rules-body{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:24px;align-items:center}.basic-rules-diagram{min-width:0;min-height:0;height:100%;max-height:430px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:12px;box-sizing:border-box;background:radial-gradient(ellipse at center,#243e55,#0f1a29);border:1px solid #42556e;border-radius:12px}.basic-rules-diagram>small{color:#acbbce;font-size:12px;align-self:flex-start}.basic-rules-copy{min-width:0;max-height:100%;overflow:auto}.basic-rules-copy h1{font-size:28px;line-height:1.35;margin:0 0 22px;color:#f9dc93}.basic-rules-copy p{font-size:17px;line-height:1.75;margin:0 0 18px}.basic-rules-copy p:last-child{margin-bottom:0}
.rule-card{margin:0;min-width:0;max-width:205px;flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.rule-card img{display:block;max-height:220px;max-width:100%;object-fit:contain;border-radius:8px}.rule-card figcaption{display:grid;gap:4px;text-align:center;margin-top:8px;font-size:14px}.rule-card figcaption>span{font-size:12px;color:#d1dbe7}.rule-numbers{display:flex;justify-content:center;gap:8px;margin:8px 0}.rule-numbers b{display:grid;place-items:center;width:32px;height:36px;border:2px solid #eac983;border-radius:6px;background:#eee1b9;color:#2b2516;font-size:23px}.rule-pair{display:flex;gap:14px;align-items:center;justify-content:center;min-height:0;width:100%}.rule-effect{font-size:14px;line-height:1.6;white-space:normal;max-width:270px}.rule-life,.rule-energy,.rule-decks,.rule-roll{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.rule-life strong,.rule-energy strong{font-size:36px;color:#f5d78e}.rule-score{font-size:16px;line-height:1.6;text-align:center;color:#f2d997}.rule-score small{font-size:13px}.rule-energy>div{display:grid;gap:6px;font-size:14px}.rule-roll>strong{font-size:54px;line-height:1}.rule-transfer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.rule-transfer>.rule-card{max-width:95px}.rule-transfer>b{font-size:14px}.rule-transfer .rule-energy strong{font-size:30px}.rule-move{font-size:24px;color:#f1d692;white-space:nowrap}.rule-decks b{padding:16px;border:1px solid #8f805c;border-radius:8px;font-size:16px}
.beginner-rule-hint{border:1px solid #9b8654;border-radius:5px;padding:3px 7px;background:#222e3a;color:#f4d48b;font-size:12px;cursor:pointer}.beginner-rule-target{outline:2px solid #e3c67c;outline-offset:-2px}
@media(max-height:600px) and (orientation:landscape){.basic-rules-overlay{padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.basic-rules-frame{gap:6px;grid-template-rows:44px minmax(0,1fr) 50px}.basic-rules-body{gap:18px}.basic-rules-diagram{padding:8px;gap:4px}.basic-rules-copy h1{font-size:21px;margin-bottom:12px}.basic-rules-copy p{font-size:14px;line-height:1.55;margin-bottom:10px}.rule-card img{max-height:80px}.rule-card figcaption{margin-top:4px;font-size:13px}.rule-card figcaption>span{font-size:11px}.rule-numbers{margin:4px 0}.rule-numbers b{width:26px;height:28px;font-size:19px}.rule-score{font-size:13px}.rule-effect{font-size:12px;line-height:1.5}.rule-life,.rule-energy,.rule-decks,.rule-roll{gap:10px}.rule-life strong,.rule-energy strong{font-size:29px}.rule-decks b{padding:10px;font-size:14px}.rule-transfer{gap:6px}.rule-transfer>.rule-card{max-width:65px}.rule-roll>strong{font-size:40px}.basic-rules-frame>footer{gap:8px}.basic-rules-frame button{padding:6px 12px}}
@media(orientation:portrait){.basic-rules-body{grid-template-columns:1fr;grid-template-rows:minmax(130px,.8fr) minmax(0,1fr);gap:12px}.rule-card img{max-height:110px}.basic-rules-copy h1{font-size:23px;margin-bottom:12px}.basic-rules-copy p{font-size:15px;line-height:1.55;margin-bottom:12px}.basic-rules-frame>footer{gap:5px}.basic-rules-frame button{padding:6px 8px;font-size:12px}.rule-pair .rule-card{max-width:140px}}

.rule-pair>.rule-effect{flex:1;min-width:0}.rule-pair:has(.rule-effect)>.rule-card{flex:0 0 150px}
@media(max-height:600px) and (orientation:landscape){.rule-pair:has(.rule-effect)>.rule-card{flex-basis:100px}}
@media(max-height:380px) and (orientation:landscape){.rule-card img{max-height:60px}.rule-pair{gap:10px}}

.basic-rules-frame>header>span>small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:#b6c1d0}
.beginner-help-actions{display:flex;justify-content:center;align-items:center;gap:8px;min-width:0}
.beginner-help-actions .beginner-rule-hint{min-height:28px;white-space:nowrap;font-size:12px;padding:3px 8px;line-height:1.2}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){body.battle-screen-active .face-table:has(.beginner-help-actions){grid-template-rows:0 minmax(0,1fr) 30px minmax(0,1fr) 0!important}.dice-divider:has(.beginner-help-actions){grid-template-columns:40px minmax(0,1fr) 40px;padding:0 4px;gap:4px}}
@media(max-width:1180px) and (max-height:600px) and (orientation:landscape){
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint){height:calc(100dvh - var(--shared-header-height) - 20px);max-height:calc(100dvh - var(--shared-header-height) - 20px);display:grid;grid-template-rows:18px minmax(0,1fr) 48px 44px;gap:6px;padding:10px;overflow:hidden;box-sizing:border-box}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .assign-top{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;min-height:0;margin:0;overflow:auto}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .assign-art{height:100%;min-height:0;max-height:148px}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) h2{font-size:19px;margin:0 0 5px}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) p{font-size:12px;margin:5px 0;line-height:1.4}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .choice-grid{margin:0;min-height:0;gap:5px}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .choice-num{min-height:44px;height:48px;padding:3px}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .modal-actions{margin:0;min-height:0;display:flex;gap:8px}
 body.battle-screen-active .assign-modal:has(.beginner-rule-hint) .modal-actions button{flex:1;min-height:44px;padding:5px}
}