:root{--primary-blue:#5d8aff;--text-white:#fff;--app-border-color:#4a3b2a;--primary-color:#2c3e50;--accent-color:#d35400;--patreon-color:#ff424d;--amazon-color:#f90;--youtube-color:red;--x-color:#000;--header-bg:#eceff1;--header-text:#263238}*{box-sizing:border-box}body,html{background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;width:100%;height:100%;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}#app-viewport{box-sizing:content-box;background-color:#000;background-image:url(/assets/background_yellow-kNPDTbYN.jpg);flex:1;justify-content:center;align-items:center;width:100%;height:auto;display:flex;position:relative;overflow:hidden}.app-container{border:4px solid var(--app-border-color);background-image:url(/assets/background_dojo_top-BH-EwTrl.png);background-repeat:no-repeat;background-size:100% 100%;border-radius:4px;width:960px;height:540px;position:relative;overflow:hidden;box-shadow:0 20px 50px #00000080}#mobile-warning{z-index:9999;color:#333;background-color:#fff;justify-content:center;align-items:center;width:100%;height:100%;font-size:20px;display:none;position:fixed;top:0;left:0}.menu-btn,.action-btn{background-color:var(--primary-blue);color:#fff;cursor:pointer;border:3px solid #fc6;border-radius:6px;justify-content:center;align-items:center;font-weight:700;transition:filter .2s,transform .1s;display:flex;box-shadow:3px 3px #0000004d}.menu-btn{width:240px;height:54px;font-size:24px}.action-btn{width:120px;height:46px;font-size:18px}.menu-btn:hover,.action-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.menu-btn:active,.action-btn:active{transform:translateY(1px);box-shadow:1px 1px #0000004d}.patreon-image-btn{cursor:pointer;background:0 0;border:none;width:240px}.patreon-image-btn img{border-radius:4px;width:100%}.patreon-image-btn:hover{transform:scale(1.02)}.link-btn-text{color:#fff;cursor:pointer;text-shadow:1px 1px 2px #000;background:0 0;border:none;margin-top:8px;font-size:18px;font-weight:700;text-decoration:underline;transition:transform .2s;display:inline-block}.link-btn-text:hover{transform:translateY(-1px)}.slide-btn{width:140px!important;height:44px!important;font-size:18px!important}.app-screen-container{color:#333;box-sizing:border-box;z-index:10;background-color:#d9d9d9;background-image:url(/assets/background_gray-DEB5-doF.jpg);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;flex-direction:column;width:100%;height:100%;padding:10px 20px;display:flex;position:absolute;top:0;left:0}#modal-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.modal-hidden{display:none!important}.modal-content{text-align:center;color:#000;background:#fff url(/assets/background_gray-DEB5-doF.jpg);border-radius:8px;flex-direction:column;width:50%;max-height:75%;padding:30px;display:flex;box-shadow:0 10px 25px #00000080}#modal-title{border-bottom:2px solid #ccc;margin-top:0;margin-bottom:15px;padding-bottom:10px;font-size:28px;font-weight:700}#modal-text{text-align:left;white-space:pre-wrap;flex-grow:1;margin-bottom:20px;padding-right:10px;font-size:16px;overflow-y:auto}#modal-text::-webkit-scrollbar{width:14px}#modal-text::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}#modal-text::-webkit-scrollbar-thumb{background:#fc6;border-radius:10px;min-height:100px;box-shadow:inset 0 0 5px #0003}#modal-text::-webkit-scrollbar-thumb:hover{background:#fa0}.modal-close-btn{background-color:var(--primary-blue);color:#fff;cursor:pointer;border:3px solid #fc6;border-radius:6px;flex-shrink:0;align-self:center;padding:8px 20px;font-size:16px;font-weight:700;box-shadow:3px 3px #0000004d}.header{background-color:var(--header-bg);z-index:1000;border-bottom:2px solid #555;width:100%;padding:14px;position:sticky;top:0;box-shadow:0 2px 5px #0000001a}.header-container{justify-content:center;align-items:center;max-width:960px;margin:0 auto;display:flex}.header-content-wrapper{flex-direction:row;justify-content:space-between;align-items:center;gap:40px;width:100%;display:flex}.header-text-group{text-align:left}.header-title{color:var(--header-text);font-size:26px;font-weight:700;line-height:1.1;display:block}.header-nav{flex:1;gap:30px;display:flex}.header-nav-link{color:var(--header-text);font-size:16px;font-weight:600;text-decoration:none;transition:transform .2s;display:inline-block}.header-nav-link:hover{transform:translateY(-2px)}.loading-spinner-overlay{z-index:9999;background:#fffc;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-spinner-circle{border:5px solid #ccc;border-top-color:#333;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.app-loading-overlay{z-index:10000;background:#ffffffe6;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.app-spinner-circle{border:5px solid #ccc;border-top-color:#333;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}.app-loading-hidden{opacity:0}.main-content{flex-direction:column;height:100%;padding:165px 0 0 45px;display:flex}.menu-navigation{flex-direction:column;gap:12px;display:flex}.extra-links{flex-direction:column;align-items:flex-start;gap:5px;margin-top:5px;display:flex}.link-btn-container{justify-content:center;gap:15px;display:flex}.footer-info{color:#fff;text-shadow:2px 2px 3px #000c;pointer-events:none;font-size:18px;font-weight:700;display:none;position:absolute;bottom:15px;left:20px}.screen-header{grid-template-columns:1fr auto 1fr;align-items:center;width:90%;height:50px;margin:10px auto;display:grid;position:relative}.screen-title{color:#000;-webkit-text-stroke:0;text-shadow:1px 1px 2px #000c;text-align:center;white-space:nowrap;grid-column:2;margin:0;font-size:32px;font-weight:700}.screen-header .back-btn,.screen-header .quit-btn{grid-column:3;justify-self:end}.lesson-list-container{flex-direction:column;gap:8px;width:90%;height:380px;margin:20px auto;padding-right:15px;display:flex;overflow-y:auto}.lesson-list-item-btn{text-align:left;white-space:nowrap;text-overflow:ellipsis;transition:background-color .2s;overflow:hidden;color:#333!important;box-sizing:border-box!important;background-color:#f0f0f0!important;border:3px solid #000!important;flex-shrink:0!important;justify-content:flex-start!important;align-items:center!important;width:100%!important;height:40px!important;min-height:40px!important;max-height:40px!important;padding-left:20px!important;font-size:20px!important}.lesson-list-item-btn:hover{filter:none!important;background-color:#e0e0e0!important}.lesson-list-container::-webkit-scrollbar{width:14px;height:20px}.lesson-list-container::-webkit-scrollbar-thumb{background:#fc6;border-radius:4px;min-height:100px}.lesson-grid{grid-template-columns:repeat(4,1fr);gap:15px;width:90%;max-height:340px;margin:20px auto;display:grid;overflow-y:auto}.lesson-play-stage{background:#000;width:100%;height:100%;position:relative}.full-slide-img{object-fit:contain;width:100%;height:100%}.overlay-header{box-sizing:border-box;pointer-events:none;justify-content:space-between;align-items:center;width:100%;padding:0 30px;display:flex;position:absolute;top:20px;left:0}.lesson-overlay-title{color:#000;text-shadow:1px 1px 2px #000c;margin:0;font-size:32px}.overlay-footer{pointer-events:none;justify-content:center;align-items:center;gap:40px;width:100%;display:flex;position:absolute;bottom:20px;left:0}.slide-counter-text{color:#000;text-shadow:none;text-align:center;min-width:80px;font-size:24px;font-weight:700}.overlay-header button,.overlay-footer button{pointer-events:auto}.lesson-item-btn{width:100%!important;height:50px!important;font-size:18px!important}.lesson-play-overlay{padding-top:20px!important}.lesson-slide-area{background:#000;justify-content:center;align-items:center;width:100%;height:350px;display:flex}.lesson-slide-area img{object-fit:contain;max-width:100%;max-height:100%}.lesson-controls{justify-content:center;align-items:center;gap:30px;margin-top:10px;display:flex}#slide-number{color:#fc6;text-align:center;min-width:80px;font-size:18px;font-weight:700}:root{--board-color:#d6b15a;--cell-size:48px}.game-container{-webkit-user-select:none;user-select:none;flex:1;justify-content:center;align-items:flex-start;gap:20px;margin-top:15px;display:flex;position:relative;border:none!important}.guide-dot{pointer-events:none;z-index:30;background-color:#4caf50b3;border-radius:50%;width:14px;height:14px;position:absolute}.board{grid-template-columns:repeat(9, var(--cell-size));grid-template-rows:repeat(9, var(--cell-size));background-color:var(--board-color);z-index:0;border:2px solid #333;display:grid;position:relative}.board-wrapper{position:relative}.board-star{z-index:5;pointer-events:none;background-color:#333;border-radius:50%;width:7px;height:7px;position:absolute;transform:translate(-50%,-50%)}.cell{width:var(--cell-size);height:var(--cell-size);box-sizing:border-box;cursor:pointer;background-color:var(--board-color);border:1px solid #0000004d;justify-content:center;align-items:center;display:flex}#board-labels-x{grid-template-columns:repeat(9, var(--cell-size));width:100%;height:20px;display:grid;position:absolute;top:-20px;left:0}#board-labels-y{grid-template-rows:repeat(9, var(--cell-size));width:20px;height:100%;display:grid;position:absolute;top:0;right:-20px}.board-label-item{color:#000;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#0000;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.piece-img{object-fit:contain;width:45px;height:45px}.hand-container{background-color:var(--board-color);border:2px solid #333;border-radius:4px;flex-direction:column;width:60px;height:380px;display:flex}.hand{flex-direction:column;width:100%;height:100%;display:flex}.sente-side{align-self:flex-end}.gote-side .hand{flex-direction:column-reverse}.selected{background-color:#fff17699!important}.hand-piece-container{cursor:pointer;justify-content:center;align-items:center;width:58px;height:54px;display:flex;position:relative}.hand-piece-container .piece-img{width:40px;height:40px}.hand-count{color:#000;z-index:25;background:#fff;border:1px solid #333;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:14px;font-weight:700;display:flex;position:absolute;bottom:4px;right:2px;box-shadow:1px 1px 3px #00000080}#promo-dialog{z-index:1000;background:#fffffff2;border:2px solid #5c4033;flex-direction:column;display:none;position:absolute;box-shadow:0 4px 15px #0006}.promo-option{box-sizing:border-box;cursor:pointer;border:1px solid #0000001a;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.promo-option:hover{background:#ffff004d}#game-modal-overlay{z-index:999;width:100%;height:100%;position:absolute;top:0;left:0}#screen-game-mode{background-color:#000}.mode-selection-container{flex-direction:column;justify-content:center;align-items:center;gap:15px;height:calc(100% - 80px);display:flex}.mode-selection-btn{width:400px;padding:20px;font-size:20px}.mode-selection-btn.secondary{background-color:#555}.level-btn{background-color:#444!important;border:2px solid #fc6!important;width:100px!important;height:40px!important;font-size:16px!important}.level-btn.active{color:#000!important;background-color:#fc6!important}.level-selection{gap:10px;display:flex}.mode-selection-container hr{border:.5px solid #555;width:80%;margin:10px 0}#level-description{text-align:center;word-wrap:break-word;width:100%;margin-top:5px;font-size:16px;font-weight:700;line-height:1.4}.edit-btn{background-color:var(--primary-blue);color:#fff;cursor:pointer;border:3px solid #fc6;border-radius:6px;justify-content:center;align-items:center;width:140px;height:40px;font-size:18px;font-weight:700;transition:filter .2s,transform .1s;display:flex;box-shadow:3px 3px #0000004d}.edit-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.edit-btn:active{transform:translateY(1px);box-shadow:1px 1px #0000004d}.toolbar{align-items:center;gap:15px;display:none}#status{pointer-events:auto;position:static;transform:none}#game-toolbar{grid-column:3;justify-self:end}#not-edit-toolbar,#free-edit-toolbar{grid-column:1/-1;justify-self:center}#not-edit-toolbar{width:584px}#edit-turn-indicator{color:#000;margin-right:auto;font-size:32px;font-weight:700}.last-move{background-color:#ffd70066!important}#piece-box{background-color:#0003;border-radius:5px;flex-direction:column;gap:5px;width:120px;height:240px;padding:5px;display:flex}#piece-box-wrapper{flex-direction:column;gap:10px;margin-left:10px;display:none}.piece-box-row{justify-content:center;gap:5px;display:flex}.piece-box-cell{cursor:pointer;border:1px solid #ffffff4d;justify-content:center;align-items:center;width:48px;height:54px;display:flex;position:relative}.piece-box-cell.selected{background-color:#ffd70066;border-color:gold}.piece-box-cell .piece-img{max-width:100%;max-height:100%}.piece-box-cell .hand-count{color:#fff;background-color:#000000b3;border-radius:0 0 0 3px;padding:1px 4px;font-size:12px;position:absolute;top:0;right:0}.piece-box-help-btn{color:#fff;cursor:pointer;cursor:pointer;background-color:#000;border:3px solid #fc6;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:8px 0;font-size:18px;font-weight:700;transition:background-color .2s;display:flex;box-shadow:3px 3px #0000004d}.piece-box-help-btn:hover{background-color:#333}.search-box{width:90%;margin:20px auto 0}.search-input-group{align-items:center;gap:10px;display:flex}.search-input-group input{border:2px solid #000;border-radius:4px;flex-grow:1;padding:12px;font-size:18px}#dict-results-message{color:#000;min-height:24px;margin:5px 0 10px;font-size:18px;font-weight:700}.results-area{color:#000;background:#ffffff0d;border-radius:4px;width:90%;max-height:320px;margin:0 auto;display:none;position:relative;overflow-y:auto;box-shadow:0 4px 10px #00000080}.results-area::-webkit-scrollbar{width:14px}.results-area::-webkit-scrollbar-track{background:#0003;border-radius:10px}.results-area::-webkit-scrollbar-thumb{background:#fc3;border-radius:10px;min-height:100px;box-shadow:inset 0 0 5px #0003}.results-area::-webkit-scrollbar-thumb:hover{background:#fa0}#dict-table{border-collapse:collapse;table-layout:fixed;border:1px solid #ccc;width:100%}#dict-table th{color:#333;text-align:center;z-index:20;background-color:#eee;border:1px solid #ccc;padding:10px;font-weight:700;position:sticky;top:0}#dict-results-body td{color:#333;word-wrap:break-word;vertical-align:middle;background-color:#fff;border:1px solid #ccc;padding:12px 10px}.col-en,.col-ja{border-right:1px solid #ccc;width:30%}.col-meaning{width:40%}#mobile-warning{z-index:10000;color:#f0f0f0;background-color:#000;justify-content:center;align-items:center;width:100%;height:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:none;position:fixed;top:0;left:0}.warning-content{text-align:center;box-sizing:border-box;background:#000;border:3px solid #d6b15a;border-radius:12px;width:90%;max-width:480px;margin:0 auto;padding:30px;box-shadow:0 10px 30px #000000b3}.warning-content h2{color:#d6b15a;margin-top:0;margin-bottom:20px;font-size:24px}.warning-content p{margin-bottom:15px;font-size:16px;line-height:1.6}.warning-content ul{text-align:left;margin-bottom:25px;padding-left:20px;font-size:15px;display:inline-block}.warning-content li{margin-bottom:5px}.warning-content .patreon-image-btn{cursor:pointer;background-color:#000;border:1px solid #d6b15a;border-radius:6px;padding:10px 20px}.header{position:relative;z-index:10001!important}@media screen and (width<=980px),screen and (height<=560px){#mobile-warning{display:flex!important}#app-viewport,.header-text-group{display:none!important}.header-nav{flex-wrap:wrap;justify-content:center;gap:12px}.header-nav-link{font-size:14px}.warning-content{padding:20px 15px}.warning-content h2{margin-bottom:15px;font-size:20px}.warning-content p{margin-bottom:10px;font-size:14px}.warning-content ul{margin-bottom:20px;font-size:13px}}