@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{--navy:#092b4c;--blue:#087fc1;--sky:#49c3ee;--pink:#f28bb5;--ink:#17324b;--muted:#71869a;--paper:#f3f8fc;--line:#dce8f1;--green:#20a875}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#e8f4fc,#f7f9fc 55%,#fff0f6);font-family:"Noto Sans JP",sans-serif;color:var(--ink);min-height:100vh}
.app{width:min(100%,720px);margin:auto;padding:16px 18px 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 16px}.brand{display:flex;align-items:center;gap:10px;color:var(--navy)}.brand-ball{font-size:30px}.brand strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:22px;letter-spacing:1.3px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px}.wallet{display:flex;gap:8px}.wallet span{background:white;border:1px solid var(--line);padding:7px 10px;border-radius:20px;font-size:12px;box-shadow:0 3px 10px #153c5910}
.hero{background:linear-gradient(110deg,#082c50,#075e94);border-radius:20px;padding:20px;color:white;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 25px #0a47702b;overflow:hidden;position:relative}.hero:after{content:"⚽";position:absolute;font-size:115px;opacity:.08;right:100px;top:-22px}.eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:2px;color:#8ee0ff;margin:0 0 5px}.hero h1{font-size:22px;margin:0 0 5px}.hero p:last-child{font-size:11px;color:#d0e6f5;margin:0}.opponent{z-index:1;text-align:right;min-width:105px}.opponent span{display:block;font-family:"Barlow Condensed";font-size:11px;color:#9ddff6}.opponent b{display:block;font-family:"Barlow Condensed";font-size:17px;letter-spacing:.5px}.opponent small{display:block;font-size:10px;color:#c6ddeb;margin-top:5px}
.match-panel,.board-section,.club-panel{background:#fff;border:1px solid #e1ebf2;border-radius:18px;padding:15px;margin-top:13px;box-shadow:0 5px 18px #123b5910}.scoreline{display:flex;justify-content:space-between;align-items:center}.team{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:900;color:#70869a;letter-spacing:.5px}.crest{width:31px;height:34px;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,90% 75%,50% 100%,10% 75%);background:#0b78b7;color:#fff;font-family:"Barlow Condensed";font-size:13px}.crest.rival{background:#e98aab}.score{display:flex;align-items:center;gap:10px;font-family:"Barlow Condensed";font-size:31px;color:var(--navy)}.score i{font-style:normal;color:#b2c2cf;font-size:22px}.match-status{display:flex;justify-content:space-between;gap:8px;margin:8px 0 12px;font-size:10px;color:#71869a}.match-status span:first-child{color:#3b617c}.meter-label{display:flex;justify-content:space-between;font-size:10px;font-weight:700;margin-bottom:5px}.meter{height:9px;background:#eaf1f6;border-radius:20px;overflow:hidden}.meter>div{height:100%;width:0;background:linear-gradient(90deg,#39bce8,#f18ab4);border-radius:20px;transition:width .25s}
.board-heading,.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.board-heading b,.section-title b{font-family:"Barlow Condensed";font-size:17px;letter-spacing:1.1px;color:var(--navy)}.board-heading small,.section-title small{display:block;font-size:9px;color:#8497a7;margin-top:2px}.combo{background:#fff0f6;color:#d35f91;border-radius:20px;padding:5px 9px;font-size:10px;font-weight:900}
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;background:linear-gradient(135deg,#d9edf7,#e8f3f9);padding:7px;border-radius:13px;touch-action:pan-y;user-select:none}.cell{aspect-ratio:1;border:0;border-radius:9px;display:grid;place-items:center;position:relative;cursor:pointer;box-shadow:inset 0 -3px 0 #0000000c,0 2px 4px #123b5910;transition:transform .12s,filter .12s;background:#fff;font-size:clamp(17px,4.8vw,27px);padding:0}.cell:active{transform:scale(.94)}.cell.selected{outline:3px solid #f28bb5;transform:scale(.94);z-index:1}.cell .number{position:absolute;right:4px;bottom:1px;font-size:8px;font-weight:900;color:#47647a;background:#ffffffc9;border-radius:4px;padding:0 3px}.cell.pass{background:#e2f5ff}.cell.dribble{background:#fff0f5}.cell.shot{background:#fff4db}.cell.speed{background:#f0eaff}.cell.defend{background:#e8f5ec}.cell.chance{background:#fff8c9}.cell.block-bonus:after{content:"";position:absolute;inset:1px;border:1px dashed #f0a34a;border-radius:8px;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 13px;margin-top:11px}.legend span{display:flex;align-items:center;gap:4px;font-size:9px;color:#71869a}.piece{width:19px;height:19px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-size:12px}.piece.pass{background:#e2f5ff}.piece.dribble{background:#fff0f5}.piece.shot{background:#fff4db}.piece.speed{background:#f0eaff}.piece.defend{background:#e8f5ec}.piece.chance{background:#fff8c9}
.action-row{display:flex;gap:9px;margin-top:12px}.skill-btn,.secondary-btn{border:0;border-radius:13px;padding:10px 13px;cursor:pointer}.skill-btn{flex:1;display:flex;align-items:center;gap:10px;text-align:left;background:#dff4fc;color:#0a5b87}.skill-btn:disabled{opacity:.55;cursor:not-allowed}.skill-btn>span:first-child{font-size:23px}.skill-btn b,.skill-btn small{display:block}.skill-btn b{font-size:11px}.skill-btn small{font-size:9px;color:#64899f;margin-top:2px}.secondary-btn{background:white;border:1px solid var(--line);color:#6c8294;font-size:11px;font-weight:700}
.club-panel{padding:14px 15px}.level{font-family:"Barlow Condensed";font-size:13px;background:#eef7fc;color:#1675a8;padding:4px 8px;border-radius:8px}.club-content{display:flex;gap:12px;align-items:center}.stadium{width:66px;height:62px;display:grid;place-items:center;font-size:38px;background:linear-gradient(145deg,#e0f5ff,#fff0f6);border-radius:13px}.club-info{flex:1}.club-info>b{font-size:12px}.club-info p{font-size:9px;color:#8395a4;margin:3px 0 7px}.club-info button{background:#0b76b2;color:#fff;border:0;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:700;cursor:pointer}.club-info button span{margin-left:8px;color:#ffe99a}footer{text-align:center;color:#9aabba;font:10px "Barlow Condensed";letter-spacing:1.5px;padding:18px 0 0}footer span{margin-left:8px;font:8px "Noto Sans JP"}
.modal{position:fixed;inset:0;background:#061e35b8;display:grid;place-items:center;padding:20px;z-index:10}.modal.hidden{display:none}.modal-card{width:min(100%,360px);background:white;border-radius:22px;padding:26px;text-align:center;box-shadow:0 20px 60px #00172c55}.modal-icon{font-size:48px}.modal-card h2{margin:4px 0 8px;color:var(--navy)}.modal-card>p:not(.eyebrow){font-size:12px;color:#70869a;line-height:1.7}.reward{font-weight:900;color:#b77a17;margin:14px 0}.primary-btn{width:100%;background:#087db8;color:white;border:0;border-radius:12px;padding:12px;font-weight:900;cursor:pointer}.text-btn{background:none;border:0;color:#8a9baa;margin-top:10px;font-size:11px;cursor:pointer}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#092b4c;color:white;padding:9px 16px;border-radius:30px;font-size:11px;transition:.2s;z-index:20;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:600px){.app{padding-top:24px}.hero{padding:24px 28px}.board{gap:7px;padding:10px}.cell{font-size:30px}.match-panel,.board-section,.club-panel{padding:18px}}