Sources fixes and images added. Several CSS improvements, specially on mobile devices.

application/entity/K_Area.php

@@ -113,7 +113,7 @@
                         return APPLICATION::img("UNIT", 62403);
                         break;
                     case DUNGEON_ID::PUNISHERS_CRYPT:
-                        return APPLICATION::img("UNIT", 62604);
+                        return APPLICATION::img("UNIT", 62403);
                         break;
                     case DUNGEON_ID::HALL_OF_WATER:
                         return APPLICATION::img("UNIT", 60101);

application/entity/K_Skill.php

@@ -140,7 +140,7 @@
                 array_push($this->level, new K_Skill_Level($r["skill"], $r["level"]));
             }
             $s =
-              "SELECT effect " .
+              "SELECT DISTINCT effect " .
               "FROM k_skill_effect " .
               "WHERE skill = " . $this->id . "; ";
             $q = $db->query($s);

application/helper/HTML_Helper.php

@@ -181,8 +181,12 @@
             $html .= "<img class='rune_base' src='" . URL::IMG["RUNE"] . "base.png'/>\n";
             $html .= "<img class='rune_icon' src='" . $rune->type->get_image() . "'/>\n";
             $html .= "<span class='rune_stars'>\n";
+            $star_color = "gold";
+            if ($rune->level == 15){
+                $star_color = "purple";
+            }
             for ($i = 0; $i < $rune->stars; $i ++){
-                $html .= "<img class='star' src='" . URL::IMG["ICON"] . "star.png'/>\n";
+                $html .= "<img class='star star_$star_color' src='" . URL::IMG["ICON"] . "star.png'/>\n";
             }
             $html .= "</span>\n";
             $html .= "<span class='rune_level'>\n";
@@ -227,7 +231,7 @@
             }
             else{
                 $stat_name = $rune->main_stat_name;
-                $stat_value = "+ " . $rune->main_stat_value;
+                $stat_value = "+ " . $rune->main_stat_value. "&nbsp;";
             }
             $html .= $stat_name . "\n";
             $html .= "</td>\n";
@@ -248,7 +252,7 @@
             }
             else{
                 $stat_name = $rune->innate_stat_name;
-                $stat_value = "+ " . $rune->innate_stat_value;
+                $stat_value = "+ " . $rune->innate_stat_value. "&nbsp;";;
             }
             $html .= $stat_name . "\n";
             $html .= "</td>\n";
@@ -272,7 +276,7 @@
                 }
                 else{
                     $stat_name = $substats_name[$i];
-                    $stat_value = "+ " . $substats_value[$i];
+                    $stat_value = "+ " . $substats_value[$i]. "&nbsp;";
                 }
                 $grind = "";
                 if ($substats_grind[$i] > 0){
@@ -637,7 +641,6 @@
             if (strlen($description) > 0){
                 $title .= ": " . $description;
             }
-            $html = "";
             $html = "<div class='building_panel'>\n";
             $html .= "<img title='" . $title . "' class='building' src='" . $img . "'/>\n";
             if ($level){
@@ -653,13 +656,12 @@
          * Generates a item panel.
          *
          * @param Inventory $item Entity to get the info from.
-         * @return string HTML content for a building panel. Empty on error.
+         * @return string HTML content for an item panel. Empty on error.
          */
         public static function item_panel($item) {
             if (!($item instanceof Inventory)){
                 return "";
             }
-            $html = "";
             $html = "<div class='item_panel'>\n";
             $html .= "<img title='" . $item->name . "' class='item' src='" . $item->get_image() . "'/>\n";
             $html .= "<span class='amount'>\n";
@@ -669,6 +671,22 @@
             return $html;
         }
 
+        /**
+         * Generates a source panel.
+         *
+         * @param Inventory $source Entity to get the info from.
+         * @return string HTML content for a source panel. Empty on error.
+         */
+        public static function source_panel($source) {
+            //if (!($item instanceof K_Source)){
+            //    return "";
+            //}
+            $html = "<div class='source_panel'>\n";
+            $html .= "<img title='" . $source->name . "' class='item' src='" . $source->get_image() . "'/>\n";
+            $html .= "</div>\n";
+            return $html;
+        }
+
         /**
          * Generates an arena rank icon image.
          *

application/view/inc/filter_enchantments.php

@@ -119,7 +119,7 @@
                         $selected = "selected='selected'";
                     }
 ?>
-                    <option value='0' <?=$selected?>>Inmemorial</option>
+                    <option value='0' <?=$selected?>>INMEMORIAL</option>
 <?php
                     $reflect = new ReflectionClass("RUNE_SET_ID");
                     foreach($reflect->getConstants() as $name => $id){

application/view/inc/filter_teams.php

@@ -13,11 +13,11 @@
 <form action='/<?=$UID?>/teams/' method='get'  id='filter_monsters' class='filter'>
     <table>
         <tr>
-            <td class='filter' colspan='2'>
+            <td class='filter'>
                 <span>Name:</span>
                 <input type='text' name='name' id='filter_name' value='<?=$page->filters["NAME"]?>'/>
             </td>
-            <td>
+            <td class='filter'>
                 <span>Area:</span>
                 <select name='area'>
                     <option value=''> <option>

application/view/inc/header.php

@@ -39,6 +39,7 @@
             <a href='/<?=$UID?>/artifacts/'>
                 Artifacts
             </a>
+            <br class='mobile'/>
             <a href='/<?=$UID?>/fusion/'>
                 Fusion
             </a>

application/view/monster.php

@@ -69,8 +69,7 @@
 ?>
                     <div id='monster_details'>
                         <div id='exp'>
-                            <span id='exp_bar' style='width:<?=$exp_pct?>
-                            <span class='percent'>%</span>;'>
+                            <span id='exp_bar' style='width:<?=$exp_pct?>%'></span>
                             </span>
                             <span id='exp_text'>
                                 <?=$exp_txt?>
@@ -345,36 +344,35 @@
                 </table>
                 <table id='skills'>
                     <tr>
-<?php
-                        $colspan = sizeof($page->unit->unit->skill);
-                        if ($page->unit->unit->leader_skill){
-                            $colspan ++;
-                        }
-?>
-                        <th colspan='<?=$colspan?>'>
+                        <th colspan='4'>
                             Skills
                         </th>
-                    </tr>
-                    <tr>
+                    <tr/>
 <?php
-                        if ($page->unit->unit->leader_skill){
+                    if ($page->unit->unit->leader_skill){
 ?>
-                            <td class='skill'>
-                                <img class='skill_img' src='<?=$page->unit->unit->leader_skill->get_image()?>'/>
-                                <span class='skill_level'>
-                                    
-                            <span class='percent'>&nbsp;</span>
-                                </span>
+                        <tr>
+                            <td class='skill_img'>
+                                <img src='<?=$page->unit->unit->leader_skill->get_image()?>'/>
                             </td>
+                            <td colspan='3' class='skill_text'>
+                                <h4>
+                                    Leader Skill
+                                </h4>
+                                <p>
+                                    <?=$page->unit->unit->leader_skill->create_description()?>
+                                </p>
+                            </td>
+                        </tr>
 <?php
-                        }
-                        $skill_num = 0;
-                        $absolute_level = 0;
-                        $absolute_max_level = 0;
-                        $ponderated_level = 0;
-                        $ponderated_max_level = 0;
-                        foreach ($page->unit->unit->skill as $skill){
-                            if ($skill->max_level > 1){
+                    }
+                    $skill_num = 0;
+                    $absolute_level = 0;
+                    $absolute_max_level = 0;
+                    $ponderated_level = 0;
+                    $ponderated_max_level = 0;
+                    foreach ($page->unit->unit->skill as $skill){
+                        if ($skill->max_level > 1){
                                 $absolute_max_level += $skill->max_level - 1;
                             }
                             $cur_lvl = $page->unit->skill_levels[$skill_num];
@@ -390,75 +388,27 @@
                             else{
                                 $maxed = "";
                             }
-                            $skill_num ++;
 ?>
-                            <td class='skill'>
-                                <img class='skill_img' src='<?=$skill->get_image()?>'/>
+                        <tr>
+                            <td class='skill_img'>
+                                <img src='<?=$skill->get_image()?>'/>
                                 <span class='skill_level <?=$maxed?>'>
                                     <?=$cur_lvl?>/<?=$max_lvl?>
                                 </span>
                             </td>
-<?php
-                        }
-?>
-                    </tr>
-                    <tr>
-<?php
-                        if ($page->unit->unit->leader_skill){
-?>
-                            <td>
-                                <span class='skill_name'>
-                                    Leader skill
-                                </span>
-                                <span class='skill_description'>
-                                    <?=$page->unit->unit->leader_skill->create_description()?>
-                                </span>
-                            </td>
-<?php
-                        }
-                        foreach ($page->unit->unit->skill as $skill){
-?>
-                            <td>
-                                <span class='skill_name'>
+                            <td class='skill_text'>
+                                <h4>
                                     <?=$skill->name?>
-                                </span>
-                                <span class='skill_description'>
+                                </h4>
+                                <p>
                                     <?=$skill->description?>
-                                </span>
-                            </td>
-<?php
-                        }
-?>
-                    </tr>
-                    <tr>
-<?php
-                        if ($page->unit->unit->leader_skill){
-?>
-                            <td></td>
-<?php
-                        }
-                        foreach ($page->unit->unit->skill as $skill){
-?>
-                            <td>
-                                <span class='skill_formula'>
-                                    <?=$skill->multiplier_formula?>
-                                </span>
-                            </td>
-<?php
-                        }
-?>
-                    </tr>
-                    <tr>
-<?php
-                        if ($page->unit->unit->leader_skill){
-?>
-                            <td></td>
-<?php
-                        }
-                        foreach ($page->unit->unit->skill as $skill){
-?>
-                            <td>
-                                <span class='skill_effects'>
+                                    &emsp;
+                                    <span class='formula'>
+                                        <?=$skill->multiplier_formula?>
+                                    </span>
+                                </p>
+                                
+                                <div class='effects'>
 <?php
                                     foreach ($skill->effect as $effect){
 ?>
@@ -466,51 +416,48 @@
 <?php
                                     }
 ?>
-                                </span>
+                                </div>
                             </td>
 <?php
-                        }
+                            $cur_lvl = $page->unit->skill_levels[$skill_num];
 ?>
-                    </tr>
-                    <tr>
+                            <td class='skill_ups'>
 <?php
-                        if ($page->unit->unit->leader_skill){
+                                if ($skill->max_level > 1){
 ?>
-                            <td></td>
+                                    <table>
 <?php
-                        }
-                        $skill_num = 0;
-                        foreach ($page->unit->unit->skill as $skill){
-                            $cur_lvl = $page->unit->skill_levels[$skill_num];
-?>
-                            <td class='skill_up'>
+                                        foreach ($skill->level as $level){
+                                            if ($level->level > 1){
+                                                $aquired = "";
+                                                if ($level->level <= $cur_lvl){
+                                                    $aquired = "aquired";
+                                                }
+        ?>
+                                                <tr>
+                                                    <td class='level <?=$aquired?>'>
+                                                    Lv. <?=$level->level?>
+                                                </td>
+                                                    <td class='upgrade <?=$aquired?>'>
+                                                        <?=$level->description?>
+                                                    </td>
+                                                </tr>
 <?php
-                                foreach ($skill->level as $level){
-                                    if ($level->level > 1){
-                                        $aquired = "";
-                                        if ($level->level <= $cur_lvl){
-                                            $aquired = "aquired";
+                                            }
                                         }
 ?>
-                                        <span class='level <?=$aquired?>'>
-                                            Lv. <?=$level->level?>
-                                        </span>
-                                        <span class='description <?=$aquired?>'>
-                                            <?=$level->description?>
-                                        </span>
-                                        <br/>
+                                    </table>
 <?php
-                                    }
                                 }
+                                $skill_num ++;
 ?>
                             </td>
+                        </tr>
 <?php
-                            $skill_num ++;
-                        }
+                    }
 ?>
-                    </tr>
                     <tr>
-                        <td colspan='<?=$colspan?>' id='skill_averages'>
+                        <td colspan='3' id='skill_averages'>
                             Absolute skill-ups: <?=number_format($absolute_level * 100 / $absolute_max_level, 2)?>
                             <span class='percent'>%</span>
                             <br/>
@@ -521,7 +468,7 @@
                 </table>
             </article> <!-- #profile -->
         </section>
-        <section id='runes' class='list'>
+        <section id='runes' class='content'>
             <h2>
                 <span>
                     Runes and Artifacts
@@ -533,6 +480,7 @@
             <article>
                 <?=HTML::artifact_table($page->unit->artifact_element)?>
             </article>
+            <br class='mobile'/>
 <?php
             $total_efficiency = 0;
             $total_max_efficiency = 0;

application/view/monster_info.php

@@ -59,16 +59,16 @@
                                 <th>
                                     Type
                                 </th>
-                                <th>
+                                <td>
                                     <?=$page->monster[$i]->archetype_name?>
-                                </th>
+                                </td>
                             </tr>
                             <tr>
                                 <th>
                                     ATK
                                 </th>
                                 <td>
-                                    <?=$page->monster[$i]->attack?>
+                                    <?=$page->monster[$i]->attack?>&nbsp;
                                 </td>
                             </tr>
                             <tr>
@@ -76,7 +76,7 @@
                                     DEF
                                 </th>
                                 <td>
-                                    <?=$page->monster[$i]->defense?>
+                                    <?=$page->monster[$i]->defense?>&nbsp;
                                 </td>
                             </tr>
                             <tr>
@@ -84,7 +84,7 @@
                                     HP
                                 </th>
                                 <td>
-                                    <?=$page->monster[$i]->hp?>
+                                    <?=$page->monster[$i]->hp?>&nbsp;
                                 </td>
                             </tr>
                             <tr>
@@ -92,7 +92,7 @@
                                     SPD
                                 </th>
                                 <td>
-                                    <?=$page->monster[$i]->speed?>
+                                    <?=$page->monster[$i]->speed?>&nbsp;
                                 </td>
                             </tr>
                             <tr>
@@ -167,100 +167,67 @@
                                 </div>
 <?php
                             }
+                            if (count($page->monster[$i]->sources) > 0){
 ?>
-                        </div> <!-- .extra -->
-                        <table class='skills'>
-                            <tr>
-<?php
-                                $colspan = sizeof($page->monster[$i]->skill);
-                                if ($page->monster[$i]->leader_skill){
-                                    $colspan ++;
-                                }
-?>
-                                <th colspan='<?=$colspan?>'>
-                                    Skills
-                                </th>
-                            </tr>
-                            <tr>
+                                <div class='sources'>
+                                    <span>
+                                        Obtainable from:
+                                    </span>
 <?php
-                                if ($page->monster[$i]->leader_skill){
+                                    foreach ($page->monster[$i]->sources as $source){
 ?>
-                                    <td class='skill'>
-                                        <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
-                                        <span class='skill_level'>
-                                            &nbsp;
-                                        </span>
-                                    </td>
+                                        <?=HTML::source_panel($source)?>
 <?php
-                                }
-                                $skill_num = 0;
-                                foreach ($page->monster[$i]->skill as $skill){
-                                    $skill_num ++;
+                                    }
 ?>
-                                    <td class='skill'>
-                                        <img class='skill_img' src='<?=$skill->get_image()?>'/>
-                                    </td>
+                                </div>
 <?php
-                                }
+                            }
 ?>
-                            </tr>
+                        </div> <!-- .extra -->
+                        <table class='skills'>
                             <tr>
+                                <th colspan='4'>
+                                    Skills
+                                </th>
+                            <tr/>
 <?php
-                                if ($page->monster[$i]->leader_skill){
+                            if ($page->monster[$i]->leader_skill){
 ?>
-                                    <td>
-                                        <span class='skill_name'>
-                                            Leader skill
-                                        </span>
-                                        <span class='skill_description'>
+                                <tr>
+                                    <td class='skill_img'>
+                                        <img src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
+                                    </td>
+                                    <td colspan='3' class='skill_text'>
+                                        <h4>
+                                            Leader Skill
+                                        </h4>
+                                        <p>
                                             <?=$page->monster[$i]->leader_skill->create_description()?>
-                                        </span>
+                                        </p>
                                     </td>
+                                </tr>
 <?php
-                                }
-                                foreach ($page->monster[$i]->skill as $skill){
+                            }
+                            foreach ($page->monster[$i]->skill as $skill){
 ?>
-                                    <td>
-                                        <span class='skill_name'>
+                                <tr>
+                                    <td class='skill_img'>
+                                        <img src='<?=$skill->get_image()?>'/>
+                                    </td>
+                                    <td class='skill_text'>
+                                        <h4>
                                             <?=$skill->name?>
-                                        </span>
-                                        <span class='skill_description'>
+                                        </h4>
+                                        <p>
                                             <?=$skill->description?>
-                                        </span>
-                                    </td>
-<?php
-                                }
-?>
-                            </tr>
-                            <tr>
-<?php
-                                if ($page->monster[$i]->leader_skill){
-?>
-                                    <td></td>
-<?php
-                                }
-                                foreach ($page->monster[$i]->skill as $skill){
-?>
-                                    <td>
-                                        <span class='skill_formula'>
-                                            <?=$skill->multiplier_formula?>
-                                        </span>
-                                    </td>
-<?php
-                                }
-?>
-                            </tr>
-                            <tr>
-<?php
-                                if ($page->monster[$i]->leader_skill){
-?>
-                                    <td></td>
-<?php
-                                }
-                                foreach ($page->monster[$i]->skill as $skill){
-?>
-                                    <td>
-                                        <span class='skill_effects'>
+                                            &emsp;
+                                            <span class='formula'>
+                                                <?=$skill->multiplier_formula?>
+                                            </span>
+                                        </p>
+                                        
+                                        <div class='effects'>
 <?php
                                             foreach ($skill->effect as $effect){
 ?>
@@ -268,145 +235,86 @@
 <?php
                                             }
 ?>
-                                        </span>
+                                        </div>
                                     </td>
+                                    <td class='skill_ups'>
 <?php
-                                }
+                                        if ($skill->max_level > 1){
 ?>
-                            </tr>
-                            <tr>
+                                            <table>
 <?php
-                                if ($page->monster[$i]->leader_skill){
-?>
-                                    <td></td>
-<?php
-                                }
-                                $skill_num = 0;
-                                foreach ($page->monster[$i]->skill as $skill){
+                                            foreach ($skill->level as $level){
+                                                if ($level->level > 1){
 ?>
-                                    <td class='skill_up'>
+                                                        <tr>
+                                                            <td class='level'>
+                                                                Lv. <?=$level->level?>
+                                                            </td>
+                                                            <td class='upgrade'>
+                                                                <?=$level->description?>
+                                                            </td>
+                                                        </tr>
 <?php
-                                        foreach ($skill->level as $level){
-                                            if ($level->level > 1){
+                                                }
+                                            }
 ?>
-                                                <span class='level'>
-                                                    Lv. <?=$level->level?>
-                                                </span>
-                                                <span class='description'>
-                                                    <?=$level->description?>
-                                                </span>
-                                                <br/>
+                                            </table>
 <?php
-                                            }
                                         }
 ?>
                                     </td>
+                                </tr>
 <?php
-                                    $skill_num ++;
-                                }
+                            }
 ?>
-                            </tr>
                         </table>
 
 <?php
                         if ($page->monster[$i]->transformation != null){
 ?>
-                            <table class='skills skills_transformation'>
+                            <table class='skills'>
                                 <tr>
-<?php
-                                    $colspan = sizeof($page->monster[$i]->transformation->skill);
-                                    if ($page->monster[$i]->leader_skill){
-                                        $colspan ++;
-                                    }
-?>
-                                    <th colspan='<?=$colspan?>'>
+                                    <th colspan='4'>
                                         Skills (transformed)
                                     </th>
-                                </tr>
-                                <tr>
+                                <tr/>
 <?php
-                                    if ($page->monster[$i]->leader_skill){
+                                if ($page->monster[$i]->leader_skill){
 ?>
-                                        <td class='skill'>
-                                            <img class='skill_img' src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
-                                            <span class='skill_level'>
-                                                &nbsp;
-                                            </span>
+                                    <tr>
+                                        <td class='skill_img'>
+                                            <img src='<?=$page->monster[$i]->leader_skill->get_image()?>'/>
                                         </td>
-<?php
-                                    }
-                                    $skill_num = 0;
-                                    $absolute_level = 0;
-                                    $absolute_max_level = 0;
-                                    $ponderated_level = 0;
-                                    $ponderated_max_level = 0;
-                                    foreach ($page->monster[$i]->transformation->skill as $skill){
-                                        $skill_num ++;
-?>
-                                        <td class='skill'>
-                                            <img class='skill_img' src='<?=$skill->get_image()?>'/>
-                                        </td>
-<?php
-                                    }
-?>
-                                </tr>
-                                <tr>
-<?php
-                                    if ($page->monster[$i]->leader_skill){
-?>
-                                        <td>
-                                            <span class='skill_name'>
-                                                Leader skill
-                                            </span>
-                                            <span class='skill_description'>
+                                        <td colspan='3' class='skill_text'>
+                                            <h4>
+                                                Leader Skill
+                                            </h4>
+                                            <p>
                                                 <?=$page->monster[$i]->leader_skill->create_description()?>
-                                            </span>
+                                            </p>
                                         </td>
+                                    </tr>
 <?php
-                                    }
-                                    foreach ($page->monster[$i]->transformation->skill as $skill){
+                                }
+                                foreach ($page->monster[$i]->transformation->skill as $skill){
 ?>
-                                        <td>
-                                            <span class='skill_name'>
+                                    <tr>
+                                        <td class='skill_img'>
+                                            <img src='<?=$skill->get_image()?>'/>
+                                        </td>
+                                        <td class='skill_text'>
+                                            <h4>
                                                 <?=$skill->name?>
-                                            </span>
-                                            <span class='skill_description'>
+                                            </h4>
+                                            <p>
                                                 <?=$skill->description?>
-                                            </span>
-                                        </td>
-<?php
-                                    }
-?>
-                                </tr>
-                                <tr>
-<?php
-                                    if ($page->monster[$i]->leader_skill){
-?>
-                                        <td></td>
-<?php
-                                    }
-                                    foreach ($page->monster[$i]->transformation->skill as $skill){
-?>
-                                        <td>
-                                            <span class='skill_formula'>
-                                                <?=$skill->multiplier_formula?>
-                                            </span>
-                                        </td>
-<?php
-                                    }
-?>
-                                </tr>
-                                <tr>
-<?php
-                                    if ($page->monster[$i]->leader_skill){
-?>
-                                        <td></td>
-<?php
-                                    }
-                                    foreach ($page->monster[$i]->transformation->skill as $skill){
-?>
-                                        <td>
-                                            <span class='skill_effects'>
+                                                &emsp;
+                                                <span class='formula'>
+                                                    <?=$skill->multiplier_formula?>
+                                                </span>
+                                            </p>
+                                            
+                                            <div class='effects'>
 <?php
                                                 foreach ($skill->effect as $effect){
 ?>
@@ -414,44 +322,38 @@
 <?php
                                                 }
 ?>
-                                            </span>
+                                            </div>
                                         </td>
+                                        <td class='skill_ups'>
 <?php
-                                    }
-?>
-                                </tr>
-                                <tr>
-<?php
-                                    if ($page->monster[$i]->leader_skill){
+                                            if ($skill->max_level > 1){
 ?>
-                                        <td></td>
+                                                <table>
 <?php
-                                    }
-                                    $skill_num = 0;
-                                    foreach ($page->monster[$i]->transformation->skill as $skill){
+                                                foreach ($skill->level as $level){
+                                                    if ($level->level > 1){
 ?>
-                                        <td class='skill_up'>
+                                                            <tr>
+                                                                <td class='level'>
+                                                                    Lv. <?=$level->level?>
+                                                                </td>
+                                                                <td class='upgrade'>
+                                                                    <?=$level->description?>
+                                                                </td>
+                                                            </tr>
 <?php
-                                            foreach ($skill->level as $level){
-                                                if ($level->level > 1){
+                                                    }
+                                                }
 ?>
-                                                    <span class='level'>
-                                                        Lv. <?=$level->level?>
-                                                    </span>
-                                                    <span class='description'>
-                                                        <?=$level->description?>
-                                                    </span>
-                                                    <br/>
+                                                </table>
 <?php
-                                                }
                                             }
 ?>
                                         </td>
+                                    </tr>
 <?php
-                                        $skill_num ++;
-                                    }
+                                }
 ?>
-                                </tr>
                             </table> <!-- #transformation_skills -->
 <?php
                         }

application/view/optimizer.php

@@ -158,7 +158,7 @@
 <?php
         include __DIR__ . "/inc/header.php";
 ?>
-        <section class='list'>
+        <section class='content'>
             <h2>
                 Teams
             </h2>

application/view/optimizer_unit.php

@@ -245,7 +245,7 @@
                 };
 
                 // DEBUG
-                //params = 'uid=8114048&unit=6441802832&limit=6&set[]=2&set[]=4&set[]=4&stat[]=4&stat[]=4&stat[]=4&source=0&tuning=2&min_defense=800';
+                params = 'uid=8114048&unit=6441802832&limit=6&set[]=2&set[]=4&set[]=4&stat[]=4&stat[]=4&stat[]=4&source=0&tuning=2&min_defense=800';
 
 
                 // Clear result table, disable button and show spinner

application/view/report.php

@@ -52,10 +52,9 @@
                     Shows a list of the monstes in need of skilling-up
                     It sorts monster not by the absolute ammount of remaining power-ups, but by a ponderated list tht takes into account to which skills the previous power ups have gone, placing more value in the more advanced skills. 
                 </p>
-<?php
-                $filters = FILTER::SKILLUP;
-                include __DIR__ . "/inc/filter_report_skillup.php";
-?>
+                <a class='a_button' href='/<?=$UID?>/report/skillup/'>
+                    Go
+                </a>
             </article>
         </section>
         <section class='content report'>
@@ -68,11 +67,9 @@
                     Shows monsters with runes that can be upgraded.
                     It list the runes that can be replaced by other runes in your inventory that have either more stars or a higher base quality.
                 </p>
-<?php
-                $filters = FILTER::RUNEUPGRADE;
-                $custom_filters = $page->custom_filters_runeupgrade;
-                include __DIR__ . "/inc/filter_report_runeupgrade.php";
-?>
+                <a class='a_button' href='/<?=$UID?>/report/runeupgrade/'>
+                    Go
+                </a>
             </article>
         </section>
         <section class='content report'>
@@ -85,10 +82,9 @@
                     Shows monsters with runes that can be crafted.
                     It list the grindstones and gems that are available for each rune.
                 </p>
-<?php
-                $filters = FILTER::RUNECRAFT;
-                include __DIR__ . "/inc/filter_report_runecraft.php";
-?>
+                <a class='a_button' href='/<?=$UID?>/report/runecraft/'>
+                    Go
+                </a>
             </article>
         </section>
 <?php

application/view/report_skillup.php

@@ -76,40 +76,18 @@
 <?php
         $index = 1;
         foreach ($page->units as $unit){
-            if ($unit->unit->awakens_from == "" && $unit->unit->awakens_to == ""){
-                // No to, no from, silver monster.
-                $star_class ="star_silver";
-                $unit_title = $unit->unit->element . " " . $unit->unit->name;
-            }
-            elseif ($unit->unit->awakens_from != "" && $unit->unit->awakens_to == ""){
-                // Already awakened
-                if ($unit->unit->base_stars - $unit->unit->natural_stars == 1){
-                    // Normal awaken.
-                    $star_class = "star_purple";
-                }
-                else{
-                    // Second awaken.
-                    $star_class = "star_red";
-                }
-                $unit_title = $unit->unit->name;
-            }
-            elseif ($unit->unit->awakens_to != ""){
-                // Awakeable.
-                $star_class = "star_gold";
-                $unit_title = $unit->unit->element . " " . $unit->unit->name;
-            }
             switch ($index % 10){
                 case 1:
-                    $index_title = $index . "<span class='superindex'>st</span> - " . $unit_title;
+                    $index_title = $index . "<span class='superindex'>st</span> - " . $unit->title;
                     break;
                 case 2:
-                    $index_title = $index . "<span class='superindex'>nd</span> - " . $unit_title;
+                    $index_title = $index . "<span class='superindex'>nd</span> - " . $unit->title;
                     break;
                 case 3:
-                    $index_title = $index . "<span class='superindex'>rd</span> - " . $unit_title;
+                    $index_title = $index . "<span class='superindex'>rd</span> - " . $unit->title;
                     break;
                 default:
-                    $index_title = $index . "<span class='superindex'>th</span> - " . $unit_title;
+                    $index_title = $index . "<span class='superindex'>th</span> - " . $unit->title;
                     break;
             }
             switch ($index % 100){
@@ -130,19 +108,7 @@
                     <div class='monster'>
                         <div class='profile'>
                             <div class='monster_panel'>
-                                <span class='stars'>
-<?php
-                                    for ($i = 0; $i < $unit->stars; $i ++){
-?>
-                                        <img class='star <?=$star_class?>' src='<?=URL::IMG["ICON"] . "star.png"?>'/>
-<?php
-                                    }
-?>
-                                </span>
-                                <img title='<?=$unit_title?>' class='monster border_<?=$unit->unit->element_name?>' src='<?=$unit->unit->get_image()?>'/>
-                                <span class='level'>
-                                    <?=$unit->level?>
-                                </span>
+                                <?=HTML::unit_panel($unit)?>
                             </div>
                         </div> <!-- .profile -->
                         <div class='skills'>

application/view/teams.php

@@ -705,7 +705,7 @@
             </article>
 
         </section> <!-- #filters -->
-        <section class='list'>
+        <section class='content'>
             <h2>
                 Teams
             </h2>

install_data/install_base.sql

@@ -14,20 +14,72 @@ CREATE TABLE k_source(
     description TEXT,
     farmable INT NOT NULL CHECK(farmable IN (1, 0))
 );
-INSERT INTO k_source VALUES(1,'Unknow Scroll','',1);
-INSERT INTO k_source VALUES(2,'Mystical Scroll','',1);
-INSERT INTO k_source VALUES(3,'Light & Dark Scroll','',1);
-INSERT INTO k_source VALUES(4,'Water Scroll','',1);
-INSERT INTO k_source VALUES(5,'Fire Scroll','',1);
-INSERT INTO k_source VALUES(6,'Wind Scroll','',1);
-INSERT INTO k_source VALUES(7,'Legendary Scroll','',1);
-INSERT INTO k_source VALUES(8,'Summon Stones','',1);
-INSERT INTO k_source VALUES(9,'Summon Pieces','',1);
-INSERT INTO k_source VALUES(10,'Light & Dark Pieces','',1);
-INSERT INTO k_source VALUES(11,'Transcendence Scroll','',1);
-INSERT INTO k_source VALUES(12,'Legendary Water Scroll','',1);
-INSERT INTO k_source VALUES(13,'Legendary Fire Scroll','',1);
-INSERT INTO k_source VALUES(14,'Legendary Wind Scroll','',1);
+--INSERT INTO k_source VALUES(1,'Unknow Scroll','',1);
+--INSERT INTO k_source VALUES(2,'Mystical Scroll','',1);
+--INSERT INTO k_source VALUES(3,'Light & Dark Scroll','',1);
+--INSERT INTO k_source VALUES(4,'Water Scroll','',1);
+--INSERT INTO k_source VALUES(5,'Fire Scroll','',1);
+--INSERT INTO k_source VALUES(6,'Wind Scroll','',1);
+--INSERT INTO k_source VALUES(7,'Legendary Scroll','',1);
+--INSERT INTO k_source VALUES(8,'Summon Stones','',1);
+--INSERT INTO k_source VALUES(9,'Summon Pieces','',1);
+--INSERT INTO k_source VALUES(10,'Light & Dark Pieces','',1);
+--INSERT INTO k_source VALUES(11,'Transcendence Scroll','',1);
+--INSERT INTO k_source VALUES(12,'Legendary Water Scroll','',1);
+--INSERT INTO k_source VALUES(13,'Legendary Fire Scroll','',1);
+--INSERT INTO k_source VALUES(14,'Legendary Wind Scroll','',1);
+
+
+INSERT INTO k_source VALUES(3,'Legendary Scroll','',0);
+INSERT INTO k_source VALUES(4,'Scroll of Light and Darkness','',0);
+INSERT INTO k_source VALUES(5,'Fire Scroll','',0);
+INSERT INTO k_source VALUES(6,'Water Scroll','',0);
+INSERT INTO k_source VALUES(7,'Wind Scroll','',0);
+INSERT INTO k_source VALUES(10,'Secret Dungeon','',1);
+INSERT INTO k_source VALUES(11,'Garen Forest','',1);
+INSERT INTO k_source VALUES(12,'Mt. Siz','',1);
+INSERT INTO k_source VALUES(13,'Kabir Ruins','',1);
+INSERT INTO k_source VALUES(14,'Mt. White Ragon','',1);
+INSERT INTO k_source VALUES(15,'Telain Forest','',1);
+INSERT INTO k_source VALUES(16,'Hydeni Ruins','',1);
+INSERT INTO k_source VALUES(17,'Tamor Desert','',);
+INSERT INTO k_source VALUES(18,'Vrofagus Ruins','',1);
+INSERT INTO k_source VALUES(19,'Faimon Volvano','',1);
+INSERT INTO k_source VALUES(20,'Aiden Forest','',1);
+INSERT INTO k_source VALUES(21,'Ferun Castle','',1);
+INSERT INTO k_source VALUES(22,'Mt. Runar','',1);
+INSERT INTO k_source VALUES(23,'Charuca Remains','',1);
+INSERT INTO k_source VALUES(24,'Glory Shop','',1);
+INSERT INTO k_source VALUES(25,'Trial of Ascension','',0);
+INSERT INTO k_source VALUES(26,'Devilmon Cave','',0);
+INSERT INTO k_source VALUES(27,'Rainbow Garden','',0);
+INSERT INTO k_source VALUES(28,'Guild Shop','',1);
+INSERT INTO k_source VALUES(29,'Hall of Dark','',1);
+INSERT INTO k_source VALUES(30,'Hall of Fire','',1);
+INSERT INTO k_source VALUES(31,'Hall of Light','',1);
+INSERT INTO k_source VALUES(32,'Hall of Water','',1);
+INSERT INTO k_source VALUES(33,'Hall of Wind','',1);
+INSERT INTO k_source VALUES(34,'Angel Garden','',0);
+INSERT INTO k_source VALUES(35,'Fusion','',1);
+INSERT INTO k_source VALUES(36,'Magic Shop','',0);
+INSERT INTO k_source VALUES(37,'Special Event','',0);
+INSERT INTO k_source VALUES(38,'Mystical Scroll','',0);
+INSERT INTO k_source VALUES(39,'Unknown Scroll','',0); -- Also, social summon
+INSERT INTO k_source VALUES(40,'World Boss','A server wide boss that is unlocked after completing a Dimensional Rift. Rewards are random and the number of rewards is based on the rank you achieve.',false);
+INSERT INTO k_source VALUES(41,'In-App Purchase','Purchase made with real currency through the in-game store.',0);
+INSERT INTO k_source VALUES(42,'Hall of Magic','',1);
+INSERT INTO k_source VALUES(43,'Giant''s Keep','',1);
+INSERT INTO k_source VALUES(44,'Dragon''s Lair','',1);
+INSERT INTO k_source VALUES(45,'Necropolis','',1);
+INSERT INTO k_source VALUES(46,'Ice Beast','',1);
+INSERT INTO k_source VALUES(47,'Fire Beast','',1);
+INSERT INTO k_source VALUES(48,'Wind Beast','',1);
+INSERT INTO k_source VALUES(49,'Light Beast','',1);
+INSERT INTO k_source VALUES(50,'Dark Beast','',1);
+
+
+
+
 CREATE TABLE k_element(
     id INT NOT NULL PRIMARY KEY CHECK(id BETWEEN 0 AND 6),
     name TEXT NOT NULL UNIQUE,

public/css/enchantments.css

@@ -1,13 +1,13 @@
 section.filters td.filter select#filter_type{
-    height: 2.5em;
+    height: 2.8em;
     overflow: hidden;
 }
 section.filters td.filter select#filter_rune{
-    height: 26em;
+    height: 27em;
     overflow: hidden;
 }
 section.filters td.filter select#filter_stat{
-    height: 13em;
+    height: 15.7em;
     overflow: hidden;
 }
 section h2 img, span{

public/css/guild.css

@@ -25,7 +25,7 @@ div#guild_details p#guild_comment{
     margin: 0.5em 1em;
 }
 div#guild_details p#guild_notice{
-    color: #ff00ab;
+    color: #ff44ab;
     font-style: italic;
     font-weight: bold;
     margin: 0.5em 1em;
@@ -67,8 +67,8 @@ div#guild_details div#guild_skills div.skill_group span.skill_group_description{
 div#guild_details div#guild_skills div.skill_group img.skill_group_image{
     display: inline-block;
     vertical-align: top;
-    width: 5em;
-    height: 5em;
+    width: 3em;
+    height: 3em;
     border: 0.1em solid #f2c920;
     border-radius: 0.5em;
     margin: 0.2em 0.2em 0.5em 1em;
@@ -120,17 +120,20 @@ table#guild_members{
         margin: auto;
         font-size: 90%;
         text-align: center;
+        display: table;
     }
 }
 table#guild_members th{
     background-color: #00000088;
     font-weight: bold;
     font-size: 90%;
+    border: 0.1em solid #000000;
 }
 
 table#guild_members td{
     background-color: #00000022;
     height: 1.5em;
+    border: 0.1em solid #000000;
 }
 table#guild_members td.odd{
     background-color: #00000044;

public/css/home.css

@@ -9,6 +9,12 @@ div.panel{
     display: inline-block;
     vertical-align: top;
 }
+@media screen and (max-width : 990px){
+    div.panel{
+        width: 100%;
+        display: block;
+    }
+}
 
 article#profile div.profile_section{
     border: 0.2em solid var(--ui-color-border);

public/css/monster.css

@@ -51,9 +51,12 @@ section#monster article#profile div#monster_info div#exp span#exp_bar{
 section#monster article#profile div#monster_info div#exp span#exp_text{
     display: block;
     text-align: center;
-    margin-top: -1.5em;
+    position: absolute;
+    bottom: 0;
+    margin: auto;
+    width: 100%;
     font-weight: bold;
-    font-size: 0.5em;
+    font-size: 0.8em;
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.1em #000000;
 }
 
@@ -100,44 +103,51 @@ section#monster article#profile table#stats td.total{
     font-weight: bold;
 }
 
+
+
+
+
+
+
+
 section#monster article#profile table#skills{
     display: block;
-    vertical-align: top;
-    margin: 1em auto;
+    font-size: 90%;
+    border: 0.1em solid black;
     color: #ffffff;
-    text-align: center;
-    width: 90%;
-    position: relative;
+    margin: 0.5em auto;
     border-collapse: collapse;
-    table-layout: fixed;
-    border-top: 3px solid #c8ad78;
-    border-bottom: 3px solid #c8ad78;
+    border-radius: 0.4em;
+    vertical-align: top;
+    width: 90%;
+}
+@media screen and (max-width : 990px){
+    section#monster article#profile table#skills{
+        width: 100%;
+    }
 }
 
 section#monster article#profile table#skills th{
-    border-left: 3px solid #c8ad78;
-    border-right: 3px solid #c8ad78;
-    border-bottom: 3px solid #c8ad78;
-    font-size: 150%;
-    padding: 0.5em;
-    background-color: #00000044;
+    font-weight: bold;
+    background-color: #00000066;
 }
 
-section#monster article#profile table#skills td{
+section#monster article#profile table#skills > tbody >  tr > td{
     vertical-align: top;
     padding: 0.2em 0.5em;
-    border-right: 3px solid #c8ad78;
-    border-left: 3px solid #c8ad78;
-    background-color: #ffffff33;
+    border-right: 0.1em solid #00000088;
+    border-left: 0.1em solid #00000088;
+    border-top: 0.2em solid #00000088;
+    border-bottom: 0.2em solid #00000088;
 }
 
-section#monster article#profile table#skills img.skill_img{
+section#monster article#profile table#skills td.skill_img img{
     width: 4em;
     height: 4em;
     border: 0.15em solid var(--ui-color-border);
     border-radius: 0.4em;
-    margin-top: 1em;
 }
+
 section#monster article#profile table#skills span.skill_level{
     font-size: 100%;
     top: 2.8em;
@@ -152,66 +162,61 @@ section#monster article#profile table#skills span.skill_level.maxed{
     color: #f2c920;
 }
 
-section#monster article#profile table#skills span.skill_name{
+section#monster article#profile table#skills td.skill_text{
+    text-align: left;
+}
+
+section#monster article#profile table#skills td.skill_text h4{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     margin: 0 0 0.5em 0;
     display: block;
     font-weight: bold;
 }
 
-section#monster article#profile table#skills span.skill_description{
-    font-size: 80%;
-    font-style: italic;
-    margin: 0;
-    padding: 0;
-    display: block;
-    line-height: 0.95em;
+section#monster article#profile table#skills td.skill_text p{
+    margin: 0 0 0 0;
 }
 
-section#monster article#profile table#skills span.skill_formula{
-    display: block;
+section#monster article#profile table#skills td.skill_extra{
     text-align: center;
-    margin-top: 1em;
+}
+
+section#monster article#profile table#skills td.skill_text span.formula{
     font-size: 80%;
     color: #cccccc;
     font-weight: bold;
     font-style: italic;
-    font-family: monospace, monospace;
+    font-family: monospace;
+    white-space: nowrap;
 }
 
-section#monster article#profile table#skills span.skill_effects{
-    display: block;
-    text-align: center;
-}
 
-section#monster article#profile table#skills span.skill_effects img.effect_img{
-    width: 2em;
-    height: 2em;
+section#monster article#profile table#skills td.skill_text div.effects img{
+    width: 1.6em;
+    height: 1.6em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-section#monster article#profile table#skills td.skill_up{
-    margin: 0.5em auto 0 auto;
-    border-collapse: collapse;
+section#monster article#profile table#skills td.skill_ups table{
     font-size: 80%;
+    font-family: monospace;
+}
+section#monster article#profile table#skills td.skill_ups table td{
+    white-space: nowrap;
     color: #999999;
-    font-style: italic;
+}
+section#monster article#profile table#skills td.skill_ups td.aquired{
+    color: #efefef;
 }
 
-section#monster article#profile table#skills td.skill_up span.level{
-    width: 3em;
+section#monster article#profile table#skills td.skill_ups table td.level{
     display: inline-block;
+    text-align: left;
 }
-section#monster article#profile table#skills td.skill_up span.description{
+section#monster article#profile table#skills td.skill_ups table td.upgrade{
     font-style: italic;
-    min-width: 6em;
-    display: inline-block;
-    width: 70%;
-}
-
-section#monster article#profile table#skills td.skill_up span.aquired{
-    color: #efefef;
+    text-align: left;
 }
 
 section#monster article#profile td#skill_averages{
@@ -230,7 +235,7 @@ section#runes{
     section#runes{
         width: 90%;
         max-width: 90%;
-        margin: 0.2em auto;
+        margin: 2em auto auto auto;
         display: block;
     }
 }
@@ -239,16 +244,22 @@ section#runes article#rune_averages{
     margin: 2em auto 1em auto;
     text-align: center;
 }
+@media screen and (max-width : 990px){
+    section#runes article{
+        display: inline-block;
+    }
 
 section#runes article#rune_averages table#table_averages{
     margin: auto;
-    font-size: 80%
+    font-size: 80%;
+    border-collapse: collapse;
 }
 
 section#runes article#rune_averages table#table_averages td.title{
     text-align: right;
 }
 section#runes article#rune_averages table#table_averages td.value{
-    text-align: left;
+    text-align: right;
     padding-left: 1em;
+    font-family: monospace;
 }

public/css/monster_info.css

@@ -59,6 +59,9 @@ article.stage table.stats th{
 article.stage table.stats td{
     font-weight: bold;
     background-color: #ffffff33;
+    text-align: right;
+    font-family: monospace;
+    font-size: 120%;
 }
 
 article.stage div.extra{
@@ -72,7 +75,10 @@ article.stage div.extra div.sources span{
     color: #ffffff;
 }
 
-article.stage div.extra div.sources img.source{
+article.stage div.extra div.sources div.source_panel{
+    display: inline-block;
+}
+article.stage div.extra div.sources div.source_panel img{
     width: 2em;
     height: 2em;
     border: 0.1em solid #f2c920;
@@ -93,8 +99,8 @@ article.stage div.extra div.essences div.essence{
     border-style: solid;
     border-width: 0.1em;
     border-radius: 15%;
-    width: 1.3em;
-    height: 1.3em;
+    width: 1.5em;
+    height: 1.5em;
     margin-bottom: 0.1em;
 }
 article.stage div.extra div.essences div.essence img{
@@ -107,105 +113,108 @@ article.stage div.extra div.essences div.essence img{
 article.stage div.extra div.essences div.essence span{
     position: absolute;
     font-size: 80%;
-    top: 0.15em;
-    left: 0.8em;
+    bottom: 0em;
+    right: 0em;
     color: #ffffff;
     text-shadow: 0 0 0.1em #000000, 0 0 0.1em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
 }
 
 article.stage table.skills{
     display: block;
-    vertical-align: top;
-    margin: 1em auto;
+    font-size: 90%;
+    border: 0.1em solid black;
     color: #ffffff;
-    text-align: center;
-    width: 90%;
-    position: relative;
+    margin: 0.5em auto;
     border-collapse: collapse;
-    table-layout: fixed;
-    border-top: 3px solid #c8ad78;
-    border-bottom: 3px solid #c8ad78;
+    border-radius: 0.4em;
+    vertical-align: top;
+    width: 90%;
+}
+@media screen and (max-width : 990px){
+    article.stage table.skills{
+        width: 100%;
+    }
 }
 
 article.stage table.skills th{
-    border-left: 3px solid #c8ad78;
-    border-right: 3px solid #c8ad78;
-    border-bottom: 3px solid #c8ad78;
-    font-size: 150%;
-    padding: 0.5em;
+    font-weight: bold;
     background-color: #00000066;
 }
 
-article.stage table.skills td{
+article.stage table.skills > tbody >  tr > td{
     vertical-align: top;
     padding: 0.2em 0.5em;
-    border-right: 3px solid #c8ad78;
-    border-left: 3px solid #c8ad78;
-    background-color: #ffffff33;
+    border-right: 0.1em solid #00000088;
+    border-left: 0.1em solid #00000088;
+    border-top: 0.2em solid #00000088;
+    border-bottom: 0.2em solid #00000088;
 }
 
-article.stage table.skills img.skill_img{
+article.stage table.skills td.skill_img img{
     width: 4em;
     height: 4em;
     border: 0.15em solid var(--ui-color-border);
     border-radius: 0.4em;
-    margin-top: 1em;
 }
 
-article.stage table.skills span.skill_name{
+article.stage table.skills td.skill_text{
+    text-align: left;
+}
+
+article.stage table.skills td.skill_text h4{
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000;
     margin: 0 0 0.5em 0;
     display: block;
     font-weight: bold;
 }
 
-article.stage table.skills span.skill_description{
+article.stage table.skills td.skill_text p{
+    margin: 0 0 0 0;
+}
+
+/*article.stage table.skills span.skill_description{
     font-size: 80%;
     font-style: italic;
     margin: 0;
     padding: 0;
     display: block;
     line-height: 0.95em;
-}
+}*/
 
-article.stage table.skills span.skill_formula{
-    display: block;
+article.stage table.skills td.skill_extra{
     text-align: center;
-    margin-top: 1em;
+}
+
+article.stage table.skills td.skill_text span.formula{
     font-size: 80%;
     color: #cccccc;
     font-weight: bold;
     font-style: italic;
-    font-family: monospace, monospace;
+    font-family: monospace;
+    white-space: nowrap;
 }
 
-article.stage table.skills span.skill_effects{
-    display: block;
-    text-align: center;
-}
 
-article.stage table.skills span.skill_effects img.effect_img{
-    width: 2em;
-    height: 2em;
+article.stage table.skills td.skill_text div.effects img{
+    width: 1.6em;
+    height: 1.6em;
     border: 0.1em solid #000000;
     border-radius: 0.5em;
 }
 
-article.stage table.skills td.skill_up{
-    margin: 0.5em auto 0 auto;
-    border-collapse: collapse;
+article.stage table.skills td.skill_ups table{
     font-size: 80%;
-    color: #efefef;
-    font-style: italic;
+    font-family: monospace;
+}
+article.stage table.skills td.skill_ups table td{
+    white-space: nowrap;
 }
 
-article.stage table.skills td.skill_up span.level{
-    width: 3em;
+article.stage table.skills td.skill_ups table td.level{
     display: inline-block;
+    text-align: left;
 }
-article.stage table.skills td.skill_up span.description{
+article.stage table.skills td.skill_ups table td.upgrade{
     font-style: italic;
-    min-width: 6em;
-    display: inline-block;
-    width: 70%;
+    text-align: left;
 }

public/css/monsters.css

@@ -98,9 +98,11 @@ section.list div.monster div.monster_tooltip div.skills div.skill span.skill_lev
     font-size: 130%;
     position: relative;
     bottom: 1.4em;
-    width: 90%;
+    width: 3em;
+    margin: auto;
     display: block;
     text-align: right;
+    padding-right: 0.4em;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.4em #000000, 0 0 0.4em #000000, 0 0 0.6em #000000, 0 0 0.6em #000000, 0 0 0.8em #000000, 0 0 0.8em #000000;
 }
 

public/css/optimizer.css

@@ -1,20 +1,22 @@
 table#teams{
-    width: 60%;
-    border-collapse: collapse;
-    border: 0.1em solid #000000;
     display: inline-block;
     vertical-align: top;
+    border-collapse: collapse;
+    border: 0.1em solid #000000;
+    border-radius: 0.4em;
 }
 
 table#teams th{
     border-top: 0.1em solid #000000;
     border-bottom: 0.1em solid #000000;
+    background-color: #00000066;
 }
 
 table#teams td{
     border-bottom: 0.1em solid #000000;
     text-align: left;
     padding: 0.2em;
+    height: 2em;
 }
 
 table#teams td.odd{
@@ -65,16 +67,22 @@ div#unit_list{
 div#unit_list table{
     border-collapse: collapse;
     border: 0.1em solid #000000;
+    display: inline-block;
+    vertical-align: top;
+    border-radius: 0.4em;
 }
 
 div#unit_list table th{
     padding: 0.2em 0.4em;
+    background-color: #00000066;
 }
 
 div#unit_list table td{
     vertical-align: middle;
     text-align: center;
     margin: 0;
+    border-bottom: 0.1em solid #000000;
+    padding: 0;
 }
 
 div#unit_list table td.odd{
@@ -83,7 +91,6 @@ div#unit_list table td.odd{
 
 div#unit_list table div.monster_panel{
     font-size: 25%;
-    margin: 2em 0 0 0;
 }
 
 div#unit_list table td.action input[type="button"]{
@@ -223,7 +230,12 @@ section#results div#results_info{
 
 section#results td.option_stats table.stat_table{
     border-collapse: collapse;
-    border: 0.2em solid #00000088;
+    vertical-align: top;
+    display: inline-block;
+    border: 0.1em solid black;
+    color: #ffffff;
+    margin: auto;
+    border-radius: 0.4em;
 }
 
 section#results td.option_stats table.stat_table td{
@@ -234,6 +246,8 @@ section#results td.option_stats table.stat_table td.label{
     text-align: left;
     font-family: monospace;
     font-size: 110%;
+    font-weight: bold;
+    background-color: #00000066;
 }
 
 section#results td.option_stats table.stat_table td.value{
@@ -267,7 +281,7 @@ section#results td.option_stats table.stat_table td.value span.variation.decreme
 }
 
 section#results td.runes table.rune{
-    font-size: 60%;
+    font-size: 80%;
 }
 
 section#results table#table_optimizations{

public/css/report.css

@@ -14,7 +14,7 @@ section.report{
 }
 
 section.report article{
-    text-align: left;
+    text-align: center;
 }
 
 section.report article h3{
@@ -34,13 +34,22 @@ section.report article img{
     border: 0.1em solid var(--ui-color-border);
 }
 
+@media screen and (max-width : 990px){
+    section.report article img{
+        height: 3em;
+        width: 3em;
+        margin: 0.2em;
+    }
+}
+
 section.report article p{
     color: #ffffff;
+    text-align: left;
+    text-indent: 1em;
+    padding: 0.5em;
 }
 
-section.report article form{
-    border: 0.1em solid #483d2a;
-    border-radius: 0.5em;
-    padding: 0.5em;
-    text-align: center;
+section.report article a.a_button{
+    margin: 0.5em auto;
+    display: inline-block;
 }

public/css/report_skillup.css

@@ -1,3 +1,10 @@
+section.filters table{
+    text-align: left;
+}
+section.filters table td{
+    text-align: left !important;
+}
+
 section.content{
     display: block;
     text-align: left;

public/css/runs.css

@@ -13,6 +13,12 @@ table#runs td.area{
     width: 4em;
 }
 
+table#runs td.area div.area{
+    position: relative;
+    width: 2.4em;
+    height: 2.4em;
+}
+
 table#runs td.area div.area img.area{
     width: 2em;
     height: 2em;
@@ -22,23 +28,18 @@ table#runs td.area div.area img.area{
 }
 
 table#runs td.area div.area span.stage{
-    position: relative;
-    right: -1.5em;
-    bottom: 1.5em;
+    position: absolute;
+    right: 0.5em;
+    bottom: 0em;
     font-size: 80%;
     text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
     pointer-events: none;
-    text-align: right;
-    width: 2em;
-    display: block;
 }
 
 table#runs td.area div.area span.difficulty{
     position: absolute;
     top: 0em;
-    left: 0;
-    width: 1.8em;
-    text-align: right;
+    right: 0.5em;
     pointer-events: none;
 }
 table#runs td.area div.area span.difficulty img.difficulty{

public/css/teams.css

@@ -2,11 +2,13 @@ table#teams{
     width: 100%;
     border-collapse: collapse;
     border: 0.1em solid #000000;
+    border-radius: 0.4em;
 }
 
 table#teams th{
     border-top: 0.1em solid #000000;
     border-bottom: 0.1em solid #000000;
+    background-color: #00000066;
 }
 
 table#teams td{
@@ -43,7 +45,7 @@ table#teams td.team h4 span.stage{
     position: absolute;
     top: 1.3em;
     left: 0;
-    width: 2em;
+    width: 2.4em;
     text-align: right;
     text-shadow: 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.3em #000, 0 0 0.2em #000, 0 0 0.1em #000, 0 0 0.1em #000;
     pointer-events: none;

public/css/ui.css

@@ -43,7 +43,7 @@
      */
     --star-filter-silver: sepia(100%) saturate(500%) grayscale(100%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
     --star-filter-gold: sepia(100%) saturate(500%) hue-rotate(10deg) saturate(200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
-    --star-filter-purple: sepia(100%) saturate(500%) hue-rotate(250deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
+    --star-filter-purple: sepia(100%) saturate(500%) hue-rotate(295deg) saturate(1200%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
     --star-filter-red: sepia(100%) saturate(500%) hue-rotate(320deg) saturate(500%) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000) drop-shadow(0 0 0.1em #000);
     /**
      * Elemental colors.
@@ -159,6 +159,7 @@ header{
     margin: 0 0 1em 0;
     background-color: var(--header-background);
     text-align: left;
+    position: relative;
 }
 header div#logo{
     font-size: 70%;
@@ -185,25 +186,25 @@ header div#logo h1#logo_text span.small{
 }
 @media screen and (max-width : 990px){
     header div#logo{
-        width: 8em;
-        font-size: 60%;
+        position: absolute;
+        top: 1em;
     }
     header div#logo img#logo_img{
         max-width: 5em;
         max-height: 3em;
     }
     header div#logo h1#logo_text span.large{
-        font-size: 50%;
-        margin: -0.2em;
+        /*font-size: 50%;
+        margin: -0.2em;*/
     }
-    header div#logo h1#logo_text span.small{display: none;}
+    header div#logo h1#logo_text span.small{/*display: none;*/}
 }
 header nav#menu{
     display: inline-block;
     height: 2em;
 }
 header nav#menu a{
-    font-size: 110%;
+    font-size: 100%;
     font-weight: bold;
     text-transform: capitalize;
     font-variant: small-caps;
@@ -227,11 +228,14 @@ header nav#menu a:hover{
     text-shadow: var(--nav-shadow-hover);
 }
 @media screen and (max-width : 990px){
-    header nav#menu{height: 2.5em;}
+    header nav#menu{
+        height: initial;
+        display: block;
+        text-align: center;
+    }
     header nav#menu a{
-        font-size: 70%;
         padding: 0.6em 0.2em;
-        margin: 0.3em -0.3em;
+        margin: 0em -0.2em;
         display: inline-block;
         text-align: center;
         border-top: var(--nav-separator);
@@ -245,7 +249,19 @@ header nav#menu a:hover{
 header nav#profile{
     float: right;
     margin-right: 0.5em;
+    position: absolute;
+    right: 0;
+    top: 0em;
+}
+@media screen and (max-width : 990px){
+    header nav#profile{
+        margin-right: 0.5em;
+        position: absolute;
+        top: 1em;
+        right: 0.5em;
+    }
 }
+
 header nav#profile a{
     border-left: 0;
     font-size: 110%;
@@ -278,6 +294,7 @@ footer{
     margin: 2em 0 0 0;
     background-color: var(--header-background);
     padding: 1em 2em 1em 2em;
+    position: relative;
 }
 footer table#footer_table{
     margin-left: auto;
@@ -314,6 +331,7 @@ input, select, a.a_button, textarea{
 a.a_button, input[type=button]{
     cursor: pointer;
     transition: all .3s ease-in-out;
+    padding: var(--input-button-padding);
 }
 input:disabled{
     background: var(--input-background-disabled);
@@ -503,10 +521,8 @@ div.rune_panel span.rune_stars{
 div.rune_panel span.rune_stars img.star{
     width: 1.2em;
     height: 1.2em;
-    margin-left: -0.4em;
-    filter: drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);
+    margin-left: -0.6em;
 }
-div.rune_panel.rune_level_15 span.rune_stars img.star{filter: sepia(100%) saturate(300%) hue-rotate(320deg) saturate(400%) drop-shadow(0 0 0.1em #000000) drop-shadow(0 0 0.1em #000000);}
 div.rune_panel span.rune_level{
     font-size: 130%;
     font-weight: bold;
@@ -730,6 +746,7 @@ div.monster_transformation_panel img.monster_transformation{
  * Rune table
  */
 table.rune{
+    width: 28em;
     border-collapse: collapse;
     display: inline-block;
     vertical-align: top;
@@ -738,8 +755,9 @@ table.rune{
     border-radius: 1em;
     margin: 0.5em;
     background-color: #7d6640;
-    font-size: 70%;
+    font-size: 90%;
     border: 0.3em solid #3c2929;
+    font-family: monospace;
 }
 table.rune td.icon{
     vertical-align: top;
@@ -760,9 +778,16 @@ table.rune td.icon div.assigned img.monster_image{
     border-radius: 15%;
 }
 table.rune td.icon div.rune_panel{font-size: 70%;}
-table.rune td.stats{width: 8em;}
+table.rune td.stats{width: 6em;}
+
+table.rune td.stats table{
+    font-size: 90%;
+    border-collapse: collapse;
+}
 
-table.rune td.stats table{font-size: 90%;}
+table.rune td.stats table td{
+    line-height: 100%;
+}
 
 table.rune td.stats table tr.main_stat{
     font-weight: bold;
@@ -773,8 +798,7 @@ table.rune td.stats table tr.innate_stat{font-style: italic;}
 
 table.rune td.stats table td.stat{text-align: right;}
 table.rune td.stats table td.value{
-    text-align: left;
-    padding-left: 0.2em;
+    text-align: right;
     vertical-align: middle;
     white-space: nowrap;
 }
@@ -799,10 +823,17 @@ table.rune td.details{
     font-size: 80%;
 }
 
+table.rune td.details table.table_details{
+    border-collapse: collapse;
+}
+
+table.rune td.details table.table_details td{
+    line-height: 100%;
+}
+
 table.rune td.details table.table_details td.title{text-align: right;}
 table.rune td.details table.table_details td.value{
-    text-align: left;
-    padding-left: 1em;
+    text-align: right;
 }
 
 table.rune td.details table.table_details span.quality{
@@ -812,6 +843,9 @@ table.rune td.details table.table_details span.quality{
     text-shadow: 0 0 0.1em #000000;
     padding: 0 0.3em;
     width: 5em;
+    height: 1em;
+    font-size: 90%;
+    display: inline-block;
 }
 
 table.rune td.details table.table_details span.quality.quality_normal{background-color: #cccccc;}
@@ -832,6 +866,7 @@ table.rune td.details table.table_details span.quality.quality_legend{background
  * Artifact table
  */
 table.artifact{
+    width: 28em;
     border-collapse: collapse;
     display: inline-block;
     vertical-align: top;
@@ -840,8 +875,9 @@ table.artifact{
     border-radius: 1em;
     margin: 0.5em;
     background-color: #7d6640;
-    font-size: 70%;
+    font-size: 90%;
     border: 0.3em solid #3c2929;
+    font-family: monospace;
 }
 table.artifact td.icon{
     vertical-align: top;
@@ -879,6 +915,7 @@ table.artifact td.details{
     padding-left: 0.5em;
     width: 16em;
     font-size: 80%;
+    border-collapse: collapse;
 }
 
 table.artifact td.details table.table_details td.title{text-align: right;}
@@ -949,7 +986,7 @@ div.craft_panel img.craft_base{
 div.craft_panel img.craft_icon{
     position: absolute;
     width: 1.5em;
-    height: 1.5em;
+    height: 1.5em
     top: 0.8em;
     left: 1.25em;
 }
@@ -966,7 +1003,8 @@ div.craft_panel span.craft_stat{
     font-size: 80%;
     text-shadow: 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
     position: absolute;
-    top: 2.7em;
+    bottom: 0;
+    font-family: monospace;
 }
 div.craft_panel span.craft_stat span.craft_stat_name{
     display: block;