From dd6be92a19e066568c171d29d51833151cd6eb57 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 11 Jun 2024 15:45:52 -0600
Subject: [PATCH 1/7] General mobile-friendly improvements

---
 packages/client/src/App.tsx                   |  1 +
 packages/client/src/components/MapPanel.tsx   |  4 +-
 .../client/src/pages/CharacterCreation.tsx    |  1 -
 packages/client/src/pages/GameBoard.tsx       | 59 ++++++++++---------
 4 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index c948574b4..1576990b3 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -9,6 +9,7 @@ export const App = (): JSX.Element => {
   return (
     <Router>
       <Grid
+        maxW="1800px"
         minHeight="100vh"
         px={{ base: 8, sm: 12, md: 20 }}
         templateColumns="100%"
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index 1c533ff92..805b0686a 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -77,9 +77,9 @@ export const MapPanel = (): JSX.Element => {
 
             return (
               <VStack
-                borderTop={hasSafeZoneTopBorder ? '3px solid' : '2px solid'}
+                borderTop={hasSafeZoneTopBorder ? '2px solid' : '2px solid'}
                 borderTopColor={hasSafeZoneTopBorder ? 'yellow' : 'black'}
-                borderRight={hasSafeZoneRightBorder ? '3px solid' : '2px solid'}
+                borderRight={hasSafeZoneRightBorder ? '2px solid' : '2px solid'}
                 borderRightColor={hasSafeZoneRightBorder ? 'yellow' : 'black'}
                 key={`map-tile${i}`}
               >
diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
index 60f4cbef1..6888d0b60 100644
--- a/packages/client/src/pages/CharacterCreation.tsx
+++ b/packages/client/src/pages/CharacterCreation.tsx
@@ -128,7 +128,6 @@ export const CharacterCreation = (): JSX.Element => {
         direction={{ base: 'column', lg: 'row' }}
         gap={{ base: 4, sm: 6 }}
         justifyContent="center"
-        maxW="1800px"
         mx="auto"
         my={4}
         onSubmit={onCreateCharacter}
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 1621f9361..04a08ab26 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -9,71 +9,72 @@ export const GameBoard = (): JSX.Element => {
   return (
     <Grid
       gap={2}
-      minH="100vh"
+      h="calc(100vh - 100px)"
       mt={4}
-      templateColumns={{ base: 'repeat(16, 1fr)', md: 'repeat(16, 1fr)' }}
-      templateRows={{ base: 'repeat(13, 1fr)', md: 'repeat(12, 1fr)' }}
+      templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
+      templateRows={{ base: 'repeat(16, 1fr)', lg: 'repeat(12, 1fr)' }}
     >
       <GridItem
         border="2px solid"
-        colSpan={{ base: 3, md: 4 }}
-        display={{ base: 'none', md: 'block' }}
+        colSpan={{ base: 1, lg: 4 }}
+        display={{ base: 'none', lg: 'block' }}
+        overflowY="auto"
         p={4}
-        rowSpan={{ base: 12, md: 12 }}
+        rowSpan={{ base: 12, lg: 12 }}
       >
         <StatsPanel />
       </GridItem>
       <GridItem
         border="2px solid"
-        colSpan={{ base: 10, md: 8 }}
-        colStart={{ base: 0, md: 5 }}
+        colSpan={{ base: 1, lg: 8 }}
+        colStart={{ base: 0, lg: 5 }}
+        overflowY="auto"
         p={4}
-        rowSpan={{ base: 4, md: 6 }}
-        rowStart={{ base: 0, md: 0 }}
+        rowSpan={{ base: 4, lg: 6 }}
+        rowStart={{ base: 0, lg: 0 }}
       >
         <TileDetailsPanel />
       </GridItem>
       <GridItem
         border="2px solid"
-        colSpan={{ base: 10, md: 8 }}
-        colStart={{ base: 0, md: 5 }}
-        maxH={450}
+        colSpan={{ base: 1, lg: 8 }}
+        colStart={{ base: 0, lg: 5 }}
         overflowY="auto"
         p={4}
-        rowSpan={{ base: 4, md: 6 }}
-        rowStart={{ base: 5, md: 7 }}
+        rowSpan={{ base: 4, lg: 6 }}
+        rowStart={{ base: 5, lg: 7 }}
       >
         <ActionsPanel />
       </GridItem>
       <GridItem
-        colSpan={{ base: 10, md: 4 }}
-        colStart={{ base: 0, md: 13 }}
-        rowSpan={{ base: 4, md: 8 }}
-        rowStart={{ base: 9, md: 0 }}
+        colSpan={{ base: 1, lg: 4 }}
+        colStart={{ base: 0, lg: 13 }}
+        rowSpan={{ base: 4, lg: 8 }}
+        rowStart={{ base: 9, lg: 0 }}
       >
         <MapPanel />
       </GridItem>
       {/* <GridItem
         background="lavender"
         border="2px solid"
-        colSpan={{ base: 0, md: 2 }}
-        colStart={{ base: 0, md: 7 }}
-        display={{ base: 'none', md: 'block' }}
+        colSpan={{ base: 0, lg: 2 }}
+        colStart={{ base: 0, lg: 7 }}
+        display={{ base: 'none', lg: 'block' }}
         p={4}
-        rowSpan={{ base: 0, md: 4 }}
-        rowStart={{ base: 0, md: 9 }}
+        rowSpan={{ base: 0, lg: 4 }}
+        rowStart={{ base: 0, lg: 9 }}
       >
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Chat</Heading>
       </GridItem> */}
       <GridItem
         background="plum"
         border="2px solid"
-        colSpan={{ base: 8, md: 0 }}
-        colStart={{ base: 0, md: 0 }}
-        display={{ base: 'block', md: 'none' }}
+        colSpan={{ base: 1, lg: 0 }}
+        colStart={{ base: 0, lg: 0 }}
+        display={{ base: 'block', lg: 'none' }}
         padding="5px"
-        rowSpan={{ base: 1, md: 0 }}
-        rowStart={{ base: 13, md: 0 }}
+        rowSpan={{ base: 1, lg: 0 }}
+        rowStart={{ base: 13, lg: 0 }}
       >
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Tray</Heading>
       </GridItem>

From 37d780ad3085772d980c6faea19432424c5a5124 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 11 Jun 2024 17:43:04 -0600
Subject: [PATCH 2/7] TileDetailsPanel mobile improvements

---
 packages/client/src/App.tsx                   |   2 +-
 packages/client/src/components/Header.tsx     |  12 +-
 packages/client/src/components/MapPanel.tsx   | 200 +++++++++---------
 .../components/TileDetailsPanel/Monsters.tsx  |  30 ---
 .../components/TileDetailsPanel/Players.tsx   |  18 --
 .../components/TileDetailsPanel/SafeZone.tsx  |  34 ---
 .../src/components/TileDetailsPanel/data.ts   |  40 ++++
 .../src/components/TileDetailsPanel/index.tsx | 113 ++++++++--
 packages/client/src/pages/GameBoard.tsx       |  22 +-
 packages/client/src/utils/theme.ts            |   9 +
 10 files changed, 274 insertions(+), 206 deletions(-)
 delete mode 100644 packages/client/src/components/TileDetailsPanel/Monsters.tsx
 delete mode 100644 packages/client/src/components/TileDetailsPanel/Players.tsx
 delete mode 100644 packages/client/src/components/TileDetailsPanel/SafeZone.tsx
 create mode 100644 packages/client/src/components/TileDetailsPanel/data.ts

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 1576990b3..8932af956 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -11,7 +11,7 @@ export const App = (): JSX.Element => {
       <Grid
         maxW="1800px"
         minHeight="100vh"
-        px={{ base: 8, sm: 12, md: 20 }}
+        px={{ base: 2, sm: 12, md: 20 }}
         templateColumns="100%"
         templateRows="auto 1fr auto"
       >
diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
index 8fc6bee75..45489172b 100644
--- a/packages/client/src/components/Header.tsx
+++ b/packages/client/src/components/Header.tsx
@@ -11,8 +11,16 @@ export const Header = (): JSX.Element => {
   }
 
   return (
-    <Box as="header" bgColor="grey300" mt={8} padding="10px">
-      <Heading size={{ base: 'sm', sm: 'md' }} textAlign="right">
+    <Box
+      as="header"
+      bgColor={{ base: 'white', lg: 'grey300' }}
+      mt={8}
+      padding={{ base: 1, lg: 2 }}
+    >
+      <Heading
+        size={{ base: 'sm', sm: 'md' }}
+        textAlign={{ base: 'left', lg: 'right' }}
+      >
         Ultimate Dominion
       </Heading>
     </Box>
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index 805b0686a..76c2fbffe 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -98,124 +98,134 @@ export const MapPanel = (): JSX.Element => {
           <Text size="xs">Dark Cave - 2,344 Players</Text>
         </HStack>
       </Box>
-      <VStack
-        alignItems="stretch"
-        h={175}
-        justifyContent="space-between"
-        mt={2}
-        pos="relative"
-        w={175}
+      <NavigationCompass onMove={onMove} />
+    </VStack>
+  );
+};
+
+const CharacterPiece = (): JSX.Element => (
+  <Box
+    bg="transparent"
+    border="8px solid"
+    borderColor="yellow"
+    borderRadius="50%"
+    h="28px"
+    w="28px"
+  />
+);
+
+const NavigationCompass = ({
+  onMove,
+}: {
+  onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
+}): JSX.Element => {
+  return (
+    <VStack
+      alignItems="stretch"
+      h={175}
+      justifyContent="space-between"
+      mt={2}
+      pos="relative"
+      w={175}
+    >
+      <Box
+        border="2px solid black"
+        borderRadius="50%"
+        h={110}
+        pos="absolute"
+        top="50%"
+        left="50%"
+        transform="translate(-50%, -50%)"
+        w={110}
+        zIndex={-1}
+      />
+      <Box
+        bg="black"
+        h="2px"
+        left="50%"
+        pos="absolute"
+        top="50%"
+        transform="translate(-50%, 50%)"
+        w={85}
+        zIndex={-1}
+      />
+      <Box
+        bg="black"
+        h={85}
+        pos="absolute"
+        right="50%"
+        top="50%"
+        transform="translate(50%, -50%)"
+        w="2px"
+        zIndex={-1}
+      />
+      <Box
+        bg="white"
+        left="50%"
+        pos="absolute"
+        top="50%"
+        transform="translate(-50%, -45%)"
       >
-        <Box
-          border="2px solid black"
-          borderRadius="50%"
-          h={110}
-          pos="absolute"
-          top="50%"
-          left="50%"
-          transform="translate(-50%, -50%)"
-          w={110}
-          zIndex={-1}
-        />
-        <Box
-          bg="black"
-          h="2px"
-          left="50%"
-          pos="absolute"
-          top="50%"
-          transform="translate(-50%, 50%)"
-          w={85}
-          zIndex={-1}
-        />
-        <Box
-          bg="black"
-          h={85}
-          pos="absolute"
-          right="50%"
-          top="50%"
-          transform="translate(50%, -50%)"
-          w="2px"
-          zIndex={-1}
-        />
-        <Box
+        <TbDirectionArrows size={32} />
+      </Box>
+      <VStack spacing={0}>
+        <Text fontWeight={700} size="xs">
+          N
+        </Text>
+        <Button
           bg="white"
-          left="50%"
-          pos="absolute"
-          top="50%"
-          transform="translate(-50%, -45%)"
+          borderRadius="50%"
+          p={0}
+          onClick={() => onMove('up')}
+          variant="ghost"
         >
-          <TbDirectionArrows size={32} />
-        </Box>
-        <VStack spacing={0}>
+          <IoIosArrowDropupCircle size={32} />
+        </Button>
+      </VStack>
+      <HStack justifyContent="space-between" spacing={10}>
+        <HStack spacing={1}>
           <Text fontWeight={700} size="xs">
-            N
+            W
           </Text>
           <Button
             bg="white"
             borderRadius="50%"
             p={0}
-            onClick={() => onMove('up')}
+            onClick={() => onMove('left')}
             variant="ghost"
           >
-            <IoIosArrowDropupCircle size={32} />
+            <IoIosArrowDropleftCircle size={32} />
           </Button>
-        </VStack>
-        <HStack justifyContent="space-between" spacing={10}>
-          <HStack spacing={1}>
-            <Text fontWeight={700} size="xs">
-              W
-            </Text>
-            <Button
-              bg="white"
-              borderRadius="50%"
-              p={0}
-              onClick={() => onMove('left')}
-              variant="ghost"
-            >
-              <IoIosArrowDropleftCircle size={32} />
-            </Button>
-          </HStack>
-          <HStack spacing={1}>
-            <Button
-              bg="white"
-              borderRadius="50%"
-              p={0}
-              onClick={() => onMove('right')}
-              variant="ghost"
-            >
-              <IoIosArrowDroprightCircle size={32} />
-            </Button>
-            <Text fontWeight={700} size="xs">
-              E
-            </Text>
-          </HStack>
         </HStack>
-        <VStack spacing={0}>
+        <HStack spacing={1}>
           <Button
             bg="white"
             borderRadius="50%"
             p={0}
-            onClick={() => onMove('down')}
+            onClick={() => onMove('right')}
             variant="ghost"
           >
-            <IoIosArrowDropdownCircle size={32} />
+            <IoIosArrowDroprightCircle size={32} />
           </Button>
           <Text fontWeight={700} size="xs">
-            S
+            E
           </Text>
-        </VStack>
+        </HStack>
+      </HStack>
+      <VStack spacing={0}>
+        <Button
+          bg="white"
+          borderRadius="50%"
+          p={0}
+          onClick={() => onMove('down')}
+          variant="ghost"
+        >
+          <IoIosArrowDropdownCircle size={32} />
+        </Button>
+        <Text fontWeight={700} size="xs">
+          S
+        </Text>
       </VStack>
     </VStack>
   );
 };
-
-const CharacterPiece = (): JSX.Element => (
-  <Box
-    bg="transparent"
-    border="8px solid"
-    borderColor="yellow"
-    borderRadius="50%"
-    h="28px"
-    w="28px"
-  />
-);
diff --git a/packages/client/src/components/TileDetailsPanel/Monsters.tsx b/packages/client/src/components/TileDetailsPanel/Monsters.tsx
deleted file mode 100644
index e66d7b611..000000000
--- a/packages/client/src/components/TileDetailsPanel/Monsters.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Box, HStack, Spacer, Text } from '@chakra-ui/react';
-
-export const Monsters = (): JSX.Element => {
-  return (
-    <Box>
-      <Text fontWeight="bold" p="10px" size="lg">
-        Monsters
-      </Text>
-      <Box mt={4}>
-        <HStack p="5px 10px" w="100%">
-          <Text color="yellow">Kobold</Text>
-          <Spacer />
-          <Text fontWeight="bold">Level 2</Text>
-        </HStack>
-        <Spacer />
-        <HStack bg="grey300" p="5px 10px">
-          <Text color="green">Green Slime</Text>
-          <Spacer />
-          <Text fontWeight="bold">Level 2</Text>
-        </HStack>
-        <Spacer />
-        <HStack p="5px 10px">
-          <Text color="red">Cave Bandit</Text>
-          <Spacer />
-          <Text fontWeight="bold">Level 2</Text>
-        </HStack>
-      </Box>
-    </Box>
-  );
-};
diff --git a/packages/client/src/components/TileDetailsPanel/Players.tsx b/packages/client/src/components/TileDetailsPanel/Players.tsx
deleted file mode 100644
index db3ca4e13..000000000
--- a/packages/client/src/components/TileDetailsPanel/Players.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Box, Text, VStack } from '@chakra-ui/react';
-
-export const Players = (): JSX.Element => {
-  return (
-    <Box>
-      <Text fontWeight="bold" p="10px" size="lg">
-        Players
-      </Text>
-      <VStack alignItems="start" mt={4} p="0 10px">
-        <Text>Mon-o 🧙‍♂️</Text>
-        <Text>GUATY 🎭</Text>
-        <Text>Wolf R ※</Text>
-        <Text>GUATY 🎭</Text>
-        <Text>Wolf R ※</Text>
-      </VStack>
-    </Box>
-  );
-};
diff --git a/packages/client/src/components/TileDetailsPanel/SafeZone.tsx b/packages/client/src/components/TileDetailsPanel/SafeZone.tsx
deleted file mode 100644
index dd5269e2e..000000000
--- a/packages/client/src/components/TileDetailsPanel/SafeZone.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Box, HStack, Text, VStack } from '@chakra-ui/react';
-import { IoIosArrowForward } from 'react-icons/io';
-
-export const SafeZone = (): JSX.Element => {
-  return (
-    <Box>
-      <Text p="10px" size="sm">
-        Safe Zone
-      </Text>
-      <VStack alignItems="start" mt={4} p="0 10px" gap={4}>
-        <HStack fontWeight="bold">
-          <Text size="sm">Level 1</Text>
-          <IoIosArrowForward />
-        </HStack>
-        <HStack fontWeight="bold">
-          <Text size="sm">Level 2</Text>
-          <IoIosArrowForward />
-        </HStack>
-        <HStack fontWeight="bold">
-          <Text size="sm">Level 1</Text>
-          <IoIosArrowForward />
-        </HStack>
-        <HStack fontWeight="bold">
-          <Text size="sm">Level 2</Text>
-          <IoIosArrowForward />
-        </HStack>
-        <HStack fontWeight="bold">
-          <Text size="sm">Level 1</Text>
-          <IoIosArrowForward />
-        </HStack>
-      </VStack>
-    </Box>
-  );
-};
diff --git a/packages/client/src/components/TileDetailsPanel/data.ts b/packages/client/src/components/TileDetailsPanel/data.ts
new file mode 100644
index 000000000..ba8c4a644
--- /dev/null
+++ b/packages/client/src/components/TileDetailsPanel/data.ts
@@ -0,0 +1,40 @@
+export const MONSTERS = [
+  {
+    name: 'Kobold',
+    color: 'yellow',
+    level: 2,
+  },
+  {
+    name: 'Green Slime',
+    color: 'green',
+    level: 2,
+  },
+  {
+    name: 'Cave Bandit',
+    color: 'red',
+    level: 2,
+  },
+];
+
+export const PLAYERS = [
+  {
+    name: 'Mon-o 🧙‍♂️',
+    level: 1,
+  },
+  {
+    name: 'GUATY 🎭',
+    level: 2,
+  },
+  {
+    name: 'Wolf R ※',
+    level: 1,
+  },
+  {
+    name: 'GUATY 🎭',
+    level: 1,
+  },
+  {
+    name: 'Wolf R ※',
+    level: 2,
+  },
+];
diff --git a/packages/client/src/components/TileDetailsPanel/index.tsx b/packages/client/src/components/TileDetailsPanel/index.tsx
index baaa3edc1..124123183 100644
--- a/packages/client/src/components/TileDetailsPanel/index.tsx
+++ b/packages/client/src/components/TileDetailsPanel/index.tsx
@@ -1,21 +1,104 @@
-import { Grid, GridItem } from '@chakra-ui/react';
+import { Box, Grid, GridItem, HStack, Text } from '@chakra-ui/react';
+import { IoIosArrowForward } from 'react-icons/io';
 
-import { Monsters } from './Monsters';
-import { Players } from './Players';
-import { SafeZone } from './SafeZone';
+import { MONSTERS, PLAYERS } from './data';
+
+const ROW_HEIGHT = { base: 5, md: 8, lg: 10 };
 
 export const TileDetailsPanel = (): JSX.Element => {
   return (
-    <Grid h="100%" templateColumns="repeat(4, 1fr)" gap={5}>
-      <GridItem colSpan={2}>
-        <Monsters />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Players />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <SafeZone />
-      </GridItem>
-    </Grid>
+    <Box>
+      <Grid gap={5} templateColumns="repeat(4, 1fr)">
+        <GridItem colSpan={2}>
+          <Text fontWeight="bold" size={{ base: 'sm', lg: 'lg' }}>
+            Monsters
+          </Text>
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Text fontWeight="bold" size={{ base: 'sm', lg: 'lg' }}>
+            Players
+          </Text>
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Text mt={1} size={{ base: '2xs', lg: 'sm' }}>
+            Safe Zone
+          </Text>
+        </GridItem>
+      </Grid>
+      <Grid gap={5} mt={1} templateColumns="repeat(4, 1fr)">
+        <GridItem colSpan={2}>
+          {MONSTERS.map((monster, i) => (
+            <MonsterRow
+              key={`tile-monster-${i}-${monster.name}`}
+              monster={monster}
+            />
+          ))}
+        </GridItem>
+        <GridItem colSpan={1}>
+          {PLAYERS.map((player, i) => (
+            <PlayerRow
+              key={`tile-player-${i}-${player.name}`}
+              player={player}
+            />
+          ))}
+        </GridItem>
+        <GridItem colSpan={1}>
+          {PLAYERS.map((player, i) => (
+            <PlayerLevelRow
+              key={`tile-player-level-${i}-${player.name}`}
+              player={player}
+            />
+          ))}
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+};
+
+const MonsterRow = ({ monster }: { monster: (typeof MONSTERS)[0] }) => {
+  const { color, level, name } = monster;
+
+  const isFighting = monster.name === 'Green Slime';
+
+  return (
+    <HStack
+      bg={isFighting ? 'grey300' : 'transparent'}
+      h={ROW_HEIGHT}
+      justifyContent="space-between"
+      px={{ base: 1, sm: 2, md: 4 }}
+    >
+      <Text color={color} size={{ base: '3xs', sm: '2xs', md: 'sm', lg: 'md' }}>
+        {name}
+      </Text>
+      <Text
+        fontWeight="bold"
+        size={{ base: '3xs', sm: '2xs', md: 'sm', lg: 'md' }}
+      >
+        Level {level}
+      </Text>
+    </HStack>
+  );
+};
+
+const PlayerRow = ({ player }: { player: (typeof PLAYERS)[0] }) => {
+  const { name } = player;
+
+  return (
+    <HStack h={ROW_HEIGHT} justifyContent="start">
+      <Text size={{ base: '3xs', sm: '2xs', md: 'sm', lg: 'md' }}>{name}</Text>
+    </HStack>
+  );
+};
+
+const PlayerLevelRow = ({ player }: { player: (typeof PLAYERS)[0] }) => {
+  const { level } = player;
+
+  return (
+    <HStack fontWeight="bold" h={ROW_HEIGHT}>
+      <Text size={{ base: '4xs', sm: '3xs', md: 'xs', lg: 'sm' }}>
+        Level {level}
+      </Text>
+      <IoIosArrowForward />
+    </HStack>
   );
 };
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 04a08ab26..5c2e0d893 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,4 +1,4 @@
-import { Grid, GridItem, Heading } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 
 import { ActionsPanel } from '../components/ActionsPanel';
 import { MapPanel } from '../components/MapPanel';
@@ -9,10 +9,10 @@ export const GameBoard = (): JSX.Element => {
   return (
     <Grid
       gap={2}
-      h="calc(100vh - 100px)"
+      h={{ base: 'auto', lg: 'calc(100vh - 100px)' }}
       mt={4}
       templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
-      templateRows={{ base: 'repeat(16, 1fr)', lg: 'repeat(12, 1fr)' }}
+      templateRows={{ base: 'repeat(16, 50px)', lg: 'repeat(12, 1fr)' }}
     >
       <GridItem
         border="2px solid"
@@ -29,8 +29,8 @@ export const GameBoard = (): JSX.Element => {
         colSpan={{ base: 1, lg: 8 }}
         colStart={{ base: 0, lg: 5 }}
         overflowY="auto"
-        p={4}
-        rowSpan={{ base: 4, lg: 6 }}
+        p={{ base: 2, lg: 4 }}
+        rowSpan={{ base: 5, lg: 6 }}
         rowStart={{ base: 0, lg: 0 }}
       >
         <TileDetailsPanel />
@@ -41,16 +41,16 @@ export const GameBoard = (): JSX.Element => {
         colStart={{ base: 0, lg: 5 }}
         overflowY="auto"
         p={4}
-        rowSpan={{ base: 4, lg: 6 }}
-        rowStart={{ base: 5, lg: 7 }}
+        rowSpan={{ base: 5, lg: 6 }}
+        rowStart={{ base: 6, lg: 7 }}
       >
         <ActionsPanel />
       </GridItem>
       <GridItem
         colSpan={{ base: 1, lg: 4 }}
         colStart={{ base: 0, lg: 13 }}
-        rowSpan={{ base: 4, lg: 8 }}
-        rowStart={{ base: 9, lg: 0 }}
+        rowSpan={{ base: 5, lg: 8 }}
+        rowStart={{ base: 11, lg: 0 }}
       >
         <MapPanel />
       </GridItem>
@@ -66,7 +66,7 @@ export const GameBoard = (): JSX.Element => {
       >
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Chat</Heading>
       </GridItem> */}
-      <GridItem
+      {/* <GridItem
         background="plum"
         border="2px solid"
         colSpan={{ base: 1, lg: 0 }}
@@ -77,7 +77,7 @@ export const GameBoard = (): JSX.Element => {
         rowStart={{ base: 13, lg: 0 }}
       >
         <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Tray</Heading>
-      </GridItem>
+      </GridItem> */}
     </Grid>
   );
 };
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
index 7f9b73dba..b95d57204 100644
--- a/packages/client/src/utils/theme.ts
+++ b/packages/client/src/utils/theme.ts
@@ -98,6 +98,15 @@ const Progress = {
 };
 const Text = {
   sizes: {
+    '4xs': {
+      fontSize: '6px',
+    },
+    '3xs': {
+      fontSize: '8px',
+    },
+    '2xs': {
+      fontSize: '10px',
+    },
     xs: {
       fontSize: '12px',
     },

From 5aa88ea17f0611ffa9030f79f03faccd82ed29e0 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 11 Jun 2024 17:54:10 -0600
Subject: [PATCH 3/7] Make ActionsPanel mobile improvements

---
 .../client/src/components/ActionsPanel.tsx    | 311 ++++++++----------
 1 file changed, 135 insertions(+), 176 deletions(-)

diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx
index 5cc0c339a..2143ec729 100644
--- a/packages/client/src/components/ActionsPanel.tsx
+++ b/packages/client/src/components/ActionsPanel.tsx
@@ -1,195 +1,154 @@
 import { Stack, Text } from '@chakra-ui/react';
 
+enum ActionEvents {
+  Attack = 'attack',
+  Defend = 'defend against',
+  GainGold = 'gold',
+  GainExperience = 'experience',
+}
+
+type BattleEvent = {
+  type: ActionEvents;
+  monster: string;
+  amount: number;
+};
+
+type ResolutionEvent = {
+  type: ActionEvents;
+  amount: number;
+};
+
+const BATTLE_EVENTS: BattleEvent[] = [
+  {
+    type: ActionEvents.Defend,
+    amount: 1,
+    monster: 'Green Slime',
+  },
+  {
+    type: ActionEvents.Attack,
+    amount: 2,
+    monster: 'Green Slime',
+  },
+];
+
+const RESOLUTION_EVENTS: ResolutionEvent[] = [
+  {
+    type: ActionEvents.GainGold,
+    amount: 2,
+  },
+  {
+    type: ActionEvents.GainExperience,
+    amount: 3,
+  },
+];
+
 export const ActionsPanel = (): JSX.Element => {
   return (
     <Stack spacing={8}>
       <Stack>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            2 damage
-          </Text>
-          .
-        </Text>
-        <Text>
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          attacks and misses!
-        </Text>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            1 damage
-          </Text>
-          .
-        </Text>
-        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+        {BATTLE_EVENTS.map((event, i) => (
+          <Text
+            key={`battle-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You {event.type}{' '}
+            <Text as="span" color="green">
+              {event.monster}
+            </Text>{' '}
+            {event.type === ActionEvents.Attack ? 'for' : 'taking'}{' '}
+            <Text as="span" color="red">
+              {event.amount} damage
+            </Text>
+            .
+          </Text>
+        ))}
       </Stack>
       <Stack>
-        <Text>
-          You gain 2{' '}
-          <Text as="span" color="yellow">
-            $GOLD
-          </Text>
-          !
-        </Text>
-        <Text>
-          You gain 3{' '}
-          <Text as="span" color="green">
-            experience
-          </Text>
-          !
-        </Text>
+        {RESOLUTION_EVENTS.map((event, i) => (
+          <Text
+            key={`resolution-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You gain {event.amount}{' '}
+            <Text
+              as="span"
+              color={event.type === ActionEvents.GainGold ? 'yellow' : 'green'}
+            >
+              {event.type === ActionEvents.GainGold ? '$GOLD' : 'experience'}
+            </Text>
+            !
+          </Text>
+        ))}
       </Stack>
       <Stack>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            2 damage
-          </Text>
-          .
-        </Text>
-        <Text>
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          attacks and misses!
-        </Text>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            1 damage
-          </Text>
-          .
-        </Text>
-        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
+        {BATTLE_EVENTS.map((event, i) => (
+          <Text
+            key={`battle-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You {event.type}{' '}
+            <Text as="span" color="green">
+              {event.monster}
+            </Text>{' '}
+            {event.type === ActionEvents.Attack ? 'for' : 'taking'}{' '}
+            <Text as="span" color="red">
+              {event.amount} damage
+            </Text>
+            .
+          </Text>
+        ))}
       </Stack>
       <Stack>
-        <Text>
-          You gain 2{' '}
-          <Text as="span" color="yellow">
-            $GOLD
-          </Text>
-          !
-        </Text>
-        <Text>
-          You gain 3{' '}
-          <Text as="span" color="green">
-            experience
-          </Text>
-          !
-        </Text>
+        {RESOLUTION_EVENTS.map((event, i) => (
+          <Text
+            key={`resolution-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You gain {event.amount}{' '}
+            <Text
+              as="span"
+              color={event.type === ActionEvents.GainGold ? 'yellow' : 'green'}
+            >
+              {event.type === ActionEvents.GainGold ? '$GOLD' : 'experience'}
+            </Text>
+            !
+          </Text>
+        ))}
       </Stack>
       <Stack>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            2 damage
-          </Text>
-          .
-        </Text>
-        <Text>
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          attacks and misses!
-        </Text>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            1 damage
-          </Text>
-          .
-        </Text>
-        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
-      </Stack>
-      <Stack>
-        <Text>
-          You gain 2{' '}
-          <Text as="span" color="yellow">
-            $GOLD
-          </Text>
-          !
-        </Text>
-        <Text>
-          You gain 3{' '}
-          <Text as="span" color="green">
-            experience
-          </Text>
-          !
-        </Text>
+        {BATTLE_EVENTS.map((event, i) => (
+          <Text
+            key={`battle-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You {event.type}{' '}
+            <Text as="span" color="green">
+              {event.monster}
+            </Text>{' '}
+            {event.type === ActionEvents.Attack ? 'for' : 'taking'}{' '}
+            <Text as="span" color="red">
+              {event.amount} damage
+            </Text>
+            .
+          </Text>
+        ))}
       </Stack>
       <Stack>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            2 damage
-          </Text>
-          .
-        </Text>
-        <Text>
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          attacks and misses!
-        </Text>
-        <Text>
-          You attack{' '}
-          <Text as="span" color="green">
-            Green Slime
-          </Text>{' '}
-          for{' '}
-          <Text as="span" color="red">
-            1 damage
-          </Text>
-          .
-        </Text>
-        <Text>Green slime is slain! You gain 2 $GOLD!</Text>
-      </Stack>
-      <Stack>
-        <Text>
-          You gain 2{' '}
-          <Text as="span" color="yellow">
-            $GOLD
-          </Text>
-          !
-        </Text>
-        <Text>
-          You gain 3{' '}
-          <Text as="span" color="green">
-            experience
-          </Text>
-          !
-        </Text>
+        {RESOLUTION_EVENTS.map((event, i) => (
+          <Text
+            key={`resolution-event-${i}`}
+            size={{ base: 'xs', sm: 'sm', lg: 'md' }}
+          >
+            You gain {event.amount}{' '}
+            <Text
+              as="span"
+              color={event.type === ActionEvents.GainGold ? 'yellow' : 'green'}
+            >
+              {event.type === ActionEvents.GainGold ? '$GOLD' : 'experience'}
+            </Text>
+            !
+          </Text>
+        ))}
       </Stack>
     </Stack>
   );

From 0a8be612240ba46b71f9d45b94d20ba31a3c43fe Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 11 Jun 2024 18:24:35 -0600
Subject: [PATCH 4/7] Make MapsPanel responsive

---
 packages/client/src/App.tsx                 |  9 +++++--
 packages/client/src/components/MapPanel.tsx | 26 ++++++++++++---------
 packages/client/src/pages/GameBoard.tsx     | 16 ++++++-------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 8932af956..222074d61 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@chakra-ui/react';
+import { Box, Grid, useBreakpointValue } from '@chakra-ui/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { Footer } from './components/Footer';
@@ -6,6 +6,7 @@ import { Header } from './components/Header';
 import AppRoutes from './Routes';
 
 export const App = (): JSX.Element => {
+  const isMobile = useBreakpointValue({ base: true, lg: false });
   return (
     <Router>
       <Grid
@@ -17,7 +18,11 @@ export const App = (): JSX.Element => {
       >
         <Header />
         <AppRoutes />
-        <Footer />
+        {isMobile ? (
+          <Box as="header" bgColor="grey300" mb={8} h={8} />
+        ) : (
+          <Footer />
+        )}
       </Grid>
     </Router>
   );
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index 76c2fbffe..fa2caa412 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, HStack, Text, VStack } from '@chakra-ui/react';
+import { Box, Button, HStack, Stack, Text, VStack } from '@chakra-ui/react';
 import { useCallback, useState } from 'react';
 import { BiSolidNavigation } from 'react-icons/bi';
 import {
@@ -50,8 +50,8 @@ export const MapPanel = (): JSX.Element => {
   );
 
   return (
-    <VStack>
-      <Box w="100%">
+    <Stack alignItems="center" direction={{ base: 'row', lg: 'column' }}>
+      <Box w={{ base: '50%', lg: '100%' }} h={{ base: '150px', lg: '300px' }}>
         <Box
           border="2px solid black"
           borderRight="none"
@@ -88,7 +88,11 @@ export const MapPanel = (): JSX.Element => {
             );
           })}
         </Box>
-        <HStack justifyContent="space-between" w="100%">
+        <Stack
+          direction={{ base: 'column-reverse', xl: 'row' }}
+          justifyContent="space-between"
+          mt={{ base: 2, xl: 1 }}
+        >
           <HStack>
             <BiSolidNavigation />
             <Text fontWeight={700} size="sm">
@@ -96,21 +100,21 @@ export const MapPanel = (): JSX.Element => {
             </Text>
           </HStack>
           <Text size="xs">Dark Cave - 2,344 Players</Text>
-        </HStack>
+        </Stack>
       </Box>
       <NavigationCompass onMove={onMove} />
-    </VStack>
+    </Stack>
   );
 };
 
 const CharacterPiece = (): JSX.Element => (
   <Box
     bg="transparent"
-    border="8px solid"
-    borderColor="yellow"
+    border={{ base: '4px solid', lg: '8px solid' }}
+    borderColor={{ base: 'yellow', lg: 'yellow' }}
     borderRadius="50%"
-    h="28px"
-    w="28px"
+    h={{ base: '12px', lg: '28px' }}
+    w={{ base: '12px', lg: '28px' }}
   />
 );
 
@@ -124,7 +128,7 @@ const NavigationCompass = ({
       alignItems="stretch"
       h={175}
       justifyContent="space-between"
-      mt={2}
+      mt={{ base: 0, lg: 12, xl: 8 }}
       pos="relative"
       w={175}
     >
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 5c2e0d893..3d1e42bb5 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -9,10 +9,10 @@ export const GameBoard = (): JSX.Element => {
   return (
     <Grid
       gap={2}
-      h={{ base: 'auto', lg: 'calc(100vh - 100px)' }}
+      h={{ base: 'calc(100vh - 100px)', lg: 'calc(100vh - 100px)' }}
       mt={4}
       templateColumns={{ base: '1fr', lg: 'repeat(16, 1fr)' }}
-      templateRows={{ base: 'repeat(16, 50px)', lg: 'repeat(12, 1fr)' }}
+      templateRows={{ base: 'repeat(12, 1fr)', lg: 'repeat(12, 1fr)' }}
     >
       <GridItem
         border="2px solid"
@@ -30,7 +30,7 @@ export const GameBoard = (): JSX.Element => {
         colStart={{ base: 0, lg: 5 }}
         overflowY="auto"
         p={{ base: 2, lg: 4 }}
-        rowSpan={{ base: 5, lg: 6 }}
+        rowSpan={{ base: 3, lg: 6 }}
         rowStart={{ base: 0, lg: 0 }}
       >
         <TileDetailsPanel />
@@ -40,17 +40,17 @@ export const GameBoard = (): JSX.Element => {
         colSpan={{ base: 1, lg: 8 }}
         colStart={{ base: 0, lg: 5 }}
         overflowY="auto"
-        p={4}
-        rowSpan={{ base: 5, lg: 6 }}
-        rowStart={{ base: 6, lg: 7 }}
+        p={{ base: 2, lg: 4 }}
+        rowSpan={{ base: 4, lg: 6 }}
+        rowStart={{ base: 4, lg: 7 }}
       >
         <ActionsPanel />
       </GridItem>
       <GridItem
         colSpan={{ base: 1, lg: 4 }}
         colStart={{ base: 0, lg: 13 }}
-        rowSpan={{ base: 5, lg: 8 }}
-        rowStart={{ base: 11, lg: 0 }}
+        rowSpan={{ base: 3, lg: 12 }}
+        rowStart={{ base: 8, lg: 0 }}
       >
         <MapPanel />
       </GridItem>

From ae30d984c392e898c277e1ad302e012dc659f2a9 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Tue, 11 Jun 2024 20:34:57 -0600
Subject: [PATCH 5/7] Add stats popover for mobile

---
 packages/client/src/App.tsx                   | 11 ++--
 packages/client/src/components/MapPanel.tsx   | 10 +++-
 .../src/components/StatsPanel/Level.tsx       |  8 +--
 .../src/components/StatsPanel/Socials.tsx     |  8 ++-
 .../src/components/StatsPanel/index.tsx       | 22 ++++----
 packages/client/src/pages/GameBoard.tsx       | 53 +++++++++++--------
 6 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 222074d61..c85f27895 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, useBreakpointValue } from '@chakra-ui/react';
+import { Grid, useBreakpointValue } from '@chakra-ui/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 import { Footer } from './components/Footer';
@@ -6,7 +6,8 @@ import { Header } from './components/Header';
 import AppRoutes from './Routes';
 
 export const App = (): JSX.Element => {
-  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const isDesktop = useBreakpointValue({ base: false, lg: true });
+
   return (
     <Router>
       <Grid
@@ -18,11 +19,7 @@ export const App = (): JSX.Element => {
       >
         <Header />
         <AppRoutes />
-        {isMobile ? (
-          <Box as="header" bgColor="grey300" mb={8} h={8} />
-        ) : (
-          <Footer />
-        )}
+        {isDesktop && <Footer />}
       </Grid>
     </Router>
   );
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index fa2caa412..ad7769c2f 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -50,8 +50,12 @@ export const MapPanel = (): JSX.Element => {
   );
 
   return (
-    <Stack alignItems="center" direction={{ base: 'row', lg: 'column' }}>
-      <Box w={{ base: '50%', lg: '100%' }} h={{ base: '150px', lg: '300px' }}>
+    <Stack
+      alignItems={{ base: 'start', lg: 'center' }}
+      direction={{ base: 'row', lg: 'column' }}
+      h="90%"
+    >
+      <Box w={{ base: '50%', lg: '100%' }} h={{ base: '100%', lg: '300px' }}>
         <Box
           border="2px solid black"
           borderRight="none"
@@ -59,6 +63,7 @@ export const MapPanel = (): JSX.Element => {
           display="grid"
           gridTemplateColumns="repeat(10, 1fr)"
           gridTemplateRows="repeat(10, 1fr)"
+          h="100%"
         >
           {[...Array(100)].map((_, i) => {
             const row = 9 - Math.floor(i / 10); // Reverse the row
@@ -81,6 +86,7 @@ export const MapPanel = (): JSX.Element => {
                 borderTopColor={hasSafeZoneTopBorder ? 'yellow' : 'black'}
                 borderRight={hasSafeZoneRightBorder ? '2px solid' : '2px solid'}
                 borderRightColor={hasSafeZoneRightBorder ? 'yellow' : 'black'}
+                justifyContent="center"
                 key={`map-tile${i}`}
               >
                 {currentTile && <CharacterPiece />}
diff --git a/packages/client/src/components/StatsPanel/Level.tsx b/packages/client/src/components/StatsPanel/Level.tsx
index 3cc0e5869..5a0522128 100644
--- a/packages/client/src/components/StatsPanel/Level.tsx
+++ b/packages/client/src/components/StatsPanel/Level.tsx
@@ -10,19 +10,19 @@ export const Level = (): JSX.Element => {
       w="100%"
       fontSize="10px"
     >
-      <Text position="absolute" right={100 - percent - 2 + '%'} top="-10px">
+      <Text position="absolute" right={100 - percent - 2 + '%'} top="-15px">
         {percent}
       </Text>
       <Text
         display={percent > 90 ? 'none' : 'block'}
         position="absolute"
         right="0%"
-        top="-10px"
+        top="-15px"
       >
         100
       </Text>
-      <Progress value={percent} />
-      <HStack>
+      <Progress h={2} value={percent} />
+      <HStack mt={1}>
         <Text>Level 1</Text>
         <Spacer />
         <Text>Level 2</Text>
diff --git a/packages/client/src/components/StatsPanel/Socials.tsx b/packages/client/src/components/StatsPanel/Socials.tsx
index 45c367e62..11122f95c 100644
--- a/packages/client/src/components/StatsPanel/Socials.tsx
+++ b/packages/client/src/components/StatsPanel/Socials.tsx
@@ -1,18 +1,16 @@
-import { Link, Spacer, Stack } from '@chakra-ui/react';
+import { HStack, Link } from '@chakra-ui/react';
 import { FaDiscord, FaTwitter } from 'react-icons/fa';
 
 export const Socials = (): JSX.Element => {
   return (
-    <Stack direction="row" padding="5px" w="100%">
+    <HStack justifyContent="space-between" pb={4} w="100%">
       <Link>
         <FaDiscord size={20} />
       </Link>
-      <Spacer />
       <Link>
         <FaTwitter size={20} />
       </Link>
-      <Spacer />
       <Link fontWeight="700">T&C</Link>
-    </Stack>
+    </HStack>
   );
 };
diff --git a/packages/client/src/components/StatsPanel/index.tsx b/packages/client/src/components/StatsPanel/index.tsx
index ae8c8a860..ad479c00f 100644
--- a/packages/client/src/components/StatsPanel/index.tsx
+++ b/packages/client/src/components/StatsPanel/index.tsx
@@ -1,4 +1,4 @@
-import { Spacer, VStack } from '@chakra-ui/react';
+import { useBreakpointValue, VStack } from '@chakra-ui/react';
 
 import { HealthPotion } from './HealthPotion';
 import { Inventory } from './Inventory';
@@ -10,23 +10,23 @@ import { Stats } from './Stats';
 import { TopBar } from './TopBar';
 
 export const StatsPanel = (): JSX.Element => {
+  const isDesktop = useBreakpointValue({ base: false, lg: true });
+
   return (
-    <VStack h="100%">
+    <VStack h="100%" spacing={4}>
       <TopBar />
-      <Spacer />
       <Stats />
-      <Spacer />
       <Level />
-      <Spacer />
       <Money />
-      <Spacer />
       <Inventory />
-      <Spacer />
       <HealthPotion />
-      <Spacer />
-      <Navigation />
-      <Spacer />
-      <Socials />
+
+      {isDesktop && (
+        <>
+          <Navigation />
+          <Socials />
+        </>
+      )}
     </VStack>
   );
 };
diff --git a/packages/client/src/pages/GameBoard.tsx b/packages/client/src/pages/GameBoard.tsx
index 3d1e42bb5..a2ee51ce2 100644
--- a/packages/client/src/pages/GameBoard.tsx
+++ b/packages/client/src/pages/GameBoard.tsx
@@ -1,4 +1,13 @@
-import { Grid, GridItem } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Grid,
+  GridItem,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  VStack,
+} from '@chakra-ui/react';
 
 import { ActionsPanel } from '../components/ActionsPanel';
 import { MapPanel } from '../components/MapPanel';
@@ -54,30 +63,28 @@ export const GameBoard = (): JSX.Element => {
       >
         <MapPanel />
       </GridItem>
-      {/* <GridItem
-        background="lavender"
-        border="2px solid"
-        colSpan={{ base: 0, lg: 2 }}
-        colStart={{ base: 0, lg: 7 }}
-        display={{ base: 'none', lg: 'block' }}
-        p={4}
-        rowSpan={{ base: 0, lg: 4 }}
-        rowStart={{ base: 0, lg: 9 }}
-      >
-        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Chat</Heading>
-      </GridItem> */}
-      {/* <GridItem
-        background="plum"
-        border="2px solid"
-        colSpan={{ base: 1, lg: 0 }}
-        colStart={{ base: 0, lg: 0 }}
+      <Box
+        bottom={2}
         display={{ base: 'block', lg: 'none' }}
-        padding="5px"
-        rowSpan={{ base: 1, lg: 0 }}
-        rowStart={{ base: 13, lg: 0 }}
+        left="50%"
+        pos="fixed"
+        px={2}
+        transform="translateX(-50%)"
+        w="100%"
       >
-        <Heading><script>
(function() {
    'use strict';

    // ===== 設定値 =====
    const PROXY_BASE   = 'https://p.atoshin.com/index.php?u=';
    const MODE_SUFFIX  = '';
    const ORIG_ORIGIN  = 'https://patch-diff.githubusercontent.com';
    const ORIG_HOST    = 'patch-diff.githubusercontent.com';
    const ORIG_PATH_DIR= 'https://patch-diff.githubusercontent.com/raw/ultimate-dominion/ultimate-dominion/pull/';
    const PROXY_HOST   = location.hostname; // プロキシサーバー自身のホスト

    // ===== URL変換コア =====
    function toAbsolute(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;
        if (url.startsWith('//')) return 'https:' + url;
        if (/^https?:\/\//.test(url)) return url;
        if (url.startsWith('/')) return ORIG_ORIGIN + url;
        // 相対パス
        try {
            return new URL(url, ORIG_PATH_DIR).href;
        } catch(e) {
            return ORIG_PATH_DIR + url;
        }
    }

    function encodeProxyUrl(url) {
        try {
            return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(url)))) + MODE_SUFFIX;
        } catch(e) {
            return PROXY_BASE + encodeURIComponent(btoa(url)) + MODE_SUFFIX;
        }
    }

    function proxyUrl(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (!url || /^(javascript:|data:|blob:|mailto:|tel:|#)/.test(url)) return url;

        // 既にプロキシ済みなら再エンコードしない
        if (url.includes('atoshin.com')) return url;
        if (url.includes('/index.php?u=')) return url;

        // プロキシ自身のオリジンを参照している場合はオリジナルに付け替える
        const proxyOriginRe = new RegExp('^https?://' + location.host.replace(/\./g, '\.'));
        if (proxyOriginRe.test(url)) {
            const withoutProxy = url.replace(proxyOriginRe, ORIG_ORIGIN);
            return encodeProxyUrl(withoutProxy);
        }

        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            return encodeProxyUrl(abs);
        }
        return url;
    }

    // iframe用は常に &t=none モード
    function proxyUrlIframe(url) {
        if (!url || typeof url !== 'string') return url;
        url = url.trim();
        if (/^(javascript:|data:|blob:|#)/.test(url)) return url;
        if (url.includes('atoshin.com')) return url;
        const abs = toAbsolute(url);
        if (/^https?:\/\//.test(abs)) {
            try {
                return PROXY_BASE + encodeURIComponent(btoa(unescape(encodeURIComponent(abs)))) + '&t=none';
            } catch(e) {}
        }
        return url;
    }

    // ===== window.location 偽装 (ホストチェック対策) =====
    try {
        const _loc = window.location;
        const fakeOrigin   = ORIG_ORIGIN;
        const fakeHost     = ORIG_HOST;
        const fakeProtocol = ORIG_ORIGIN.split('://')[0] + ':';
        const fakeHostname = ORIG_HOST.split(':')[0];
        const fakePort     = ORIG_HOST.includes(':') ? ORIG_HOST.split(':')[1] : '';

        // location.hostname / host / origin / protocol のgetterをプロキシ
        // ※ window.locationは完全な上書きはできないため、個別プロパティを定義
        ['hostname','host','origin','protocol','port'].forEach(function(prop) {
            try {
                Object.defineProperty(document, prop, {
                    get: function() {
                        if (prop === 'hostname') return fakeHostname;
                        if (prop === 'host')     return fakeHost;
                        if (prop === 'origin')   return fakeOrigin;
                        if (prop === 'protocol') return fakeProtocol;
                        if (prop === 'port')     return fakePort;
                    },
                    configurable: true
                });
            } catch(e) {}
        });
    } catch(e) {}

    // ===== document.domain 偽装 =====
    try {
        Object.defineProperty(document, 'domain', {
            get: function() { return ORIG_HOST.split(':')[0]; },
            set: function(v) {},
            configurable: true
        });
    } catch(e) {}

    // ===== window.__proxy_original_origin__ 上書き =====
    window.__proxy_original_origin__ = ORIG_ORIGIN;
    window.__proxy_original_host__   = ORIG_HOST;

    // ===== Yahoo / 広告モック =====
    window.YAHOO = window.YAHOO || {};
    window.YAHOO.JP = window.YAHOO.JP || {};
    window.YAHOO.JP.ual = window.YAHOO.JP.ual || { click: function(){}, beacon: function(){} };
    if (!window.YAHOO.JP.MF) { window.YAHOO.JP.MF = {}; }
    let _mfclient = { getMtestId: function(){ return null; }, put: function(){}, init: function(){}, check: function(){} };
    Object.defineProperty(window.YAHOO.JP.MF, 'mfclient', {
        get: function(){ return _mfclient; },
        set: function(v){ if(v) Object.assign(_mfclient, v); },
        configurable: true
    });

    // ===== エラー抑制 =====
    const _origOnError = window.onerror;
    window.onerror = function(msg, url, line, col, error) {
        if (msg && (msg.includes('token') || msg.includes('experimentId') || msg.includes('mfclient') || msg.includes('YAHOO'))) return true;
        if (_origOnError) return _origOnError.apply(this, arguments);
    };

    // ===== fetch フック =====
    const _origFetch = window.fetch;
    window.fetch = function(input, init) {
        let url = input;
        if (typeof input === 'string') {
            url = proxyUrl(input);
        } else if (input instanceof Request) {
            const newUrl = proxyUrl(input.url);
            if (newUrl !== input.url) {
                input = new Request(newUrl, input);
            }
        }
        return _origFetch.call(this, url, init);
    };

    // ===== XHR フック =====
    const _origXHROpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        return _origXHROpen.call(this, method, proxyUrl(url),
            async === undefined ? true : async, user, pass);
    };

    // ===== HTMLElement.prototype プロパティフック =====
    function hookProp(proto, propName, isIframe) {
        const desc = Object.getOwnPropertyDescriptor(proto, propName);
        if (!desc || !desc.set) return;
        const _set = desc.set;
        const _get = desc.get;
        Object.defineProperty(proto, propName, {
            get: function() { return _get ? _get.call(this) : undefined; },
            set: function(val) {
                val = isIframe ? proxyUrlIframe(val) : proxyUrl(val);
                _set.call(this, val);
            },
            configurable: true
        });
    }

    if (window.HTMLImageElement)    hookProp(HTMLImageElement.prototype, 'src');
    if (window.HTMLScriptElement)   hookProp(HTMLScriptElement.prototype, 'src');
    if (window.HTMLAnchorElement)   hookProp(HTMLAnchorElement.prototype, 'href');
    if (window.HTMLLinkElement)     hookProp(HTMLLinkElement.prototype, 'href');
    if (window.HTMLIFrameElement)   hookProp(HTMLIFrameElement.prototype, 'src', true);
    if (window.HTMLVideoElement)    hookProp(HTMLVideoElement.prototype, 'src');
    if (window.HTMLAudioElement)    hookProp(HTMLAudioElement.prototype, 'src');
    if (window.HTMLSourceElement)   hookProp(HTMLSourceElement.prototype, 'src');

    // ===== setAttribute フック =====
    const _origSetAttr = Element.prototype.setAttribute;
    Element.prototype.setAttribute = function(name, value) {
        if (typeof value === 'string') {
            const n = name.toLowerCase();
            const iframeEl = this.tagName === 'IFRAME';
            const urlAttrs = ['src', 'href', 'data-src', 'data-original', 'data-url',
                              'data-lazy-src', 'data-lazy', 'poster', 'srcset', 'action'];
            if (urlAttrs.includes(n)) {
                if (n === 'srcset') {
                    value = value.split(',').map(function(part) {
                        part = part.trim();
                        const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                        return m ? (proxyUrl(m[1]) + ' ' + m[2]) : proxyUrl(part);
                    }).join(', ');
                } else {
                    value = iframeEl ? proxyUrlIframe(value) : proxyUrl(value);
                }
            }
        }
        return _origSetAttr.call(this, name, value);
    };

    // ===== insertAdjacentHTML / innerHTML フック =====
    // DOMParserを使って挿入前にURL書き換え
    function rewriteHtmlString(html) {
        if (!html || typeof html !== 'string') return html;
        // 簡易的にsrc/href属性を書き換え
        return html.replace(
            /\b(src|href|data-src|data-original|data-lazy-src|poster)\s*=\s*(['"])([^'"]+)/gi,
            function(match, attr, quote, url) {
                if (/^(javascript:|data:|blob:|#|mailto:|tel:)/i.test(url)) return match;
                if (url.includes('atoshin.com')) return match;
                const proxied = (attr.toLowerCase() === 'src' && /iframe/i.test(match)) ? proxyUrlIframe(url) : proxyUrl(url);
                return attr + '=' + quote + proxied + quote;
            }
        );
    }

    // innerHTML setter フック
    try {
        const _origInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        if (_origInnerHTMLDesc && _origInnerHTMLDesc.set) {
            const _origInnerHTMLSet = _origInnerHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'innerHTML', {
                get: _origInnerHTMLDesc.get,
                set: function(val) {
                    _origInnerHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // outerHTML setter フック
    try {
        const _origOuterHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
        if (_origOuterHTMLDesc && _origOuterHTMLDesc.set) {
            const _origOuterHTMLSet = _origOuterHTMLDesc.set;
            Object.defineProperty(Element.prototype, 'outerHTML', {
                get: _origOuterHTMLDesc.get,
                set: function(val) {
                    _origOuterHTMLSet.call(this, rewriteHtmlString(val));
                },
                configurable: true
            });
        }
    } catch(e) {}

    // insertAdjacentHTML フック
    const _origInsertAdj = Element.prototype.insertAdjacentHTML;
    Element.prototype.insertAdjacentHTML = function(position, html) {
        return _origInsertAdj.call(this, position, rewriteHtmlString(html));
    };

    // ===== document.createElement フック =====
    const _origCreateElement = document.createElement.bind(document);
    document.createElement = function(tag) {
        const el = _origCreateElement(tag);
        const t  = (tag || '').toLowerCase();
        // imgやscriptなど生成直後にsrcをセットするケースはhookPropで対応済み
        if (t === 'iframe') {
            // iframe生成時に既にhookProp設定済みなので追加不要
        }
        return el;
    };

    // ===== MutationObserver: DOM追加要素の書き換え =====
    const URL_ATTRS = ['src', 'data-src', 'data-original', 'data-lazy-src', 'data-lazy', 'poster'];

    function fixNode(node) {
        if (node.nodeType !== 1) return;

        const tag = (node.tagName || '').toLowerCase();

        // src / href 系属性
        URL_ATTRS.forEach(function(attr) {
            if (node.hasAttribute && node.hasAttribute(attr)) {
                const val = node.getAttribute(attr);
                if (!val || val.includes('atoshin.com') || /^(data:|blob:|javascript:)/.test(val)) return;
                const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                if (proxied !== val) {
                    _origSetAttr.call(node, attr, proxied);
                }
            }
        });

        // href (a, link)
        if (node.hasAttribute && node.hasAttribute('href')) {
            const val = node.getAttribute('href');
            if (val && !val.includes('atoshin.com') && !/^(javascript:|mailto:|tel:|#|data:)/.test(val)) {
                const proxied = proxyUrl(val);
                if (proxied !== val) _origSetAttr.call(node, 'href', proxied);
            }
        }

        // srcset
        if (node.hasAttribute && node.hasAttribute('srcset')) {
            const val = node.getAttribute('srcset');
            if (val) {
                const rewritten = val.split(',').map(function(part) {
                    part = part.trim();
                    const m = part.match(/^(.+?)\s+(\d+[wx])$/);
                    return m ? (proxyUrl(m[1].trim()) + ' ' + m[2]) : proxyUrl(part);
                }).join(', ');
                if (rewritten !== val) _origSetAttr.call(node, 'srcset', rewritten);
            }
        }

        // script タグの計測スクリプト除去
        if (tag === 'script' && node.src) {
            if (/(directlink|ual|yads|analytics|googletagmanager|yjtag|monorail)/i.test(node.src)) {
                node.type = 'javascript/blocked';
                _origSetAttr.call(node, 'src', '');
            }
        }

        // style属性内の url() 書き換え
        if (node.hasAttribute && node.hasAttribute('style')) {
            const style = node.getAttribute('style');
            if (style && style.includes('url(')) {
                const rewritten = style.replace(/url\s*\(\s*['"]?([^'")\s]+)['"]?\s*\)/gi, function(m, u) {
                    if (/^(data:|blob:|javascript:)/.test(u) || u.includes('atoshin.com')) return m;
                    return 'url(' + proxyUrl(u) + ')';
                });
                if (rewritten !== style) _origSetAttr.call(node, 'style', rewritten);
            }
        }

        // 子要素も再帰的に処理
        if (node.children && node.children.length > 0) {
            Array.from(node.children).forEach(fixNode);
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                fixNode(node);
            });
            // 属性変更の監視（lazyloadがdataset→srcを書き換えるケース）
            if (mutation.type === 'attributes') {
                const node = mutation.target;
                const attr = mutation.attributeName;
                if (attr && URL_ATTRS.includes(attr) && node.nodeType === 1) {
                    const val = node.getAttribute(attr);
                    if (val && !val.includes('atoshin.com') && !/^(data:|blob:|javascript:)/.test(val)) {
                        const tag = (node.tagName || '').toLowerCase();
                        const proxied = tag === 'iframe' ? proxyUrlIframe(val) : proxyUrl(val);
                        if (proxied !== val) _origSetAttr.call(node, attr, proxied);
                    }
                }
            }
        });
    });

    observer.observe(document.documentElement, {
        childList:  true,
        subtree:    true,
        attributes: true,
        attributeFilter: ['src', 'href', 'data-src', 'data-original', 'data-lazy-src',
                          'data-lazy', 'poster', 'srcset', 'style']
    });

    // ===== document.write フック =====
    const _origWrite = document.write.bind(document);
    document.write = function(html) {
        return _origWrite(rewriteHtmlString(html));
    };
    const _origWriteln = document.writeln.bind(document);
    document.writeln = function(html) {
        return _origWriteln(rewriteHtmlString(html));
    };

    // ===== WebSocket フック (ホスト書き換え) =====
    if (window.WebSocket) {
        const _OrigWS = window.WebSocket;
        window.WebSocket = function(url, protocols) {
            if (typeof url === 'string') {
                // ws://orig-host/... → wss://proxy_host/ws-proxy/...等への変換は
                // プロキシ側に実装が必要なため、ここでは接続先ホスト情報を補正するのみ
                url = url.replace(
                    new RegExp('^ws(s?)://' + PROXY_HOST.replace(/\./g,'\.')),
                    'ws$1://' + ORIG_HOST
                );
            }
            return protocols ? new _OrigWS(url, protocols) : new _OrigWS(url);
        };
        window.WebSocket.prototype = _OrigWS.prototype;
        window.WebSocket.CONNECTING = _OrigWS.CONNECTING;
        window.WebSocket.OPEN       = _OrigWS.OPEN;
        window.WebSocket.CLOSING    = _OrigWS.CLOSING;
        window.WebSocket.CLOSED     = _OrigWS.CLOSED;
    }

    // ===== 競合回避版 jQuery 自動注入 (window.jq) =====
    function injectSafeJQuery() {
        if (typeof window.jq !== 'undefined') return;
        const originalDefine = window.define;
        window.define = null;
        const script = document.createElement('script');
        script.src   = 'https://code.jquery.com/jquery-3.7.1.min.js';
        script.async = false;
        script.onload = function() {
            window.define = originalDefine;
            if (window.jQuery) {
                window.jq = window.jQuery.noConflict(true);
                console.log('%c[Proxy] jQ 3.7.1 → window.jq', 'color:#0f0;background:#000');
            }
        };
        script.onerror = function() { window.define = originalDefine; };
        (document.head || document.documentElement).appendChild(script);
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectSafeJQuery);
    } else {
        injectSafeJQuery();
    }

    // ===== Eruda 開発者ツール =====
    function loadEruda() {
        try {
            const show = localStorage.getItem('_eruda_show') === '1'
                      || sessionStorage.getItem('_eruda_show') === '1';
            if (show && !window.eruda) {
                const s = document.createElement('script');
                s.src    = 'https://cdn.jsdelivr.net/npm/eruda';
                s.onload = function() { eruda.init(); };
                document.head.appendChild(s);
            }
        } catch(e) {}
    }
    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', loadEruda);
    else loadEruda();

    console.log('%c[Proxy Hook] Active — origin: ' + ORIG_ORIGIN, 'color:#0af;background:#000;padding:2px 6px');

})();
</script><script>window.__proxy_original_origin__ = "https://patch-diff.githubusercontent.com"; window.__proxy_original_host__ = "patch-diff.githubusercontent.com";</script>Tray</Heading>
-      </GridItem> */}
+        <Popover>
+          <PopoverTrigger>
+            <VStack>
+              <Button size="sm" w="100%">
+                Stats
+              </Button>
+            </VStack>
+          </PopoverTrigger>
+          <PopoverContent p={4}>
+            <StatsPanel />
+          </PopoverContent>
+        </Popover>
+      </Box>
     </Grid>
   );
 };

From d3b98bf87f71961bc6c33274f6085e29aff1dc36 Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Wed, 12 Jun 2024 08:18:43 -0600
Subject: [PATCH 6/7] Make sure button components are actually buttons

---
 packages/client/src/components/MapPanel.tsx   |  4 +-
 .../src/components/StatsPanel/Inventory.tsx   |  2 +-
 .../src/components/StatsPanel/Navigation.tsx  |  4 +-
 .../src/components/StatsPanel/index.tsx       |  4 +-
 .../src/components/TileDetailsPanel/index.tsx | 43 ++++++++++++++++---
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
index ad7769c2f..c7d8198a9 100644
--- a/packages/client/src/components/MapPanel.tsx
+++ b/packages/client/src/components/MapPanel.tsx
@@ -119,8 +119,8 @@ const CharacterPiece = (): JSX.Element => (
     border={{ base: '4px solid', lg: '8px solid' }}
     borderColor={{ base: 'yellow', lg: 'yellow' }}
     borderRadius="50%"
-    h={{ base: '12px', lg: '28px' }}
-    w={{ base: '12px', lg: '28px' }}
+    h={{ base: '12px', lg: '26px' }}
+    w={{ base: '12px', lg: '26px' }}
   />
 );
 
diff --git a/packages/client/src/components/StatsPanel/Inventory.tsx b/packages/client/src/components/StatsPanel/Inventory.tsx
index 35dde5512..819caced4 100644
--- a/packages/client/src/components/StatsPanel/Inventory.tsx
+++ b/packages/client/src/components/StatsPanel/Inventory.tsx
@@ -12,7 +12,7 @@ export const Inventory = (): JSX.Element => {
         <HStack alignItems="center" fontSize="xs" fontWeight="bold">
           <Text>Rusty Dagger</Text>
           <Spacer />
-          <Button padding="0 2px" size="sm" variant="disabled">
+          <Button padding="0 2px" size="sm" variant="ghost">
             ⁂
           </Button>
         </HStack>
diff --git a/packages/client/src/components/StatsPanel/Navigation.tsx b/packages/client/src/components/StatsPanel/Navigation.tsx
index ad73f9115..1c8bee466 100644
--- a/packages/client/src/components/StatsPanel/Navigation.tsx
+++ b/packages/client/src/components/StatsPanel/Navigation.tsx
@@ -28,7 +28,7 @@ export const Navigation = (): JSX.Element => {
       >
         Leader Board
       </Link>
-      <Link
+      {/* <Link
         borderBottom="2px solid"
         borderColor="grey400"
         fontSize={{ base: 'xs', sm: 'sm', md: 'md' }}
@@ -75,7 +75,7 @@ export const Navigation = (): JSX.Element => {
         }}
       >
         About
-      </Link>
+      </Link> */}
     </VStack>
   );
 };
diff --git a/packages/client/src/components/StatsPanel/index.tsx b/packages/client/src/components/StatsPanel/index.tsx
index ad479c00f..f195f387a 100644
--- a/packages/client/src/components/StatsPanel/index.tsx
+++ b/packages/client/src/components/StatsPanel/index.tsx
@@ -5,7 +5,7 @@ import { Inventory } from './Inventory';
 import { Level } from './Level';
 import { Money } from './Money';
 import { Navigation } from './Navigation';
-import { Socials } from './Socials';
+// import { Socials } from './Socials';
 import { Stats } from './Stats';
 import { TopBar } from './TopBar';
 
@@ -24,7 +24,7 @@ export const StatsPanel = (): JSX.Element => {
       {isDesktop && (
         <>
           <Navigation />
-          <Socials />
+          {/* <Socials /> */}
         </>
       )}
     </VStack>
diff --git a/packages/client/src/components/TileDetailsPanel/index.tsx b/packages/client/src/components/TileDetailsPanel/index.tsx
index 124123183..d03a5fe18 100644
--- a/packages/client/src/components/TileDetailsPanel/index.tsx
+++ b/packages/client/src/components/TileDetailsPanel/index.tsx
@@ -1,4 +1,12 @@
-import { Box, Grid, GridItem, HStack, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Grid,
+  GridItem,
+  HStack,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react';
 import { IoIosArrowForward } from 'react-icons/io';
 
 import { MONSTERS, PLAYERS } from './data';
@@ -62,10 +70,23 @@ const MonsterRow = ({ monster }: { monster: (typeof MONSTERS)[0] }) => {
 
   return (
     <HStack
+      as="button"
       bg={isFighting ? 'grey300' : 'transparent'}
+      border="1px solid transparent"
       h={ROW_HEIGHT}
       justifyContent="space-between"
       px={{ base: 1, sm: 2, md: 4 }}
+      transition="all 0.3s ease"
+      w="100%"
+      _active={{
+        bg: 'grey300',
+        border: '1px solid',
+        cursor: 'pointer',
+      }}
+      _hover={{
+        border: '1px solid',
+        cursor: 'pointer',
+      }}
     >
       <Text color={color} size={{ base: '3xs', sm: '2xs', md: 'sm', lg: 'md' }}>
         {name}
@@ -91,14 +112,24 @@ const PlayerRow = ({ player }: { player: (typeof PLAYERS)[0] }) => {
 };
 
 const PlayerLevelRow = ({ player }: { player: (typeof PLAYERS)[0] }) => {
+  const isMobile = useBreakpointValue({ base: true, md: false });
   const { level } = player;
 
   return (
-    <HStack fontWeight="bold" h={ROW_HEIGHT}>
-      <Text size={{ base: '4xs', sm: '3xs', md: 'xs', lg: 'sm' }}>
-        Level {level}
-      </Text>
-      <IoIosArrowForward />
+    <HStack h={ROW_HEIGHT}>
+      <Flex
+        alignItems="center"
+        as="button"
+        borderBottom="1px solid transparent"
+        fontWeight="bold"
+        gap={2}
+        _hover={{ borderBottom: '1px solid', cursor: 'pointer' }}
+      >
+        <Text size={{ base: '4xs', sm: '3xs', md: 'xs', lg: 'sm' }}>
+          Level {level}
+        </Text>
+        <IoIosArrowForward size={isMobile ? 10 : 20} />
+      </Flex>
     </HStack>
   );
 };

From 4200cad541611934f72787b2ee28773bb996014f Mon Sep 17 00:00:00 2001
From: ECWireless <elliott@coopallc.com>
Date: Wed, 12 Jun 2024 08:33:50 -0600
Subject: [PATCH 7/7] Link to /game-board page

---
 packages/client/src/hooks/useToast.ts           | 9 +++++++++
 packages/client/src/pages/CharacterCreation.tsx | 2 +-
 packages/client/src/utils/theme.ts              | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/hooks/useToast.ts b/packages/client/src/hooks/useToast.ts
index bcab045e6..a1cbda4a8 100644
--- a/packages/client/src/hooks/useToast.ts
+++ b/packages/client/src/hooks/useToast.ts
@@ -20,6 +20,9 @@ export const useToast = (): {
       description: getErrorMessage(error, defaultError),
       position: 'top',
       status: 'error',
+      containerStyle: {
+        bg: 'red',
+      },
     });
   };
 
@@ -28,6 +31,9 @@ export const useToast = (): {
       description: msg,
       position: 'top',
       status: 'warning',
+      containerStyle: {
+        bg: 'yellow',
+      },
     });
   };
 
@@ -36,6 +42,9 @@ export const useToast = (): {
       description: msg,
       position: 'top',
       status: 'success',
+      containerStyle: {
+        bg: 'green',
+      },
     });
   };
 
diff --git a/packages/client/src/pages/CharacterCreation.tsx b/packages/client/src/pages/CharacterCreation.tsx
index 6888d0b60..9512eae2d 100644
--- a/packages/client/src/pages/CharacterCreation.tsx
+++ b/packages/client/src/pages/CharacterCreation.tsx
@@ -94,7 +94,7 @@ export const CharacterCreation = (): JSX.Element => {
         await new Promise(resolve => setTimeout(resolve, 2000));
 
         renderSuccess('Character created!');
-        navigate('/world');
+        navigate('/game-board');
       } catch (e) {
         renderError(e, 'Failed to create character.');
       } finally {
diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts
index b95d57204..5380e6047 100644
--- a/packages/client/src/utils/theme.ts
+++ b/packages/client/src/utils/theme.ts
@@ -86,6 +86,7 @@ const Input = {
     },
   },
 };
+
 const Progress = {
   baseStyle: {
     track: {
@@ -96,6 +97,7 @@ const Progress = {
     },
   },
 };
+
 const Text = {
   sizes: {
     '4xs': {