/* ITパスポート テクノロジ学習BINGO V0.1 */
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;background:#eef3f7;color:#1c2733}body{display:flex;justify-content:center}.page{width:min(100%,1020px);padding:10px}.toolbar{height:44px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #cbd5df;border-radius:11px 11px 0 0;padding:5px 8px;box-shadow:0 3px 14px #3341551a}.toolbar-title{font-size:14px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.version-badge,.modal-version{font-size:11px;font-weight:800;background:#e9f7ef;color:#176b3a;border:1px solid #9bd4b1;border-radius:999px;padding:4px 8px}.flag-button,.tool-button{border:1px solid #aebbc7;background:#fff;border-radius:8px;cursor:pointer;height:32px}.flag-button{width:42px;font-size:27px;line-height:24px;color:#21a548;text-shadow:0 1px 0 #11662b}.tool-button{padding:0 12px;color:#243445;font-weight:700}.flag-button:hover,.tool-button:hover{background:#f2f7fa}.flag-button:active,.tool-button:active{transform:translateY(1px)}.stage-shell{position:relative;width:100%;aspect-ratio:4/3;background:#fff;overflow:hidden;border:1px solid #cbd5df;border-top:0;box-shadow:0 8px 25px #33415528}.stage{position:absolute;width:480px;height:360px;left:0;top:0;transform-origin:0 0;background:#fff;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}.sprite-layer,.cell-layer,.overlay-layer,.bubble-layer{position:absolute;inset:0}.cell-layer,.bubble-layer{pointer-events:none}.cell-layer .cell{pointer-events:auto}.bubble{pointer-events:none}#goalButton{z-index:230}.sprite,.cell,.overlay-sprite{position:absolute;display:block;max-width:none;max-height:none;-webkit-user-drag:none}.clickable{cursor:pointer}.clickable:hover{filter:brightness(1.035)}.clickable:active{filter:brightness(.94)}.cell{z-index:80}.cell.opened{opacity:.1}.sprite.hidden,.cell.hidden,.overlay-sprite.hidden{display:none!important}.members{z-index:120}.machine{z-index:170}.draw-ball{z-index:270;transition:left 1s linear,top 1s linear,width .2s,height .2s;pointer-events:none}.draw-ball.spin{animation:spin-number 1.6s linear}@keyframes spin-number{to{transform:rotate(360deg)}}.overlay-layer{pointer-events:none}.overlay-layer .overlay-sprite{pointer-events:auto}.bubble{position:absolute;z-index:500;max-width:285px;min-width:76px;padding:8px 11px;background:#fff;border:2px solid #8c8c8c;border-radius:15px;color:#111;font-size:13px;line-height:1.45;white-space:pre-wrap;box-shadow:0 2px 5px #0002;overflow-wrap:anywhere}.bubble::after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-right:2px solid #8c8c8c;border-bottom:2px solid #8c8c8c;transform:rotate(45deg);bottom:-8px;right:24px}.bubble.machine-bubble{left:169px;top:74px;width:276px}.bubble.cat-bubble{left:45px;top:109px;width:205px}.bubble.cell-bubble{left:88px;top:118px;width:258px}.bubble.bingo-bubble{left:102px;top:243px;width:270px}.bubble.janken-bubble{left:36px;top:182px;width:210px}.bubble.goal-bubble{left:95px;top:253px;width:285px}.janken-hand{z-index:390}.bingo-overlay{z-index:420}.close-button{z-index:450}.hidden{display:none!important}.stage-banner{position:absolute;z-index:60;left:151px;top:4px;width:275px;height:22px;text-align:center;line-height:20px;color:#0a4a70;pointer-events:none;white-space:nowrap}.stage-banner strong{display:inline;font-size:14px;letter-spacing:.04em}.stage-banner span{font-size:11px;font-weight:800;color:#1b7b5a;margin-left:8px}.stage-banner small{display:inline;font-size:9px;color:#425466;margin-left:7px}.status-bar{min-width:225px;min-height:28px;border-radius:8px;background:#f8fafc;border:1px solid #c7d2dc;padding:5px 9px;font-size:11px;font-weight:700;color:#334155;display:flex;justify-content:space-between;gap:9px;white-space:nowrap}.modal{position:fixed;z-index:2000;inset:0;background:rgba(15,23,42,.66);display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 80px #0007;border:1px solid #d7e0e8}.modal-head{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 12px;border-bottom:1px solid #e2e8f0}.modal-head h2{margin:7px 0 0;font-size:22px;line-height:1.4}.category-chip{display:inline-block;font-size:12px;font-weight:800;background:#e8f2ff;color:#185b91;border-radius:999px;padding:4px 10px}.learning-card #learningBody,.info-card #infoBody{padding:18px 20px 22px}.question-text{font-size:21px;line-height:1.65;font-weight:800;margin:0 0 16px}.choice-list{display:grid;gap:10px}.choice-button{width:100%;text-align:left;border:2px solid #cbd5e1;background:#fff;border-radius:12px;padding:13px 15px;font-size:17px;line-height:1.45;cursor:pointer}.choice-button:hover{background:#f6faff;border-color:#74a8d4}.choice-button:disabled{cursor:default}.choice-button.correct{border-color:#35a565;background:#ebfaef}.choice-button.wrong{border-color:#d96767;background:#fff0f0}.result-banner{border-radius:12px;padding:12px 14px;font-size:19px;font-weight:900;margin-bottom:14px}.result-banner.ok{background:#e9f9ee;color:#176b3a}.result-banner.ng{background:#fff1f1;color:#9b2727}.learn-section{margin-top:15px;border:1px solid #dbe5ed;border-radius:12px;padding:13px 15px;background:#fbfdff}.learn-section h3{margin:0 0 7px;font-size:15px;color:#174f73}.learn-section p{margin:0;line-height:1.7}.choice-review{margin:0;padding-left:1.3em}.choice-review li{margin:.45em 0;line-height:1.6}.term-list{display:flex;flex-wrap:wrap;gap:7px}.term{background:#edf7f2;color:#176b3a;border:1px solid #b7ddc8;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}.primary-button,.secondary-button{border:0;border-radius:10px;padding:11px 17px;font-size:15px;font-weight:800;cursor:pointer}.primary-button{background:#1677b8;color:#fff}.primary-button:hover{background:#0c639d}.secondary-button{background:#edf2f7;color:#334155}.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.follow-feedback{margin-top:12px;padding:10px 12px;border-radius:10px;font-weight:700}.follow-feedback.ok{background:#e9f9ee;color:#176b3a}.follow-feedback.ng{background:#fff1f1;color:#9b2727}.close-x{border:0;background:#eef2f6;border-radius:50%;width:34px;height:34px;font-size:23px;cursor:pointer}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.summary-card{border:1px solid #dbe5ed;border-radius:12px;padding:12px;text-align:center;background:#fbfdff}.summary-card strong{display:block;font-size:23px;color:#145f8d}.summary-card span{font-size:12px;color:#526373}.category-table{width:100%;border-collapse:collapse}.category-table th,.category-table td{border-bottom:1px solid #e2e8f0;padding:8px;text-align:left}.category-table td:last-child,.category-table th:last-child{text-align:right}.challenge-panel{position:absolute;z-index:380;left:55px;top:42px;width:370px;background:#fff;border:4px solid #2c78a8;border-radius:20px;padding:16px 18px;text-align:center;box-shadow:0 8px 22px #0005;pointer-events:auto}.challenge-panel h2{margin:0 0 7px;color:#164c6f;font-size:22px}.challenge-panel p{font-size:13px;line-height:1.6;margin:6px 0}.challenge-panel .challenge-note{font-size:11px;color:#526373}.game-end-button{z-index:230}.help-html{font-size:14px;line-height:1.8}.help-html ol{padding-left:1.4em}.help-html li{margin:.45em 0}@media(max-width:620px){.page{padding:0}.toolbar{border-radius:0;border-left:0;border-right:0}.stage-shell{border-left:0;border-right:0}.toolbar-title{font-size:12px}.modal{padding:8px}.modal-head{padding:14px}.learning-card #learningBody,.info-card #infoBody{padding:14px}.question-text{font-size:18px}.choice-button{font-size:15px}.summary-grid{grid-template-columns:1fr 1fr}.status-bar{display:none}}