:root{--ink:#182637;--paper:#f6f3ed;--light:#fbfaf7;--muted:#6b7683;--blue:#2877b4;--red:#d75550;--gold:#ca9248;--line:#dedbd4;--shadow:0 22px 65px #0b111d38}*{box-sizing:border-box}html{min-height:100%;background:#111b28}body{margin:0;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP",sans-serif;background:radial-gradient(ellipse at 48% -16%,#364659 0%,#141e2a 58%,#111823 100%);color:var(--ink);-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}#app{min-height:100dvh;max-width:620px;margin:auto;background:var(--paper);position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}.hidden{display:none!important}.scene{width:100%;flex:1;min-height:0}.brandbar{height:59px;min-height:59px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;border-bottom:1px solid #e5e1d8;background:#fffdfaee;z-index:15}.brand{display:flex;gap:10px;align-items:center;font-size:13px;letter-spacing:2.4px;font-weight:950}.brand-icon{display:grid;place-items:center;height:30px;width:30px;background:var(--ink);color:white;border-radius:8px;font-family:Georgia,serif;letter-spacing:0;font-size:19px}.brand-sub{color:#9ba0a9;font-size:9px;font-weight:800;letter-spacing:1.1px}.top-controls{display:flex;gap:7px}.roundbtn{border:1px solid #dedbd6;color:#465364;background:#fff;width:32px;height:32px;border-radius:50%;font-size:17px;font-weight:850;display:grid;place-items:center}.roundbtn.muted{color:#b0b2b8}.site-footer{text-align:center;color:#85909b;letter-spacing:1px;font-size:9px;padding:9px 0 11px;background:var(--paper)}.home-scene{display:flex;flex-direction:column;padding:30px 24px 4px;justify-content:space-between;gap:10px}.hero{max-width:500px;margin:0 auto;width:100%}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:#627080;font-weight:900;letter-spacing:1.4px}.red-dot{background:var(--red);border-radius:50%;width:7px;height:7px}.hero-heading{font-weight:1000;letter-spacing:-4px;font-size:clamp(50px,12.5vw,78px);line-height:1.06;margin:21px 0 10px;display:flex;flex-direction:column;white-space:nowrap}.hero-accent{color:var(--blue)}.bang{font-size:.6em;color:var(--red)}.hero-kicker{font-size:13px;font-weight:800;letter-spacing:.7px;margin:0;color:#394555}.hero-art{margin:24px auto 19px;border-radius:19px;height:clamp(152px,26vh,225px);width:100%;position:relative;background:radial-gradient(circle at 48% 48%,#f6eee0 0,#e9dfc9 65%,#d9cdb6 100%);box-shadow:inset 0 0 0 1px #d7c9b1,inset 0 5px 25px #a58f7015;overflow:hidden}.hero-art:before,.hero-art:after{content:"";position:absolute;width:180%;height:100%;top:0;left:-20%;background:repeating-linear-gradient(0deg,transparent 0,transparent 19px,#a68d6312 20px,transparent 21px);pointer-events:none}.hero-art:after{transform:rotate(-18deg);opacity:.4}.art-kanji{position:absolute;font-weight:1000;font-size:61px;letter-spacing:-5px;color:#205c88;-webkit-text-stroke:2px #d6edfb;text-shadow:3px 6px 0 #12273f,5px 9px 9px #0003;z-index:1}.art-a{left:8%;top:20%;transform:rotate(-18deg)}.art-b{left:33%;top:46%;transform:rotate(25deg)}.art-arrow{position:absolute;left:50%;top:39%;font-size:42px;color:#bd8339;transform:rotate(-15deg);z-index:1}.art-merged{position:absolute;right:4%;top:22%;font-size:61px;font-weight:1000;letter-spacing:-7px;color:#d05a47;-webkit-text-stroke:1px #fff6e0;text-shadow:3px 5px #743b37,4px 7px 10px #0003;transform:rotate(-10deg);z-index:1}.art-fly{position:absolute;right:1%;top:7%;font-size:50px;color:#ac825c}.art-spark{font-size:35px;color:#fcb945;position:absolute;z-index:1}.art-spark1{left:54%;top:7%}.art-spark2{left:73%;bottom:9%}.art-caption{position:absolute;bottom:12px;left:15px;font-size:9px;font-weight:950;letter-spacing:1.8px;color:#857a70}.art-caption em{color:#d35456;font-style:normal}.hero-description{font-weight:700;color:#596777;text-align:center;font-size:12px;line-height:1.9;margin:0}.home-actions{display:flex;flex-direction:column;gap:11px;max-width:500px;width:100%;margin:0 auto}.action{border:0;border-radius:15px;text-align:left;display:flex;gap:15px;align-items:center;padding:15px 17px;min-height:69px;box-shadow:0 5px 0 #00000019}.action strong{font-size:19px;display:block;letter-spacing:.6px}.action small{font-size:10px;font-weight:700;display:block;margin-top:3px;opacity:.78}.action-main{background:#183349;color:white}.action-alt{background:#fff;border:1px solid #ddd6ca;color:#253e51}.btn-symbol{font-size:27px;width:35px;text-align:center}.btn-chevron{margin-left:auto;font-size:26px;font-weight:350}.home-foot{display:flex;justify-content:center;gap:16px;font-size:10px;font-weight:750;color:#8b8d90;margin:7px 0}.scene-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 13px}.back-link{background:transparent;border:0;color:#647388;padding:3px 0;font-size:13px;font-weight:800}.step-mark{font-size:10px;letter-spacing:1px;color:#a08f7d;font-weight:900}.setup-scene,.confirm-scene{padding:19px 23px 19px;overflow-y:auto}.scene-title{font-size:clamp(26px,7.2vw,37px);margin:0 0 9px;letter-spacing:-1px;font-weight:950}.scene-title span{color:#2877b4}.section-note{font-size:12px;color:#677384;font-weight:650;line-height:1.7;margin:0 0 19px}.form-card{background:#fff;border:1px solid #e2ded7;box-shadow:0 6px 20px #1a385808;border-radius:15px;margin-bottom:13px;padding:16px}.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}.card-top b{font-size:15px}.card-top small{font-size:10px;color:#88929c}.segmented{display:flex;background:#edf0f1;padding:4px;border-radius:11px;gap:3px}.segmented button{flex:1;border:0;border-radius:8px;background:transparent;min-width:0;padding:10px 4px;font-size:12px;font-weight:900;color:#7d8a94;transition:.16s}.segmented button.active{background:#fff;box-shadow:0 2px 7px #30435818;color:#1f4866}.team-tag,.mini-team{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:8px;font-size:13px;font-weight:950;color:white;flex-shrink:0;margin-right:6px}.team-tag.blue,.mini-team.blue{background:#327fbc}.team-tag.red,.mini-team.red{background:#cd615b}.small-label{font-size:10px;font-weight:850;color:#82909d;display:block;margin:0 0 6px}.name-input{height:39px;width:100%;background:#f8f9f9;border:1px solid #e5e5e2;border-radius:8px;padding:7px 11px;font-size:15px;font-weight:800;color:#334254;outline-color:#8bb5dc;margin-bottom:12px}.deck-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.deck-slot{border:1px solid #e4e1dd;background:#f9f8f5;border-radius:10px;padding:6px 5px 8px;display:flex;flex-direction:column;gap:5px;min-width:0}.deck-slot .slot-heading{font-weight:850;color:#93979d;font-size:9px;letter-spacing:.6px;text-align:center}.deck-slot select{width:100%;border:0;background:transparent;color:#314a60;font-weight:950;font-size:15px;text-align:center;outline:none;padding:2px 0;cursor:pointer}.deck-slot .slot-effect{font-size:9px;text-align:center;color:#868f99;white-space:nowrap}.team-red .deck-slot select{color:#a94745}.solid-btn{background:#182f43;color:white;border:0;border-radius:13px;min-height:53px;padding:12px 20px;font-size:17px;font-weight:900;letter-spacing:.5px;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:15px;box-shadow:0 5px 0 #081b2b22}.solid-btn span{font-size:24px}.solid-btn:active,.action:active{transform:translateY(2px);box-shadow:0 2px 0 #081b2b20}.versus-card{border:1px solid #dedcd6;border-radius:20px;background:white;box-shadow:0 5px 25px #23415c0a;padding:23px 16px}.versus-team{display:flex;gap:10px;align-items:flex-start}.versus-team .team-tag{width:44px;height:44px;font-size:18px}.versus-team strong{font-size:20px}.confirm-deck{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.confirm-word{display:inline-block;background:#f0f2f3;color:#305f84;font-weight:950;font-size:16px;border-radius:8px;padding:4px 11px;letter-spacing:2px}.versus-team:last-child .confirm-word{color:#b05752;background:#f9eeee}.vs-divider{border-top:1px dashed #d3d3d1;position:relative;margin:28px 3px}.vs-divider span{display:grid;place-items:center;position:absolute;top:-18px;left:calc(50% - 21px);border-radius:50%;background:#1a2937;color:white;font-size:13px;width:42px;height:36px;font-weight:950}.rule-summary{background:#ebe7e0;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px;margin-top:20px}.rule-summary b{font-size:10px;color:#a17e4b;letter-spacing:1px}.rule-summary span{font-weight:900;font-size:17px}.rule-summary small{color:#8d928d;font-size:11px}.game-scene{display:flex;flex-direction:column;min-height:0;padding:6px 9px 7px;gap:7px;overflow:hidden}.game-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5px;min-height:55px}.player-bar{display:flex;align-items:center;gap:1px;min-width:0;padding:7px 5px;background:#fff;border:1px solid #e4ddd4;border-radius:11px;transition:.22s}.player-bar.active{box-shadow:0 0 0 2px #63a8d4}.player-red.active{box-shadow:0 0 0 2px #d97a74}.player-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.player-info b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info small{color:#8b9399;font-size:9px;font-weight:800}.mini-team{margin:0 4px 0 0;width:22px;height:24px;font-size:10px;border-radius:6px}.pieces{display:none}.turn-banner{text-align:center;min-width:90px;max-width:112px}.turn-banner b{font-size:12px;white-space:nowrap}.turn-banner small{font-size:9px;display:block;white-space:nowrap;margin-top:2px;color:#84909b;font-weight:800}.board-wrap{position:relative;align-self:center;width:auto;max-width:100%;height:auto;aspect-ratio:540/760;flex:1 1 auto;min-height:0;min-width:0;max-height:calc(100dvh - 206px);border-radius:14px;background:#d8c6a8;box-shadow:0 6px 12px #332c201e,inset 0 0 0 5px #463e35;overflow:hidden}.board-wrap canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.board-corner{position:absolute;pointer-events:none;color:#3e3b384b;font-size:9px;font-weight:950;letter-spacing:2px}.top-left{left:18px;top:12px}.bottom-right{right:16px;bottom:11px}.game-bottom{display:flex;align-items:center;gap:8px;min-height:50px;background:#fff;padding:7px 9px;border:1px solid #e3ded7;border-radius:13px}.rotate-container{width:174px;flex-shrink:0}.control-heading{font-size:9px;color:#8c9399;font-weight:900;margin:0 0 3px;display:block}.rotate-switch{padding:2px}.rotate-switch button{font-size:11px;white-space:nowrap;padding:8px 2px}.current-status{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.current-status b{font-size:11px;line-height:1.3}.current-status small{font-size:9px;color:#89929b;line-height:1.3}.quit-btn{border:0;background:#f1f0ed;border-radius:8px;height:30px;width:28px;font-size:22px;color:#6b7984}.effect-banner{position:absolute;top:38%;left:5%;width:90%;text-align:center;pointer-events:none;font-weight:1000;font-size:clamp(20px,6vw,35px);letter-spacing:1px;color:#fff9d7;text-shadow:0 3px #964a26,1px 2px 0 #2e3340,0 7px 16px #0007;transform:rotate(-4deg) scale(1);animation:flashin .34s cubic-bezier(.15,1.5,.5,1)}@keyframes flashin{0%{opacity:0;transform:scale(.6) rotate(-8deg)}60%{opacity:1;transform:scale(1.17) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}.result-scene{padding:32px 20px 20px;overflow-y:auto;text-align:center}.result-particles{font-size:20px;letter-spacing:13px;color:#d8aa68;margin-bottom:20px}.result-eyebrow{font-size:11px;font-weight:950;letter-spacing:3px;color:#9a855e}.result-headline{font-size:clamp(43px,11vw,68px);letter-spacing:2px;margin:8px 0 0;color:#2777ae;text-shadow:1px 4px 0 #d4e0e7}.result-headline.red{color:#c65c51;text-shadow:1px 4px #f0d2d0}.winner-name{font-size:24px;font-weight:950;margin:0 0 28px;color:#344453}.result-scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.result-metric{background:#fff;border:1px solid #e4dfd6;border-radius:12px;padding:17px 1px}.result-metric b{display:block;font-size:29px;color:#293d50}.result-metric small{display:block;font-size:10px;font-weight:850;color:#8b949d}.result-decks{text-align:left;border:1px solid #e2ddd4;border-radius:12px;padding:13px;margin:16px 0 25px}.result-decks p{font-size:12px;font-weight:900;margin:5px 0}.ghost-btn{font-size:14px;font-weight:900;color:#6a7985;border:0;background:transparent;padding:14px 0;width:100%}.modal,.roulette{position:fixed;inset:0;background:#071424b8;display:flex;align-items:center;justify-content:center;padding:22px;z-index:35;backdrop-filter:blur(5px)}.modal-panel{width:min(420px,100%);max-height:90dvh;overflow-y:auto;border:1px solid #f8f8f9;background:#f8f6f1;border-radius:24px;box-shadow:0 25px 50px #0005;padding:28px 23px;position:relative}.modal-panel h2{font-size:29px;margin:10px 0 17px}.modal-content p{color:#4c5a68;font-size:13px;line-height:1.95;font-weight:650}.modal-content b{color:#1c3041}.modal-close{position:absolute;right:14px;top:11px;border:0;background:#e7e7e5;border-radius:50%;height:31px;width:31px;font-size:22px;color:#7f8a8c}.roulette{z-index:30}.roulette-core{width:min(370px,92vw);border-radius:25px;background:#fff9ef;box-shadow:0 0 0 8px #fae7c755,0 14px 60px #0008;padding:46px 30px;display:flex;align-items:center;flex-direction:column;gap:15px}.roulette-core>b{font-size:30px}.roulette-vs{display:flex;align-items:center;gap:30px}.roulette-vs span{display:grid;place-items:center;width:66px;height:66px;background:#357dba;color:#fff;border-radius:16px;font-size:31px;font-weight:950}.roulette-vs span:last-child{background:#ce5b54}.roulette-vs em{font-size:18px;font-style:normal;font-weight:1000;color:#8392a2}.toast{position:fixed;left:50%;bottom:17%;transform:translateX(-50%);z-index:100;background:#152d42e8;color:white;padding:10px 15px;border-radius:10px;font-size:12px;font-weight:850;box-shadow:0 10px 35px #0003;white-space:nowrap}@media(min-width:620px){#app{min-height:100dvh}.board-wrap{max-height:min(76vh,810px)}}@media(max-width:390px){.brandbar{height:51px;min-height:51px;padding:0 15px}.home-scene{padding:18px 18px 4px}.hero-heading{margin:11px 0 4px;font-size:clamp(47px,13vw,61px)}.hero-art{margin:13px auto 10px;max-height:190px}.hero-description{font-size:11px}.home-actions{gap:8px}.action{min-height:65px;padding:10px 12px}.action strong{font-size:17px}.home-foot{font-size:9px}.setup-scene,.confirm-scene{padding:16px}.form-card{padding:12px}.board-wrap{max-height:calc(100dvh - 183px)}.game-scene{gap:4px;padding:4px 5px}.game-hud{min-height:46px}.game-bottom{min-height:49px;padding:6px}.rotate-container{width:149px}.rotate-switch button{font-size:10px}.current-status b{font-size:10px}.current-status small{font-size:8px}.game-scene .site-footer{display:none}}@media(max-height:680px){.home-scene{padding-top:11px}.hero-art{height:130px;margin:12px auto}.hero-heading{margin:9px 0;font-size:48px}.hero-description{font-size:10px}.action{min-height:55px;padding:8px 12px}.board-wrap{max-height:calc(100dvh - 177px)}.game-bottom{min-height:45px}}@media(prefers-reduced-motion:reduce){.effect-banner{animation:none}*{scroll-behavior:auto!important}}

@media(max-height:680px){.art-a{top:15%;font-size:54px}.art-b{top:29%;font-size:51px}.art-merged{top:20%;font-size:53px}.art-caption{bottom:7px;font-size:8px}}

/* Ver.1.1: Accessible off-board targeting + awakened/impact affordances */
.game-scene{touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;}
.aim-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:93%;padding:8px 12px;border-radius:30px;background:#1a3245ed;color:#fff9dc;font-size:12px;font-weight:900;line-height:1.35;text-align:center;pointer-events:none;box-shadow:0 4px 18px #0004;z-index:2;}
.spin-meter{color:#2b85b3;margin-left:3px;font-weight:950;letter-spacing:0;font-size:10px;}
.control-heading{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;gap:4px;}
.result-scoreboard{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
.result-metric{padding:14px 0;}
.result-metric b{font-size:clamp(19px,5.4vw,29px);}
.result-metric small{font-size:9px;}
.awakening-metric{background:#fffaea;border-color:#ecdba5;}
.awakening-metric b{color:#ae7a2a;}
@media(max-width:390px){.aim-hint{font-size:10px;padding:6px 10px;}.spin-meter{font-size:9px}.result-metric small{font-size:8px}}

/* Ver.1.2 ability callouts / responsive pill */
.field-status{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;background:#1b73aeeb;border:1px solid #a0d8f6;color:white;border-radius:100px;padding:8px 12px;font-size:12px;line-height:1.2;font-weight:900;text-align:center;white-space:normal;max-width:92%;box-shadow:0 4px 12px #0015;}
.field-status.red{background:#b94a52e8;border-color:#ffccd0;}
.field-status.blue{background:#2378b1e8;border-color:#b2e6ff;}
@media(max-width:390px){.field-status{font-size:10px;padding:6px 9px;top:18px;}}
/* Six abilities with legible small-screen deck hints */
.deck-slot .slot-effect{white-space:normal;min-height:26px;line-height:1.35;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;}

/* Ver.1.3 / Dynamic arena, sudden death and 4-sector roulette */
.field-status.prep{background:#423d31e9;border-color:#e5bc6e;color:#fff3ca;}
.field-status.sudden{background:#a93e45ef;border-color:#f3acac;color:#fff;}
.sudden-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(20,9,21,.65);backdrop-filter:blur(3px);animation:suddenin .25s ease-out;}
.sudden-box{width:93%;padding:25px 12px 22px;text-align:center;border-radius:21px;background:linear-gradient(145deg,#5f1d27,#311a31);border:3px solid #ffd36e;color:#fff1d0;box-shadow:0 12px 40px #0009,0 0 30px #ff704688;display:flex;flex-direction:column;gap:11px;}
.sudden-box b{font-size:clamp(21px,6vw,32px);font-weight:1000;text-shadow:0 3px #0007;white-space:nowrap;letter-spacing:-1px;}
.sudden-box p{font-size:clamp(14px,3.6vw,20px);line-height:1.5;margin:0;font-weight:900;}
.sudden-box small{font-size:12px;color:#f6c59a;font-weight:800;}
@keyframes suddenin{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.wheel-holder{width:min(262px,65vw);aspect-ratio:1;position:relative;margin:10px auto 4px;filter:drop-shadow(0 9px 9px #0003);}
.roulette-wheel{position:absolute;inset:0;border-radius:50%;border:8px solid #f8e8c2;box-shadow:inset 0 0 0 4px #ffffff96,0 0 0 3px #907b63;
 background:conic-gradient(from -45deg,#358bce 0% 25%,#db6463 25% 50%,#358bce 50% 75%,#db6463 75% 100%);transform:rotate(0deg);will-change:transform;}
.roulette-wheel::after{content:none;}
.wheel-label{position:absolute;display:grid;place-items:center;width:36px;height:34px;color:white;font-size:27px;font-weight:1000;text-shadow:0 2px 2px #0005;z-index:1;}
.pos-n{top:12%;left:calc(50% - 18px)}.pos-e{right:12%;top:calc(50% - 17px)}.pos-s{bottom:12%;left:calc(50% - 18px)}.pos-w{left:12%;top:calc(50% - 17px)}
.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;background:#fff8e7;border:3px solid #9d7c51;width:67px;height:67px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:1000;color:#6f4b27;}
.wheel-pointer{z-index:4;position:absolute;left:50%;top:-15px;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:31px solid #f8cb52;filter:drop-shadow(0 2px 2px #4c3829);}
.wheel-note{font-size:12px;font-weight:800;color:#788592;}
@media(max-width:390px){.sudden-box b{font-size:clamp(18px,5.4vw,25px)}.roulette-core{padding:28px 18px}.wheel-holder{width:min(240px,66vw)}}
@media(prefers-reduced-motion:reduce){.sudden-overlay{animation:none}.roulette-wheel{transition:none!important}}

/* Ver.1.4: readable attack-vs-ability glossary and a single-source ability table. */
.ability-home-btn{width:100%;border:1px solid #d5c6ae;color:#38556a;background:#fff9ec;
  border-radius:11px;padding:10px 13px;font-size:12px;font-weight:950;text-align:left;
  display:flex;justify-content:space-between;align-items:center;min-height:40px}
.ability-home-btn span{font-size:21px;color:#a08b63}
.ability-guide-card{background:#fff9ec;border:1px solid #e4d6b9;border-radius:14px;padding:11px 12px 13px;margin-top:16px}
.ability-guide-card>summary{cursor:pointer;font-size:13px;font-weight:950;color:#33495a;list-style-position:inside;padding:3px 0 8px}
.ability-guide-card>summary span{font-size:10px;float:right;color:#967f60;padding-top:3px}
.ability-definition{padding:10px 11px;background:#e9f1f6;border-left:4px solid #3483b4;border-radius:9px;
  line-height:1.7;font-size:11.5px;color:#304659;font-weight:650;margin:7px 0 10px}
.ability-definition b{font-weight:1000;color:#184a6d}
.ability-scroll{width:100%;overflow-x:auto;border:1px solid #e6e3db;border-radius:10px;background:white;-webkit-overflow-scrolling:touch}
.ability-table{border-collapse:collapse;width:100%;font-size:11px;color:#354b5f;table-layout:fixed}
.ability-table th,.ability-table td{border-bottom:1px solid #eceae5;padding:9px 9px;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.ability-table thead th{background:#f3eee5;font-size:10px;letter-spacing:.3px;color:#665c4e}
.ability-table tbody th{width:88px;font-size:17px;letter-spacing:1px;white-space:nowrap;color:#1f4866}
.ability-table thead th:first-child{width:88px}
.ability-table tbody th small{display:block;color:#9b8a73;font-size:9px;font-weight:850;white-space:normal;letter-spacing:0}
.ability-table td b{font-size:11px;color:#294f69;font-weight:950}
.ability-table td span{display:block;margin-top:4px;line-height:1.55;font-size:10.5px;color:#667687}
.ability-table tr:last-child th,.ability-table tr:last-child td{border-bottom:0}
.ability-extra{font-size:10.5px;color:#60717f;line-height:1.75;margin:11px 2px 3px;font-weight:650}
.ability-extra b{color:#2c506b}
.modal-content .ability-definition{font-size:12px}
.modal-content .ability-table td b{font-size:11px}
.modal-content .ability-extra{font-size:11px}
@media(max-width:390px){.ability-table th,.ability-table td{padding:8px 6px}.ability-table tbody th,.ability-table thead th:first-child{width:72px}.ability-table tbody th{font-size:15px}.ability-table td b{font-size:10.5px}.ability-guide-card{padding:10px 9px}.ability-definition{font-size:10.5px}}

/* Ver.1.5 - easy-to-tap quit and correctly ordered confirm actions */
.quit-btn{min-width:50px;width:auto;height:35px;flex:0 0 auto;padding:0 10px;font-size:13px;line-height:1;font-weight:950;white-space:nowrap;background:#f9eae6;color:#a54239;border:1px solid #efc6b9;}
.modal-end-match{margin-top:9px;border-top:1px solid #e7dbd1;padding:15px 8px 7px;color:#aa5050;font-size:13px;line-height:1.5;}
#modalOK{margin-top:20px;}
.ability-table td b,.ability-table td span{word-break:normal;overflow-wrap:anywhere;}
@media(max-width:390px){.game-bottom{gap:5px}.rotate-container{width:145px}.quit-btn{min-width:48px;padding:0 8px}}

/* Larger, less cramped ability text. Scroll inside the modal to see every row. */
.ability-table th,.ability-table td{padding:12px 10px;}
.ability-table td b{font-size:12px;line-height:1.55;}
.ability-table td span{font-size:11.5px;line-height:1.75;}
.ability-definition{font-size:12px;line-height:1.85;}
@media(max-width:390px){.ability-table th,.ability-table td{padding:10px 7px}.ability-table td b{font-size:11.5px}.ability-table td span{font-size:11px}}

/* Online matchmaking and practice, Ver.1.7 */
.action-online{background:linear-gradient(115deg,#286a91,#174264);color:#fff;border:1px solid #235b81}
.action-online .btn-symbol{font-size:23px}
.match-scene,.online-deck-scene{padding:19px 22px;overflow-y:auto;max-width:100%}
.code-input{font-size:20px;font-weight:900;letter-spacing:1px}
.code-note{font-size:11px;line-height:1.6;color:#667787;margin:0 0 8px}
.online-error{color:#a32634;border:1px solid #e9c3c6;border-radius:10px;padding:10px;background:#fff0ee;font-size:12px;line-height:1.6;font-weight:750;margin-top:12px}
.waiting-card{padding:15px 13px;border:1px solid #d3d9de;border-radius:17px;background:#fcfbf8;box-shadow:0 7px 22px #0000000c}
.waiting-status{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.waiting-status b{display:block;font-size:17px;color:#1f4b69}.waiting-status small{display:block;font-size:11px;color:#6d7c89}
.online-pulse{width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#2cae7b;box-shadow:0 0 0 5px #2cae7b2e;animation:onlinePulse 1.4s infinite ease-in-out}
@keyframes onlinePulse{50%{opacity:.45;transform:scale(.78)}}
.practice-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid #e5e2dc;padding-top:12px;margin-bottom:8px}
.practice-head b{font-size:14px;color:#2d485c}.practice-head small{font-size:10px;color:#7a858d}
.practice-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:9px 0 10px;min-width:0}
.practice-select{display:flex;flex-direction:column;gap:5px;min-width:0;border:1px solid #d5dfe5;background:#f2f8fc;padding:8px;border-radius:11px}
.practice-select.red{background:#fff2f0;border-color:#edcfc9}
.practice-select span{font-size:11px;font-weight:950;color:#296f9c}.practice-select.red span{color:#b64b49}
.practice-select select{width:100%;min-width:0;background:white;border:1px solid #c8d4da;color:#1d4d6c;border-radius:8px;font-weight:950;font-size:16px;padding:9px 6px;text-align:center}
.practice-select.red select{color:#ae4548;border-color:#e6c6c4}
.practice-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 9px}
.practice-turn{font-size:11px;color:#fff;background:#2874a8;padding:6px 10px;border-radius:50px;font-weight:900}
.practice-turn.cpu{background:#c4514b}
.practice-blocked{font-size:10px;color:#7c6555;font-weight:850}
.practice-tools button{margin-left:auto;background:#fff;border:1px solid #d2dbe0;color:#2a536d;border-radius:8px;font-weight:900;font-size:11px;padding:7px 9px}
#practiceBoard{display:block;width:100%;aspect-ratio:540/760;height:auto;background:#e6d8c1;border:5px solid #776855;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 8px 19px #4d3e2d28;}
.practice-tip{font-size:11px;font-weight:700;color:#607587;line-height:1.6;margin:9px 0 0}
.online-versus-line{border:1px solid #b1cddd;border-radius:13px;background:#eaf4fb;padding:13px 15px;font-weight:900;color:#265678;margin-bottom:13px}
.online-status{padding:12px 14px;border-radius:12px;background:#e8f0ed;color:#326757;font-size:13px;line-height:1.6;font-weight:800}
.online-status.waiting{background:#f7f0db;color:#846126}
.online-game-status{padding:4px 8px;border-radius:8px;background:#e8f1f8;color:#246184;font-size:10px;text-align:center;font-weight:900;line-height:1.4}
.online-game-status.pending{background:#fff1db;color:#8c652b}
.online-game-status.error{background:#fff0f0;color:#b34141}
@media(max-width:390px){.match-scene,.online-deck-scene{padding:15px 15px}.waiting-card{padding:10px}.online-versus-line{font-size:12px}.home-actions{gap:6px}.home-actions .action{min-height:61px}.home-actions .action strong{font-size:15px}.home-art{max-height:150px}}

.online-matched{display:inline-flex;align-items:center;background:#e6f4e9;border:1px solid #b3d8c1;color:#25734f;border-radius:50px;padding:7px 14px;font-size:12px;font-weight:950;margin-bottom:12px;letter-spacing:.4px}

/* Ver.2.1 - unobstructed arena, brief phase notices and long-press descriptions */
#turnBanner,#fieldStatus,#effectBanner,#aimHint,#selectedLabel{display:none!important}
.game-hud{grid-template-columns:1fr 1fr;gap:9px}
.game-hud .player-bar{min-width:0}
.current-status{justify-content:center}
.current-status small{font-size:10px;color:#647586}
.phase-announcement{position:absolute;z-index:15;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
 border:2px solid #e3c991;border-radius:15px;padding:16px 25px;max-width:90%;white-space:nowrap;
 color:#fff8e9;background:rgba(23,40,55,.9);box-shadow:0 9px 32px #19243177;text-align:center;
 font-size:clamp(22px,5.4vw,32px);font-weight:1000;letter-spacing:.07em;text-shadow:0 2px 2px #10151ba0;}
.phase-announcement.blue{border-color:#85d1fc;background:rgba(18,69,105,.9)}
.phase-announcement.red{border-color:#ffadab;background:rgba(126,38,45,.9)}
.phase-announcement.prep{border-color:#ffe5a1;background:rgba(66,57,39,.92)}
.piece-info{position:absolute;z-index:18;left:5%;right:5%;bottom:14px;pointer-events:auto;
 background:#182f40f5;color:#f5fbff;border:1.5px solid #a7cede;border-radius:16px;
 box-shadow:0 5px 22px #081c2a88;padding:15px 40px 14px 16px;font-size:13px;line-height:1.55;}
.piece-info strong{display:block;font-size:18px;margin-bottom:5px;font-weight:950;color:#fff4d7}
.piece-info p{margin:0;white-space:pre-line;font-weight:650}
.piece-info button{position:absolute;right:9px;top:7px;border:none;border-radius:50%;height:30px;width:30px;
 background:#f2f7fb;color:#23475c;font-size:21px;font-weight:bold;cursor:pointer}
.piece-info.hidden,.phase-announcement.hidden{display:none!important}

/* Ver.2.2: categorized kanji picks and single-piece survivor mode */
.action-streak{background:linear-gradient(110deg,#665190,#453b71);color:#fff;border:1px solid #ab9cce;box-shadow:0 7px 18px #33264e28}
.action-streak small{color:#ddd1f2}
.word-type{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;border-radius:100px;padding:4px 9px;font-size:10px;font-weight:900;letter-spacing:.02em;border:1px solid transparent}
.type-attack{background:#fbe9e5;color:#ad4939;border-color:#eec6bf}
.type-defense{background:#e5effa;color:#34669e;border-color:#bdd3eb}
.type-balance{background:#e6f3e9;color:#37805b;border-color:#c3dfcb}
.type-special{background:#f0e8fc;color:#7950a2;border-color:#dac5ef}
.deck-slot .word-type{margin:2px 0 6px;align-self:flex-start}
.streak-scene{padding:22px 18px 35px;overflow-y:auto}
.streak-scene .form-card{padding:16px 14px;margin-top:19px}
.streak-word-group{border-bottom:1px solid #e8e6e0;padding:14px 0 13px}
.streak-word-group:last-child{border-bottom:0;padding-bottom:0}
.streak-group-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#77838c;font-size:11px;font-weight:750;margin-bottom:10px}
.streak-word-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.streak-word-button{font-size:20px;font-weight:1000;letter-spacing:1px;color:#344e60;border:2px solid #dbe0e3;border-radius:11px;background:white;min-height:51px;cursor:pointer}
.streak-word-button.chosen{border-color:#377eae;color:#195d91;background:#eaf6ff;box-shadow:0 0 0 2px #74b8df35}
.streak-word-info{font-size:12px;font-weight:800;color:#485d68;background:#f1f6f8;border:1px solid #dae7eb;border-radius:10px;padding:12px;min-height:38px}
.streak-rule-note{font-size:12px;font-weight:800;text-align:center;margin:15px auto;color:#7d6989}
.streak-counter{position:absolute;z-index:17;top:10px;left:50%;transform:translateX(-50%);pointer-events:none;min-width:95px;text-align:center;border-radius:100px;background:#17394fd8;color:#fff;padding:6px 14px;font-size:15px;font-weight:1000;white-space:nowrap;box-shadow:0 3px 15px #0003}
.streak-counter.streak-announce{top:42%;font-size:clamp(32px,9vw,52px);padding:19px 26px;white-space:nowrap;background:#27294be8;color:#fff0ba;text-shadow:0 2px 5px #0006;border-radius:20px;animation:streakPop .28s cubic-bezier(.18,1.3,.3,1)}
@keyframes streakPop{from{opacity:0;transform:translateX(-50%) scale(.5)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.streak-share{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;text-decoration:none;background:#17202a;color:#fff}
.streak-share.hidden{display:none}
@media(max-width:390px){.streak-word-button{font-size:18px;min-height:46px}.streak-scene{padding:14px 12px 27px}.streak-word-options{gap:5px}}

/* Ver.2.3: corner-KO streak arena leaves its holes clean of decorative captions. */
.game-scene.corner-ko .board-corner{display:none}

/* Ver.2.4: streak-specific clean result, only the selected word and win count. */
.result-scene.streak-result .result-eyebrow,
.result-scene.streak-result .result-particles,
.result-scene.streak-result .winner-name,
.result-scene.streak-result .result-scoreboard,
.result-scene.streak-result .result-decks{display:none!important}
.result-scene.streak-result{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:35px 23px;gap:16px}
.result-scene.streak-result .result-headline{font-size:clamp(27px,8vw,42px);line-height:1.6;letter-spacing:.02em;margin:0 0 15px;white-space:pre-line;overflow-wrap:anywhere}
.result-scene.streak-result .solid-btn{margin-top:5px}

/* Four natural empty corner gaps without red fill, captions or decorative colors. */
.game-scene.corner-ko .board-wrap{background:#e7d6bb}

/* Ver.2.6: optional Firestore-powered streak rankings on result only */
.streak-ranking{width:100%;max-width:520px;margin:8px auto 4px;background:#fffefa;border:1px solid #e5dfd3;border-radius:17px;padding:17px 14px 14px;text-align:left;box-shadow:0 7px 20px #313c4612}
.streak-ranking-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.streak-ranking-top h2{font-size:19px;letter-spacing:.02em;margin:2px 0;color:#2c3c4a}
.ranking-eyebrow{font-size:9px;letter-spacing:.15em;color:#697d8b;font-weight:950}
.ranking-note{font-size:11px;color:#70808c;margin:9px 0 7px;line-height:1.6}
.ranking-reload{border:1px solid #d9dedb;background:#f5f8f8;border-radius:10px;color:#415666;padding:8px;font-size:12px;font-weight:850;white-space:nowrap}
.ranking-status{font-size:12px;color:#607483;margin:9px 0;line-height:1.6}
.ranking-list{margin:10px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.ranking-list>li{display:grid;grid-template-columns:32px minmax(0,1fr) 62px 67px;gap:7px;align-items:center;border-radius:9px;background:#f4f7f9;padding:9px 8px;font-size:12px;color:#273e51}
.ranking-list .ranking-position{font-weight:950;color:#9c7b41;text-align:center}.ranking-list .ranking-name{font-weight:900;overflow-wrap:anywhere}.ranking-list .ranking-word{font-weight:900;text-align:center;color:#426a87}.ranking-list .ranking-score{font-weight:1000;color:#276caa;text-align:right}
.ranking-register{width:100%;margin:9px 0 0;font-size:14px}
.ranking-form{margin-top:14px;padding:13px;border-radius:11px;background:#eff5f7;display:flex;flex-direction:column;gap:9px}.ranking-form label{font-weight:900;font-size:12px;color:#3d5362}.ranking-form input{width:100%;min-height:44px;border:1px solid #b7cdd8;border-radius:9px;padding:10px;font-size:16px;background:#fff;color:#182c3c}.ranking-form p{font-size:11px;line-height:1.7;color:#6e7680;margin:0}.ranking-form .solid-btn{margin:0}
.result-scene.streak-result{justify-content:flex-start;gap:10px;padding-top:23px}.result-scene.streak-result .result-headline{margin-bottom:7px}

/* Ver.2.7 -- device-independent 540x760 board; viewport chrome and safe-areas. */
#app.game-active{height:100dvh;min-height:0;overflow:hidden;}
#app.game-active .game-scene{min-height:0;min-width:0;flex:1 1 auto;}
#app.game-active .board-wrap{max-height:none;max-width:100%;min-height:0;min-width:0;flex-shrink:0;}
#app.game-active .game-hud,#app.game-active .game-bottom{flex:0 0 auto;}
#app.game-active .site-footer{flex:0 0 auto;padding-bottom:max(8px,env(safe-area-inset-bottom,0px));}
#app.game-active .board-wrap canvas{object-fit:fill;}
#practiceBoard{max-width:100%;}
@media (orientation:landscape) and (max-height:460px){
 #app.game-active .brandbar{height:38px;min-height:38px;}
 #app.game-active .game-hud{min-height:33px;}
 #app.game-active .game-bottom{min-height:35px;padding:3px 5px;}
 #app.game-active .site-footer{padding:2px 0 max(3px,env(safe-area-inset-bottom,0px));}
 #app.game-active .game-scene{gap:2px;padding:2px 4px;}
}
/* On standalone iOS/PWA, keep the header clear of the display cutout. */
#app{padding-top:env(safe-area-inset-top,0px);}

/* Ver.2.7.1: suppress accidental double-tap zoom without disabling accessibility zoom globally.
   manipulation preserves pinch zoom on non-game screens and stops double-tap zoom. */
html, body, #app { touch-action: manipulation; }
/* During a match the full aiming surface is owned by the game, including its overlays. */
#gameScene, #gameScene .board-wrap, #gameScene #board, #practiceBoard {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Ver.2.7.2: all pieces are pixels painted on the canvas. Prevent WebKit
   smart-zoom on the canvas and its non-interactive overlay descendants.
   Normal site text remains pinch-zoomable for accessibility. */
#gameScene #boardWrap, #gameScene #boardWrap *, #practiceBoard {
  touch-action: none !important;
  -ms-touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}