:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}html,body{max-width:100vw;overflow-x:hidden}body{color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}html,body{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;touch-action:manipulation;height:100%;overflow-x:hidden;overflow-y:auto}body{color:#eee;background:#222;flex-direction:column;align-items:center;height:auto;display:flex;overflow-y:auto}:root{--player-1-color:#36f;--player-2-color:#e44;--player-3-color:#fc3;--player-4-color:#3b3;--player-1-text-color:#fff;--player-2-text-color:#fff;--player-3-text-color:#000;--player-4-text-color:#fff}.app-header{box-sizing:border-box;background:#222;justify-content:space-between;align-items:center;width:100%;padding:12px 20px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.header-logo{width:36px;height:36px}.header-title{color:#fff;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;margin:0;font-size:20px;font-weight:700}.header-actions,.header-menu{flex-wrap:wrap;gap:8px;display:flex}.header-menu{position:relative}.menu-trigger{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;text-decoration:none;display:flex}.menu-trigger:hover{background:#333}.menu-trigger:before{content:"";background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><rect x=\"3\" y=\"6\" width=\"18\" height=\"2\" rx=\"1\"/><rect x=\"3\" y=\"11\" width=\"18\" height=\"2\" rx=\"1\"/><rect x=\"3\" y=\"16\" width=\"18\" height=\"2\" rx=\"1\"/></svg>");background-position:50%;background-repeat:no-repeat;background-size:contain;width:20px;height:20px;display:block}.menu-dropdown{z-index:1100;opacity:1;background:#222;border-radius:8px;min-width:200px;padding:8px;transition:opacity .15s,transform .15s;position:absolute;top:40px;right:0;transform:translateY(0)}.menu-dropdown.hidden{display:none}.menu-item-btn{text-align:center;justify-content:center;align-items:center;width:100%;min-height:36px;margin:0 0 8px;padding:10px 14px;display:inline-flex}.menu-item-btn:before{width:20px;height:20px}.menu-dropdown .toolbar-btn:last-child{margin-bottom:0}.toolbar-btn{color:#fff;cursor:pointer;background:#555;border:none;border-radius:6px;align-items:center;padding:8px 12px;font-size:14px;font-weight:700;line-height:1;transition:all .2s;display:flex;position:relative}.toolbar-btn:hover{background:#666;box-shadow:0 2px 4px rgba(0,0,0,.2)}.toolbar-btn:before{content:"";vertical-align:middle;background-position:50%;background-repeat:no-repeat;background-size:contain;width:16px;height:16px;margin-right:6px;display:inline-block}#share-btn.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M13 3h8v8h-2V7.41l-9.29 9.3-1.42-1.42L17.59 6H13V3z\"/><path d=\"M5 5h6v2H7v10h10v-4h2v6H5V5z\"/></svg>")}#preset-btn.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h8v-2.5c0-2.33-4.67-3.5-7-3.5z\"/></svg>")}#rotate-btn.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z\"/></svg>")}#help-btn.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\"/></svg>")}#lang-btn.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"/><path d=\"M2 12h20M4.5 7h15M4.5 17h15\" stroke=\"white\" stroke-width=\"1.5\" fill=\"none\"/><path d=\"M12 2c3 3 3 17 0 20M12 2c-3 5-3 15 0 20\" stroke=\"white\" stroke-width=\"1.5\" fill=\"none\"/></svg>")}#t-toggle.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm14.71-9.04a.996.996 0 0 0 0-1.41l-2.51-2.51a.996.996 0 1 0-1.41 1.41l2.51 2.51c.39.39 1.02.39 1.41 0z\"/></svg>")}.menu-dropdown .menu-sm-only{display:none}@media (max-width:600px){.menu-dropdown .menu-sm-only{display:block}}#menu-share.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M13 3h8v8h-2V7.41l-9.29 9.3-1.42-1.42L17.59 6H13V3z\"/><path d=\"M5 5h6v2H7v10h10v-4h2v6H5V5z\"/></svg>")}#menu-rotate.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z\"/></svg>")}#menu-help.toolbar-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\"/></svg>")}.share-btn{box-sizing:border-box;text-align:center;border-radius:6px;justify-content:center;align-items:center;height:36px;margin:0 0 4px;padding:8px 12px;display:flex}.share-btn:before{content:"";vertical-align:middle;background-position:50%;background-repeat:no-repeat;background-size:contain;width:20px;height:20px;margin-right:8px;display:inline-block}.facebook-btn:before,.line-btn:before{position:relative;top:-1px}.twitter-btn{background:#1da1f2}.twitter-btn:before{display:none}.twitter-btn:hover{background:#0c85d0}.facebook-btn{background:#4267b2}.facebook-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"></path></svg>")}.facebook-btn:hover{background:#3b5998}.line-btn{background:#06c755}.line-btn:before{background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"white\"><path d=\"M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.817 4.269 8.857 10.035 9.622.391.084.923.258 1.058.592.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975 1.724-1.897 2.548-3.821 2.548-5.984z\"></path></svg>")}.line-btn:hover{background:#05b04b}.share-btn:not(.twitter-btn):not(.facebook-btn):not(.line-btn):before{display:none}.app-container{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:900px;padding:0;display:flex}#board{box-sizing:border-box;touch-action:manipulation;justify-content:center;align-items:center;width:100%;min-height:auto;margin:0;padding:20px;display:flex;position:relative;overflow:visible}#field{aspect-ratio:105/68;box-sizing:border-box;touch-action:manipulation;background:#060;border:4px solid #fff;width:calc(100% - 20px);max-width:900px;min-height:100px;margin:0 auto;position:relative;overflow:visible}#field.field-init-hidden{visibility:hidden;pointer-events:none}#field{cursor:pointer}#field.vertical{aspect-ratio:68/105;max-width:600px}#field svg{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.piece{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:move;z-index:10;display:block;position:absolute;transform:translate(-50%,-50%)}.piece>.player{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.piece>.name{position:absolute;top:18px;left:0;transform:translate(-50%)}.player{color:#fff;z-index:5;white-space:nowrap;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:700;display:flex;overflow:visible}.player.c1{background:var(--player-1-color);color:var(--player-1-text-color)}.player.c2{background:var(--player-2-color);color:var(--player-2-text-color)}.player.c3{background:var(--player-3-color);color:var(--player-3-text-color)}.player.c4{background:var(--player-4-color);color:var(--player-4-text-color)}.player.ball{color:transparent;background:url(/images/soccer-ball.svg) 50%/contain no-repeat}.piece .name{white-space:nowrap;font-size:12px;font-weight:700}#modal,#help-modal,#share-modal,#preset-modal,#lang-modal{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;box-sizing:border-box;background:rgba(0,0,0,.7);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#modal.hidden,#help-modal.hidden,#share-modal.hidden,#preset-modal.hidden,#lang-modal.hidden{display:none}#modal .box,#help-modal .box,#share-modal .box,#preset-modal .box,#lang-modal .box{color:#fff;box-sizing:border-box;background:#333;border-radius:12px;flex-direction:column;gap:12px;width:320px;max-width:320px;padding:24px;line-height:1.4;display:flex;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.4)}#modal{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;box-sizing:border-box;background:rgba(0,0,0,.7);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#modal.hidden{display:none}#modal .box{box-sizing:border-box;background:#333;border-radius:12px;flex-direction:column;gap:12px;width:320px;min-width:240px;padding:24px;display:flex;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.4)}#player-form{flex-direction:column;gap:12px;display:flex}#modal .close-btn,#help-modal .close-btn,#share-modal .close-btn,#preset-modal .close-btn,#lang-modal .close-btn{color:#fff;cursor:pointer;z-index:10;background:#444;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-size:16px;line-height:1;transition:background .2s;display:flex;position:absolute;top:-14px;right:-14px;box-shadow:0 2px 4px rgba(0,0,0,.3)}#modal .close-btn:hover,#help-modal .close-btn:hover,#share-modal .close-btn:hover,#preset-modal .close-btn:hover,#lang-modal .close-btn:hover{background:#666}#modal .colors{justify-content:center;gap:12px;padding:8px 0;display:flex}#modal .color-option{cursor:pointer;border:2px solid transparent;border-radius:50%;width:28px;height:28px;transition:transform .2s,border-color .2s;position:relative}#modal .color-option:hover{transform:scale(1.1)}#modal .color-option.selected{border-color:#fff;transform:scale(1.1)}#modal .color-option.player.ball{color:transparent;background:url(/images/soccer-ball.svg) 50%/contain no-repeat}#modal .chip-color-input{opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:0 0;border:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}#modal .color-option:not(.selected) .chip-color-input{pointer-events:none}#modal input{color:#fff;box-sizing:border-box;background:#444;border:none;border-radius:6px;outline:none;width:100%;padding:10px 12px;font-size:16px;transition:box-shadow .2s}#modal input:focus{box-shadow:0 0 0 2px rgba(255,255,255,.3)}#modal button{cursor:pointer;text-transform:uppercase;border:none;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:700;transition:all .2s}#modal .btn-group{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:8px;display:flex}#modal #save-btn{color:#fff;background:#4caf50;margin-left:auto}#modal #save-btn:hover{background:#45a049;box-shadow:0 4px 8px rgba(76,175,80,.3)}#modal #cancel-btn{color:#fff;background:#555}#modal #cancel-btn:hover{background:#666;box-shadow:0 4px 8px rgba(0,0,0,.2)}#modal #delete-btn{color:#fff;background:#f44336}#modal #delete-btn:hover{background:#d32f2f;box-shadow:0 4px 8px rgba(244,67,54,.3)}#help-modal,#share-modal,#preset-modal,#lang-modal{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;box-sizing:border-box;background:rgba(0,0,0,.7);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#help-modal.hidden,#share-modal.hidden,#preset-modal.hidden,#lang-modal.hidden{display:none}#help-modal .box,#share-modal .box,#preset-modal .box,#lang-modal .box{color:#fff;box-sizing:border-box;background:#333;border-radius:12px;flex-direction:column;gap:12px;width:320px;max-width:320px;padding:24px;line-height:1.4;display:flex;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.4)}#preset-modal .box{gap:16px}#help-modal .box .modal-title{color:#bbb;text-align:left;margin-bottom:4px;font-size:14px;font-weight:700}#help-modal .box p{color:#ddd;margin:0;font-size:14px;line-height:1.6}#share-modal .box .modal-title{color:#bbb;text-align:left;margin-bottom:8px;font-size:14px;font-weight:700}#help-modal button,#share-modal button,#preset-modal button,#lang-modal button,#lang-modal a{color:#fff;cursor:pointer;text-align:center;background:#555;border:none;border-radius:6px;padding:8px 12px;font-weight:700;text-decoration:none;display:inline-block}.preset-section{margin-bottom:16px}.preset-section:last-child{margin-bottom:0}.preset-section-title{color:#bbb;text-align:left;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:14px;font-weight:700}.preset-section button{text-align:left;width:100%;margin-bottom:6px;padding:10px 16px;transition:all .2s;display:block}.preset-section button:last-child{margin-bottom:0}.preset-section button:hover{background:#666;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.3)}.preset-danger{font-weight:700;color:#fff!important;background:#f44336!important;padding:12px 16px!important}.preset-danger:hover{background:#d32f2f!important;box-shadow:0 4px 12px rgba(244,67,54,.4)!important}.app-footer{box-sizing:border-box;background:#222;width:100%;margin-top:auto;padding:10px 20px}.t-editor{max-width:900px;margin:0 auto 10px;padding:8px 0}.t-editor.hidden{display:none}.t-editor-label{color:#bbb;letter-spacing:.3px;margin:0 0 6px 2px;font-size:12px;display:block}.t-editor-textarea{resize:vertical;color:#eee;background:#111;border:1px solid #444;border-radius:6px;width:100%;min-height:72px;max-height:160px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.4}.t-editor-textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.15)}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:900px;margin:0 auto;display:flex}.footer-links{gap:16px;display:flex}.footer-btn{color:#aaa;cursor:pointer;background:0 0;border:none;font-size:14px;text-decoration:none;transition:color .2s}.footer-content,.footer-btn{font-weight:400}.footer-btn:hover{color:#fff;text-decoration:underline}.footer-copyright{color:#888;font-size:14px}.footer-copyright a{color:inherit;text-decoration:none;transition:color .2s}.footer-copyright a:hover{color:#aaa;text-decoration:underline}@media (max-width:600px){#modal .box,#help-modal .box,#share-modal .box,#preset-modal .box,#lang-modal .box{width:85%;min-width:unset;max-width:320px;margin:0 auto;padding:20px 16px}#modal .close-btn,#help-modal .close-btn,#share-modal .close-btn,#preset-modal .close-btn,#lang-modal .close-btn{top:-12px;right:-12px}}#toast{color:#fff;opacity:0;visibility:hidden;z-index:1000;background:rgba(0,0,0,.8);border-radius:4px;padding:10px 20px;font-size:14px;transition:opacity .3s,visibility .3s;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}#toast.show{opacity:1;visibility:visible}@media (max-width:600px){#board{padding:8px 16px}#field{width:100%}.app-header{padding:12px}.app-footer{padding:8px 12px}.header-actions{gap:8px}.toolbar-btn{justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:flex}.toolbar-btn:before{width:20px;height:20px;margin-right:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toolbar-btn span{display:none!important}.menu-item-btn{justify-content:center;align-items:center;min-height:36px;width:100%!important;height:auto!important;padding:10px 14px!important;display:flex!important}.menu-item-btn:before{width:20px;height:20px;margin-right:6px!important;position:static!important;transform:none!important}.menu-item-btn span{position:static;transform:none;display:inline!important}body.menu-open #share-btn,body.menu-open #rotate-btn,body.menu-open #help-btn{display:none!important}.footer-content{flex-direction:column;align-items:center;gap:12px}.footer-links{flex-wrap:wrap;justify-content:center}.footer-content .footer-copyright{text-align:center;width:100%;margin-top:4px}}