/* ODA 110 | Mobile UX & readability refinement
 * Final stylesheet: site-wide navigation and narrowly scoped component fixes.
 * Avoid applying generic yellow button styles to action links.
 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:auto}
button{touch-action:manipulation}
:where(button,a,input,textarea,select):focus-visible{
 outline:3px solid #80e7d8!important;outline-offset:2px
}
.hidden{display:none!important}

/* Consistent UI sizing and density. Do not overwrite game-specific colors. */
.tab-panel{min-width:0}
.tab-panel :where(.forum-box,.result,.cup-match,.shop-card,.member-search-result){
 overflow-wrap:anywhere
}
.tab-panel :where(h2,h3){line-height:1.27}
#forumTab :is(.forum-box,.result){
 background:#122c40!important;
 color:#f1f7fb!important;
 border:1px solid #3b647a!important;
 border-radius:15px!important;
 box-shadow:0 5px 15px rgba(1,13,26,.18)!important;
 padding:14px!important;
 margin:11px 0!important;
 overflow:hidden;
}
#forumTab #forumThreads{display:grid;gap:12px}
#forumTab #forumThreads>.forum-box{margin:0!important}
#forumTab #forumThreads>.forum-box:focus-within{border-color:#6cbab0!important}
#forumTab .forum-author-row{
 display:flex!important;flex-wrap:nowrap!important;
 align-items:center!important;gap:10px!important;
 margin:0 0 9px!important;min-width:0!important
}
#forumTab .forum-author-info{
 display:flex;flex-direction:column;gap:2px;min-width:0;flex:1
}
#forumTab .forum-author-avatar{
 width:40px!important;height:40px!important;min-width:40px!important;
 background:#223d50!important;border-radius:50%!important;
 border:2px solid #ab9866!important;
 flex-shrink:0;font-size:21px!important
}
#forumTab button.forum-author-link,
#forumTab .forum-box button.forum-author-link,
#forumTab .result button.forum-author-link{
 display:inline-flex!important;align-items:center!important;gap:5px;
 width:auto!important;max-width:100%!important;min-height:unset!important;
 background:transparent!important;background-image:none!important;
 color:#ffe3a0!important;-webkit-text-fill-color:#ffe3a0!important;
 border:0!important;box-shadow:none!important;
 padding:2px 0!important;margin:0!important;border-radius:3px!important;
 font-size:14px!important;font-weight:900!important;line-height:1.25!important;
 text-align:left!important;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#forumTab button.forum-author-link:hover{text-decoration:underline!important}
#forumTab .forum-author-date{
 display:block!important;color:#c6d8e5!important;
 -webkit-text-fill-color:#c6d8e5!important;
 font-size:11px!important;font-weight:500!important;line-height:1.35!important;
 white-space:normal!important
}
#forumTab .forum-message{
 font-size:14px!important;line-height:1.6!important;
 color:#eaf2f8!important;-webkit-text-fill-color:#eaf2f8!important;
 white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%
}
#forumTab .forum-message:empty{display:none}
#forumTab .forum-box>a:has(img),#forumTab .result>a:has(img){
 max-width:100%;border-radius:11px;overflow:hidden
}
#forumTab .forum-box>a img,#forumTab .result>a img{
 width:auto!important;max-width:100%!important;height:auto!important;
 max-height:320px!important;object-fit:contain!important;
 border-radius:11px!important;background:#071a28
}
#forumTab .forum-box video,#forumTab .result video{
 width:100%!important;max-width:560px!important;
 max-height:320px!important;object-fit:contain;border-radius:11px
}
#forumTab .forum-actions{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important;margin:11px 0 0!important}
#forumTab button.forum-reply-button,
#forumTab button.forum-delete-button,
#forumTab button.forum-more-button,
#forumTab button.forum-reply-send{
 display:inline-flex!important;justify-content:center!important;align-items:center!important;
 width:auto!important;max-width:100%!important;min-height:37px!important;
 margin:0!important;padding:8px 12px!important;
 font:800 12px/1.25 system-ui,-apple-system,sans-serif!important;
 letter-spacing:0!important;white-space:nowrap!important;
 text-align:center!important;
 box-shadow:none!important;border-radius:9px!important
}
#forumTab button.forum-reply-button,
#forumTab button.forum-more-button{
 color:#e8f8fb!important;-webkit-text-fill-color:#e8f8fb!important;
 background:#214c62!important;background-image:none!important;
 border:1px solid #5e92a5!important
}
#forumTab button.forum-reply-button:hover,
#forumTab button.forum-more-button:hover{background:#326278!important}
#forumTab button.forum-delete-button{
 color:#ffe8e6!important;-webkit-text-fill-color:#ffe8e6!important;
 background:#512e39!important;border:1px solid #946370!important
}
#forumTab button.forum-reply-send{
 color:#1b2b37!important;-webkit-text-fill-color:#1b2b37!important;
 background:#ffda83!important;border:1px solid #ffe9ae!important
}
#forumTab .reply-list{
 margin:14px 0 0!important;padding:11px 0 0!important;
 border-top:1px solid #385d70!important;
 display:grid;gap:8px
}
#forumTab .reply-list>.result{
 margin:0 0 0 10px!important;padding:11px 12px!important;
 border-left:3px solid #5c98a0!important;
 background:#1a3849!important
}
#forumTab .reply-composer{
 margin:11px 0 3px!important;padding:11px!important;
 background:#1b3a4e;border:1px solid #4a7887;border-radius:12px
}
#forumTab .reply-composer textarea{
 width:100%;min-height:82px;
 background:#eaf4f9!important;color:#11293a!important;
 -webkit-text-fill-color:#11293a!important
}
#forumTab .forum-media-inputs label{color:#fce5ad}
#forumTab #forumComposer>button{
 width:auto!important;min-height:43px!important;
 font-size:13px!important;font-weight:900!important;
 padding:10px 16px!important;
 background:#ffd576!important;color:#192d3a!important;
 -webkit-text-fill-color:#192d3a!important
}
#forumTab .forum-load-more{display:flex;justify-content:center;padding:10px 0 15px}

/* Default top nav stays on wide screens. Mobile uses short main bar and "More" sheet. */
.mobile-bottom-nav,.mobile-more-menu,.mobile-menu-backdrop,.section-toolbar{
 display:none
}
@media(max-width:670px){
 :root{scroll-padding-top:15px}
 .site-top>.nav-tabs,.site-top>.nav-scroll-hint{display:none!important}
 .mobile-bottom-nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:7px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  background:rgba(9,28,45,.98);
  border-top:1px solid #426378;
  box-shadow:0 -10px 26px rgba(0,9,18,.35);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  gap:3px
 }
 .mobile-bottom-nav>button{
  display:flex;flex-direction:column;gap:3px;
  align-items:center;justify-content:center;
  border:0!important;border-radius:11px!important;
  background:transparent!important;
  color:#b8d3e2!important;-webkit-text-fill-color:#b8d3e2!important;
  font-size:10px!important;font-weight:800!important;
  padding:6px 1px!important;margin:0!important;
  min-width:0;min-height:51px;line-height:1.1;
 }
 .mobile-bottom-nav>button .mobile-nav-icon{font-size:20px!important;line-height:1.2}
 .mobile-bottom-nav>button.active{
  background:#254c5b!important;color:#ffe3a0!important;
  -webkit-text-fill-color:#ffe3a0!important
 }
 .mobile-more-menu{
  display:block;position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));
  left:10px;right:10px;z-index:79;
  background:#122d42;color:#f2f7fd;border:1px solid #577990;
  border-radius:20px;padding:15px;
  box-shadow:0 -14px 45px rgba(0,5,15,.56);
  max-height:min(72vh,600px);overflow-y:auto;
 }
 .mobile-more-menu header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
 .mobile-more-menu header strong{font-size:16px;color:#ffe1a0}
 .mobile-more-menu header button{
  background:#28495c;color:#ecf6ff;border:1px solid #7293a4;
  border-radius:50%;font-size:19px;width:36px;height:36px
 }
 .mobile-more-menu .mobile-more-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
 }
 .mobile-more-grid button{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:4px;background:#214258;color:#f2f9ff;border:1px solid #4c7486;
  border-radius:13px;padding:12px;min-height:76px;
  font-size:14px;font-weight:900;text-align:left
 }
 .mobile-more-grid button.active{
  background:#284f56;border-color:#ffdb8e;color:#ffe2a0
 }
 .mobile-more-grid button small{display:block;font-size:11px;color:#c5d8e3;font-weight:500}
 .mobile-menu-backdrop{
  position:fixed;inset:0;z-index:78;background:rgba(2,10,21,.66)
 }
 .mobile-menu-backdrop:not(.hidden){display:block}
 .section-toolbar:not(.hidden){
  display:flex;align-items:center;justify-content:space-between;
  gap:9px;margin:0 0 12px;
  background:#122b40;border:1px solid #3c5f72;border-radius:12px;
  padding:7px 9px;min-height:46px
 }
 .section-toolbar button{
  background:#23485e;border:1px solid #537c90;border-radius:9px;
  font-size:12px;line-height:1.25;color:#e6f5fc;padding:9px 11px;
  font-weight:800;min-height:36px
 }
 .section-toolbar strong{min-width:0;font-size:13px;color:#ffe09d;text-align:right}
 main{padding-bottom:calc(95px + env(safe-area-inset-bottom))!important}
 .modal-backdrop{z-index:110}
 .forum-box,.result{scroll-margin-top:15px}
}
@media(min-width:671px){
 .section-toolbar{display:none!important}
}
@media(max-width:380px){
 .mobile-bottom-nav>button{font-size:9.5px!important}
 .mobile-bottom-nav>button .mobile-nav-icon{font-size:19px!important}
 .mobile-more-menu .mobile-more-grid{gap:7px}
 .mobile-more-grid button{padding:10px;min-height:67px}
}
@media(prefers-reduced-motion:reduce){
 .mobile-bottom-nav *{transition:none!important}
}


/* Long-page escape hatch and predictable mobile drawer behavior. */
.scroll-top-shortcut{
 position:fixed;right:12px;bottom:calc(87px + env(safe-area-inset-bottom));
 z-index:72;width:42px;height:42px;
 border:1px solid #fedb92;border-radius:50%;
 color:#182c3a;background:#ffd77d;
 font-size:25px;font-weight:900;line-height:1;
 box-shadow:0 6px 20px rgba(0,8,18,.32)
}
@media(max-width:670px){
 body.mobile-menu-open{overflow:hidden}
}
@media(min-width:671px){
 .scroll-top-shortcut{bottom:22px;right:20px}
}